🍦Vanilla JS ③ 조건문과 반복문

조건문

• 자바스크립트에서 조건문은 조건에 따라 다른 코드를 실행하는데 사용됩니다.
• 조건문은 if, else if, else 키워드를 사용하여 구성됩니다.

if문

if (조건식) {
    조건식의 결과가 참일 때 실행하고자 하는 명령문;
}

if ~ else문

if (조건식) {
	조건식이 참일 때 실행될 문장
} else if (조건식) {
	첫번째 조건식이 거짓이고 현재의 조건이 참인 경우 실행 될 문장
} else {
	조건식이 거짓일 때 실행 될 문장
}

let num = prompt("숫자를 입력 하세요 : ", "");
if(num >= 0) {
    document.write("<h2>" + num + "은 양수 입니다." + "</h2>");
} else {
    document.write("<h2>" + num + "은 음수 입니다." + "</h2>");
}

---

🍦연습문제

• 주민 등록 번호를 입력 받아 성별, 나이, 출력 하기

let age, birthYear, gender, jumin;

while(true) {
  jumin = prompt("주민번호를 입력하세요. : " + "");
  if(jumin.length != 14 || jumin.indexOf("-") == -1) {
    alert("다시 입력하세요.");
  } else break;
}

// 성별
if(jumin.charAt(7) == "1" || jumin.charAt(7) == "3") {
  gender = "남성";
} else gender = "여성";

// 나이
if(jumin.charAt(7) == "1" || jumin.charAt(7) == "2") {
  birthYear = "19" + jumin.substring(0,2);
} else birthYear = "20" + jumin.substring(0,2);

let today = new Date();
let month = today.getMonth() + 1;
let date = today.getDate();
let birth = String(month) + String(date);
if(birth.length == 3) birth = "0" + birth;

if(Number(birth) < Number(jumin.substring(2,6))) age = (today.getFullYear() - birthYear) - 1;
else age = today.getFullYear() - birthYear;

document.write(`<h3> 현재 당신의 나이는 ${age}살 이고, 성별은 ${gender} 입니다. </h3>`);

---

switch 문

 * 자바와 형식 동일

switch(상수 값) {
	 case 상수 값1 :
		 // 실행할 코드
		 break;
	 case 상수 값2 :
		 // 실행할 코드
		 break;
	 case 상수 값3 :
		 // 실행할 코드
		 break;
	 default : // case절의 상수 값이 모두 일치하지 않는 경우
		 // 실행할 코드
		 break;
}

let d = new Date();
let day = d.getDay(); // 요일을 배열로 담아서 index를 return 하나봄.
let dayName = "";

switch(day) {
  case 0 :
    dayName = "일요일";
    break;
  case 1 :
    dayName = "월요일";
    break;
  case 2 :
    dayName = "화요일";
    break;
  case 3 :
    dayName = "수요일";
    break;
  case 4 :
    dayName = "목요일";
    break;
  case 5 :
    dayName = "금요일";
    break;
  case 6 :
    dayName = "토요일";
    break;
  default :
    dayName = "";
}
console.log(dayName);

조금 더 효율적으로 돌리기 (O(n) -> O(1))

let d = new Date();
let day = d.getDay();
let dayName = "";

const dayNames = [
  "일요일",
  "월요일",
  "화요일",
  "수요일",
  "목요일",
  "금요일",
  "토요일"
]
console.log(dayNames[day]);

---

반복문

• while, do ~ while, for, for ~ in, for ~ of

기본 for 문

let brands = ["애플", "구글", "페이스북", "아마존", "삼성전자"];
for(let i = 0; i < brands.length; i++) {
    console.log(brands[i]);
}

for ~ of 문

• 자바의 향상된 for문과 유사하며 ES6에서 추가된 자바스크립트 반복문 중 하나 입니다.
• 루프를 사용하면 배열이나 이터러블 객체의 요소를 순회할 수 있습니다.

let brands = ["애플", "구글", "마이크로소프트", "페이스북", "아마존", "삼성전자"];

for(let brand of brands) {
  console.log(brand);
}

for ~ in 문

• 객체의 프로퍼티를 열거하는데 사용됩니다.

let person = {
  fname : "John",
  lname : "Doe",
  age : 25 
};

for(let key in person) {
  console.log(person[key]);
}

John
Doe
25

while 문

