본문 바로가기
컴퓨터/언어,프로그래밍

자바스크립트 다섯번째 요약정리

스노우볼^^ 2009. 7. 7. 04:16

5강 자바스크립트 폼객체(입력양식)
- Form 객체
  <form> 태그의 입력 양식정보를 제어하기 위한 객체
- Text 객체
  사용자로부터 한줄을 입력받기 위한 객체
- Password 객체
  비밀번호 입력양식을 위한 객체
- Hidden 객체
  숨겨진 입력 양식을 위한 객체
- Reset 객체
  사용자로부터 입력된 DATA를 초기화 시키는 객체
- Submit 객체
  사용자로부터 입력된 DATA를 서버에 전송하기 위한 객체
- Checkbox 객체
  사용자로부터 여러개의 선택적 입력을 받기 위한 객체
- Radio 객체
  사용자로부터 같은 그룹에서는 하나의 입력을 받기 위한 객체
- Textarea 객체
  사용자로부터 여러줄의 입력을 받기 위한 객체
- Select 객체
  리스트나 콤보박스를 위한 객체

 

 

 

 

 

1. 자바스크립트 form 객체
- Form 객체
  <form> 태그의 입력 양식정보를 제어하기 위한 객체
- 형식
    document.폼객체명.속성
    document.폼객체명.메소드
- 예
    document.frm.length
    document.frm.elements

 

------------------------------------------------------
 property         |      설명
------------------------------------------------------
 action           | <form> tag의 action속성 정보 반환
------------------------------------------------------
 elements         | 입력양식을 배열로 정의
------------------------------------------------------
 encoding         | <form> tag의 enctype속성 정보 반환
------------------------------------------------------
 length           | 입력양식의 개수를 반환
------------------------------------------------------
 name             | <form> tag의 name속성 반환
------------------------------------------------------
 target           | <form> tag의 target속성 반환
------------------------------------------------------
 method           | <form> tag의 method속성 반환
------------------------------------------------------


------------------------------------------------------
 Method           |      설명
------------------------------------------------------
 submit()         | 입력양식에 입력한 내용을 서버로 보냄
------------------------------------------------------
 reset()          | 입력양식에 입력한 내용 초기화
------------------------------------------------------

 

<html>
<head>
<title>소스7-1</title>
<script language="javascript">
<!--
function test()
{
   var str="1) name = "+document.myform.name+"\n"
   str+="2) action = "+document.myform.action+"\n"
   str+="3) target = "+document.myform.target+"\n"
   str+="4) method = "+document.myform.method+"\n"
   str+="5) encoding = "+document.myform.encoding+"\n"
   str+="6) length = "+document.myform.length+"\n"
}

 

funciton test2()
{
   if(document.myform.name.value=="")
   {
      window.alert("이름을 적어주세요")
      document.myform.name.focus();
      return false;
   }
   if(document.myform.tel.value=="")
   {
      window.alert("전화번호를 적어주세요")
      document.myform.tel.focus();
      return false;
   }
   var str2="1) 이름="+document.myform.name.value+"\n"
       str2 +="2) 전화번호="+document.myform.tel.value
   window.alert(str2)
}
//-->
</script>
</head>
<body>
<form name="myform" method=post target="_self">
1) 이름 : <input type=text size=10 name="name"><br>
2) 전화번호 : <input type=text size=10 name="tel"><br><br>
<input type=button value="form정보" onclick="test()">
<input type=button value="보내기" onclick="test2()">
<input type=button value="다시" onclick="document.myform.reset()">
</form>
</body>
</html>

 

 

2. 자바스크립트 text 객체
- Text 객체
  사용자로부터 한줄로 입력받기 위한 객체
- 형식
    document.폼객체명.text객체명.속성
    document.폼객체명.text객체명.메소드
- 예
    document.frm.txt.value="검색어를 입력하세요"
    document.frm.txt.focus() 

 

------------------------------------------------------
 property         |      설명
------------------------------------------------------
 value            | text객체에 입력한 문자열을 알아냄
------------------------------------------------------


------------------------------------------------------
 Method           |      설명
------------------------------------------------------
 blur()           | 특정한 텍스트 입력 양식에 커서를 제거함
------------------------------------------------------
 focus()          | 특정한 텍스트 입력 양식에 커서를 지정함
------------------------------------------------------
 eval()           | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------
 select()         | 텍스트 입력 양식 안에 있는 문자열을 모두 선택
------------------------------------------------------

 

<html>
<head>
<title>소스7-2</title>
<script language="javascript">
<!--
function test()
{
   var mylen=document.myform.money.value.length
   var str=document.myform.money.value
  
   for(var i=0; i<mylen; i++)
   {
      if((str.charAt(i)<"0") || (str.charAt(i) >"9"))
      {
         window.alert("숫자만 입력 가능합니다.")
         document.myform.money.value='';
         document.myform.money.focus();
         break
      }
   }
}

 

