현우의 개발상자
멋쟁이사자 FE7 32일차 본문
Findings (배운 점)
JS
window
웹 브라우저 창을 나타내는 전역 객체이다.
웹 페이지를 웹 브라우저에서 열면, 그 페이지는 window 객체 안에서 실행되며, 페이지 내에서 모든 스크립트와 코드가 접근할 수 있는 전역적인 콘텍스트 역할을 한다.
🙌 전역적인 콘텍스트는 프로그램의 가장 바깥쪽 범위, 즉 어떤 함수 안에도 포함되지 않은 최상위 범위를 말한다
console.dir
개발자가 자바스크립트 코드를 작성하면서 만든 객체의 내용을 좀 더 편하게 볼 수 있게 도와주는 도구이다. 이 도구를 사용하면 객체 안에 어떤 정
보가 들어있는지, 그 정보들이 어떻게 구성되어 있는지를 트리 모양으로 펼쳐서 보여준다. 이렇게 해서 객체의 내부를 더 잘 파악하고 문제를 해결하거나 코드를 개선하는 데 도움을 준다.
요소 노드에 대한 이동 프로퍼티
| 프로퍼티 | 유형 | 결과 |
| element.children | 자식 요소 노드 | element의 자식 요소 모음 (HTMLCollection) |
| element.firstElementChild | 자식 요소 노드 | element의 첫 번째 자식 요소 하나 |
| element.lastElementChild | 자식 요소 노드 | element의 마지막 자식 요소 하나 |
| element.parentElement | 부모 요소 노드 | element의 부모 요소 하나 |
| element.previousElementSibling | 형제 요소 노드 | element의 이전(previous) or 좌측(left)에 있는 요소 하나 |
| element.nextElementSibling | 형제 요소 노드 | element의 다음(next) or 우측(right)에 있는 요소 |
element.innerHTML
HTML 요소의 내부 콘텐츠를 바꾸는 데 사용된다. 여기서 "요소"란 웹 페이지의 HTML 구조를 이루는 태그들을 말한다. 내부의 HTML 자체를 수정할 때 좀 더 자주 활용된다. "문자열로 반환함"
(내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의 필요)
// HTML
<div id="myDiv">
<p>Hello, <span>world</span>!</p>
</div>
// javascript
const myDiv = document.getElementById('myDiv');
console.log(myDiv.innerHTML)
// 출력
// <p>Hello, <span>world</span>!</p>element.outerHTML
HTML 요소의 시작 태그부터 끝 태그까지의 전체 HTML 코드를 가져오는 속성이다. 자바스크립트를 사용하여 HTML 요소 자체와 그 내용을 모두 변경하고 싶을 때 유용하게 사용될 수 있다. "문자열로 반환함"
(새로운 값을 할당할 경우 요소 자체가 교체되어 버리기 때문에 주의)
// HTML
<div id="myDiv">
<p>Hello, <span>world</span>!</p>
</div>
// javascript
const myDiv = document.getElementById('myDiv');
console.log(myDiv.outerHTML)
// 출력
// <div id="myDiv">
// <p>Hello, <span>world</span>!</p>
// </div>element.textContent
element.textContent는 DOM 요소의 텍스트 콘텐츠를 나타내는 프로퍼티이다. 이 프로퍼티를 사용하여 특정 DOM 요소 안에 있는 텍스트를 읽거나 변경할 수 있다.
(textContent는 말 그대로 텍스트만 다루기 때문에, 특수문자도 그냥 텍스트로 처리한다.)
// HTML
<div id="myDiv">
<p>Hello, <span>world</span>!</p>
</div>
// javascript
const myDiv = document.getElementById('myDiv');
console.log(myDiv.textContent)
// 출력
// Hello, world!
document.createElement
DOM(Document Object Model)에서 새로운 HTML 요소를 생성하는 메서드이다.
element.append
DOM(Document Object Model)에서 요소의 가장 마지막 자식으로 다른 요소나 텍스트를 추가하는 역할을 한다. 자식이 없을 경우 요소 안에 자식을 추가하는 개념으로 이해.
element.prepend
DOM(Document Object Model)에서 요소의 가장 첫 번째 자식으로 다른 요소나 텍스트를 추가하는 역할을 합니다. 자식이 없을경우 요소안에 자식을 추가하는 개념으로 이해.
element.after
DOM(Document Object Model)에서 특정 요소의 다음 형제로 요소나 내용을 추가한다.
element.before
DOM(Document Object Model)에서 특정 요소의 이전 형제로 요소나 내용을 추가한다.
element.remove
DOM(Document Object Model)에서 특정 요소를 문서에서 제거하는 역할을 한다.
(메서드는 매개변수를 필요로 하지 않는다. 괄호 안에는 아무런 값이나 인자를 넣을 필요가 없)
// 새로운 <div> 요소를 만들어서 변수에 할당합니다.
const newDiv = document.createElement('div');
// 생성한 요소에 텍스트를 추가할 수도 있습니다.
newDiv.textContent = '새로운 div 요소입니다.';
// 생성한 요소를 원하는 위치에 추가합니다. (append는 뒤에서 설명할 예정)
document.body.append(newDiv); // body의 마지막 자식으로 추가
document.body.prepend(newDiv); // body의 첫 번쨰 자식으로 추가
document.body.after(newDiv); // body의 다음 형제로 추가
document.body.prepend(newDiv); // body의 이전 형제로 추가
newDiv.remove() // newDiv라는 특정 요소를 제거한다.Apply (적용)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>오늘 할 일</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main">
<h2 class="title">오늘 할 일</h2>
<ul id="to-do-list"></ul>
</div>
<div class="btnBox">
<button id="list-addition">리스트 추가</button>
<button id="list-del">리스트 삭제</button>
</div>
<script src="index.js"></script>
</body>
</html>body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.main {
width: 350px;
margin: 40px;
padding: 30px 0;
background-color: #fcfcfc;
box-shadow: -5px -5px 20px #ffffff, 5px 5px 20px #babecc;
border-radius: 8px;
text-align: center;
}
.title {
margin: 15px auto;
font-size: 30px;
font-weight: 600;
color: #9600ff;
}
#to-do-list {
width: 280px;
margin: 0 auto 15px;
padding: 0;
list-style: none;
}
#to-do-list li {
display: flex;
align-items: center;
justify-content: center;
width: 90%;
height: 40px;
margin: 8px auto 15px;
border-bottom: 1px solid #9600ff;
}
.btnBox {
margin-top: 90px;
}const toDoList = document.querySelector("#to-do-list");
const addition = document.getElementById(`list-addition`);
const del = document.getElementById(`list-del`);
const addNewTodo = (text) => {
const create_li = document.createElement(`li`);
create_li.textContent = text;
toDoList.append(create_li);
};
let num = 0;
addition.onclick = () => {
// if (toDoList.children.length <= 2) {
// const title = prompt("내용을 입력해주세요");
// addNewTodo(title);
// }
if (num === 0) {
addNewTodo("자바스크립트 공부하기");
} else if (num === 1) {
addNewTodo("블로그 작성하기");
} else if (num === 2) {
addNewTodo("운동하기");
}
if (num <= 2) num += 1;
};
del.onclick = () => {
if (num >= 1) {
num--;
}
toDoList.lastElementChild.remove();
};
Feeling (느낀 점)
오늘 처음으로 자바스크립트 실습을 해봤다. 그동안 개념 공부가 조금은 지루하고 힘들었지만, 이렇게 적용해서 내가 원하는 걸 만들어보니 정말 큰 성취감이 느껴졌다. 앞으로 더 많은 기능들을 구현해 볼 예정이다.
'멋쟁이사자 FE7' 카테고리의 다른 글
| 멋쟁이사자 FE7 34일차 (0) | 2023.08.28 |
|---|---|
| 멋쟁이사자 FE7 33일차 (8월 회고) (2) | 2023.08.26 |
| 멋쟁이사자 FE7 30일차 (0) | 2023.08.21 |
| 멋쟁이사자 FE7 29일차 (0) | 2023.08.17 |
| 멋쟁이사자 FE7 28일차 (0) | 2023.08.17 |
