6일차 JavaScript

|

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

/* 20.07.15 추가사항 */
==(동등연산자), !=(부등연산자) -> 자료형이 일치하지 않는 경우, 자료형을 일치시킨후 비교함.
===(일치연산자), !==(불일치연산자) -> 자료형변환없이, 엄격히 비교함.
so, ===(일치연산자), !==(불일치연산자) 을 사용하자!!!

/*비교연산자*/
/*0 ''(공백) false의 비교는 true(같다고 인식이 됨)*/
	alert('' == false); // true
	alert('' == 0); // true
	alert(0 == false); // true
	alert('273' == 273); // true , 비교시 숫자로 변환
	alert(0 == null); // false
	alert(0 == undefined); // false
	alert(null == undefined); // true, 직접 비교시 결과다름.
	
/*일치연산자 : 자료형과 값 일치여부 -> 자료형과 값이 모두 일치*/
	alert('' === false); // false
	alert('' === 0); // false
	alert(0 === false); // false
	alert('273' === 273); // false
	alert(null === undefined); // false
	
/*if조건문*/
	var date = new Date();
	var hour = date.getHours();

	if(hour<11){
		alert('아침 먹을 시간입니다.');
	} else if(hour<15){
		alert('점심 먹을 시간입니다.');
	} else{
		alert('저녁 먹을 시간입니다.');
	}
	
/*switch 조건문*/
	
	var input = Number(prompt('숫자를 입력하세요.', '숫자'));
	
	switch(input % 2){
		case 0:
			alert('짝수입니다.');
			break;
		case 1:
			alert('홀수입니다.');
			break;
		default:
			alert('숫자가 아니올시다.');
			break;
	}
	
/* for반복문 */
	var array = ['포도', '사과', '바나나', '망고'];
	
	for(var i = array.length - 1; i>=0; i--){
		alert(array[i]);	
	}

/* for in 반복문 */
	var array = ['포도', '사과', '바나나', '망고'];
	
	for(var i in array){
		alert(array[i]);	
	}
	
/*while 반복문*/
	var value = 0;
	var startTime = new Date().getTime();
	
	while(new Date().getTime() < startTime + 1000){
		value++;
	}
	
/*For문 예제 - label */
	outerloop:
	for(var i =0; i<10; i++){
		innerloop:
		for(var j = 0; j < 10; j++){
			if(j > 3) break;
			if(i == 2) break innerloop;
			if(i == 4) break outerloop;
			console.log("i=" + i + "j=" + j);
		}
	}
	console.log("Final i = " + i + "j = " + j);
	
/*  배열의 내장함수 */
	var array = ['포도', '사과', '바나나', '망고'];
	/*forEach : 각각의 function 기능을 각각 실행 - for문대신 써도됨.*/
	array.forEach(function(item){
		console.log(item);
	});	
	
/*Symbol.iterator 속성을 가지는 컬렉션 전용*/
	for(var i of array){
		alert(i);
	}
	
/*기존 기능에 영향을 주지 않으면서 새로운 property 추가*/
	var mySymbol1 = Symbol('mySymbol');
	var mySymbol2 = Symbol('mySymbol');
	mySymbol1 === mySymbol2; //false
	var prop2 = Symbol('prop2');
	var obj = {
			prop1: 1,
			[prop2]: 2,
	};
	for(var key in obj){
		console.log(key); // prop1만 출력됨
	}
	obj[prop2]; // 2, 대괄호[]로만 접근가능
	
/* 배열예제 1*/
	var arrayA = [0,1,2,3];
	arrayA.push(4); // 맨뒤에 추가
	arrayA.pop(); // 맨뒤항목 제거 후 반환
	arrayA.unshift(-1); // 맨앞에 추가
	arrayA.shift(); // 맨앞에 항목제거 후 반환
	delete arrayA[0]; // 첫번째 요소를 undefined로 변환 -> object에서는 속성제거
	
	arrayA.splice(1,2); //인덱스 1위치에서 2개의 항목제거
	arrayA.splice(1,2, 'four', 'five'); // 항목을 제거하고 2개의 항목을 인덱스 1에 추가
	
	var arrayB = [4, 5, 6];
	var arrayC = arrayA.concat(arrayB); // array 연결하기
	var arrayD = arrayB.slice(1,2); // 원본은 유지하고 인덱스 1에서 2개의 항목으로 배열을 만들어 리턴
	
