# 2. 기본문법

# 목차

1. 변수
- 1.1. 예제 선언과 할당 [01]
- 1.2. 예제 [02]
2. 자료형
- 2.1. 개요
- 2.2. 종류
- 2.3. 원시형
  - 2.3.1. 예제[03]
- 2.4. 참조형
  - 2.4.1. 예제 [04]
3. 연산자
- 3.1. 연산자의 종류
  - 3.1.1. 추가연산자(병합연산자 nullish)
- 3.2. 산술연산자
  - 3.2.1. 산술연산자의 기본활용 예제 [05]
  - 3.2.2. 산술연산자의 자료형 활용예제 [06]
  - 3.2.3. 산술연산자의 자료형 활용예제 [07]
  - 3.2.4. 증가연산자예제 [08]
- 3.3. 할당연산자
  - 3.3.1. 예제-[08]
- 3.4. 비교연산자
  - 3.4.1. 예제-[09]
- 3.5. 논리연산자
  - 3.5.1. 예제-[10]
  - 3.5.2. 마무리문제-[11]
  - 3.5.3. 마무리문제-[12]
- 3.6. 조건부연산자
  - 3.6.1. 예제-[13]
  - 3.6.2. 마무리문제-[14]
  - 3.6.3. 마무리문제-[15]
- 3.7. 연산자의 우선순위
4. 제어문
- 4.1. 조건문
  - 4.1.1. if
    - 4.1.1.1. if-예제[16]
    - 4.1.1.2. if-예제[17]
    - 4.1.1.3. if-마무리문제[18]
  - 4.1.2. if~else
    - 4.1.2.1. if-else-예제[19]
    - 4.1.2.2. if-else-마무리문제[20]
  - 4.1.3. if~else if
    - 4.1.3.1. if~else if-예제[21]
    - 4.1.3.2. if~else if-마무리문제[22]
  - 4.1.4. 삼항연산자를 활용한 조건문
    - 4.1.4.1. if~else if-마무리문제[23]
  - 4.1.5. 논리연산자를 활용한 조건문
    - 4.1.5.1. OR 연산자-예제[24]
    - 4.1.5.2. AND 연산자-예제[24]
    - 4.1.5.3. NOT 연산자-예제[25]
- 4.2. 선택문 - 4.2.0.1. switch-예제[26]
- 4.3. 실습문제[27]
- 4.4. 반복문
  - 4.4.1. for
    - 4.4.1.1. for-예제[28]
    - 4.4.1.2. for-예제[29]
    - 4.4.1.3. 중첩 for-예제[30]
    - 4.4.1.4. 중첩 for-예제[31]
    - 4.4.1.5. 반복문 종합예제-[32]
    - 4.4.1.6. 반복문과 dom 조작-[33]
  - 4.4.2. break/continue
    - 4.4.2.1. break/continue-예제
- 4.5. 마무리문제-[36]
5. 마무리문제

# 1. 기본문법

# 1. 변수

✅ 변수(상수)란? 데이터(값)를 저장 할 수 있는 메모리 공간

- 변하는 값은 변수 `let, let`
- 변하지 않는 값은 상수 `const`
-

✅ 변수명 규칙

- 영문,숫자, 일부 특수문자($,\_)만 포함
- 첫 글자로는 $,\_,영문자만 사용가능
- 한글 사용불가
- 의미에 맞는 이름으로 사용
- 소문자로 시작
- 기본 this, with(상수), document,window,screen, location등등 자바스크립트에서 사용하는 단어(예약어)를 사용불가

✅ 변수 사용 이유

- 변수를 쓰는 이유는 코드의 재활용성을 높여준다.

# 1.1. 예제 선언과 할당 [01]

let currentYear; //올해 연도의 변수 선언
let name; // 이름의 변수 선언
let age; // 나이의 변수 선언
let currentYear, name, age; //한번에 선언

//선언후 할당하기
let frontend;
frontend = '김망고';

//선언과 할당을 동시에 하기
let letiable = '변수';

# 1.2. 예제 [02]

나이계산 프로그램을 만들어봅시다.

문제

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>나이 계산하기</title>
	</head>
	<body></body>
</html>

정답

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>나이 계산하기</title>
	</head>
	<body>
		<script>
			let currentYear = 2021;
			let birthYear;
			let age;
			birthYear = prompt('태어난 연도를 입력하세요. (YYYY)', '');
			age = currentYear - birthYear + 1;
			document.write(currentYear + '년 현재<br>');
			document.write(birthYear + '년에 태어난 사람의 나이는 ' + age + '세입니다.');
		</script>
	</body>
</html>

# 2. 자료형

# 2.1. 개요

# 2.2. 종류

종류	자료형	설명	예시
기본(원시) 유형	Number	숫자를 나타내는 데이터 타입. 정수 및 부동소수점 숫자를 포함.	`let num = 123;`
---------------	String	문자열을 나타내는 데이터 타입. 0개 이상의 16비트 유니코드 문자로 구성.	`let str = "Hello World";`
---------------	Boolean	논리적인 값을 나타내며 `true`와 `false` 두 가지 값을 가짐.	`let isTrue = false;`
복합(참조) 유형	Object	JavaScript의 객체를 나타냄. 객체는 이름과 값으로 구성된 프로퍼티들의 집합.	`let obj = {name: "John", age: 30};`
---	Array	순서가 있는 요소들의 집합을 나타냄. 배열 요소에 접근하는 것은 대괄호([])를 사용하여 인덱스로 접근.	`let arr = [1, 2, 3];`
---	Function	실행 가능한 코드 블록을 가지며, 기능을 반복해서 사용할 수 있음.	`function sayHello() { alert('Hello!'); }`
특수 유형	undefined	변수가 선언되었으나 초기화되지 않았을 때의 값.	`let x; console.log(x); // 출력: undefined`
---	null	값이 없음을 의미. 변수에 명시적으로 할당해 사용.	`let y = null; console.log(y); // 출력: null`

