1. 함수(function)
자주 사용되는 문장을 function 키워드로 묶어두고(구조적) 함수명으로 호출하여 사용
[형식1]
함수명();
function 함수명() { 실행문장; }
[형식2]
함수명(실인수, 실인수);
function 함수명(매개변수, 매개변수) { 실행문장; }
변수명 만드는 규칙과 동일.
예제1) 비효율적인 함수처리
<!DOCTYPE HTML>
<html>
<head>
<title>자바스크립트 기초</title>
<meta charset="utf-8">
<script type="text/javascript">
<!--
a(); A(); b(); B(); // a(), A(), b(), B() 함수를 순차적으로 실행한다.
function a() {
alert("★님 안녕하세요");
}
function A() {
alert("■님 안녕하세요");
}
function b() {
alert("☆님 안녕하세요");
}
function B() {
alert("□님 안녕하세요");
}
-->
</script>
</head>
<body>
</body>
</html>
예제2) 매개변수 name을 만들어 위와 같은 결과를 내는 함수
<!DOCTYPE HTML>
<html>
<head>
<title>자바스크립트 기초</title>
<meta charset="utf-8">
<script type="text/javascript">
<!--
a("★"); a("■"); a("☆"); a("□");
function a(name) {
alert(name+"님 안녕하세요");
}
-->
</script>
</head>
<body>
</body>
</html>
예제3) 아래와 같이 출력하게 하기
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
나의 이름은 홍길동이고 나이는 25이며 차의 색상은 red
나의 이름은 박미리이고 나이는 28이며 차의 색상은 green
나의 이름은 김홍길이고 나이는 22이며 차의 색상은 blue
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
<!DOCTYPE HTML>
<html>
<head>
<title>자바스크립트 기초</title>
<meta charset="utf-8">
<script type="text/javascript">
<!--
document.write("<p style='text-align:center'>");
for(i=1; i<=50; i++) {
document.write("★");
}
document.write("<br>");
name("홍길동",25,"red");
name("박미리",28,"green");
name("김홍길",22,"blue");
function name(a,b,c) {
document.write("나의 이름은 "+a+"이고 나이는 "+b+"이며 차의 색상은 "+c+"<br>");
}
for(i=1; i<=50; i++) {
document.write("★");
}
document.write("</p>");
-->
</script>
</head>
<body>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 8. 자바스크립트 기초: 전역변수와 지역변수 (0) | 2017.08.24 |
|---|---|
| 7. 자바스크립트 기초: 이미지 크기 증가 또는 감소 연습 (0) | 2017.08.22 |
| 5. 자바스크립트 기초: continue, break, switch~case문 (0) | 2017.08.22 |
| 4. 자바스크립트 기초: 반복 제어문 do~while, while, for (0) | 2017.08.22 |
| 3. 자바스크립트 기초: 문장형식, 변수 (0) | 2017.08.22 |