/* 배열예제 2*/
	var numbers1 = ["apple", 1, 2, 3];
	var numbers2 = numbers1.map(myFunction); // 함수로직을 반영한 새로운 배열을 리턴
	var numbers3 = numbers1.filter(myFunction); // 함수가 true인 요소들의 새로운 배열을 리턴
	var numbers4 = numbers1.every(myFunction); // 모든 요소가 함수의 조건을 만족하는지 check, some 존재
	var a = numbers1.indexOf("apple"); // 0, lastIndexOf 존재
	document.getElementById("demo").innerHTML = "Apple is found in a position" + a;
	
	document.getElementById("demo").innerHTML = numbers2;
	function myFunction(value, index, array){
		return value *2;
	}
	
	document.getElementById("demo").innerHTML = numbers3;
	function myFunction(value, index, array){
		return value > 18;
	}
	
	document.getElementById("demo").innerHTML = numbers4;
	function myFunction(value, index, array){
		return value > 18;
	}
	
/* 배열예제 3*/
	var arrayA = ['b', 'c', 'a'];
	arrayA.sort(); //정렬하기 - 함수넣을수 있음. comparable과 같다고 보면 됨.
	arrayA.reverse(); // 역순으로 정렬하기
	arrayA.sort(function(a,b){return a - b}); // 정렬기준 함수를 매개변수로 전달
	
	var txt=""; // 전역변수
	var numbers = [0, 1, 2];
	numbers.forEach(myFunction); // 각요소별 함수호출
	numbers.first(myFunction); // 함수조건을 만족하는 첫번째 요소값, findindex존재(index 리턴)
	
	document.getElementById("demo").innerHTML = txt;
	function myFunction(value, index, array){ // value(요소), array(전체배열)
		txt = txt + value + "<br>";
	}
	
	//배열처럼 작동하는 유사배열을 내부적으로 많이 사용
	var a = {};
	// 1. 유사배열을 만들기 위해 property 추가
	var i = 0;
	while(i < 10){
		a[i] = i * i;
		i++;
	}
	a.length = i;
	//2. 실제 배열인 것처럼 사용
	var total = 0;
	for(var j=0; j<a.length; j++)
		total+= a[j];
	
// 메소드를 변수로 넘긴다!!!!!!!!	
//	1. 배열a의 각 원소중 filter함수를 만족하는 요소만을 새로운 배열로 리턴
	function filterArray(/*array*/a, /*Boolean function*/predicate){
		var results = [];
		var length = a.length; // 술어 함수가 배열의 길이를 반환할 경우에 대비하여
		for(var i =0; i<length; i++){
			var element = a[i];
			if(predicate(element)) results.push(element);
		}
		return results;
	}

//	2. 배열 a의 각 원소를 지정된 함수f로 전달하여 얻은 결과들을 원소로 하는 배열을 반환
	function mapArray(/*array*/a, /*function*/f){
		var r = [];
		var length = a.length; //함수 f가 배열 길이를 변환할 경우에 대비하여
		for(var i = 0; i < length; i++) r[i] = f(a[i]);
		return r;
	}

//	3. 피라미드 출력하기: alert or console.log 사용

	function pyramid(){
	var max = 10;
	for(var i = 0; i <= max; i++) {
		var print = "";
		for(var j = max; j>i; j--) {
				print+=" ";
		}
		for(var j = 0; j<2*i - 1; j++) {
				print+="*";
		}
		console.log(print);
      }
    }
	pyramid()

// 함수예제
// 함수를 전역변수에 할당
	function square(x){return x*x;}
	var a = square(4);
	var b = square; // b는 함수를 가리킨다.
	var c = b(5); // 자바스크립에서는 틀린 문법이 아님.
	
