Quest03.Readme 완료

Author: Hyunsangs

Quest03/README.md

@@ -1,48 +1,82 @@
 # Quest 03. 자바스크립트와 DOM
 
 ## Introduction
-* 자바스크립트는 현재 웹 생태계의 근간인 프로그래밍 언어입니다. 이번 퀘스트에서는 자바스크립트의 기본적인 문법과, 자바스크립트를 통해 브라우저의 실제 DOM 노드를 조작하는 법에 대하여 알아볼 예정입니다.
+
+- 자바스크립트는 현재 웹 생태계의 근간인 프로그래밍 언어입니다. 이번 퀘스트에서는 자바스크립트의 기본적인 문법과, 자바스크립트를 통해 브라우저의 실제 DOM 노드를 조작하는 법에 대하여 알아볼 예정입니다.
 
 ## Topics
-* 자바스크립트의 역사
-* 기본 자바스크립트 문법
-* DOM API
-  * `document` 객체
-  * `document.getElementById()`, `document.querySelector()`, `document.querySelectorAll()` 함수들
-  * 기타 DOM 조작을 위한 함수와 속성들
-* 변수의 스코프
-  * `var`, `let`, `const`
+
+- 자바스크립트의 역사
+- 기본 자바스크립트 문법
+- DOM API
+  - `document` 객체
+  - `document.getElementById()`, `document.querySelector()`, `document.querySelectorAll()` 함수들
+  - 기타 DOM 조작을 위한 함수와 속성들
+- 변수의 스코프
+  - `var`, `let`, `const`
 
 ## Resources
