● 아래의 JavaScript코드를 분석해보자.
const fields = document.querySelectorAll('[data-field]');
console.log(fields);
const task = {
title: '코드 에디터 개발',
manager: 'CastleRing, Raccoon Lee',
status: '',
};
for (let tag of fields) {
const field = tag.dataset.field;
tag.textContent = task[field];
}
const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
const status = btn.dataset.status;
btn.onclick = function () {
fields[2].textContent = status;
fields[2].dataset.status = status;
};
}1_ 태그들 중 data-field의 속성을 가진 태그들을 유사배열로 "field"라는 변수에 저장
const fields = document.querySelectorAll('[data-field]');2_ 객체 배열 "task" : 속성명 == 태그의 data-filed 속성값 , 속성값 : 태그에 들어갈 textContent
const task = {
title: '코드 에디터 개발',
manager: 'CastleRing, Raccoon Lee',
status: '',
};즉, task의 속성명 ("title","manager","status")와 fields의 data-filed 속성값과 일치하면, task의 속성값을 fileds에 해당하는 태그의 textContent에 삽입하겠다.
3_ fields의 태그들의 data-field의 속성값을 호출 , 변수에 저장해서, 객체의 해당하는 속성명과 일치하면 , 그 속성값을 texcContent를 대입
for(let element of fields)
{
const 속성값 = element.dataset.field;//요소의 data-field속성의 속성값
element.textContent = task[속성값];//객체에서 해당 속성명과 일치한 속성값을 요소의 텍스트 노드에 대입
}
● 연습 1 :
- 다음 아래의 html코드에 대하여,
- 할 일 => "코드 에디터 개발"
- 담당자 => "CastleRing, Raccon Lee"
- 상태 => "병신"
의 텍스트가 추가되도록, dataset을 이용하여, JavaScript 코드 작성하여라.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<p>할 일 : <b data-field="title"></b></p>
<p>담당자 : <b data-field="manager"></b></p>
<p>상태 : <b data-field="status"></b></p>
<div>
상태 변경:
<button class="btn" data-status="대기중">대기중</button>
<button class="btn" data-status="진행중">진행중</button>
<button class="btn" data-status="완료">완료</button>
</div>
<script></script>
</body>
</html>- 정답 :
//1_data-field를 갖고있는 노드들을 유사배열 변수로 저장
const fields = document.querySelectorAll('[data-field]');
//2_ 각 요구조건에 나온 항목 : 넣어야할 속성값을 객체로 저장
const task = {
title : "코드 에디터 개발",
manager : "CastleRing, Raccon Lee",
status : "병신",
}
//3_ fields를 for로 순회
for(let node of fields)
{
//4_임시 변수에 fields의 태그의 data-field 속성값을 저장
const tC = node.dataset.field;
//5_ data-field 속성값에 해당하는 객체 프로퍼티의 속성값을 node의 텍스트 노드에 대입
node.textContent = task[tC];
}● 연습 2 :
- 다음 아래의 html코드에 대하여,
- 상태 창에는 버튼이 눌렀을 떄, 해당 버튼의 textContent가 출력되도록 JavaScript 코드 작성하여라.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<p>할 일 : <b data-field="title"></b></p>
<p>담당자 : <b data-field="manager"></b></p>
<p>상태 : <b data-field="status"></b></p>
<div>
상태 변경:
<button class="btn" data-status="대기중">대기중</button>
<button class="btn" data-status="진행중">진행중</button>
<button class="btn" data-status="완료">완료</button>
</div>
<script></script>
</body>
</html>- 정답 :
//순서1
//1_data-field를 갖고있는 노드들을 유사배열 변수로 저장
const fields = document.querySelectorAll('[data-field]');
//2_ 각 요구조건에 나온 항목 : 넣어야할 속성값을 객체로 저장
const task = {
title : "코드 에디터 개발",
manager : "CastleRing, Raccon Lee",
status : "대기중",
}
//3_ fields를 for로 순회
for (let node of fields) {
//4_임시 변수에 fields의 태그의 data-field 속성값을 저장
const tC = node.dataset.field;
//5_ data-field 속성값에 해당하는 객체 프로퍼티의 속성값을 node의 텍스트 노드에 대입
node.textContent = task[tC];
}
const statusNode = fields[2];
statusNode.textContent="";
const btns = document.querySelectorAll('[data-status]');
for(let btn of btns)
{
btn.onclick = function(){
statusNode.textContent = btn.dataset.status;
}
}● 연습 3 :
[연습2]에서 스타일 시트를 적용하여, <b>태그 상태 창에 버튼의 스타일 시트 적용해라.
- style.css
[data-status] {
padding: 5px 10px;
}
[data-status="대기중"] {
background-color: #FF6767;
color: #FFFFFF;
}
[data-status="진행중"] {
background-color: #5f62ff;
color: #FFFFFF;
}
[data-status="완료"] {
background-color: #07c456;
color: #FFFFFF;
}- 정답 :
<p>상태 : <b data-field="status"></b></p>
상태에 해당하는 태그를 관찰해보면
p Box 상태
내부 b박스 datafiled = "status" 이므로,
b박스에 data-status 속성을 추가해, data-status 속성값을 대입하여, css 스타일 적용되도록 한다.
const statusNode = fields[2];
statusNode.textContent = "";
const btns = document.querySelectorAll('[data-status]');
for (let btn of btns) {
const status = btn.dataset.status;
btn.onclick = function () {
statusNode.textContent = status;
statusNode.dataset.status = status;
}
}