function test2()
{
   if(document.myform.money.value=="")
   {
      window.alert("금액을 입력하여 주세요")
      document.myform.money.focus();
      return false;
   }
   var str="금액 = "+document.myform.money.value+"원"
   window.alert(str)
}
//-->
</script>
</head>
<body>
<form name="myform">
금액 <input type=text size=10 name="money" onblur="test()"><br>
<input type=button value="입력" onclick="test2()">
</form>
</body>
</html>

 

3. 자바스크립트 password 객체
- Password 객체
  비밀번호 입력양식을 위한 객체
- 형식
    document.폼객체명.password객체명.속성
    document.폼객체명.password객체명.메소드
- 예
    document.frm.pwtxt.value
    document.frm.pwtxt.focus()
  
------------------------------------------------------
 property         |      설명
------------------------------------------------------
 value            | text객체에 입력한 문자열을 알아냄
------------------------------------------------------


------------------------------------------------------
 Method           |      설명
------------------------------------------------------
 blur()           | 특정한 암호 입력 양식에 커서를 제거함
------------------------------------------------------
 focus()          | 특정한 암호 입력 양식에 커서를 지정함
------------------------------------------------------
 eval()           | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------
 select()         | 암호 입력 양식 안에 있는 문자열을 모두 선택
------------------------------------------------------


<html>
<head>
<title>소스7-3</title>
<script language="javascript">
<!--
function test()
{
   u_pw=document.myform.pwd
   if((u_pw.value.length>=4) &&(u_pw.value.length<8))
   {
      window.alert("정상적으로 입력하셨습니다.")
      u_pw.focus()
   }
   else
   {
      window.alert("암호는 4자이상 8자이하로 입력하세요")
      u_pw.value=""
      u_pw.focus()
   }
}
//-->
</script>
</head>
<body>
<form name="myform">
암호를 입력하세요(4자이상 8자이하) <input type="password" size=10 name="pwd" maxlength=8 >
<input type=button value="입력" onclick="test()">
</form>
</body>
</html>

 

 

4. 자바스크립트 hidden 객체
- hidden 객체
  숨겨진 입력 양식을 위한 객체
- 형식
    document.폼객체명.hidden객체명.속성
    document.폼객체명.hidden객체명.메소드
- 예
    document.frm.hidden.value="보여라"
    document.frm.hidden.eval()

 

------------------------------------------------------
 property         |      설명
------------------------------------------------------
 value            | text객체에 입력한 문자열을 알아냄
------------------------------------------------------


------------------------------------------------------
 Method           |      설명
------------------------------------------------------
 eval()           | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------


<html>
<head>
<title>소스7-4</title>
<script language="javascript">
<!--
function test()
{
   var str="주체= "+document.myform.hide.value+"\n"
       str="주소= "+document.myform.add.value
   window.alert(str)
}
//-->
</script>
</head>
<body>
<form name="myform">
주소를 입력하세요 <input type=hidden name="hide" value="중앙사이버교육">
<input type=text size=20 name="add"  >
<input type=button value="입력" onclick="test()">
</form>
</body>
</html>

 

 

5. 자바스크립트 Checkbox 객체
- Checkbox 객체
  사용자로부터 여러개의 선택적 입력을 받기 위한 객체
- 형식
    document.폼객체명.checkbox객체명.속성
    document.폼객체명.checkbox객체명.메소드
- 예
    document.frm.checkbox.checked
    document.frm.checkbox.focus()

 

------------------------------------------------------
 property         |      설명
------------------------------------------------------
 value            | <input>태그에서 value속성과 동일하게 적용
------------------------------------------------------
 checked          | 체크상태를 설정하거나 반환
------------------------------------------------------


------------------------------------------------------
 Method           |      설명
------------------------------------------------------
 blur()           | 특정한 암호 입력 양식에 커서를 제거함
------------------------------------------------------
 focus()          | 특정한 암호 입력 양식에 커서를 지정함
------------------------------------------------------
 eval()           | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------
 click()          | 체크박스를 클릭함
------------------------------------------------------


<html>
<head>
<title>소스7-5</title>
<script language="javascript">
<!--
function test()
{
   sel=""
   if(myform.a1.checked)
      sel += "1번 "
   if(myform.a2.checked)
      sel += "2번 "
   if(myform.a3.checked)
      sel += "3번 "
   window.alert(sel+"그림이 맘에 드시는군요...")
}
//-->
</script>
</head>
<body>
<form name="myform">
맘에드는 그림을 선택하세요.<br>
<input type=checkbox name="a1">1.<img src="1.gif"><br><br>
<input type=checkbox name="a2">2.<img src="2.gif"><br><br>
<input type=checkbox name="a3">3.<img src="3.gif"><br><br>
<input type=button value="확인" onclick="test()">
</form>
</body>
</html>

 

6. 자바스크립트 radio 객체
- Radio 객체
  사용자로부터 같은 그룹에서는 하나의 입력을 받기 위한 객체
- 형식
    document.폼객체명.radio객체명.속성
    document.폼객체명.radio객체명.메소드
