스터디/바닐라 JS로 크롬 앱 만들기

JavaScript의 forEach()와 filter()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function loadToDos() { const loadedToDos = localStorage.getItem(TODOS_LS); //console.log(loadedToDos); 이건 String if(loadedToDos !== null) // 기존에 등록된 todo가 있으면 { const parsedToDos = JSON.parse(loadedToDos); // JSON 형태로 만들어서 parsedToDos.forEach(function(toDo){ // 각 항목들마다 paintToDo(toDo.text); // text값을 뿌려주기 }); } } function..

JavaScript의 localStorage.getItem()과 setItem()

const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS = 'toDos'; const toDos = []; function saveToDos() { console.log(11111); // 입력된 todo를 String 형태로 TODOS_LS에 담아두기 localStorage.setItem(TODOS_LS, JSON.stringify(toDos)); } function paintToDo(text) { //console.log(text); const li = doc..

JavaScript DOM 이벤트 refefence

developer.mozilla.org/en-US/docs/Web/Events Event reference | MDN DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the Event interface, and may have additional custom fields and/or functions used to get additional information about wh developer.mozilla.org 영문으로 봐야한다. 한국어로 봤을때 상세 페이지 진입이 안된다.

JavaScript의 addEventListener() 란?

1 2 3 4 5 function handleResize(){ console.log("I have been resized"); } window.addEventListener("resize", handleResize); cs window 객체 안에 내장되어 있는 addEventListener()라는 함수에 대해 알아보자. 첫 번째 인자는 이벤트 명이다. 두 번째 인자는 콜백 함수이다. 첫 번째 인자의 이벤트가 발생하면 실행된다. 따라서 위의 코드는 윈도우 창의 크기를 변경할때마다 handleResize 함수를 실행하는 것이다. addEventListener()함수는 말그대로 이벤트를 받기를 기다리고 있는 중이다. 어떠한 이벤트인지 개발자가 첫 번째 인자에 알려줘야 한다. 이때 중요한것은 두번째 인자인 함수..

let, const, var

const 변하지 않는 변수이다. (constant라는 뜻) 상수를 의미하며 안정적이다. const변수의 값을 변경하려고 시도할 경우 Uncaught TypeError: Assignment to constant variable. 에러가 뜨는 것을 확인할 수 있다. let 변수의 값 변경이 가능하다. var variable이라는 뜻 변수의 값 변경이 가능하다.