ITWILL학원 : 8강 JS기초 BY 정규태강사

1. 이벤트

브라우저에서 사용자가 취하는 모든 행동을 이벤트라고 한다

이벤트 :
- 브라우저에서 사용자가 취하는 모든 행동
- ex)button

이벤트리스너 :
- 이벤트 발생정보를 체크해서 해당 핸들러로 전달
- ex) onclick

이벤트핸들러 :
- 이벤트 발생시 특정 동작을 처리해주는 동작
- 자바스크립트 함수를 실행시켜서 작동한다 즉, js함수실행가능
- 태그의 스타일정보 변경가능
- ex) alert(‘버튼클릭’), open() 등등

보통을 keydown해서 keyup을 해야 즉, 키보드를 눌렀다가 떼면 데이터가 입력된다.
따라서 키이벤트를 처리할때는 keyup일때 이벤트를 걸어줘야 keydown일때보다 정확한 처리가 가능하다

1
2
3
4

<input type="button" value="버튼" onclick="alert('버튼클릭');"><br>
<input type="button" value="버튼2" ondblclick="alert('버튼더블클릭');"><br>
<input type="button" value="버튼3" onmouseover="alert('마우스오버');"><br>
<input type="text" name="txt" onkeyup="alert('키업!');"><br>

참고링크 : onmouseleave와 onmouseout의 차이점

2. 브라우저객체모델(BOM : Browser Object Model)

우리가 사용하는 인터넷브라우저안에 내장되어있는/포함되어있는 객체를 말한다.
특징

• 계층적구조 : 단계별로 표시할 수 있다.
  • 최상위레벨 : window객체
  • 그 아래레벨 : document객체, screen객체, location객체, history객체, navigator객체

정확한 구조를 표현한 문장인 window.document.write() 사용해야하지만 최상위 객체는 생략해서 document.write()로 사용한다.

3. window객체

브라우저 객체이 최상위 객체.
객체이기때문에 당연히 속성과 함수들을 가지고 있다.

• window.open(“url주소 “, “창이름(title태그와 동일한 기능)”, “옵션”); 새창열기

• window.location.href=’url주소’; 현재페이지에서 열기

• window.close(); 현재 창 닫기

• window.alert(); 알림 팝업창 열기

• window.confirm() : 팝업창을 열어서 확인/취소 버튼으로 Boolean 데이터를 받는 함수

• window.prompt(); 팝업으로 input창 열기

• window.setInterval(“자바스크립트실행문”,밀리초시간); 일정시간동안에 자바스크립트실행문을 실행하는 함수

window는 최상위객체이기때문에 window를 생략하고 사용할 수 있다.

1. 예시1 : window.open(), window.close(), window.location

1
2

<input type="button" value="새창열기" onclick="window.open('http://www.naver.com')">
<input type="button" value="현재페이지열기" onclick="location.href='http://www.naver.com'">

이렇게 input태그에 많은 내용이 들어가면 보안상의 위험이 있으므로 js에 넣어서 사용한다.
참고로 아래 코드에서 점점(..)은 상위폴더로 이동을 의미한다.

1
2
3
4
5
6
7
8

function winOpen(){
	open("http://www.naver.com") //window생략가능
}
<input type="button" value="새창열기" onclick="winOpen();">

function pageOpen2(){
	open("../JS2/Test5.html") //점점(..)은 상위폴더로 이동을 의미한다.
}

2. 예시2 : setInterval(()=>{js실행문}, 밀리초)

3초에 한번씩 숫자를 찍는 함수를 아래코드와 같이 만들수있다.
java에서 스래드와 비슷한 개념이다.

1
2
3
4
5
6

let i=0;
let inter = setInterval(() => { 
	console.log(i++)
}, 3000);  //3초에 한번씩 숫자찍기

clearInterval(inter); //변수에 담은 interval데이터를 clearInterval()함수로 멈출수있다.

숫자를 전화번호 형식으로 변환

숫자를 받은 후 그 숫자를 전화번호형식으로 변화시키고 싶다.
if else문을 사용해서 나타낼 수 있겠지만 엄청 길었다.
검색해보니 정규식을 이용한 깔끔한 코드를 찾았다

1
2
3

function phoneformat(num){
	return num.replace(/(^02.{0}|^01.{1}|^[0-9]{3})([0-9]*)([0-9]{4})/, "$1-$2-$3");
}

코드를 설명하자면 뒤에서 설명하는 게 편하다.

1. “$1-$2-$3”

이 부분은 $1과 $2 그리고 $3를 하이픈(-)으로 연결했다.
그렇다면 $1과 $2, $3는 뭘까?
앞에 괄호와 연결된다 콤마(,)앞에 식을 자세히보면 (/()()()/,”$1-$2-$3”); 이렇게 볼 수 있다.
괄호안의 연산된 값이 순서대로 $1, $2, $3에 대입된다고 보면 된다.

2. ([0-9]{4})

뒤의 괄호부터 차근차근 풀어보자
0에서부터 9까지의 숫자중에 4개의 숫자를 가지겠다는 의미이다

3. ([0-9] * )

0에서부터 9까지의 숫자중에 모든 남는 숫자를 가지겠다는 의미이다
여기서 남는 숫자란, 총 11자리중에 앞에서 3자리, 뒤에서 4자리를 가져간다면 그 나머지숫자은 4개를 가져가겠다는 의미이다.

4. (^02.{0}|^01.{1}|^[0-9]{3})
   ^은 정규식을 시작한다는 의미이다.
5. {0} 는 02로 시작할경우, .{0}는 문자하나를 출력하겠다는 의미이고 뒤에 오는 숫자를 쓰지않고 02만 출력된다
   |는 or연산자역할이다.
   ^01.{1}는 01로 시작할경우, .{1}는 01 이후로 오는 1자리까지 숫자를 출력하겠다는 의미이고 여기서는 01x가 된다.
   [0-9]{3}는 0부터 9까지 숫자중에서 입력된 3가지 숫자를 가지겠다는 의미이다.

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. Date객체

Date 객체의 특징

• 년,월,일 지정해서 객체를 사용
• 0부터 11까지를 1월부터 12월로 나타낸다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//참고로 today는 2020년 6월 12일이다.
let today = new Date();
document.write(today+"<br>")

