Front-End

JavaScript-Function(2)

NellKiM 2024. 11. 10. 18:29 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script>
	function myDisplayer(something) {
		//전달받은 값을 화면에 출력
		document.getElementById("here").innerHTML = something;
	}
	
	
	function myDisplayer2(something) {
		//전달받은 값을 화면에 출력
		document.getElementById("here2").innerHTML = something+"!!!!!!!!!!!!!!!!!!";
	}
	
	
	function myCalculator(num1, num2, myCallback) {
		//값2개 , 함수를 받아서 계산 결과와 받은함수를 실행
		let sum = num1 + num2;
		myCallback(sum);
	}

	function call1(){
		//값2개와 무엇을할지 함수를 보낸다
		myCalculator(5, 5, myDisplayer2);
	}
	function f_timer(){
		//함수를 받아서 함수를 실행하는 JavaScript 내장함수이다.
		timerId = setInterval(myFunction,1000); 
	}
	function myFunction(){
		document.querySelector("#here2").innerHTML += "<br>" + new Date();
	}
	function f_stop(){
		clearInterval(timerId);
	}
	function call2(){
	const add = (function () {
		  let counter = 0;
		  return function () {counter += 1; return counter}
		})();
	//add = function() {counter +1; return counter}
	console.log(add());
	console.log(add());
		add();
		add();
		add();
		}
	
	function call3(){
		var url = "http://localhost:9090/AppleShop/emp/empRegister.jsp?fname=신한" ;
		
		var result = encodeURIComponent(url);
		document.querySelector("#here2").innerHTML += "encode" + result;
		
		var result = decodeURIComponent(url);
		document.querySelector("#here2").innerHTML +="decode" +result;
	}
	
	function call4(){
		var str = "1000";
		document.querySelector("#here").innerHTML += parseInt(str)+20000;
	}
	function call5(){
		f_param();
	//	document.querySelector("#here").innerHTML = f_param(10,20,30);
		document.querySelector("#here").innerHTML = f_param(10);
	}
	//숫자 + undefined => NaN
	// [1] default 값 설정
	function f_param(a,b,c){
		if(!b) b =200;
		if(!c) c = 300;
		
		return a+b+c;
	}
	
	//숫자 + undefined => NaN
	//[2] default 값 설정
	function f_param(a,b,c){
		 b = b || 201;
		 c = c || 301;

		return a+b+c;
	}
	//[3] default 값 설정
	//내부 browser 지원 안됨
	function f_param(a,b=202,c=301){
		 

		return a+b+c;
	}
	function call6(){
		add(1,2,3);
		var arr = [10,20,30];
		add(...arr);
	}
	
	function add(){
		document.querySelector("#here").innerHTML = 
			arguments[0] + arguments[1]+arguments[2]  ;
	}
	function add(...arr){
		document.querySelector("#here").innerHTML +="<br>"+ 
			(arr[0] + arr[1]+arr[2]) + "!!!";
	}
	
	
	/*
	이벤트 : 일어나는 사건 예) click.hover
	이벤트 속성 : 이벤트와 이벤트 핸들러를 연결하는 역할 , 예)onclick
	이벤트 핸들러 : 
	
	*/
	
	function f_h1(){
		document.querySelector("#here").innerHTML +="<br>"+ "onmouseover";
	}
	
</script>

</head>
<body>

	<h1 onmouseover="f_h1()">JavaScript Function</h1>

	<button onclick="call1()">콜백함수</button>
	<button onclick="f_timer()">콜백함수2</button>
	<button onclick="f_stop()">Timer 중지</button>
	<button onclick="call2()">클로저</button>
	<button onclick="call3()">인코딩</button>
		<button onclick="call4()">문자->숫자</button>
<button onclick="call5()">defalut 매개변수</button>

<button onclick="call6()">전개연산자(...)</button>
	<hr>
	<div id="here">여기</div>
	<div id="here2">여기2</div>
	<img src="../resources/images/sunset.jpg">

</body>
</html>