반응형
웹브라우저 또는 HTML을 프로그래밍적으로 제어해주는 것을 Javascript라고 한다.
자바스크립트를 HTML에서 로드하는 방법을 알아보자.
1. inline
inline방식은 태그에 직접 자바스크립트를 기술하는 방식이다.
태그에 연관된 스크립트가 분명히 드러나는 장점이 있지만 정보와 제어가 섞여있기 때문에 유지보수 측면에서는 가치가 떨어진다.
1 2 3 4 5 6 | <!DOCTYPE html> <html> <body> <input type="button" onclick="alert('Hello world')" value="Hello world" /> </body> </html> | cs |
2. script
<body>태그 내에 <script></script> 태그를 생성하여 자바스크립트 코드를 삽입하는 방식이다.
inline방식과 다르게 html태그와 js코드를 분리할 수 있는 장점이 있다.
1 2 3 4 5 6 7 8 9 10 11 12 | <!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> | cs |
위에서 아래로 코드를 인식하다가 <script>태그를 만나면 자바스크립트 코드로 인식하고 실행하고 </script>를 만나면 다시 html 코드로 인식한다.
☆ <script>까지 html코드로 작동.
3. 외부 파일로 분리
자바스크립트 파일과 html 파일을 따로 분리하는 방식이다.
html문서에서 자바스크립트 코드를 완전히 바깥으로 밀어낼 수 있다는 점에서 html과 js파일의 결합도를 낮춘다. 또 html 여러개의 파일이 하나의 js파일을 참조가 가능하므로 유지보수가 용이해진다.
1 2 3 4 5 6 7 | <!DOCTYPE html> <html> <body> <input type="button" id="hw" value="Hello world" /> <script src="./script.js"> </script> </body> </html> | cs |
<test01.html>
1 2 3 4 | var hw = document.getElementById('hw'); hw.addEventListener('click', function(){ alert('Hello world'); }) | cs |
<script.js>
☆ test01.html에서 <script>태그의 src는 html의 속성값으로 인식된다.
반응형
'Web > HTML_JS_CSS' 카테고리의 다른 글
| [Javascript] BOM_Browser Object Model (0) | 2019.01.14 |
|---|---|
| [Javascript] Script 파일의 위치와 onload.. (0) | 2019.01.08 |
| [css] 선택자 (0) | 2019.01.07 |
| [JS] 회원가입 유효성 검사 (1) | 2018.08.17 |
| [HTML] 회원가입 폼 만들기 (0) | 2018.08.17 |