• 조건이 참(true)인 동안, 중괄호 안의 코드가 실행됩니다.

let treeHit = 0;
while(treeHit < 10) {
    treeHit++;
    document.write("<p>나무를 " + treeHit + "번 찍었습니다.</p>");
    if(treeHit == 10) {
        document.write("나무가 넘어 갑니다.");
    }
}

do ~ while 문

• while 조건이 참인 동안, 중괄호 안의 코드가 실행되고, 마지막에 조건이 검사됩니다.

let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 5);

---

🍦예제1 - 자판기

🧃 고객이 구입 가능한 음료 리스트 구하기

• productList 배열에 상품 정보가 객체로 저장됩니다.
• inputCoin 변수에 800이 저장됩니다.
• productList 배열의 길이(len)가 계산됩니다.
• for문을 이용하여, productList 배열을 처음부터 끝까지 반복합니다.
• 만약 현재 상품의 가격이 입력된 돈 이하라면, outputList 배열에 추가됩니다.
• 모든 상품에 대한 반복이 끝난 후, outputList 배열에 저장된 상품들이 출력됩니다.

let productList = [
  {
    name : "레쓰비",
    price : 700
  },
  {
    name : "박카스",
    price : 1000
  },
  {
    name : "포카리스웨트",
    price : 1700
  },
  {
    name : "티오피",
    price : 850
  },
  {
    name : "삼다수",
    price : 500
  },
  {
    name : "비타500",
    price : 1200
  }
];

let inputCoin = 1000;
let len = productList.length; // 배열의 길이
let outputList = [];
for(let i = 0; i < len; i++) {
  if(productList[i].price <= inputCoin) {
    outputList.push(productList[i]); // 배열의 끝에 새로운 요소를 추가
  }
}
console.log(outputList);

[
  { name: '레쓰비', price: 700 },
  { name: '박카스', price: 1000 },
  { name: '티오피', price: 850 },
  { name: '삼다수', price: 500 }
]

🍦예제2 - 상근날드

🍔 상근날드 : 3개의 햄버거와 2개의 음료의 가격을 입력 받아 제일 싼 세트 메뉴의 가격 구하기 (50원 할인)

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }
    .menu {
      width: 400px;
      height: 300px;
      box-shadow: 1px 1px 5px #000;
      border-radius: 10px;
      background-image: url(./images/ham2.png);
      background-size: cover;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .menu p {
      font-size: 4em;
      font-weight: bold;
      color: yellow;
    }
  </style>
</head>
<body>
  <h2>세트 메뉴 가격</h2>
  <div class="menu">
    <p id="value"></p>
  </div>

  <script src="./230324_2_2_상근날드.js"></script>
</body>
</html>

 

JavaScript

let menu = [];
let tmp;
tmp = prompt("상덕버거 가격 입력 : ", "");
menu[0] = Number(tmp);
tmp = prompt("중덕버거 가격 입력 : ", "");
menu[1] = Number(tmp);
tmp = prompt("하덕버거 가격 입력 : ", "");
menu[2] = Number(tmp);
tmp = prompt("콜라 가격 입력 : ", "");
menu[3] = Number(tmp);
tmp = prompt("사이다 가격 입력 : ");
menu[4] = Number(tmp);

let minB = menu[0];
let minD = menu[3];
for (let i = 0; i < menu.length; i++) {
    if (i < 3 && minB > menu[i]) minB = menu[i];
    if (i > 2 && minD > menu[i]) minD = menu[i];
};
document.getElementById("value").innerHTML = (minD + minB - 50) + "원";

🍦예제3 - 구구단 출력

• 자바스크립트, HTML, CSS를 사용하여 구구단 출력하기

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>구구단 출력 하기</title>
</head>
<body> 
    <h1>구구단</h1>
    <script src="./sample.js"></script>
</body>
</html>

CSS

table {
    margin: 20px;
    float: left;
}

table, th {
    border: 1px solid #ccc;
    border-collapse: collapse;
}
th, td { padding: 10px 15px;}
th {background: #eee;}
td {border: 1px dotted #222;}

JavaScript

let i, j;
for (i = 1; i <= 9; i++) {
    document.write("<table>");
    document.write("<tr><th>" + i + "단</th></tr>");
    for (j = 1; j <= 9; j++) {
        document.write("<tr><td>" + i +" X " + j + " = " + i*j + "</td></tr>");
    }
    document.write("</table>");
}