15. 전체 복습 및 심화과정 Code

hello "> hello "> hello ">

파일이름 : 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>