<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
[ 함수 ]
- 특정 기능을 수행하는데 필요한 코드들의 모음
- 반드시 호출을 통해서 사용
- 함수 호출 시 전달하는 값을 "전달인자(Argument)" 라고 하며
함수 정의 시 전달인자를 전달받아 저장할 변수를 "매개변수(Parameter)" 라고 함
ex) alert("안녕하세요"); => alert() 함수 호출 시 전달인자로 "안녕하세요" 문자 전달
- 함수 작업이 끝난 후 호출한 곳으로 되돌아 갈 때 전달하는 값을 "리턴값(Return value)" 이라고 함
[ 내장함수 ]
- 자바스크립트에서 미리 만들어 제공하는 함수(자바스크립트에 내장되어 있는 함수)
- 개발자가 호출을 통해 미리 정의된 함수를 불러서 사용 가능
ex) alert() 함수는 전달인자를 통해 전달받은 데이터를 웹브라우저 다이얼로그에 출력하는 역할
[ 사용자 정의 함수 ]
- 자바스크립트에서 제공되는 함수(내장함수) 외에 개발자가 직접 정의하는 함수
- 자바의 메서드와 달리 자바스크립트의 함수는 함수이름 앞에 리턴타입을 명시하지 않으며
파라미터(매개변수) 지정 방법은 동일함
- <script> 태그 내의 자바스크립트 코드는 기본적으로 웹브라우저에서 로딩 시 바로 실행되지만
함수를 정의할 경우 반드시 호출을 통해 실행 가능함
(단, 직접 호출하지 않고도 실행되는 함수도 있음)
- 함수를 정의하여 사용하면 코드의 재사용성이 향상됨
< 함수 정의 기본 문법 >
function 함수이름([매개변수선언...]) {
// 외부로부터 함수가 호출되면 실행할 코드들...
[return [값];]
}
*/
// "alert() 함수 호출됨" 출력
// alert("alert() 함수 호출됨!"); // HTML 문서 로딩 시 바로 실행됨
// 자바스크립트에서는 함수 선언 위치보다 윗쪽(앞쪽)에서도 호출이 가능함
// showMessage();
// showMessage() 함수 정의 => 전달인자가 없는 형태의 함수로 정의
function showMessage() { // 전달인자가 없으므로 매개변수(파라미터)를 선언하지 않는다!
// showMessage() 함수가 호출되면 실행할 코드를 작성하는 부분
alert("showMessage() 함수 호출됨!");
} // showMessage() 함수 끝
// 함수 정의 후 <script> 태그 내의 아무 위치에서나 함수를 호출하여 실행 가능
// showMessage() 함수 호출
// showMessage();
// ------------------------------------------------------------------------------
// print() 함수 정의 => 전달인자가 없는 형태의 함수
function print() {
// "안녕하세요" 출력
// "자기이름 입니다" 출력
document.write("안녕하세요<br>");
document.write("이연태 입니다.<br>");
} // print() 함수 끝
// print() 함수 호출
// print();
// ------------------------------------------------------------------------------
// for 문을 사용하여 "Hello, World!" 를 10번 반복 출력하는 printHello() 함수 정의
function printHello() {
for(var i = 1; i <= 10; i++) {
document.write(i + " : Hello, World!<br>");
}
} // printHello() 함수 끝
printHello();
document.write("<hr>");
// 함수를 여러번 호출하면 해당 기능을 여러번 실행할 수 있게 되므로
// 함수를 정의하게 되면 코드의 재사용성이 향상된다!
printHello();
document.write("<hr>");
// ------------------------------------------------------------------------------
// 1 ~ 10 까지 정수의 합을 계산하여 출력하는 함수 sum() 정의
function sum() {
// 합계를 계산하여 누적하기 위해서는 반복문 실행 전 누적 변수를 먼저 선언 및 초기화 필수!
let total = 0; // 누적변수 total 선언 및 0 으로 초기화
for(let i = 1; i <= 10; i++) {
// 합계 누적
total += i;
// 출력문 위치 1번 - 반복문 1바퀴 반복마다 출력됨(= 계산 과정 확인 가능)
// document.write(total + "<br>");
} // for문 끝
// 출력문 위치 2번 - 반복 계산이 끝난 후 출력됨(= 계산 결과만 확인)
document.write(total + "<br>");
} // sum() 함수 끝
sum();
</script>
<!-- 외부 자바스크립트 파일 test13_test.js 파일 불러오기 -->
<script src="test13_test.js"></script>
<script type="text/javascript">
// test13_test.js 파일의 checkNumGame() 함수 호출하기
checkNumGame();
</script>
</head>
<body>
</body>
</html>// showMessage() 함수 정의 => 전달인자가 없는 형태의 함수로 정의
function showMessage() { // 전달인자가 없으므로 매개변수(파라미터)를 선언하지 않는다!
// showMessage() 함수가 호출되면 실행할 코드를 작성하는 부분
alert("showMessage() 함수 호출됨!");
} // showMessage() 함수 끝
// 함수 정의 후 <script> 태그 내의 아무 위치에서나 함수를 호출하여 실행 가능
// showMessage() 함수 호출// showMessage();
// ------------------------------------------------------------------------------
// print() 함수 정의 => 전달인자가 없는 형태의 함수
function print() {
// "안녕하세요" 출력
// "자기이름 입니다" 출력
document.write("안녕하세요
");
document.write("이연태 입니다.
");
} // print() 함수 끝
// print() 함수 호출// print();
// ------------------------------------------------------------------------------
// for 문을 사용하여 "Hello, World!" 를 10번 반복 출력하는 printHello() 함수 정의
function printHello() {
for(var i = 1; i <= 10; i++) {
document.write(i + " : Hello, World!
");
}
} // printHello() 함수 끝
printHello();
document.write("<hr>");
// 함수를 여러번 호출하면 해당 기능을 여러번 실행할 수 있게 되므로
// 함수를 정의하게 되면 코드의 재사용성이 향상된다!
printHello();
document.write("<hr>");
// ------------------------------------------------------------------------------
// 1 ~ 10 까지 정수의 합을 계산하여 출력하는 함수 sum() 정의
function sum() {
// 합계를 계산하여 누적하기 위해서는 반복문 실행 전 누적 변수를 먼저 선언 및 초기화 필수!
let total = 0; // 누적변수 total 선언 및 0 으로 초기화
for(let i = 1; i <= 10; i++) {
// 합계 누적
total += i;
// 출력문 위치 1번 - 반복문 1바퀴 반복마다 출력됨(= 계산 과정 확인 가능)// document.write(total + "
");
} // for문 끝
// 출력문 위치 2번 - 반복 계산이 끝난 후 출력됨(= 계산 결과만 확인)
document.write(total + "<br>");
} // sum() 함수 끝
sum();
Hello, Velog!