728x90
반응형
SMALL
안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수</title>
<link href="resources/CSS/common.css" rel="stylesheet">
</head>
<body>
<h1>함수 (funtion)</h1>
<script>
function getById(id){
return document.getElementById(id);
}
</script>
<h3 onclick="test1()">* 선언적 함수</h3>
<pre>
function 함수명(매개변수 , ...){
해당 함수 호출시 실행할 소스코드;
return 결과값;
}
- 매개변수가 없는 경우 생략 가능함
- 반환할 값이 없는 경우 생략가능함
</pre>
<button onclick="test1();">실행확인</button>
<div id="area1" class="area"></div>
<script>
function test1(){
const area1 = getById("area1");
area1.innnerHTML += "test1()함수 실행<br>";
}
</script>
<h3>* 익명 함수</h3>
<pre>
function(매개변수, 매개변수, ...){
소스코드
}
특정 변수나 속성에 대입되는 함수 제시시 주로 사용됨(주로 이벤트 핸들러 작성시 사용)
</pre>
<button id="btn2">실행확인</button>
<div id="area2" class="area"></div>
<script>
const btn2 = getById("btn2");
const area2 = getById("area2");
btn2.onclick = function(){ // 이벤트 속성에 대입되는 function == 이벤트 핸들러
area2.innerHTML += "이벤트 핸들러를 통해 실행됨<br>"
}
const sayHi = function(name){ // 함수 호이스팅이 발생하지 않음. 1회성 사용
console.log(`${name}님 안녕하세요?`);
}
// sayHi("경민");
function getById(id){ // 함수 호이스팅(선언적 방식으로 만들어진 함수는 script 최상단으로 먼저 이동함)
return document.getElementById(id);
}
</script>
<hr>
<h2>함수의 매개변수</h2>
<button onclick="test3('안녕하세요')">실행</button>
<button onclick="test3(10)">실행</button>
<button onclick="test3([1,2,3])">실행</button>
<button onclick="test3(true)">실행</button>
<button onclick="test3(prompt('이름을 입력하세요'))">실행</button>
<!-- 정의해둔 매개변수보다 더 많이 전달하는 것은 문제없다. 단, 초과시에 전달된 값은 무시됨. -->
<button onclick="test3('안녕','반갑습니다.')">실행</button>
<button onclick="test3(10,'안녕','반값습니다')">실행</button>
<button onclick="test3()">실행</button>
<div id="area3" class="area"></div>
<script>
function test3(...value){ //매개변수 제시시 자료형 지정 x, const, let도 제시x => 변수명만 적음
// (value)만 입력시 매개변수의 요소 1개만 출력됨.
// (value ='기본값',...value2) 으로도 사용할 수 있다.
const area3 = getById("area3");
area3.innerHTML = value;
}
</script>
<!-- 자바스크립트에서는 오버로딩 기능이 없다. 마지막 입력한 매개변수로 덮어 씌여짐 -->
<br>
<h3>* 매개변수 관련 arguments 배열</h3>
<p>
함수 호출시 전달되는 값은 내부적으로 arguments 배열에 담김<br>
* arguments : 모든 함수마다 내부적으로 하나씩 존재하는 배열객체
</p>
<button onclick="test4(11, 12, 'dd', 5);">실행</button>
<div id="area4" class="area"></div>
<script>
function test4(value){
console.log(arguments, arguments[0]);
// arguments 배열의 모든 정수값을 더해서 area4 안에 출력
let sum =0;
let count=0;
for(let i =0; i<arguments.length; i++){
if(typeof(arguments[i])=="number"){
sum += arguments[i];
count++;
}
}
// sum = undefined + 3; 이므로 명확하게 sum값 0으로 초기화
const area4= getById("area4");
area4.innerHTML += `총합 : ${sum}<br>`;
area4.innerHTML += `평균 : ${sum/count}<br>`;
area4.innerHTML += `랜덤값 : ${ran()}<br>`;
// 총합 : xx <br>
// 평균 : xx <br>
// 랜덤값 : xx
}
// 1~100사이의 랜덤값을 구해서 반환
function ran(){
const test4 = getById("test4");
return parseInt(Math.random()*100+1);
}
</script>
<br>
<h3>* 매개변수 있는 함수에 this 관련 전달하기</h3>
<button onclick="test5(this);">버튼1</button>
<button onclick="test5(this.innerHTML);">버튼2</button>
<button onclick="test5(this.id);" id="btn22">버튼22</button>
<input type="button" value="버튼3" onclick="test5(this.value);">
<script>
const btn22 = getById("btn22");
btn22.click();
// click : 클릭해서 실행된 것과 같은 역할.
/*
Member m = new Member();
m.setUserId("mkm");
public void setUserId(String userId){
this.userId = userId;
}
*/
function test5(value){
console.log(value);
}
</script>
<hr>
<h2>함수의 리턴</h2>
<h3>* 일반적인 값 리턴</h3>
<button onclick="test6();">실행확인</button>
<div id="area6" class="area"></div>
<script>
function test6(){
// const area6 = getId("area6");
getById("area6").innerHTML += `랜덤값 : ${ran()}<br>`;
}
</script>
<h3>* 익명 함수를 리턴하는 함수</h3>
이름 : <input type="text" id="userName">
<button onclick="test7()();">실행</button>
<!-- <button onclick="test7();">실행</button> 출력해주는 부분이 없어서 alert 창이 실행이 안됨. () 추가로 실행가능해짐.-->
<script>
function test7(){
const name = getById("userName").value;
return function(){
alert(name + "님 환영합니다!!");
}
}
</script>
</body>
</html>
728x90
반응형
LIST
