Today Hailie Learned

to do list 만들기 const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit (event){ event.preventDefault(); const newToDo = toDoInput.value; toDoInput.value = ""; } toDoForm.addEventListener("submit",handleToDoSubmit); const toDoInput = toDoForm.querySelector("input"); /..

노마드코더 크롬 앱 만들기 클론코딩 강의를 보다가 궁금증이 생겨서 하는 정리글입니다. 처음에 배울 때 const로 변수를 생성하면 후에 값을 update할 수 없다고 배웠습니다. 그런데 강의 중간중간에 const로 변수를 선언하고도 push 함수로 array에 추가를 하는데요! 이유는 아래와 같습니다. 어레이나 오브젝트 자료형은 const로 선언해도 내부의 값을 할당하는것은 할 수 있습니다. Ex) const arr = ["a","b","c"]; arr.push("d"); // arr = ["a","b","c","d"] 그러나 arr = { name : "Kim" } 같이 자료형 자체를 새로 할당하는것은 const 특성상 되지 않습니다. 더 자세한 설명 👇 원시 자료형(primitive type)과 참조..

* quotes 함수는 배열이다! * 쉼표를 조심하자! Math 객체 기능 (Math Module) Math module은 JS에서 이미 load돼서 공짜로 제공되고 있다. ex) Math.PI Math.random()은 0부터 1 사이의 랜덤한 숫자를 제공한다. 응용도 가능!! Math.random() * 10 0.0 2 내림 해서 정수만 보여준다. 숫자를 바닥(floor)까지 내려준다. [1,2,3,4,5] 이렇게 생긴 array가 있을 때, Array.length를 사용하면 Array의 길이를 반환해준다. createElement("") 를 사용하자. 예를 들어, document.createElement("img")일 경우 html 내에 img 태그를 생성 const images = ["0.JPG"..

한 주동안 들었던 수업을 복습하면서 이해가 되지 않았던 return에 대해 공부하는 시간을 가졌다. 사실 공부를 했지만 100% 이해를 한게 아니라서 지금 적는 내용 중에도 미흡한 점이 있을 수도 있다. 나중에 내가 이 포스팅을 보고서 수정할 사항이 있다면 수정해서 재 업로드 할 예정이다..! 미래의 헬리야 실력아 쑥쑥 올라라!! return 이란 1. return은 말그대로 돌려준다는 의미. 내가 설정한 값을 결과값으로 돌려준다는 말입니다 2. return 뒤에오는 함수들은 즉시 종료가 됩니다. "dead code" 리턴값은 함수를 실행시킨 곳으로 돌려준다 그리고 함수가 끝까지 실행되지 않고 리턴하는 지점에서 끝난다. hello라는 function을 실행하는데 number1, number2를 넣어봐. ..

const clock = document.querySelector("h2#clock"); const clock = document.querySelector("#clock"); const clock = document.getElementById("clock"); 모두 같다. 시계 만들기 default 값으로 00시00분 만들기 = 매번 일어나야 하는 무언가. ex) 매 주, 매 2초 등등 function sayhello() { console.log("hello"); } setInterval(sayhello, 5000); => sayhello 라는 function에 실현시키고자 하는 함수를 쓴다. 나는 이 함수를 매 2초마다 실행하고 싶어. setInterval() => 두 개의 argument를 받는다. ..

const loginForm = document.querySelector("#login-form"); const loginInput = loginForm.querySelector(input); const loginButton = loginForm.querySelector(button); const loginInput = document.querySelector(“#login-form input”); const loginButton = document.querySelector(“#login-form button”); 출력되는 값은 같다!!! const loginForm = document.getElementById("login-form");​ const loginForm = document.querySel..

클릭하면 글자 색 바뀌게 하기 const h1 = document.querySelector(".hello:first-child h1"); function handleTitleClick(){ if(h1.style.color === "blue"){ h1.style.color = "tomato"; } else { h1.style.color = "blue"; } } h1.addEventListener("click", handleTitleClick); 더 보기 좋게 바꿔보자. 👇 const h1 = document.querySelector(".hello:first-child h1"); function handleTitleClick(){ const currentColor = h1.style.color; let ne..

listen하고 싶은 event 찾는 방법! 1. 구글에 찾고 싶은 element의 이름 검색하기 ex) h1 html element mdn(mozilla developer network) 그 중에서 web APIs 이 포함된 페이지 찾기 (JS 관점의 HTML heading element란 의미) https://developer.mozilla.org/en-US/docs/Web/API/HTMLHeadingElement HTMLHeadingElement - Web APIs | MDN The HTMLHeadingElement interface represents the different heading elements, through . It inherits methods and properties from ..

- 지금 js파일이 있기 때문에 js를 통해 html의 내용을 가져올 수 있는 거임 - document가 html이 js파일을 load하기 때문에 존재 → 그 다음에 browser가 우리가 document에 접근할 수 있게 해줌 - element의 내부를 보고 싶으면 console.dir() 기본적으로 object로 표시한 element를 보여줌(전부 js object임) 그 element 중 앞에 on이 붙은 것들은 event임 - event: 어떤 행위를 하는 것 모든 event는 js가 listen할 수 있음 const title = document.querySelector(".hello:first-child h1"); function handleTitleClick(){ console.log("ti..

자바스크립트와 HTML 의 상관관계! 브라우저에서 그냥 사용할 수 있는 'document'라는 object. document의 함수 중에는 getElementById 라는 함수가 있는데, 이 함수가 HTML에서 id를 통해 element를 찾아준다. ex)아래 예제에서는 title 이라는 id를 찾고있는거다. 만약 title 이란 id를 가진 element가 없으면 아무것도 찾지 못하는거다. element를 찾고 나면, JS로 해당 HTML의 무엇이든 바꿀 수 있다. ex. element의 innerText를 바꾼다던가 (title.innerText = "Got you!";) id, className 등을 가져 올 수 있음. (cosole.log(title.id);) Grab me! const title..