서문
이 파트는 실행 환경에 독립적인 코어 자바스크립트(core JavaScript)를 다룬다. 코어 자바스크립트를 다루고 있긴 하나, 학습을 위해선 스크립트를 실행할 수 있는 환경이 필요하다. 실행 환경으로 브라우저를 사용하되, Node.js와 같이 브라우저 이외의 환경에 주력하는 학습자를 위해 브라우저 한정 명령어(alert 등)는 최소한으로 사용한다.
먼저, 웹 페이지에 스크립트를 삽입하는 방법에 대해 알아보자. Node.js처럼 서버 사이드 환경에서 스크립트를 실행하고 싶다면 node my.js와 같은 명령어를 사용하면 된다.
'script' 태그
<script> 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있다.
<!DOCTYPE html>
<html>
<body>
<p>스크립트 전</p>
<script>
alert('Hello, world!');
</script>
<p>스크립트 후</p>
</body>
</html>
<script> 태그에는 자바스크립트 코드가 들어가며, 브라우저는 이 태그를 만나면 안의 코드를 자동으로 처리한다.
모던 마크업
<script> 태그에는 몇 가지 속성(attribute)이 있다. 요즘에는 잘 사용하지 않지만, 오래된 코드에서 이러한 속성들을 발견할 수 있다.
type 속성 - <script type = ...>
HTML4에서는 스크립트에 type을 명시하는 게 필수적이었다. 따라서 type="text/javascript" 속성이 붙은 스크립트를 어렵지 않게 찾아볼 수 있었다.
모던 HTML 표준에서는 이 속성의 의미가 바뀌어서, 자바스크립트 모듈에 사용할 수 있게 되었다.
HTML4에서는 스크립트에 type을 명시하는 게 필수적이었다. 따라서 type="text/javascript" 속성이 붙은 스크립트를 어렵지 않게 찾아볼 수 있었다.
모던 HTML 표준에서는 이 속성의 의미가 바뀌어서, 자바스크립트 모듈에 사용할 수 있게 되었다.
language 속성 - <script language = ...>
현재 사용하고 있는 스크립트 언어를 나타낸다. 지금은 자바스크립트가 기본 언어이기 때문에, 사용할 필요가 없다.
스크립트 전후에 위치한 주석
<script type="text/javascript"><!--
...
//--></script>태그 옆에 붙은 주석은 <script> 태그를 처리하지 못하는 브라우저가 해당 스크립트를 읽지 못하게 하려고 일종의 트릭으로써 동작했다. 단, 최근 브라우저들은 <script>를 처리하지 못하는 경우가 없으므로, 이런 형태의 주석은 굉장히 오래된 코드라는 사실을 알 수 있다.
외부 스크립트
코드의 양이 많은 경우에는 따로 파일로 소분하여 저장할 수 있다.
<script src="/path/to/script.js"></script>
<script src="script.js"></script>
<script src="https://github.com/Knabin/JavaScript-Study/path/to/script.js"></script>절대 경로(/path/to/script.js)는 사이트의 루트에서부터 파일이 위치한 경로를 나타낸다. "script.js"처럼 현재 페이지에서의 상대 경로를 사용할 수도 있고, URL 전체를 속성으로 사용할 수도 있다.
HTML 안에 직접 스크립트를 작성하는 방식은 스크립트가 아주 간단할 때만 사용하며, 스크립트가 길어지는 경우에는 별개의 분리된 파일로 만들어 저장하는 것이 좋다.
스크립트를 별도의 파일에 작성하면, 브라우저가 스크립트를 다운받아서 캐시(cache)에 저장하기 때문에 성능상의 이점이 있다.
여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 캐시로부터 이미 받아놓은 스크립트를 가져와 사용한다.
이를 통해 트래픽이 절약되며, 웹 페이지의 실제 속도가 빨라진다.
src 속성이 있으면 태그 내부의 코드는 무시된다.
따라서 <script src="...">로 외부 파일을 연결할지, <script> 태그 안에 코드를 작성할지 선택해야 한다.
<script src="file.js">
alert(1); // src 속성이 사용됐으므로 이 코드는 무시됩니다.
</script>
<script src="file.js"></script>
<script>
alert(1); // OK!!
</script>
과제
"I'm JavaScript!" alert 창 띄우기
<!DOCTYPE html>
<html>
<body>
<script>
alert("I'm JavaSrcipt!");
</script>
</body>
</html>
외부 스크립트에서 alert 창 띄우기
task_2.html
<!DOCTYPE html>
<html>
<body>
<script src="alert.js"></script>
</body>
</html>alert.js
alert("I'm JavaScript!");
해당 포스트는 'The Modern JavaScript Tutorial' 문서를 읽으며 개인 백업용으로 메모하였습니다.
The Modern JavaScript Tutorial
We want to make this open-source project available for people all around the world. Help to translate the content of this tutorial to your language!
javascript.info