본문 바로가기

Computer/HTML, CSS, Javascript

[Javascript] 과제: 조건

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals

 

실력을 평가해 보세요: 조건문 - Web 개발 학습하기 | MDN

이 실력 평가의 목적은 여러분이 판단을 만드세요 — 조건문 문서를 잘 이해했는지 평가하기 위함입니다.

developer.mozilla.org

(사이트에 한국어로 설명이 나와 있습니다.)

 

조건문 1

문제 및 풀이

 간략하게 설명하면 변수 season에 'summer'가 포함되어 있는 경우 변수 response에 summer라는 설명을, 'winter'가 포함되어 있는 경우라면 winter season이라는 설명을 마지막으로 둘 다 포함되지 않는 경우에는 다른 응답이 결과에 나오게 코드를 구현하면 됩니다.

 

저는 문자열에 어떤 값이 포함되어 있는지 없는지를 알려주는 includes() 메서드를 사용하여 조건문을 구현하였습니다.

마지막으로 테스트 조건에는 season 값이 각각 'winter', 'spring', 'summer season'을 넣어 winter인 경우에 어떤 답이 나오는지, 둘 다 없을 경우에는 어떤 답이 나오는지 summer를 포함만 하는 경우에 어떤 답이 나오는지 표시하였습니다.

let season = 'summer';
let response;

// Add your code here
//  season = 'winter';
// season = 'spring';
// season = 'summer season';

if (season.includes('summer')) {
    response = "This season is summer.";
  } else if (season.includes('winter')) {
    response = "This season is winter.";
  } else {
    response = "I don't know what season is.";
  }

  

// Don't edit the code below here!

const section = document.querySelector('.preview');
section.innerHTML = ' ';
let para1 = document.createElement('p');
para1.textContent = response;
section.appendChild(para1);

결과

This season is summer. // season = 'summer' 인 경우

This season is winter. // season = 'winter' 인 경우

I don't know what season is. // season = 'spring' 인 경우

This season is summer. // season = 'summer season' 인 경우

 

조건문 2

문제 및 풀이

사이트에서 볼 수 있듯이 변수 response, score, machineActive가 주어집니다. 먼저 기계가 작동하지 않는 경우 그에 따른 응답을 표시하고 기계가 작동하는 경우, score에 따라 표시해야 하는 응답이 달라집니다. 이를 구현하세요.

  • 0보다 작거나 100보다 큰 점수 — "이것은 가능하지 않습니다, 오류가 발생했습니다."
  • 0에서 19의 점수 — "끔찍한 점수입니다 — 완전한 실패입니다!"
  • 20에서 39의 점수 — "조금 알긴 하지만 꽤 나쁜 점수입니다. 발전이 필요합니다."
  • 40에서 69의 점수 — "그런대로 잘 하셨네요, 나쁘지 않습니다!"
  • 70에서 89의 점수 — "훌륭한 점수입니다, 정말로 잘 아시는군요."
  • 90에서 100의 점수 — "놀라운 점수입니다! 커닝하셨나요? 진짜인가요?"

이 문제는 중첩 조건문을 사용할 수 있는지에 대해 묻고 있습니다. 저는 그래서 일단 가장 바깥에 있는 조건문에 기계가 작동하는지 여부를 묻고 기계가 작동하면 그제서야 if...else if문을 사용하여 구현하였습니다. 이는 아래와 같습니다.

let response;
let score = 75;
let machineActive = false;

// Add your code here

// second case (machineActive = true;)
 machineActive = true;

// third case (score = 15, machineActive = true;)
 score = 15;

// fourth case (score = 35, machineActive = true;)
// score = 35;

// fifth case (score = 55, machineActive = true;)
// score = 55;

// sixth case (score = 95, machineActive = true;)
// score = 95;

// seventh case (score = 1000, machineActive = true;)
// score = 1000;

// eighth case (score = -15, machineActive = true;)
// score = -15;

if (!machineActive) {
  response = "기계의 전원을 켜 주시기 바랍니다.";
} else {
  if (score <0 || score>100) {
    response = "이것은 가능하지 않습니다, 오류가 발생했습니다.";
} else if (score >= 0 && score <= 19) {
    response = "끔찍한 점수입니다 — 완전한 실패입니다!";
} else if (score >= 20 && score <= 39) {
    response = "조금 알긴 하지만 꽤 나쁜 점수입니다. 발전이 필요합니다.";
} else if (score >= 40 && score <= 69) {
    response = "그런대로 잘 하셨네요, 나쁘지 않습니다!";
} else if (score >= 70 && score <= 89) {
    response = "훌륭한 점수입니다, 정말로 잘 아시는군요.";
} else if (score >= 90 && score <= 100) {
    response = "놀라운 점수입니다! 커닝하셨나요? 진짜인가요?";
}

}

// Don't edit the code below here!

section.innerHTML = ' ';
let para1 = document.createElement('p');
let para2 = document.createElement('p');

