728x90
반응형
문제 1) 문제 파일을 열면 다음과 같이 항목 5개가 나열되어 있습니다. 힌트를 참고하여 항목 앞에 있는 체크 표시를 누르면 항목 텍스트의 글자가 회색(#ccc)으로 바뀌면서 가로줄이 그려지는 소스를 작성하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 1</title>
<style>
ul{
list-style: none;
}
li {
font-size:20px;
line-height: 35px;
}
.check {
color:#ccc;
font-size:20px;
margin-right:25px;
}
.check:hover {
color:#222;
}
</style>
</head>
<body>
<h1>할 일 목록</h1>
<ul>
<li><span class="check">✓</span>할 일 1 </li>
<li><span class="check">✓</span>할 일 2 </li>
<li><span class="check">✓</span>할 일 3 </li>
<li><span class="check">✓</span>할 일 4 </li>
<li><span class="check">✓</span>할 일 5 </li>
</ul>
<script>
var nodeLists = document.querySelectorAll(".check");
var i;
var num = 0;
for(i = 0; i<nodeLists.length; i++){
nodeLists[i].addEventListener("click", clicks);
}
function clicks(){
if(num%2 == 0){
this.parentNode.style.color = "#ccc";
this.parentNode.style.textDecoration = "line-through";
} else{
this.parentNode.style.color = "";
this.parentNode.style.textDecoration = "";
}
num++;
}
</script>
</body>
</html>최종 결과는 1번 클릭시 원하는 스타일로 지정했고 동일한 것을 1번 더 누르면 원상태로 복귀하도록 했습니다.
이때, querySelectorAll을 사용하면 원하는 노드를 다 배열로 지정합니다.
그 배열을 반복문을 통해 click하면 clicks라는 함수가 실행 되도록 설정했습니다.
클릭 함수에는 this를 사용해 해당 배열만 동작하도록 만들었습니다.
this라는 것은 자신을 지칭하는 것이기 때문에 해당 배열(nodeLists[i] 자기자신)만 click이라는 동작을 수행합니다.
class의 parent는 il이므로 parentNode라는 프로퍼티를 사용해 자신을 누르면 부모 요소까지 모두 변경되도록 만들었습니다.
클릭에 대한 설정은 num이라는 변수의 값을 변화시켜주며 동작을 다르게 설정했습니다.
문제 2) 행(row)과 열(cloumn)의 개수를 입력한 값에 따라 힌트를 참고하여 표를 그리는 소스를 작성하세요. 표를 구성하는 table, td, tr 요소의 관계를 잘 생각하고 노드를 추가하여 작성하세요. 여기에는 작성한 소스가 완벽하지 않더라도 DOM을 사용해 표를 그리는 것에 집중하여 만들어 보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</title>
<style>
tr, td {
border: 1px solid #ccc;
padding: 15px 30px 15px 10px;
margin: 45px;
}
</style>
</head>
<body>
<div>
<form action="">
<input type = "text" id="row">행
<input type = "text" id="col">열
<button onclick ="tableMake(); return false; this.onclick='';">작성</button>
<button onclick ="tableDelete(); return false;">삭제</button>
</form>
<div id="table1"></div>
</div>
<script>
function tableMake(){
var table = document.createElement("table");
var table1 = document.querySelector("#row");
// var rowText = document.createTextNode(table1.value);
var table2 = document.querySelector("#col");
// var colText = document.createTextNode(table2.value);
var i, j;
for(i = 0; i<table1.value; i++){
var trTable = document.createElement("tr");
for(j = 0; j<table2.value; j++){
var tdTable = document.createElement("td");
var text = document.createTextNode(i + ", " + j);
tdTable.appendChild(text);
trTable.appendChild(tdTable);
}
table.appendChild(trTable);
}
document.querySelector("#table1").appendChild(table);
// document.getElementById("table")로 해도 문제 없습니다.
}
function tableDelete(){
table.parentNode.removeChild(table);
}
</script>
</body>
</html>함수를 실행하면 table을 만들고 입력한 값에 따라 행과 열의 개수를 만들어 줍니다.
이때 중요한 것은 부모 노드와 자식 노드를 appendChild를 통해 지정을 잘 하는 것이 중요합니다.
또한, 표의 style을 지정해야합니다. 아니면 표가 출력되지 않네요,,ㅎㅎ
삭제를 누르면 table을 삭제할 수 있도록 만들었어요!!
문제가 갈수록 어려워지네요,, 그래도 해결하고 나니 엄청 뿌듯하네요!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] Vue.js 입문 데이터 표시(new Vue, v-text, v-html) (0) | 2022.12.21 |
|---|---|
| [java script] Vue.js 입문 start (0) | 2022.12.21 |
| [java script] DOM에서 노드 추가, 삭제하기 (0) | 2022.12.20 |
| [java script] 구구단 출력하기 예시 (0) | 2022.12.19 |
| [java script] addEventListener의 이벤트 사용 예시 (2) | 2022.12.19 |