// 함수를 객체property에 할당
	var o = new Object();
	o.square = function(x){return x*x;}
	var y = o.square(16);
	
// 배열원소에 함수 할당
	var a = new Array(3);
	a[0] = function(x){return x*x;}
	a[1] = 20;
	a[2] = a[0](a[1]);
	
// 객체의 property를 배열로 전달
	function copyPropertyNamesToArray(o, a){
		if(!a) a = []; // if구문이고 많이 쓰임. 요걸로 대체가능 ( a = a|| []; ) 
        // !a는 !undefined 이므로 true임.
        // ||연산자: 첫번째가 true거나 true로 반환되는 값이면
        // 반환 아니면 두번째 반환
		for(var property in o) a.push(property);
		return a;
	}
	
// 함수를 데이터로 사용하기(많이 쓰는 함수들이므로 알아두면 좋다....)
	function add(x,y){return x+x;}
	function subtract(x,y){return x-x;}
	function muptiply(x,y){return x*x;}
	function divide(x,y){return x/x;}
	//위의 함수를 전달인자로 받아서 사용 -> 한줄로 끝낸다는 javascript의 장점 -> 많이쓰일수밖에 없다...
	function operate(operator, operand1, operand2){
		return operator(operand1, operand2);
	}
	
    // 객체로 구성하기
	var i = operate(add, operate(add, 2, 3), operate(multiply, 4, 5));
	var operations = {
			add: function(x,y){return x+y;},
			subtract: function(x,y){return x-y;},
			muptiply: function(x,y){return x*y;},
			divide: function(x,y){return x/y;},
			pow: Math.pow // 이미 정의된 함수도 사용
	}
	function operate2(op_name, operand1, operand2){
		if(typeof operators[op_name] == 'function'){
			return operators[op_name](operand1, operand2);
		} else throw 'unknown operator'; // 알수없는 연산자
	}
	var j = operate2('add', 'hello', operate2('add', '', 'world'));
	var k = operate2('pow', 10, 2);

// 메소드로서의 함수
	var calculator = {
		operand1: 1;
		operand2: 1;
		// 함수는 this라 property를 통해 자신이 속한 객체에 접근할 수 있다.
		compute:function(){
			this.result = this.operand1 + this.operand2;
		}
	};
	calculator.compute();
	console.log(calculator.result); // 결과를 출력
	
// 함수 property: length => 정의된 함수 매개변수 갯수
	function check(args){
		var actual = args.length; // 실제로 전달받은 매개변수 갯수
		var expected = args.callee.length; // 함수가 기대하는 매개변수 갯수
		// arguments.callee 는 함수 자기자신을 가리킴(문법)
		if(actual != expected){
			throw new Error('Wrong number of arguments');
		}
	}
	
	function f(x,y,z){
		//함수가 기대하는 전달인자를 받았는지 검사
		check(arguments);
		return x+y+z;
	}
	
// 함수 property 추가하기
	//함수의 정적property를 생성하고 초기화
	uniqueInteger.counter = 0;
	//호출할때 마다 다른 값을 리턴
	function uniqueInteger(){
		return uniqueInteger.counter++;
	}
	
// 객체 property를 전달인자로 사용하기(개발방식 중 하나)
	function arraycopy(from, from_start, to, to_start, length)
	function easycopy(args){
		arraycopy(args.from, args.from_start || 0, args.to, args.to_start || 0, args.length);
	}
	
</script>
</head>
<body>

	<p id="demo"></p>
	<button type="button" onclick="document.getElementById('demo').innerHTML=over18">Click !</button>

</body>
</html>

/*For문 예제 - label */

'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글

IBSheet 그리드 특강  (0) 2019.09.26
미니 프로젝트  (0) 2019.09.17
12일차 jQuery  (0) 2019.09.16
11일차 jQuery  (0) 2019.09.11
JavaScript - LinkedList, nodeType(재귀), Event 핸들러, DOM  (0) 2019.09.10
And