!! 핵심
1) display 속성을 활용하여 나타나고 보여지도록 설정할 수 있다.
2) <input> 요소의 type 속성값이 “checkbox” 또는 “radio”인 경우, .checked 속성을 활용하여 true/false를 리턴받을 수 있다.
3) 함수의 매개변수 this는 함수를 포함한 객체에 대한 참조이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
fieldset {
width: 400px;
text-align: center;
background: #dbdbdb;
}
div.box {
width: 500px;
height: 50px;
box-align: center middle;
margin: 10px;
padding: 10px;
background: #ffcc00;
display: none;
}
</style>
</head>
<body>
<p>Hint 함수 호출 시 매개변수로 this를 보내면 호출한 엘리먼트가 전송</p>
<p>자바스크립트에서 엘리먼트.checked를 하면 라디오박스 선택시 true/선택이 안된경우 false를 리턴</p>
<fieldset>
<legend>검색할 항목을 선택하세요.</legend>
<input type="radio" name="category" value="title" onclick="showDiv(this);" id="title"><label for="title">제목</label>
<input type="radio" name="category" value="date" onclick="showDiv(this);" id="date"><label for="date">날짜</label>
<input type="radio" name="category" value="writer" onclick="showDiv(this);" id="writer"><label for="writer">작성자</label>
<br>힌트 : display 속성을 이용<br>
</fieldset>
<hr>
<div id="titleBox" class="box">
<form method="post" action="">
<label> 검색할 제목을 입력하세요 : </label>
<br>
<input type="search" name="title" size="50">
<input type="submit" value="검색">
</form>
</div>
<div id="dateBox" class="box">
<form method="post" action="">
<label> 검색할 날짜를 선택하세요 : </label>
<br>
<input type="date" name="start"> -
<input type="date" name="end">
<input type="submit" value="검색">
</form>
</div>
<div id="writerBox" class="box">
<form method="post" action="">
<label> 검색할 작성자 아이디를 입력하세요 : </label>
<br>
<input type="search" name="writer" size="25">
<input type="submit" value="검색">
</form>
</div>
<script type="text/javascript">
//요구한 내용을 변수, 연산자, 제어문 등을 사용하여 실행되게 하시오.
//제목 체크시, titleBox 만 보여지게
//날짜 체크시, dateBox 만 보여지게
//작성자 체크시, writerBox 만 보여지게 함
</script>
</body>
</html>요구한 내용을 변수, 연산자, 제어문 등을 사용하여 실행되도록 <script></script>내부 코드 작성하기
제목 체크시, titleBox 만 보여지게
날짜 체크시, dateBox 만 보여지게
작성자 체크시, writerBox 만 보여지게
#function_ex1(1)
.checked 속성을 활용한 리턴 값(true/false)을 활용하는 방법
<script type="text/javascript">
function showDiv() {
//radio버튼의 속성들 가져오기
var category = document.getElementsByName("category");
//div노란박스 속성들 가져오기
var box = document.getElementsByClassName("box");
//.checked 속성을 활용하여 true/false 리턴받기
for (var i = 0; i < category.length; i++) {
//console창 확인용
console.log(category[i].checked);
if (category[i].checked == true) { //선택된 radio버튼이 true를 반환해주었을 때
box[i].style.display = "block"; //div 노란박스 display를 block으로 변경
} else if (category[i].checked == false) { //선택된 radio버튼이 false를 반환해주었을 때
box[i].style.display = "none"; //div 노란박스 display를 none으로 변경
}
}
}
</script>if문은 true일때 실행되니까......... 좀 더 간단하게 쓸 수 있었다...........!
if (category[i].checked) {
box[i].style.display = "block";
} else {
box[i].style.display = "none";
}
선택한 항목에 대한 div 노란박스가 보이고, Console창에서도 .checked사용을 통한 true/false 리턴을 확인할 수 있다.
#function_ex1(2)
<input>타입에 onclick이벤트 속성을 실행하고, 함수의 매개변수로 this를 전달받아 처리하는 방법
<script type="text/javascript">
//radio속성의 onclick 매개변수this -> 변수명obj
function showDiv(obj) {
//매개변수 this는 함수를 포함한 객체에 대한 참조이다.
console.log(obj);
//div노란박스 속성들 가져오기
var box = document.getElementsByClassName("box");
//div노란박스 전부 다 display속성 none으로 숨기기
for (var i = 0; i < box.length; i++) {
box[i].style.display = "none";
}
//obj의 value값 활용
if (obj.value == 'title') {
box[0].style.display = "block";
} else if (obj.value == 'date') {
box[1].style.display = "block";
} else {
box[2].style.display = "block";
}
}
</script>
매개변수 this로 전체를 전달받았기 때문에 value값이 아닌 id값도 활용 가능하다.
//obj의 id값 활용
if (obj.id == 'title') {
box[0].style.display = "block";
} else if (obj.id == 'date') {
box[1].style.display = "block";
} else {
box[2].style.display = "block";
}
Console창에서 매개변수로 this를 가져왔을 때 변수obj가 가지고 있는 값을 확인 할 수 있다.
'JavaScript' 카테고리의 다른 글
| 04_객체 (0) | 2020.10.25 |
|---|---|
| 03_함수(실습예제(2)) (0) | 2020.10.22 |
| 03_함수(2) (0) | 2020.10.21 |
| 03_함수(1) (0) | 2020.10.21 |
| 02_배열(실습예제(3)) (0) | 2020.10.21 |