파일이름 : 001.html
<!DOCTYPE html>
<html>
<head>
<title>001.html</title>
</head>
<body>
<h1 id="one">hello</h1>
<script>
var name = '이호준';
var age = 10;
document.write(name);
/*
document.write('<br>');
document.write(age);
window.alert(name);
console.log(name);
*/
document.getElementById('one').innerHTML = 'hello javascript!'
</script>
</body>
</html>
파일이름 : 002.html
<!DOCTYPE html>
<html>
<head>
<title>002.html</title>
</head>
<body>
<script>
//변수//문자와 숫자, 기호$와 _만 사용
//첫 글자가 숫자가 될 수 없습니다.
//대소문자는 구별, 예약어는 사용할 수 없습니다.
var 변수하나 = 20;
var 변수둘 = 10;
var 변수셋 = 2;
document.write('변수하나 : ', 변수하나);
document.write('<br>');
document.write('변수둘 : ', 변수둘);
document.write('<br>');
document.write('변수셋 : ', 변수셋);
document.write('<br>');
document.write('변수하나+변수둘 : ', 변수하나+변수둘);
document.write('<br>');
document.write('변수하나-변수둘 : ', 변수하나-변수둘);
document.write('<br>');
document.write('변수하나/변수둘 : ', 변수하나/변수둘);
document.write('<br>');
document.write('변수하나*변수둘 : ', 변수하나*변수둘);
document.write('<br>');
document.write('변수하나**변수셋 : ', 변수하나**변수셋);
document.write('<br>');
document.write('변수하나%변수셋 : ', 변수하나%변수셋);
//ES6
const 이름 = '이호준';
const 소속 = '제주코딩베이스캠프 운영진입니다.'
let 주소 = '서울';
주소 = '제주';
document.write(이름, '<br>');
document.write(소속, '<br>');
document.write(주소, '<br>');
document.write(소속[2], '<br>');
document.write(소속[3], '<br>');
</script>
</body>
</html>
파일이름 : 003.html
<!DOCTYPE html>
<html>
<head>
<title>003.html</title>
</head>
<body>
<script>
//연산var x, y, z;
x = 5;
y = 9;
y++; //10
x--; //4
--x; //3
++x; //4
x = x + 2; //6
x += 2; //8
document.write(x, '<br>');
x *= 2; //16
document.write(x);
var 이름 = '이호준';
var 나이 = 10;
document.write('제 이름은 ' + 이름 + ' 제 나이는 ' + 나이 + '입니다.')
document.write(`제 이름은 ${이름}입니다. 제 나이는 ${나이+나이} 입니다.`)
</script>
</body>
</html>
파일이름 : 004.html
<!DOCTYPE html>
<html>
<head>
<title>004.html</title>
</head>
<body>
<script>
var x, y, z;
x = 10;
y = 20;
z = '10';document.write(x > y, '<br>');
document.write(x < y, '<br>');
document.write(x >= y, '<br>');
document.write(x <= y, '<br>');
document.write(`x == z : ${x == z} <br>`);
document.write(`x === z : ${x === z} <br>`);
document.write(`x != y : ${x != y} <br>`);
document.write(`x != 10 : ${x != 10} <br>`);
// document.write(x < y, '<br>');
// document.write(x >= y, '<br>');
// document.write(x <= y, '<br>');
</script>
</body>
</html>
파일이름 : 005.html
<!DOCTYPE html>
<html>
<head>
<title>005.html</title>
</head>
<body>
<script>
// 논리연산
// and, or, not
// and = 곱
// or = 합
// true = 1
// false = 0document.write(`true || true : ${true || true} <br>`);
document.write(`true || false : ${true || false} <br>`);
document.write(`false || true : ${false || true} <br>`);
document.write(`false || false : ${false || false} <br>`);
document.write(`true && true : ${true && true} <br>`);
document.write(`true && false : ${true && false} <br>`);
document.write(`false && true : ${false && true} <br>`);
document.write(`false && false : ${false && false} <br>`);
document.write(`!true : ${!true} <br>`);
document.write(`!false : ${!false} <br>`);
let x = 15
document.write(`x % 3 == 0 || x % 5 == 0 : ${x % 3 == 0 || x % 5 == 0} <br>`);
</script>
</body>
</html>
파일이름 : 006.html
<!DOCTYPE html>
<html>
<head>
<title>006.html</title>
</head>
<body>
<script>
// document.write(10 + 10);
// document.write('10' + '10');document.write(`typeof(5) : ${typeof(5)} <br>`);
document.write(`typeof(5.5) : ${typeof(5.5)} <br>`);
document.write(`typeof('5') : ${typeof('5')} <br>`);
document.write(`typeof('leehojun') : ${typeof('leehojun')} <br>`);
document.write(`typeof(x) : ${typeof(x)} <br>`);
document.write(`typeof(undefined) : ${typeof(undefined)} <br>`);
document.write(`typeof([1, 2, 3, 4]) : ${typeof([1, 2, 3, 4])} <br>`);
document.write(`typeof({'one':'하나', 'two':'둘'}) : ${typeof({'one':'하나', 'two':'둘'})} <br>`);
function js(){
}
document.write(`typeof(js) : ${typeof(js)} <br>`);
document.write(`typeof(js / 2) : ${typeof(js / 2)} <br>`);
document.write(js / 2, '<br>');
document.write(`typeof('1'+1) : ${typeof('1' + 1)} <br>`);
document.write('1' + 1, '<br>');
document.write(`typeof('leehojun' / 3) : ${typeof('leehojun' / 3)} <br>`);
document.write('leehojun' / 3, '<br>');
document.write(`typeof(true) : ${typeof(true)} <br>`);
let test = null;
document.write(typeof(test), '<br>');
</script>
</body>
</html>
파일이름 : 006_1.html
<!DOCTYPE html>
<html>
<head>
<title>006_1.html</title>
</head>
<body>
<script>
// document.write(10 + 10);
// document.write('10' + '10');
let one = 1;
document.write(`<p> one + one : ${one + one} </p>`);
document.write(`<p> String(one) + String(one) : ${String(one) + String(one)} </p>`);
let two = '2';
document.write(`<p> two + two : ${two + two} </p>`);
document.write(`<p> Number(two) + Number(two) : ${Number(two) + Number(two)} </p>`);
let three = two + two;
document.write(`<p> typeof(three) : ${typeof(three)} </p>`);
document.write(`<p> Boolean(-1) : ${Boolean(-1)} </p>`);
document.write(`<p> Boolean(0) : ${Boolean(0)} </p>`);
document.write(`<p> Boolean(' ') : ${Boolean(' ')} </p>`);
document.write(`<p> Boolean('') : ${Boolean('')} </p>`);
document.write(`<p> Boolean([]) : ${Boolean([])} </p>`);
document.write(`<p> Boolean([0]) : ${Boolean([0])} </p>`);
document.write(`<p> Boolean('0') : ${Boolean('0')} </p>`);
</script>
</body>
</html>
파일이름 : 007.html
<!DOCTYPE html>
<html>
<head>
<title>007.html</title>
</head>
<body>
<button type="button" onclick="test();"name="button">클릭!!</button>
<script>
//함수function circleWidth(r){
let width = r*r*3.14;
return undefined;
}
document.write(circleWidth(10));
function test(){
document.write('hello world!!');
}
</script>
</body>
</html>
파일이름 : 007_1.html
<!DOCTYPE html>
<html>
<head>
<title>007_1.html</title>
</head>
<body>
<script>
//지역변수 전역변수
let z = 100;
function sum(x){ //x는 매개변수(parameter)이면서 지역변수(local val)
let y = 50; //y는 지역변수
z = z + y;
return x + y;
}
document.write(sum(10));//10은 전달인자(argument)
document.write('<br>');
document.write(z);
//키워드로 인해 전역, 지역이 갈리는 것은 아닌지, let, var, const 모두 테스트 필요
</script>
</body>
</html>
파일이름 : 007_2.html
<!DOCTYPE html>
<html>
<head>
<title>007_2.html</title>
</head>
<body>
<script>
function sum(x, y){
return x + y;
}
let sumArrowFunction = (x, y) => x + y;
document.write(sum(10, 20));
document.write('<br>');
document.write(sumArrowFunction(10, 20));
</script>
</body>
</html>
파일이름 : 007_3.html
<!DOCTYPE html><html>
<head>
<title>007_3.html</title>
</head>
<body>
<script>
// 함수 선언문function sum(x, y){
return x + y;
}
//함수 표현식
let sumXY = function(x, y){
return x + y;
};
// let x = 10;
// let y = x;
let sumXYcopy = sumXY;
document.write(sumXYcopy(10, 20), '<br>');
//콜백함수
function sum(x, y, c){
c(x + y);
return x + y;
}
function documentWrite(s){
document.write('콜백함수', s);
}
sum(10, 20, documentWrite);
</script>
</body>
</html>
파일이름 : 008.html
<!DOCTYPE html>
<html>
<head>
<title>008.html</title>
</head>
<body>
<script>
function sum(x, y){
return x + y;
}
//object
let person = {
//key: value
name: '이호준',
age: 10,
height : 30,
weight : 40,
이력 : {'첫번째직장' : '하나', '두번째직장' : '둘'},
기능 : sum
}
person.소속 = '바울랩';document.write(`제 이름은 ${person.name} 입니다. <br>`);
document.write(`제 나이는 ${person.age} 입니다. <br>`);
document.write(`제 키는 ${person.height} 입니다. <br>`);
document.write(`제 이름은 ${person['name']} 입니다. <br>`);
document.write(`제 나이는 ${person['age']} 입니다. <br>`);
document.write(`제 키는 ${person['height']} 입니다. <br>`);
document.write(`제 소속는 ${person['소속']} 입니다. <br>`);
document.write(`제 이력은 ${person['이력']['첫번째직장']} 입니다. <br>`);
document.write(`제 기능은 ${person['기능'](10, 20)} 입니다. <br>`);
</script>
</body>
</html>
파일이름 : 009.html
<!DOCTYPE html>
<html>
<head>
<title>009.html</title>
</head>
<body>
<script>
//array
// let 과일 = ['사과', '수박', '복숭아', '딸기', '바나나'];
// let 과일 = new Array(5);
let 과일 = new Array('사과', '수박', '복숭아', '딸기', '바나나');document.write(`${과일} <br>`);
document.write(`${과일[0]} <br>`);
document.write(`${과일[2]} <br>`);
</script>
</body>
</html>
파일이름 : 009_1.html
<!DOCTYPE html><html>
<head>
<title>009_1.html</title>
</head>
<body>
<script>
//array의 내장함수
let 과일 = ['사과', '수박', '복숭아', '딸기', '바나나'];
let 과일선물 = ['체리', '멜론'];document.write(`과일 : ${과일} <br>`);
let 꺼낸과일 = 과일.pop()
document.write(`과일.pop() : ${꺼낸과일} <br>`);
document.write(`과일 : ${과일} <br>`);
document.write(`과일.push() : ${과일.push(꺼낸과일)} <br>`);
document.write(`과일 : ${과일} <br>`);
document.write(`------------------ <br>`);
let 문자열 = 과일.toString()
document.write(`과일.toString()[1] : ${문자열[1]} <br>`);
document.write(`과일.join('!!*') : ${과일.join('!!*')} <br>`);
document.write(`과일.shift() : ${과일.shift()} <br>`);
document.write(`과일.unshift() : ${과일.unshift('호준')} <br>`);
document.write(`과일 : ${과일} <br>`);
document.write(`과일.splice(1, 0, '한라봉') : ${과일.splice(1, 0, '한라봉')} <br>`);
document.write(`과일 : ${과일} <br>`);
document.write(`과일.slice(1, 3) : ${과일.slice(1, 3)} <br>`);
document.write(`과일 : ${과일} <br>`);
document.write(`과일.concat(과일선물) : ${과일.concat(과일선물)} <br>`);
document.write(`과일 : ${과일} <br>`);
document.write(`과일.sort() : ${과일.sort()} <br>`);
document.write(`과일 : ${과일} <br>`);
document.write(`과일.reverse() : ${과일.reverse()} <br>`);
document.write(`과일 : ${과일} <br>`);
document.write(`['1', '11', '2', '22'].sort() : ${['1', '11', '2', '22'].sort()} <br>`);
document.write(`['1', '11', '2', '22'].length : ${['1', '11', '2', '22'].length} <br>`);
</script>
</body>
</html>
파일이름 : 009_2.html
<!DOCTYPE html>
<html>
<head>
<title>009_2.html</title>
</head>
<body>
<script>
// 다차원 배열
let 전교점수 = [
// 1반
[[10, 20, 30, 40, {name:'leehojun', age:10}],
[20, 30, 40, 50, 60]],
// 2반
[[10, 20, 30, 40, 50],
[20, 30, 40, 50, 60]],
]; // document.write(전교점수[0][1][4]['age']);
// matrix
let m = [[1, 2, 3],
[1, 2, 3],
[1, 2, 3]]
document.write(m + m);
</script>
</body>
</html>
파일이름 : 010.html
<!DOCTYPE html>
<html>
<head>
<title>010.html</title>
</head>
<body>
<script>
// String
let txt = 'ABCDEFGHIJKABC';
let txt_two = 'mom said \'hello world\'';document.write(`txt : ${txt} <br>`);
document.write(`txt.length : ${txt.length} <br>`);
document.write(`txt[1] : ${txt[1]} <br>`);
document.write(`txt_two : ${txt_two} <br>`);
document.write(`txt.indexOf : ${txt.indexOf("F")} <br>`);
document.write(`txt.search : ${txt.search("FGH")} <br>`);
document.write(`txt.lastIndexOf : ${txt.lastIndexOf("Z")} <br>`);
document.write(`txt.slice(0, 3) : ${txt.slice(0, 3)} <br>`);
document.write(`txt.substring(0, 3) : ${txt.substring(0, 3)} <br>`);
document.write(`txt.substr(2, 5) : ${txt.substr(2, 5)} <br>`);
//정규표현식에서 한 번 더 다뤄드립니다.
document.write(`txt.replace('ABC', 'hojun') : ${txt.replace(/ABC/g, 'hojun')} <br>`);
document.write(`txt.toUpperCase() : ${txt.toUpperCase()} <br>`);
document.write(`txt.toLowerCase() : ${txt.toLowerCase()} <br>`);
</script>
</body>
</html>
파일이름 : 010_1.html
<!DOCTYPE html><html>
<head>
<title>010_1.html</title>
</head>
<body>
<script>
// String
let txt = 'ABCDEFGHIJKABC';document.write(txt.includes('ABC'), '<br>');
document.write(txt.startsWith('BCD'), '<br>');
document.write(txt.endsWith('AB'), '<br>');
document.write(txt.indexOf('AB', 3), '<br>');
</script>
</body>
</html>
파일이름 : 011.html
<!DOCTYPE html><html>
<head>
<title>011.html</title>
</head>
<body>
<script>
// Number
// let number = 1e9;
// let number = 123e-5;
// let number = 1.23e9;
// let number = 0b1010; //0, 1 -> 10
// let number = 0o12; //0 ~ 7 -> 10
// let number = 0xff; //0 ~ f -> 10
// let number = parseInt('13', 10)
let number = parseFloat('13.3px.10', 10)document.write(number, '<br>');
document.write(0.1 + 0.2 == 0.3, '<br>');
document.write(9999999999999999999, '<br>');
</script>
</body>
</html>
파일이름 : 011_1.html
<!DOCTYPE html>
<html>
<head>
<title>011.html</title>
</head>
<body>
<script>
// Number 관련 함수
let n = 10000;
let nFloat = 10000.123123123;
let s = '10,000,000';document.write(`n : ${n} <br>`);
document.write(`n.toLocaleString() : ${n.toLocaleString()} <br>`);
document.write(`s : ${s} <br>`);
document.write(`s.replace(/,/g, '') : ${s.replace(/,/g, '')} <br>`);
document.write(`parseInt(s, 10) : ${parseInt(s, 10)} <br>`);
document.write(`n.toFixed(10) : ${n.toFixed(10)} <br>`);
document.write(`nFloat.toFixed(3) : ${nFloat.toFixed(3)} <br>`);
document.write(`nFloat.toExponential(4) : ${nFloat.toExponential(4)} <br>`);
document.write(`Number(true) : ${Number(true)} <br>`);
document.write(`Number(false) : ${Number(false)} <br>`);
document.write(`Number('') : ${Number('')} <br>`);
document.write(`Number(' ') : ${Number(' ')} <br>`);
document.write(`Number('hello') : ${Number('hello')} <br>`);
document.write(`Number('10 20') : ${Number('10 20')} <br>`);
document.write(`Number('10 ') : ${Number('10 ')} <br>`);
document.write(`Number(' 10') : ${Number(' 10')} <br>`);
document.write(`Number(' 10 ') : ${Number(' 10 ')} <br>`);
document.write(`Math.PI : ${Math.PI} <br>`);
document.write(`Math.round(4.7) : ${Math.round(4.7)} <br>`);
document.write(`Math.pow(2, 8) : ${Math.pow(2, 8)} <br>`);
document.write(`Math.sqrt(64) : ${Math.sqrt(64)} <br>`);
document.write(`Math.abs(-5) : ${Math.abs(-5)} <br>`);
document.write(`Math.random() : ${Math.random()*10} <br>`);
document.write(`Math.max(10, 20, 30, 40, 50) : ${Math.max(10, 20, 30, 40, 50)} <br>`);
document.write(`Math.min(10, 20, 30, 40, 50) : ${Math.min(10, 20, 30, 40, 50)} <br>`);
</script>
</body>
</html>
파일이름 : 012.html
<!DOCTYPE html>
<html>
<head>
<title>012.html</title>
</head>
<body>
<script>
// 제어문 - if, else if, else
// let x = 3;
// let y = 7;
// if(x == y){
// document.write('if문으로 실행되었습니다.');
// } else{
// document.write('else문으로 실행되었습니다.');
// }let score = 69;
let money = 1000;
if (score > 90){
document.write('참 잘했습니다!<br>');
money += 100000
} else if (score > 80){
document.write('잘했습니다!<br>');
money += 10000
} else if (score > 70){
document.write('했습니다!<br>');
money += 1000
} else {
money = 0
}
document.write(money);
</script>
</body>
</html>
파일이름 : 012_1.html
<!DOCTYPE html>
<html>
<head>
<title>012_1.html</title>
</head>
<body>
<script>
// 제어문 - if, else if, else
let x = 3;
// let y = 7;
// if(x == y){
// document.write('if문으로 실행되었습니다.');
// } else{
// document.write('else문으로 실행되었습니다.');
// }
x == 4 ?
document.write('if문으로 실행되었습니다.<br>') :
document.write('else문으로 실행되었습니다.<br>')// let result = x == 3 ? true : false;
let result = x == 4 ? 100 : 200;
document.write(result)
// let score = 69;
// let money = 1000;
// if (score > 90){
// document.write('참 잘했습니다!<br>');
// money += 100000
// } else if (score > 80){
// document.write('잘했습니다!<br>');
// money += 10000
// } else if (score > 70){
// document.write('했습니다!<br>');
// money += 1000
// } else {
// money = 0
// }
document.write('<br>');
let score = 91;
let money = 1000;
score > 90 ? money += 100000 :
score > 80 ? money += 10000 :
score > 70 ? money += 1000 : money = 0
document.write(money);
</script>
</body>
</html>
파일이름 : 012_2.html
<!DOCTYPE html>
<html>
<head>
<title>012_2.html</title>
</head>
<body>
<script>
//switch문
// let num = 1;
switch (new Date().getDay()) {
case 0:
document.write('일요일입니다.')
break;
case 1:
document.write('월요일입니다.')
break;
case 2:
document.write('2번째 case입니다.')
break;
case 3:
document.write('3번째 case입니다.')
break;
default:
break;
}
</script>
</body>
</html>
파일이름 : 013.html
<!DOCTYPE html>
<html>
<head>
<title>010.html</title>
</head>
<body>
<script>
// 제어문 - 반복문 - for
for (var i = 0; i < 10; i++) {
document.write(i, '<br>');
}//1부터 100까지의 짝수의 합
let s = 0;
for (var i = 0; i < 101; i+=2) {
document.write(i, '<br>');
s += i;
}
document.write(s, '<br>');
//구구단
for (var i = 2; i < 10; i++) {
for (var j = 1; j < 10; j++) {
document.write(`${i} X ${j} = ${i*j} <br>`);
}
}
//100보다 작은 3의 배수와 5의 배수의 합
s = 0;
for (var i = 0; i < 101; i++) {
if(i%3==0 || i%5==0){
document.write(i, '<br>');
s += i;
}
}
document.write(s, '<br>');
</script>
</body>
</html>
파일이름 : 013_1.html
<!DOCTYPE html>
<html>
<head>
<title>013_1.html</title>
</head>
<body>
<script>
// 제어문 - 반복문 - for
let array = [10, 20, 30, 40, 50];
var i = 0
for (; i < array.length;) {
document.write(array[i], '<br>');
i++;
}array.forEach(e => console.log(e*3));
for (var variable in array) {
document.write(array[variable], '<br>');
}
for (var variable of array) {
document.write(variable, '!! <br>');
}
</script>
</body>
</html>
파일이름 : 014.html
<!DOCTYPE html>
<html>
<head>
<title>014.html</title>
</head>
<body>
<script>
// while
let num = 0;
while (num < 11) {
document.write(num, '<br>');
num += 1;
}do {
document.write(num, '!! <br>');
num += 1;
} while (num < 11);
let i = 2;
let j = 1;
while (i < 10) {
while (j < 10) {
document.write(`${i} X ${j} = ${i*j} <br>`);
j++;
}
j = 1;
i++;
}
</script>
</body>
</html>
파일이름 : 015.html
<!DOCTYPE html>
<html>
<head>
<title>015.html</title>
</head>
<body>
<script>
// break, continue
let num = 0;
while (num < 11) {
num++;
document.write(num, '<br>');
if(num > 5){
continue;
}
}num = 0;
while (num < 11) {
num++;
document.write(num, '<br>');
if(num > 5){
break;
}
}
// let i = 2;
// let j = 1;
// while (i < 10) {
// while (j < 10) {
// document.write(`${i} X ${j} = ${i*j} <br>`);
// j++;
// }
// j = 1;
// i++;
// }
</script>
</body>
</html>
파일이름 : 016_연습문제1.html
<!DOCTYPE html>
<html>
<head>
<title>연습문제1.html</title>
</head>
<body>
<script>
// 연습문제 1
// 다음 str에 평균값을 구하세요 : '5,4,10,2,5'
let s = prompt();
let splistS = s.split(',');
console.log(splistS);
let sum = 0;
for (var variable of splistS) {
sum += parseInt(variable, 10);
}
console.log(sum/splistS.length); </script>
</body>
</html>
파일이름 : 017_연습문제2.html
<!DOCTYPE html>
<html>
<head>
<title>연습문제2.html</title>
</head>
<body>
<script>
// 연습문제 2
// 다음 array에 각 자리수의 합을 구하세요.
// [11, 22, 33, 111, 2]
// 1+1, 2+2, 3+3, 1+1+1, 2
// 2, 4, 6, 3, 2
// 정답 : 17
let a = [11, 22, 33, 111, 2];
let s = [11, 22, 33, 111, 2].join('');
console.log(s);
let sum = 0;
for (var variable in s) {
console.log(parseInt(s[variable], 10));
sum += parseInt(s[variable], 10);
}
console.log(sum);
</script>
</body>
</html>
파일이름 : 018.html
<!DOCTYPE html>
<html>
<head>
<title>018.html</title>
</head>
<body>
<script>
// Map, Setlet m = new Map();
m.set('하나', '1');
m.set(1, '하나');
m.set(true, 1);
m.set(false, 0);
console.log(m.get('하나'));
console.log(m.get(true));
console.log(m.has('하나'));
console.log(m.delete('하나'));
console.log(m.has('하나'));
console.log(m);
console.log(m.size);
for (var variable of m) {
console.log(`m을 순회하고 있습니다. ${variable[0]}`)
console.log(`m을 순회하고 있습니다. ${variable[1]}`)
}
console.log(m.keys());
console.log(m.values());
console.log(m.entries());
let temp = new Map([[1, 10],
[2, 20],
[3, 30],
[4, 40]]);
console.log(temp);
</script>
</body>
</html>
파일이름 : 019.html
<!DOCTYPE html>
<html>
<head>
<title>019.html</title>
</head>
<body>
<script>
// Map, Set
let s = new Set('abcdeeeeeeeee');
console.log(s.size);
s.add('f');
console.log(s);
for (var variable of s) {
console.log(variable);
}
let ss = new Set('abcdeeeeeeeee'.split(''));
console.log(ss);
ss.delete('b');
console.log(ss.has('a'));
console.log(ss);
// ss.clear
</script>
</body>
</html>
파일이름 : 020.html
<!DOCTYPE html><html>
<head>
<title>020.html</title>
</head>
<body>
<script>
// this
let 호텔 = [{
'이름' : '하나호텔',
'위치' : '제주도 제주시 001',
'가격' : {'A':50000, 'B':30000, 'C':15000},
'방의개수' : 50,
'예약자수' : 25,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
'이름' : '둘호텔',
'위치' : '제주도 제주시 002',
'가격' : {'A':100000, 'B':60000, 'C':30000},
'방의개수' : 100,
'예약자수' : 30,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
'이름' : '셋호텔',
'위치' : '제주도 제주시 003',
'가격' : {'A':80000, 'B':50000, 'C':30000},
'방의개수' : 120,
'예약자수' : 80,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
}];
console.log(호텔[0].남은방의개수());
console.log(호텔[1].남은방의개수());
console.log(호텔[2].남은방의개수()); </script>
</body>
</html>
파일이름 : 021.html
<!DOCTYPE html><html>
<head>
<title>021.html</title>
</head>
<body>
<script>
// JSON
// HTML -> 마크업언어
// CSS
// Javascript -> 프로그래밍 언어
// XML
// JSON
// [{
// '이름' : '하나호텔',
// '위치' : '제주도 제주시 001',
// '가격' : {'A':50000, 'B':30000, 'C':15000},
// '방의개수' : 50,
// '예약자수' : 25,
// '남은방의개수' : function(){return this.방의개수 - this.예약자수}
// },{
// '이름' : '둘호텔',
// '위치' : '제주도 제주시 002',
// '가격' : {'A':100000, 'B':60000, 'C':30000},
// '방의개수' : 100,
// '예약자수' : 30,
// '남은방의개수' : function(){return this.방의개수 - this.예약자수}
// },{
// '이름' : '셋호텔',
// '위치' : '제주도 제주시 003',
// '가격' : {'A':80000, 'B':50000, 'C':30000},
// '방의개수' : 120,
// '예약자수' : 80,
// '남은방의개수' : function(){return this.방의개수 - this.예약자수}
// }];
let l = [10, 20, 30];
let a = JSON.parse(JSON.stringify(l));
a[0] = 1000;console.log(l);
// JSON.parse(JSON.stringify(l))
</script>
</body>
</html>
파일이름 : 021_1.html
<!DOCTYPE html><html>
<head>
<title>022.html</title>
</head>
<body>
<script>
const 호텔 = [{
'이름' : '하나호텔',
'위치' : '제주도 제주시 001',
'가격' : {'A':50000, 'B':30000, 'C':15000},
'방의개수' : 50,
'예약자수' : 25,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
'이름' : '둘호텔',
'위치' : '제주도 제주시 002',
'가격' : {'A':100000, 'B':60000, 'C':30000},
'방의개수' : 100,
'예약자수' : 30,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
'이름' : '셋호텔',
'위치' : '제주도 제주시 003',
'가격' : {'A':80000, 'B':50000, 'C':30000},
'방의개수' : 120,
'예약자수' : 80,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
}];// for (var i = 0; i < 호텔.length; i++) {
// if (호텔[i].이름 == '셋호텔') {
// console.log(호텔[i]);
// }
// }
console.log(호텔.filter(호텔 => (호텔.이름 == '셋호텔')));
console.log(호텔.map(호텔 => ({
'이름' : '셋호텔',
'위치' : '제주도 제주시 003',
'가격' : {'A':80000, 'B':50000, 'C':30000},
'방의개수' : 120,
'예약자수' : 80,
'남은방의개수' : 호텔.방의개수 - 호텔.예약자수
})));
let 연산된호텔 = 호텔.map(호텔 => ({
'이름' : '셋호텔',
'위치' : '제주도 제주시 003',
'가격' : {'A':80000, 'B':50000, 'C':30000},
'방의개수' : 120,
'예약자수' : 80,
'남은방의개수' : 호텔.방의개수 - 호텔.예약자수
}));
let a = [5, 4, 10, 3, 2, 1];
console.log(a.sort((a, b) => (b - a)));
console.log(연산된호텔.sort((a, b) => (b.남은방의개수 - a.남은방의개수)));
</script>
</body>
</html>
파일이름 : 021_1_test.html
<!DOCTYPE html><html>
<head>
<title>022.html</title>
</head>
<body>
<script>
const 호텔 = [{
'이름' : '하나호텔',
'위치' : '제주도 제주시 001',
'가격' : {'A':50000, 'B':30000, 'C':15000},
'방의개수' : 50,
'예약자수' : 25,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
'이름' : '둘호텔',
'위치' : '제주도 제주시 002',
'가격' : {'A':100000, 'B':60000, 'C':30000},
'방의개수' : 100,
'예약자수' : 30,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
'이름' : '셋호텔',
'위치' : '제주도 제주시 003',
'가격' : {'A':80000, 'B':50000, 'C':30000},
'방의개수' : 120,
'예약자수' : 80,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
}];console.log(호텔.filter(호텔 => (호텔.이름 =='셋호텔')));
console.log(호텔.map(호텔 => ({
'이름' : 호텔.이름,
'위치' : 호텔.위치,
'가격' : 호텔.가격,
'방의개수' : 호텔.방의개수,
'예약자수' : 호텔.예약자수,
//물론 이름을 붙이는 간단한 연산 뿐만 아니라, 나라별 시간 표기법을 별도로 표시해준다던지 좀 더 복잡한 연산도 가능
'남은방의개수' : 호텔.방의개수 - 호텔.예약자수
})));
let a = [5, 4, 3, 2, 1];
console.log(a.sort((a, b) => (a - b)));
console.log(호텔.sort((a, b) => (a.방의개수 - b.방의개수)));
</script>
</body>
</html>
파일이름 : 021_2.html
<!DOCTYPE html><html>
<head>
<title>021_2.html</title>
</head>
<body>
<button onclick="renderTable(jsonData)">데이터 호출!</button>
<table id="renderingDataTable">
<thead>
<tr>
<th onclick="sort('_id')">_id</th>
<th onclick="sort('age')">age</th>
<th onclick="sort('eyeColor')">eyeColor</th>
<th onclick="sort('name')">name</th>
<th onclick="sort('gender')">gender</th>
<th onclick="sort('email')">email</th>
<th onclick="sort('phone')">phone</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
//tableRender
var jsonData = [
{
"_id": "5e80777f673acf89c007ff91",
"age": 27,
"eyeColor": "green",
"name": "Angelina Chang",
"gender": "female",
"email": "angelinachang@kangle.com",
"phone": "+1 (938) 477-2821"
},
{
"_id": "5e80777feee717674b817fd2",
"age": 25,
"eyeColor": "green",
"name": "Deidre Cobb",
"gender": "female",
"email": "deidrecobb@kangle.com",
"phone": "+1 (938) 477-2824"
},
{
"_id": "5e80777fac368a4578dda85d",
"age": 25,
"eyeColor": "blue",
"name": "Jolene Franks",
"gender": "female",
"email": "jolenefranks@kangle.com",
"phone": "+1 (985) 536-3981"
},
{
"_id": "5e80777ff3717874cbc78e44",
"age": 31,
"eyeColor": "brown",
"name": "Waters Hardin",
"gender": "male",
"email": "watershardin@kangle.com",
"phone": "+1 (938) 559-2224"
},
{
"_id": "5e80777fe36842ea9e024fcd",
"age": 34,
"eyeColor": "green",
"name": "Jody Chaney",
"gender": "female",
"email": "jodychaney@kangle.com",
"phone": "+1 (878) 587-2602"
},
{
"_id": "5e80777fafd591f57344eb33",
"age": 31,
"eyeColor": "green",
"name": "Ortiz Maldonado",
"gender": "male",
"email": "ortizmaldonado@kangle.com",
"phone": "+1 (986) 509-2753"
},
{
"_id": "5e80777f20e48e9ada226862",
"age": 25,
"eyeColor": "brown",
"name": "Stacy Burris",
"gender": "female",
"email": "stacyburris@kangle.com",
"phone": "+1 (864) 577-3500"
},
{
"_id": "5e80777faf334f84a2c90595",
"age": 33,
"eyeColor": "brown",
"name": "Davenport Levy",
"gender": "male",
"email": "davenportlevy@kangle.com",
"phone": "+1 (990) 600-2700"
},
{
"_id": "5e80777fe9d516f0da793b7e",
"age": 32,
"eyeColor": "brown",
"name": "Lenora Rivas",
"gender": "female",
"email": "lenorarivas@kangle.com",
"phone": "+1 (835) 549-3209"
},
{
"_id": "5e80777fba91e9aeeb5ce989",
"age": 35,
"eyeColor": "brown",
"name": "John Fischer",
"gender": "female",
"email": "johnfischer@kangle.com",
"phone": "+1 (969) 493-3495"
},
{
"_id": "5e80777f63b89c8cb73127b8",
"age": 23,
"eyeColor": "brown",
"name": "Aurora Robles",
"gender": "female",
"email": "aurorarobles@kangle.com",
"phone": "+1 (900) 579-2424"
},
{
"_id": "5e80777faac1a3f50eacfbd1",
"age": 20,
"eyeColor": "brown",
"name": "Solis Hays",
"gender": "male",
"email": "solishays@kangle.com",
"phone": "+1 (930) 450-2123"
},
{
"_id": "5e80777ffd19fbf487e3957c",
"age": 26,
"eyeColor": "blue",
"name": "Graves Jackson",
"gender": "male",
"email": "gravesjackson@kangle.com",
"phone": "+1 (810) 556-3478"
},
{
"_id": "5e80777ff3bd76dd30824028",
"age": 22,
"eyeColor": "brown",
"name": "Sharron Joyner",
"gender": "female",
"email": "sharronjoyner@kangle.com",
"phone": "+1 (991) 418-2210"
},
{
"_id": "5e80777fd0f579261a830c2f",
"age": 37,
"eyeColor": "brown",
"name": "Patty Bernard",
"gender": "female",
"email": "pattybernard@kangle.com",
"phone": "+1 (940) 558-3881"
},
{
"_id": "5e80777fba4fc442f7353d84",
"age": 23,
"eyeColor": "brown",
"name": "Sandra Foreman",
"gender": "female",
"email": "sandraforeman@kangle.com",
"phone": "+1 (864) 500-3123"
},
{
"_id": "5e80777fa0897694765e4040",
"age": 35,
"eyeColor": "blue",
"name": "Hyde Melendez",
"gender": "male",
"email": "hydemelendez@kangle.com",
"phone": "+1 (964) 487-2694"
},
{
"_id": "5e80777fcf1f69b3350b06c1",
"age": 40,
"eyeColor": "green",
"name": "Evans Wagner",
"gender": "male",
"email": "evanswagner@kangle.com",
"phone": "+1 (944) 448-3591"
},
{
"_id": "5e80777fd311822be4597959",
"age": 40,
"eyeColor": "brown",
"name": "Robinson Lynn",
"gender": "male",
"email": "robinsonlynn@kangle.com",
"phone": "+1 (983) 564-3761"
},
{
"_id": "5e80777f481e9934e9fabdce",
"age": 27,
"eyeColor": "brown",
"name": "Best Ewing",
"gender": "male",
"email": "bestewing@kangle.com",
"phone": "+1 (950) 477-3573"
},
{
"_id": "5e80777fbf35be0eb2c2360a",
"age": 22,
"eyeColor": "green",
"name": "Bird Long",
"gender": "male",
"email": "birdlong@kangle.com",
"phone": "+1 (843) 497-2151"
},
{
"_id": "5e80777f37564dd622dfac58",
"age": 35,
"eyeColor": "green",
"name": "Flynn Albert",
"gender": "male",
"email": "flynnalbert@kangle.com",
"phone": "+1 (835) 422-2151"
},
{
"_id": "5e80777fa4080ca9c9a2a8f7",
"age": 39,
"eyeColor": "brown",
"name": "Avila Chen",
"gender": "male",
"email": "avilachen@kangle.com",
"phone": "+1 (985) 515-2235"
},
{
"_id": "5e80777fbf2492c1f4f6c7d2",
"age": 38,
"eyeColor": "green",
"name": "Colette Sweet",
"gender": "female",
"email": "colettesweet@kangle.com",
"phone": "+1 (971) 578-3870"
},
{
"_id": "5e80777f9dc7e14e19c042a7",
"age": 39,
"eyeColor": "brown",
"name": "Deirdre Reilly",
"gender": "female",
"email": "deirdrereilly@kangle.com",
"phone": "+1 (832) 546-2673"
},
{
"_id": "5e80777f28590be173115fdf",
"age": 38,
"eyeColor": "blue",
"name": "Carpenter Kaufman",
"gender": "male",
"email": "carpenterkaufman@kangle.com",
"phone": "+1 (963) 452-3989"
},
{
"_id": "5e80777fa4062298ee3772aa",
"age": 30,
"eyeColor": "green",
"name": "Angela Cote",
"gender": "female",
"email": "angelacote@kangle.com",
"phone": "+1 (868) 471-3444"
},
{
"_id": "5e80777fe70152016f07e965",
"age": 24,
"eyeColor": "blue",
"name": "Carter Mueller",
"gender": "male",
"email": "cartermueller@kangle.com",
"phone": "+1 (943) 492-2942"
},
{
"_id": "5e80777f162e512bf3be2b7e",
"age": 35,
"eyeColor": "blue",
"name": "Nola Hancock",
"gender": "female",
"email": "nolahancock@kangle.com",
"phone": "+1 (851) 523-2333"
},
{
"_id": "5e80777f178b7460aeb79784",
"age": 35,
"eyeColor": "green",
"name": "Mcconnell Mosley",
"gender": "male",
"email": "mcconnellmosley@kangle.com",
"phone": "+1 (807) 460-2627"
}
];var click = true;
function sort(key){
if (click) {
click = false;
let sortedData = jsonData.sort((a, b) => (a[key] < b[key] ? -1 : (a[key] > b[key] ? 1 : 0)));
renderTable(sortedData);
} else {
click = true;
let sortedData = jsonData.sort((a, b) => (a[key] > b[key] ? -1 : (a[key] < b[key] ? 1 : 0)));
renderTable(sortedData);
}
}
function renderTable(data){
let tableBodyData = [];
console.log('?')
for (var variable of data) {
tableBodyData.push(`
<tr>
<td>${variable._id}</td>
<td>${variable.age}</td>
<td>${variable.eyeColor}</td>
<td>${variable.name}</td>
<td>${variable.gender}</td>
<td>${variable.email}</td>
<td>${variable.phone}</td>
</tr>
`)
}
document.querySelector('#renderingDataTable > tbody').innerHTML = tableBodyData.join('');
}
</script>
</body>
</html>
파일이름 : 021_2_test.html
<!DOCTYPE html><html>
<head>
<title>021_2_test.html</title>
</head>
<body>
<!-- table>(thead>tr>th*5)+tbody -->
<button onclick="renderTable(호텔)" type="button" name="button">클릭해!!</button>
<table id="rederingDataTable">
<thead>
<tr>
<th onclick="sort('이름')">이름</th>
<th onclick="sort('위치')">위치</th>
<th onclick="sort('가격')">가격</th>
<th onclick="sort('방의개수')">방의개수</th>
<th onclick="sort('예약자수')">예약자수</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- json generator -->
<script>
var 호텔 = [{
'이름' : '하나호텔',
'위치' : '제주도 제주시 001',
'가격' : {'A':50000, 'B':30000, 'C':15000},
'방의개수' : 50,
'예약자수' : 25,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
'이름' : '둘호텔',
'위치' : '제주도 제주시 002',
'가격' : {'A':100000, 'B':60000, 'C':30000},
'방의개수' : 100,
'예약자수' : 30,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
'이름' : '셋호텔',
'위치' : '제주도 제주시 003',
'가격' : {'A':80000, 'B':50000, 'C':30000},
'방의개수' : 120,
'예약자수' : 80,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
}];function sort(name){
let 정렬된호텔 = 호텔.sort((a, b) => (b[name] - a[name]));
renderTable(정렬된호텔);
}
function renderTable(호텔기본값){
let tableBody = [];
// JSON.stringify({ x: 5, y: 6 })
for (var variable of 호텔기본값) {
tableBody.push(`
<tr>
<td>${variable.이름}</td>
<td>${variable.위치}</td>
<td>${JSON.stringify(variable.가격)}</td>
<td>${variable.방의개수}</td>
<td>${variable.예약자수}</td>
</tr>
`);
}
document.querySelector('#rederingDataTable > tbody').innerHTML = tableBody.join('');
}
</script>
</body>
</html>
파일이름 : 022.html
<!DOCTYPE html><html>
<head>
<title>022.html</title>
</head>
<body>
<button type="button" style="position:fixed; margin:100px;" onclick="f()" name="button">눌러!</button>
<div style='height:1168px; width:1500px; background-color:red;'>hello</div>
<div style='height:1000px; width:1500px; background-color:blue;'>hello</div> <script>
//window
// window.alert('hello!');
// console.log(window);
console.log(window.innerHeight);
console.log(window.innerWidth);
function f(){
console.log(window.pageXOffset);
console.log(window.pageYOffset);
}
// window.alert();
// window.open();
// window.print();
</script></body>
</html>
파일이름 : 023.html
<!DOCTYPE html><html>
<head>
<title>021.html</title>
</head>
<body>
<script>
// JSON
// HTML -> 마크업언어
// CSS
// Javascript -> 프로그래밍 언어
// XML
// JSON
// [{
// '이름' : '하나호텔',
// '위치' : '제주도 제주시 001',
// '가격' : {'A':50000, 'B':30000, 'C':15000},
// '방의개수' : 50,
// '예약자수' : 25,
// '남은방의개수' : function(){return this.방의개수 - this.예약자수}
// },{
// '이름' : '둘호텔',
// '위치' : '제주도 제주시 002',
// '가격' : {'A':100000, 'B':60000, 'C':30000},
// '방의개수' : 100,
// '예약자수' : 30,
// '남은방의개수' : function(){return this.방의개수 - this.예약자수}
// },{
// '이름' : '셋호텔',
// '위치' : '제주도 제주시 003',
// '가격' : {'A':80000, 'B':50000, 'C':30000},
// '방의개수' : 120,
// '예약자수' : 80,
// '남은방의개수' : function(){return this.방의개수 - this.예약자수}
// }];
let l = [10, 20, 30];
let a = JSON.parse(JSON.stringify(l));
a[0] = 1000;console.log(l);
// JSON.parse(JSON.stringify(l))
</script>
</body>
</html>