HTML에서 JS 로드하기

JavaScript로 웹 페이지를 제어하기 위해서는 JavaScript를 로드해야 함.

inline

태그에 직접 자바스크립트를 기술하는 방식.

장점 : 태그에 연관된 스크립트가 분명하게 드러남.
단점 : 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어짐.

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

script

script 태그를 만들어 JS 코드를 삽입하는 방식.

장점 : 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>

외부 파일로 분리

js를 별도의 파일로 분리함.

장점 : 보다 엄격하게 정보와 제어를 분리. 재활용성 높임. 캐쉬를 통한 속도 향상, 전송량 경량화

!DOCTYPE html>
<html>
<body>
    <input type="button" id="hw" value="Hello world" />
    <script type="text/javascript" src="script2.js"></script>
</body>
</html>

var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
    alert('Hello world');
})

script 파일 위치

script 파일을 head 태그에 위치시킬 땐 window.onload = function(){} 함수 안에 코드를 작성해야 함. window.onload = function(){} 함수는 웹 브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해 호출되는 함수임. 단, script를 body 하단에 사용하는 것이 로드할 때 가장 빠름.

HTML에서 JS 로드하기

inline

script

외부 파일로 분리

script 파일 위치

정리