Front-End
JavaScript
NellKiM
2024. 11. 8. 09:29
<!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 & 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>