웹브라우저 자바스크립트 - HTML에서 JavaScript 로드하기
HTML에서 JavaScript 로드하기 - https://opentutorials.org/course/1375/6620
html과 javascript는 다른 문법을 가지고있는 언어이기 때문에
html에서 javascript을 로드할때 어떻게 javascript인지 구분할 수 있는지에 대한 기준이 필요하다.
html에서 javascript를 로드하는 방법
1. inline방식
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>
빨간색 - html문법
연두색 - javascript문법
html과 javascript 문법이 함께 있다면 정보+제어가 동시에 되기 때문에 여러가지 문제가 발생하게 된다.
2. script방식
<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" /> //onclick이 사라지고 온전히 html태그로만 이루어져 있다.
<script> //script까지 html의 문법이며 그 이후 </script>가 나오기 전까지의 내용이 javascript문법이다.
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
</script>
</body>
</html>
브라우저는 위에서부터 html태그를 읽고 script태그안에 있는 내용을 javascript로 해석한다.
html과 javascript문법이 나뉘어져서 각 각의 문법을 수정할 때 전체html을 확인할 필요 없이 <script></script>사이만 수정하면 된다.
정보와 제어가 구분되어 짐.
3. 외부파일로 분리 (html, javascript를 더 엄격하게 분리하는 방법, 추천)
<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" />
<script type="text/javascript" src="script.js"></script> //js파일을 가져와서 <script></script>사이에 javascript가 있는 것처럼 로드됨
</body>
</html>
html파일 - html, javascript가 별도로 나누어져 있어서 정보로서의 가치가 더 많아짐
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
script.js파일
Script 파일의 위치
1. head태그에 위치하는 경우
<!DOCTYPE html>
<html>
<head>
<script src="script2.js"></script> //js안에 있는 id값들은 html에서 아직 로드되지 않았기 때문에 에러가 날 수 있음.
</head>
<body>
<input type="button" id="hw" value="Hello world" />
</body>
</html>
html파일
window.onload = function(){ //window.onload는 웹페이지의 모든 이미지,내용들이 로드되고나면 실행되기 때문에 head에 js를 선언해도 된다.
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
}
script2.js파일
2. body태그 하단에 위치하는 경우(추천)
페이지의 모든 코드들이 로드되고 난 후에 js파일이 로드되기 때문에 존재하지않는id, class들이 없다.
->에러가 날 확률이 적어진다.
->js파일이 나중에 로드될 경우 html의 정보들이 먼저 보여지기 때문에 웹페이지를 보는 사용자입장에서는 페이지가 빠르다고 느낀다.