- 자바스크립트는 현재 웹 생태계의 근간인 프로그래밍 언어입니다. 이번 퀘스트에서는 자바스크립트의 기본적인 문법과, 자바스크립트를 통해 브라우저의 실제 DOM 노드를 조작하는 법에 대하여 알아볼 예정입니다.
- 자바스크립트의 역사
- 기본 자바스크립트 문법
- DOM API
document객체document.getElementById(),document.querySelector(),document.querySelectorAll()함수들- 기타 DOM 조작을 위한 함수와 속성들
- 변수의 스코프
var,let,const
-
자바스크립트는 버전별로 어떻게 변화하고 발전해 왔을까요?
ES1(1997년 6월)-ES2(1998년 6월)-ES3(1999년 12월)-ES4(Abandoned) * 처음 3판이 해마다 나왔고 4번째 ES4는 언어에 얽힌 정치적인 차이로 인해 버려졌다. ES5(2009) * 배열 forEach, map, filter, reduce, some 메소드 추가. * 객체 Object에 대한 getter/setter 추가 * bind 메소드 추가 * JSON 추가 * strict moce 추가 * es5-shim 사용 시 하위 버전에서 특정 기능 지원 ES6(2015) * let, const 키워드 추가 * arrow 문법 지원 * iterator, generator 추가 * module import, export 추가 * callback hell을 해결할 Promise 추가 * MS에서도 최대한 ECMAScript를 따르는 브라우져 IE Edge 발표 ES7(2016) * 제곱연산자(**)추가 * Array.includes 추가 ES8(2017) * async/await 추가 * 이후 나오는 표준은 ES.Next라고 한다 ES9(2018) * Object Rest/Spread * Promise finally * Async iteration * 정규표현식-
자바스크립트의 버전들을 가리키는 ES5, ES6, ES2016, ES2017 등은 무엇을 이야기할까요?
ES : ECMA Script의 약자이다. ES5는 ECMA Script 5의 규격을 따른다는 것이다. ECMA스크립트(ECMAScript, ES)는 자바스크립트를 표준화 하기위해 만들어진, ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. -
자바스크립트의 표준은 어떻게 제정될까요?
ECMA 인터내셔널이라 불리는 표준화 기구에서 제정한다.
-
-
자바스크립트의 문법은 다른 언어들과 비교해 어떤 특징이 있을까요?
자바스크립트는 객체(object) 기반의 스크립트 언어이다. 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.- 자바스크립트에서 반복문을 돌리는 방법은 어떤 것들이 있을까요?
- `for`문 : for 반복문은 어떤 특정한 조건이 거짓으로 판별될 때까지 반복한다. for ([초기문]; [조건문]; [증감문]) 문장 - `do...while`문 : 특정한 조건이 거짓으로 판별될 때까지 반복한다. do 문장 while (조건문); - `while`문 : 어떤 조건문이 참이기만 하면 문장을 계속해서 수행한다. while (조건문) 문장
- 자바스크립트에서 반복문을 돌리는 방법은 어떤 것들이 있을까요?
-
자바스크립트를 통해 DOM 객체에 CSS Class를 주거나 없애려면 어떻게 해야 하나요?
classList.add() : 주기 classList.remove() : 없애기- IE9나 그 이전의 옛날 브라우저들에서는 어떻게 해야 하나요?
구형 브라우저에서 동작되지 않으므로 polyfill을 사용한다. polyfill은 IE와 같은 구형 브라우저에서 동작되지 않는 최신 기능을 동작할 수 있게 도와주는 기술이다. 구형 브라우저에서 사용되지 않았던 기술들에 대한 코드 정보들이 담겨있다.
- IE9나 그 이전의 옛날 브라우저들에서는 어떻게 해야 하나요?
-
자바스크립트의 변수가 유효한 범위는 어떻게 결정되나요?
변수의 유효 범위란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미한다. 1. 지역 변수(local variable) * 함수 내에서 선언된 변수를 가리킴. * 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라진다. 2. 전역 변수(global variable) * 함수의 외부에서 선언된 변수를 가리킴. * 프로그램의 어느 영역에서나 접근할 수 있으며, 웹페이지가 닫혀야만 메모리에서 사라진다.-
var과let으로 변수를 정의하는 방법들은 어떻게 다르게 동작하나요?var의 선언은 전역 범위 혹은 함수 범위로 지정된다. var 변수는 재선언 가능하고, 업데이트할 수 있다. let으로 선언된 변수는 해당 블록 내에서만 사용가능하다. let으로 선언된 변수는 해당 범위 내에서 업데이트 될 수 있지만, var과 달리 재선언이 불가능하다.
-
-
자바스크립트의 익명 함수는 무엇인가요?
자바스크립트 익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식이다. 함수 커드가 변수명에 저장된 형태로 변수값으로 구성된 함수 코드를 다른 변수명에 마치 변수를 대입하듯이 이동시킬 수 있다. 익명 함수의 소스 코드는 변수값이므로 끝에 ;을 대입한다. 호출 시 변수명을 함수명처럼 사용하면 된다. var 변수명 = function( 매개변수 ) { 실행문; };-
자바스크립트의 Arrow function은 무엇일까요?
화살표 함수(Arrow function)은 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다. // 함수 몸체 지정 방법 x => { return x _ x } // single line block x => x _ x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다. () => { return { a: 1 }; } () => ({ a: 1 }) // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다. () => { // multi line block. const x = 10; return x \* x; };
-
- (Quest 03-1) 초보 프로그래머의 영원한 친구, 별찍기 프로그램입니다.
- 이 그림과 같이, 입력한 숫자만큼 삼각형 모양으로 콘솔에 별을 그리는 퀘스트 입니다.
- 줄 수를 입력받고 그 줄 수만큼 별을 그리면 됩니다. 위의 그림은 5를 입력받았을 때의 결과입니다.
if와for와function을 다양하게 써서 프로그래밍 하면 더 좋은 코드가 나올 수 있을까요?- 입력은
prompt()함수를 통해 받을 수 있습니다. - 출력은
console.log()함수를 통해 할 수 있습니다.
- 이 그림과 같이, 입력한 숫자만큼 삼각형 모양으로 콘솔에 별을 그리는 퀘스트 입니다.
- (Quest 03-2) skeleton 디렉토리에 주어진 HTML을 조작하는 스크립트를 완성해 보세요.
- 첫째 줄에 있는 사각형의 박스들을 클릭할 때마다 배경색이 노란색↔흰색으로 토글되어야 합니다.
- 둘째 줄에 있는 사각형의 박스들을 클릭할 때마다
enabled라는 이름의 CSS Class가 클릭된 DOM 노드에 추가되거나 제거되어야 합니다.
- 구현에는 여러 가지 방법이 있으나, 다른 곳은 건드리지 않고 TODO 부분만 고치는 방향으로 하시는 것을 권장해 드립니다.
- Quest 03-1의 코드를 더 구조화하고, 중복을 제거하고, 각각의 코드 블록이 한 가지 일을 전문적으로 잘하게 하려면 어떻게 해야 할까요?
- Quest 03-2의 스켈레톤 코드에서
let대신var로 바뀐다면 어떤 식으로 구현할 수 있을까요?