1. inline
: 태그에 직접 자바스크립트를 기술하는 방식
장점
- 태그에 연관된 스크립트가 분명하게 드러난다.
단점
- 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다.
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<input type="button" onclick="alert('hello wolrd')" value="Hello">
</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라는 아이디를 가진 태그를 hw 변수에 담는다 -->
hw.addEventListener('click', function(){ <!-- hw가 클릭이 되면 아래의 함수를 시행한다. -->
alert('Hello world');
})
</script>
</body>
</html>3. 외부파일의 분리
: js를 별도의 파일로 분리할 수도 있다
장점
- 보다 엄격하게 정보와 제어를 분리할 수 있다.
- 하나의 js파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있다.
- 캐쉬를 통해서 속도 향상, 전송량의 경량화를 도모할 수 있다.
[file.html]
<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" />
<script src="file.js"></script>
</body>
</html>
[file.js]
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello worl11d');
})4. script파일을 어디에 위치시키는 것이 좋은가?
script 파일은 head 태그 보다 body 태그가 끝나는 지점인
페이지의 하단에 위치시키는 것이 더 좋은 방법이다.
'Web > JAVASCRIPT' 카테고리의 다른 글
| [BOM] 전역객체 Window (0) | 2023.07.03 |
|---|---|
| Browser Object Model(BOM) (0) | 2023.06.30 |
| [JavaScript] 행변환 (0) | 2023.04.20 |
| [JavaScript] alert, prompt, confirm (0) | 2023.04.10 |
| [JavaScript] 자료형 (0) | 2023.04.08 |
