고정 헤더 영역
상세 컨텐츠
본문
프로그램의 기능별로 묶어서 원하는 기능만 사용하게 되는데,
이런 코드의 묶음(Code Block)을 만들어 필요한 기능만 사용하는 것을 함수라 한다.
기능 자체에 내장되어있는 내장함수,
사용자가 직접 함수를 정의해서 사용하는 사용자(정의)함수
두가지가 있다.
prompt() alert() 함수, 형변환 Number() 함수 와 document 객체의 write() 함수는 메시지를 출력한다.
스크립트 자체에서 제공하기에 내장(built-in)함수라 한다.
또, 사용자가 새로운 함수를 정의해서 사용하는 사용자 정의(User-defined)함수가 있다.
사용자 정의 함수
function 함수_명 (argument) { // 함수 정의
지시어1;
지시어2;
}
함수_명 (parameter); // 함수 호출
람다식 함수
const hi = function () { // 상수 저장 익명함수.
return "안녕";
}
const hi = (매개변수) => { return "안녕" };
consthi => { "안녕" };
세가지 모두 같은 방법
let hi = function(user){ // let 사용
document.write(user+"님, 안녕");
}
== let hi = user => document.write(user+"님, 안녕");
or
let sum = function (a,b) {
return a+b; }
== let sum = (a,b) => a+b; 로 처리할 수 있다.
객체 Object
자바스크립트는 객체를 기반으로 하는 언어인데, Document 객체는 웹 페이지 자체를 의미한다.
웹 페이지에 존재하는 HTML 요소에 접근 시, 반드시 Document 객체를 사용해야한다.
( document.write()는 document 객체에 속한 write() 라는 내장함수를 의미한다. )
매개변수 parameter
호출하는 함수에 특정 데이터(값)을 전달해서 그 값으로 함수가 실행되게 한다.
<script>
function hello () { // 함수 정의
name = "홍길종";
alert ( name + "님 안낭"); // 함수 몸체
}
</script>
</head>
<body>
<button onclick="hello()">hellowss</button> <!-- 함수 호출 -->
</body>
<script>
function hello (name) { // hello() 함수를 호출 시, name 인자를 주어야 호출 가능.
document.write(name + "님 안녕하세요");
}
</script>
</head>
<body>
<button onclick="hello('Paul')">버튼1</button> <!-- 인자를 주어서 함수 호출 -->
<button onclick="hello('Mary')">버튼2</button> <!-- 인자를 주어서 함수 호출 -->
</body>
</html>
버튼을 누르면 두가지 숫자를 입력해서 곱의 결과를 나타내라
<script>
// var one = Number(prompt("첫번째 숫자를 입력해주세요"));
// var two = Number(prompt("두번째 숫자를 입력해주세요"));
function multiplication () {
var one = Number(prompt("첫번째 숫자를 입력해주세요"));
var two = Number(prompt("두번째 숫자를 입력해주세요"));
var result = one * two;
document.write(result)
}
</script>
</head>
<body>
<button onclick="multiplication()">눌러</button>
</body>
함수 값 반환
자바스크립트에서 사용되는 함수는 변수와 마찬가지로 함수 자체가 값을 가질 수 있는데,
함수 값 반환을 통해서 함수를 호출한 곳으로 값을 보낸다.
- 함수를 value 변수에 초기화를 시켜서 변수처럼 이용
<script>
function add(a,b) {
var c = a + b;
return c; // 함수를 호출한 곳으로 a + b 값을 보낸다.
}
var value;
value = add(5,7); // return c 의 값
document.write(value + "<br>");
value = add(10,15); // return c 의 값
document.write(value + "<br>");
</script>
** 메인 루틴과 서브루틴
자바스크립트를 포함해서 프로그래밍 언어에서 메인루틴은 서브루틴,
즉 함수 정의와 같이 프로그램의 부가적인 영역을 제외한 프로그램 흐름의 중심이 되는 부분을 의미한다.
프로그램은 메인 루틴의 처음 부분에서 시작되어 중간 서브루틴을 실행한 뒤 최종적으로 메인루틴에서 종료된다.
원주율 넓이 체적 구하기.
<script>
function f_area () {
var rr = Number(prompt("반지름을 입력하세요"));
var area = 3.14 * rr * rr;
document.write(area)
}
function f_circum () {
var rr = Number(prompt("반지름을 입력하세요"));
var circum = 2 * 3.14 * rr;
document.write(circum)
}
function f_volume () {
var rr = Number(prompt("반지름을 입력하세요"));
var volume = 4/3 * 3.14 * rr * 3;
document.write(volume)
}
// var result
// var result1
// var result2
// result = f_area(rr);
// document.write(result + "A<br>");
// result1 = f_circum(rr);
// document.write(result1 + "B<br>");
// result2 = f_volume(rr);
// document.write(result2 + "C<br>");
</script>
</head>
<body>
<button onclick="f_area()">area</button>
<button onclick="f_circum()">circum</button>
<button onclick="f_volume()">volume</button>
</body>function 하나로 표현
<script>
function fun() {
r = Number(prompt("반지름을 입력하세요"));
var area = 3.14 * r * r;
var circum = 2 * 3.14 * r;
var volume = 4/3 * 3.14 * r * 3;
document.write("area : " + area + " circum : " + circum + " volume : " + volume);
}
</script>
</head>
<body>
<button onclick="fun()">area</button>
</body>
두 수의 합, 두 수 사이에 있는 값들도 전부 계산
<script>
function f_sum () {
var num1 = Number(prompt("첫번째 숫자를 입력해주세요"));
var num2 = Number(prompt("두번쨰 숫자를 입력해주세요"));
var sum = 0;
if (num1 > num2) {
tmp = num1;
num1 = num2;
num2 = tmp;
}
for (var i=num1; i<=num2; i++) {
sum += i;
}
document.write(sum);
}
</script>
</head>
<body>
<button onclick="f_sum()">눌러</button>
</body>
성적 입력 후, sum 과 avg 값 나오기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function result() {
var kor = Number(prompt("국어 성적 입력"));
var eng = Number(prompt("영어 성적 입력"));
var math = Number(prompt("수학 성적 입력"));
var sum = 0;
var avg = 0;
sum = kor + eng + math;
avg = sum / 3;
document.getElementById("kor").innerHTML =kor;
document.getElementById("eng").innerHTML =eng;
document.getElementById("math").innerHTML =math;
document.getElementById("avg").innerHTML =avg;
document.getElementById("sum").innerHTML =sum;
}
</script>
<style>
#main { border : solid 1px black; }
#main ul:nth-child(1) { list-style : none; position : relative; right : 20px; }
button { margin : 10px 0 10px 0; }
</style>
</head>
<body>
<div id="main">
<ul>
<li> - 국어 : <span id="kor"></span>점</li>
<li> - 영어 : <span id="eng"></span>점</li>
<li> - 수학 : <span id="math"></span>점</li>
</ul>
<ul>
<li> ■ 합계 : <span id="sum"></span>점</li>
<li> ■ 평균 : <span id="avg"></span>점</li>
</ul>
</div>
<button onclick="result()">세 과목 성적 합계/평균 구하기</button>
</body>
</html>
거스름돈 계산하기
<style>
#main {border : solid 1px black;}
li {list-style : none;}
button {margin : 10px 0 10px 0;}
ul {position : relative; right : 30px;}
</style>
<script>
function product () {
var price = Number(prompt("가격을 입력해주세요"));
var num = Number(prompt("구매 개수를 입력해주세요"));
var pay = Number(prompt("지불금액을 입력해주세요"));
var change = pay - price * num;
document.getElementById("price").innerHTML=price;
document.getElementById("num").innerHTML=num;
document.getElementById("pay").innerHTML=pay;
document.getElementById("change").innerHTML=change;
}
</script>
</head>
<body>
<div id="main">
<ul>
<li> - 개당가격 : <span id="price"></span>원</li>
<li> - 구매개수 : <span id="num"></span>개</li>
<li> - 지불금액 : <span id="pay"></span>원</li>
</ul>
<ul>
<li> ■ 거스름돈 : <span id="change"></span>원</li>
</ul>
</div>
<button onclick="product()">거스름돈 계산하기</button>
</body>
'FrontEnd > JavaScript' 카테고리의 다른 글
| 함수 사용 예제 (0) | 2022.07.05 |
|---|---|
| 변수 스코프(scope) - 지역변수 전역변수 상수const 익명함수Anonymous Function (0) | 2022.07.03 |
| 외부 JS파일을 HTML에 불러오기 (0) | 2022.07.01 |
| while을 이용한, 이미지 삽입, Table (0) | 2022.07.01 |
| 반복문 ( while, do while, for, break, continue ) (0) | 2022.07.01 |