-* [자바스크립트 첫걸음](https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps)
-* [자바스크립트 구성요소](https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks)
-* [Just JavaScript](https://justjavascript.com/)
+
+- [자바스크립트 첫걸음](https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps)
+- [자바스크립트 구성요소](https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks)
+- [Just JavaScript](https://justjavascript.com/)
 
 ## Checklist
-* 자바스크립트는 버전별로 어떻게 변화하고 발전해 왔을까요?
-  * 자바스크립트의 버전들을 가리키는 ES5, ES6, ES2016, ES2017 등은 무엇을 이야기할까요?
-  * 자바스크립트의 표준은 어떻게 제정될까요?
-* 자바스크립트의 문법은 다른 언어들과 비교해 어떤 특징이 있을까요?
-  * 자바스크립트에서 반복문을 돌리는 방법은 어떤 것들이 있을까요?
-* 자바스크립트를 통해 DOM 객체에 CSS Class를 주거나 없애려면 어떻게 해야 하나요?
-  * IE9나 그 이전의 옛날 브라우저들에서는 어떻게 해야 하나요?
-* 자바스크립트의 변수가 유효한 범위는 어떻게 결정되나요?
-  * `var`과 `let`으로 변수를 정의하는 방법들은 어떻게 다르게 동작하나요?
-* 자바스크립트의 익명 함수는 무엇인가요?
-  * 자바스크립트의 Arrow function은 무엇일까요?
+
+- 자바스크립트는 버전별로 어떻게 변화하고 발전해 왔을까요?
+  답 : 자바스크립트는 1995년에 브랜든 아이크에 의해 만들어졌음.
+  매년 새로운 버전이 출시되며, 새로운 기능이 추가되거나 새로운 문법이 정의 되고 편리 기능이 계속 만들어지고 있음.
+
+  - 자바스크립트의 버전들을 가리키는 ES5, ES6, ES2016, ES2017 등은 무엇을 이야기할까요?
+    답: ES는 ECMAScript의 약자이고, ECMAScript는 자바스크립트의 언어의 표준 규격을 정의하는 기구이다. ECMAScript에서 버전을 업데이트하면서 숫자로 된 버전이름을 ES5 ,ES6 이렇게 약칭으로 부른다.
+
+  - 자바스크립트의 표준은 어떻게 제정될까요?
+    답: ECMA Script는 TC39 프로세스를 통해서 제정되며, 이 프로세스는 총 5단계로 제정한다.
+    TC39 프로세스의 0단계에서는 새로운 아이디어나 제안이 제출되며, 1단계에서는 제안이 제대로 된 아이디어인지 여부를 확인 2단계에서는 초안(draft)이라는 공식적인 문서가 만듬
+    3단계에서는 초안이 공식적인 제안(proposal)으로 바꾼다.
+    그리고 4단계에서는 제안이 최종적으로 ECMA Script의 일부로 포함
+
+- 자바스크립트의 문법은 다른 언어들과 비교해 어떤 특징이 있을까요?
+  답: 자바스크립트는 싱글스레드기반 비동기처리한다. ( 순서대로 코드가 실행된다는 걸 보장 할 수 없다는 것)
+  자바 스크립트는 프로토타입 기반 객체지향 언어이다.
+  자바 스크립트는 동적 타입 언어이다.
+
+  - 자바스크립트에서 반복문을 돌리는 방법은 어떤 것들이 있을까요?
+    답: FOR문, While문 , do-while 문
+
+- 자바스크립트를 통해 DOM 객체에 CSS Class를 주거나 없애려면 어떻게 해야 하나요?
+
+답: classlist 속성을 사용하여 add()메소드 or remove()메소드 , toggle()메소드 사용하여 가능하다.
+
+- IE9나 그 이전의 옛날 브라우저들에서는 어떻게 해야 하나요?
+  답: 최신 버전으로 업데이트 하거나, 호환성 확인을 한다.
+
+- 자바스크립트의 변수가 유효한 범위는 어떻게 결정되나요?
+  답: 변수가 선언된 위치에 따라 결정된다.
+
+  - `var`과 `let`으로 변수를 정의하는 방법들은 어떻게 다르게 동작하나요?
+    답: `var`는 변수를 함수 스코프 내 선언하지만, `let`은 블록스코프 내에서 선언한다. 그래서 `var`는 어느 곳에서 접근이 가능하며, `let`은 블록내에서만 접근 가능하다.
+
+- 자바스크립트의 익명 함수는 무엇인가요?
+  답: 익명함수는 이름이 없는 함수를 말한다. 이것은 함수 선언시 이름 지정하지 않고 바로 사용 가능 함수이다.
+
+  - 자바스크립트의 Arrow function은 무엇일까요?
+    답: AF는 ES6에서 도입된 새로운 함수 선언 방식으로, function 키워드 대신 =>를 사용하여 함수를 선언한다.
 
 ## Quest
-* (Quest 03-1) 초보 프로그래머의 영원한 친구, 별찍기 프로그램입니다.
-  * [이 그림](jsStars.png)과 같이, 입력한 숫자만큼 삼각형 모양으로 콘솔에 별을 그리는 퀘스트 입니다.
-    * 줄 수를 입력받고 그 줄 수만큼 별을 그리면 됩니다. 위의 그림은 5를 입력받았을 때의 결과입니다.
-  * `if`와 `for`와 `function`을 다양하게 써서 프로그래밍 하면 더 좋은 코드가 나올 수 있을까요?
-  * 입력은 `prompt()` 함수를 통해 받을 수 있습니다.
-  * 출력은 `console.log()` 함수를 통해 할 수 있습니다.
-* (Quest 03-2) skeleton 디렉토리에 주어진 HTML을 조작하는 스크립트를 완성해 보세요.
-  * 첫째 줄에 있는 사각형의 박스들을 클릭할 때마다 배경색이 노란색↔흰색으로 토글되어야 합니다.
-  * 둘째 줄에 있는 사각형의 박스들을 클릭할 때마다 `enabled`라는 이름의 CSS Class가 클릭된 DOM 노드에 추가되거나 제거되어야 합니다.
-* 구현에는 여러 가지 방법이 있으나, 다른 곳은 건드리지 않고 TODO 부분만 고치는 방향으로 하시는 것을 권장해 드립니다.
+
+- (Quest 03-1) 초보 프로그래머의 영원한 친구, 별찍기 프로그램입니다.
+  - [이 그림](jsStars.png)과 같이, 입력한 숫자만큼 삼각형 모양으로 콘솔에 별을 그리는 퀘스트 입니다.
+    - 줄 수를 입력받고 그 줄 수만큼 별을 그리면 됩니다. 위의 그림은 5를 입력받았을 때의 결과입니다.
+  - `if`와 `for`와 `function`을 다양하게 써서 프로그래밍 하면 더 좋은 코드가 나올 수 있을까요?
+  - 입력은 `prompt()` 함수를 통해 받을 수 있습니다.
+  - 출력은 `console.log()` 함수를 통해 할 수 있습니다.
+- (Quest 03-2) skeleton 디렉토리에 주어진 HTML을 조작하는 스크립트를 완성해 보세요.
+  - 첫째 줄에 있는 사각형의 박스들을 클릭할 때마다 배경색이 노란색↔흰색으로 토글되어야 합니다.
+  - 둘째 줄에 있는 사각형의 박스들을 클릭할 때마다 `enabled`라는 이름의 CSS Class가 클릭된 DOM 노드에 추가되거나 제거되어야 합니다.
+- 구현에는 여러 가지 방법이 있으나, 다른 곳은 건드리지 않고 TODO 부분만 고치는 방향으로 하시는 것을 권장해 드립니다.
 
 ## Advanced
-* Quest 03-1의 코드를 더 구조화하고, 중복을 제거하고, 각각의 코드 블록이 한 가지 일을 전문적으로 잘하게 하려면 어떻게 해야 할까요?
-* Quest 03-2의 스켈레톤 코드에서 `let` 대신 `var`로 바뀐다면 어떤 식으로 구현할 수 있을까요?
+
+- Quest 03-1의 코드를 더 구조화하고, 중복을 제거하고, 각각의 코드 블록이 한 가지 일을 전문적으로 잘하게 하려면 어떻게 해야 할까요?
+- Quest 03-2의 스켈레톤 코드에서 `let` 대신 `var`로 바뀐다면 어떤 식으로 구현할 수 있을까요?