여태까지 배운 HTML과 CSS는 Markup Language에 해당합니다. 우리가 만들고 싶은 사이트를 구축하기 위해서는 정해진 양식대로만 작성하면 됐죠. 여러분들이 지금 보시는 이 문서도, Markup으로 구성되어 있습니다.
그러나, 지금부터 배워나가게 될 Javascript는 Programming Language에 해당합니다. Markup Language에서는 여러분들이 만들고 싶은 웹 사이트를 만들기 위한 방법은 한 가지 방법 밖에는 없었습니다(물론 같은 효과를 내는 방법들은 여러가지 존재하겠지만요). 그 이유는 Markup Language의 특성상, 어떠한 마크업을 하기 위한 방법을 하나 뿐이기 때문입니다. 1수준의 header를 작성하기 위해서는 **<h1>**태그를, 2수준의 header를 작성하기 위해서는 **<h2>**태그를 사용해야했습니다. 이와는 달리, Javascript에서는 똑같은 동작을 구현하기 위한 여러가지 방법들이 존재합니다. 이것이 바로 Programming Language의 특성입니다. Javascript는 여러분들이 하려는 것을 실제로 구현하게 도와주는 Programming Language입니다.
우리가 Javascript를 이용하여 웹 페이지 상에서 무언가를 하고자 한다면, 어떤 것을 이용하면 될까요? 웹 페이지의 요소들을 접근하기 위한 방법이 필요할 것입니다. Web Browser는 이 수단을 우리에게 API라는 형태로 제공합니다. API는 **Application Programming Interface (응용 프로그래밍 인터페이스)**라고 합니다. 인터페이스라는 용어는 상호간의 규약이라고 생각하면 됩니다. 웹 페이지의 요소들을 접근할 수 있도록 해주는 규약과 같은 것이죠.
예를 들면, 웹 브라우저에서는 id attribute를 이용해서 element를 가져올 수 있는 아래와 같은 방법을 제공합니다.
Document.getElementById() - Web API | MDN (mozilla.org)
HTML 문서 내에 JS 문서를 포함시키는 방법에는 총 세 종류가 있습니다.
External Javascript
External Javascript는 말 그대로 외부의 JS 문서를 불러오는 방법입니다. 아래와 같이 HTML 문서의 Head 태그에 포함시켜 정의합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="./index.js"></script>
</head>
<body>
</body>
</html>
Internal Javascript
Internal Javascript는 HTML 문서 내부에 직접 CSS 문서를 포함시키는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
/* js 코드 */
</script>
</head>
<body>
...
</body>
</html>
Inline Javascript Handlers
Inline Javascript Handlers은 특정 HTML Element의 이 벤트 Handler를 지정하는 방법입니다. 아래의 예에서는 버튼이 클릭될 경우 특정 Javascript 코드를 실행시키도록 지정하고 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<button type="button onclick="createParagraph()">Click Me</button>
</body>
</html>