javascript 실행 하기

1. inline 방식으로 js 구현

정보(html)와 제어(js)가 혼재. 유지보수가 어렵다.

<!DOCTYPE html>

<html>

<body>

    <input type="button" onclick="alert('Hello world')" value="Hello world" />

</body>

</html>

button이 onclick되면 alert(…)를 실행함. alert부분이 js 코드임. button, onclick 등은 이미 약속된 html 속성임. 

2. 스크립트 방식으로 삽입

<script></script> 태그를 만들어 삽입. html 태그와 js코드의 분리가 가능하다. 

<!DOCTYPE html>

<html>

<body>

    <input type="button" id="hw" value="Hello world" />

    <script type="text/javascript">

             var hw = document.getElementById('hw');

             hw.addEventListener('click', function(){

              alert('Hello world');

        })

    </script>

</body>

</html>

html5부터는 <script type="text/javascript">부분을 <script>로만 표시해도 됨. var hw에서 })까지가 js코드 이고 나머지는 html임.

3. 외부 파일로 js 코드 분리

js를 파일로 만들어 분리. 정보와 제어의 분리. 재활용성 강화. 재 사용시 전송량 감소 등의 잇점이 있다. 

html 파일

<!DOCTYPE html>

<html>

<body>

    <input type="button" id="hw" value="Hello world" />

    <script type="text/javascript" src="script2.js"></script>

</body>

</html>

script2.js 파일

var hw = document.getElementById('hw');

hw.addEventListener('click', function(){

    alert('Hello world');

})

html은 100%의 html 코드만으로 이루어짐. 

html은 js를 만나면 화면 렌드링을 멈추고 js 파일을 다운한다. 따라서 body 뒷부분에 위치시키는 것이 유리. 

<script type="text/javascript" src="script2.js"></script> 부분은 script2.js파일의 다운이 완료되면 js 스크립트를 <script>와 </script>사이에 삽입하게 된다. 

3. script 파일의 위치

스크립트를 head 위치에 넣을 수 있는데 body에 있는 button이 생성되기 전이므로 오류가 발생한다. 따라서 브라우저의 모든 구성 요소의 로드가 끝났을 때 js가 호출되어야 한다. 만일 head부에 넣으려면 js부분은 windows.onload=function(){}으로 감싸주면 구성 요소가 로딩된 후에 js 코드가 실행되게 된다. 

window.onload = function(){

    var hw = document.getElementById('hw');

    hw.addEventListener('click', function(){

        alert('Hello world');

    })

}

4. 실행 방법

파일을 저장하고 chrome의 파일->열기에서 오픈하면 자동실행.

js 파일만 실행 시는 Ctrl+Shift+J(windows), Comm+Alt+J(Mac)로 샐행 가능. 

참고

[1] 생활코딩, js 로드하기.