Daily coding
JavaScript : 자바스크립트 함수의 타입 본문
자바스크립트 함수의 타입
1. 매개변수와 반환값이 없는 함수 (일반 함수)
function btnClick() {
// alert("btnClick"); // 항상 이벤트 확인하고 다음 작업하는것이 좋음
document.getElementById("demo").innerHTML = "버튼을 누름";
} ---> onclick함수 : 버튼을 누를 때 실행됨
2. 매개변수가 있는 함수
function btnClick1( num ) {
document.getElementById("demo").innerHTML = num * 6;
}
---> 매개변수로 들어온 값에 6을 곱해 demo 태그에 출력하는 함수
3. return(반환값)이 있는 함수
function func( x, y ) {
return x * y;
}
---> return 적으면 반환값 있고 안쓰면 void
** 함수 안에 함수 호출
function btnClick2() {
document.getElementById("demo").innerHTML = "func를 호출하는 함수: " + func(5,6);
} // func를 호출하는 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 함수 호출하기 -->
<p id = "demo">p tag</p>
<h3 id = "demo">p tag</h3>
<!-- id는 1개밖에 인식되지 않아서 가장 처음에 지정한 아이디에 이벤트가 들어간다. -->
<button type="button" onclick="btnClick()">버튼타이틀</button>
<!-- onclick의 함수명으로 click()은 사용할 수 없다 -->
<br><br>
<button type="button" onclick="btnClick1( 7 )">매개변수있는 버튼</button>
<button type="button" onclick="btnClick2()">return있는함수를 호출하는 버튼</button>
<script type="text/javascript">
/*
id : 자바스크립트에서 가장 많이 사용함
현 페이지에서 1개만을 인식
class :
name
*/
// button을 클릭했을때
function btnClick() {
// alert("btnClick"); // 항상 이벤트 확인하고 다음 작업하는것이 좋음
document.getElementById("demo").innerHTML = "버튼을 눌렀음<br>버튼을 눌렀음ㅎ";
}
// 매개변수가 있는 함수
function btnClick1( num ) {
document.getElementById("demo").innerHTML = num + " * 6=" + (num * 6);
}
// 리턴값이 있는 함수
function func( x, y ) {
return x * y; // return 적으면 반환값있고 안쓰면 void
}
function btnClick2() {
document.getElementById("demo").innerHTML = "func를 호출하는 함수: " + func(5,6);
} // func를 호출하는 함수
</script>
</body>
</html>'Front-end > Java Script' 카테고리의 다른 글
| JavaScript : Timer ( setInterval ) 타이머 (0) | 2020.01.06 |
|---|---|
| JavaScript : parseInt (0) | 2020.01.06 |
| JavaScript : 변수와 배열 Variable & Array (0) | 2020.01.06 |
| JavaScript : Function 의 선언 및 호출하기 (0) | 2020.01.06 |
| JavaScript : 자바스크립트 개요 및 getter / setter (0) | 2020.01.06 |