# 2.3. 원시형

typeof : 자료형을 확인하는 단항 연산자인 typeof와 함께 알아보자

# 2.3.1. 예제[03]

//number
let num1 = 1;
let num2 = 2;
let sum = num1 + num2;
console.log('sum:', sum, typeof sum);

//string
let str1 = '1';
let str2 = '2';
let para = str1 + str2;
console.log('para:', para, typeof para);

//boolean
let fact = true;
let lie = false;
console.log('fact:', fact, typeof fact);

//null
let temp = null;
console.log('temp:', temp, typeof temp);

//undefined
let noName;
console.log('noName:', noName, typeof noName);

# 2.4. 참조형

🔗ppt

원시형과 참조형의 차이는 쉽게 아래처럼 값을 여러개 나누어 저장할수 있다는 것에 있다.

▲ 원시타입은 한개의 물건을 저장하는 수납박스

▲ 참조타입은 한번에 여러개의 물건을 저장하는 수납박스이다

# 2.4.1. 예제 [04]

//Object
let person = {
	name: 'mimi',
	age: 20,
	city: 'seoul',
};
console.log(person);

//Array
let zoo = ['koala', 'cat', 'dog'];
console.log(zoo[0]);

let arr = [1, 2, 3, 4, 5];
console.log(arr);

//function
function addNums(num1, num2) {
	return num1 + num2;
}
console.log(addNums(5, 10));

# 3. 연산자

🔗mdn

연산자란? 프로그램에서 특정한 동작을 하도록 지시하는 기호.

프로그래밍에서 연산이란 사칙연산은 물론 문자열을 연결해서 새로운 문자열을 만들고 값의 크기를 비교하는 등의 여러가지 동작을 의미한다. 이런 연산을 지시하는 기호가 연산자이다.

산술,관계,할당,논리,부정,삼항,비트,단항,등이 있다.

# 3.1. 연산자의 종류

연산자 유형	연산자	설명
산술 연산자	`+`	덧셈
	`-`	뺄셈
	`*`	곱셈
	`/`	나눗셈
	`%`	나머지 계산
	`++`	증가 (값에 1을 더함)
	`--`	감소 (값에서 1을 뺌)
대입 연산자	`=`	값을 변수에 할당함
	`+=`	기존 값에 값을 더하고 결과를 변수에 할당함
	`-=`	기존 값에서 값을 빼고 결과를 변수에 할당함
	`*=`	기존 값에 값을 곱하고 결과를 변수에 할당함
	`/=`	기존 값으로 값을 나누고 결과를 변수에 할당함
	`%=`	기존 값으로 나머지 계산 후 결과를 변수에 할당함
비교 연산자	`==`	동등 비교 (값이 같은지 확인)
	`!=`	부등 비교 (값이 다른지 확인)
	`===`	일치 비교 (값과 타입이 모두 같은지 확인)
	`!==`	부일치 비교 (값과 타입이 모두 다른지 확인)
	`<`, `<=_`, `>`, `>=`	크기/같음을 비교하는 관계 연산자들
논리 연산자	`&&`, `\|`, `!`	AND, OR, NOT 로직 구현

# 3.1.1. 추가연산자(병합연산자 nullish)

변수나 표현식이 null 또는 undefined인 경우에만 대체 값을 반환하는 연산자

//nullish 병합 연산자 '??'
const a = null;
const b = "1";
console.log(a ?? b);

# 3.2. 산술연산자

# 3.2.1. 산술연산자의 기본활용 예제 [05]

console.log(100 + 200); // 300
console.log(200 - 80); // 120
console.log(100 * 3); // 300
console.log(400 / 5); // 80	나누기 연산자
console.log(402 % 5); // 2	나머지 연산자
console.log(2 ** 3); // 8 **은 제곱!!

# 3.2.2. 산술연산자의 자료형 활용예제 [06]

표현식	결과
문자형+문자형	문자형
문자형+숫자형	문자형

let t1 = '망고는';
let t2 = 5;
let t3 = '살';
let t6 = true;
let t4 = t1 + t2 + t3 + t6;
console.log(typeof t4); //string
alert(t4); //'망고는5살true'

문자형과 + 연산자를 사용하면 모든 자료형이 문자형으로 변환된다.

🔑 자바스크립트는 변수가 가지는 값에 따라 그 타입이 동적으로 결정되는 동적 타이핑(dynamic typing) 언어이다.

동적 타이핑의 장점은 유연성이다.

변수의 타입이 자유롭기 때문에 언제든지 동적인 값에 따라 변수의 타입이 자동으로 바뀔 수 있으므로 유연하고 생산적인 코딩이 가능하다.

하지만 동적 타이핑으로 인해 변수의 타입을 예측하기 어려우므로, 이에 따라 예상하지 않은 에러가 발생할 수도 있다.

이를 보완한 것이 타입스크립트 이다.

# 3.2.3. 산술연산자의 자료형 활용예제 [07]

const x = 75;
const y = 87;
const add = x + y;
document.write('국어 점수 :' + x + '<br>');
document.write('수학 점수 :' + y + '<br>');
document.write('합계 :' + add + '<br>');
document.write('평균은 :');
document.write(add / 2);
document.write(`국어점수: ${x}<br>수학점수: ${y}<br>합계: ${add}<br> `);

const add = x + y;
- + 는 숫자 자료형으로 연산하였다.
document.write('국어 점수 :' + x + '<br>');
- + 는 문자 자료형으로 연산하였다.
document.write(국어점수: $
수학점수: $
합계: $
);
- 백틱을 사용하면 표현식과 문자를 쉽게 연결할수 있다. (Template literals)

# 3.2.4. 증가연산자예제 [08]

변수에 붙이면 1씩 증가/감소 시키는 연산자

앞에 붙이면 전위연산, 뒤에 붙이면 후위 연산이라고 하며 위치에 따라 결과가 다르다

