모던 JavaScript 튜토리얼을 읽고 정리하였습니다.
Hello, world!
이 파트는 실행 환경에 독립적인 코어 자바스크립트(core JavaScript)를 다룬다.
코어 자바스크립트를 다루고 있으나, 학습을 위해서는 스크립트를 실행할 수 있는 환경이 필요하다. 이 튜토리얼은 실행환경으로 브라우저를 사용할 것이다.
웹 페이지에 스크립트를 삽입하는 방법에 대해 알아보자. 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 태그엔 몇 가지 속성이 존재한다.
- type 속성
HTML4에선 스크립트에 type을 명시하는 것이 필수였다. HTML5부터는 타입 명시가 필수가 아니며, 모던 자바스크립트에서는 이 속성의 의미까지 바뀌었다. 이 속성은 자바스크립트 모듈에 사용가능하다. - language 속성
이 속성은 현재 사용하고 있는 스크립트 언어를 나타내며 자바스크립트가 기본 언어이므로 속성의 의미가 퇴색된 상황이다.
주석
<script type="text/javascript"><!--
...
//--></script>
예전에는 위와 같이 script 태그 안에 주석이 존재했으나, 모던 자바스크립트에선 이런 트릭을 사용하지 않는다. 태그 옆에 붙은 주석은
외부스크립트
자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장하고, 웹 문서내에서 src 속성을 이용해 스크립트를 삽입할 수가 있다. src의 속성값은 자바스크립트 파일의 절대 경로 혹은 상대 경로로 지정한다.
<script src="/path/to/script.js"></script>
혹은 다음과 같이 url을 속성값을 사용할 수도 있다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
복수의 스크립트를 삽입하고 싶다면 스크립트 태그를 여러개 사용하면 된다.
스크립트가 길어지면 별개의 분리된 파일로 저장하는 것이 좋다. 스크립트를 별도의 파일에 작성하면 브라우저가 이 스크립트를 캐시에 저장하기 때문에, 여러 페이지에서 동일한 스크립트를 사용할 때 새로 다운받지 않고 캐시로부터 가져오므로 성능상의 이점이 있다.
src 속성이 있으면 태그 내부의 코드는 무시된다.
script 태그는 src 속성과 내부 코드를 동시에 가지지 못한다.
<script src="file.js">
alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다.
</script>
Comments