let day = new Date(2020,0,1); //month숫자를 0에서부터 세기때문에 1월1일은 0,1이 되어야함 
document.write(day+"<br>")

let day1 = new Date(2020,1,1); //2월1일
document.write(day1+"<br>")

let day2 = new Date(2020,0,1,11,30,5); //년,월,일,시,분,초 지정해서 객체사용가능
document.write(day2+"<br>")

let day3 = new Date(2020,0,1,11,61,5); //분에 61분을 적으면 자동으로 1시간이 올라감
document.write(day3+"<br>")

let day4 = new Date("2020/1/1") //년,월,일만 가능. 시분초불가. 월을 나타낼때 0부터가 아니라 1부터 시작
document.write(day4+"<br>") 

// 출력값 순서대로
Fri Jun 12 2020 11:14:44 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 00:00:00 GMT+0900 (대한민국 표준시)
Sat Feb 01 2020 00:00:00 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 11:30:05 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 12:01:05 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 00:00:00 GMT+0900 (대한민국 표준시)

변수에 저장한 date객체를 가져와서 사용해보자
요일출력하는 getDay()의 경우 0(일)부터 6(토)까지를 나타낸다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//참고로 today는 2020년 6월 12일이다.
let today = new Date();

document.write(today.getFullYear() +"<br>") //년출력 year말고 fullyear써야함
document.write(today.getMonth() +"<br>")  //월출력 (0부터 11까지)
document.write((today.getMonth()+1) +"<br>") //알아보기쉽게 1을 추가해서 사용
document.write(today.getDate() +"<br>") //일출력
document.write(today.getDay() +"<br>") //요일출력

// 출력값 순서대로
2020
5
6
12
5

숫자로 들어온 요일을 글자로는 어떻게 바꿀수있을까?
여러가지 방법이 있다

1. Array의 index 활용
   요일이 숫자로만 출력되어 아쉬운 경우에는 변수에 넣어 index를 이용하여 아래처럼 금요일 이렇게 출력되게 할수있다

1
2
3

let today = new Date();
let week = new Array('일', '월', '화', '수', '목', '금', '토')
document.write(week[today.getDay()] + "요일 <br>")

2. 제어문사용 (if나 switch)
   if나 switch를 통해 일일히 조건을 걸어 나열할수있다
   if는 많이 써보았으니 switch를 써보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function getToDay(day) {
	switch (day){
	case 0 : 
		document.write('일요일')
		break;
	case 1 : 
		document.write('월요일')
		break;
	case 2 : 
		document.write('화요일')
		break;
	case 3 : 
		document.write('수요일')
		break;
	case 4 : 
		document.write('목요일')
		break;
	case 5 : 
		document.write('금요일')
		break;
	case 6 : 
		document.write('토요일')
		break;
	}
}

getToDay(today.getDay())

2. 디데이 계산하는 함수 구하기

Date()객체를 활용하여 디데이를 계산한느 함수를 구해보자
Date()객체에서는 사칙연산이 적용되는데 단위가 밀리초로 출력된다

• 밀리초 = 1/1000초
• 1초 = 1000msc
• 1분 = 60 * 1000
• 1시간 = 60 * 60 * 1000
• 하루 = 24 * 60 * 60 * 1000

1
2
3
4
5
6
7
8
9
10

function calculator(year, month, day){
	let today = new Date();
	let lastday1 = new Date(year,(month-1),day) //컴터는 0월부터계산하니까 사용자입력값에서 1을 빼줌
	console.log(lastday1)
	let result =  (lastday1 - today) / (24 * 60 * 60 * 1000);
	document.write(Math.ceil(result) + "일 남았습니다 <br>")
}

calculator(2020,12,31); //202일 남았습니다
calculator(2020,06,14); //2일 남았습니다

ITWILL학원 : 8강 JS기초 BY 정규태강사

1.객체 Object

1. 정의

자바스크립트는 객체기반의 언어
객체는 기능, 속성을 포함하고 있는 것
추상화된 객체를 사용할때 속성은 변수를 사용해서 표현하고 기능은 함수(매서드)를 사용해서 표현한다
자바스트립트에서는 객체를 직접 만들어쓰지않고 만들어진 객체를 활용한다
하지만 자바는 자주 직접 만들어서 사용한다

1
2
3

let phone = new Object();  //여기서 phone은 참조변수
phone.모델명 = "아이폰"
phone.on(); //전원켜는 기능 실행

위의 phone을 참조변수라고 한다

2. 객체종류

• 내장객체
  • 자바스크립트엔진에 포함되어있는 객체
  • String : 문자를 처리하는 객체
  • Date : 날짜를 처리하는 객체
  • Array : 배열을 처리하는 객체
  • Math : 수학을 처리하는 객체
  • 등등

• 브라우저 객체모델(BOM : Browser Object Model)
  • 브라우저에 계층적으로 내장되어 있는 객체
  • 즉 단계가 있는 객체
  • window
  • screen
  • location
  • history
  • navigator
  • document
  • 등등

• 문서 객체 모델(DOM : Document Object Model)
  • HTML 테그의 문서구조 + CSS
  • IE8이하의 버전에서 호환성이 떨어지기에 잘 안쓰게 된다 -> 대신 jQuery문서객체모델을 사용

2. 내장객체

1

let 참조변수 = new 생성변수();

new : 객체(instance)를 생성하는 연산자이다 -> 메모리에 올려서 사용할 수 있도록 준비

3. tv 채널up/down 함수만들기

tv 채널 up과 down이 되는 함수를 만들어보자
채널은 1부터 500까지 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function chUp(){
	if(tv.ch >= 1 && tv.ch < 500){
		tv.ch ++;
		document.write("현재 채널 번호는 " + tv.ch  + "번 입니다 <br>")
	}else if(tv.ch == 500){
		tv.ch = 1;
		document.write("현재 채널 번호는 " + tv.ch  + "번 입니다 <br>")
	}else{
		tv.ch += 1;
		document.write("현재 채널 번호는 " + tv.ch  + "번 입니다 <br>")
	}
}
}

실행시마다 채널이 다운되는 함수는 아래와 같다

1
2
3
4
5
6
7
8
9
10
11
12

