Front/JavaScript
JavaScript - 함수 기초
Hyeon_
2021. 12. 8. 19:27
JavaScript
함수
- 자동 호출되는 함수
- 선언적 함수 (일반 함수 : function)
- 익명 함수
- 콜백 함수
- 화살표 함수
- 디폴트 매개변수
함수란?
- 독립적인 모듈 { }
- 특정 기능을 수행하고 결과를 돌려주는 독립적인 코드 집합
- 변수 : 데이터
- 함수 : 기능 (일 수행)
- 메소드, 모듈, 기능, 프로시저 등으로 불림
- 함수를 사용하기 위해서는 반드시 호출해야 함
함수 선언 방식
- 형식
function 함수명() {
함수가 수행하는 문장;
}- 자동 호출되는 함수 : 스스로 동작하는 함수
함수 사용
- 함수를 사용하기 위해서는 반드시 호출해야함
- 함수를 만들었다고 해서 스스로 기능을 수행하는 것이 아님
- 함수 호출 방법(함수 이름 부르기) : 함수명()
<script type=text/javascript>
function show() {
alert("show() 함수입니다");
}
// 함수 호출 : 함수 사용
show(); // 방법1. 필요한 곳에서 불러서 호출
// 함수호출2 : 다른 함수 내에서 호출
function input() {
show(); // 다른 함수 호출
}
</script>
<!-- 호출방법3 : HTML 이벤트 속성에서 호출 -->
<body onLoad="show()">
<button onClick="show()">show</button>함수 예제1
- 자동 호출되는 함수 : 호출하지 않아도 스스로 동작하는 함수
- 선언적 함수(일반 함수) : function 키워드 사용
- input() 함수 : 색상 입력 받아서 문서 배경색 변경
- [색상입력] 버튼 클릭했을 때 input() 함수 호출해서 문서 배경색 변경
function1.html
<script type="text/javascript">
function input() {
var color = prompt("색상 입력", "red / blue / green");
document.bgColor = color;
}
</script>
</head>
<body>
<button onclick="input()">색상 입력</button>
</body>함수 예제2
- 다른 함수 내에서 호출
- [숫자입력] 버튼을 클릭하여 숫자를 입력받고
- 입력된 숫자만큼 ★ 출력
- input() : 숫자 입력
- show() : ★ 출력
function2.html
<script type="text/javascript">
function input() {
num = prompt("숫자 입력");
show();
}
function show() {
for (var i = 0; i < num; i++) {
// document.write("★"); // 버튼 사라짐
document.body.innerHTML += "★"; // 버튼 유지
}
}
</script>
</head>
<body>
<button onclick="input()">숫자 입력</button>
</body>