[코딩 자율학습: HTML + CSS + 자바스크립트] 8~11장

8장. 자바스크립트 시작하기

8.1 자바스크립트 코드 작성 방법

1. 자바스크립트를 웹 브라우저에 적용하는 방법은 크게 2가지이다.

• 내부 스크립트 방법 (internal script): HTML 문서 안에서 script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성하는 방법
• 외부 스크립트 방법 (external script): 별도의 js 확장자 파일을 만들어 자바스크립트 코드를 작성하고 이 파일을 HTML 문서에서 script 태그로 연결하는 방법
• script 태그의 사용 위치: script 태그는 웹 브라우저에 화면이 표시되는 것에 영향을 미치지 않도록 body 태그가 끝나기 전에 사용한다.

2. 자바스크립트를 단순히 실행할 목적이라면 다음과 같은 방법을 사용한다.

• 웹 브라우저의 개발자 도구에서 지원하는 콘솔창 활용하기
• VSCode의 Code Runner 확장 프로그램 활용하기

8.2 프로그래밍 시작 전 알아 두기

1) 주석

1. 한 줄 주석은 // 기호(슬래시 2개)로 작성한다.
2. 여러 줄 주석은 /* 기호와 */ 기호 사이에 작성한다.

2) 오류 확인 방법

자바스크립트는 코드가 한 번에 한 줄씩 실행되는 인터프리터 기반의 언어이다. 그래서 오류가 발생하면 그 즉시 실행을 멈추고, 오류 메세지와 오류가 발생한 줄 번호를 웹 브라우저의 콘솔창에 출력한다. 따라서 모든 오류 관련 메세지는 웹 브라우저의 콘솔창에서 확인할 수 있다.

9장. 자바스크립트 기초 문법 살펴보기

9.1 변수와 상수

자바스크립트에서 데이터를 저장할 수 있는 공간을 변수와 상수 변수라고 한다. 변수는 변할 수 있는 데이터를 저장하는 공간이고, 상수 변수는 재할당할 수 없는 데이터를 저장하는 공간이다.

9.2 자료형

구분	자료형	설명
기본 자료형	문자열	큰따옴표나 작은따옴표로 둘러싸인 값
	숫자형	정수, 실수를 포함한 모든 숫자
	논리형	논리 값(true, false)
	undefined	변수에 아무런 값도 할당되지 않는 상태를 나타내는 값
	null	변수를 의도적으로 비워 두기 위해 사용하는 값
참조 자료형	객체	배열, 함수, 객체 리터럴 등으로 파생되는 상위 자료형

9.3 연산자

1) 연산자

연산자는 어떠한 연산을 수행하기 위해 미리 정해져 있는 기호를 말한다.

종류	기호
산술 연산자	+, -, *, /, %, **, ++, --
대입 연산자	=
복합 대입 연산자	+=, -=, *=, /=, %=, **=
비교 연산자	==, !=, ===, !==, <, <=, >, >=
논리 연산자	&&, ||, !
삼창 연산자	?:

2) 연산자 우선순위

연산 순서와 관련 있는 연산자의 우선순위와 결합 순서는 다음과 같다.

순서	연산자 종류	기호	결합 순서
1	그룹 연산자	()	좌→우
	대괄호 연산자	[]	좌→우
	마침표 연산자	.	좌→우
2	증가 연산자	++	우→좌
	감소 연산자	--	우→좌
	단항 부정 연산자	-	우→좌
	NOT 연산자	!	우→좌
	delete 연산자	delete	우→좌
	new 연산자	new	우→좌
	typeof 연산자	typeof	우→좌
3	나눗셈 연산자	/	좌→우
	곱셈 연산자	*	좌→우
	나머지 연산자	%	좌→우
4	덧셈 연산자	+	좌→우
	뺄셈 연산자	-	좌→우
5	비교 연산자	<=, <, >, >=	좌→우
6	동등, 일치, 부등, 불일치	==, ===, !=, !==	좌→우
7	AND 연산자	&&	좌→우
8	OR 연산자	||	좌→우
9	삼항 연산자	?:	좌→우
10	대입(할당) 연산자	=	좌→우
	복합 대입 연산자	+=, -=, *=, /=, %=, **=	좌→우
11	멀티 연산자	.	좌→우

9.4 조건문 다루기

조건문은 특정 조건에 따라 코드를 실행할 때 사용한다. 자바스크립트는 조건을 식으로 표현하는 if문과, 조건을 값으로 표현하는 switch문이 있다.

1. if문 형식

// if문
if(조건식1) {
  //조건식1이 참이면 블록문 실행
} else if(조건식2) {
  //조건식2가 참이면 블록문 실행
} else {
  //조건식이 모두 거짓이면 블록문 실행
}

2. switch문 형식

//switch문
switch(key) {
  case value1:
    //key가 value1일 때 실행할 블록문
    break;
  case value2:
    //key가 value2일 때 실행할 블록문
    break;
  default:
    //아무것도 일치하지 않을 때 실행할 블록문
    break;
}