종류	설명
A = ++A	A에 A에 1을 더한값을 재할당 전위연산
A = A++	A에 A에 1을 더한값을 재할당 후위연산
A = --A	A에 A에 1을 뺀값을 재할당 전위연산
A = A--	A에 A에 1을 뺀값을 재할당 후위연산

let x = 1;

document.write(x++); //1(2)
document.write(x++); //2(3)
document.write(x++); //3(4)
document.write(x++); //4(5)
document.write('<br>');

x = 1;

document.write(++x); //2
document.write(++x); //3
document.write(++x); //4
document.write(++x); //5

후위 연산은 결과를 다음 호출시 반환하고 전위 연산은 결과를 즉시 반환한다.

# 3.3. 할당연산자

종류	설명
=	우항을 좌항에 할당
+=	좌항에 우항을 더한후 좌항에 재할당

# 3.3.1. 예제-[08]

<!DOCTYPE html>
<html>
	<head>
		<title>노드 추가</title>
	</head>
	<body>
		<div id="container">
			<p>첫 번째 단락</p>
		</div>

		<script>
			// 기존의 요소 선택
			const container = document.getElementById('container');

			// 새로운 노드 생성 및 추가
			container.innerHTML += '<p>두 번째 단락</p>';
		</script>
	</body>
</html>

`container.innerHTML += '<p>두 번째 단락</p>';` 의 연산자를 `+` 로 변경하면 두번째 p 태그는 교체된다.

+= 연산자는 가산후 재할당 한다.

# 3.4. 비교연산자

비교연산자는 우항과 좌항의 값은 비교후 참이나 거짓을 반환한다.

주로 조건문에 사용한다.

종류	설명
A==B	A와 B가 같다
A!=B	A와 B가 같지 않다
A===B	A와 B가 자료형까지 같다
A!==B	A와 B가 자료형까지 같지 않다
A<B	A가 B보다 작다
A<=B	A가 B보다 작거나 같다
A>B	A가 B보다 크다
A>=B	A가 B보다 크거나 같다

# 3.4.1. 예제-[09]

let x = 10;
let y = 20;

document.write(x + '>=' + y + ': ');
document.write(x >= y);
document.write('<br>');

document.write(x + '<=' + y + ': ');
document.write(x <= y);
document.write('<br>');

document.write(x + '!=' + y + ': ');
document.write(x != y);
document.write('<br>');

document.write(x + '==' + y + ': ');
document.write(x == y);
document.write('<br>');

document.write(x + '===' + y + ': ');
document.write(x === y);
document.write('<br>');

document.write(x + '!==' + y + ': ');
document.write(x !== y);
document.write('<br>');

x=10, y=20 입니다.

document.write(x >= y); 10은 20보다 크거나 같다는 false 입니다

document.write(x <= y); 10은 20보다 작거나 같다는 true 입니다

document.write(x != y); 10은 20과 같지 않다는 true 입니다

document.write(x == y); 10은 20과 같다 는 false 입니다

document.write(x !== y); 10은 20과 자료형까지 같지 않다는 true 입니다

document.write(x === y); 10은 20과 자료형까지 같다 는 false 입니다

# 3.5. 논리연산자

불리언(boolean) 연산자 라고도 하며 결괏값이 true, false 를 반환하는 연산자

종류	설명
A&&B	A와 B가 모두 True일 경우에만 True
A ∣∣ B	A또는 B가 True일 경우 True
!A	A가 True이면 False, False이면 True

# 3.5.1. 예제-[10]

let x = 7 > 6 && 1 > 8;
let y = 7 > 6 || 1 > 8;
let z = !(7 > 6);

document.write('7이 6보다 크고 1이 8보다 크면 논리값은?');
document.write(x + '<br>');
document.write('7이 6보다 크거나 1이 8보다 크면 논리값은?');
document.write(y + '<br>');
document.write('7이 6보다 크지 않으면 논리값은?');
document.write(z + '<br>');

t/f => false
t/f => true
t => false

# 3.5.2. 마무리문제-[11]

⚡ 20대 여성이라면 결과값이 true로, 아니라면 결과 값으로 false⚡

20대 대상의 소개팅을 준비 중입니다.
남성은 모집이 완료 되었지만 여성은 아직 모집이 다 되지 않았네요. prompt메서드를 활용하여 참가 희망자의 성별과 나이를 확인합니다.
20대 여성이라면 결과값이 true로, 아니라면 결과 값으로 false가 나오게 만드세요

MDN 🔗 prompt(message, default);

This is another Tab!!!

# 3.5.3. 마무리문제-[12]

⚡ 평균이 70점 이상이고 각 과목별 점수가 60점 이상이면 true를 아니라면 false⚡

prompt 메서드를 활용하여 국어, 영어, 수학 점수를 입력 받으세요.
평균이 70점 이상이고 각 과목별 점수가 60점 이상이면 true를 아니라면 false를 출력합니다.

엄청쉽다

This is another Tab!!!

# 3.6. 조건부연산자

자바스크립트에서 항을 3개 가지는 연산자는 이것 밖에 없어서 삼항연산자라고도 불리우며 조건문을 간단히 작성할때 많이 사용됨

문법	설명
(조건) ? A : B	조건 ? 참이면 A실행 : 거짓이면 B실행

# 3.6.1. 예제-[13]

//your="어려워요"
your = '재밌어요';
let study = your == '어려워요' ? ' 천재이시군요' : '복습하세요';
document.write(`자바스크립트가 ${your} <h1>${study}</h1>`);

This is another Tab!!!

# 3.6.2. 마무리문제-[14]

⚡ 삼항 연산자 사용 ⚡

경아는 오늘 교통비 3,000원 식비 7,000원, 음료비 2,000원을 사용했습니다. 하루 용돈인 10,000원을 초과했을 경우 "000원 초과"라고 출력되거나, 아니면 "돈 관리 참 잘했어요!"라고 출력되도록 해보세요

정답틀림

