JavaScript_04_dom_실습

Transcript JavaScript_04_dom_실습

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

JavaScript_04_dom_실습

Transcript JavaScript_04_dom_실습

Directory