JavaScript
Core-JS
3. 연산자
산술 연산자.html
<!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>
<script>
console.log(27 % 5);
var num = 3;
console.log(num ** 3); // ES7 문법
console.log(Math.pow(num, 3)); // ES7 이전
// 단항 산술 연산자
var x = 3;
x++;
++x;
x--;
console.log('x: ' + x);
// 전위 (prefix), 후위 (postfix) 연산
var a = 10, result;
result = a++; // 선연산 후증감
console.log(`result: ${result}, a: ${a}`);
result = ++a; // 선증감 후연산
console.log(`result: ${result}, a: ${a}`);
</script>
</body>
</html>제곱 연산 등의 방법이 ES7 이전/이후로 나뉨
전위, 후위 증감 연산의 경우 다른 어너를 배웠었으니 잘 알고 있을 것임
비교연산자.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
var a = 5, b = '5';
console.log(a == b);
console.log(a === b);
// 동등 비교 시에는 결과 예측이 힘드므로 조심하는것이 좋음.
console.log ('0' == ''); // 변환 안함. (둘 다 문자열, 한쪽이 숫자가 아님)
console.log (0 == ''); // 여기서의 0은 비어있다는 뜻
console.log (0 == '0');
console.log (NaN === NaN); // 단순히 이름만 같을 뿐, 표현할 수 없는 값을 의미하므로 false 출력됨
// 문자열 비교
console.log ('apple' === 'APPLE');
console.log ('peach' < 'zebra');
console.log ('ZEBRA' > 'apple'); // true 를 예상하겠지만 유니코드 번호에 따르므로 a가 Z보다 더 큼.
</script>
</body>
</html>- == 연산자 : 암묵적으로 문자열 내부에 숫자가 있는 경우 자동으로 숫자로 변환 후 비교
- === 연산자 : 타입까지 일치하는지 비교
NaN은 자신과 일치하지 않는 유일한 값임
브라우저 입출력.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
// 브라우저에서만 지원하는 함수
var num1 = +prompt('첫번째 숫자 입력!');
var num2 = +prompt('두번째 숫자 입력!');
// alert 함수 이용 시 브라우저에 알림창 띄우기 가능
alert(`입력한 숫자의 합: ${num1 + num2}`);
</script>
</body>
</html>prompt() 쓸 때 앞에 + 를 써주지 않으면 문자열 형태로 들어가서 1+2 같은 연산을 시켰을 때 12 라는 출력 결과를 볼 수 있음.
왜냐하면 프롬프트는 입력 결과를 문자열로 반환하기 때문인데, Number() 를 사용하거나 앞서 보여준 + 를 사용하면 된다.
삼항조건연산자.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
var score = 70;
var result = score >= 60 ? '합격' : '탈락';
console.log('시험결과 : ' + result);
/*
가지고 있는 돈 액수를 입력받아
액수가 5000 이상인 경우 '김치찌개'
액수가 5000 미만인 경우 '라면' 을 저장하고
alert로 선택된 음식 출력
*/
var money = +prompt('가진 돈의 액수를 입력하세요!');
var food = money >= 5000 ? '김치찌개' : '라면';
alert(food);
</script>
</body>
</html>4. 조건문
조건문.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
var num1 = 1;
var num2 = 2;
if (num1 > num2) {
console.log(true);
} else {
console.log(false);
}
var point = +prompt('점수를 입력하세요 : ');
alert('당신의 점수 : ' + point + '점');
if (point >= 90) {
if (point >= 95) {
alert('A+ 학점입니다.');
} else {
alert('A 학점입니다.');
}
} else if (point >= 80) { // 일일히 F까지 만드려니 귀찮아서 생략
alert('B 학점 혹은 그 이하입니다.')
}
</script>
</body>
</html>기존의 다른 언어에서 배웠던 if 조건문들과 크게 다를바가 없으므로 자세한 설명은 생략
5. 반복문
반복문.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
// Math.random() : 0.0 이상 1.0 미만의 랜덤값 생성 메서드
// 1 ~ 10 까지 합 구하기
var total = 0;
var n = 1; // begin
/*
while (n <= 10) {
total += n;
n++;
}
*/
for (var i = 1; i <= 10; i++) {
total += i;
}
console.log(total);
</script>
</body>
</html>이쪽도 다른 언어와 동일하기 때문에 생략
연습문제.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
var num1, num2, answer, operator, operator_char;
var right = 0;
var wrong = 0;
var flag = true;
while (flag) {
num1 = Math.floor((Math.random() * 20) + 1);
num2 = Math.floor((Math.random() * 20) + 1);
operator = Math.floor((Math.random() * 3) + 1);
switch (operator) {
case 1:
operator_char = '+';
answer = num1 + num2;
break;
case 2:
operator_char = '-';
answer = num1 - num2;
break;
case 3:
operator_char = '*';
answer = num1 * num2;
break;
default:
alert('What just happened?');
}
var input = prompt(`${num1} ${operator_char} ${num2} 정답 입력 : `);
if (input == '그만') {
flag = false;
} else if (+input == answer) {
alert('정답입니다!');
right++;
} else {
alert('오답입니다!');
wrong++;
}
}
alert(`정답 : ${right}회 오답 : ${wrong}회`);
</script>
</body>
</html>6. 타입캐스팅
암묵적 변환.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
var ex = 10 + '20'; // 1020
console.log('ex : ' + ex);
ex = 10 * '3'; // 30
console.log('ex : ' + ex);
var ex2 = 100 + ''; // '100'
console.log(ex2 + ' ' + typeof ex2); // 100 string
// 문자열 타입의 암묵적 숫자 변환
ex2 = + '550';
console.log(ex2 + ' ' + typeof ex2); // 550 number
// 논리 타입의 암묵적 숫자 변환
ex2 = +true;
console.log(ex2 + ' ' + typeof ex2); // 1 number
</script>
</body>
</html>명시적 변환.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
// 문자열이 아닌 값을 문자열로 변환하는 법.
var a = 10, b = 20;
var result = a + String(b); // 생성자 통해 처리
result = a.toString() + b.toString(); // 메서드를 통해 처리
console.log(result);
// 숫자가 아닌 값을 숫자타입으로 변환하는 방법.
var m = '10', n = '3.14';
result = Number(m) + Number(n);
result = parseInt(m) + parseFloat(n);
console.log(result);
// 논리 타입이 아닌 값을 논리 타입으로 변환하는 법.
var t = 'Hello', f = '';
console.log(Boolean(t)); // true
console.log(Boolean(f)); // false
console.log(!!'hello'); // 논리 부정 연산자 두 번 쓰면 변환 가능
</script>
</body>
</html>truthy, falsy.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
// undefined, null, 0, NaN, ''(빈문자열)은 모두 false
// 이외엔 true로 판단
if('') console.log('OK1'); // false
if('hello') console.log('OK2');
if(undefined) console.log('OK3'); // false
if(null) console.log('OK4'); // false
if(350) console.log('OK5');
if(NaN) console.log('OK6'); // false
if(0) console.log('OK7'); // false
if([1, 2, 3]) console.log('OK8');
</script>
</body>
</html>7. 배열
array-basic.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
// 배열의 생성
var fruits = ['딸기', '포도', '복숭아', '사과'];
// 배열의 길이 확인
console.log('배열의 길이 : ' + fruits.length);
// 배열 데이터 수정
fruits[1] = '수박';
console.log(fruits);
// 배열 데이터 추가
fruits[4] = '파인애플';
console.log(fruits);
console.log('배열의 길이 : ' + fruits.length);
// 배열 요소 참조
var apple = fruits[3];
// 배열의 반복문 처리
for (var i = 0; i < fruits.length; i++) {
console.log(`${i + 1} 번째 과일 : ${fruits[i]}`);
}
</script>
</body>
</html>for-of.html
향상 for문과 매우 유사함
<!DOCTYPE html>
<html lang="en">
<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>
<script>
var week = ['월', '화', '수', '목', '금', '토', '일'];
// for-of 는 배열의 값을 얻어낼 때 사용. (객체에서는 사용 불가)
// 자바의 forEach문과 유사
for (var day of week) {
console.log(day + '요일');
}
console.log('=================');
// 인덱스를 얻고 싶으면 in, 값을 얻을 땐 of
// for-in은 배열이나 객체의 index 혹은 key값을 변수에 저장.
for (var d in week) {
console.log(d + '요일');
}
</script>
</body>
</html>array-2d.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
// 우리반 학생들 4과목 점수(국영수탐)
var our_student_scores = [
[91, 100, 92, 93],
[90, 80, 100, 70],
[30, 40, 50, 35],
[10, 20, 10, 30]
]
console.log(our_student_scores);
console.log(our_student_scores[2]);
console.log(our_student_scores[0][1]);
// 우리반 한 학생의 평균의 총합을 저장할 변수
var our_averages = 0;
for (var student_scores of our_student_scores) {
var each_total = 0; // 한 학생의 4과목 총점
for (var score of student_scores) {
each_total += score;
}
// 한 학생의 평균점수 구하기
var each_avg = each_total / student_scores.length;
our_averages += each_avg;
}
var class_avg = our_averages / our_student_scores.length;
console.log('우리반 평균 : ' + class_avg + '점');
</script>
</body>
</html>push, shift.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
var foods = ['볶음밥', '닭강정', '피자'];
console.log(foods);
// pop : 배열의 마지막 요소 제거 후 제거한 요소 반환
var last_element = foods.pop();
console.log(last_element);
console.log(foods);
// push : 배열의 끝에 요소를 추가
foods.push('파스타');
foods.push('족발');
console.log(foods);
// shift : 배열의 맨 첫번째 요소를 제거 후 제거한 요소 반환
var first_element = foods.shift();
console.log(first_element);
console.log(foods);
// unshift : 배열의 맨 첫번째 위치에 요소를 추가
foods.unshift('떡볶이');
console.log(foods);
</script>
</body>
</html>etc.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
var foods = ['떡볶이', '오뎅', '김말이', '닭꼬치'];
// indexOf() : 배열 요소의 인덱스를 알려줌
// 찾는 요소가 없는 경우 -1 리턴
var idx = foods.indexOf('김말이');
console.log('찾은 인덱스 : ' + idx);
// includes() : 배열 요소의 존재 확인
var result = foods.includes('김말이');
console.log('탐색 결과 : ' + result);
console.log('=============================');
// slice() 배열을 잘라냄
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var sliced_arr = arr.slice(3, 7); // 3 이상 7 미만 (3~6)
console.log(sliced_arr);
// reverse() : 배열을 역순으로 배치
var copy_arr = arr.slice(0); // 전체 범위(원본 복사);
copy_arr.reverse();
console.log(copy_arr);
console.log('==============================');
// concat() : 배열을 결합
var arr1 = [10, 20, 30];
var arr2 = [100, 200, 300];
var concated_arr = arr1.concat(arr2);
console.log(concated_arr);
</script>
</body>
</html>splice.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
// splice() : 배열의 특정 요소를 제거
var foods = ['떡볶이', '오뎅', '김말이', '닭꼬치'];
console.log(foods);
var del_food = foods.splice(1, 2);
console.log(del_food);
console.log(foods);
// 단순히 값만 삭제하는 것이 아니라 삭제한 곳에 값을 추가할 수도 있음
foods.splice(0, 1, '치킨', '파스타'); // 떡볶이를 빼고 그 자리에 치킨, 파스타 추가
console.log(foods);
// 2번 인덱스부터 0개를 지우고, '피자' 를 추가할 것 (삭제 없이 데이터 추가)
foods.splice(2, 0, '피자');
console.log(foods);
// 개수 미 지정 시, 지정한 인덱스 이후의 요소는 전부 삭제
foods.splice(2);
console.log(foods);
foods.push('보쌈', '닭발');
var input = '보쌈';
var idx = foods.indexOf(input);
if (idx >= 0) {
foods.splice(idx, 1);
console.log('삭제 완료!');
} else {
console.log('데이터가 없습니다.');
}
</script>
</body>
</html>arr-quiz.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
/*
- Quiz.
아래 요구사항에 맞는 코드를 작성하고
브라우저에서 실행하여 테스트하세요.
- 요구사항
1. kakao 변수에 배열
['무지', '네오', '어피치', '라이언', '제이지']
을 저장하세요.
2. 사용자에게 삭제할 멤버 이름을 입력받고
해당 멤버를 배열에서 삭제시킨 뒤
삭제 완료 후의 배열을 출력해서 보여주세요.
3. 배열에 없는 이름을 입력하면 'xxx는 잘못된 이름입니다.'라고
출력한 후 다시 삭제할 이름을 입력할 수 있도록 하세요.
4. 1명을 정확하게 삭제할 때까지 프로그램은 계속되어야 합니다.
*/
var kakao = ['무지', '네오', '어피치', '라이언', '제이지'];
var flag = false;
while (!flag) {
var input = prompt(`현재 멤버 : ${kakao} 중\n삭제할 이름 입력 : `);
var idx = kakao.indexOf(input);
if (idx >= 0) {
kakao.splice(idx, 1);
alert('성공적으로 삭제되었습니다!');
flag = true;
} else {
alert(`${input} 은(는) 잘못된 이름입니다.`);
}
}
for (var name of kakao) {
console.log(name);
}
</script>
</body>
</html>8. 객체
basic.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
// 객체 생성
var dog = {
name : '뽀삐',
kind : '시츄',
age : 3,
favorite : ['산책', '간식']
};
var cat = {
name : '야옹이',
kind : '페르시안',
age : 2,
favorite : ['낮잠', '츄르', '실뭉치']
};
console.log(typeof cat);
// 객체 프로퍼티 (= 필드, 멤버변수) 참조
console.log(dog.name);
console.log(cat.name);
console.log(dog.age);
console.log(cat.favorite[1]);
dog.favorite.push('꼬리흔들기');
console.log(dog.favorite);
console.log('===========================');
// 프로퍼티를 참조하는 다른 방식
console.log(dog['kind']);
// 프로퍼티 값 수정
dog.age = 5;
cat.favorite[1] = '고등어';
console.log(dog.age);
console.log(cat.favorite);
console.log('===========================');
// 프로퍼티 동적 추가
dog.owner = '김철수'; // 이런 식으로 없던 프로퍼티도 추가 가능
console.log(dog);
// 프로퍼티 삭제
delete dog.owner;
console.log(dog);
console.log('===========================');
// for ~ in (ES6 이후)
for (var key in cat) {
// console.log(cat.key); <- 이렇게 하면 undefined 되면서 안나옴
console.log(cat[key]);
}
console.log('===========================');
// 객체의 프로퍼티 키의 존재 유무 확인 (in 키워드)
var flag = 'kind' in cat;
console.log(flag);
</script>
</body>
</html>quiz1.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
/*
Q1. 아래 문제를 각각 풀어보세요.
1. 빈 객체 user를 만듭니다.
2. user에 키가 name, 값이 John인 프로퍼티를 동적 추가하세요.
3. user에 키가 surname, 값이 Smith인 프로퍼티를 동적 추가하세요.
4. name의 값을 Pete로 수정해보세요.
5. user에서 프로퍼티 name을 삭제하세요.
------------------------------------------------------------------
Q2. 모든 팀원의 월급에 대한 정보를 담고있는
객체가 있다고 가정해 봅시다.
변수 이름: salaries, 세명의 월급 정보를 직접 작성하세요.
- 모든 팀원의 월급을 합한 값을 구하고,
그 값을 변수 total에 저장해 주는 코드를 작성 후
평균 월급을 구해 보세요.
*/
// Q1.
var user = new Object();
user.name = 'John';
user.surname = 'Smith';
console.log(`${user.name} ${user.surname}`);
user.name = 'Pete';
delete user.name;
console.log(user);
// Q2.
var salaries = {
kim : 10000,
park : 20000,
lee : 15000
};
var total = 0;
for (var key in salaries) {
total += salaries[key];
}
console.log('급여 총합 : ' + total + '원');
var avg = total / 3;
console.log('급여 평균 : ' + avg + '원');
</script>
</body>
</html>quiz2.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
/*
Q. 회원의 아이디정보와 비밀번호 정보가 들어있는
객체 user가 있습니다.
아래 요구사항에 맞는 프로그램을 작성하고
브라우저에서 테스트하세요.
var user = {
kim1234:'kkk1234',
lee4567:'lll4567',
park9876:'ppp9876'
}
- 요구사항
1. 사용자에게 아이디를 입력받으세요.
2. 입력된 아이디가 객체에 존재하는 key가 아니라면
"존재하지 않는 회원입니다"를 출력하세요.
3. 아이디가 존재한다면 비밀번호를 입력받으세요.
4. 비밀번호가 입력한 아이디에 대응해서 일치한다면
"로그인 성공"을 출력하고 반복문을 탈출하세요.
5. 비밀번호가 다르다면 "비밀번호가 틀렸습니다" 를 출력하세요.
6. 로그인이 성공할때까지 반복하세요.
*/
var user = {
kim1234:'kkk1234',
lee4567:'lll4567',
park9876:'ppp9876'
}
while (true) {
var input_id = prompt('아이디를 입력하세요 : ');
if (input_id in user) {
var input_pw = prompt('비밀번호를 입력하세요 : ');
var real_pw = user[input_id];
if (input_pw === real_pw) {
alert('로그인 성공!');
break;
} else {
alert('비밀번호가 틀렸습니다.');
}
} else {
alert('아이디가 존재하지 않습니다.');
}
}
</script>
</body>
</html>in 키워드 사용해서 편하게 진행 가능.
있으면 if 탈 테고 아니면 안 탈 테니 그렇게 먼저 판단해 놓고, 입력된 비밀번호와 일치하는 아이디의 비밀번호가 완전히 일치하는지 === 로 체크 후 로그인 성공 실패를 판단한다.
9. 함수
basic.html
<!DOCTYPE html>
<html lang="en">
<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>
<script>
// 함수 정의
// 함수 이름은 동사적 기능이 내포되게 짓는다.
function calcTotal(x) {
console.log('함수가 호출됨!');
var total = 0;
for (var n = 1; n <= x; n++) {
total += n;
}
return total;
}
function add(n1, n2) {
return n1 + n2;
}
// 함수 리터럴
// 이름이 없는 함수를 변수에 담아서 호출
var add2 = function(n1, n2) {
return n1 + n2;
}
// 화살표 함수 (ES6)
// var add3 = (n1, n2) => n1 + n2; 이렇게 코드가 한줄인 경우는 많은 부분을 생략 가능
var add3 = (n1, n2) => {
return n1 + n2;
}
console.log(calcTotal(10));
var result = calcTotal(50);
console.log(result);
console.log(add(1, 2));
console.log(add2(10, 20));
console.log(add3(100, 200));
// 함수를 변수에 할당할 수 있다.
var ct = calcTotal;
var result2 = ct(200);
console.log(result2);
</script>
</body>
</html>