할인 가격을 계산해주는 프로그램의 실습의 통해 연산자에 대하여 알아보자.
[실습] 할인 가격 계산 브라우저 생성
본 실습 파일은 아래 링크의 깃허브 레포지터리를 참조한다.
GitHub - funnycom/js-basic-new: "Do it! 자바스크립트 입문" 에서 사용하는 실습 파일을 제공하고 있습니
"Do it! 자바스크립트 입문" 에서 사용하는 실습 파일을 제공하고 있습니다. Contribute to funnycom/js-basic-new development by creating an account on GitHub.
github.com
코드 자료
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>할인 가격 구하기</title>
<link rel="stylesheet" href="css/bargain.css">
</head>
<body>
<div id="contents">
<img src="images/sale.png">
<ul>
<li>
<label for="oPrice">원래 가격</label>
<input type="text" id="oPrice">원
</li>
<li>
<label for="rate">할인율</label>
<input type="text" id="rate">%
</li>
<li>
<button onclick="showPrice()">할인 가격 계산하기</button>
</li>
</ul>
<div id="showResult"></div>
</div>
<script>
function showPrice() {
var originPrice = document.querySelector('#oPrice').value; // 원래 가격
var rate = document.querySelector('#rate').value; // 할인율
var savedPrice = originPrice * (rate/100); // 할인 금액
var resultPrice = originPrice - savedPrice; // 원래 가격에서 할인 금액을 뺀 최종 가격
document.querySelector('#showResult').innerHTML = "상품의 원래 가격은 " + originPrice + "원이고, 할인율은 " + rate + "%입니다." + savedPrice + "원을 절약한 " + resultPrice + "원에 살 수 있습니다.";
}
// if문 삭제했습니다.
</script>
</body>
</html>기초 산술 연산자
먼저 수식을 만들 때 가장 기초적인 자바스크립트의 연산자에 대하여 알아보자. 보통 프로그래밍 언어의 연산자의 역할과 기능을 비슷하므로 추가적인 연산자 설명은 생략하도록 한다.
| 분류 | 연산자 이름 | 기호 | 설명 |
| 사칙 연산자 | 더하기 | + | 두 값을 더한다. |
| 빼기 | - | 앞의 값에서 뒤의 값을 뺀다. | |
| 곱하기 | * | 두 값을 곱한다. | |
| 나누기 | / | 앞의 값을 뒤의 값으로 나눈다. | |
| 나머지 연산자 | 나머지 | % | 앞의 값을 뒤의 값으로 나눈 나머지 값을 구한다. |
| 증감 연산자 | 증가 | ++ | 변수의 값을 1만큼 증가시킨다. |
| 감소 | -- | 변수의 값을 1만큼 감소시킨다. |
할인 가격 계산 프로그램 생성
연산자 활용하기
먼저 자바스크립트로 가격을 계산하는 프로그램의 초기 설정을 해보도록 하자.
<script>
function showPrice() {
var originPrice = 10000; //예시
var rate = 25; //예시
document.querySelector('#showResult').innerHTML = "상품의 원래 가격은 " +
originPrice + "원이고, 할인율은 " + rate + "%입니다.";
}
</script>이때, 6번째 줄에서 사용한 document.querySelector() 함수는 아래 포스팅에서 설명한 함수이므로 꼭 집고 넘어가도록 한다.
https://udangtangtang-cording-oldcast1e.tistory.com/143
[변수와 자료형] #2-2. 변수를 사용한 예제(2)
[실습] 나이 계산 프로그램 만들기(1) 실제로 변수를 이용하여 출생 연도를 입력하면 나이를 계산하는 프로그램을 작성해보자. 아래 코드는 필자가 직접 작성한 코드이다. <!DOCTYPE html> Document 나
udangtangtang-cording-oldcast1e.tistory.com
입력 상자에 입력한 값 받아오기
할인 가격을 계산하는 프로그램은 앞선 코드에서 완성을 했다. 이번에는 사용자가 직접 돈과 할인율을 입력하고 그에 맞는 결과값을 출력하는 프로그램을 만들어보자.
<script>
function showPrice() {
var originPrice = document.querySelector('#oPrice').value; // 원래 가격
var rate = document.querySelector('#rate').value; // 할인율
var savedPrice = originPrice * (rate/100); // 할인 금액
var resultPrice = originPrice - savedPrice; // 원래 가격에서 할인 금액을 뺀 최종 가격
document.querySelector('#showResult').innerHTML = "상품의 원래 가격은 "
+ originPrice + "원이고, 할인율은 " + rate + "%입니다." + savedPrice
+ "원을 절약한 " + resultPrice + "원에 살 수 있습니다.";
}
</script>이때 주의할 점은 자바스크립트의 연산자는 숫자형과 문자형의 자료의 연산에 있어 결과값의 자료형을 지정한다는 것이다.
즉 문자열 50과 숫자형 10을 더하게 되면 (+) 결과값은 60이 출력된다. 이는 자바스크립트 내에서 결과값의 자료형을 지정했기 때문이다. 따라서 원하는 결과값을 정확히 얻기 위해서는 문자열과 숫자를 연산할 때 결과값을 정확히 파악해야한다.
'JavaScript > [theory]' 카테고리의 다른 글
| [제어문] #2. switch 문 (0) | 2022.09.29 |
|---|---|
| [제어문] #1. if문과 if-else문 (0) | 2022.09.29 |
| [변수와 자료형] #3. 자료형 (0) | 2022.09.25 |
| [변수와 자료형] #2-2. 변수를 사용한 예제(2) (0) | 2022.09.25 |
| [변수와 자료형] #2-1. 변수를 사용한 예제(1) (0) | 2022.09.25 |
