js- 이론#4

#6.1 6.2 7.0 7.1

createElement

const bgImage = document.createElement("img"); //함수 안에 태그며을 넣어 엘리멘트를 만든다. 하지만 아직 
//body에 추가된 상태는 아니다

appendChild

//#1
document.body.appendChild(bgImage);	//documnet.body에 bgImage를 추가한다

//#2
const li = document.createElement("li");
const span = document.createElement("span");
li.appendChild(span);			//li에 span을 추가한다

//#3
const toDoList = document.getElementById("todo-list");
toDoList.appendChild(li);		//toDoList에 li를 추가한다

prependChild

document.body.prependChild(bgImage); //appendChild와 거의 동일하나 body의 맨 앞에 엘리멘트를 추가한다

---

#7.2

event.target

이벤트의 타겟(어떤 것이 눌렸는지)를 보는 법

event.target.parentElement

타겟의 부모가 무엇인지 보는 법

function deleteToDo(event){
    const li = event.target.parentElement;
}

 

---

#7.3

JSON.stringify()

array이건 string이건 모두 문자로 바꿔줌

JSON.stringify(["1", "b", "3"]); 
// "[\"1\",\"b\",\"3\"]"

JSON.stringify([1, 2, 3]);
// "[1,2,3]"

JSON.parse

문자열을 다시 원상복구 시켜줌

JSON.parse("[\"1\",\"b\",\"3\"]"); 
// ["1", "2", "3"]

JSON.parse("[1,2,3]");
// [1,2,3];

forEach()

배열의 각 요소마다 특정 함수를 반복 실행하는 함수

배열.forEach( 실행할 함수명 );

const arr = ["hi", "ho"];

function sayHello(item){
	console.log("I say", item);
}

arr.forEach((sayHello));

Array function(화살표함수)

(변수명) => (함수의 로직);

const arr = ["hi", "ho"];

// 위의 코드블럭과 완전히 동일한 역할 수행
arr.forEach((item) => console.log("I say", item));