<html>
<head>
</head>
<body>
<h1>웹 브라우저 객체</h1>
<ul>window
<li>frame
<li>location
<li>history
<li>event
<li>navigatro
<li>document
<ul>
<li>applet
<li>link
<li>anchor
<li>area
<li>image
<li>all
<li>layer
<li>form
<ul>
<li>checkbox
<li>button
<li>radio
<li>reset
<li>submit
<li>hidden
<li>passowrd
<li>fileupload
<li>text
<li>textarea
<li>select
<ul>
<li>option
</ul>
</ul>
</ul>
</ul>
<h2>Document 하위 객체들</h2>
<h3>Form 객체</h3>
폼과 입력양식접근 위해 사용.<br>
태그에 name속성 부과.<br>
document.폼의이름.속성<br>
<ul>
<li>속성
<ul>
<li>action : 전송될 데이터를 처리할 url
<li>elements : 폼안에 있는 실질적인 입력양식 -??
<li>encoding : 데이터 인코딩 타입 - 타입들 찾아봐야함.
<li>method : 전송방식(get/post)
<li>name : 폼의 이름 -> [object]로 출력됨
<li>target : 서버로 보내고 처리결과를 받아볼 창
</ul>
<li>메소드
<ul>
<li>submit() : 입력된 데이터를 서버로 전송
<li>reset() : 입력 양식 초기화
</ul>
<ul>
<li>이벤트
<ul>
<li>onSubmit() : 데이터가 전송되기전에 발생하는 이벤트
<li>onReset() : 초기화전에 발생하는 이벤트
</ul>
</ul>
</ul>
<br>
<h3>Text 객체</h3>
<ul>입력상자의 정보를 제공하는 객체<br>형식<br>
document.폼의이름.텍스상자이름.속성/메소드()
<li>속성
<ul>
<li>type : 해당 입력 양식타입
<li>name : 텍스트 상자 이름
<li>value : 텍스트 상자에 입력된 값
<li>defaultvalue : 텍스트 상자의 초기값
</ul>
<li>메소드
<ul>
<li>focus : 텍스트 상자에 커서를 위치
<li>blur : 텍스트 상자에서 커서 사라지게함
<li>select : 텍스트 상자에 선택된 값 모두 선택
</ul>
<li>이벤트
<ul>
<li>onBlur() : 텍스트 상자에서 다르곳에 커서위치하게되면 발생 이벤트.
<li>onChange() : 텍스트 상자의 내용이 바뀌면 발생이벤트
<li>onFocus() : 텍스트 상자에 커서 위치하면 발생이벤트
<li>onSelect() : 텍스트 상자에 입력된 값 선택할때 발생이벤트
</ul>
</ul>
<xmp>앞쪽 input에 글자 넣고 옆 버튼 누르면. 앞쪽내용복사, 뒷쪽 들어가면 전체선택, 수정하면 대문자로 바꿈.
<form name="form1">
<input type="text" name="box1" size="10">
<input type="button" value="->" onClick="this.form.box2.value=this.form.box1.value">
<input type="text" name="box2" size="10" onfocus="this.select()" onChange="this.value=this.value.toUpperCase();">
</form>
</xmp>
<form name="form1">
<input type="text" name="box1" size="10">
<input type="button" value="->" onClick="this.form.box2.value=this.form.box1.value">
<input type="text" name="box2" size="10" onfocus="this.select()" onChange="this.value=this.value.toUpperCase();">
</form>
<br>
<h3>Password 객체</h3>
*표시로 입력문자 가려주고, 자동으로 한글을 제외한 영문/숫자를 받음.<br>
//onSubmit 먼저호출후 action 페이지로 넘어감.
<xmp>
<script type="text/jscript">
function check1()
{
//아래내용은 설명들은것이나, 이해가 안감 // 추후 요건물랐네에 포함됨
//여기서 eval은 객체를 만들어줌.
//var inform = eval("document.passwordform");
//위에거랑 차이점 못느낌.
var inform = document.passwordform;
if(!inform.id.value)
{
alert("id를 넣어주세요");
inform.id.focus();
return false;
}
}
</script>
<form name="passwordform" method="post" action="#" onSubmit="return check1()">
ID : <input type="text" name="id"><br>
Pwd : <input type="password" name="pwd" onBlur="this.form.recivepwd.value=this.value">
<input type="text" name="recivepwd"><br>
<input type="submit"><input type="reset">
</form>
</xmp>
<script type="text/jscript">
function check1()
{
//아래내용은 설명들은것이나, 이해가 안감
//여기서 eval은 객체를 만들어줌.
//var inform = eval("document.passwordform");
//위에거랑 차이점 못느낌.
var inform = document.passwordform;
if(!inform.id.value)
{
alert("id를 넣어주세요");
inform.id.focus();
return false;
}
}
</script>
<form name="passwordform" method="post" action="#" onSubmit="return check1()">
ID : <input type="text" name="id"><br>
Pwd : <input type="password" name="pwd" onBlur="this.form.recivepwd.value=this.value">
<input type="text" name="recivepwd"><br>
<input type="submit"><input type="reset">
</form>
<br>
<h3>Textarea 객체</h3>
document.폼이름.textarea이름.속성/메소드();<br>
text와 동일 속성/메소드 이여서 생략한것일까?<br>
</body>
</html>