차곡차곡 개발일지

1. toDo.js const toDoForm = document.querySelector(".js-form-toDo"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList") const LS_TODOS = "toDos"; let toDos = []; function deleteToDo(event){ const btn = event.target; // event.target: 클릭된 요소 반환 const li = btn.parentNode; toDoList.removeChild(li); // element.removeChild: 지정된 자식 요소 삭제 const cleanToDos = to..

: 사용자 로컬에 데이터를 저장하는 저장소 단순한 key-value 저장소이며, key와 value는 항상 문자열로 저장됨 도메인과 브라우저 별로 데이터를 저장 localStorage와 sessionStorage 두 가지가 있다. localStorage 사용자가 직접 지우지 않는 이상 계속해서 데이터가 유지됨 sessionStorage: 동일한 세션에서만 사용 가능 (브라우저를 닫을 경우, 데이터가 제거됨) 따라서, 지속적으로 사용해야 할 데이터는 localStorage에 일회성 데이터는 sessionStorage에 저장 다음은 localStorage 사용법이며, sessionStorage도 이와 유사하다. // 데이터 저장 - (key, value)의 json 형태로 저장된다. localStorage...

1. clock.js const clockContainer = document.querySelector(".js-clock"), 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 ? `0${minutes}` : minutes }:${ seconds < 10 ? `0${sec..

1. Event : 웹사이트에서 발생하는 모든 동작 이벤트 함수를 정의할 때마다 JavaScript는 event 객체를 자동적으로 함수에 주입 // 이벤트 발생 시 함수 호출 ​~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ window.addEventListner("eventName", "functionName"); // 창 전체에서 발생하는 모든 이벤트 감지 element.addEventListner("eventName", "functionName"); // 해당 요소에 발생하는 이벤트만 감지 ​~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~..

1. Console console.log(console) /* console{ ... log: ƒ log() ... } */ console도 여러 가지 함수를 가지고 있는 하나의 object log() 는 console 객체에 들어있는 하나의 function 2. Function : 특정한 작업을 수행하도록 작성된 별개의 코드 블럭 필요할 때마다 호출 가능 // function 생성 function sayHello(name, age){ console.log('Hello!', name, "You are", age, "years old."); } sayHello("Lora", 20); function upgradeSayHello(name, age){ // `(백틱)을 사용하면 문자열 안에 변수 삽입 가능 r..

1. 변수 // 변수 생성 및 초기화 let a = 221; let a = 69; // 에러 발생 - Identifier 'a' has already been declared a = b = "Hello World!!!"; var b = 34; var b = 452; b = false; // 상수(constant) 변수 생성 const c = 100; c = 4; // 에러 발생 - Assignment to constant variable. let d = c - 5; // 출력 함수 console.log(a, b, c, d); 한 expression이 끝나면 ;을 붙여 표시 let: 새로운 값 대입 가능 / 동일한 이름의 변수 재선언 불가 / 필요할 때만 사용 권장 O var: 새로운 값 대입 가능 / 동..

JavaScript 1. JacaScript : 웹페이지를 동적으로 제어하기 위한 객체 기반의 스크립트 언어 (스크립트 언어: 독립된 시스템에서 작동하도록 특별히 설계된 프로그래밍 언어) 브라우저에서 사용하는 유일한 언어 웹의 동작을 구현 가능 → 웹사이트를 interactive하게 만들 때 사용 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 가능 JavaScript는 CSS 및 HTML의 내용, 속성, 스타일을 다루는 것뿐 아니라 사용자와의 상호작용, 폼의 유효성 검증, 다양한 이벤트에 대한 스크립트 실행, 웹 브라우저 제어, 쿠키 등의 설정과 조회 등 많은 것을 할 수 있다. 장점 Fragmentation이 없음 브라우저에서 사용하는 유일..