03-3 연산자 이해하기

기초 산술 연산자

연산자와 피연산자 구별하기

• A - B + 1
  A,B,1 = 피연산자
  -,+ = 연산자

나머지 연산자

→ 15 % 2;
← 1

증감 연산자

• 증감 연산자가 피연산자 앞에 붙은 경우
  기존 a 값(10)과 5를 더하여 b에 할당한 후 a값 1증가

→ var a = 10;
→ var b = a++ +5;
→ b
← 15

• 증감 연산자가 피연산자 뒤에 붙은 경우
  c 값을 먼저 1증가 시킨 후, 5를 더하여 d에 할당

→ var c = 10;
→ var d = ++c + 5;
→ d
← 16

할인 가격 계산 프로그램

1단계 [초기 모델 설정]

연산자를 활용하여 초기모델을 먼저 작업해 보겠다.

<script>
 function showPrice() {
 var originPrice = 10000;
 var rate = 25;
 document.querySelector("#showResult").innerHTML = "상품의 원래 가격은" +
 originPrice + "원이고, 할인율은 " + rate + "%입니다.";
 }
 </script>

아직 원래 가격과 할인율을 입력받진 못하지만, 출력은 잘 된다.
여기서 사용자에게 원래 가격과 할인율을 입력받아 계산 결과를 출력해 주도록 하겠다.

2단계 [입력 상자에 입력한 값 받아 오기]

앞서 작성했던 초기 모델을 수정해 보겠다.

<script>
 function showPrice() {
 var originPrice = document.querySelector("#0Price").value;
 var rate = document.querySelector("#rate").value;
 document.querySelector("#showResult").innerHTML = "상품의 원래 가격은" +
 originPrice + "원이고, 할인율은 " + rate + "%입니다.";
 }
 </script>

입력 상자에 값을 입력한 후, 할인 가격 계산하기 버튼을 누르면 값이 출력된다.

마지막으로 곱하기, 나누기, 빼기를 이용하여 원래 가격, 할인율, 할인된 가격, 할인 가격을 모두 출력하게 한다.

<script>
		function showPrice() {
		var originPrice = document.querySelector("#oPrice").value;
		var rate = document.querySelector("#rate").value;
		var savedPrice = orginPrice * (rate / 100);
		var resultPrice = orginPrice - savedPrice;
		document.querySelector("#showResult").innerHTML = "상품의 원래 가격은" + originPrice + "원이고, 할인율은 " + rate + "%입니다." + savedPrice + "원을 절약한 " + resultPrice + "원에 살 수 있습니다.";
	}
	</script>

할인 가격 계산 프로그램 완성이다