9.5 반복문 다루기

1) 반복문

반복문은 특정 조건이 참으로 평가되는 동안 블록문을 반복해서 실행한다. 자바스크립트의 반복문에는 while, do...while, for, for...in문 등이 있다.

1. while문 형식

while(조건식) {
  //조건식이 참(true)이면 실행
}

2. do...while문 형식

do {
  //블록문
} while(조건식);

3. for문 형식

for(초깃값; 조건식; 증감식) {
//블록문
}

4. for...in문 형식

for(가변수 in 배열/객체 리터럴) {
  //블록문
}

2) break, continue문

반복문을 종료할 때는 break문, 건너뛰게 할 때는 continue문을 사용한다.

10장. 자바스크립트 함수 다루기

10.1 함수란

함수(function)는 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문이다.

10.2 함수를 정의하는 방법

함수를 정의하는 방법은 크게 3가지이다.

//함수 선언문
function 함수명() {}
//함수 표현식
const 함수명 = function(){};	// 익명 함수
const 함수명 = function 식별자(){};	// 네이밍 함수
//화살표 함수
const 함수명 = () => {};

10.3 함수 기능 확장하기

1) 매개변수

매개변수는 함수가 호출될 때 전달받은 데이터를 할당하기 위해 함수에서 선언하는 변수로, 다음과 같은 특징이 있다.

• 매개변수의 기본값은 undefined이다.
• 함수를 호출하며 데이터를 전달해도 매개변수를 정의하지 않으면 데이터를 전달받지 못한다. 단, 오류가 발생하지는 않는다.
• 함수를 호출할 때 전달한 데이터와 매개변수는 일대일 매칭 관계가 형성된다.

2) return문

return문을 사용하면 함수 내부에서 함수를 호출한 곳으로 데이터를 전달할 수 있다.

10.4 함수의 특징 이해하기

1) 스코프

1. 스코프는 변수나 함수와 같은 참조 대상 식별자를 찾아내기 위한 규칙이다.
2. 스코프는 블록 스코프 방식과 함수 스코프 방식을 기준으로 전역 스코프와 지역 스코프로 구분한다.

2) 함수 호이스팅

호이스팅은 코드를 선언과 할당으로 나누었을 때, 선언부를 스코프 최상위로 끌어올리는 것을 말한다. 함수 선언문이나 var 키워드를 사용한 함수 표현식, 화살표 함수 방식은 전부 호이스팅의 대상이 된다.

10.5 즉시 실행 함수 사용하기

즉시 실행 함수는 함수를 정의하면서 동시에 실행까지 하는 함수이다.

(function(){})();

11장. 자바스크립트 객체 다루기

11.1 객체란

객체는 키와 값으로 구성된 속성들의 집합을 의미하는 자료형이다.

11.2 객체 속성 다루기

1) 객체 접근 방법

객체는 대괄호 연산자나 마침표 연산자로 접근할 수 있다.

객체["키"] = 값;
객체, 키 = 값;

2) 객체 속성 추가 또는 삭제하기

객체의 속성에 접근해서 새로운 값을 할당할 때, 존재하지 않는 키라면 새로운 속성이 추가된다. 그리고 delete 키워드로 속성에 접근하면 기존 속성이 삭제된다.

delete 객체.키;

3) 객체의 특성

객체는 기본 자료형과는 다르게 할당된 변수가 값을 직접 가지고 있는 것이 아니라 데이터가 위치한 주소 값을 가지고 있다. 따라서 같은 주소 값을 공유하는 변수는 주소 값의 데이터가 변경되면 동시에 값이 변경된다. 이런 현상을 얕은 복사라고 한다.

11.3 표준 내장 객체 사용하기

자바스크립트에 이미 정의된 객체를 표준 내장 객체라고 한다. 표준 내장 객체의 종류는 다음과 같다.

종류	설명
String	기본 자료형 중 문자열과 관련 있는 속성과 메서드가 정의된 객체
Array	기본 자료형 중 배열과 관련 있는 속성과 메서드가 정의된 객체
Date	날짜 및 시간과 관련 있는 속성과 메서드가 정의된 객체
Math	수학 연산과 관련 있는 속성과 메서드가 정의된 객체

11.4 브라우저 객체 모델 사용하기

브라우저 객체 모델(BOM, Browser Object Model)은 웹 브라우저에서 제공하는 객체로, 브라우저를 제어할 수 있는 여러 기능이 포함되어 있다.

종류	설명
window	웹 브라우저가 열릴 때마다 생성되는 최상위 관리 객체
document	웹 브라우저에 표시되는 HTML 문서 정보가 포함된 객체
location	웹 브라우저에 현재 표시된 페이지에 대한 URL 정보가 포함된 객체
history	웹 브라우저에 저장된 방문 기록이 포함된 객체
navigator	웹브라우저 정보가 포함된 객체
screen	웹 브라우저의 화면 정보가 포함된 객체