알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
HTML JavaScript 기본 구조 샘플 코드 본문
HTML JavaScript 기본형
test1.html
<!DOTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world"/>
<script type="text/javascript">
var hw = document.getElementById('hw');
hw.addEventListener('clic',function(){
alert("Hello world");
})
</script>
</body>
</html>
위와 같은 코드를 입력하면 document.getElementById('hw') 부분에서 보듯이 태그중 id가 hw인 객체를 가져와서
addEventListener 함수를 통해 click 시 함수를 등록 시켜 줍니다.
이러한 부분들이 웹브라우저의 java script API를 사용한 부분입니다.
이러한 부분이 java script 보통의 언어강의에 없는것은 웹브라우저의 API 이지 언어를 설명하는 부분이 아니기 때문입니다.
HTML JavaScript 파일로 나누기
test1.html
<!DOTYPE 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("Alert text");
})
위와 같이 따로 분류하여 파일을 구분하여 모듈화를 할수가 있습니다.
스크립트 파일 위치 변환
test1.html
<!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(){
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
}
여기서 window.onload 는 웹브라이저 API 로써 웹브라이저가 로드가 되면 해당 함수를 실행 시켜라 정도의 뜻입니다.
추후에 여기서 나오는 window.onload 같은 웹브라우저 에서 사용할수 있는 전용 API중 기본을 익히고자 합니다.
'Web > 웹브라우저 객체 API' 카테고리의 다른 글
| [DOM,BOM,javascript] 객체 제어 하기 (0) | 2017.08.19 |
|---|---|
| [javascript] alert,confirm,prompt 사용하기 (0) | 2017.08.19 |
| [DOM,BOM,javascript] 전역객체 윈도우 (0) | 2017.08.19 |
| [DOM,BOM,javascript]Object Model 학습 하기[중요 개념] (0) | 2017.08.17 |
| 웹브라우저 객체 사용법에 대한 강의 (0) | 2017.08.16 |
'Web /웹브라우저 객체 API' Related Articles
more
Comments