IT story/JSP

[JSP 강의] L15JavaScript (L05Function.html)

jason719 2016. 11. 18. 16:43

 2016. 11. 18. (Fri)

 L15JavaScript

 L05Function

함수를 정의하고 사용해보자

ex) L05Function.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>JavaScript Function</title>

</head>

<body>

<h1>함수를 정의하고 사용해보자</h1>

<script>

function sum (a,b) {

//앞에 function이 명명돼야함

//return 되는 값의 데이터 타입이 없다. 매개변수의 데이터 타입이 없다.

return a+b;

}

document.write("<h3>sum(10,20) :"+sum(10,20)+"</h3>");

document.write("<hr/>");

var sunVal = function(a,b) {

return a+b;

}//anonymous function

//익명함수를 변수에 담고 사용한다. -> JavaScript의 변수 시스템이 프로그램의 속도를 증가시킨다.

document.write("<h3>sunVal(10,20) : "+sunVal(10,20)+"</h3>");

document.write("<h3>typeof sunVal : "+typeof sunVal+"</h3>");

var avoidFun = new Function("a","b","return a+b");

document.write("<h3>avoidFun(10,20) :"+avoidFun(10,20)+"</h3>");

document.write("<hr/>");


var mul = function(a,b) {

return a*b;

}

document.write("<h3>mul(7) :"+mul(7)+"</h3>");

var mul2 = function(a,b) {

if (b===undefined) {

b=1;

}

return a*b;

}

document.write("<h3>mul2(7) :"+mul2(7)+"</h3>");


var mul3 = function(a,b=1) {

return a*b;

}

document.write("<h3>mul3(7) :"+mul3(7)+"</h3>");

document.write("<h3>mul3(7,7) :"+mul3(7,7)+"</h3>");

var count = 0; //전역변수

var counter = function(){

//var count = 0; //counter 함수가 가지는 지역변수

this.count+=1; //count = count + 1;

document.getElementById("count").innerHTML = this.count;

}

var count1 = 0; //전역변수

var counter1 = function(){

function add(){count1+=1;}

add();

document.getElementById("count1").innerHTML = this.count1;


}

</script>

<hr/>

<button onclick="counter()">count</button>

<h3 id="count"></h3>

<hr/>

<button onclick="counter1()">count</button>

<h3 id="count1"></h3>

</body>

</html>

※출력내용