1. 지금까지 여러분이 만든 코드를 다시 사용하려면 어떻게 해야 할까요? 예를 들어, 덧셈 기능이나 검색 기능을 미리 만들어 놓고 필요할 때마다 그 기능을 사용하려면 무엇이 필요할까요? 자바스크립트에서는 다시 사용할 수 있도록 코드를 묶어 두는 방법을 "함수"라고 합니다. 함수를 사용하면 코드를 반복해서 복사하고 붙여 넣지 않아도 여러 곳에서 중복해서 사용할 수 있습니다.
2. 간단한 함수 만들기를 해 봅니다.
-1) 소스코드
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>함수 만들기</title>
</head>
<body>
<script type="text/javascript">
var myFunction = function() {
document.write("나만의 함수");
}
myFunction();
</script>
</body>
</html>
|
-2) 실행결과
3. 함수의 장점을 제대로 이용하려면 함수와 암께 인수(argument)를 사용할 수 있습니다. 인수를 사용하게 되면 함수를 호출할 때마다 함수의 동작을 바꿀 수 있습니다.
4. 함수의 인수를 사용하는 방법을 알아봅니다. 다음과 같이 코드를 작성해 봅니다.
-1) 소스코드
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>함수 만들기</title>
</head>
<body>
<script type="text/javascript">
var myFunction = function(name) {
document.write("안녕하세요? "+name+"님");
}
myFunction("Yuchae");
</script>
</body>
</html>
|
-2) 실행결과
5. 인수는 한 개뿐만 아니라 여러 개를 사용할 수 있습니다. 인수1, 인수2, 인수3, …사용할 때도 function(인수1, 인수2, 인수3…) 이렇게 사용하면 됩니다. 처음에 설정한 인수 개수와 사용하는 인수 개수가 맞아야 합니다.
6. 우리 주위에서 순위를 알아보는 프로그램을 만들어 봅니다. 예를 들어, 도서 베스트셀러를 알아보는 프로그램을 만들어 보세요.
-1) 소스코드
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>함수 만들기</title>
</head>
<body>
<script type="text/javascript">
var bookName = ["미움받을 용기", "트렌드 코이라", "지금 이 순간", "나미야 잡화점의 기억", "내 안에서 나를 만드는 것들"];
var searchBesel = function() {
var findBook = prompt("알고 싶은 책 순위를 입력하세요", "");
var findNum = Number(findBook)-1;
document.write(findBook+"순위 책 이름은 '"+bookName[findNum]+"'입니다.");
}
searchBesel();
</script>
</body>
</html>
|
-2) 실행결과
7. 반복문과 함수를 이용한 현재 기분을 알리는 프로그램을 만들어 봅니다.
-1) 소스코드
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>함수 만들기</title>
</head>
<body>
<script type="text/javascript">
var drawFeel = function() {
var numFeel = prompt("지금 기분을 숫자(1~5)로 나타내 보세요.", "");
for(var i=0; i<numFeel; i++) {
document.write("^.^"+"<br>");
}
}
drawFeel();
</script>
</body>
</html>
|
-2) 실행결과
