In this post, 01 JavaScript lecture is introuduced.

HTML and JS

JavaScript는 HTML 위에서 동작하도록 만들어진 언어이다. HTML과 JS가 함께 쓰이는 방법은 다음과 같다.

script tag

HTML에 script tag를 사용하여 웹브라우저에게 이것이 JS 코드임을 알려주어 다음과 같이 JS 코드를 작성할 수 있다.

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
     </head>
     <body>
         <script>
             document.write('hello world');
         </script>
     </body>
 </html>

‘hello world’를 html로 적는 것과 JS로 적는 것에 어떤 차이가 있을까. HTML로 1+1을 적으면 화면에 1+1이 표시되지만 document.write(1+1)을 적으면 동적으로 계산되어 2가 화면에 나타난다.

event

두 번째 방법은 event이다. 아래와 같이 input tag를 이용하면 ‘hi’ 가 적힌 버튼을 만들 수 있다.

<body>
        <input type="button" value="hi">
</body>

이 때, 사용자가 버튼을 눌렀을 때 경고를 표시하는 기능을 만들고 싶다면 다음과 같이 onclick 속성을 이용하면 된다.

<input type="button" value="hi" onclick="alert('warning!')">

HTML onclick attribute은 다음의 특징을 가지고 있다.

• 속성 값으로 반드시 JS가 와야한다.
• onclick의 속성값은 웹 브라우저가 기억하고 있다가 onclick 속성이 위치하고 있는 tag가 클릭되면 기억하고 있던 JS의 코드를 문법에 맞게 해석하여 웹 브라우저가 동작함.

웹 브라우저 위에서 일어나는 일들을 event 라 한다. 위 경우에는 사용자가 버튼을 클릭하는 것이 event이다.

똑같은 input tag에 대해서 type을 text로 바꾸면 텍스트 상자가 나타나는데 이 때 아래와 같이 onchange 속성을 이용하면 입력한 텍스트의 내용이 변했을 때 라는 이벤트를 체크하여 알림을 준다.

<input type="text" onchange="alert('changed')">

이렇게 웹 브라우저는 웹 브라우저 위에서 일어나는 여러가지 일들 중 몇 가지를 event 로 정의하고 있다. 우리는 이 event를 이용하여 사용자와 상호작용하는 웹 페이지를 만들 수 있다. 위 코드 중 onclick과 onchange가 바로 event이다.

Javascript and Browswer

클라이언트가 웹 브라우저에서 특정 서버에 접속하여 js 파일을 받으면 브라우저에서 이 js 파일을 실행한다. 브라우저 내부에는 JavaScript 엔진이 내장돼 있다. Js 코드는 브라우저가 HTML 안 <script> 태그나 .js 파일을 받는 순간 바로 실행 환경(엔진)으로 전달된다. 엔진은

• 사람이 작성한 소스코드(자바스크립트) → CPU가 이해할 수 있는 기계어로 바꿔주고 실행까지 담당한다.
• 브라우저 안에 내장되어 있어, 우리가 따로 설치하지 않아도 실행된다.
• 브라우저마다 자기만의 엔진을 갖고 있다. Chrome / Node.js(자바스크립트를 실행할 수 있게 해주는 실행 환경(Runtime)) → V8