- Key Point -
Event
키보드의 키를 누르거나 마우스 버튼을 클릭하는 등 사용자가 수행하는 동작이나 일을 말한다. 이벤트에 반응하여 프로그램이 처리 동작을 수행함.
Event Hadler
이벤트를 처리하는 장치
Object - 윈도우 창과 같이 조작의 대상이 되는 것. 오브젝트에는 속성을 나타내는 Property와 처리를 수행하는 Method가 있다.
예) '김ㅇㅇ에게 리본을 묶어준다.' -> 오브젝트 = 김ㅇㅇ, '프로퍼티'=리본이 있다.' '리본을 묶는다.'=메소드
Lesson 1 |
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello</title> </head> <body> <script type="text/javascript"> <!-- window.document.write("Hello World"); --> </script> <noscript> JavaScript를 처리할 수 없습니다. </noscript> </body> </html> | JavaScript는 보통 HTML과 조합되어 사용된다. <script type="text"/javascript">...</script> 자바스크립트 부분 <noscript>...</noscript> JavaScript를 처리하지 못하는 브라우저에 대한 메시지를 기술한다. window.document.write("Hello World"); 문자기술 (window는 생략가능) window.alert("위험"); 대화상자 표시 |
Lesson 2 |
|
<input type="폼 부품의 종류" value="값" onclick="JavaScript 코드"> <a href="URF" onmouseover="JavaScript코드">...</a> |
이벤트 핸들러 - 폼의 버튼을 클릭하거나 키보드 입력 등 특정 이벤트가 발생했을 때 관련 처리를 실행하는 장치를 이벤트 핸들러라고 한다. 폼 버튼 클릭시, onlick 마우스 포인터가 통과했을 때, onmouseover |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="content-Script-Type" content="text/javascript"> <title></title> </head> <body> <input type="button" value="버튼" onclick="alert('어서오세요')"> </body> </html> |
이번트 핸들러를 사용할 때는 <meta> 태그를 쓴다. |
<input type = "button" value="버튼" onclick="alert('어서오세요'); alert('주문은')"> |
이벤트 핸들러로 호출할 때 여러 개의 문장을 넣을 수도 있다. |
Lesson 3 |
|
오브젝트란, 조작의 대상이 되는 부품이다. 웹을 구성하는 브라우저 창, 폼, 도큐먼트 등은 오브젝트이다. |
|
Lesson 4 |
|
window.defaultStatus window.document.fgColor | 프로퍼티는 오브젝트의 상태나 속성을 말하며, 참조나 설정이 가능하다. Window 오브젝트 아래에 있는 Document 오브젝트를 참조하는 것 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/JavaScript"> <title></title> </head> <body onload="window.defaultStatus='색설정'"> <script type="text/javascript"> document.fgColor="red"; document.bgColor="gray"; </script> 문자와 배경색을 변경했습니다. </body> </html> | <body onload=...."> 페이지를 읽어와서 상태 표시줄에 문자열을 표시한다. document.fgColor 문자 색을 빨간색으로 설정한다. document.bgColor 배경색을 회색으로 설정한다. |
Lesson 5 메서드 | |
메서드는 오브젝트에 대한 처리를 정리한 것이다. 메서드를 호출하면 해당 오브젝트에 대한 처리를 명령할 수 있다. | |
window.alert() window.document.write() | alert()메서드: 경고창을 표시 write()메서드: 문자열 출력 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 버튼을 더블 클릭하세요<br> <input type="button" value="버튼" ondbclick="alert('Perfect!')"> </body> </html> | ondblclick="..."> 버튼을 더블클릭할 때 경고 대화창 표시 |
Lesson 6 | |
HTML 파일 외부에서 JavaScript 파일 읽어오기 | |
lesson6.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript" src="js/winsize.js"> </script> </body> </html> winsize.js document.write("'winsize.js'를 호출했습니다."); window.resizeTo(600,300); |
|
연습문제 | |
1. JavaScript를 사용하여 자신의 이름을 웹 브라우저에 출력하는 프로그램을 작성해보자. | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>자신의 이름 출력하기</title> </head> <body> <script type="text/javascript"> document.write("내 이름은 ㅇㅇㅇ입니다."); </script> <noscript> 에러입니다. </noscript> </body> </html> |
2. 웹 브라우저에 두 개의 번튼을 보여주고, 버튼을 클릭하면 문자 색과 배경색을 바꾸는 프로그램을 작성하라. 문자 색과 배경색을 바꾼 후에는 색이 바뀌었다는 메시지를 경고 대화상자로 보여준다. [버튼1] 문자 색을 빨간색, 배경색을 회색으로 바꾸고 경고창을 띄운다. [버튼2] 문자 색을 검정색, 배경색을 흰색으로 되돌린다. | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>버튼으로 문자색 바꾸기</title> </head> <body> <input type="button" name="" value="색변환" onclick="window.document.fgColor='red'; document.bgColor='gray'; alert('색변환됨');"> <input type="button" name="" value="원래대로색바꾸기" onclick="document.fgColor='black'; window.document.bgColor='white';"> 문자색을 바꾸려면 색변환을 클릭하세요. </body> </html>
|
3. 웹 브라우저의 창 크기를 300x500으로 재조정하고 자신의 정보를보여주는 프로그램을 작성하라. JavaScript는 외부파일에서 읽어오라. | practice3.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript" src="js/practice3js.js"> </script> </body> </html> practice3js.js window.resizeTo(300,500); document.write("이름: 000<br>"); document.write("나이: 22세<br>"); document.write("전화번호: 333-3333"); |
댓글