본문 바로가기
Study/JavaScript

[javaScript] Form

힝쏘 2019. 5. 16. 09:50

복습시간
이벤트 
많이쓰이고 사용방법에 대해 많이 알아봐야 한다
대체적으로 많이 쓰이는 이벤트 종류


대체적으로 많이 쓰이는 스크립트
이벤트 버블 중단하기


document html문서자체
window

익스플로러
event.srcElement
event.stopProgration
event.cancelBubble
//"click"이 호출 됐을 때, click me라는 함수가 실행된다
document.addEventListener("click", clickMe, false);

 

폼
- 폼은 이벤트와 많이 관련되어 있다
- 자바스크립트에서 폼은 거의 이벤트이다.

document.form.select.selectindex = 3;
document.form.select.options[1].selected = true;

 

중요한 프로퍼티
action 
method 
name

중요한 메소드
reset - 폼의 reset 버튼이 클릭된 것처럼 행동하는 함수, 폼 내의 객체들의 값을 초기화
submit - 폼의 submit 버튼이 클릭된 것처럼 행동하는 함수, 폼 데이터를 서버로 전송.
내부적으로 onsubmit 핸들러 호출

중요한 컬렉션
all - 폼 내의 모든 요소들의 컬렉션에 대한 레퍼런스
children - 폼의 직계 자식 객체에 대한 컬렉션
elements - 폼 내의 모든 폼 요소들의 컬렉션. <input type=image> 객체는 제외


form의 이벤트 핸들러

onreset, onsubmit

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
 <form name="f" action="aa.jsp" onsubmit="return false">
//this.select - 입력 창에 존재하는 텍스트를 "선택 상태"로 만든다
  <input type="text" name="school" value="정보전산부" onclick="this.select()">
  <br>
  <input type="text" name="dept" value="Com" onchange="this.value=this.value.toUpperCase()">
  <br>
  <input type="submit" value="전송">
  <input type="reset" value="취소">
 </form>
</body>
</html>

src, img객체

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
 <script type="text/javascript">
  function imageSrc(sel) {
  //암기하세요!!!
   var src;
   src = sel.options[sel.selectedIndex].value;
   return src;
  }
  function drawImg(sel, p) {
   p.src = imageSrc(sel);
  }
 </script>
</head>
<body onload="drawImg(document.f.s, document.all.pic)">
 <form name="f">
  <table border=0>
   <tr>
    <td>
     <select name="s" onchange="drawImg(this, pic)">
      <option value="strawberry.gif">딸기
      <option value="banana.gif" selected>바나나
      <option value="apple.gif">사과
     </select>
    </td>
    <td>
     <img id="pic">
    </td>
   </tr>
  </table>
 </form>
</body>
</html>


radio, chechbox 이벤트 핸들러

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
 <script type="text/javascript">
  total=0;
  p=0;

  function calc(btn) {   
   if (btn.type == "radio") {
    total = eval(total) - eval(p)
    p = eval(btn.value)
    total = eval(total) + eval(btn.value)
   } else {
    if (btn.checked == false) {
     total = eval(total) - eval(btn.value);
    } else {
     total = eval(total) + eval(btn.value);
    }
   }
   return(total);
  }
 </script>
</head>
<body>
 <form>
  두부 400원<input type="checkbox" value=400 onclick="this.form.t1.value=calc(this);">
  콩나물 150원<input type="checkbox" value=150 onclick="this.form.t1.value=calc(this);">
  간장 1500원<input type="checkbox" value=1500 onclick="this.form.t1.value=calc(this);">
  <br>
  어떤 종류의 배달을 원하십니까?
  <br>
  퀵 서비스<input type="radio" name="r" value=2000 onclick="this.form.t1.value=calc(this);">
  택배 <input type="radio" name="r" value=10000 onclick="this.form.t1.value=calc(this);">
  <br>
  지불하실 금액은 
//blur - 포커스를 해제한다
  <input type="text" name="t1" size=9 onfocus="this.blur();"> 원 입니다."
 </form>
</body>
</html>


select 객체로 과일 선택하기

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
 <script type="text/javascript">
  function imageSrc(sel) {
  //암기하세요!!!
   var src;
   src = sel.options[sel.selectedIndex].value;
   return src;
  }
  function drawImg(sel, p) {
   p.src = imageSrc(sel);
  }
 </script>
