toDoList를 작성해보려 합니다. 창을 새로고침해도 list가 남아있을 수 있게 localStorage를 사용합니다 js-toDoForm안의 input에서 입력된 값을 ul태그 안에 li태그로 한줄 씩 넣을 예정입니다. // todo.js const toDoForm = document.querySelector(".js-toDoForm"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.querySelector(".js-toDoList"); const TODOS_Ls = "toDos"; // TODOS_Ls는 로컬스토리지에 toDoList 변수명을 저장한 상수 let toDos = []; // toDos는 할일을..

웹 스토리지 - 로컬 스토리지 => 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않음 - 세션 스토리지 => 웹페이지의 세션이 끝날 때 저장된 데이터가 지워짐 input태그에 입력한 이름을 localStorage에 저장해보려 합니다 greeting.js에서 작업을 하려고 합니다. 호출해줍니다. // greeting.js const form = document.querySelector(".js-form"); const input = form.querySelector("input"); const greeting = document.querySelector(".js-greetings"); const USER_LS = "currentUser"; const SHOWING_CN = "showing"; functi..

js-time 클래스에 현재시각을 넣을 예정입니다 clock.js를 호출합니다. // clock.js const clockContainer = document.querySelector(".js-clock"); const clockTitle = clockContainer.querySelector("h1"); function getTime() { const date = new Date(); const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${ minutes < 10 ? `..

이벤트란 어떤 사건을 의미함. 클릭을 하거나, 타이핑을 하거나, 와이파이가 꺼지는 등의 어떠한 사건. event target - 이벤트가 일어날 객체 (버튼, 키입력 등) event type - 이벤트 종류 (click, resize 등) event handler - 이벤트가 발생했을 때 동작하는 코드 이벤트 등록 1. 인라인 Click 2. property listener Click 3. addEventListener() Click 이벤트 참조 : developer.mozilla.org/ko/docs/Web/Events

document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공 HTML 요소 선택 getElementByTagName(x) - 해당 태그 이름의 요소를 모두 선택 getElementById(x) - 해당 아이디의 요소를 선택 getElementByClassName(x) - 해당 클래스에 속한 요소를 모두 선택 document.getElementByName(x) - 해당 name 속성값을 가지는 요소를 모두 선택 querySelector(x) - 해당 선택자로 선택되는 첫번째 요소 선택 querySelectorAll(x) - 해당 선택자로 선택되는 요소를 모두 선택 HTML 요소 생성 createElement(x) - 지정된 HTML 요소를 생성 write(x) - HTML 출력 스트..

Window 객체는 전역객체라고도 불리며, JSC, BOM, DOM 객체를 포함한 객체 JSC (Javascript core) 자바스크립트 언어의 자체에 정의 되어 있는 객체. (Object, Array, ,function ...) BOM (Browser Object Model) 웹페이지의 내용을 제외한 브라우저의 각종 요소를 객체화 location 객체 - 문서의 주소와 관련된 객체 navigator 객체 - 브라우저의 정보를 제공하는 객체 창 제어 - 새창 생성, 창 닫기 등의 창 제어 history 객체 - 브라우저의 세션 기록에 접근 screen 객체 - 화면 관련 정보를 제공하는 객체 DOM (Document Object Model) 웹페이지의 문서를 제어하는 객체 - querySelector ..

자바스크립트에서 객체는 { }를 이용해서 표현합니다. x = {a: b, c: d}의 모양을 가지며 a와 c는 key이며, b는 a의 value, d는 c의 value 입니다. const owen = { name: "owen", age: 30, gender: "Male", } owen.age = 29; console.log(owen); => {name: "owen", age: 29, gender: "Male"} console.log(owen.age); => 29 people = { name: "owen", age: 29, gender: "Male", puppy: ["Nuri", "Bori"], Nuri:{color: "brown", age: 3}, Bori:{color: "white", age: 2}, ..

JavaScript에서 배열은 [ ]를 이용해서 표현합니다. [ ] 안에 값들을 넣고 ','로 구분해서 넣습니다. const dayOfTheWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; console.log(dayOfTheWeek); => ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] console.log(dayOfTheWeek[3]); => Wed const arr = ["ABC", 12, true, [1, 2], "Hi!", 1 + 3]; console.log(arr); => (6) ["ABC", 12, true, Array(2), "Hi!", 4]