✔️ Hello, world!
'script' 태그
<script> 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있다.
브라우저는 이 태그 안의 코드를 자동으로 처리한다.
<!DOCTYPE HTML>
<html>
<body>
<script>
alert( 'Hello, world!' );
</script>
</body>
</html>
모던 마크업
<script> 태그엔 몇 가지 속성(attribute)이 있다(현재는 잘 안쓰임).
- type 속성: <script type=...>
- HTML4에선 type="text/javascript"이 붙은 스크립트를 명시하는 것이 필수였다. 모던 HTML 표준에선 자바스크립트 모듈에 사용할 수 있다.
- language 속성: <script language=...>
- 현재 사용하고 있는 스크립트 언어를 나타낸다. 지금은 자바스크립트가 기본 언어이므로 사용할 필요가 없어졌다.
- 스크립트 전후에 위치한 주석
- 지난 15년간 출시된 브라우저는 <script>태그를 처리할 수 있기 때문에 모던 자바스크립트에선 이런 트릭을 사용하지 않는다.
<script type="text/javascript"><!--
...
//--></script>
외부 스크립트
자바스크립트는 CSS처럼 외부서 작업한 파일을 불러올 수 있다. src 속성을 사용해 HTML에 삽입한다.
/path/to/script.js는 사이트의 루트부터 파일이 위치한 절대 경로를 나타낸다. 같은 폴더 내에 있는 파일인 "script.js"를 src="script.js"로 참조하는 것처럼 현재 페이지에서 상대 경로를 사용하는 것도 가능하다.
<script src="/path/to/script.js"></script>URL 전체를 속성으로 사용할 수도 있다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>복수의 스크립트를 HTML에 삽입하고 싶다면 태그를 여러 개 사용하면 된다.
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…ℹ️ 주의
스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋다. 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에 더 빠르다.
여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 캐시로부터 스크립트를 가져와 한 번만 다운한다.
⚠️ src 속성이 있으면 태그 내부의 코드는 무시된다.
<script> 태그는 src 속성과 내부코드를 동시에 가지지 못한다. <script src="...">로 외부파일을 연결할지 <script> 태그 내에 코드를 작성할지 선택해야 한다.
<script src="file.js"> alert(1); // src 속성이 사용되었으므로 이 코드는 무시된다. </script> <script src="file.js"></script> <script> alert(1); </script>
✔️ 코드 구조
문
문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미한다.
서로 다른 문은 세미콜론(;)으로 구분한다. 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성하는 것이 일반적이다.
alert('Hello');
alert('World');세미콜론
자바스크립트는 줄 바꿈이 있으면 대부분 ‘암시적’ 세미콜론으로 해석하며 '세미콜론 자동 삽입(automatic semicolon insertion)'이라 한다. 하지만 '대부분의 경우’가 '항상’을 의미하진 않는다.
alert(3 +
1
+ 2); //6어떤 줄이 "+" 로 끝나면, 그 줄은 '불완전한 표현식’이므로 세미콜론이 필요하지 않다.
∴ 줄 바꿈으로 문을 나눴더라도, 문 사이엔 세미콜론을 넣는 것이 좋다. 세미콜론은 생략할 수 있다. 하지만 세미콜론을 사용하는 것이 더 안전하다.
ℹ️ 에러 예제
세미콜론이 정말로 필요하지만 자바스크립트가 이를 추정하지 못하는 상황도 존재한다.
alert("제대로 동작합니다.");
[1, 2].forEach(alert)세미콜론이 없을 때 에러가 발생하는 이유는 자바스크립트가 대괄호 [...] 앞에는 세미콜론이 있다고 가정하지 않기 때문이다.
주석
주석(comment): 무슨 일이 왜 벌어지고 있는지를 설명해준다.
스크립트의 어느 곳에나 작성할 수 있다. 자바스크립트 엔진은 주석을 무시하기 때문에 주석의 위치는 실행에 영향을 주지 않는다.
- 한 줄짜리 주석은 두 개의 슬래시 //로 시작된다.
- 여러 줄의 주석은 슬래시와 별표 /*로 시작해 별표와 슬래시 */로 끝난다.
- 주석 /* … */ 안에 코드가 들어가도 실행되지 않는다.
ℹ️ 단축키 사용하기
Ctrl+/ : 한 줄 주석
Ctrl+Shift+/ : 여러 줄 주석
Ctrl+/ : 한 줄 주석
Ctrl+Shift+/ : 여러 줄 주석
ℹ️ 중첩 주석은 지원하지 않는다.
/*...*/안에 또 다른 /*...*/을 넣으면 에러가 발생한다.
/*
/* 중첩 주석 ?!? */
*/
alert( 'World' );
