반응형
1. inline
- 태그에 직접 자바스크립트를 기술하는 방식. 정보와 제어가 섞여 있으므로 정보로서의 가치가 떨어진다.
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>2. 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>3. 외부 파일로 분리
- js를 별도 파일로 분리하는 방식. 엄격하게 정보와 제어를 분리할 수 있다는 장점이 있다.
하나의 js파일을 여러 웹 페이지에서 로드할 수 있으므로 js의 재활용성을 높일 수 있다.
또한 캐쉬를 통해 속도의 향상, 전송량의 경량화를 도모할 수 있다.
<!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');
})4. 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(){}
웹브라우저의 구성요소에 대한 로드가 끝났을 때 브라우저에 의해 호출되는 함수(이벤트).
window.onload = function(){
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
}
script파일은 head 태그(4)보다 페이지의 하단에 위치(3)시키는 것이 더 좋은 방법이다.
반응형
'Front-End: Web > JavaScript' 카테고리의 다른 글
| $(documenet).ready (0) | 2020.09.29 |
|---|---|
| uncaught referenceerror $ is not defined (0) | 2020.09.25 |
| [생활코딩: JavaScript] 3. 데이터타입 - 문자열과 숫자 (0) | 2020.09.16 |
| [생활코딩: JavaScript] 2. HTML과 JavaScript의 만남 (0) | 2020.09.16 |
| [생활코딩: JavaScript] 1. Intro (0) | 2020.09.16 |
