꿈꾸는 새벽하늘

[노마드코더] 바닐라 JS로 크롬 앱 만들기 1. To Do List 기능 HTML 00:00:00 CSS .hidden { display: none; } JavaScript const toDoForm = document.querySelector("#todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.querySelector("#todo-list"); const TODOS_KEY = "todos"; let toDos = []; function saveToDos() { localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); } func..

[노마드코더] 바닐라 JS로 크롬 앱 만들기 1. 로그인 기능 HTML CSS .hidden { display: none; } JavaScript const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); //반복되는 string들을 대문자 변수로 저장해서 오타로 인한 에러 방지 const HIDDEN_CLASSNAME = "hidden"; const USERNAME_KEY = "username"; function onLoginSubmit(event) {..

1. JavaScript는 HTML과 연결되어 있다. console에 document를 입력하면 작성한 HTML을 가져올 수 있다. JavaScript에서 HTML을 읽어올 수도 있고, JavaScript에서 HTML을 수정할 수도 있다. 2. document는 object이다. 브라우저에서 제공하는 객체중 document 는 JS 에서 HTML 파일을 불러올 수 있도록 도와준다. 3. JavaScript에서 HTML 변경하기 => title element가 "My Day Plan"으로 변경된다. 4. JavaScript에서 HTML element를 가져오기 (1) getElementById Grab me!//HTML const title = document.getElementById("title");/..

1. 함수를 활용해서 calculator 객체 만들기 const calculator = { plus: function(num1, num2) { console.log(num1 + " + " + num2 + " : " + (num1 + num2)); }, minus: function(num1, num2) { console.log(num1 + " - " + num2 + " : " + (num1 - num2)); }, times: function(num1, num2) { console.log(num1 + " * " + num2 + " : " + (num1 * num2)); }, divide: function(num1, num2) { console.log(num1 + " / " + num2 + " : " + (n..

1. HTML, CSS, JavaScript 연결 2. 변수명 표기법 JS에서는 변수명을 표기할 때 주로 camelCase 표기법을 사용한다. camelCase 표기법 : 첫 번재 단어 이후로 이어지는 각 단어들의 첫 글자를 대문자로 쓰는 것 const myName = "user"; const veryLongVariableName = "long"; 3. 변수 선언 방식 변수를 선언할 때는 기본적으로 const를 사용하고, 재할당이 필요한 경우에만 let을 사용한다. const : 변수 재할당 불가능 let : 변수 재할당 가능 const a = 5; const b = 2; let myName = "user1"; console.log(a + b); //7 console.log(myName); //user1..