[JS] 자바스크립트의 객체 종류 - 문서 객체 모델 (DOM)

-웹문서에 접근 및 제어 가능한 형태

form 태그(객체)

• 사용자의 정보를 입력받아서 전달하는 태그

-fieldset 태그로 감싸줌

<fieldset>
    <legend> 폼태그 제목 </legend>
    <h3> 사용자의 정보를 입력받아서 전달하는 태그 </h3>
</fieldset>

<form action="" method="">

action : 정보를 전달하는 페이지(속성)

method : 전달 방법(속성)

 

method 속성

get 방식

-전송할 데이터를 주소(URL)에 붙여서 전송
-URL끝에 ? 사용해서 정보 전달 (중요데이터 노출)
-데이터 길이 제한(256byte) -body가 필요없음
-빠른 전송속도
-&을 사용하여 데이터를 연속으로 사용 가능
ex) www.itwillbs.co.kr?id=itwill&age=20

post 방식

-전송할 데이터를 body에 담아서 전송(주소줄 표시x)
-데이터 길이 제한X
-body 필수
-느린 전송속도
-URL 데이터 전송X, body에 담아서 전송 (중요데이터 노출X)

⇒ get 방식, post방식 자체가 보안에 취약·뛰어난게 아님

⇒중요데이터 노출에 따라 보안이 약하고 강함.

⇒ 전송속도의 빠르고 느림은 상대적임. 빠른이유는 데이터제한(256byte)이 있기 때문 (작은 데이터)

⇒ post길이제한x → body 만들어서 채워서 이동 → 상대적으로 느려보임

⇒ 기술 개념상으로 get방식이 더 빠름

<fieldset>
  <legend> 폼태그 제목 </legend>
  <h3> 사용자의 정보를 입력받아서 전달하는 태그 </h3>
  <!-- action="정보를 전달하는 페이지"
       method="전달 방법" -->
  
  <form action="itwill.jsp" method="get">
      <input type="text">

      <input type="submit" value="전송">

  </form>
</fieldset>

전송 클릭시 뜨는 화면. 주소가 없음

⇒ <input type="text" name="txt"> 로 바꾸면 주소줄이 바뀜

<input type="button" value="속성확인" onclick="fn1();">

<script>
    function fn1() {
        // alert("fn1() 실행");
        
				//폼태그 객체
        alert(window.document.forms[0]);
    }
</script>

console.log(window.document.forms[0]);

console.log(window.document.forms[0].action);

<fieldset>
    <legend> 폼태그 제목 </legend>
    <h3> 사용자의 정보를 입력받아서 전달하는 태그 </h3>
    <!-- action="정보를 전달하는 페이지"
         method="전달 방법" -->
    
    <form action="itwill.jsp" method="get" name="fr">
        <input type="text" name="txt">
        <!-- 파라메터 : 주소줄로 전달하는 데이터 
            input name 속성 == 파라메터명
            name 속성이 없으면 전달할 수 없다! -->

        <input type="submit" value="전송">
        <hr>
        <input type="button" value="속성확인" onclick="fn1();">
    </form>
</fieldset>

<script>
    function fn1() {
        // alert("fn1() 실행");
        
        //폼태그 객체
        // alert(window.document.forms[0]);

        //폼태그가 배열의 형태로 저장
        console.log(window.document.forms[0]);
        console.log(window.document.forms[0].action);
        console.log(window.document.fr.action); 
        // form 태그에 name을 줄 시 name으로 접근 가능

        // document.forms[0].action="busan.jsp";
        
    }
</script>

• 속성변경

<!-- busan.jsp 페이지로 post방식으로 전송 가능하게 변경-- >

<input type="button" value="속성변경" onclick="fn2();">

<script>
  function fn2() {
  document.forms[0].action="busan.jsp";
  document.fr.method="post";
	return;
	document.fr.submit();
	}

</script>

submit = click + submit

<input type="submit" value="전송">에 onclick을 사용하지 않고

<form action="itwill.jsp" method="get" name="fr" onsubmit="fn3();"> 폼태그 안에 onsubmit 이벤트를 사용한다.

<form action="itwill.jsp" method="get" name="fr" onsubmit="fn3();">
    <input type="text" name="txt">
    <!-- 파라메터 : 주소줄로 전달하는 데이터 
        input name 속성 == 파라메터명
        name 속성이 없으면 전달할 수 없다! -->

    
    <!-- busan.jsp 페이지로 post방식으로 전송 가능하게 변경 -->                    
    <input type="submit" value="전송">
	</form>
</fieldset>

<script>
function fn3() {
            document.forms[0].action="busan2.jsp";
            document.fr.method="post";
        }
</script>

 

form - 입력

submit동작 수행할 때, id, pw가 모두 있을때만 전달

