[JavaScript] 자바스크립트로 평균 체중 계산기 만드는 방법

 평균 체중 계산기  만들기

철수라는 가상의 인물을 만들어 철수의 적정체중을 구해보고,

prompt()메서드를 활용해 사용자가 입력한 내용을 바탕으로 계산할 수 있는 계산기를 만들어 보겠다.

적정 체중을 구하는 공식

적정 체중 = (본인 키 - 100) x 0.9

철수의 적정 체중을 먼저 구해보겠다.
적정 체중을 구하기 위해 철수라는 가상 인물의 키와 몸무게 값을 설정해주었다.
철수는 키 180cm에 몸무게 74kg의 인물이다.
위의 적정 체중을 구하는 공식에 넣어보면 철수의 적정 체중은 (180-100) x 0.9이다.

//철수의 평균 체중 계산기
      var userHeight = 180; // 철수의 키
      var userWeight = 74; // 철수의 몸무게
      var normal_weight = (userHeight - 100) * 0.9; //적정 체중 구하는 공식 대입
      document.write(normal_w, "<br/>"); // 결과값 72

공식에 넣기 위해 철수의 키와 몸무게를 함수를 만들어 넣어주고
normal_weight라는 새 함수로 적정 체중을 구하는 공식을 대입해보았다.
결과 값을 알기 위해 document.write로 화면에 적어 보았더니 값이 72가 나왔다.

---

사용자에게
prompt() 메서드로 함수값 받기 

위의 내용과 prompt()메서드를 활용하여 사용자가 값을 입력하면 적정체중을 구해주는 계산기를 만들어 보겠다.

* prompt() 메서드란?
질의 응답 창으로 사용자에게 질문에 대한 답을 얻고자 할 때 사용하는 창이다.
prompt()메서드의 기본 답변은 placeholder 처럼 사용자에게 힌트를 주기 위해 사용하는 부분으로 생략 가능하다.
사용자로 부터 전달받은 모든 답변은 문자형 데이터로 반환된다는 특징이 있다.(숫자도 문자형 숫자로 변환)
prompt()메서드는 최근에는 거의 사용하지 않는 추세이다.

기본형

prompt("질문", "기본 답변")

먼저 위의 철수의 적정체중을 구했던 것과 동일하게 기본 계산식을 짜보았다.
차이점이 있다면 단순히 변수값을 입력했던 것과는 다르게 prompt 메서드로 사용자에게 입력값을 받는다는 것인데,
나는 철수의 값을 또 사용할 것이기 때문에 기본답변에 미리 값을 적어 놓았다.

//사용자의 평균체중 계산기
      var userName = prompt("성함을 입력해주세요.", "철수");
      var height = prompt("당신의 키는 몇입니까?", "180");
      var weight = prompt("당신의 몸무게는 몇입니까?", "74");
      document.write(
        userName,
        "님은 키 ",
        height,
        "cm 몸무게 ",
        weight,
        "kg 입니다. <br/>"
      );
      var normal_weight = (height - 100) * 0.9;
      document.write(
        userName,
        "님의 평균체중은 ",
        normal_weight,
        "입니다.",
        "<br/>"
      );

prompt를 쓰면 아래와 같이 브라우저에 창이 뜬다.

---

평균 체중 계산기
 계산식 짜기 

맨 처음 철수의 적정 체중을 구했던 공식대로만 사용하면 범위가 과하게 한정되어버린다.

철수의 적정체중인 72kg 에서 0.1kg 이라도 벗어나면 과체중이나 저체중이 되는 것이다.

그렇기 때문에 우리가 원하는 평균 체중 계산기를 만들기 위하여 위아래로 5kg 의 범위값을 함께 넣어 만들어 보겠다. 

계산식에서 사용된 함수	함수 의미
normal	적정 체중 값이 맞을 경우 보여줄 삼항 조건 연산자
weight	유저가 입력한 몸무게
normal_weight	적정 체중 계산기로 계산한 값

normal_weight에 더하기와 빼기로 5씩 값을 주면 아래와 같이 범위가 생긴다.
앞으로의 계산식은 이러한 범위에 속하느냐 속하지 않느냐의 여부를 통해 결과값을 내려고 한다.

---

1. &&(and) 연산자로 계산

논리연산자 &&은 값이 한개라도 false가 나오면 false가 나오는 연산자이다.
그렇기 때문에 비교값은 true가 나올경우 둘 다 true가 나와야 한다.
false 값은 둘 중 한개 값만 충족시키면 되기 때문에 아래와 같은 계산식이 나온다.

var normal = weight >= normal_weight - 5 && weight <= normal_weight + 5
          ? "평균체중입니다." : "평균체중이 아닙니다.";

첫번째 연산식부터 계산해 보겠다.

계산식1	weight >= normal_weight - 5

계산식1은 사용자의 체중이 위에서 미리 계산해놓은 적정체중에서 빼기 5를 한 값보다 크거나 같은지를 계산한다.
사용자의 체중이 크거나 같다면 true, 작다면 false 값이 출력된다.

계산식2	weight <= normal_weight +5