function chDown(){
	if(tv.ch == 0){
		tv.ch = 500;
		document.write("현재 채널 번호는 " + tv.ch + "번 입니다 <br>")
	}else if(tv.ch == 1){
		tv.ch = 500
		document.write("현재 채널 번호는 " + tv.ch + "번 입니다 <br>")
	}else{
		tv.ch -= 1;
		document.write("현재 채널 번호는 " + tv.ch + "번 입니다 <br>")
	}
}

tv.ch가 499일때 두 함수를 호출해보면

1
2
3
4
5
6
7

chUp() // 499 -up-> 500
chUp() //500 -up->501 ->1
chUp() //1 -up->2
chDown() // 2 -down->1
chDown() // 1 -down->500
chDown()  // 500 -down->499
chDown()  // 500 -down->499

4. new 를 쓰고 안쓰고의 차이

new 연산자는 생성자함수이다.
생성자란 객체를 생성할때 초기화하는 것이다.

new를 쓰고 안쓰고의 차이가 뭘까? => 사용법의 차이가 있다(변수에 담아서 사용유무)

1. 객체를 생성할때 new 연산(생성자함수)를 해야하는 객체

   • 날짜객체 : Date()
   • 변수를 생성해서 객체를 담아서 사용

     1 2 3

     let day = new Date(); //변수에 담아서 사용 day.속성 //이렇게 사용해야함

2. new연산 없이 사용가능한 객체

   • 수학 : Math 객체 => Math.floor(버림), Math.round(반올림), Math.ceil(올림), Math.max(여러값비교해서 최대값), Math.min(여러값비교해서 최소값), Math.abs(절대값), Math.random(0부터 1사이에 있는 실수를 랜덤하게 출력)

     • 가장 자주 사용하는 것은 random이다
     • Math.floor(Math.random() *10)로 0부터 10까지의 랜덤양수를 출력한다

   • 숫자 : Number 객체

   • 문자 : String 객체

   • 배열 : Array 객체

   • 바로 사용가능

     1	Math.floor(); //변수에 담지않아도 바로 사용가능

ITWILL학원 : 7강 JS기초 BY 정규태강사

1. 무한반복문

반복문이 무한으로 실행되는 반복문.
문제의 해결이 언제 끝날지 모르는 경우에 주로 사용.

예를 들어,사용자가 정답을 맞출때까지 실행하는 퀴즈프로그램을 만들었다고 생각해보자
-> 사용자가 언제 정답을 맞출수있을지 알수있을까?
-> 모른다. 따라서 계속해서 실행을 하고 있어야한다
-> 이때 무한반복문 사용
-> 답을 맞추면 끝나야하기때문에 보조제어문이 필요하다

• 실제예시 : 스마트폰의 지문인식

1
2
3
4
5
6
7
8
9
10
11

for(;;){
 console.log("무한반복")
};

for(;true;){};

for(let i=1;;i++){};

while(true){};

do {} while(true);

2. 보조제어문

• break문 : 가장 가까운 반복문 하나를 탈출하는 코드다
  • 즉 이중for문이면 둘 다 탈출하는 것이 아니라 가장 가까운 for문만 탈출하는 것이다
  • break;의 순서에 따라 결과값이 달라지므로 위치가 중요하다
  • 예를 들어 : ~까지만 해라

1
2
3
4
5
6
7
8
9
10
11
12

for(let i=1; i<=10; i++){
	document.write(i+" ");
	if(i%4 === 0) break;
} //1 2 3 4

// break문은 순서가 중요하다
// 순서에 따라 값이 다르게 나오기 때문이다

for(let i=1; i<=10; i++){
	if(i%4 === 0) break;
	document.write(i+" ");
} //1 2 3

아래는 for문의 조건식으 true인 무한반복문이다
무한반복문과 함께 쓰이는 경우는 아래와 같다

1
2
3
4

for(let i=1;true;i++){
	if(i === 10) break;
	document.write(i+" ")
}

• continue문 : 해당 경우를 실행하지않고 다음 경우를 실행하는 동작
  • continue조건은 빼고 반복문을 실행하는 동작.
  • 예를 들어 : ~를 빼고 진행해라!할때 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let sum=0,i=0

while(i<5){
	i++
	if(i==3)
		continue;
		sum=sum+i
	document.write("i값은 " + i + " sum값은 " + sum + "<br>")
 }
/* i값은 1 sum값은 1
i값은 2 sum값은 3
i값은 4 sum값은 7
i값은 5 sum값은 12 */

document.write("while문의 결과값 : "+sum) // 12

위의 두가지를 활용한 숫자퀴즈를 만들어보자

1. 특정숫자 미리 지정 (1부터 100까지 중에서)
2. 사용자로부터 입력 -> 미리 지정한 숫자와 큰지, 작은지 같은 지를 비교
3. 큰 경우 -> “입력된 값이 큽니다” 출력
4. 같은경우 -> “정답입니다 도전횟수는 땡땡입니다” 출력
5. 작은 경우 -> “입력된 값이 작습니다” 출력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let quiz = Math.floor(Math.random()*100); //랜덤숫자만들기
console.log("랜덤숫자 정답은? "+ quiz)
let input = prompt('텔레파시를 보냈습니다~ 숫자를 입력하세요');

