지금부터 하는 튜토리얼은 플랫폼 독립적인 코어 자바스크립트입니다. Node.JS나 다른 플랫폼에 대해서는 나중에 다루게 될 겁니다. 그리고 가장 손쉽게 다룰 수 있는 것이 브라우저 환경이므로 "alert"와 같이 브라우저에서 작동하는 커맨드가 많이 나오게 될 것이라는 점도 양지 바랍니다.
이제 처음으로 웹페이지에 스크립트를 추가하는 법을 알아봅니다.
"script" 태그
자바스크립트는 HTML 문서내 어느 부분에서든 <script> 태그와 함꼐 들어갈 수 있습니다. 예를 들자면 아래와 같습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script>
alert( 'Hello, world!' );
</script>
<p>...After the script.</p>
</body>
</html>
| cs |
The modern markup
<script> 태그는 현재는 거의 쓰이지 않아 오래된 코드에서나 찾아볼 수 있는 몇가지 attribute를 가지고 있습니다.
type attribute: <script type=...>
HTML4의 예전 스탠다드에서 사용되었습니다. 통상 type="text/javascript"의 형태로 사용되었는데 현대 HTML에서는 자동으로 type을 정해주므로 현재는 쓸 필요가 없습니다.
language attribute: <script langauge=...>
이 attribute는 어떤 언어가 스크립트로 오는가 하는 것을 알려주기 위한 것이었는데 현재는 JavaScript가 디폴트로 설정되어 있으므로 사용할 필요가 없습니다.
스크립트 전후의 주석
아주 오래된 문서나 가이드를 보면 아래와 같이 <script>태그 내에 주석이 달려있는 경우가 있습니다.
1
2
3
|
<script type="text/javascript"><!--
...
//--></script>
| cs |
이것은 <script>라는 태그를 알지 못하는 오래된 브라우저에서 내부의 내용을 숨기기 위한 기법이었습니다. 그러나 대략 15년전 부터는 그런 브라우저는 사라졌기 때문에 필요없게 되었습니다. 여기서 이걸 언급하는 이유는 이런 코드를 보면 너무 오래된 것이므로 그 코드는 공부할 필요가 없다는 점을 알리기 위함입니다.
외부 스크립트
코드가 길면 독립된 파일로 src 태그를 사용하여 HTML 내에 붙일 수 있습니다.
1
|
<script src="/path/to/script.js"></script>
| cs |
위와 같이 site root로부터의 절대경로를 지정해주면 됩니다.
또는 현재 페이지로부터의 상대 경로를 사용할 수도 있습니다. 예를 들어 현재 페이지의 폴더에 script.js라는 파일이 있다고 할 때,
src="script.js"
| cs |
전체 URL을 지정하는 방법도 가능합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
| cs |
여러 개의 스크립트를 불러오고자 한다면 태그를 여러번 사용하면 됩니다.
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…
| cs |
* 참고사항
아주 단순한 코드만 HTML내에 직접 작성하기를 추천합니다. 복잡한 스크립트는 독립된 파일로 작성하는 편이 좋은데, 그렇게 독립된 파일로 두는 편이 좋은 이유는, 브라우저가 그 파일을 다운로드하여 캐쉬 메모리에 두게 되고, 다른 페이지에서 같은 파일을 이용하려 할때 또 다시 다운로드할 필요가 없어지기 때문입니다.
*<script> 내에 src 태그가 설정되면 나머지 내용은 무시됩니다. 따라서 한 번에 하나의 src 태그만 사용 가능합니다.
<script src="file.js">
alert(1); // 이 줄은 무시됨
</script>
| cs |
위의 코드는 아래와 같이 두개의 태그로 잘라줘야 합니다.
<script src="file.js"></script>
<script>
alert(1);
</script>
| cs |
Code Structure
자바스크립트의 코드는 세미콜론(;)으로 구분됩니다. 다만 세미콜론을 붙이지 않더라도 인터프리터가 묵시적으로 세미콜론이 있다고 가정하여 자동으로 삽입하므로 꼭 붙여야하는 것은 아닙니다.
그러나, 문장이 끝나지 않은 채 다음 줄로 넘어갔다면 세미콜론이 자동으로 삽입되지 않습니다.
alert(3 +
1
+ 2);
| cs |
이렇게 하나의 문장이 여러 개로 나뉘어 졌을 때는 세미콜론이 무조건 들어가지 않으며, 6이라는 창을 브라우저에 잘 띄우게 됩니다(물론 콘솔에서는 이렇게 안 되겠죠).
그러나 꼭 세미콜론이 필요한데도 자바스크립트가 자동으로 세미콜론 삽입에 실패하는 경우가 있습니다.
다음과 같은 코드를 살펴봅시다.
[1, 2].forEach(alert)
| cs |
이 코드는 1, 2를 차례차례 경고창에 보여주라는 코드입니다. 그런데 만약 앞 줄에 이런 것이 있다고 생각해봅시다.
alert("에러가 발생")
[1, 2].forEach(alert)
| cs |
그러나 윗줄에 세미콜론이 있다면 얘기가 달라집니다.
alert("에러 없음");
[1, 2].forEach(alert)
| cs |
자바스크립트는 square bracket [....]앞에 세미콜론을 자동으로 넣어주지 않으므로 처음 에러가 난 코드는
alert("There will be an error")[1, 2].forEach(alert)
| cs |
따라서 세미콜론을 생략할 수는 있지만 언제나 문장의 끝에 세미콜론을 붙여주는 편이 안전합니다. 특히 초심자에게는 말입니다.
주석
코드가 길어지고 복잡해짐에 따라 지금 이 코드가 무엇을 위한 것인지 설명하는 주석이 중요해집니다.
한 줄 주석: //
// 한줄 전체 주석
alert('Hello');
alert('World'); // 문장 뒤도 가능
| cs |
여러 줄 주석: /* ... */
/* 여러 줄 주석의 예입니다..
This is a multiline comment.
*/
alert('Hello');
alert('World');
| cs |
종종 어떤 코드의 기능을 임시로 멈추어 두는 데에도 사용됩니다.
/* 코드를
alert('Hello');
*/
alert('World');
| cs |
주석 안에 또 주석(nested comment)은 허용되지 않습니다.
/*
/* nested comment ?!? */
*/
alert( 'World' );
| cs |
The modern mode, "use strict"
자바스크립트는 호환성 문제없이 발전해왔습니다. 그래서 새로운 기능이 언어에 추가되어도 이전 기능은 바꾸지 않았는데 그러다보니 애초에 잘못된 방향으로 가고 있던 부분들까지 오래도록 수정없이 진행된 점이 문제였습니다.
2009년에 ECMAScript5(ES5) 등장하고서야 기존의 문제점을 수정하고 새로운 기능을 언어에 추가했는데, 이 새로운 기준을 사용하려면 특별한 지시문인 "use strict"라는 리터럴을 사용합니다.
"use strict"
스크립트의 가장 상단(중간에 있으면 무시됩니다)에 "use strict" 또는 'use strict'라는 문자열을 넣어주면, 전체 스크립트가 최신 스탠다드 방식으로 작동됩니다.
"use strict";
// this code works the modern way
...
| cs |
만약 이 지시문이 스크립트 전체의 앞이 아니라 함수 하나의 앞에 써 있다면 그 함수에만 최신 스탠다드가 적용되는데, 보통은 스크립트 전체의 앞에 사용합니다.
구체적으로 이 지시문을 사용하여 최신 스탠다드를 따르는 것과 그렇지 않은 것의 차이는 차차 다룰 예정입니다. 여기서는 특별한 말이 있지 않은 이상 전부 "use strict"를 사용하여 최신의 스탠다드를 따르는 것으로 가정합니다.
댓글 없음:
댓글 쓰기