OUR + YOUR SPACE

1단계 todolist 저장기능 추가 todolist 입력폼을 추가하고 입력시 로컬 스토리지에 등록한다. 추가된 내용을 화면에 노출한다. 키워드1 Document.createElement() 지정한 tagName의 HTML 요소를 만들어 반환하는 메소드 구문: let element = document.createElement(tagName[, options]); 키워드2 Node.appendChild() 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙이는 메소드 구문 let achild = element.appendChild(aChild); var p = document.createElement("p"); document.body.appendChild(p); 전체코드 index.html 00:..

2단계 사용자 이름 저장하기 마무리 및 버그 수정 사용자 이름이 저장되지 않은 경우 입력폼 노출 이름 입력후 엔터버튼을 선택할 경우 페이지가 새로고침이 되는것을 방지 사용자 이름 저장 및 노출 버그 수정 키워드1 event.preventDefault 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소. 전체코드 greeting.js 'use strict'; const USER = 'currentUser'; const SHOW = 'showing'; const form = document.querySelector('.js-form'); const input = form.querySelector('input'); ..

1단계 사용자 이름 저장하기 사용자 입력폼 생성 사용자의 이름이 로컬 스토리지에 저장되어 있을경우 표시될 수 있도록 영역 추가 사용자의 이름이 로컬 스토리지에 저장되어 있을경우 표시 키워드1 HTML내의 javascript 파일의 위치 [async 와 defer] 브라우저는 위에서 아래로 한줄씩 읽어 드림1. head태그 사이에 script를 추가할 경우 html parsing js 파일 다운로드 js 파일 실행 html parsing 단점: JS 파일 이 크거나 인터넷 속도가 느릴경우 html 을 읽어 드리는 시간이 오래걸림 2. body태그 최하단에 script를 추가할 경우 html parsing js 파일 다운로드 js 파일 실행 단점: html 이 javascript에 의존적경우 정상적으로 페이..

2단계 시계 최적화 시간이 흘러가도록 수정 시, 분, 초의 값이 10 이하 일경우 0 을 붙여줌 삼항 연산자를 사용하여 니꼬쌤의 설명대로 Sexy Code를 만들기 위함 키워드1 삼항 연사자 구문: 조건 ? expr1 : expr2 설명: condition이 true이면, 연산자는 expr1의 값을 반환하며, 반대의 경우 expr2를 반환 키워드2 setInterval setTimeout()은 일정 시간이 지난 후 코드를 한 번 실행해야 할 때 사용. 그러나 애니메이션의 경우와 같이 코드를 반복해서 실행해야 할 경우에는 setInterval()를 사용 구문: setInterval(code, [delay]); code: 함수. delay밀리 초 마다 실행 delay: 타이머 미리초 전체코드 'use..

1단계 시계만들기 Personal Dashboard New Tab Chrome Extension 예제 URL : https://momentumdash.com/ 키워드1: 스크립트 엄격모드 'use strict'; 스크립트 엄격모드 ECMAScript 5 소개되었으며 javascript 의 제한된 버전을 선택하여 느슨한 모드 (sloppy mode)를 해제하기 위한 방법 기존에는 무시되던 에러를 출력 Javascript 엔진의 최적화 작업을 어렵게 만드는 실수를 바로잡음 엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지 키워드2 Date Object Date 생성자는 시간의 특정 지점을 나타내는 Date Object를 생성 Date Object를 얻기 위해서는 new 연산자를 이용하는..

For문 if문 기본구조 if(condition) { block } else { block } # 예제 1 if( 10 > 5) { console.log("yes"); } else { console.log("no"); } // 결과값 yes # 예제 2 if(true) { console.log("yes"); } else { console.log("no"); } // 결과값 yes # 예제 3 if(10 === 5) { console.log("yes"); } else { console.log("no"); } // 결과값 no # 예제 4 //숫자와 문자를 비교할때 if(10 === '10') { console.log("yes"); } else { console.log("no"); } // 결..

Events and event handlers Javascript 는 이벤트를 가로챌수 있음 index.html Javascript 테스트 index.js const title = document.querySelector('#title'); //javascript는 이벤트를 가로챌수 있음 function handleResize() { console.log('resize!!!!!!'); } function handleClick() { title.style.color = 'red'; } //window객체에서 resize라는 이벤트가 밸상하면 handleResize 함수를 실행하라라는 뜻 //여기서 중요한것은 handleResize() 가 아닌 handleResiz..

DOM [Document Object Module] DOM은 웹 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스임. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공 다른뜻으로는 document 객체와 관련된 객체의 집합을 의미함 index.html Javascript 테스트 index.js //Javascript로 선택된 부분은 모두 Object가 됨 const title = document.getElementById('title'); console.log(typeof title); //결과값 Object // 즉 title은 Object 이며 title.*** 형태로 접근이 가능하다는 뜻 title.innerHTML ..

Function 함수의 기본 구조 function sayHello() { console.log('Hello'); } sayHello(); //결과값 Hello argument를 넘겨주는 구조 function sayHello(name, age) { console.log('Hello', name, 'your age', age); // +를 이용한 문자열 연결 방법 console.log('Hello ' + name + ' your age '+ age); //백틱을 이용하는 방법(`) [IE 에서는 지원하지 않음] console.log(`Hello ${name} your age ${age}`); } sayHello('kang'..

Object Array는 값들을 묶어주는 역활을 하는 반면 Object 는 각각의 값에 이름을 붙일 수 있음 // Array const info = ["ilgram", "20", "Gwang Ju"] 원하는 정보를 가져오는데 어려움이 있음 즉 이름이나 지역을 가져오고자 할때 info[0],info[2] 형태로 가져올수 있지만 효율적이지 않음 // Object const info = { name:"ilgram", age:20, gender:"Male", area:"Gwang Ju" } console.log(info); // 결과값 : { name: 'ilgram', age: 20, gender: 'Male', area: 'Gwang Ju' } console.log..