let price1 = 3000;
let price2 = 6000;
let price3 = 3000;
let total = price1 + price2 + price3;
let result = total > 1000 ? total - 10000 + '원 초과' : '돈 관리 잘 했어요!';
document.write(result);

This is another Tab

# 3.6.3. 마무리문제-[15]

⚡ 삼항 연산자 사용 ⚡

방문자에게 질의응답 창(prompt)을 이용하여 신장과 몸무게를 입력받아 옵니다. 방문자의 몸무게가 적정 몸무게보다 이상일 경우 "적정 몸무게 이상", 미만일 경우에는 "적정 몸무게 미달"로 출력되도록 하세요. 적정 몸무게 공식은 '몸무게=(신장-100)*0.9'입니다

정답틀림

let user_height = prompt('당신의 신장은?', '0');
let user_weight = prompt('당신의 체중은?', '0');
let normal_weight = (user_height - 100) * 0.9;
let result = user_weight > normal_weight ? '적정 몸무게 이상' : '적정 몸무게 미달';
document.write(result);

This is another Tab

# 3.7. 연산자의 우선순위

자바스크립트에서 연산자 우선순위는 표현식 내에서 연산자가 어떤 순서로 평가되는지를 결정하는 규칙입니다.

이 규칙에 따라 표현식의 평가 순서와 결과가 달라질 수 있습니다.

우선순위	연산자
1.	`( )`
2. 단항 연산자	`--,++,!`
3. 산술 연산자	`_,/,%,+,-`
4. 비교 연산자	`>,>=,<,<=,==,===,!==`
5. 논리 연산자	`&&,\|\|`
6. 대입(복합 대입)연산자	`=,+=,-+,_=,/=,%=`

# 4. 제어문

제어문 에는 조건문, 선택문, 반복문 이 있습니다.

조건문이란 조건에 따라 실행이 달라지게 할 때 사용되는 제어문입니다.
- 자바 스크립트의 조건문 에는 if, else, else if가 있습니다.
선택문이란 값에 따라서 실행 내용을 선택하여 실행 할때 사용되는 제어문입니다.
- 자바 스크립트의 선택문 에는 switch가 있습니다.
반복문이란 주어진 조건에 따라서 문장을 반복 실행 할때 사용되는 제어문 입니다
- 자바 스크립트의 반복문 에는 for, while, do while 등이 있습니다.

# 4.1. 조건문

# 4.1.1. if

프로그래밍을 할때는 특정 조건과 명령에 따라 실행 순서를 정해야 합니다.

이때 특정 조건이 맞는지 확인하기 위해 조건문 을 사용하며 프로그래밍 시 가장 빈번히 사용하는 구문입니다.

자바스크립트의 조건문과 조건 연산자에 대해 학습하겠습니다.

if 문이나 if~else문을 사용하여 스크립트 안에서 조건을 체크할수 있습니다.
if문은 소괄호 안의 조건을 체크하여 결괏값이 true 면 중괄호 내부의 실행문을 실행하고
조건의 결과가 false 이면 중괄호의 실행문을 무시합니다.
아래는 if 문의 기본 문법 예시입니다.

기본형

if (조건) {
	실행문;
}

# 4.1.1.1. if-예제[16]

let your_sex = '남자';
document.write('당신은' + your_sex + '이므로');
if (your_sex == '남자') document.write('치마를 입으세요.');
if (your_sex == '여자') document.write('바지를 입으세요.');

const date = new Date();
const hour = date.getHours();
console.log(hour);
if (hour < 12) {
	document.querySelector('body').style.backgroundColor = 'ivory';
	document.querySelector('body').style.color = 'red';
}
if (hour > 12) {
	document.querySelector('body').style.backgroundColor = 'black';
	document.querySelector('body').style.color = 'white';
}

if문은 조건이 true 일때만 실행할수 있으므로 false 일때도 명령을 하려면 실행문을 두번 작성해야 하는 번거로움이 있습니다.
이럴때 else 를 사용하면 됩니다.
아래는 if ~ else if 문의 기본 문법 예시입니다.

# 4.1.1.2. if-예제[17]

질의응답 창(prompt)을 이용하여 시험 점수를 입력 받아 저장한 후 만일 ⚡70점보다 크거나 같으면 '합격'⚡이라는 메시지를 출력하시오

정답틀림

let testNum = prompt('시험 점수를 입력하세요');
if (textNum >= 70) {
	document.write('합격입니다.');
}

GPT 한테 물어보세요

# 4.1.1.3. if-마무리문제[18]

사용자로부터 입력받은 숫자가 3의 배수인지를 확인후 결과를 출력하는 프로그램을 작성하시오 ⚡

3의 배수는 3으로 나눈 나머지가 0일 꺼에요 🤔

사는게 쉽지 않아요

GPT 한테 물어보세요

# 4.1.2. if~else

if문은 조건이 true 일때만 실행할수 있으므로 false 일때도 명령을 하려면 실행문을 두번 작성해야 하는 번거로움이 있습니다.
이럴때 else 를 사용하면 됩니다.
아래는 if ~ else if 문의 기본 문법 예시입니다.

기본형

if (조건1) {
	실행문1;
}else {
	조건1이 false 일때 실행문;
}

# 4.1.2.1. if-else-예제[19]

const weight = 70;
const height = 170;
const test = (height - 100) * 0.9;
if (weight > test) document.write('당신은 비만이예요');
else document.write('당신은 정상이네요');

This is another Tab!!!

# 4.1.2.2. if-else-마무리문제[20]

나이가 20세 이상이고, 30세 미만일 경우에는 '통과'라고 출력하고, 그렇지 않으면 '비통과'라고 출력하시오. 🐨

이상은 해당 숫자를 포함하고 미만은 해당 숫자를 포함하지 않아요

모르니까 저도 물어보는 거예요

# 4.1.3. if~else if

조건이 복잡할 경우 if~else if 를 사용하여 다중 조건을 판별할수 있습니다.
아래는 else if 문의 기본 문법 예시입니다.