계산식2는 사용자 체중이 적정체중에서 더하기 5를 한 값보다 작거나 같은지를 계산한다.
사용자의 체중이 작거나 같다면 true, 크다면 false 값이 출력된다.

이제 삼항 조건 연산자를 계산해보겠다.

삼항 조건 연산자

normal = 계산식1 && 계산식2 ? ture일 때 결과값 : false 일 때 결과값

삼항 조건 연산자의 true 일 때 결과값과 false 일 때의 결과값이 입력되어있다.
논리연산자 &&(and)를 사용했기 때문에 둘 다 true가 될 수 있는 상황을 확인하면 평균 체중일 때 뿐인 것을 알 수 있다.
두 개 중 하나라도 평균 체중보다 크거나 작으면 false 값이 나오며 평균체중이 아니라는 값이 출력된다.

체중이 a보다 크거나 같다 and 체중이 b보다 작거나 같다.
두 개의 값이 다 true 일 경우	"평균 체중입니다." 출력
둘 중 한개라도 false 일 경우	"평균 체중이 아닙니다." 출력

---

2. ||(or) 연산자로 계산

논리연산자 ||은 값이 하나라도 true가 나오면 true가 나오는 연산자이다.
그렇기 때문에 비교 값은 false가 나올 경우 둘 다 false가 나와야한다.
true 값은 둘 중 한개 값만 충족시키면 되기 때문에 아래와 같은 계산식이 나온다.
위의 &&연산자와 반대로 작성 된다.

var normal = weight <= normal_weight - 5 || weight >= normal_wegiht + 5
          ? "평균체중이 아닙니다." : "평균체중입니다.";

첫번째 연산식부터 계산해 보겠다.

계산식1	weight <= normal_weight - 5

계산식1은 사용자의 체중이 적정체중에서 빼기 5를 한 값보다 작거나 같은지를 계산한다.
사용자의 체중이 작거나 같다면 true, 크다면 false 값이 출력된다.

계산식2	weight >= normal_weight +5

계산식2는 사용자 체중이 적정체중에서 더하기 5를 한 값보다 크거나 같은지를 계산한다.
사용자의 체중이 크거나 같다면 true, 작다면 false 값이 출력된다.

이제 삼항 조건 연산자를 계산해보겠다.

삼항 조건 연산자

normal = 계산식1 || 계산식2 ? ture일 때 결과값 : false 일 때 결과값

삼항 조건 연산자의 true 일 때 결과값과 false 일 때의 결과값이 입력되어있다.
논리연산자 ||(or)을 사용했기 때문에 둘 다 false가 될 수 있는 상황을 확인하면 평균 체중일 때 뿐인 것을 알 수 있다.
두 개 중 하나라도 평균 체중보다 크거나 작으면 true값이 나오며 평균체중이 아니라는 값이 출력된다.

체중이 a 보다 작거나 같다.  or 체중이 b보다 크거나 같다.
둘 중 한개라도 true 일 경우	"평균 체중이 아닙니다." 출력
두개의 값이 다 false일 경우	"평균 체중입니다." 출력

---

차이값 표기하기

이제 결과를 보여줄 때, 몇 kg 이 차이가 나는지 같이 표기하는 방법을 보겠다.

사용자의 체중이 평균 체중보다 높거나 작을 때의 결과값에 조건식을 한번 더 추가하면 된다.

평균체중보다 높은 값 혹은 적은 값 둘 중 하나를 선택하여 조건문 작성

weight > normal_weight ? weight - normal_weight + "kg 초과"  :  normal_weight - weight + "kg 미만"

weight < normal_weight ? normal_weight - weight + "kg 미만" : weight - normal_weight + "kg 초과"

 

이미 평균체중 부분은 다른 조건식으로 걸러졌기 때문에,
평균 체중이 아닌 부분에서 크냐, 작냐 둘 중 하나의 값만 가지고도 조건식을 짤 수 있다.
위에 만들어 놓은 조건식들을 조합하여 완성해 보겠다.

// &&문 조건식1
var normal = weight >= normal_weight - 5 && weight <= normal_weight + 5 ? "평균체중" 
: weight > normal_weight ? weight - normal_weight + "kg 초과"  :  normal_weight - weight + "kg 미만";

// &&문 조건식2
var normal = weight >= normal_weight - 5 && weight <= normal_weight + 5 ? "평균체중" 
: weight < normal_weight ? normal_weight - weight + "kg 미만" : weight - normal_weight + "kg 초과"

// ||문 조건식1
var normal = weight <= normal_weight - 5 || weight >= normal_wegiht + 5
? weight > normal_weight ? weight - normal_weight + "kg 초과"  :  normal_weight - weight + "kg 미만"
: "평균체중";

// ||문 조건식2
var normal = weight <= normal_weight - 5 || weight >= normal_wegiht + 5
? weight < normal_weight ? normal_weight - weight + "kg 미만" : weight - normal_weight + "kg 초과"
: "평균체중";

위와 같이 조건식을 만들면 완성이다.
내용을 확인하고 싶을 때는 document.write()로 확인할 수 있다.

document.write("따라서, ", userName, "님은 ", normal, " 입니다.");