power-girl0-0

HTML에서 JavaScript 로드하기 본문

언어/Javascript

HTML에서 JavaScript 로드하기

power-girl0-0 2021. 2. 6. 15:25
728x90

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

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

 inline 

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

태그에 연관된 스크립트가 분명하게 드러난다는 것이 장점이다.

 

위 소스와 같이 정보 역할을 하는 html과 제어 역할을 하는 Javascript가 섞여 있어서 정보로서의 가치는 떨어진다.

이를 해결할 수 있는 방법은 스크립트 태그를 사용하는 것이다. 

 script 태그 

<script></script> 태그를 만들어서 여기에 자바스크립트 코드를 삽입하는 방식이다. 

 

해당 태그를 사용하면, inline과 같이 html 코드 안에 javascript코드가 섞여있지 않다.

즉, html 태그와 js 코드를 분리할 수 있다.

 외부 파일 로드 

js를 별도의 파일로 분리할 수도 있다.

아래 예제를 통해서 살펴보자.

 

script.html

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

script.js

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

위 소스코드는 js파일을 생성하여 javascript코드를 따로 적은 후, html에서 해당 파일을 불러와 사용하는 방법이다.

실행하여 웹브라우저에서 확인해보면 script.js파일을 html에서 불러온 것을 확인할 수 있다.

 

이를 사용하면, 보다 엄격하게 정보와 제어를 분리할 수 있다.

하나의 js 파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있고, 캐시를 통해서 속도의 향상, 전송량의 경량화를 도모할 수 있는 장점을 갖고 있다.

 script 파일의 위치 

이전에는 자바스크립트 코드를 body태그에다가 넣었는데, 이번에는 head 태그에 넣어보자.

 

위 예제와 같은 소스파일에서 자바스크립트 코드를 head태그에 넣는다면, 스크립트 코드가 실행되지 않는다.

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

모든 Element를 해석하지 않고, 스크립트 문이 먼저 실행되기 때문에 스크립트  코드의 값은 null이 되어 실행되지 않는다.

이러한 문제를 해결하기 위해서 window.onload = function(){}함수를 이용한다.

window.onload = function(){} 함수는 웹 브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되는 함수이다.

 

따라서, head태그에다가 위치시키려면 아래와 같이 코드를 작성해야 한다.

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

이렇게 작성하면, 소스에 대한 모든 Element 해석이 끝났을 때 함수를 실행시켜서 자바스크립트를 실행시켜준다.이로 인해, head태그에서도 자바스크립트 코드가 실행되는 것이다.

하지만, 좀 더 쉬운 방법은 body태그 안에 적는 것이다.

body태그는 모든 Element들이 다 해석된 다음에 스크립트 문이 실행되기 때문에 해당 함수를 사용하지 않아도 된다.

 

따라서, script 파일은 head 태그보다 body태그에 위치하는 것이 더 좋은 방법이라고 할 수 있다.

 

 

 

 

 

728x90
저작자표시

'언어 > Javascript' 카테고리의 다른 글

Object Model 구조  (0) 2021.02.07
Object Model & 객체화  (0) 2021.02.06
[객체지향] 참조  (0) 2021.02.06
[객체지향] 데이터 타입  (0) 2021.02.05
[객체지향] Object  (0) 2021.02.05
'언어/Javascript' Related Articles more
Comments