<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JAVA SCRIPT</title>

<script>
	//JavaScript 공식이름 : ECMAScript5


	function f1(){
		//var : 지역변수, 함수내에서 유효하다.
		//let : block {}내에서 유효하다
		const name ="신한DS" ; 
		//const : 상수는 값 변경불가
		// Assignment to constant variable 
		//name = "신한DS2";
		su2 = 200; // 바람직한 사용이 아님 .... 무조건 수행되고 global
		var su = 100;
		var total=0 ;//값을 할당하지 않으면  타입이 결정되지않음 ...undefined
		//NaN(Not a Number) : 숫자가 아니다 
		for(let i =1 ; i<=su;i++ ){
			total +=i;
		}{
			
			
			let coffee = "아메리카노";
			console.log(coffee);
			
		}
	
		document.querySelector("#here").innerHTML =su +  " 까지 합: " +   total;
		
	
	}

	function f2(){
		
	}

</script>
<script>
function f2(){
	var su1 = Number(document.querySelector("#input1").value);
	var su2 = Number(document.querySelector("#input2").value);
	var op = document.querySelector("#op").value;
	var result = calculate(su1,su2,op);
	document.querySelector("#result").value = result;
}
//parameter , argument , 인수
function calculate(su1,in2,op){
	var result ;
	switch(op){
	case "+" : result = su1 + in2;break;
	case "-" : result = su1 - in2;break;
	case "*" : result = su1 * in2;break;
	case "/" : result = su1 / in2;break;
	}
	return result;

}

function f3(){
	var su1 = document.querySelector("#input1").value;
	var su2 = document.querySelector("#input2").value;
	var op = document.querySelector("#op").value;
	var result = eval(su1 + op + su2)// " 100 + 200 "
	document.querySelector("#result").value = result;
}

// 1.선언적 함수: 이름있는 함수
function f4(){
	//2.익명함수 (이름없는함수)..함수가 변수에 할당됨,
	var add =function(a,b){
		return a+b;
	};
	var result = add(10,20);
	document.querySelector("#here").innerText = result;
}

//즉시 실행함수
function f5(){
	var result = (function(a,b) {return a+b})
	(30,40);
	document.querySelector("#here").innerText = result;
}

function f6(){
	var result = (function(a,b){return a+b;})(1,2);
	//함수정의
	var f = (a,b) => a+b;
	//함수호출
	var result = f(1,2);
	document.querySelector("#here").innerText = result;
}

function call(){
	document.querySelector("#here").innerText = "1";
}
function call(){
	document.querySelector("#here").innerText = "2";
	
	내부함수();
//	f();//호출불가
	
	function 내부함수(){
		alert("함수밖에서 만든  함수.....선언적 내부함수");
	}
	//리터럴로 함수를 할당한경우는 반드시 할당후 호출가능
	var f = function() {
		alert("함수내의 익명함수");
	}
	f();//
}

//가변인자
function f7(){
	var result = sumAll(1,2,3,4,5,6,7,8,9,10);
	document.querySelector("#here").innerText = result;
}

function sumAll(){
	//arguments{1,2,3,4,5,6,7,8,9,10};
	var result =0;
	for(let i=0; i<arguments.length;i++){
		result += arguments[i];
	}
	
	return result;
}


//자바스크립트는 이름이 같으면 나중것이 유효하다
/*
function sumAll(a,b,c){
	return a+b+c;
}
function sumAll(a,b){
	return a+b;
}
*/


function f8(){
	//콜백함수 : 함수를 파라메터(매개변수) 로 보내고 받은쪽에서 호출
	var f = function() {
		alert("콜백함수연습");
	};
	f9(f);
}
function f9(argFunction){
	argFunction();
}


function f10(){
	var f = function(){
		document.querySelector("#here").innerText = new Date();
	};
timerId = 	setInterval(f,1000);
		
	
}

function f10_stop(){
	clearInterval(timerId);
}

function f11(){
 	var aa = returnFunc();
	var result = aa();	
	document.querySelector("#here").innerText = result;
}
function returnFunc(){
	//클로저 : 규칙(지역변수는 함수내에서만 사용한다.) 위반
	//지역변수는 함수종료후 메모리에서 사라짐 function 에 담겨서 다른함수로 갔다.
	//그러면 사라지지않고 남긴다.
	var score=100;
	var f = function(){
		alert("나의 점수는 " + score);
		return score;
	};
	return f ;
}
//즉시 실행함수 (function() {})()
//add = function(){cnt++; return cnt;}
var add = (function(){
	var cnt =0;
	console.log("즉시 실행함수는 1번 실행되고있다.")
	return function(){
		cnt++;
		return cnt;
	};
})();
function f12(){
	
	document.querySelector("#here").innerText = add();
}

//var2 는 global scope 갖는다 (바람직하지 않는다.)
var cnt2 =0;
function f13(){
	cnt2++;	
	document.querySelector("#here").innerText =cnt2;
}

function f14(){
	//var은 함수내에서 접근 가능한 지역변수.....함수종료시 까지 남아있다.
	for(let i=1; i<=3 ; i++){
		//일정시간후 1회 수행
		//일정시간마다 수행 : setInterval
		//[방법1].....원하는 결과가 아님
		//setTimeout(function(){alert(i);},1);
		
		//[방법2]..... 지역변수를 다른지역변수에 복사
		/* (function(aa){
			setTimeout(function(){alert(aa);},1);
		})(i);
		 */
		
		//[방법3] let는 block 내에서만 유효
		setTimeout(function(){alert(i);},1);
	}
	
}
function f15(){
	var arr = [10,20,30];
	arr.forEach(function(elt,index,arr2){
		console.log(elt,index,arr2);
		setTimeout(function(){
			alert(elt);
		},1);
	});
}

</script>
</head>
<body>


<h1>Function</h1>
<div id="here">여기</div>
<button onclick="f1()"> var &amp; let</button>
<button onclick="f4()"> 익명함수(이름없는 함수)</button>
<button onclick="f5()"> 즉시실행함수</button>
<button onclick="f6()"> 화살표함수(다른언어는 람다)</button>
<button onclick="call()"> 같은이름함수</button>
<button onclick="f7()">가변인자</button>

<!-- 콜백함수: 함수를 파라메터로 보내고 받은쪽에서 사용 -->
<button onclick="f8()">콜백함수</button>
<button onclick="f10()">콜백함수(현재시간을 출력)</button>
<button onclick="f10_stop()">시계중지</button>

<!-- 클로저: 규칙위반(지역변수가 함수종료시 사라짐) 
사라지지않고 남기기 : 지역변수 담아서 함수 return 
다른공간가지기 : ECMAScript6..let예약어,forEach()
-->
<button onclick="f11()">함수를 Return(클로저떄문)</button>
<button onclick="f12()">Counter</button>
<button onclick="f13()">Counter2(global영역)</button>
<button onclick="f14()">클로저 테스트</button>
<button onclick="f15()">클로저 테스트2</button>

<input type="number" id="input1" value="100">
<select id="op">

<option>+</option>
<option>-</option>
<option>/</option>
<option>*</option>
</select>
<input type="number" id="input2" value="300">
<button onclick="f2()">결과1</button>
<input type="number" id="result" readonly = "readonly">


<button onclick="f3()">결과2</button>


</body>
</html>

'Front-End' 카테고리의 다른 글

포맷팅 라이브러리 사용법  (0) 2024.11.21
JavaScript-Object  (0) 2024.11.10
JavaScript-Function(2)  (0) 2024.11.10
JavaScript-Function  (0) 2024.11.10
시맨틱 태그  (0) 2024.10.31

+ Recent posts

티스토리툴바