01.Javascript 기초 이론 및 연산을 이용한 할인율 계산

Javascript를 공부하기 시작하면서 배운 기초 이론과 예제 풀이를 기록해보려고 한다.

 

1. Javascript 규칙

① 대소문자를 구별한다

② 들여 쓰는 습관을 들인다.

③ 세미콜론(;)으로 문장을 구분한다.

④ 메모는 주석으로 처리한다.

     * 주석  : 코드의 영향을 받지 않고 메모나 기록을 작성이 가능한 것.  //  나  /*    */ 로 주석을 사용할 수 있다.

⑤ 식별자는 정해진 규칙을 지켜 작성한다.

⑥ 예약어는 식별자로 사용할 수 없다.

 

라는 6가지 기본 규칙들이 있다.

5, 6 번을 제외하고는 html과 css에서 사용했던 점을 경험으로 쉽게 이해가 가능했다.

 

2. 변수 선언 규칙

① 이름은 의미 있게!

② 여러 단어를 연결한 변수 이름은 낙타 모양으로 지어준다.

     * 낙타 모양이란?  ex) lastDay  ,  resultPrice 등 단어가 연결되고 시작하는 첫 글자를 대문자로 지어줘서 낙타 등처럼

        굴곡을 줘서 눈에 명확하게 보이도록 지어준다.

③ 세미콜론(;)으로 문장을 구분한다.

 

3. 변수 선언과 값/식 할당

① var 다음 변수 이름을 적어준다.

② 변수 오른쪽에 "=" 기호를 붙이고 오른쪽에 저장할 값이나 식을 작성한다.

     (변수 선언과 값 할당을 동시에 가능)

var age = 10;
// 선언과 동시에 초기화(값 할당) 시켜준다.

var school;
school = "개미 학교";
// 선언과 값이 분리되어 있다.

4. 배열

배열이란 하나의 변수에 여러 값을 저장하는 방식을 말한다.

항상 주의해야 할 점은 대괄호 [ ] 안에 배열의 인덱스(index)를 넣어 사용한다.

var season = ["봄","여름","가을","겨울"]

* 인덱스(index)란?

  : 위 대괄호 안에 있는 값 하나하나를 인덱스라고 지칭하며 이 인덱스들은 0~(n-1)의 숫자로 지정이 가능하다.

 

 

5. 객체

객체란 여러 자료들을 중괄호{ }로 묶은 것 이다.

key 와 value를 한 쌍으로 여러 자료를 저장한다.

var kim = {
fristName:"Ant",
lastNAme:"Kim" 
}

 

6. 산술 연산자

사칙 연산자	더하기 +
	빼기 -
	나누기 /
	곱하기 *
나머지 연산자	나머지 %	ex) 7%3 = 1
증감 연산자	증가 ++	변수값 1 증가 ex) var a = 10;                ++a;                          결과 : a =11
	감소 --	변수값 1 감소 ex) var a = 10;                --a;                          결과 : a =9

 

7. 할당 연산자

할당 연산자	예시	의미
+=	y+=x	y=y+x
-=	y-=x	y=y-x
*=	y*=x	y=y*x
/=	y/=x	y=y/x
%=	y%=x	y=y%x

 

[예제] 연산을 이용한 할인율 계산기 만들기.

* javascript에 대한 기록을 하기에 html과 css에 대한 리뷰는 최대한 하지 않겠습니다.

 

Javascript를 적용할 뼈대의 모습입니다.

---

할인율 계산기

---

할인율 계산기를 작동시키려면 원래 가격과 할인율에 value를 입력하고, 할인 가격 계산하기를 누르면 계산이 되는 방식이다.  

 

먼저 할인 가격 계산하기 버튼을 눌렀을 때 javascript가 작동이 되어야 함으로, 

<button onclick="showPrice()">할인 가격 계산하기</button>

html의 <button>에 onclick 했을 시 showPrice라는 함수가 실행이 되도록 설정을 했다.

 

이후 js파일로 

function showPrice(){
   var oPrice = document.querySelector("#originalPrice").value;
   var rate = document.querySelector("#rate").value;
}

<button>에 입력한 showPrice를 만들어 준 다음, 원래 가격 과 할인율에 입력한 값을 변수로 정해줬다.

* 원래 가격 : oPrice    할인율 : rate

 

변수로 정해준 "원래 가격" 에서 "할인율"이 적용된 값을 구하기 위해서

function showPrice(){

    var oPrice = document.querySelector("#originalPrice").value;
    var rate = document.querySelector("#rate").value;

    var savedPrice = oPrice * (rate/100);
    var resultPrice = oPrice - savedPrice;
    
    }

 

원래 가격에서 할인되는 가격을 알려주는 savePrice와 원래 가격에서 할인되는 가격을 빼서 할인율이 적용된 제품의

가격을 나타내는 값으로 recultPrice 라는 변수를 지정해줬다.

 

이제 계산된 값은 모두 다 구해졌고 화면에 보여주는 방식으로

function showPrice(){

    var oPrice = document.querySelector("#originalPrice").value;
    var rate = document.querySelector("#rate").value;

    
    var savedPrice = oPrice * (rate/100);
    var resultPrice = oPrice - savedPrice;

    document.querySelector("#showResult").innerHTML = resultPrice 
    + "원 입니다";
}

document.querySelector( ).innerHTML = ; 을 사용하여 할인율이 적용된 제품가격이 보이도록 적용을 시켰다.

 

이 스크립트를 적용한 결과물로

---

할인율 계산기 작동 모습

---

라는 할인율 계산기가 작동되는 모습을 볼 수 있다.

 

예제를 풀면서 입력과 버튼을 누르는 행동을 순서로 논리적인 함수를 만드는 것이 처음이라 과정에 대한 고민을 반복하였고, 그에 맞는 변수들을 만들고 그 변수들을 이용하여 결과가 도출될 수 있는 함수를 만드는 것이 오늘 기록한 내용이라고 생각이 든다.