[새싹(SeSAC) 프론트엔드] day12 221101 수업 복습

 

1. 조건문

: 조건을 검사하여 참인지 거짓인지에 따라 서로 다른 작업(코드)을 실행 

 

1) if-else 

: 코드가 한 줄이면 중괄호 {} 생략 가능 

 

1️⃣ if문

- 조건이 참이면 실행문을 실행한 후 if문을 벗어남

- 조건식이 거짓이면 바로 if문을 벗어남 

 

if(조건식) {
    ... 실행문 ... //조건이 참인 경우 
}

if(a>b) {
    document.write("a가 크다");
}

 

2️⃣ if-else 문

- 조건식이 참인 경우와 거짓인 경우에 다른 코드를 실행

 

if(조건식){
    ... 실행문 1 ... //조건식이 참인 경우 
}
else{
    ...실행문 2 ... //조건식이 거짓인 경우 
}

 

(*) 실습

[코드]

var a = 1;
var b = 3;

if(a>b){
  document.write("a가 크다");
}
else{
  document.write("b가 크다")
}

[결과]

3️⃣ 다중 if-else 문

- if-else를 연속 작성하여 각 조건에 맞는 코드를 실행

else-if 사용시 개수 제한은 없음 

: 순서만 if - else if - else로 맞춰주면 됨

if(조건식1){
    실행문1    //조건식1이 참인 경우
}
else if(조건식2){
    실행문2    //조건식 2가 참인 경우
}
else{
    실행문 n    //앞의 모든 조건이 거짓인 경우 
}


if(a>b){
    document.write("a가 크다");
}
else if(a < b){
    documnet.write("b가 크다");
}
else {
    document.wirte("a와 b는 같다");
}

 

if-else 문은 중첩해서 사용할 수 있음

var a = 5;
var b = 3;

if(a > b){
  if(a > 5) {
    document.write("a는 5보다 큽니다")
  }
  else{
    document.wirte("a는 5보다 작습니다")
  }
}

 

 

**prompt("질문", 초기값)

: 사용자로부터 입력 받은 값을 리턴

- 입력받은 값의 데이터 타입 : string (문자열) 

   : 따라서 사용자가 숫자를 입력해도 숫자같은 문자열로 저장됨 "100", "1" 등 

 

**parseInt("문자열")

: 문자열을 숫자 타입으로 변환

 

(+) 변수를 많이 만드면 그만큼 내 컴퓨터의 용량을 많이 잡아먹는 것. 

따라서 굳이 중복되는 변수 선언은 최소한으로 할 것. (리팩토링 잘 해주기)

 

(+) 코드 선언은 최상단에 해줄 것

- 찾고 알아보기 쉽게 : 코드 가독성을 많이 고려해주기 

 

(*) 예습

[코드]

var grade;

//var 변수명 = prompt("질문", 초기값);
var score = prompt("안녕하세요. 정수를 입력하세요", 100);
score = parseInt(score);

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else if (score >= 60) {
  grade = "D";
} else {
  grade = "F";
}
document.write(score + "는 " + grade + "입니다<br>");

 

[결과]

 

 

 

 

(*) 실습

[코드]

var tem = prompt("물의 온도를 입력하세요");
tem = parseInt(tem);

var statusWater;

if (tem >= 100) {
  statusWater = "기체 상태";
} else if (tem > 0 && tem < 100) {
  statusWater = "액체 상태";
} else if (tem <= 0) {
  statusWater = "고체 상태";
}

document.write(statusWater);

[결과]

 

 

(*) 실습 2 

[코드]

var num = prompt("숫자를 입력하세요");
num = parseInt(num);

if (num > 0) {
  if (num % 2 == 0) {
    document.write("0보다 큰 짝수");
  } else {
    document.write("0보다 큰 홀수");
  }
} else {
  document.write("0보다 작거나 같은 수");
}

 

[결과]

 

 

 

2) switch

: 값에 따라 서로 다른 코드를 실행

- case는 값마다 중괄호를 쓰지 않고 

: 로 시작하고, break로 닫아줌 

switch(조건식){
  case 값1:          //조건식의 결과가 값 1과 같을 때 
    실행 문장 1;
    break;

  case 값2:         //조건식의 결과가 값 2과 같을 때
    실행 문장2;
    break;

    ...

  case 값m:         //조건식의 결과가 값m 과 같을 때
    실행 문장 m;
    break;

  default:         //조건식의 결과가 어느 값과도 같지 않을 때
    실행 문장 n;
}

 

- 브레이크를 안 붙여주면 밑에 case까지 계속 이어짐

: break가 있는 case까지 가더나 조건식끝까지 감

(*) 실습

[코드]

var fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("사과");
  case "banana":
    console.log("바나나");
    break;
  case "grape":
    console.log("포도");
    break;
  case "watermelon":
    console.log("수박");
    break;
}

[결과]

 

