1.
예) window.document.form1.id.value="lee"
코드설명: 현제 브라우저의 창에 존재하는 문서 내용중 "form1" 안에 "id" 객체의 값은 "lee"이다.
주요객체
window : 윈도우마다 하나씩 존재하는 객체로서 윈도우 내에 존재하는 모든객체의 상위 객체이다.
frame:프레임마다 존재하는 객체<frame>태그에 의해 정의 된다.
document : html 페이지마다 존재하는 객체, html문서에 대한 정보를 가진다.
location : 현재 로드된 html페이지의 url에 대한 정보
history : 현재 사용자가 방문하였던 url 들이 리스트를 우지하는 객체이다.
form : 폼에대한 정보를 표헌하는 객체로서 <form>태그당 하나의 객체
계층구조에 따라서 자바 스크립트에 접근
예
<html>
<head>
<title>4-1 계층구조로 객체사용 </title>
</head>
<body>
<form name="f">
<input type ="text" name ="a" value ="나는 자바 스크립트!">
<input type ="text" name ="b" ><p>
<input type ="button" value="복사" onClick ="document.f.b.value = document.f.a.value"><br>
-->******** documet.f.b.value 와 this.form.b.value와 같다. *******
<input type ="button" value="지우기" onClick="this.form.b.value=''" ><p>
</form>
</body>
</html>
****이벤트 ****
이벤트 처리이벤트
abort Onabort : 이미지를 읽는 중에 중지했을때 발생
blur OnBlur :입력양식 필드에서 포커스를 일어 버렸을대 발생(커서가 깜빡일때)
changge OnChange: 입력양식 필드에서 값이 바뀌었을때 발생
click OnClick : 입력양식필드에서 마ㅅ우스를 눌렀을때 발생
dblclick OndblClick : 마우스를 두 번 눌렀을때 발생
dragdrop OnDragDrop: 마우스를 클릭한 상태에서 드래그 했을때 발생
error OnError : 문서나 이미지를 읽는 중에 중지 했을때 발생
focus OnFocus : 입력양식 필드에 포커스가 위치할때 발생
keydown OnKeyDown : 키를 눌렀을때 발생
keypress OnKeyPress : 키를 눌렀다가 놓았을대 발생
keyup OnKeyUp : 키를 놓았을때
load OnLoad :브라우저의 문서를 읽어올때 발생
mousedown OnMouseDown : 마우스 버튼을 눌렀을때 발생
mousemove OnMouseMove : 마우스 위치를 옮겼을때 발생
mouseout OnMouseOut : 마우스가 링크나 영역안에 있다가 벗어났을때 발생
mouseover OnMouseOver : 링크위로 마우스가 위치할때 발생
mouseup OnMouseUp : 마우스를 놓았을때 발생
move OnMove : 프레임이나 우인도를 이동했을 경우에 발생
reset OnReset : 입력양식을 다시 초기화 시켰을때 발생
resize OnResize : 프레임이나 윈도우 크ㄹ기를 변경했을 경우 발생
select Onselect : 입력양식의 한필드를 선택했을때 발생
unload OnUnload : 브라우저의 문서를 닫을때 발생
이벤트 처리의 특징
* 이벤트핸들러의 설정은 window상에서 click 이벤트가 발생하면 자바 스크립트 합수 xxx() 가 실행되게 할때
window.onClick()=xxx(); 라고 입력
예
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>4-2</title>
</head>
<body onLoad = window.open() onBlur ="document.bgColor='blue'" onFocus = "document.bgColor= 'red'">
<h3>포커스를 받으면 빨간색, 잃으면 파란색 배경응로 변합니다. </h3>
</body>
</html>
예) 텍스트 창에 어떤 문자가 입력될때까지 다른 일을 할수 없게 하는 예
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>무제 문서</title>
<script>
function aaa(text){
if(text.value=""){
arlert("이름을 입력하세요");
text.focus();
}
}
</script>
</head>
<body>
<form name="f">
이름<input type="text" name ="t" onBlur="aaa(this)"><br>aaa(this)-->this매개변수는<input type....>에서 의 값을 a()에 넘겨주는 것을 의미
학번<input type= "text" name="id" >
</form>
</body>
</html>
**onChange 핸들러
예) 4글자를 초과하지 못하게 하는 text창 만들기, select 객체의 옵션이 변경되면 변경된 내용을 출력
<html><head>
<script>
function check(text){
if(text.value.length){
alert("입력가능한 최대글자수는 4자입니다.")
text.value=text.value.substring(0,4)
text.focus()
}
}
function checksel(sel){
alert("당신이 선택한 항목은"+sel.options.value)
}
</script></head>
<body>
이름을 입력하는 난에 4글자를 초과하여 입력하면 경고 메세지 출력, 과일 선택이 변경되면 선택된 과일을 경고 메시지 박스와 함께 출력하자
<form name="f">
이름<input type="text" onChange="check(this)"></br>
과일<select name="select" onChange="checksel(this)">
<option value="사과">사과
<option value ="감">감
<option value="배">배
</select>
</form>
</body>
</html>
*onLoad핸들러 : 윈도우 상에서 문서의 로딩 완료 시전ㅁ과 이ㅈ미지의 로딩 완료 시점에 생성
1. 윈도우(프레임)상에서 로딩완료 <body onLoad="">,<frameset onLoad="">
2. 이미지 로딩 완료:<img onLoad ="">
<html>
<body onLoad="alert('어서오세요. 반갑습니다.')"onunLoad="alert('안녕히 가세요.')">
<body>
</html>
*onClick과 onDblClick
예제)계산기 만들기
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>무제 문서</title>
<script>
function compute(f){
var res= eval(f.exp.value); --->eval()함수는 변수를 자바스크립트 의 함수처럼쓰는 명령어 문자열로 입력된 수식을 계산해
주는 내장함수입니다.
f.val.value = res;
}
</script>
</head>
<body>
식난에 계산하고자 하는 수입력후 계산 버튼을 누르시요.<p>
<form name="cal">
식<input type="text" name= "exp" value=""><p>
값<input type="text" name =" val" value="" size="10">
<input type= button value="계산" onClick("computer(this.form)")>(computer(this.form)->객체) 은 computer(document.cal) 과 같다
</form>
</body></html>
[펌] http://blog.naver.com/kdmsal82?Redirect=Log&logNo=150007107406<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
예) window.document.form1.id.value="lee"
코드설명: 현제 브라우저의 창에 존재하는 문서 내용중 "form1" 안에 "id" 객체의 값은 "lee"이다.
주요객체
window : 윈도우마다 하나씩 존재하는 객체로서 윈도우 내에 존재하는 모든객체의 상위 객체이다.
frame:프레임마다 존재하는 객체<frame>태그에 의해 정의 된다.
document : html 페이지마다 존재하는 객체, html문서에 대한 정보를 가진다.
location : 현재 로드된 html페이지의 url에 대한 정보
history : 현재 사용자가 방문하였던 url 들이 리스트를 우지하는 객체이다.
form : 폼에대한 정보를 표헌하는 객체로서 <form>태그당 하나의 객체
계층구조에 따라서 자바 스크립트에 접근
예
<html>
<head>
<title>4-1 계층구조로 객체사용 </title>
</head>
<body>
<form name="f">
<input type ="text" name ="a" value ="나는 자바 스크립트!">
<input type ="text" name ="b" ><p>
<input type ="button" value="복사" onClick ="document.f.b.value = document.f.a.value"><br>
-->******** documet.f.b.value 와 this.form.b.value와 같다. *******
<input type ="button" value="지우기" onClick="this.form.b.value=''" ><p>
</form>
</body>
</html>
****이벤트 ****
이벤트 처리이벤트
abort Onabort : 이미지를 읽는 중에 중지했을때 발생
blur OnBlur :입력양식 필드에서 포커스를 일어 버렸을대 발생(커서가 깜빡일때)
changge OnChange: 입력양식 필드에서 값이 바뀌었을때 발생
click OnClick : 입력양식필드에서 마ㅅ우스를 눌렀을때 발생
dblclick OndblClick : 마우스를 두 번 눌렀을때 발생
dragdrop OnDragDrop: 마우스를 클릭한 상태에서 드래그 했을때 발생
error OnError : 문서나 이미지를 읽는 중에 중지 했을때 발생
focus OnFocus : 입력양식 필드에 포커스가 위치할때 발생
keydown OnKeyDown : 키를 눌렀을때 발생
keypress OnKeyPress : 키를 눌렀다가 놓았을대 발생
keyup OnKeyUp : 키를 놓았을때
load OnLoad :브라우저의 문서를 읽어올때 발생
mousedown OnMouseDown : 마우스 버튼을 눌렀을때 발생
mousemove OnMouseMove : 마우스 위치를 옮겼을때 발생
mouseout OnMouseOut : 마우스가 링크나 영역안에 있다가 벗어났을때 발생
mouseover OnMouseOver : 링크위로 마우스가 위치할때 발생
mouseup OnMouseUp : 마우스를 놓았을때 발생
move OnMove : 프레임이나 우인도를 이동했을 경우에 발생
reset OnReset : 입력양식을 다시 초기화 시켰을때 발생
resize OnResize : 프레임이나 윈도우 크ㄹ기를 변경했을 경우 발생
select Onselect : 입력양식의 한필드를 선택했을때 발생
unload OnUnload : 브라우저의 문서를 닫을때 발생
이벤트 처리의 특징
* 이벤트핸들러의 설정은 window상에서 click 이벤트가 발생하면 자바 스크립트 합수 xxx() 가 실행되게 할때
window.onClick()=xxx(); 라고 입력
예
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>4-2</title>
</head>
<body onLoad = window.open() onBlur ="document.bgColor='blue'" onFocus = "document.bgColor= 'red'">
<h3>포커스를 받으면 빨간색, 잃으면 파란색 배경응로 변합니다. </h3>
</body>
</html>
예) 텍스트 창에 어떤 문자가 입력될때까지 다른 일을 할수 없게 하는 예
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>무제 문서</title>
<script>
function aaa(text){
if(text.value=""){
arlert("이름을 입력하세요");
text.focus();
}
}
</script>
</head>
<body>
<form name="f">
이름<input type="text" name ="t" onBlur="aaa(this)"><br>aaa(this)-->this매개변수는<input type....>에서 의 값을 a()에 넘겨주는 것을 의미
학번<input type= "text" name="id" >
</form>
</body>
</html>
**onChange 핸들러
예) 4글자를 초과하지 못하게 하는 text창 만들기, select 객체의 옵션이 변경되면 변경된 내용을 출력
<html><head>
<script>
function check(text){
if(text.value.length){
alert("입력가능한 최대글자수는 4자입니다.")
text.value=text.value.substring(0,4)
text.focus()
}
}
function checksel(sel){
alert("당신이 선택한 항목은"+sel.options.value)
}
</script></head>
<body>
이름을 입력하는 난에 4글자를 초과하여 입력하면 경고 메세지 출력, 과일 선택이 변경되면 선택된 과일을 경고 메시지 박스와 함께 출력하자
<form name="f">
이름<input type="text" onChange="check(this)"></br>
과일<select name="select" onChange="checksel(this)">
<option value="사과">사과
<option value ="감">감
<option value="배">배
</select>
</form>
</body>
</html>
*onLoad핸들러 : 윈도우 상에서 문서의 로딩 완료 시전ㅁ과 이ㅈ미지의 로딩 완료 시점에 생성
1. 윈도우(프레임)상에서 로딩완료 <body onLoad="">,<frameset onLoad="">
2. 이미지 로딩 완료:<img onLoad ="">
<html>
<body onLoad="alert('어서오세요. 반갑습니다.')"onunLoad="alert('안녕히 가세요.')">
<body>
</html>
*onClick과 onDblClick
예제)계산기 만들기
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>무제 문서</title>
<script>
function compute(f){
var res= eval(f.exp.value); --->eval()함수는 변수를 자바스크립트 의 함수처럼쓰는 명령어 문자열로 입력된 수식을 계산해
주는 내장함수입니다.
f.val.value = res;
}
</script>
</head>
<body>
식난에 계산하고자 하는 수입력후 계산 버튼을 누르시요.<p>
<form name="cal">
식<input type="text" name= "exp" value=""><p>
값<input type="text" name =" val" value="" size="10">
<input type= button value="계산" onClick("computer(this.form)")>(computer(this.form)->객체) 은 computer(document.cal) 과 같다
</form>
</body></html>
[펌] http://blog.naver.com/kdmsal82?Redirect=Log&logNo=150007107406<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
댓글 2개
19년 전
좋은 정보 감사합니다...
19년 전
document.form.id... 라는 것은 이젠 옛말이 아닐까 합니다.
앞으로 나올 그누5나, 다음이라도 해당 코드는
document.forms['form'].elements['id'] 가 되야 될 것 입니다.
앞으로 나올 그누5나, 다음이라도 해당 코드는
document.forms['form'].elements['id'] 가 되야 될 것 입니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 630 | 19년 전 | 2329 | ||
| 629 |
 ⓦangcho |