for(let count=1; true; count++){
	if(quiz > input){
		input = prompt("텔레파시숫자보다 작습니다. 숫자를 다시 입력해주세요");
	}else if(quiz < input){
		input = prompt("텔레파시숫자보다 큽니다. 숫자를 다시 입력해주세요");
	}else if(quiz == input){
		alert("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		document.write("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		break;
	}else{
		input = prompt("잘못입력하였습니다. 숫자를 다시 입력해주세요");
	}
}

강사님 코드는 아래와 같다
굳이 input을 for문 밖에 두는 것이 아니라 안에 두기만 하면 되는 거였다
괜히 일일히 input = prompt를 적었다… 띠용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

let quiz = Math.floor(Math.random()*100);
console.log("랜덤숫자 정답은? "+ quiz)

for(let count=1; true; count++){
	let input = prompt('텔레파시를 보냈습니다~ 숫자를 입력하세요');

	if(quiz > input){
		alert("텔레파시숫자보다 작습니다. 숫자를 다시 입력해주세요. 시도횟수 " + count +"회");
	}else if(quiz < input){
		alert("텔레파시숫자보다 큽니다. 숫자를 다시 입력해주세요. 시도횟수 " + count +"회");
	}else if(quiz == input){
		alert("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		document.write("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		break;
	}else{
		alert("잘못입력하였습니다. 숫자를 다시 입력해주세요");
	}
}

3. Function 함수 : 일반, 익명

함수는 절차지향언어에서 사용되고 매서드는 객체지향언어에서 사용된다.
엄밀히 따지면 다른 개념이지만 크게 보면 동일하게 사용되기도 한다.
익명함수는 보통 변수에 넣어서 사용한다

• 변수 : 데이터를 저장해서 사용하는 곳
• 함수 : 실행문을 저장해서 사용하는 곳

1. 일반함수
   일반적으로 함수는 아래와 같이 선언과 사용한다.

1
2
3
4
5
6
7

//1. 일반함수 선언
fuction 함수명(매개변수){
	실행코드
}

//2. 일반함수 호출
함수명();

2. 익명함수
   익명함수의 선언과 사용은 아래와 같다.
   익명함수는 함수명이 없기때문에 변수이름으로 호출하면 된다.
   보통 익명함수는 1회성으로 주로 사용한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//1. 익명함수 선언
 변수 = fuction (매개변수){
	실행코드
}

//2. 익명함수 호출
변수명();

//3.예시

let fun1 = function (){
	document.write("하이")
}
fun1() //하이

4. 재귀함수

재귀함수란 다시 자기자신을 호출하는 함수이다.
재귀함수는 반복문없이 계속 반복된다 따라서 사용범위를 주의해서 사용해야한다
재귀함수는 일정크기만큼만 실행되고 자동적으로 멈춘다.

return을 이용해 함수를 탈출할수있다

1
2
3
4
5
6
7
8

//1. 재귀함수 선언
fuction 함수명(매개변수){
	실행코드;
	함수명(); //자신의 이름 또 호출
}

//2. 재귀함수 호출
함수명();

재귀함수를 활용하여 1~10까지 숫자를 나타내는 함수예제를 보자

1
2
3
4
5
6
7
8
9
10
11

let num=0;
function testFun(){
	if(num < 10){
		num++;
		document.write(num + " ")
		testFun();
	}else{
		return;
	}
}
// 1 2 3 4 5 6 7 8 9 10

강사님은 더 짧은 코드를 썼다
나는 왜 이 코드를 못했을까?

뭔가 더 간단해보인다.
무슨 코드가 더 좋은 코드일까?

가독성이 좋지만 긴 코드 vs 가독성이 조금 떨어지지만 짧은 코드

아직 잘 모르겠다. 아마 회사 분위기에 따라 다르지 않을까?

1
2
3
4
5
6
7
8
9
10

let num1 = 0;
function testFun2(){
	num1++;
	document.write(num1 + " ")
	if(num1 === 10){
		return;
	}
	testFun2();
}
// 1 2 3 4 5 6 7 8 9 10

5. 지역변수를 전역범위에서 쓰는 방법

지역변수를 전역변수처럼 쓸 수 있을까?
정답은 예스!
return을 이용한 예시를 보자

1
2
3
4
5
6
7
8
9

let number = 200;

function fun() {
	var number = 300;
	return number;
}

number = fun();
document.write(number) //300

number의 값은 200이 아니라 300이 나온다.
지역변수를 함수로 만들고 그 값을 전역변수 안에 넣었기 때문이다.

6. 내장함수

자바스크립트엔진에는 내장되어있는 함수들이 있다.

예시

• String(1)
• Number(“1”) => number는 정수와 실수를 합친 것으로 표현됨
• Boolean(0) =>
• alert(“경고창”)
• prompt(“질문”, “기본값”)
• confirm() => yes, no 결정
• parseInt() => 문자데이터를 정수데이터로 변경
• parseFloat() => 문자데이터를 실수데이터로 변경

반복문 : for

반복문의 기본식은 아래와 같다

1
2
3

for(초기식; 조건식; 증감식){
	반복문장
}

if나 for 문은 중괄호{} 없이도 반복이 된다. 하지만 세미콜론;전까지의 한줄만 반복한다

반복문의 순서

1. 초기식

2. 조건식

3. 반복문장

4. 증감식

5. 조건식

6. 반복문장

7. 증감식

8. 위의 3가지 반복

9. 조건식 (조건이 충족된 경우)

10. 반복문 종료

개발자 도구를 이용하여 간단한 디버깅을 할 수 있다

1. Sources탭에서 디버깅원하는 소스코드파일을 클릭 후 디버깅원한느 코드의 줄번호 앞부분 클릭 -> 빨간 점으로 표시됨
2. Block기준으로 변수의 값이 변화 확인 가능
3. 4번에 보이는 회색점을 클릭하면 빨간색점으로 변경됨 -> 점마다 break point가 걸려 순서를 세세하게 볼 수 있음
4. 옅은 파란 블럭이 이동하면서 코드 실행순서를 가시적으롭 보여줌
5. 디버깅이 끝났으면 꼭 줄번호 옆의 빨간색점을 체크해제해줘야 디버깅 모드가 중단된다

기본 반복문암기

기본적인 반복문은 암기해서 바로바로 쓰는 것이 좋다

몇씩 증감하는 반복문

1~10까지 짝수만 출력하는 반복문을 생각하자마자 나는 if조건이 들어간 for문을 생각했다

1
2
3
4
5

for(let i=0; i<=10; i++){
	if(i%2 !==0){
		document.write(' '+i);
	}
} // 1 3 5 7 9

강사님이 보더니만 결과값은 일치하지만 효율을 위해서 간단한건 조건문이 안들어간 반복문으로 나타내는 것이 좋다고했다.

음 그렇군! 오케이 접수!

1
2
3

for(let i=1; i<=10; i+=2){
	document.write(' '+i)
} // 1 3 5 7 9

for문안의 증감식을 변경하여 몇씩 증감한다고 하면 주로 위의 코드를 이용하면 된다!

누적합

정말 많이봐서 이제 익숙하다

1
2
3
4
5

let sum = 0
for(let i=0; i<=10; i++){
	sum+=i
} 
document.write(sum) //55

카운트

횟수를 셀 때 자주 사용한다

1
2
3
4
5

let count = 0;
for(let i=1; i<=10; i++){
	count+=1;
}
document.write(count); //10

for문과 if문의 자리바꿈에 따른 변화

사용자가 입력하는 숫자의 구구단을 출력하는 예시를 보자

1
2
3
4
5
6
7
8
9
10

let num = prompt('구구단 숫자를 입력하세요'); 

for(let i=1; i<=9; i++){
	if(num > 0){
		document.write(num + ' * '+ i +' = '+ (num*i)+ '<br>')
	}else{
		alert('잘못입력했습니다 1~9까지 숫자중에 입력하세요')
		break;
	}
}

위에서 num을 0이하로 입력했다면 alert창 띄우고 다시 숫자를 입력하도록 하게 하고싶었다. 근데 이 로직으로는 감이 잡히지않았다.
고민하다가 if와 for문의 자리를 바꿨다.
자리만 바꿨을 뿐인데 reload가 가능해서 굳이 새로고침하지않아도 다시 num을 입력할 수 있어 편하다

1
2
3
4
5
6
7
8
9
10

let num = prompt('구구단 숫자를 입력하세요'); 

if(num>0){
	for(let i=0; i<=9; i++){
		document.write(num + ' * '+ i +' = '+ (num*i)+ '<br>')
	}
}else{
	alert('잘못입력했습니다 1~9까지 숫자중에 입력하세요')
	location.reload();
}

반복문 : While

반복문 while의 기본식은 아래와 같다

1
2
3
4
5

초기식;
while(조건식){
	반복할문장;
	증감식;
}

증감식을 꼭 적어줘야 무한실행이 되지 않는다!

전위연산 VS 후위연산

전위연산과 후위연산은 잘 비교해야한다

1. 전위연산

   1 2 3 4

   let i=1; while(i++ <=4){ document.write(i+", ") } // 2, 3, 4, 5

   1. i = 1 -> 조건식 : 참 -> i++ -> write : 2
   2. i = 2 -> 조건식 : 참 -> i++ -> write : 3
   3. i = 3 -> 조건식 : 참 -> i++ -> write : 4
   4. i = 4 -> 조건식 : 참 -> i++ -> write : 5
   5. i = 5 -> 조건식 : 거짓 -> 종료

2. 후위연산

   1 2 3 4

   let i=1; while(++i <=4){ document.write(i+", ") } // 2, 3, 4,

   1. i = 1 -> ++1 라서 2 -> 조건식 : 참 -> write : 2
   2. i = 2 -> ++1 라서 3 -> 조건식 : 참 -> write : 3
   3. i = 3 -> ++1 라서 4 -> 조건식 : 참 -> write : 4
   4. i = 4 -> ++1 라서 5 -> 조건식 : 거짓 -> 종료

do-while()문

조건 비교하기 전에 한 번 실행후 조건을 비교한다

기본형태이다

1
2
3
4
5

초기식;
do{
	반복문장;
	증감식;
}while(조건식)

초기식과 증감식 없더라도 확인가능하다
아래는 예시이다

1
2
3
4
5
6

let i = 1;
do{
	document.write(i+" ");
	i++;
}while(i<=10);
// 1 2 3 4 5 6 7 8 9 10

예시: 구구단 세로로 나타내기

구구단을 가로가 아닌 세로로 나타내보자
세로로 만들려면 일단 가로로 먼저 만들수있어야한다

1. 구구단 가로출력

   1 2 3 4 5 6

   for(let dan=2; dan<=9; dan++){ document.write('<br>') for(let num=1; num<=9; num++){ document.write(dan+'*'+num+'='+(dan*num)+' ') } }

가로출력의 첫번째 반복은 dan이 고정이고 num이 1부터 9까지 변화한다
세로출력의 첫번째 반복은 num이 고정이고 dan이 2부터 9까지 변화한다

이 두 사실을 가지고 변수와 숫자를 적절히 바꾸어주면 된다

2. 구구단 세로출력

for문과 이중for문으로 만든 코드이다

1
2
3
4
5
6
7
8
9
10

for(let i=2; i<=9; i++){
	document.write('    <' + i +'단>  ')
}

for(let dan=1; dan<=9; dan++){
	document.write('<br>') 
	for(let num=2; num<=9; num++){
		document.write(num+'*'+dan+'=   '+(dan*num)+', ')
	}
}

아래 이미지파일을 보면 왼쪽이 출력값이고 오른쪽이 소스코드이다

이중for문 하나로 만들 순 없을까?

당연히 만들수있다! if를 이용하면 된다!

1
2
3
4
5
6
7
8
9
10
11

for(let num=0; num<=9; num++){	
	for(let dan=2; dan<=9; dan++){
		if(num == 0){
			document.write('    <' + dan +'단>  ')
		}else{
			document.write(dan+'*'+num+'=   '+(dan*num)+', ')
		}
	}
	document.write('<br>') 
}

반복문으로 테이블만들기

테이블만드는 방법도 다양하다

테이블은 행x열(4x3)이고 각 칸안에는 1~12까지의 수를 넣은 테이블을 만들어보자

1. 이중 for문 사용

   1 2 3 4 5 6 7 8 9 10 11 12 13

   let tageOpen="<table border='1'>" let tageClose="</table>" document.write(tageOpen) let count = 0; for(let tr=1; tr<=4; tr++){ document.write('<tr>') for(let td=1; td<=3; td++){ document.write('<td>' + (count+=1) + "</td>") } document.write('</tr>') } document.write(tageClose)

2. tag로 테이블만들기

   1 2 3 4 5 6 7 8 9 10 11 12 13

   let tageOpen="<table border='1'>" let tageClose="</table>" let trtdtag; let count1 = 0; for (let i=1; i<=4; i++){ trtdtag += "<tr>"; trtdtag += "<td>" + (count1+=1) + "</td>"; trtdtag += "<td>" + (count1+=1) + "</td>"; trtdtag += "<td>" + (count1+=1) + "</td>"; trtdtag += "</tr>" } document.write(tageOpen + trtdtag + tageClose )

아래와 동일 테이블이 만들어진다.

ITWILL학원 : 5강 JS기초 BY 정규태강사

1.아이디와 비번체크

location.reload()는 새로고침의 역할을 한다

1. 아이디와 비번을 존재유무 동시에 체크

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const id = "itwill001"
const pw = "it8030909"
let inputId = prompt("아이디를 입력하세요", "")
let inputPw = prompt("비밀번호를 입력하세요", "")

if(id === inputId){
	if(pw === inputPw){
		alert(inputId+"님 환영합니다")
	}else{
		alert("비밀번호가 일치하지 않습니다")
		location.reload();
	}
}else{
	alert("존재하지 않는 회원입니다.")
	location.reload();
}

2. 아이디 존재유무 먼저 체크후 비번 체크

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const id = "itwill001"
const pw = "it8030909"
let inputId = prompt("아이디를 입력하세요", "")

if(id === inputId){
	if(pw === inputPw){
		alert(inputId+"님 환영합니다")
		let inputPw = prompt("비밀번호를 입력하세요", "")
	}else{
		alert("비밀번호가 일치하지 않습니다")
		location.reload();
	}
}else{
	alert("존재하지 않는 회원입니다.")
	location.reload();
}

DB를 쓰면 알게되겠지만 2번방법은 아이디한번 비번한번 두번을 가져와야해서 비효율적이다
1번을 사용하는 것을 권장한다

3. html내에서 id로 가져와서 로그인페이지 완성
   내가 궁금해져서 네이버처럼 로그인페이지를 만들어봤다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<img src="https://lh3.googleusercontent.com/proxy/kn4y-1fat85W8voylUnkZF1DBTCAwtNwaTwxKJZ-GYiWk83N6rAd2fKqIzdaPSSZKupHKxA-xyZttfXhyO6EQHKxEQ2NTEeByNqAEZaCdJScbyZcUB3nak6TlxWlKv_lRgwfZtY8gWCwjusDnUmRThBUCTYf7ElOwOvnnj772zC02yDGOB5uI-B4rkSeKZjcw0i6FpG3xsATsSvDIw4A28QN"
	width=100%, height=100%>
<input id="id" type="text" size="40px" placeholder="아이디를 입력하세요"><p>
<input id="pw"type="text" size="40px" placeholder="비밀번호를 입력하세요"><p>
<button id="login"> 로그인 </button><p>
<input type="checkbox" checked>항상 아이디 기억하기


<script type="text/javascript">

let id = document.querySelector('#id');
let id = document.querySelector('#id');
let loginbtn = document.querySelector('login')

loginbtn.addEventListener('click', ()=>{
	console.log(id, pw)

 	if( id === "it"){
 		if(pw === "321"){
 			alert(id1 + "님, 반갑습니다")
 		}else{
 			alert("비밀번호가 일치하지 않습니다")
 			location.reload();
 		}
	}else{
		alert("존재하지 않는 회원입니다.")
		location.reload();
	} 
})

querySelector로 input태그 ID와 PW를 가져오려고 했으나 “존재하지 않는 회원입니다”라는 에러만 겁나 났다

querySelector가 안되는 이유는 Jquery태그를 추가해야한다고했다

그래서 다른 방법인 getElementById()로 진행해봤다.

1. getElementById(‘id’)만 가지고 왔는데도 전혀 입력값을 가져오지못했고 “존재하지 않는 회원입니다”라는 에러
2. getElementById(‘id’).value : 그래서 value를 끝에 추가했지만 그래도 가져오지 못했다
   왜지….
3. 알고보니 결국 스코프 문제였다 addEventListener안에 넣었더니 정상적으로 실행되었다 뿌듯!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<img src="https://lh3.googleusercontent.com/proxy/kn4y-1fat85W8voylUnkZF1DBTCAwtNwaTwxKJZ-GYiWk83N6rAd2fKqIzdaPSSZKupHKxA-xyZttfXhyO6EQHKxEQ2NTEeByNqAEZaCdJScbyZcUB3nak6TlxWlKv_lRgwfZtY8gWCwjusDnUmRThBUCTYf7ElOwOvnnj772zC02yDGOB5uI-B4rkSeKZjcw0i6FpG3xsATsSvDIw4A28QN"
	width=100%, height=100%>
<input id="id" type="text" size="40px" placeholder="아이디를 입력하세요"><p>
<input id="pw"type="text" size="40px" placeholder="비밀번호를 입력하세요"><p>
<button id="login"> 로그인 </button><p>
<input type="checkbox" checked>항상 아이디 기억하기

<script type="text/javascript">

let loginbtn = document.getElementById('login')

loginbtn.addEventListener('click', ()=>{
	let id = document.getElementById('id').value;
	let pw = document.getElementById('pw').value;
	console.log(id, pw)

 	if( id === "it"){
 		if(pw === "321"){
 			alert(id1 + "님, 반갑습니다")
 		}else{
 			alert("비밀번호가 일치하지 않습니다")
 			location.reload();
 		}
	}else{
		alert("존재하지 않는 회원입니다.")
		location.reload();
	} 
})

2. JS주석 한번에 단축키

• ctrl + shift + / : 한번에 주석설정
• ctrl + shift +\ : 한번에 주석제거

3. switch문 출력문 한줄 리팩토링

입력받은 정보를 가지고 학점을 나타내는 switch문을 만들어보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

let score = prompt('점수를 입력하시면 학점이 계산됩니다')

switch (Math.floor(score/10)){
case 10 :
case 9 :
	document.write("A학점")
	break;
case 8 :
	document.write("B학점")
	break;
case 7 :
	document.write("C학점")
	break;
case 6 :
	document.write("D학점")
	break;
case 5:
case 4:
case 3:
case 2:
case 1:
case 0:
	document.write("F학점이라니")
	break;
default : document.write("0~100사이의 점수를 입력하세요")
}

자세히보면 반복되는 출력문이 보인다
이걸 리팩토링해보자
아주 간단하다! 변수만 만들어주면 된다!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

//switch case 출력문 한번쓰기
document.write('<hr>')
let score = prompt('점수를 입력하시면 학점이 계산됩니다')
let grade = ""; //변수만들기

switch (Math.floor(score/10)){
case 10 :
case 9 :
	grade ="A"
	break;
case 8 :
	grade ="B"
	break;
case 7 :
	grade ="C"
	break;
case 6 :
	grade ="D"
	break;
case 5:
case 4:
case 3:
case 2:
case 1:
case 0:
	grade ="F"
	break;
default : document.write("0~100사이의 점수를 입력하세요")
}
document.write(grade + "학점")

ITWILL학원 : 3강 JS기초 BY 정규태강사

1. 문서에 js를 나타내는 3가지 방법

1. document.write();

2. console.log();

3. alert();

1
2
3
4
5
6
7
8
9
10
11
12
13
14

let a = 100;

// 1번 방법
document.write(a);

// 2번 방법
console.log(a);

// 3번 방법
alert(a)

// 출력값은
셋 다 동일하게 100이 출력된다.
표시되는 곳이 다를 뿐.

2. undefined VS null

• undefined : 변수에 아무런 값도 등록되어 있지 않은 경우
  • var value;
• null : 아무것도 없음을 표현하는 값 따라서 주로 변수를 초기화할때 사용함.
  • var value = null;
  • 객체를 생성하고 사용할 수 있게 하기 위해 null로 초기화한다

3. 변수명 작성

1. 변수명은 영문자로 작성 (첫번째 글자에 $, _ 사용가능)
2. 예약어는 변수명으로 사용할 수없다 ex) False, typeof
3. 변수명은 가능하면 의미를 가지고 생성
4. 대소문자 구분 필수

4. 산술 연산자

예제문제를 푸는데 나는 두가지 방법이 떠올라서 두가지방법으로 풀어보았다

예제문제
Math.floor를 사용하여 세자리 숫자를 연산하면 100의 단위로만 나타내세요
input 456
output 400

1
2
3
4

let num3 = 778;

	console.log('첫번째방법은 ' + (num3 - num3%100));
	console.log('두번째방법은 ' + (Math.floor(num3*0.01))*100);

5. 대입 연산자

변수에 데이터(값)을 저장하는 연산자
ex) A = B ; 연산의 방향이 오른쪽에서 왼쪽이다