• submit동작 수행할 때, id, pw가 모두 있을때만 전달

  <script>
    function fn4() {
        // submit동작 수행할 때, id, pw가 모두 있을때만 전달
        alert("fn4() 실행");
  
        // id, pw값이 있는지 없는지 체크
        // => value가 "" (공백)문자인지 비교
        alert(window.document.fr2.id.value);            
        // console.log(window.document.fr2.id);            
        if(window.document.fr2.id.value == "") {
            alert("아이디 입력X");
            return false; // 아이티 입력X시 페이지 안넘어감
        }
        if(window.document.fr2.pw.value == "") {
            alert("비밀번호 입력X");
            return false;
        }
    }
  </script>
  

• <fieldset> <legend> form - 입력 </legend> <form action="itwill.jsp" method="get" name="fr2" onsubmit="return fn4();"> <label> 아이디 : </label> <input type = "text" name="id" value=""><br> 비밀번호 : <input type="password" name="pw"><br> <input type="submit" value="전송"> </form> </fieldset>
• 아이디가 5자리 이상일때만 submit (5자리 미만시 페이지 이동X)

if(window.document.fr2.id.length < 5) {
      alert("아이디가 5자리 미만입니다!");
      return;
  }

• textarea 태그

<textarea name="content"> 여기 쓰는 글자가 value에 자동으로 들감 </textarea>

 

form - 선택

<fieldset>
        <legend> form - 선택 </legend>
        <form action="itwill.jsp" method="get">
            radio 버튼 
            <input type="radio" name="gender"> 
            <input type="radio" name="gender">
            <hr>
            checkbox버튼
            <input type="checkbox" name="hobby">
            <input type="checkbox" name="hobby">
            <input type="checkbox" name="hobby">
            <hr>
            <input type="submit" value="전송">

        </form>
    </fieldset>

<fieldset>
    <legend> form - 선택 </legend>
    <form action="itwill.jsp" method="get">
        radio 버튼 
        <input type="radio" name="gender" value="남자"> 남자
        <input type="radio" name="gender" value="여자"> 여자
        <hr>
        checkbox버튼
        <input type="checkbox" name="hobby" value="여행"> 여행
        <input type="checkbox" name="hobby" value="운동"> 운동
        <input type="checkbox" name="hobby" value="게임"> 게임
        <hr>
        <input type="submit" value="전송">

    </form>
</fieldset>

• 전송버튼 클릭시 선택한 성별의 정보 출력

<fieldset>
  <legend> form - 선택 </legend>
  <form action="itwill.jsp" method="get" name="fr3" onsubmit="return fn5();">
      radio 버튼 
      <input type="radio" name="gender" value="남자"> 남자
      <input type="radio" name="gender" value="여자"> 여자
      <hr>
      checkbox버튼
      <input type="checkbox" name="hobby" value="여행"> 여행
      <input type="checkbox" name="hobby" value="운동"> 운동
      <input type="checkbox" name="hobby" value="게임"> 게임
      <hr>
      <input type="submit" value="전송">
  </form>
</fieldset>

<script>
  // 전송버튼 클릭시 선택한 성별의 정보 출력
  function fn5() {
      if(window.document.fr3.gender.value == "남자") {
          alert("선택 : 남자!");
      } if (window.document.fr3.gender.value == "여자") {
          alert("선택 : 여자!");
      }
  }
</script>

⇒ 1번째인지 2번째인지로도 가능

⇒ checked 체크시 true, 체크X시 false

⇒ 똑같은 이름으로 여러번 쓸 수 있는건 배열밖에 없음!

if(window.document.fr3.gender[0].checked == true ) {
                alert("선택 : 남자!");
            } if (window.document.fr3.gender[1].checked == true) {
                alert("선택 : 여자!");
            }

---

• 취미를 하나라도 선택시 전송
• if(window.document.fr3.hobby[0].checked == false // !window.document.fr3.hobby[0].checked && document.fr3.hobby[1].checked == false && document.fr3.hobby[2].checked == false ) { alert("취미를 선택하세요!"); return false; }

---

• select 태그

-요소의 value가 없는 경우 text값을 전달 -요소의 value가 있는 경우 value값을 전달

<fieldset>
	<select name="subject">
      <option value=""> 메뉴를 선택하세요. </option>
      <option value="2"> JAVA </option>
      <option value="3"> JSP </option>
      <option value="4"> JavaScript </option>
      <option value="5"> DataBase </option>
  </select>
</fieldset>

if(window.document.fr3.subject.value == "") {
    alert("과목 메뉴를 선택하세요!");
    return false;
}

• select => selectedIndex 속성 (선택된 요소의 인덱스(숫자))
• option => selected 속성 (특정요소의 선택여부 판단(boolean))

if(window.document.fr3.subject.options[0].selected) {
    alert("과목 메뉴를 선택하세요!");
    return false;
}