19년 전 | 1992 | |
| 628 |
ⓦangcho |
19년 전 | 3088 | |
| 627 |
ⓦangcho |
19년 전 | 2008 | |
| 626 |
ⓦangcho |
19년 전 | 2044 | |
| 625 |
ⓦangcho |
19년 전 | 1698 | |
| 624 |
ⓦangcho |
19년 전 | 2207 | |
| 623 | 19년 전 | 2183 | ||
| 622 |
 뜨락의이름 |
19년 전 | 2482 | |
| 621 |
ⓦangcho |
19년 전 | 2873 | |
| 620 |
ⓦangcho |
19년 전 | 2378 | |
| 619 | 19년 전 | 2445 | ||
| 618 | 19년 전 | 3498 | ||
| 617 |
 Elbis |
19년 전 | 3212 | |
| 616 |
Elbis |
19년 전 | 3200 | |
| 615 |
Elbis |
19년 전 | 3011 | |
| 614 |
Elbis |
19년 전 | 2024 | |
| 613 |
Elbis |
19년 전 | 2339 | |
| 612 |
Elbis |
19년 전 | 2223 | |
| 611 |
Elbis |
19년 전 | 2058 | |
| 610 |
Elbis |
19년 전 | 2498 | |
| 609 |
Elbis |
19년 전 | 2406 | |
| 608 |
Elbis |
19년 전 | 2797 | |
| 607 | 19년 전 | 2171 | ||
| 606 | 19년 전 | 3498 | ||
| 605 | 19년 전 | 1965 | ||
| 604 | 19년 전 | 2569 | ||
| 603 | 19년 전 | 1596 | ||
| 602 |
 Dream |