복합대입연산자는 산술연산자에 복합연산자를 함께 사용하는 것으로 그 예에는 +=, -=, *=, /=, %=가 있다
ex) A += B; <=> A = A + B;
ex) A -= B; <=> A = A - B;
ex) A *= B; <=> A = A * B;

복합대입연산자를 활용해 테이플을 편하게 만들 수 있다

1
2
3
4
5
6
7
8
9
10
11
12
13
14

let name = "곽두팔";
let age = 77;
let addr = '제주';
	
let tableTag;
tableTag = '<table border="1">';
tableTag += '<tr>';
tableTag += '<td>'+name+'</td>';
tableTag += '<td>'+age+'</td>';
tableTag += '<td>'+addr+'</td>';
tableTag += '</tr>';
tableTag += '</table>';
	
document.write(tableTag)

물론 HTML로 만드는 것이 훨씬 편하지만…ㅋㅋㅋ

6. 증감 연산자(단항연산자)

변수의 앞, 뒤에서 사용하며 값을 1증가 또는 1감소

1. ++A 또는 –A (전위연산) : 변수의 값을 사용할때 1증가 또는 1감소 실행
2. A++ 또는 A– (후위연산) : 변수의 값을 먼저 사용하고 나서 1증가 또는 1감소 실행

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

