목차
1. inline 방식
2. script 태그 이용
3. 외부 파일 로드
html에서 javascript를 사용할 수 있는 방법은 크게 inline방식, script 태그 사용, 외부 파일 로드 방법이 있다.
1. inline 방식
html 태그의 속성값으로 javascript를 직접 넣는 방법이다.
- 유지 보수가 쉽지 않다.
- 아래 예시 속의 onclick의 속성 값이 javascript 코드이다.
<input type="button" onclick="alert('hello world')" value="hello world" />
2. script 태그 이용
<script> 태그 안에 자바스크립트 코드를 작성하는 방법이다.
- <script> 태그를 <head> 태그 안에 쓰게 되면 오류가 발생할 수도 있기 때문에
<body> 태그가 끝나는 지점에 <script> 태그를 넣는 것이 좋다.
( 아래 예시 속의 <script> 태그가 <head> 태그 안에 있었다면 id 값을 가진 요소를 찾지 못해서 오류가 발생한다. )
<input type="button" id="hw" value="hello world" />
<script>
var hw = document.getElementById('hw');
hw.addEventListener('click', function() {
alert('hello world');
})
</script>
- onload() 함수는 웹 페이지의 모든 코드가 다 읽히고 나서 실행된다.
그래서 아래 코드는 <head>태그 안에 있어도 오류가 발생하지 않는다.
<script>
window.onload = function(){
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('hello world');
})
}
</script>
3. 외부 파일 로드
<script> 태그의 src 속성을 이용해서 외부의 자바스크립트 파일을 가져오는 방식이다.
- 스크립트를 별도의 파일로 작성하면 브라우저가 스크립트를 다운 받아 캐시(cache)에 저장하기 때문에,
성능상의 이점이 있다. 여러 페이지에서 동일한 스크립트를 사용하는 경우 한 번만 다운 받으면 된다.
트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다.
<script src="./script.js"></script>
- 생활코딩 javascript for web browser 강의를 듣고 정리한 내용입니다.
www.youtube.com/playlist?list=PLuHgQVnccGMDTAQ0S_FYxXOi1ZJz4ikaX
JavaScript for Web Browser (생활코딩)
www.youtube.com
- 모던 자바스크립트 튜토리얼도 참고하였습니다.
ko.javascript.info/hello-world
Hello, world!
ko.javascript.info