19년 전 | 2827 | |
| 601 | 19년 전 | 3065 | ||
| 600 |
 빨간망토의비밀 |
19년 전 | 2151 | |
| 599 | 19년 전 | 1987 | ||
| 598 | 19년 전 | 2464 | ||
| 597 | 19년 전 | 2373 | ||
| 596 |
ⓦangcho |
19년 전 | 3064 | |
| 595 |
ⓦangcho |
19년 전 | 6743 | |
| 594 | 19년 전 | 2700 | ||
| 593 | 19년 전 | 3175 | ||
| 592 |
 damoa.biz |
19년 전 | 3074 | |
| 591 |
ⓦangcho |
19년 전 | 1913 | |
| 590 | 19년 전 | 3353 | ||
| 589 | 19년 전 | 2180 | ||
| 588 |
ⓦangcho |
19년 전 | 2690 | |
| 587 | 19년 전 | 2336 | ||
| 586 |
 cunic |
19년 전 | 4350 | |
| 585 | 19년 전 | 2465 | ||
| 584 | 19년 전 | 2734 | ||
| 583 |
ⓦangcho |
19년 전 | 3501 | |
| 582 |
ⓦangcho |
19년 전 | 3705 | |
| 581 |
ⓦangcho |
19년 전 | 3229 | |
| 580 | 19년 전 | 2466 | ||
| 579 | 19년 전 | 3038 | ||
| 578 | 19년 전 | 3896 | ||
| 577 | 19년 전 | 3774 | ||
| 576 | 19년 전 | 1709 | ||
| 575 |
ⓦangcho |
19년 전 | 2188 | |
| 574 |
 happycommunity |