let A = 100;
 
//1차 비교
++A;
console.log(A); // 101
A++;
console.log(A); // 102


//2차 비교
console.log('++A : ' + (++A) + ' ' + A); // 101
console.log(A); //101
console.log('A++ : ' + (A++) + ' ' + A); // 101
console.log(A); //102

//3차 비교
let temp = ++A;
console.log(temp) // 103
console.log(A) //103
temp = A++
console.log(temp) // 103
console.log(A) // 104

세미콜론의 위치때문에 1번과 2번의 값이 차이가 생겼다
++A는 A의 값을 변화시키지 않고 콘솔을 찍었고
A++은 A의 값을 1씩 더한 뒤(세미콜론찍고) 콘솔을 찍었다.
즉 변수의 값을 변하시키는 건 A++후위연산이다.

7. 비교연산자

데이터를 비교하는 연산자.
연산의 결과는 boolean 으로 나온다.
<, >, <=, >=, ==, !=, ===, !==

1
2
3
4
5
6
7
8

num1 = 10;
num2 = '10';

console.log(num1 === num2) // false
console.log(num1 == num2) // true

console.log(num1 !== num2) // true
console.log(num1 != num2) // false

왜 서로 값이 다르게 나올까?

• == : 데이터의 값만 서용해서 비교
• === : 데이터의 값 + 데이터의 타입을 모두 비교 (높은 정확도)

