이벤트 : 동작이나 사건이 발생했음을 알려주는 신호
이벤트핸들러 : 이벤트가 발생할 때 수행할 명령, 함수 동작연결(onclick)
1. 버튼 눌렀을 때 이벤트 동작
<body>
<input type = "button" value="버튼" onclick="alert('버튼을 눌렀습니다!')">
</body>
2. 이벤트를 함수로 작동하게 하기
헤드
function butt(){
alert("함수에서");
alert("실행문");
}
바디
<body>
<input type = "button" value="버튼" onclick="alert('버튼을 눌렀습니다!')">
<input type = "button" value="버튼2" onclick="butt()">
</body>
**마우스와 관련된 이벤트**
3. 문서 불러올 때
<body onload="alert('안녕하세요')">
4. 텍스트 상자 선택&해제
<input type = "text" name="txt" onfocus="alert('텍스트상자 선택')" onblur="alert('텍스트상자 해제')">;
<input type = "button" value="버튼3"
onmouseover="alert('마우스오버')" onmouseout="alert('마우스아웃')">
5. 버튼3 마우스오버/아웃
<input type = "text" name="txt" onfocus="alert('텍스트상자 선택')" onblur="alert('텍스트상자 해제')">;
<input type = "button" value="버튼3" onmouseover="alert('마우스오버')"
onmouseout="alert('마우스아웃')">
6. table 만들고 마우스오버/아웃 효과 주기
<table border="1">
<tr onmouseover="this.style.background='#FFCC99'"
onmouseout="this.style.background='#5555FF'"><td>처음</td>
</tr>
<tr onmouseover="this.style.background='#CCFF66'"
onmouseout="this.style.background='#444444'"><td>두울</td>
</tr>
</table>
(1) 마우스아웃 했을때
(2) "처음" 쪽에 마우스오버했을때(마우스를 가져갔을 때)
(3) "두울" 쪽에 마우스오버했을때
**웹 브라우저 객체**
7. 새 창 띄우기
function stat1(){
window.open("test11.html","김광천","width=200,height=300,top=0,
"left=0,resizable=yes,scrollbars=yes,toolbar=yes,menubar=yes");
}
<input type="button" value="창열기" onclick="stat1()">
<input type="button" value="창닫기" onclick="window.close()">
8. 창 닫기 버튼 추가
menubar=yes //메뉴바 생기게
function stat1(){
window.open("test11.html","김광천","width=200,height=300,top=0,
"left=0,resizable=yes,scrollbars=yes,toolbar=yes,menubar=yes");
}
<input type="button" value="창열기" onclick="stat1()">
<input type="button" value="창닫기" onclick="window.close()">
**location 객체 : 웹 문서의 주소를 제공**
9. 문서 주소(URL) 출력하기
헤드
function showurl(){
var str;
str = location.href + "\n";
str += location.protocol +"\n";
str += location.hostname +"\n";
str += location.port +"\n";
str += location.host +"\n";
str += location.pathname +"\n";
alert(str);
}
바디
<input type="button" value="창열기" onclick="window.open()">
<input type="button" value="문서주소정보" onclick="showurl()">
문서주소정보 text를 클릭하면 위 그림과 같은 창이 뜨면서 주소를 알려준다.
10. 버튼에 하이퍼링크 효과주기
--> 헤드에서 location.href를 사용하여 원하는 페이지로 갈 수 있는
하이퍼링크 기능을 설정할 수 있다.
헤드
function move(){
location.href="test12.html";
//location.replace("test12.html");
}
바디
<input type="button" value="창열기" onclick="window.open()">
<input type="button" value="문서주소정보" onclick="showurl()">
<input type="button" value="이동" onclick="move()">
이동을 누르면,
지정한 test12.html로 이동한다.
**History 객체 : 최근 방문한 주소 저장**
11. 웹서핑시 뒤로, 앞으로 가는 기능 설정하기
헤드
function show(){
alert("목록개수: "+history.length);
}
function Back(){
//history.go(-1);
history.back();
}
function Forward(){
history.forward();
//history.go(1);
}
바디
<input type="button" value="방문목록개수" onclick="show()">
<input type="button" value="뒤로 이동" onclick="Back()">
<input type="button" value="앞으로 이동" onclick="Forward()">
뒤로가기 버튼을 누르면, 앞서 서핑했던 google창이 뜨고,
앞으로가기 버튼을 누르면, 앞에서 서핑했던 nate가 나온다.
/(ㅇ_ㅇ)/ ~
'N스크린하이브리드앱과정 > JAVASCRIPT' 카테고리의 다른 글
| [3주][3일][5~8th] JAVASCRIPT: 로그인 창 구현해보기, 이벤트 핸들러. (0) | 2013.07.31 |
|---|---|
| [3주][1일][5~7th] 자바스크립트(javascript). 문자열의 추출, 반올림&내림 등 (0) | 2013.07.29 |
| [2주][5일][5~7th]자바스크립트(javascript) 시작하기 (이클립스에서) (0) | 2013.07.26 |