para1.textContent = `Your score is ${ score }`;
para2.textContent = response;

section.appendChild(para1);
section.appendChild(para2);

결과

Your score is 75 // 첫 번째 경우

기계의 전원을 켜 주시기 바랍니다

 

Your score is 75 // 두 번째 경우

훌륭한 점수입니다, 정말로 잘 아시는군요.

 

Your score is 15 // 세 번째 경우

끔찍한 점수입니다 — 완전한 실패입니다!

 

Your score is 35 // 네 번째 경우

조금 알긴 하지만 꽤 나쁜 점수입니다. 발전이 필요합니다.

 

Your score is 55 // 다섯 번째 경우

그런대로 잘 하셨네요, 나쁘지 않습니다!

 

Your score is 95 // 여섯 번째 경우

놀라운 점수입니다! 커닝하셨나요? 진짜인가요?

 

Your score is 1000 // 일곱 번째 경우

이것은 가능하지 않습니다, 오류가 발생했습니다.

 

Your score is -15 // 여덟 번째 경

이것은 가능하지 않습니다, 오류가 발생했습니다.

조건문 3

문제 및 풀이

위의 조건문 2의 문제를 switch문으로 대신 작성하는 문제입니다.

switch로 범위를 작성하는 경우에는 switch (true)라고 작성한 뒤에 case에 직접 범위를 넣어주면서 코드를 작성하였습니다. 이는 아래와 같습니다.

if (!machineActive) {
  response = "기계의 전원을 켜 주시기 바랍니다.";
} else {
  switch (true) {
    case (score < 0 || score > 100):
      response = "이것은 가능하지 않습니다, 오류가 발생했습니다.";
      break;
    case (score >= 0 && score <= 19):
      response = "끔찍한 점수입니다 — 완전한 실패입니다!";
      break;
    case (score >= 20 && score <= 39):
      response = "조금 알긴 하지만 꽤 나쁜 점수입니다. 발전이 필요합니다.";
      break;
    case (score >= 40 && score <= 69):
      response = "그런대로 잘 하셨네요, 나쁘지 않습니다!";
      break;
    case (score >= 70 && score <= 89):
      response = "훌륭한 점수입니다, 정말로 잘 아시는군요.";
      break;
    case (score >= 90 && score <= 100):
      response = "놀라운 점수입니다! 커닝하셨나요? 진짜인가요?";
      break;
    default:
      response = "이것은 가능하지 않습니다, 오류가 발생했습니다.";
      break;
}
}

결과

Your score is 95 // 기계가 켜져있고 score=95인 경우입니다.

놀라운 점수입니다! 커닝하셨나요? 진짜인가요?

조건문 4

문제 및 풀이

이 문제는 4개의 변수 machineActive, machineResult, pwd, pwdResult가 주어집니다. if...else문을 활용하여 기계가 켜져있는 경우에 pwd와 pwdResult를 비교하여 로그인할 수 있는지 알려주게 합니다. 그렇지 않은 경우 기계가 꺼져있다는 응답을 machineResult에 저장하여야 합니다.

기계가 켜진 경우 pwd와 'cheese'를 비교하여 일치하는 경우 로그인에 성공했다는 메시지를 일치하지 않는 경우에는 로그인에 실패했다는 메시지를 pwdResult에 저장하여 표시합니다. 다만, 이 때 if...else구문을 사용하지 않고 한 줄로 작성하여야 합니다.

 

저는 이 문제를 보고 조건문 2, 3 문제처럼 중첩 조건문을 사용하지만 마지막 문단 마지막 줄을 보고 삼항연산자를 활용해야 한다는 생각이 들었습니다. 따라서 좀 더 명확한 검사를 하기 위해서 '==='를 사용하여 pwd가 'cheese'인 경우 로그인 됐다는 표시를 그렇지 않은 경우에는 로그인에 실패했다는 표시를 하였습니다.

let machineActive = true;
let pwd = 'cheese';

let machineResult;
let pwdResult;

// Add your code here
// pwd = 'cheeese';
// machineActive = false;

if (!machineActive) {
  machineResult = "기계가 켜져 있지 않습니다.";
} else {
  (pwd === 'cheese') ?
    pwdResult = "성공적으로 로그인되었습니다."
  :
    pwdResult = "로그인 시도에 실패했습니다.";
}

// Don't edit the code below here!

section.innerHTML = ' ';
let para1 = document.createElement('p');
let para2 = document.createElement('p');

para1.textContent = machineResult;
para2.textContent = pwdResult;

section.appendChild(para1);
section.appendChild(para2);

결과

성공적으로 로그인되었습니다. // pwd='cheese', machineActive = true인 경우

로그인 시도에 실패했습니다. // pwd='cheeese', machineActive = true인 경우

기계가 켜져 있지 않습니다. // machineActive = false인 경우

 

 

 

 

오늘은 일요일이네요. 오류 있으면 댓글 남겨주시고 좋은 하루 되세요!

728x90