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 로드하기.
댓글 없음:
댓글 쓰기