인생 디벨로퍼

[기초 JAVA Script] 3-4강 함수 / 사칙연산 본문

JAVA Script

[기초 JAVA Script] 3-4강 함수 / 사칙연산

뫄뫙뫄 2023. 7. 16. 17:38
728x90
Index
   1. 함수
   2. 사칙연산

1. 함수

함수란?
매개변수 받기 → 지정한 처리 (가공) → 결과를 호출 한 곳으로 반환

함수 호출
함수명 (필요한 매개변수)

함수 작성
var total = function (price) {
      price 는 이 안에서만 사용할 수 있다
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>3-08_function</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>세금 포함 가격 계산하기</h1>
<h2>HTML에 출력하기</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
	<p id="output"></p>
	<p id="output2"></p>
	<p id="output3"></p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
var total = function(price) {
	var tax = 0.08;
	return price + price * tax;
}

console.log('커피의 가격은 ' + total(8000) + '원(부가세 포함)입니다.');
document.getElementById('output').textContent = '커피 기계의 가격은 ' + total(8000) + '원(부가세 포함)입니다.';
document.getElementById('output2').textContent = '커피 필터의 가격은 ' + total(200) + '원(부가세 포함)입니다.';
document.getElementById('output3').textContent = '커피 콩의 가격은 ' + total(1000) + '원(부가세 포함)입니다.';
</script>
</body>
</html>

total 이란 이름의 함수,  매개변수 price 에는 가격 대입

함수가 계산된 값이 반환되었다.

반환 명령. (함수 종료)

함수의 장점
1. 반복 호출 
2. 매개변수를 변경하여, 다른 데이터를 동일한 가공 처리 가능
3. 처리를 하나로 모을 수 있다

2. 사칙연산

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>3-09_fizzbuzz</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>FizzBuzz</h1>
<h2>30까지의 수로 FizzBuzz</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
	
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
var fizzbuzz = function(num) {
	if(num % 3 === 0 && num % 5 === 0) {
		return 'fizzbuzz';
	} else if(num % 3 === 0) {
		return 'fizz';
	} else if(num % 5 === 0) {
		return 'buzz';
	} else {
		return num;
	}
}
for(var i = 1; i <= 30; i++) {
	console.log(fizzbuzz(i));
}
</script>
</body>
</html>

베스킨라빈스 31 같은 게임이다

3의 배수일땐 fizz / 5의 배수일땐 buzz 

% 연산자 를 사용하면 나머지값을 구할 수 있다 (num % 3 === 0 일때, num은 3의 배수)

 

간단한 숫자 게임이고, 설명은 불필요 할 것 같다. 그냥 심심할때 연습해보는거 추천

(참고)

처음 만나는 자바스크립트 - 가노 스케하루 저자(글) · 김완섭 번역

728x90

'JAVA Script' 카테고리의 다른 글

[기초 JAVA Script] 3-10강 배열 (항목 리스트 표시)  (0) 2023.10.08
[JAVA Script] 화면전환 효과  (0) 2023.09.07
[기초 JAVA Script] 3-3강 반복문 for문 / while 문  (0) 2023.07.16
[기초 JAVA Script] 3-2강 비교 연산자 / 논리 연산자  (0) 2023.07.16
[기초 JAVA Script] 3-1강 자바 스크립트 조건 / if 문 사용  (0) 2023.07.16
'JAVA Script' Related Articles more