1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바 스크립트 : Event Handler</title>
<script type="text/javascript">
function checkFrm(){
//window.alert("버튼클릭");
//forms[0] = form에 아무런 이름이 없을 경우 첫번째 form을 의미
//window.alert(document.forms[0].name.value);
window.alert(document.frm1.name.value);
}
function overFrm(){
window.alert("마우스오버");
}
</script>
</head>
<body>
<form name="frm1">
<!-- 동작기능 -->
<!-- button : 디자인뿐. javascript가 연결되어야 작동함
button + 이벤트핸들러 + 함수(자바 스크립트)
-->
<input type="text" name="name" size=30 onmouseover="overFrm()" />
<input type="button" value="검색" onclick="checkFrm()" />
</form>
</body>
</html>
출력물
2. text
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바 스크립트 : 브라우저객체[text], Event Handler</title>
<script type="text/javascript">
function checkFrm(){
document.frm1.data2.value = document.frm1.data1.value;
//document.frm1.data2.focus(); //마우스 커서를 data2창에 위치
document.frm1.data2.select(); //data2창의 값을 선택함
}
function eventBlur() {
alert("포커스가 없어졌습니다.");
}
</script>
</head>
<body>
<form name="frm1">
데이터1 : <input type="text" name="data1" onblur="eventBlur()" /><br />
데이터2 : <input type="text" name="data2" /><br />
<input type="button" value="클릭하세요" onclick="checkFrm()"/>
</form>
</body>
</html>
출력물
3. checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바 스크립트 : 브라우저객체[checkbox], Event Handler</title>
<script type="text/javascript">
function checkFrm() {
//window.alert(document.frm1.c.checked);
//document.frm1.c2.checked = true;
//alert(document.frm1.c.length);
var result = "";
for(var i =0 ; i < document.frm1.c.length ; i++){
if(document.frm1.c[i].checked){
result += document.frm1.c[i].value + ", ";
}
}
alert(result);
}
</script>
</head>
<body>
<form name="frm1">
<input type="checkbox" name="c" value="사과" /> 사과<br />
<input type="checkbox" name="c" value="배" /> 배<br />
<input type="checkbox" name="c" value="복숭아" /> 복숭아<br />
<input type="checkbox" name="c" value="귤" /> 귤<br />
<input type="button" value="확인" onclick="checkFrm()"/>
</form>
</body>
</html>
출력물
4. select - option
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바 스크립트 : 브라우저객체[select - option], Event Handler</title>
<script type="text/javascript">
function checkFrm() {
//alert(frm1.s.options.length); //옵션의 갯수
//alert(frm1.s.selectedIndex); //선택되어 있는 옵션의 인덱스값(0 ~ i)
alert(frm1.s.options[frm1.s.selectedIndex].text);
//alert(frm1.s.options[frm1.s.selectedIndex].value);
}
</script>
</head>
<body>
<form name="frm1">
<select name="s">
<option value="1">사과</option>
<option value="2">배</option>
<option value="3">복숭아</option>
<option value="4">귤</option>
</select>
<input type="button" value="확인" onclick="checkFrm()" />
</form>
</body>
</html>
출력물
5. select - option
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바 스크립트 : 브라우저객체[select - option], Event Handler</title>
<script type="text/javascript">
function checkFrm() {
frm1.s2.selectedIndex = frm1.s1.selectedIndex;
}
</script>
</head>
<body>
<form name="frm1">
<select name="s1">
<option value="1">사과</option>
<option value="2">배</option>
<option value="3">복숭아</option>
<option value="4">귤</option>
</select>
<select name="s2">
<option value="1">사과</option>
<option value="2">배</option>
<option value="3">복숭아</option>
<option value="4">귤</option>
</select>
<input type="button" value="확인" onclick="checkFrm()" />
</form>
</body>
</html>
출력물
'Web > Java Script' 카테고리의 다른 글
자바 스크립트를 이용한 주민등록번호 검사기 (0) | 2013.03.08 |
---|---|
자바 스크립트 기본 실습 : 내장 객체 (날짜,시간 출력) (0) | 2013.03.07 |
자바 스크립트 기본 실습 : 브라우저 객체[window, navigator, screen, history, location, document] (1) | 2013.03.07 |
[실습]구구단 출력 테이블 (0) | 2013.03.06 |
자바 스크립트 기본 실습 (변수 선언, 함수 선언, 내장함수) (0) | 2013.03.06 |