기본형

if (조건1) {
	실행문1;
} else if (조건2) {
	실행문2;
}

# 4.1.3.1. if~else if-예제[21]

사용자가 입력한 숫자가 3의 배수인지를 판별하여 알려주고 취소를 누를 경우 입력이 취소됨을 표시하는 프로그램을 작성해봅시다

let userNumber = prompt('숫자를 입력하세요.');

if (userNumber !== null) {
	if (userNumber % 3 === 0) alert('3의 배수입니다.');
	else alert('3의 배수가 아닙니다.');
} else alert('입력이 취소됐습니다.');

순서도

프로그래밍 작업시 소스의 순서나 계획을 순서도로 작성해보면 코드의 이해와 작성이 수월해집니다. 아래는 사용자가 입력한 숫자가 3의 배수인지를 판별하여 알려주고 취소를 누를 경우 입력이 취소됨을 표시하는 프로그램의 순서도 입니다.

flowchart TD
     A{입력값이 null이 아닌가?} --true--> B{3의 배수인가?} --true--> D[3의 배수입니다.]
		 B{3의 배수인가?} --false--> E[3의 배수가 아닙니다.]
     A{입력값이 null이 아닌가?} --false--> C[입력 취소됨]

# 4.1.3.2. if~else if-마무리문제[22]

사용자로 취득점수를 입력 받습니다.
점수가 90점 이상일 경우 A학점, 80점 이상일경우 B학점, 70점 이상일경우 C학점 ,
60점 이상일 경우 D학점, 60점 이하일 경우 F학점 메시지를 출력하는 프로그램을 작성하세요. 🐨

# 4.1.4. 삼항연산자를 활용한 조건문

# 4.1.4.1. if~else if-마무리문제[23]

4.1.3.1. if~else if-예제[21] 의 if문을 삼항연산자로 작성하세요. 🐨

# 4.1.5. 논리연산자를 활용한 조건문

두조건이 true 일 경우와 조건 1개만 true 일 경우 처럼 여러 경우의 수를 따질때는 논리 연산자를 사용합니다.

# 4.1.5.1. OR 연산자-예제[24]

🔑OR 연산자는 || 를 사용하며 우항의 2개중 true가 하나라도 있으면 결과를 true로 반환합니다.

OR 연산자를 사용하여 50보다 작은 숫자 2개를 입력받아 둘 중 하나가 50보다 작은 지를 판단하는 프로그램을 작성해 봅시다 🐨

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>조건문</title>
	</head>
	<body>
		<script>
			let numberOne = prompt('50미만의 숫자를 입력하세요.');
			let numberTwo = prompt('50미만의 숫자를 입력하세요.');

			if (numberOne < 50 || numberTwo < 50) alert('두 개의 숫자 중 최소한 하나는 50 미만이군요.');
			else alert('두 개의 숫자 중 50 미만인 수는 없습니다.');
		</script>
	</body>
</html>

# 4.1.5.2. AND 연산자-예제[24]

🔑AND 연산자는 && 를 사용하며 우항의 2개중 false가 하나라도 있으면 결과를 false로 반환합니다.

AND 연산자를 사용하여 입력한 두개의 숫자가 50보다 작은지 체크하는 프로그램을 작성해봅시다.🐨

let numberOne = prompt('50미만의 숫자를 입력하세요.');
let numberTwo = prompt('50미만의 숫자를 입력하세요.');

if (numberOne < 50 && numberTwo < 50) alert('두 개의 숫자 모두 50 미만이군요.');
else alert('조건에 맞지 않는 숫자가 있습니다.');

# 4.1.5.3. NOT 연산자-예제[25]

🐸 NOT 연산자는 ! 를 사용하며 청개구리 처럼 결과값을 반대로 반환합니다. 결과가 true 이면 false 를 결과가 false 이면 true 를 반환합니다.

NOT 연산자를 사용하여 사용자가 입력한 값이 null 이 아닌지를 체크해 봅시다.🐨

let numberOne = prompt('50미만의 숫자를 입력하세요.');
let numberTwo = prompt('50미만의 숫자를 입력하세요.');

if (numberOne !== null && numberTwo !== null) {
	if (numberOne < 10 || numberTwo < 10) alert('두 개의 숫자 중 최소한 하나는 10 미만이군요.');
	else alert('두 개의 숫자 중 10 미만인 수는 없습니다.');
} else {
	alert('50 미만의 숫자를 입력하세요.');
}

조건 계산을 빠르게 하는 방법

조건이 2가지 이상일 경우 동시에 함께 체크하는 조건식을 만들때는 첫번째 조건을 보고 빠르게 판단할수 있도록 작성해야 합니다.
예를 들어 다음과 같은 조건식의 경우를 살펴보겠습니다.
(( x === 10 ) && ( y === 20 ))
AND 연산자는 조건식이 둘 이상일 경우 하나만 false 라도 최종값이 false 입니다.
그러므로 첫번째 조건식의 결과를 false 로 작성할 경우 두번째 조건은 체크 하지 않고 바로 false 를 반환하게 됩니다.
이런 식으로 AND 연산자 사용시 false 를 반환하게 될 확률이 높은 식을 첫번째 조건으로 사용하게 된다면
컴퓨터의 일을 덜어주는 셈이 됩니다.
반대로 OR 연산자의 경우 하나만 true 라도 최종 값이 true 이기 때문에 첫번째 조건으로 true 를 반환하는 식을 작성한다면
효율적인 코드를 작성할수 있습니다.
이런 연산 방식을 단축평가(short circuit evaluation) 라고 합니다

# 4.2. 선택문

선택문이란 하나의 변수 값을 여러 개의 값과 비교하여 해당하는 case 절의 코드를 실행하는 제어문 입니다.

변수에 저장된 데이터(data)와 정확히 일치되는 경우(case)가 있는지 검사 후 일치하는 데이터가 있을 때

해당 실행문을 수행한 뒤 마지막의 break문으로 반복을 끝냅니다.

