난수 이용하기 : Math.random()
math.random() : 0부터 1사이의 난수 발생
0부터 9까지의 난수를 발생시키고 싶을 때
math.random()*10
10개의 요소를 가진 array가 있고,
랜덤으로 불러오고 싶을 때
array이름.lenth를 이용하기!
Math.random()*quotes.length: 0부터 9까지의 난수 발생
대신, 소숫점 아래 자리까지 반환하므로 내림함수를 이용해서 구현해야 완벽함!
//ex console.log(quotes[Math.floor(Math.random()*quotes.length)]);
올림, 내림, 반올림 함수
올림 함수 : Math.ceil()
내림 함수 : Math.floor()
반올림 함수 : Math.round()
5이상이면 올림, 미만이면 내림
✨ js에서 태그 제작 후 html문서에 나타내기
만들 태그 : <img src="img/0.jpg">
1. createElement("태그이름")
해당 태그 명을 가진 element를 생성합니다.
document.createElement("img");
//변수에 저장해서 사용하기
const bgImage = document.createElement("img");2. 태그 내부 속성 바꾸기
만든element.속성명 = "바꿀 값";
//img 태그의 src요소 변경
bgImage.src = `img/${chosenImage}`;
//innerText 요소 변경
span.innerText = newTodo; //변수 값으로 변경 가능
button.innerText = "❌";3. appendChild() : html문서에 추가하기
js에서 만든 element는 아직 html문서에 존재하지 않으므로
appendChild()를 이용해 추가해주기
//body부분에 추가하기
document.body.appendChild(bgImage);Q.
appendChild()를 사용할 때 넣고 싶은 위치에 정확히 넣으려면 어떻게 하나요?A. insertBefore() 메소드를 사용합니다!
const h2 = document.querySelector("#clock") //참조할 노드 document.body.insertBefore(bgImage, h2);다음과 같은 코드를 작성하면, h2요소 앞에 bgImage가 추가됩니다.
Q.
appendChild()와 그냥append()의 차이가 뭔가요?A.
appendChild()는 객체만 추가할 수 있고,append()는 문자열 등 다양한 종류를 추가할 수 있습니다!li.append("문자열 추가") //→ 가능 li.appendChild("문자열 추가") //→ 불가능 - typeError
Q. js를 이용해 태그를 만들고, 만든 태그 안에 다른 태그들을 추가할 수 있나요?
A. 가능합니다! 강의에서는
li태그안에span과button태그를 넣은 후 최종적으로 todo-list id를 가진 태그 안에 입력했습니다.const toDoList = document.getElementById("todo-list"); //함수로 한꺼번에 동작하도록 하기! function paintToDo(newTodo){ const li = document.createElement("li"); // const span = document.createElement("span"); span.innerText = newTodo; //span값을 입력받은 newtodo값으로 변경 // const button = document.createElement("button"); button.innerText = "❌"; // li.appendChild(span); //li에 span을 넣어 줌 li.appendChild(button); //li에 button을 넣어줌 toDoList.appendChild(li); //todo-list에 li를 넣어 줌 }
어떤 객체를 선택했는지 아는 법
클릭하면 같은 함수가 실행되는 버튼이 여러 개 있을 때, 어떤 버튼을 클릭했는지 알 필요가 있습니다.
이때 eventlistener로 click 이벤트가 입력된 후 실행 될 함수의 인자로 받은 값을 참조하면 어떤 버튼을 클릭했는지 알 수 있습니다!
function deleteToDo(event){// event값을 이용해 어떤 버튼을 클릭한 건지 체크 가능
// console.log(event.target.parentElement.innerText); ---> 클릭한 버튼의 부모 태그의 innerText가 log에 찍힘
const li = event.target.parentElement; //클릭된 버튼의 부모 태그 가져옴 (예시에선 li태그여서 변수명이 li입니다!)
li.remove(); //클릭된 li 지우기
}입력받은 값을 array형태로 저장하기 : localStorage 응용
localStorage는 text만 저장할 수 있고, array값을 저장할 수 없습니다🥺
localStorage.setItem("todos", toDos); ---> ❌ array형태로 저장 불가
array 형태로 값을 저장하려면
브라우저의 기능을 사용해야합니다!
JSON.stringify(입력값) : 입력값을 string으로 바꿔줌
JSON.parse(입력값) : 입력값을 array로 바꿔줌
localStorage.getItem("todos"); // "[\"a\",\"b\"]"
JSON.parse(localStorage.getItem("todos")); // ["a", "b"]
array의 각 item에 대해 function 실행하기 : array.forEach(function)
각 item 별 함수 실행
function sayHello(){ console.log("hello"); } parseToDos.forEach(sayHello);array의 item이 각각 함수를 실행하므로
item 개수만큼 함수가 실행됐음을 확인할 수 있습니다
어떤 item이 실행한 건지 확인하기
수행할 함수의 인자가 처리되고 있는 요소를 가져옵니다!
function sayHello(item){ /* item : 지금 처리 되고 있는 item 제공 */ console.log("this is turn of ", item); } parseToDos.forEach(sayHello);//동일한 작성법 //function 없이 짧게 쓰는 법 => 화살표 함수 parseToDos.forEach((item) => console.log("this is turn of ", item)); }
localStorage를 업데이트 하기
먼저, 저장할 array의 item들을 object로 해서 각 item들이 속성으로 id와 text 값을 가지도록 합니다.
id는 Date.now()를 이용해서 생성 시점을 기준으로 랜덤한 아이디를 가지도록 합니다.
const newTodoObj = {
text: newTodo,
id: Date.now(),
};
toDos.push(newTodoObj);
paintToDo(newTodoObj);array의 item 지우기 : array.filter(function)
[1, 2, 3].filter(function)
filter는 array의 1, 2, 3을 가지고 각각 function을 실행 함
- 내부 function이
--> true를 반환 : 요소 유지
--> false를 반환 : 그 item은 새 array에 포함되지 않음
