- 자바스크립트는 현재 웹 생태계의 근간인 프로그래밍 언어입니다. 이번 퀘스트에서는 자바스크립트의 기본적인 문법과, 자바스크립트를 통해 브라우저의 실제 DOM 노드를 조작하는 법에 대하여 알아볼 예정입니다.
- 자바스크립트의 역사
- 기본 자바스크립트 문법
- DOM API
document객체document.getElementById(),document.querySelector(),document.querySelectorAll()함수들- 기타 DOM 조작을 위한 함수와 속성들
- 변수의 스코프
var,let,const
- 자바스크립트는 버전별로 어떻게 변화하고 발전해 왔을까요?
-
자바스크립트는 1995년에 탄생했으며, 이후에 버전이 지속적으로 업데이트되면서 많은 변화와 발전을 거쳐왔습니다. ES5 이후 ES6(ECMAScript 2015)을 시작으로, ES2016, ES2017 등의 버전이 출시되었습니다.
- 자바스크립트의 버전들을 가리키는 ES5, ES6, ES2016, ES2017 등은 무엇을 이야기할까요?
- ES5, ES6, ES2016, ES2017 등은 ECMAScript 언어 사양의 버전명칭을 나타냅니다. 각 버전은 새로운 기능 및 문법을 추가하거나 기존 문법을 수정하는 역할을 합니다. 예를 들어, ES6(또는 ECMAScript 2015)는 화살표 함수, 클래스, 블록 스코프 변수 선언 등을 추가했으며, ES2017은 async/await 함수, 문자열 패딩, Object.values/Object.entries 등을 추가했습니다.
- 자바스크립트의 표준은 어떻게 제정될까요?
- 자바스크립트의 표준은 ECMA International에서 제정됩니다. ECMA는 자바스크립트 언어를 표준화하기 위한 기술 위원회인 TC39를 운영하며, 새로운 기능을 포함한 업데이트를 수시로 발표합니다.
- 자바스크립트의 문법은 다른 언어들과 비교해 어떤 특징이 있을까요?
-
자바스크립트는 C, Java 등과 유사한 문법을 가지고 있지만, 함수가 일급 객체이며, 프로토타입 기반 객체 지향 언어입니다
- 자바스크립트에서 반복문을 돌리는 방법은 어떤 것들이 있을까요?
- 반복문으로는 for, while, do-while 등이 있습니다.
- 자바스크립트를 통해 DOM 객체에 CSS Class를 주거나 없애려면 어떻게 해야 하나요?
-
DOM 객체에 CSS Class를 주려면 classList 객체의 add() 메서드를 사용하고, 없애려면 remove() 메서드를 사용합니다.
- IE9나 그 이전의 옛날 브라우저들에서는 어떻게 해야 하나요?
- IE9나 그 이전의 옛날 브라우저에서는 classList가 지원되지 않기 때문에 className 속성을 사용해야 합니다.
- 자바스크립트의 변수가 유효한 범위는 어떻게 결정되나요?
-
자바스크립트에서 변수의 유효 범위(scope)는 해당 변수가 선언된 위치에 따라 결정됩니다.
var과let으로 변수를 정의하는 방법들은 어떻게 다르게 동작하나요?
- var은 함수 스코프를 가지고 있고, let은 블록 스코프를 가지고 있습니다. 즉, var로 선언된 변수는 해당 함수 내에서만 유효하고, let으로 선언된 변수는 해당 블록(중괄호로 감싸진 영역) 내에서만 유효합니다. 따라서 let으로 선언된 변수는 블록을 벗어나면 소멸되고, 다시 사용할 수 없습니다. 또한, let은 변수 재선언을 허용하지 않으며, var는 허용합니다.
- 자바스크립트의 익명 함수는 무엇인가요?
-
익명 함수(anonymous function)는 이름 없이 정의된 함수로, 함수를 정의하면서 함수 이름을 생략할 수 있습니다. 익명 함수는 주로 콜백 함수, 클로저 등에 사용됩니다. 익명 함수는 다른 함수의 매개변수로 전달되거나 변수에 할당될 수 있습니다.
- 자바스크립트의 Arrow function은 무엇일까요?
- Arrow function은 ES6에서 추가된 함수 정의 방식 중 하나입니다. 함수를 정의할 때 function 키워드 대신 =>를 사용하여 간결하게 작성할 수 있습니다.
- (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로 바뀐다면 어떤 식으로 구현할 수 있을까요?