- 값은 사과인데 break가 없어서 코드가 계속 진행되고 바나나까지 출력하고 break문을 만나서 멈추게 됨

 

 

(*) 실습-2 

[코드]

var day = prompt(
  "영업하는지 확인하고 싶은 요일을 입력해 주세요 \n [예시 : 월]"
);

switch (day) {
  case "월":
    document.write("월요일 ");
  case "화":
    document.write("화요일");
  case "수":
    document.write("수요일 ");
  case "목":
    document.write("목요일 ");
  case "금":
    document.write("금요일 ");
    document.write("정상영업 합니다");
    break;
  case "토":
  case "일":
    document.write("휴일");
    break;
}

[결과]

 

 

** prompt를 여러줄로 쓰고 싶다면 (엔터키를 누르고 싶다면)

\n 사용해서 작성해주기 

"영업하는지 확인하고 싶은 요일을 입력해 주세요 \n [예시 : 월]"

 

 

2.반복문

 

1️⃣ for문

: 조건식이 true인 동안 작업문을 반복하여 실행 

조건식의 결과가 false이면 for문을 종료 

- 초기문은 초기 한 번만 실행

 

** 반복문에서 document.write로 출력하는데 출력문에 css태그 넣고, 중간에 변수명 활용하여 css 값을 넣어주기 

 

[코드]

for (var num = 10; num <= 35; num += 5) {
  document.write("<span style='font-size:" + num + "px'>" + num + "px </span>");
}

 

[결과] 

 

중첩 for문

 

for(var i = 0; i < 5; i++)
{
   for(var j = 0; j < 10; j++)
  {   
      documnet.write("아싸<br>");
  }
}

 

(*)실습

[코드]

for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    document.write(j + "아싸<br>");
  }
  document.write("<hr>");
}

 

[결과]

 

 

(*) 별찍기

[코드]

/**
 * 별찍기
 */
for (var i = 1; i <= 5; i++) {
  for (var j = 0; j < i; j++) {
    document.write("*");
  }
  document.write("<br>");
}

document.write("<br>");

/**
 * 별 반대로 찍기
 */
for (var i = 0; i <= 5; i++) {
  for (var j = 5; j > i; j--) {
    document.write("*");
  }
  document.write("<br>");
}

[결과]

 

2️⃣ while문

 - 조건식이 true인 동안 작업문을 반복 실행 

 - 반복 횟수를 알 수 없는 경우 주로 사용

while - 반복 횟수를 모를때 

for - 반복 횟수가 명확할 때 

 

(*) 실습문제 

[코드]

var num = prompt("0보다 큰 정수를 입력하세요", "25");
numSum = parseInt(num);

var sum = 0;

while (numSum > 0) {
  sum = sum + numSum;
  numSum--;
}

document.write("0에서 " + num + "까지 합은 " + sum);

 

[결과]

 

 

 **. 문제를 풀기위해 --를 활용하여 빼주면서 더해줬는데 ++해주는 방법도 있다 

 

3️⃣ do-while문

- 조건식을 검사하여 true인 동안 작업문이 반복 실행

- 작업문은 최소 한 번은 실행

 

(*) 

[코드]

var num = prompt("0보다 큰 정수를 입력하세요", "25");
num = parseInt(num);

var sum = 0;
do {
  sum = sum + num;
  num--;
} while (num > 0);

document.write("합은 " + sum);

 

[결과]

**do-while문도 그냥 --로 계산함 

 

*** prompt에 parseInt하기 귀찮다면 

var num = parseInt(prompt("0보다 큰 정수를 입력하세요", "25"));

그냥 묶어서 받아도 동일하게 된다 

 

 

4️⃣ break 문

: 반복문을 종료하고 빠져나옴

- 여러 개의 반복문으로 중첩된 경우, 현재 반복문 하나만 빠져나옴 

 

(*)실습

 

[코드]

/**
 * while(true){
 * sum = sum + num;
 * num++;
 * !! num을 여기써주면 하나 더 더해지기 때문에 if문 밑으로 가줘야 올바른 값이 나온다
 *
 * if(sum > 3000 ){
 *   i값을 출력
 *   break;
 * }
 * }
 */

var num = 1;
var sum = 0;
while (true) {
  sum += num;

  if (sum > 3000) {
    document.write(
      "1에서 " + num + "까지 더하면 3000을 넘긴다 <br> 그 합계는 : " + sum
    );
    break;
  }
  num++;
}

[결과]

 

 

5️⃣ countinue 

: 반복 코드 실행을 중단하고, 다음 반복으로 바로 이동함 

 

 

(*) 실습

[코드]

var sum = 0;
for (var i = 0; i <= 10; i++) {
  if (i % 3 != 1) {
    continue;
  }
  document.write(i + " ");
  sum += i;
}
document.write(" 합은 " + sum);

 

[결과]

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 3주차 블로그 포스팅(화)