일치되는 값이 없을 때에는 default에 해당하는 실행문을 수행한 뒤 문장을 마칩니다.

기본형

switch (조건) {
	case 값1:
		명령1;
		break;
	case 값2:
		명령2;
		break;
	default:
		기본명령;
}

graph TB
    Start(변수준비) --> Condition{변수와 조건을 비교}
    Condition -->|Case 1| Action1[명령 1]
    Condition -->|Case 2| Action2[명령 2]
    Condition -->|Default| DefaultAction[기본명령]

    Action1 --> End(End)
    Action2 --> End
    DefaultAction --> End

# 4.2.0.1. switch-예제[26]

사용자에게 1,2,3 중 하나의 값을 입력받아 session 변수에 저장한다.

switch 문을 이용해 session 값을 체크하여 입력받은 값이

1이면 마케팅-201호, 2이면 개발-203호, 3이면 디자인-204호로

안내하는 프로그램을 작성해보자 🐨

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>세션 선택 - switch문</title>
		<link rel="stylesheet" href="css/switch.css" />
	</head>
	<body>
		<script>
			let session = prompt('관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인');

			switch (session) {
				case '1':
					document.write('<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다.</p>');
					break;
				case '2':
					document.write('<p>개발 세션은 <strong>203호</strong>에서 진행됩니다.</p>');
					break;
				case '3':
					document.write('<p>디자인 세션은 <strong>205호</strong>에서 진행됩니다.</p>');
					break;
				default:
					alert('잘못 입력했습니다.');
			}
		</script>
	</body>
</html>

body {
	background-color: #0c3268;
	color: rgb(243, 243, 243);
}

p {
	margin-top: 80px;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
	text-shadow: 1px 2px 1px #000;
}

p strong {
	font-size: 2.2em;
	color: yellow;
}

🐨스위치문제

# 4.3. 실습문제[27]

자리배치도에 필요한 줄의 갯수를 구하시오.

대관서비스 앱을 제작 중입니다. 사용자로 부터 총 입장객과 한줄에 앉을 인원수를 입력받아

총 몇개의 줄이 필요한지 출력해주세요

전체 입장객의 수가 10명이고 한줄에 2명씩 앉아야 한다면 10/2 를 하여 총 5줄이 필요하겠죠?
필요한 값들을 변수로 지정하고 프로그램을 작성해보세요.

let memNum = prompt('입장객은 몇 명인가요?'); // 전체 입장객
let colNum = prompt('한 줄에 몇 명씩 앉습니까?'); // 한 줄에 앉을 사람
if (memNum % colNum === 0) rowNum = parseInt(memNum / colNum);
else rowNum = parseInt(memNum / colNum) + 1;
document.write('모두 ' + rowNum + '개의 줄이 필요합니다.');

- 입장객의 수가 나누어 떨어지는 경우와 그렇지 않은 경우가 있습니다. 프로그램은 두개의 경우를 고려하여 작성하였습니다.

1. memNum 변수에 전체 입장객의 수를 입력받아 할당합니다.
2. colNum 변수에 한줄에 앉힐 인원수를 입력받아 할당합니다.
3. 전체 입장객 수(memNum)을 한 줄에 앉을 사람 수(colNum)으로 나눈 나머지가 0인지 확인합니다.
	즉, 모든 사람이 정확히 분배되면 그 결과값(줄의 개수)을 그대로 반환하고, 그렇지 않으면 결과값에서 소수점 아래를 버리고
	1을 더하여 필요한 줄의 개수를 계산합니다. 결괏값은 rowNum 변수에 저장됩니다.
	prompt 함수를 사용하여 입력 받은 자료는 string 타입으로 저장되기 때문에 parseInt 함수로 number 타입으로 변환하여 나누기 연산을 수행합니다.

4. document.write() 함수를 이용해 웹 페이지 상에서 "모두 n개의 줄이 필요합니다."라는 메시지를 출력하며, 여기서 n은 계산된 줄의 개수(rownum)입니다. [:koala:](./script/seat-1.html)

# 4.4. 반복문

반목문이란 주어진 조건에 따라서 문장을 반복 실행하게 하는 제어문입니다.

자바 스크립트에서 반복문은 for문, while문, do while문이 있습니다.

# 4.4.1. for

반복문 사용시 얼마나 편리해지는지 체험해 보겠습니다.

# 4.4.1.1. for-예제[28]

let sum = 0;

sum += 1;
sum += 2;
sum += 3;
sum += 4;
sum += 5;
document.write('1부터 5까지 더하면 ' + sum);

let i;
let sum = 0;

for (i = 1; i < 6; i++) {
	sum += i;
}
document.write('1부터 5까지 더하면 ' + sum);

기본형

// 1 ,  2   , 4     ,  3
for (초기값; 조건; 증가식) {
	실행문;
}

for 문은 초기값->조건->실행문->증가식의 순서로 수행합니다.

# 4.4.1.2. for-예제[29]

for 문을 사용해 1부터 100까지 숫자 더하기

let i;
let sum = 0;

for(i = 1; i < 1001; i++) {
	sum += i;
}
document.write("1부터 5까지 더하면 " + sum);

# 4.4.1.3. 중첩 for-예제[30]

중첩 for문으로 1단부터 9단까지 구구단 만들기

let i, j;

for (i = 1; i <= 9; i++) {
	document.write('<h3>' + i + '단</h3>');
	for (j = 1; j <= 9; j++) {
		document.write(i + ' X ' + j + ' = ' + i * j + '<br>');
	}
}

div {
	display: inline-block;
	padding: 0 20px 30px 20px;
	margin: 15px;
	border: 1px solid #ccc;
	line-height: 2;
}
div h3 {
	text-align: center;
	font-weight: bold;
}

동적요소추가 후 스타일반영