</head>
<body onload="drawImg(document.f.s, document.all.pic)">
 <form name="f">
  <table border=0>
   <tr>
    <td>
     <select name="s" onchange="drawImg(this, pic)">
      <option value="strawberry.gif">딸기
      <option value="banana.gif" selected>바나나
      <option value="apple.gif">사과
     </select>
    </td>
    <td>
     <img id="pic">
    </td>
   </tr>
  </table>
 </form>
</body>
</html>

select 이벤트 핸들러

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
 <script type="text/javascript">
  option1 = new Array(4)
  option2 = new Array(4)
  option3 = new Array(4)

  option1[0] = new Option("황기태", "1-1", true, true)
  option1[1] = new Option("이재문", "1-2")
  option1[2] = new Option("최창렬", "1-3")
  option1[3] = new Option("강승식", "1-4")

  option2[0] = new Option("서태지", "2-1")
  option2[1] = new Option("이소라", "2-2", true, true)
  option2[2] = new Option("양파아", "2-3")
  option2[3] = new Option("젝키스", "2-4")

  option3[0] = new Option("태진아", "3-1")
  option3[1] = new Option("조용필", "3-2")
  option3[2] = new Option("조영남", "3-3")
  option3[3] = new Option("주현미", "3-4", true, true)

  function cOpt(r, y) {
   sel = r.form.s;
   switch(y) {
   case 1:
    for(var i=0; i<4; i++) {
     sel.options[i] = option1[i]
    }
    break;
   case 2:
    for(var i=0; i<4; i++) {
     sel.options[i] = option2[i]
    }
    break;
   case 3:
    for(var i=0; i<4; i++) {
     sel.options[i] = option3[i]
    }
    break;
   }
  }
</script>
</head>
<body>
 <h3></h3>
 <hr>
 학년을 선택하시오
 <p>
 <form name="f">
  <input type="radio" name="id" onclick="cOpt(this, 1)">1학년"
  <input type="radio" name="id" onclick="cOpt(this, 2)">2학년
  <input type="radio" name="id" onclick="cOpt(this, 3)">3학년
  <p>장학생1명을 선택하세요
  <select name="s"></select>
 </form>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
 <script type="text/javascript">
  option1 = new Array(4)
  option2 = new Array(4)
  option3 = new Array(4)

  option1[0] = new Option("황기태", "1-1", true, true)
  option1[1] = new Option("이재문", "1-2")
  option1[2] = new Option("최창렬", "1-3")
  option1[3] = new Option("강승식", "1-4")

  option2[0] = new Option("서태지", "2-1")
  option2[1] = new Option("이소라", "2-2", true, true)
  option2[2] = new Option("양파아", "2-3")
  option2[3] = new Option("젝키스", "2-4")

  option3[0] = new Option("태진아", "3-1")
  option3[1] = new Option("조용필", "3-2")
  option3[2] = new Option("조영남", "3-3")
  option3[3] = new Option("주현미", "3-4", true, true)

  function cOpt(r) {
   //문자열로 가져오기 때문에 숫자형으로 바꿔줘야한다.
   var y = eval(r.options[r.selectedIndex].value);
   sel = r.form.s;
   switch(y) {
   case 1:
    for(var i=0; i<4; i++) {
     sel.options[i] = option1[i]
    }
    break;
   case 2:
    for(var i=0; i<4; i++) {
     sel.options[i] = option2[i]
    }
    break;
   case 3:
    for(var i=0; i<4; i++) {
     sel.options[i] = option3[i]
    }
    break;
   }
   return y;
  }
 </script>
</head>
<body>
 <h3></h3>
 <hr>
 학년을 선택하세요
 <p>
 <form name="f">
  <select name="d" onclick="cOpt(this)">
   <option value="1">1학년
   <option value="2">2학년
   <option value="3">3학년
  </select>
  <p>장학생1명을 선택하세요
  <select name="s"></select>
 </form>
</body>
</html>
저작자표시

'Study > JavaScript' 카테고리의 다른 글

[javaScript] Document 실습  (0) 2019.05.16
[javaScript] Document  (0) 2019.05.16
[javaScript] 정규표현식, 이벤트, 이벤트핸들러, 이벤트 버블 실습  (0) 2019.05.16
[javaScript] 정규 표현식, 이벤트, 이벤트 핸들러, 이벤트 버블  (0) 2019.05.16
[javaScript] 기초 실습  (0) 2019.05.16

'Study/JavaScript' Related Articles

티스토리툴바