Amarans
0406_JavaScript_2 | HTML에서 JavaScript 로드하기 | 본문
inline
inline 방식은 태그에 직접 자바스크립트를 기술하는 방식이다. 장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다. 하지만 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다.
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>script
<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>외부 파일로 분리
js를 별도의 파일로 분리할 수도 있다. 장점은 보다 엄격하게 정보와 제어를 분리할 수 있다. 하나의 js 파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있다. 캐쉬를 통해서 속도의 향상, 전송량의 경량화를 도모할 수 있다.
script2.js
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" />
<script type="text/javascript" src="script2.js"></script>
</body>
</html>Script 파일의 위치
script를 head 태그에 위치시킬 수도 있다. 하지만 이 경우는 오류가 발생한다.
<!DOCTYPE html>
<html>
<head>
<script src="script2.js"></script>
</head>
<body>
<input type="button" id="hw" value="Hello world" />
</body>
</html>script2.js의 코드를 수정해야 한다.
window.onload = function(){
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
}window.onload = function(){} 함수는 웹브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되는 함수다.
'JavaScript2' 카테고리의 다른 글
| 0414 JavaScript | Element객체 /식별자 / 조회 / 속성 API | (0) | 2020.04.14 |
|---|---|
| 0413 JavaScript | HTMLElement , HTMLCollection , jQuery 객체 | (0) | 2020.04.13 |
| 0409 JavaScript | Dom , 제어대상찿기 , jQuery | (0) | 2020.04.09 |
| 0408_JavaScript | Navigator , 창 제어 | (0) | 2020.04.08 |
| 0407 JavaScript | BOM , Window , Location객체 | (0) | 2020.04.07 |
'JavaScript2' Related Articles
more
Comments