let i, j;
for (i = 1; i <= 9; i++) {
	document.write(`<div><h3>${i}단</h3>`);
	for (j = 1; j <= 9; j++) {
		document.write(`${i}X${j}=${i * j}<br>`);
	}
	document.write('</div>');
	if (i === 3) break;
}

# 4.4.1.4. 중첩 for-예제[31]

# 4.4.1.5. 반복문 종합예제-[32]

 <h1>반복문</h1>
  <h2>for</h2>
  <div id="for"></div>
  <hr>
  <h2>forEach</h2>
  <div id="foreach"></div>
  <hr>
  <h2>for of</h2>
  <div id="forof"></div>
  <hr>
  <h2>for in</h2>
  <div id="forin"></div>
  <hr>
  <h2>do / while</h2>
  <div id="dowhile"></div>
  <script>
    let foods = ["떡볶이", "순대", "오뎅"];
    for (let i = 0; i < foods.length; i++) {
      document.getElementById("for").innerHTML += i + " : " + foods[i] + "<br>";
    }

    //foreach -> 배열에만 사용 인자의 첫번째는 요소, 두번째는 인덱스번호
    foods.forEach(function myFunction(item, index) {
      document.getElementById("foreach").innerHTML += index + " : " + item + "<br>";
    });

    // for of
    for (let x of foods) {
      document.getElementById("forof").innerHTML += x + "<br>";
    }

    //for in
    for (let j in foods) {
      document.getElementById("forin").innerHTML += j + " : " + foods[j] + "<br>";
    }

    //do / while(~하는동안)
    let d = 0;
    do {
      document.getElementById("dowhile").innerHTML += foods[d] + "<br>";
      d++;
    }
    while (d < foods.length);
		/* while 안의 조건이 참인동안 do를 실행 */
  </script>
</body>

# 4.4.1.6. 반복문과 dom 조작-[33]

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<h1>반복문</h1>

		<h2>for</h2>
		<ul class="menu1">
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
			<li>list item 4</li>
		</ul>
		<hr />
		<h2>foreach</h2>
		<ul class="menu2">
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
			<li>list item 4</li>
		</ul>
		<hr />
		<h2>for in</h2>
		<ul class="menu3">
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
			<li>list item 4</li>
		</ul>
		<hr />
		<h2>do / while</h2>
		<ul class="menu4">
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
			<li>list item 4</li>
		</ul>
		<hr />

		<script>
			let menu1 = document.querySelectorAll('.menu1 li');
			let menu2 = document.querySelectorAll('.menu2 li');
			let menu3 = document.querySelectorAll('.menu3 li');
			let menu4 = document.querySelectorAll('.menu4 li');
			//반복문을 이용하여 리스트의 색상을 blue로 변경한다.

			// for
			for (i = 0; i < menu1.length; i++) {
				menu1[i].style.color = 'blue';
			}
			// forEach
			menu2.forEach((element) => {
				element.style.color = 'blue';
			});
			//for of
			for (let k of menu3) {
				console.log(menu3, k);
				k.style.color = 'blue';
			}
			//do / while
			let y = 0;
			do {
				menu4[y].style.color = 'blue';
				y++;
			} while (y < menu4.length);

			//이벤트연결
			//menu1[0].addEventListener('click',()=>{})
			//menu1[1].addEventListener('click',()=>{})
			// for
			for (i = 0; i < menu1.length; i++) {
				menu1[i].addEventListener('mouseover', function () {
					this.style.color = 'red';
				});
				menu1[i].addEventListener('mouseout', function () {
					this.style.color = 'blue';
				});
			}
			//for of
			for (let a of menu3) {
				a.addEventListener('mouseover', function () {
					this.style.color = 'red';
				});
				a.addEventListener('mouseout', function () {
					this.style.color = 'blue';
				});
			}

			// forEach
			menu2.forEach((element, index) => {
				menu2[index].addEventListener('mouseover', function () {
					this.style.color = 'red';
				});
				menu2[index].addEventListener('mouseout', function () {
					this.style.color = 'blue';
				});
			});

			//do / while
			let z = 0;
			do {
				menu4[z].addEventListener('mouseover', function () {
					this.style.color = 'red';
				});
				menu4[z].addEventListener('mouseout', function () {
					this.style.color = 'blue';
				});
				z++;
			} while (z < menu4.length);
		</script>
	</body>
</html>

# 4.4.2. break/continue

반복문의 실행문들은 수행과정에서 break문을 만나면 해당 반복문을 종료합니다. break문은 반복문 등을 정지시킬 때에 사용합니다.

break 기본형

break 정지
break

반복문 문장 안에 사용하여 반복 실행 중에 조건문으로 되돌아 가게 해주는 역할을 합니다 즉, 반목문에서 특정 부분을 실행하지 않게 하고 싶을 때 간단하게 사용할 수 있습니다.

continue 기본형

continue 통과
continue

# 4.4.2.1. break/continue-예제

34-break

for (let i = 0; true; i++) {
	alert(i + '번째 반복문입니다.');
	// 진행 여부를 물어봅니다.
	const isContinue = confirm('계속하시겠습니까?');
	if (!isContinue) {
		//조건에 충족하면 break 키워드실행
		break;
	}
}
// 프로그램의 종료를 확인.
alert('프로그램 종료');

35-continue

let x = 0;
let total = 0;

while (x < 10) {
	x++;

	if (x == 3) continue;
	total = total + x;
	document.write(x);

	if (x != 10) document.write('+');
}

document.write('=' + total);

# 4.5. 마무리문제-[36]

자리배치도를 만드세요

