Coding Archive

7. Deleting To Dos part Two forEach 함수는 painToDo를 pasrsedToDos배열의 요소마다 실행한다. 기억해야 할 건 forEach는 painToDo를 기본적으로 실행하는데, 각각의 item을 준다. fliter를 사용해 앞서 배웠던 forEach와 비슷한 작업을 한다. fliter 함수를 사용하면 → array에서 뭔가를 삭제할 때 실제로 array에서 지우는 게 아닌 지우고 싶은 item을 빼고 새 array를 만든다. (item을 지우는 게 아닌 item을 제외하는 것) function sexyFilter(){return true} // array의 item을 유지하고 싶으면 반드시 true를 return해야 한다. [1,2,3,4,5].filter(sexyFil..

4. Loading To Dos part One const TODOS_KEY = "todos"; const savedToDos = localStorage.getItem(TODOS_KEY); if (savedToDos !== null) { const parsedToDos = JSON.parse(savedToDos); parsedToDos.forEach((item) => console.log("this is the turn of", item)); } JSON.parse() 1. JSON.stringify(toDos); 로 String이 된 배열이 localstorage로 저장이 된다. 2. 근데 저장이 될 때 string data type으로 저장이 된다. toDos 배열은 지금 string (예: "[a,..

#7 TO DO LIST 0. Setup html 1) Todo-list를 만들기 위해 html에 form 태그로 구조를 만들어 준다. 나중에 JavaScript에서 사용하기 쉽게 id는 todo-form으로 설정한다. 2) form 자체는 submit이라는 기본 기능을 내장한 하나의 묶음일 뿐이다. 유저가 todo-list에 무언가를 기입하는 것을 원하기 때문에 form 태그 안에 input 태그를 넣어 'text'를 타이핑할 수 있도록 한다. 3) 그 밑에 ul 태그를 생성하여 todo-list에 작성된 text가 저장 및 나열될 수 있게 한다. JavaScript const toDoForm = document.getElementById("todo-form"); const toDoInput = doc..

#6 QUOTES AND BACKGROUND 0. Quotes const quotes = [ { quote: "Life is a tragedy when seen in close-up, but a comedy in long-shot.", author: "Charlie Chaplin", }, { quote: "Sometimes even to live is an act of courage.", author: "Seneca", }, { quote: "What we dwell on is who we become.", author: "Oprah Winfrey", }, { quote: "The secret of getting ahead is getting started.", author: "Mark Twain", }..

#5 CLOCK 0. Intervals 서로 다른 기능들에 대해서 하나씩 다른 파일로 분리하는 게 좋다. → 세분화해서 관리하는 방식(divide and conquer) interval => 매번 일어나야 하는 무언가! setInterval(실행할 함수, 실행할 함수의 주기); setInterval은 2개의 argument를 갖는다. 첫 번째는 내가 호출하고자 하는 함수이고, 두 번째는 그 함수가 실행되는 시간 단위(ms)이다. 즉 두 번째 arugment의 시간마다 한 번씩 첫 번째 argument의 이름을 가진 함수가 호출된다. 함수 주기는 1/1000초 단위임으로 1000이 들어가면 1초마다 호출, 3000이 들어가면 3초마다 호출된다. setInterval(getClock, 1000); +) Q ..

#4 LOGIN 0. Input Values 모든 것은 HTML에서 시작되어야 한다. HTML에서 작성하고 JS로 기능을 구현한다. 먼저, HTML 코드 작성하기 1. 유저가 이름을 작성할 수 있도록 input 태그를 작성한다. 안에 텍스트를 넣을 것이기 때문에, type="text"해주고, 안에 미리 작성할 말은 placeholder 안에 써준다. 2. 옆에 Log In 버튼을 만든다. 3. div태그로 위의 것들 묶어주고, id="login-form"을 지정해준다. 자바스크립트로 그 기능 구현하기 1. html element를 가져오기 위해 변수 안에 넣고 가져오기 const loginInput = document.querySelector("#login-form input"); const loginB..

3. Events javascript가 document로 html을 불러올 수 있고 수정 추가도 가능하다. . 불러오는 함수 querySelector/ querySelectorAll 이 유용하다. element의 내부를 보고 싶으면 console.dir() 기본적으로 object로 표시한 element를 보여준다. (전부 js object임) 그 element 중 앞에 on이 붙은 것들은 event다. event : 어떤 행위를 하는 것 . 사용자의 event를 listen 해서 반응 (모든 event는 js가 listen 할 수 있음) eventListener : event를 listen 함 → js에게 무슨 event를 listen 하고 싶은 지 알려줘야 함 title.addEventListener(..

13. Conditionals prompt();라는 함수는 사용자에게 창을 띄어 값을 받는다. prompt는 사용자에게 창을 띄울 수 있도록 하는 역할 prompt();를 사용하면 답을 할 때까지 코드의 실행을 멈추고, 매우 오래된 방법이다. 별로 이쁘지도 않을 뿐더러 css로 바꾸지도 못한다. const age = prompt("how old are you?"); console.log(typeof age); typeof라는 키워드를 쓰면 변수의 type를 볼 수 있는데, prompt();에서 숫자를 입력해도 디폴트 값인 string이라고 뜬다. 그렇기 때문에 숫자값을 얻으려면 문자를 숫자로 바꿔줘야 한다. string --> number로 변환해주는 함수 parseInt(); console.log(ty..