모던 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> 태그 안에 주석이 존재했으나, 모던 자바스크립트에선 이런 트릭을 사용하지 않는다. 태그 옆에 붙은 주석은 <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>'Front-end > JavaScript' 카테고리의 다른 글
| [모던 JavaScript 튜토리얼] 2.2 코드 구조 (0) | 2021.01.05 |
|---|---|
| 러닝 자바스크립트 4장 : 제어문 (0) | 2020.11.17 |
| 러닝 자바스크립트 3장 : 리터럴 변수, 상수, 데이터 타입 (0) | 2020.11.16 |
