반응형
함수
함수는 function이라는 키워드를 사용하여 선언하며 function에 저장한 코드를 호출한다.
function 함수명(){
자바스크립트 코드;
}참조 변수명 = function() {
자바스크립트 코드;
}
함수명();
또는 참조 변수명();
함수 정의 실습 예제 (1)
함수 정의문과 함수 변수를 선언하고 호출하는 실습 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수</title>
</head>
<body>
<script>
// 모든 코드는 작성된 순서대로 동작이 된다.
//전역변수
let count = 0;
myFunc(); // 함수가 뒤에 코드가 작성되어 있어도, 호이스팅기능 때문에 정상적으로 동작
//함수는 호이스팅(Hoisting 기능에 의하여, 함수가 맨 앞에 위치를 시킨다.)
function myFunc() {
count++;
document.write("hello" + count, "<br>");
}
myFunc();
// 함수를 변수로 참조하는 방식.(익명함수)
let theFnc = function() {
count++;
document.write("bye" + count, "<br>");
}
theFnc(); // 변수를 통한 함수호출
</script>
</body>
</html>
함수 정의 실습 예제 (1-2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수</title>
</head>
<body>
<script>
// 모든 코드는 작성된 순서대로 동작이 된다.
myFunc(); // 함수가 뒤에 코드가 작성되어 있어도, 호이스팅기능 때문에 정상적으로 동작
//함수는 호이스팅(Hoisting 기능에 의하여, 함수가 맨 앞에 위치를 시킨다.)
function myFunc() {
let count = 0; // 지역변수
count++;
document.write("hello" + count, "<br>");
}
myFunc();
</script>
</body>
</html>
함수 정의 실습 예제 (3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수정의(선언)</title>
</head>
<body>
<h3>함수정의(선언)</h3>
<script>
// 매개변수가 없고, 리턴이없는 함수정의(선언)
function fn_write() {
document.write("안녕하세요", "<br>");
document.write("안녕하세요", "<br>");
document.write("안녕하세요", "<br>");
document.write("안녕하세요", "<br>");
document.write("안녕하세요", "<br>");
}
// 함수호출(실행)
fn_write();
fn_write();
fn_write();
fn_write();
fn_write();
</script>
</body>
</html>
함수 정의 실습 예제(4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수정의(선언)</title>
</head>
<body>
<h3>함수정의(선언)</h3>
<script>
/*
document.write(1, "<br>");
document.write(2, "<br>");
document.write(3, "<br>");
document.write(4, "<br>");
document.write(5, "<br>");
*/
//매개변수가 있는 함수정의(선언). num : 매개변수, 인수, 파라미터 명칭
function fn_number_writer(num) {
document.write(num, "<br>");
}
//함수호출(실행)
fn_number_writer(1);
fn_number_writer(2);
fn_number_writer(3);
fn_number_writer(4);
fn_number_writer(5);
function fn_name_writer(name, age) {
document.write("안녕하세요," + name + " 입니다. 나이는? " + age, "<br>");
}
fn_name_writer("홍길동", 100);
fn_name_writer("박세리", 50);
fn_name_writer("손흥민", 35);
fn_name_writer("이순신", 25);
fn_name_writer("이강인", 20);
</script>
</body>
</html>
함수 정의 실습 예제 (5)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수정의(선언)</title>
</head>
<body>
<h3>함수정의(선언)</h3>
<script>
// 매개변수가 있고, 리턴값이 있는 함수
// 2개의 매개변수를 이용하여, 더하는 기능의 함수
// return 결과값; 함수를 호출한 쪽으로 값을 돌려주는 기능
function plus(num1, num2) {
return num1 + num2;
}
document.write("두 수의 더한값은?", plus(10, 20) + "<br>");
// 2개의 매개변수를 이용하여, 빼는 기능의 함수
// 그 결과를 호출한 쪽으로 돌려준다. return 결과값
function sub(num1, num2) {
return num1 - num2;
}
document.write("두 수의 뺄셈값은?", sub(10, 20) + "<br>");
// 2개의 매개변수를 이용하여, 곱하는 기능의 함수, mul()
// 그 결과를 호출한 쪽으로 돌려준다. return 결과값
function mul(num1, num2) {
return num1 * num2;
}
document.write("두 수의 곱한값은?", mul(10, 20) + "<br>");
// 2개의 매개변수를 이용하여, 곱하는 기능의 함수, div()
// 그 결과를 호출한 쪽으로 돌려준다. return 결과값
function div(num1, num2) {
return num1 / num2;
}
document.write("두 수의 나눈값은?", div(10, 20) + "<br>");
</script>
</body>
</html>
함수 정의 실습 예제 (4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수선언(정의)</title>
</head>
<body>
<h3>함수선언(정의)</h3>
<script>
//매개변수가 없고, 리턴값이 있는 경우
function today_print() {
return Date();
}
document.write("오늘의 날짜는 ?", today_print());
</script>
</body>
</html>
함수 활용 실습 예제 (1)
함수를 사용하여 값을 받아서 해당 값까지의 누적된 합을 구하는 예제를 실습해봅시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>누적된 합을 구하는 예제</title>
</head>
<body>
<h3>누적된 합을 구하는 예제</h3>
<script>
function accumulate(n) {
let total = 0;
for(let i=1; i<=n; i++) {
total += i; // total = total + i;
}
return total;
}
document.write("1~5까지의 누적된 합? ", accumulate(5), "<br>");
document.write("1~10까지의 누적된 합? ", accumulate(10), "<br>");
document.write("1~50까지의 누적된 합? ", accumulate(50), "<br>");
document.write("1~100까지의 누적된 합? ", accumulate(100), "<br>");
</script>
</body>
</html>
함수 활용 실습 예제 (2)
과목 세 개의 값을 받아 세 과목의 총 점수를 구하는 함수를 생성하고 실습하는 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>arguments</title>
</head>
<body>
<h3>arguments</h3>
<p>arguments : 매개변수없이 함수에 전달된 값 받아오기.</p>
<script>
function sum() {
return arguments[0] + arguments[1] + arguments[2];
}
let total = sum(70, 80, 90);
document.write("당신의 3과목 더한 총점수는? ", total);
</script>
</body>
</html>
함수 활용 실습 예제 (3)
함수로 숫자 데이터값1(a), 사칙연산자(op), 숫자 데이터값2(b)을 받습니다.
그리고 switch문을 사용하여 사칙연산자(op)를 case별로 판별해 사칙연산을 하는 함수를 생성하는 실습 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>계산기 함수정의</title>
</head>
<body>
<h3>계산기 함수정의</h3>
<script>
//3개의 매개변수를 갖는 함수.(첫번째 : 숫자, 두번째: 사칙연산자, 세번째:숫자)
function calculator(a, op, b) {
let result = 0;
switch(op) {
case "+": result = a + b;
break;
case "-": result = a - b;
break;
case "*": result = a * b;
break;
case "/": result = a / b;
break;
}
return result;
}
let result = calculator(10, "+", 20);
document.write(result);
</script>
</body>
</html>
함수 활용 실습 예제 (4)
함수로 구구단의 단을 입력 받아 해당되는 단의 구구단을 출력하는 함수를 생성하고 호출하는 예제를 실습해봅시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수를 이용한 구구단 함수</title>
</head>
<body>
<h3>함수를 이용한 구구단 함수</h3>
<script>
function gugudan(dan) {
document.write(dan + "단" + "<br>");
for(let i=1; i<=9; i++) {
document.write(dan + "*" + i + "=", dan*i + "<br>");
}
document.write("<hr>");
}
gugudan(3);
gugudan(7);
</script>
</body>
</html>
반응형
'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글
| [JavaScript] 객체(Object) (0) | 2024.01.28 |
|---|---|
| [JavaScript] 제어문 (3) - 반복문 while문, do while문, for문, 중첩 for문, break문, continue문 (0) | 2024.01.28 |
| [JavaScript] 제어문 (2) - 선택문 switch문 (0) | 2024.01.28 |
| [JavaScript] 제어문 (1) - 조건문(if, else, else if, 중첩 if) (0) | 2024.01.28 |
| [JavaScript] JavaScript 시작하기 (4) - 연산자 (0) | 2024.01.17 |