짧은코딩

로컬 스토리지는 DB가 아니라 toDos를 복사하는 곳이다. 따라서 toDos가 DB이다. function deleteToDo(event){ const li = event.target.parentElement; li.remove(); } deleteToDo 함수는 HTML에서 어떤 element를 지워야 하는지를 안다. 하지만 DB에서 어떤 것을 삭제해야 하는지는 모른다. function handleToDoSubmit(event){//js가 방금 발생한 event를 handleToDoSubmit의 첫번째 인자로 준다. event.preventDefault() const newTodo = toDoInput.value; toDoInput.value = ""; const newTodoObj = { text: ..

-html에서의 코드 html에서 required는 필수 -js에서의 코드 const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); //toDoForm 안에 input이 1개라서 //const toDoInput = doucument.querySelector("todo-from input"); //위에랑 같은 의미 const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(event){//js가 방금 발생한 event를 handleToDoSubmit의 첫번째 인자로 준다. event.prev..

명언 넣기 Math.random()을 하면 랜덤 값이 나온다. Math.random() * 10을 하면 0~10 사이 값이 나오는데 소수점도 나온다. 이 소수점을 없애는 함수는 3가지가 있다. 1. round Math.round(1.0)는 1로 반환, 반환할때 반올림해서 돌려준다. 2. ceil Math.ceil(1.1)은 2가 된다. 1.01도 2로 반환한다. 천장까지 올려준다는 의미이다. 3. floor Math.floor(1.1)은 1이 된다. 1.99도 1로 반환한다. 바닥까지 내려준다. const quotes = [ { quote: "최고 높이의 산을 오를 때에도 한 번 한 걸음에서 시작한다. ", author: "바바라 월터스", }, { quote: "우리가 정복하는 것은 산이 아니라 우리 ..

const clock = document.querySelector("h2#clock"); //혹은 #clock이나 clock로만 써도된다. h2 + id로 사용하는 방식을 사용했다. function sayHello(){ //2초마다 실행하는 함수 console.log("hello"); } setInterval(sayHello, 5000)//2가지 파라미터를 받고 첫번째는 내가 실행하고자하는 함수, 두번째는 호출되는 간격 단위는 ms interval은 매번 일어나는 것, ex) 매 2초마다 무슨 일이 일어나게 하는 것이다. setInterval 함수는 인자를 2개 받는데 하난 사용할 함수를 받고 다른건 시간(ms단위로)을 받는다. setInterval은 5초마다 계속 실행 const clock = docu..

콘솔에 localStorage.setItem("username", "nico") 입력하면 어플리케이션에 이렇게 저장된다. localStorage.getItem("username") localStorage.removeItem("username") 이런 명령어로 가져올 수도 있고 삭제할 수도 있다. const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden" function onLoginSumbit(..

Log In const loginForm = document.getElementById("long-form"); const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); 이런 방법으로 html의 버튼을 js에서 가져올 수 있다. const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelector("#login-form button"); 이렇게 하면 코드를 더 줄일 수 있다. const loginInput = document.querySelector(..

console.dir()에서 on이 앞에 붙어있는 것은 이벤트이다. const title = document.querySelector("div.hello:first-child h1"); function handleMouseEnter(){ console.log("mouse is here!"); } title.addEventListener("mouseenter", handleMouseEnter) 마우스 위로 올라가면 콘솔에 뜬다. const title = document.querySelector("div.hello:first-child h1"); function handleTitleClick() { title.style.color = "blue"; } function handleMouseEnter(){ ti..

const age = prompt("How old are you?"); console.log(typeof "15", typeof parseInt("15")); prompt 입력창을 띄워주지만 구방식이라 요즘엔 안쓴다 typeof 타입형을 판단해 출력 parseInt 문자열을 int형으로 바꿔준다 const age = parseInt(prompt("How old are you?")); console.log(age); 입력을 int로 바꿔서 해준다. const age = parseInt(prompt("How old are you?")); console.log(isNaN(age)); isNaN()은 is Not a Number 이란 뜻 논리 연산자 and: && or: || document, dir docum..

변수 const는 업데이트를 할 수 없다. let는 업데이트 가능, 한번만 쓰면 그 다음부턴 타입을 안써도 된다. =>const가 기본, let 가끔, var는 쓰면 안됨 객체 클래스 같은 느낌 const player={ name:"nico", points:10, fat:true }; console.log(player); console.log(player.name); console.log(player["name"]); // 이건 nico 나옴 함수 function sayHello(nameOfPerson){ console.log("Hello my name is " + nameOfPerson); } sayHello("nico"); sayHello("dal"); sayHello("lynn"); const pl..