🔥 [UIUX] 0106 JAVASCRIPT Coding, 코딩 초급 4

✏️ 2025. 1월 6일 / javascript 초급 4

💡 유연한 적정 체중 계산기 만들기!
이번에는 자바스크립트를 이용하여 적정 체중을 계산하는 문항을 만들어보려합니다.
우선, 적중 체중을 구하는 공식은 (본인 몸무게 - 100) * 9 입니다.
해당 값을 변수에 넣은 후, 프롬프트를 사용하여 적정 체중을 알려주는 공식을 만들어보겠습니다!

* 사용자의 정보를 입력 받습니다.
var user_name = prompt("당신의 이름을 입력해주세요.", "ex)김땡땡");
      var user_height = prompt("당신의 키를 입력해주세요.");
      var user_weight = prompt("당신의 체중을 입력해주세요.");

* 적정 체중을 구하는 공식을 넣어줍니다.
var normal_weight = (user_height - 100) * 0.9;

*      +-5kg의 오차범위를 가진 평균 체중 계산기
       result = 사용자가 입력한 몸무게 >= 평균체중-5 && 사용자가 입력한 몸무게 <= 평균체중 + 5;
       [계산 순서]
       1. 평균체중-5, 평균체중+5
       2. 사용자가 입력한 체중 >= 평균체중-5, 사용자가 입력한 체중 <= 평균체중+5
       3. true / false && true / false
--------------------------------------------------------------------
var result =
        user_weight >= normal_weight - 5 && user_weight <= normal_weight + 5;

* result : true/false ? true면 반환될 코드 : false면 반환될 코드;
result = result
        ? user_name + "님은 적정체중입니다."
        : user_name + "님은 적정체중이 아닙니다.";
        var result2 = user_name + "님의 적정체중은 :" + normal_weight + "입니다.";
      document.write(result, "<br/>");
      document.write(result2, "<br/>");

💡 실습, 심화 - 김땡땡의 하루 지출 내역 계산하기!
문제 : 김땡땡의 하루 지출 내역이 아래와 같다고 할 때, 하루 지출 비용의 합계를 구한 후
적정 지출 비용의 초과 여부를 출력해주세요.
[하루 지출 내역]
- 교통비 : 3000원
- 식비 : 6000원
- 음료수 : 3000원
삼항 조건 연산자로 하루 적정 지출 비용인 만원을 초과했다면 "~원 초과", 초과하지 않았다면
"돈 관리 잘했어요!" 를 출력해주세요.

<script>
      var price1 = 3000; //교통비
      var price2 = 6000; //식비
      var price3 = 3000; //음료비
      //하루 지출 비용
      var todayprice = price1 + price2 + price3;
      var remainder = todayprice % 10000;
      var total =
        todayprice > 10000
          ? remainder + "원 초과 ʕ •̀ ω •́ ʔ"
          : "돈 관리 잘했어요! ( • ᴗ - ) ✧";
      document.write(total);

👑 제어문 中 조건문
💻 제어문에 대해 알려드릴게요.
제어문은 프로그램의 흐름(알고리즘)을 제어할 수 있도록 도와주는 문장을 말합니다.
제어문에는 조건식의 만족 여부에 따라 코드를 제어하는 조건문과
조건문과 변수의 값이 일치하는지의 여부에 따라 코드를 제어하는 선택문과
코드를 원하는 횟수만큼 반복시키는 반복문이 있습니다.
💻 제어문 3가지중 조건문에 대해 알아봅시다.
조건문은 조건식이 true인지, false인지에 따라 코드를 제어하는 제어문으로,
if문과 else문 else if문이 있습니다.
🔔 조건문 - if
if문은 조건식을 만족할(true)경우에만 코드를 실행시킵니다.
해석을 할 때에는 만약에(if) 조건식이 만족할 경우(true일 경우)
{}안의 코드를 실행시킵니다. 라고 해석할 수 있습니다.
조건식은 앞에서 배웠던 Boolean()메서드와 마찬가지로 어떤 데이터를 입력하든
true 또는 false 값을 반환합니다.

[기본형]
     if(조건식){ 조건식이 true일 경우 실행될 코드; }

🔔 조건문 - if / 도전! 실습
🎧 만약에 num이 100보다 작으면 화면에 "hello" 문구를 출력하겠습니다.

var num = 10;
      if (num < 100) {
        document.write("hello", "<br />");
      }

🎧 사용자로부터 하루 몇 보를 걷는지 질문하여 입력받은 값이
10000이상이면 "매우 좋은 습관을 가지고 있으시군요!"를 출력하겠습니다.

var walkAmount = prompt(
        "하루에 몇보를 걸으시나요?",
        "숫자로 입력해주세요."
      );

if (walkAmount >= 10000) {
        document.write("매우 좋은 습관을 가지고 있으시군요!", "<br />");
      }

🎧질의응답창으로 사용자에게 "당신의 하루 통화량은 몇 분인가요?"라고 묻고,
만약 60분 이상이면 "많이 통화하는 편이네요." 라고 출력하겠습니다.

var user_call = prompt(
        "당신의 하루 통화량은 몇 분인가요?",
        "숫자만 입력해주세요(분)"
      );

      if (user_call >= 60) {
        document.write("많이 통화하는 편이네요.", "<br/>");
      }

var user_name = prompt("당신의 이름을 알려주세요.");

      if (user_name) {
        document.write("사용자 이름:" + user_name + "입니다", "<br/>");
      }

👑 제어문 中 조건문 2
🔔 조건문 - else문
else문은 if문의 조건식이 false일 경우 실행시킬 코드를 제어하는 제어문 입니다.
else문은 단독으로 쓸 수 없고, if문 다음으로 작성해야 합니다.
즉, 조건식을 만족할 경우(true)와 만족하지 못할 경우(false) 실행되는 코드가 달라집니다.
두 가지 결과가 나올 수 있다는 뜻입니다.
else문은 해석할 때 '그렇지 않으면~'이라고 해석할 수 있습니다.

[기본형]
   if(조건식){
    조건식이 true일 경우 실행될 코드;
   }else{
   조건식이 false일 경우 실행될 코드;
   }

💿 confirm() - 컨펌창
'컨펌창'이라고 하며 사용자로부터 확답을 받는 '확인 취소 창'을 말합니다.
사용자가 확인 버튼을 누르게 되면 true 값이 반환되고,
취소 버튼을 누르게 되면 false 값이 반환됩니다.

[기본형]
   confirm("메세지");

🔔 조건문 - else / 도전! 실습
🎧회원의 탈퇴여부를 묻는 컨펌창을 만들어보겠습니다.

var result = confirm("정말로 회원을 탈퇴하시겠습니까?");
      if (result) {
        document.write("정상적으로 회원탈퇴 처리되었습니다.", "<br/>");
      } else {
        document.write("회원탈퇴 처리를 취소하였습니다 :)", "<br/>");
      }

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)