OUR + YOUR SPACE

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..

Array Array는 데이터의 값들을 하나로 묶어주는 기능을함 // 기본 구조 const mon = "Mon"; const tue = "Tue"; const wed = "Wed"; const thu = "Thu"; const fri = "Fri"; const sat = "Sat"; const sun = "Sun"; console.log(mon, tue, wed, thu, fri, sat, sun); # 결과값: Mon Tue Wed Thu Fri Sat Sun /* Array를 이용한 구조 Array에는 데이터 타입들이 들어갈수 있음 String, Boolean, number, float..... */ const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "..

주석 코드의 이해를 돕기위해 설명하거나, 코드를 비활성화 시킬때 사용. // 한줄 주석 /* 여러줄 주석 1 여러줄 주석 2 여러줄 주석 3 */ 데이터형(Data types) //String const type = "문자열"; console.log(type); //Boolean :True or false const type = true; //Number const type = 6666; //Float const type = 55.1; //null 변수가 선언되고 해당 변수에 null이라는 빈값이 할당됨 //undefined 변수가 선언되어 있으나 값이 할당되어 있지 않음 const type; console.log(type); # 결과값: undefined

let, const, var var는 재선언이 가능함 var a = 111; var b = a -5; var a = 6; console.log(b, a); let은 재선언이 불가능하지만 재할당은 가능함. let a = 111; let b = a -5; let a = 6; console.log(b, a); # 결과값: Uncaught SyntaxError: Identifier 'a' has already been declared let a = 111; let b = a -5 ; console.log(b); # 결과값: 106 const로 재선언도 불가능하고 재할당도 불가능 const a = 111; let b = a - 5 ; console.log(b); # 결과값: 106 a = 6; co..