- 예
    documemt.frm.radio.checked
    documemt.frm.radio.focus()


------------------------------------------------------
 property         |      설명
------------------------------------------------------
 value            | <input>태그에서 value속성과 동일하게 적용
------------------------------------------------------
 checked          | 체크상태를 설정하거나 반환
------------------------------------------------------
 length           | 같은 그룹안에 있는 라디오 버튼의 개수를 반환
------------------------------------------------------

 

------------------------------------------------------
 Method           |      설명
------------------------------------------------------
 blur()           | 특정한 암호 입력 양식에 커서를 제거함
------------------------------------------------------
 focus()          | 특정한 암호 입력 양식에 커서를 지정함
------------------------------------------------------
 eval()           | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------
 click()          | 체크박스를 클릭함
------------------------------------------------------

 

<html>
<head>
<title>소스7-6</title>
<script language="javascript">
<!--
function test()
{
   if(myform.ok[0].checked)
      window.alert("1번 그림이 맘에 드시는군요...")
   else if(myform.ok[1].checked)
      window.alert("2번 그림이 맘에 드시는군요...")
   else if(myform.ok[2].checked)
      window.alert("3번 그림이 맘에 드시는군요...")
   else
      window.alert("그림이 선택되지 않으셨네요.")
}
//-->
</script>
</head>
<body>
<form name="myform">
맘에드는 그림을 선택하세요.<br>
<input type="radio" name="ok">1.<img src="1.gif"><br><br>
<input type="radio" name="ok">2.<img src="2.gif"><br><br>
<input type="radio" name="ok">3.<img src="3.gif"><br><br>
<input type=button value="확인" onclick="test()">
</form>
</body>
</html>

 

 

 

7. 자바스크립트 textarea 객체
- Textarea 객체
  사용자로부터 여러줄의 입력을 받기 위한 객체
- 형식
    document.폼객체명.textarea객체명.속성
    document.폼객체명.textarea객체명.메소드
- 예
    document.frm.ta.value="자기소개를 하세요"
    document.frm.ta.focus()

------------------------------------------------------
 property         |      설명
------------------------------------------------------
 value            | textarea객체에 입력한 문자열을 알아냄
------------------------------------------------------
 

------------------------------------------------------
 Method           |      설명
------------------------------------------------------
 blur()           | 특정한 암호 입력 양식에 커서를 제거함
------------------------------------------------------
 focus()          | 특정한 암호 입력 양식에 커서를 지정함
------------------------------------------------------
 eval()           | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------
 select()         | 텍스트 입력 양식 안에 있는 문자열 모두 선택
------------------------------------------------------

 


8. 자바스크립티 select 객체
- Select 객체
  리스트나 콤보박스를 위한 객체
- 형식
    document.폼객체명.select객체명.속성
    document.폼객체명.select객체명.메소드
- 예
    document.frm.sel.length
    document.frm.sel.focus()


------------------------------------------------------
 Property         |      설명
------------------------------------------------------
 length           | 항목의 개수를 알아냄
------------------------------------------------------
 selectedIndex    | 선택된 항목의 인덱스번호를 반환
------------------------------------------------------
 option           | <option> 태그 정보를 배열로 포함
------------------------------------------------------
 name             | name속성과 동일하게 적용
------------------------------------------------------


------------------------------------------------------
 property         |      설명
------------------------------------------------------
 blur()           | 특정한 텍스트 입력 양식에 커서를 제거함
------------------------------------------------------
 


9. 자바스크립트 file 객체
- File 객체
  파일 업로드 입력 양식을 위한 객체
- 형식
    document.폼객체명.file객체명.속성
    document.폼객체명.file객체명.메소드
- 예
    document.frm.file.value
    document.frm.file.focus()

------------------------------------------------------
 property         |      설명
------------------------------------------------------
 value            | text객체에 입력한 문자열을 알아냄
------------------------------------------------------
 

------------------------------------------------------
 Method           |      설명
------------------------------------------------------
 blur()           | 특정한 암호 입력 양식에 커서를 제거함
------------------------------------------------------
 focus()          | 특정한 암호 입력 양식에 커서를 지정함
------------------------------------------------------
 eval()           | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------

[출처] 자바스크립트 다섯번째 요약정리|작성자 둘리


'컴퓨터 > 언어,프로그래밍' 카테고리의 다른 글

[JavaScript] 아이프레임 링크 관련 소스  (0) 2009.07.15
MFC API 차이  (0) 2009.07.08
자바스크립트 네번째 요약정리  (0) 2009.07.07
자바스크립트 두번째 요약정리  (0) 2009.07.07
자바스크립트 첫번째 요약정리  (0) 2009.07.07
제주삼다수, 2L,... 오뚜기 진라면 매운... 상하목장 유기농 흰... 남양 프렌치카페 카... 고려인삼유통 홍삼 ... 종근당건강 오메가3... 요이치 카링 유무선...

'컴퓨터/언어,프로그래밍' Related Articles

티스토리툴바