예제 6-1. HTML 태그의 이벤트 리스너 속성에 자바스크립트 코드 작성, 예제 6-2. <script> 태그에 자바스크립트 코드 작성, 예제 6-3. 자바스크립트 파일 작성 및 불러오기, 예제 6-4. 링크의 href에 자..
WEB/JAVASCRIPT-CONCEPT 2017. 11. 13. 09:09 |웹 페이지는 HTML 태그, CSS3 스타일 시트, 자바스크립트 프로그램의 3가지 코드가 결합되어 작성된다.
HTML5 태그로는 웹 페이지의 구조와 내용을 작성하고
CSS3로는 색상이나 폰트, 배치 등 웹 페이지의 모양을 꾸미고
자바스크립트는 사용자의 입력을 처리하거나 웹 애플리케이션을 작성하는 등 웹 페이지의 동적 제어에 사용된다.
자바스크립트 코드의 위치
1. HTML 태그의 이벤트 리스너 속성에 작성
2. <script></script> 내에 작성
3. 자바스크립트 파일에 작성
4. URL 부분에 작성
1. 예제 6-1. HTML 태그의 이벤트 리스너 속성에 작성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>이벤트 리스너 속성에 자바스크립트 코드</title> </head> <body> <h3>마우스 올려 보세요</h3> <hr> <img src="media/apple.png" alt="이미지" // src은 처음화면에 출력되는것 onmouseover="this.src='media/banana.png'" // this는 현재 img 태그를 가리키는 자바스크립트 키워드 onmouseout="this.src='media/apple.png'"> </body> </html> | cs |
- <script></script>는 <head></head>나 <body></body> 내 어디든 들어갈 수 있다.
- 웹 페이지 내에 <script></script>를 여러 번 삽입할 수 있다.
2. 예제 6-2 <Script> 태그에 자바스크립트 코드 작성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>script 태그에 자바스크립트 작성</title> <script> function over(obj) { obj.src="media/banana.png"; } function out(obj) { obj.src="media/apple.png"; } </script> </head> <body> <h3>마우스 올려 보세요</h3> <hr> <img src="media/apple.png" alt="이미지" onmouseover="over(this)" onmouseout="out(this)"> </body> </html> | cs |
3. 예제 6-3. 자바스크립트 파일 작성 및 불러오기
test.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>외부 파일에 자바스크립트 작성</title> <script src="lib.js"> </script> </head> <body> <h3>마우스 올려 보세요</h3> <hr> <img src="media/apple.png" alt="이미지" onmouseover="over(this)" onmouseout="out(this)"> </body> </html> | cs |
lib.js
1 2 3 4 5 6 7 8 9 | function over(obj) { obj.src = "media/banana.png"; } function out(obj) { obj.src = "media/apple.png"; } | cs |
4. 예제 6-4 링크의 href에 자바스크립트 코드 작성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>URL에 자바스크립트 작성</title> </head> <body> <h3>링크의 href에 자바스크립트 작성</h3> <hr> <a href="javascript:alert('클릭하셨어요?')"> 클릭해보세요</a> </body> </html> | cs |