참고로 위의 개념은 js에만 해당됨

8. 논리연산자

총 3가지의 연산자가 있다

• && AND 두개 넣어서 AND연산자
• || 버티컬바 두개 넣어서 OR연산
• ! 느낌표 넣어서 NOT연산

논리연산자진리표를 꼭 기억해야한다.

ITWILL학원 : 2강 JS기초이론 BY 정규태강사

1. 자바스크립트

JAVA와 이름은 비슷하지만 어떠한 연관성도 없는 언어이다.
JS 특징

• 객체기반의 스크립트 프로그래밍 언어.
• C언어 기반의 문법 사용
• 넷스케이프에서 개발
• HTML 문서 내부에 포함되어 있는 기능
• 웹 브라우저를 통해서 실헹
• 인터프리터를 사용해서 실행 : 컴파일러가 필요없고 위에서 아래로 순차적 실행
• 서버의 작업처리부담을 덜어준다(클라이언트에서 처리가 되기 때문에)
• JS소스코드는 오픈소스로 누구나 코드를 볼 수 있다.(보안측면상 100% 오픈은 아님)
• 다양한 JS라이브러리를 제공한다

2. 스크립트 프로그래밍 언어란?

스크립트 언어 - 어플리케이션에 명령을 전달하기 위한 것.

• ex) sql, awk, 자바스크립트 등

3. 인터프리터언어와 컴파일러 언어란?