19년 전 | 5393 | |
| 573 | 19년 전 | 6688 | ||
| 572 | 19년 전 | 2546 | ||
| 571 | 19년 전 | 2100 | ||
| 570 | 19년 전 | 2593 | ||
| 569 | 19년 전 | 3255 | ||
| 568 | 19년 전 | 3496 | ||
| 567 | 19년 전 | 2973 | ||
| 566 | 19년 전 | 2583 | ||
| 565 |
ⓦangcho |
19년 전 | 4693 | |
| 564 |
ⓦangcho |
19년 전 | 6696 | |
| 563 |
ⓦangcho |
19년 전 | 4968 | |
| 562 |
ⓦangcho |
19년 전 | 5931 | |
| 561 |
ⓦangcho |
19년 전 | 2667 | |
| 560 |
ⓦangcho |
19년 전 | 2485 | |
| 559 |
ⓦangcho |
19년 전 | 2194 | |
| 558 |
ⓦangcho |
19년 전 | 2283 | |
| 557 | 19년 전 | 4576 | ||
| 556 |
 Photofly |
19년 전 | 4639 | |
| 555 | 19년 전 | 2487 | ||
| 554 | 19년 전 | 2159 | ||
| 553 | 19년 전 | 2492 | ||
| 552 |
Photofly |
19년 전 | 3130 | |
| 551 | 19년 전 | 2921 | ||
| 550 |
Elbis |
19년 전 | 1883 | |
| 549 |
Elbis |
19년 전 | 1940 | |
| 548 |
Elbis |
19년 전 | 3134 | |
| 547 |
Elbis |
19년 전 | 2350 | |
| 546 |
Elbis |
19년 전 | 3608 | |
| 545 |
Elbis |
19년 전 | 2533 | |
| 544 |
Elbis |
19년 전 | 1839 | |
| 543 |
Elbis |
19년 전 | 2440 | |
| 542 |
Elbis |
19년 전 | 1706 | |
| 541 |
Elbis |
19년 전 | 1390 | |
| 540 |
Elbis |
19년 전 | 1520 | |
| 539 |
Elbis |
19년 전 | 1789 | |
| 538 |
Elbis |
19년 전 | 1563 | |
| 537 |
Elbis |
19년 전 | 1763 | |
| 536 |
Elbis |
19년 전 | 1547 | |
| 535 |
Elbis |
19년 전 | 1940 | |
| 534 |
Elbis |
19년 전 | 1828 | |
| 533 |
Elbis |
19년 전 | 1426 | |
| 532 |
Elbis |
19년 전 | 1431 | |
| 531 |
Elbis |
19년 전 | 1343 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기