3-2기 스터디/프론트엔드 입문9 [9주차] JavaScript (5) [노마드코더] 바닐라 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.. 2022. 6. 30. [8주차] JavaScript (4) [노마드코더] 바닐라 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) {.. 2022. 6. 30. [7주차] JavaScript (3) 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");/.. 2022. 6. 30. [6주차] JavaScript (2) 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.. 2022. 6. 23. [5주차] JavaScript (1) 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.. 2022. 6. 23. [4주차] CSS (2) 1. 그리드 (1) 와 TITLE ARTICLE TITLE ARTICLE 아무 의미 없는 디자인 목적의 태그 block level element 자동 줄바꿈 O 아무 의미 없는 디자인 목적의 태그 inline level element 자동 줄바꿈 X (2) grid-template-columns grid-template-columns: 150px 1fr; 첫 번째 태그는 150px로 지정, 두 번째 태그는 남은 공간 사용 grid-template-columns: 1fr 1fr; 화면을 1:1로 나누어서 사용 grid-template-columns: 2fr 1fr; 화면을 2:1로 나누어서 사용 2. 그리드 적용 My Web About Notice Contact NOTICE This is 'Notice' .. 2022. 6. 21. 이전 1 2 다음