Compile VS Interpreter
둘 다 고급언어로 작성된 원시 프로그램(Source Program)을 목적 프로그램(Object Program)으로 번역하는 번역 프로그램이며, 프로그램 번역 방식에 따라 구분된다.

1. 컴파일

• 목적프로그램을 생성
• 번역과정과 번역시간이 복잡하고 오래 걸리지만 한번 번역 후에는 다시 번역하지 않아도되므로 실행속도 빠름
• 대표적 JAVA, C언어
• 예시: 소스코드(.java) -> 자바 컴파일 -> 바이트코드(.class) -> JVM 의 JIT 컴파일러 -> 머신코드 -> 실행

2. 인터프리터

• 목적프로그램을 생성하지않고 위에서 아래로 순차적으로 실행(웹 브라우저에 포함되어있음)
• 번역속도는 빠르지만 프로그램 실행시 매번 번역해야해서 실행속도가 느리다
• 대표적 php, PYTHON
• 예시 : 소스코드(스크립트) -> 인터프리터 -> 실행

참고링크1

참고링크2

4. JS라이브러리란?

라이브러리란 특수한 기능을 모아놓은 것을 말한다
ex) jQuery, Ajax, JSON

5. 왜 JS를 쓸까?

자바는 서버에서 사용되는 언어이다. 서버에서 처리를 한 후 돌려줘야 한다.
반면 JS는 서버가 아닌 클라이언트에서 처리된다. 그래서 서버의 부담이 줄어든다

그렇다면 전부 JS로 하면 안될까??

하지만 JS에 한계가 있기 때문에 서버의 언어와 클라이언트의 언어를 같이 사용하게 된 것이다.

6. JS 사용시 주의점

1. 항상 대/소문자 구문해서 사용한다.
   아래 코드는 같은 의미를 가지고 있는 것 같지만 출력값은 다르게 출력된다

   1 2	new Date(); New DATE();

2. 실행문을 끝낼때 항상 ;을 사용한다.
   세미콜론이 없이 실행가능할 수 있지만 실행중에 문제가 발생할 수도 있기에 붙이는 것을 권장한다

3. 사용자(개발자)의 편의성을 위해 한 줄에 하나의 문장을 작성한다.

4. 큰 따옴표와 작은 따음펴 사용에 주의한다

• 자바의 경우, ""는 String만 가능, ''는 char만 가능
• js의 경우, 구분없이 다 사용가능하고 항상 짝으로 사용하면 된다.

  1 2	// ex) document.write('안녕하세요 |'js|'입니다')

5. 마우스를 사용할 수 없는 환경에 대한 고려를 해야한다.(키보드 접근성 준수)

7. 변수

1. 변수란 무엇일까?
   하나의 공간에 하나의 데이터만 저장하는 공간(메모리)이다

만약 하나의 공간에 다른 데이터를 추가적으로 넣게되다면?
새로운 데이터가 들어올 시 기존 데이터에 덮어쓰여지게 된다.

저번시간에 꼭 기억해야하는 한 문장이 있다고 했다
바로 모든 프로그램은 주기억장치에서만 실행된다!

2. 변수의 종류는 크게 아래와 같다

• 문자형데이터(String) : 문자 또는 숫자를 (“”)(‘’)표현한 데이터.
  • 만약 document.write(‘100’+200+300)이라면 출력값은 어떻게 될까?
  • 100500이라고 답했다면 땡! 정답은 100200300이다.
• 숫자형(Number) : 변수에 숫자만 저장되는 데이터.
• 논리형(Boolean)
• Null : 비워진 데이터 값

3. 변수를 사용하기 위해서는 아래와 같이 세 가지의 동작이 필요하다
   1. 변수를 선언
   2. 변수를 초기화
   3. 변수를 사용

다만 경우에 따라서는 1번 선언과 2번 초기화를 같이 진행할 수도 있다.
- 변수 선언만 한 경우 : var 변수명;
- 선언과 초기화 같이 하는 경우 : var 변수명 = 값;

8. 변수 선언 후 초기화를 안한다면?

아래를 출력하면 언디파인드가 뜨는데 consol창에는 아무메세지도 나타나지않는다
즉 에러가 아니다

1
2
3
4
5
6

let tmp
document.write(tmp);


//출력값은
undefined

왜 이런 현상이 일어날까?

메모리가 할당된 tem안에 값이 없기때문에?

땡!

tem안에 값이 있는지 없는지 모르기때문에!

이게 무슨 양자역학같은 소리냐면…

메모리는 유한하다. 8기가나 16기가 등등.
컴퓨터는 여러 작업을 하면서 한정된 메모리안에서 데이터를 썼다가 지웠다가를 반복한다.
재사용된 메모리위치에 아직 쓰레기값이 들어있을 수도 있다.
내가 대입하지 않았더라도 어떤 쓰레기값이 들어가 있을수있기때문에 undefined가 나온 것이다.
따라서 변수선언 후에는 항상 초기화를 해줘야된다.

9. 객체타입

var타입은 객체타입이라고 한다. 모든 타입을 저장할 수 있다.
비교하자면, java의 변수선언은 정수인 경우 int num = 1이라고 하지만 js는 데이터타입을 정의하지않고 변수를 선언할 수 있다.

ES2020 초급 웹게임 강좌 : 계산기

1. 값을 초기화를 하려면 보통 null이나 undefined 사용.

초보자는 null추천

1
2
3
4
5
6

clearbtn.addEventListener('click', ()=>{ //clearbtn클릭시 초기화
    numberInput.value = null;
    temp = null ;
    operator = null;
    resultInput.value = null;
})

2. Number 와 String의 사칙연산

숫자와 문자열을 더하면(+) 숫자가 문자열로 바뀌어서 계산됨
ex) 10 + ‘5’ = ‘105’ (결과값이 문자열)

숫자와 문자열을 곱하기,빼기,나누기는 문자열이 숫자로 바뀌어서 계산됨
ex) 10 / ‘5’ = 2 , ‘10’ * 5 = 50 , ‘10’ - ‘5’ = 5 (결과값이 숫자)

3. Falsy 값을 가지는 6가지 (암기필수)

There are only six falsey values in JavaScript:
undefined , null , NaN , 0 , “” (empty string), and false.