27번 문제에서 작성했던 조건문을 활용하여 좌석의 번호를 출력하는 프로그램을 작성하세요

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>자리 배치도</title>
		<style>
			table,
			td {
				border: 1px solid #ccc;
				border-collapse: collapse;
			}
			td {
				padding: 5px;
				font-size: 0.9em;
			}
		</style>
	</head>
	<body>
		<h1>자리 배치도</h1>
		<script>
			let i, j;
			let memNum = prompt('입장객은 몇 명인가요?'); // 전체 입장객
			let colNum = prompt('한 줄에 몇 명씩 앉습니까?'); // 한 줄에 앉을 사람

			if (memNum % colNum == 0) rowNum = parseInt(memNum / colNum);
			else rowNum = parseInt(memNum / colNum) + 1;

			// document.write("모두 " + rowNum + "개의 줄이 필요합니다.");

			document.write('<table>');
			for (i = 0; i < rowNum; i++) {
				document.write('<tr>');
				for (j = 1; j <= colNum; j++) {
					seatNo = i * colNum + j; // 좌석 번호
					if (seatNo > memNum) break;
					document.write('<td> 좌석 ' + seatNo + ' </td>');
				}
				document.write('</tr>');
			}
			document.write('</table>');
		</script>
	</body>
</html>

# 5. 마무리문제

01 다음 조건을 확인하여 사용자가 입력한 숫자가 4의 배수인지 확인하는 프로그램을 작성하세요

⚡ 조건 ⚡

프롬프트 문을 이용하여 숫자를 입력 받으세요
[취소] 버튼을 누르면 결과를 출력하지 않습니다.
입력받은 숫자를 4로 나눈 나머지가 0이면 4의 배수이고 아니면 4의 배수가 아닙니다.

⚡ 실행화면 ⚡

02 숫자를 입력 받은후 1부터 그 숫자까지 3의 배수를 모두 출력합니다. 그리고 출력된 3의 배수가 총 몇개인지 알려주는 프로그램을 작성하세요

⚡ 조건 ⚡

프롬프트 문을 이용하여 숫자를 입력 받으세요
[취소] 버튼을 누르면 결과를 출력하지 않습니다.
반복문을 이용해서 1부터 입력받은 숫자까지 실행합니다.
3의 배수인지 알려면 입력받은 숫자를 3으로 나눈 나머지가 0인지 확인합니다.
카운터의 갯수를 함께 출력합니다.

⚡ 실행화면 ⚡

변수 자료형 연산자 제어문

# 2. 기본문법

# 목차

# 1. 기본문법

# 1. 변수

# 1.1. 예제 선언과 할당 [01]

# 1.2. 예제 [02]

# 2. 자료형

# 2.1. 개요

# 2.2. 종류

# 2.3. 원시형

# 2.3.1. 예제[03]

# 2.4. 참조형

🔗ppt

# 2.4.1. 예제 [04]

# 3. 연산자

🔗mdn

# 3.1. 연산자의 종류

# 3.1.1. 추가연산자(병합연산자 nullish)

# 3.2. 산술연산자

# 3.2.1. 산술연산자의 기본활용 예제 [05]

# 3.2.2. 산술연산자의 자료형 활용예제 [06]

# 3.2.3. 산술연산자의 자료형 활용예제 [07]

# 3.2.4. 증가연산자예제 [08]

# 3.3. 할당연산자

# 3.3.1. 예제-[08]

container.innerHTML += '<p>두 번째 단락</p>'; 의 연산자를 + 로 변경하면 두번째 p 태그는 교체된다.

# 3.4. 비교연산자

비교연산자는 우항과 좌항의 값은 비교후 참이나 거짓을 반환한다.

# 3.4.1. 예제-[09]

# 3.5. 논리연산자

불리언(boolean) 연산자 라고도 하며 결괏값이 true, false 를 반환하는 연산자

# 3.5.1. 예제-[10]

# 3.5.2. 마무리문제-[11]

⚡ 20대 여성이라면 결과값이 true로, 아니라면 결과 값으로 false⚡

This is another Tab!!!

# 3.5.3. 마무리문제-[12]

⚡ 평균이 70점 이상이고 각 과목별 점수가 60점 이상이면 true를 아니라면 false⚡

This is another Tab!!!

# 3.6. 조건부연산자

자바스크립트에서 항을 3개 가지는 연산자는 이것 밖에 없어서 삼항연산자라고도 불리우며 조건문을 간단히 작성할때 많이 사용됨

# 3.6.1. 예제-[13]

This is another Tab!!!

# 3.6.2. 마무리문제-[14]

⚡ 삼항 연산자 사용 ⚡

This is another Tab

# 3.6.3. 마무리문제-[15]

⚡ 삼항 연산자 사용 ⚡

This is another Tab

# 3.7. 연산자의 우선순위

# 4. 제어문

# 4.1. 조건문

# 4.1.1. if

# 4.1.1.1. if-예제[16]

# 4.1.1.2. if-예제[17]

# 4.1.1.3. if-마무리문제[18]

# 4.1.2. if~else

# 4.1.2.1. if-else-예제[19]

This is another Tab!!!

# 4.1.2.2. if-else-마무리문제[20]

# 4.1.3. if~else if

# 4.1.3.1. if~else if-예제[21]

# 4.1.3.2. if~else if-마무리문제[22]

# 4.1.4. 삼항연산자를 활용한 조건문

# 4.1.4.1. if~else if-마무리문제[23]

# 4.1.5. 논리연산자를 활용한 조건문

# 4.1.5.1. OR 연산자-예제[24]

# 4.1.5.2. AND 연산자-예제[24]

# 4.1.5.3. NOT 연산자-예제[25]

# 4.2. 선택문

# 4.2.0.1. switch-예제[26]

사용자에게 1,2,3 중 하나의 값을 입력받아 session 변수에 저장한다.

# 4.3. 실습문제[27]

자리배치도에 필요한 줄의 갯수를 구하시오.

# 4.4. 반복문

# 4.4.1. for

# 4.4.1.1. for-예제[28]

# 4.4.1.2. for-예제[29]

for 문을 사용해 1부터 100까지 숫자 더하기

# 4.4.1.3. 중첩 for-예제[30]

중첩 for문으로 1단부터 9단까지 구구단 만들기

`container.innerHTML += '<p>두 번째 단락</p>';` 의 연산자를 `+` 로 변경하면 두번째 p 태그는 교체된다.