1 / 6

<ul> <li id="first1">1-1 번 목록 </li> <li name="second">1-2 번 목록 </li&g

DOM 객체 찾기. <ul> <li id="first1">1-1 번 목록 </li> <li name="second">1-2 번 목록 </li> <li class="third">1-3 번 목록 </li> </ul> <ul> <li id="first2">2-1 번 목록 </li> <li name="second">2-2 번 목록 </li> <li class="third">3-3 번 목록 </li> </ul>

hafwen
Download Presentation

<ul> <li id="first1">1-1 번 목록 </li> <li name="second">1-2 번 목록 </li&g

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DOM 객체 찾기 <ul> <li id="first1">1-1번 목록</li> <li name="second">1-2번 목록</li> <li class="third">1-3번 목록</li> </ul> <ul> <li id="first2">2-1번 목록</li> <li name="second">2-2번 목록</li> <li class="third">3-3번 목록</li> </ul> <input type="text" name="txt" id="txtId" class="txtClass" value="텍스트" /> <input type="button" name="btn" id="btnId" class="btnClass" value="버튼" /> 1. children, value body의 세번째 자식요소 value 출력 2. getElementsByTagName, className 두번째 input 태그의 속성중 className 출력 3. getElementsByClassName, previousSibling, tagName class가 third인 첫번째 요소의 이전 형제 요소를 찾고 tagName 출력

  2. Checkbox / RadioButton 선택된 요소 찾기 <form name="examForm"> <input type="checkbox" name="check" value="1" /> 1번 <input type="checkbox" name="check" value="2" /> 2번 <input type="checkbox" name="check" value="3" /> 3번 <input type="checkbox" name="check" value="4" /> 4번 <br /> <input type="radio" name="radio" value="1" /> 1번 <input type="radio" name="radio" value="2" /> 2번 <input type="radio" name="radio" value="3" /> 3번 <input type="radio" name="radio" value="4" /> 4번 <br /> <input type="button" name="btn" value="확인" onclick="run()" /> </form>

  3. Checkbox / RadioButton 선택된 요소 찾기 <script> function run() { var checks = document.examForm.check; for(var i = 0; i < checks.length; i++) { if(checks[i].checked) { console.log("check : " + checks[i].value); } } var radios = document.examForm.radio; for(var i = 0; i < radios.length; i++) { if(radios[i].checked) { console.log("radio : " + radios[i].value); } } } </script>

  4. input text 에 입력된 내용 유효성 검사 (1/3) 입력된 값 중 특수문자가 포함되어 있는지 확인 <head> <script> function isSpecial(input) { var chars = “~`!@#$%^&*()_-+=|\\{[}]:;\"\'<,>.?/”; for(var i = 0, len = input.length; i < len; i++) { if(chars.indexOf(input.charAt(i) > -1) { return true; } } return false; } function run() { var input = document.getElementsByName(“txt”)[0].value; if(isSpecial(input)) { alert(“특수문자 포함”); } else { alert(“특수문자 미포함’); } } </script> </head> <body> <input type=“text” name=“txt” /> <input type=“button” value=“버튼” onclick=“run()” /> </body>

  5. input text 에 입력된 내용 유효성 검사 (2/3)

  6. input text 에 입력된 내용 유효성 검사 (3/3) // 문자열 확인 함수 function checkChar(input, chars) { // loop 돌면서 입력 문자 검사 // return true or false } // 특수문자 포함 여부 확인 함수 function isSpecial(input) { // checkChar() 함수 호출 } // 영어 포함 여부 확인 함수 function isAlpha(input) { // checkChar() 함수 호출 } // 숫자 포함 여부 확인 함수 function isNumeric(input) { // checkChar() 함수 호출 } // 웹페이지의 버튼 클릭시 실행 함수 function run() { // 입력된 문자열을 찾아서 값을 가져온 후 // 영어, 숫자, 특수문자 포함여부 확인 } <body> <input type=“text” name=“txt” /> <input type=“button” value=“버튼” onclick=“run()” /> </body>

More Related