📝 JavaScript
🖥️ 1. 웹 브라우저와 javascript
-
HTML : 정보
-
CSS : 디자인
-
javascript : 웹브라우저 HTML 제어
🖥️ 2. HTML에서 자바스크립트 로드하기
2-1. inline 방식
- 태그에 직접 자바 스크립트를 기술하는 방식이다.
- 장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다.
- 하지만 정보와 제어가 섞여있기 때문에 정보로써의 가치가 떨어진다.
** 유지/보수가 힘들어 권장하는 방법은 아니다.
EX)
<body>
<!-- onclick : 클릭했을 때 -->
<input type="button" value="Hello World"
onclick="alert('Hello World')" />
</body>2-2. script
- <script> 태그를 만들어서 여기에 자바스크립트 코드를 삽입하는 방식
- html 태그와 js 코드를 분리할 수 있다.
2-3. *.js 로 분류
EX)
js.html
<body>
<input type="button" id="hw" value="Hello World" />
<script src="script.js"></script>
</body>script.js
window.onload = function(){
let hw = document.getElementById('hw');
hw.addEventListener('click',function(){
alert('Hello World');
});
}2-4. window.onload = function(){}
- 웹브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되는 함수이다.
EX)
<script>
// 윈도우가 로드되고 나서 실행시켜달라는 의미
window.onload = function(){
let hw = document.getElementById('hw');
hw.addEventListener('click',function(){
alert('Hello World');
});
}
</script>
<body>
<input type="button" id="hw" value="Hello World2" />
</body>