🚩 20250204_수업내용(반복문*for/switch 문*script/mbti만들기)

오전 수업 ) 자바

전날 숙제 풀이

 

반복문 - for / while / do ~ while

반복 - 몇 번을 반복할거냐, 몇 번을 반복할거냐 정하지 않고 하는 경우와 반복 횟수를 정하여 반복하는 경우 두 가지

-. 주로 반복횟수가 정해진 경우는 for문

-. 반복횟수가 정해져 있지 않은 경우는 while문

 

for문

 ";"이 반드시 두 개 있어야 한다.

초기값 -> 조건식 ->(참) -> {}실행 -> 증감식 -> 조건식  *거짓이 나올 때 까지 반복

 

내가 입력한 숫자 만큼 입력하기

 

총합 구하기

👀 문제 풀어보기
1. 두 개의 정수를 입력하여 두 수 중 작은 숫자부터 큰 숫자까지이 합을 구해보세요.
ex. 1번째 숫자를 21입력하고 2번째 숫자를 4입력했다면 4부터 21일까지의 합구하기

2. 내가 키보드를 입력한 숫자에 해당하는 구구단 출력하기

 

몇 번 반복하고 싶은지 정하여 반복문 만들어보기

1. 동전 앞,뒤면 맞추기 게임을 10판 진행

10번 게임을 하는 동안 몇 번 맞췄는지 출력 & 가위바위보 20번 하는데 몇 번 이기고 몇 번 졌는지

---

오후 수업 ) 자바스크립트

querySelector 사용법

ㄴ 잡아온 클래스/태그/아이디를 변수에 저장해서 사용한다.

 

addEventListener - 이벤트 추가할 때 잡아놓은 변수에게 함수를 사용함

ㄴ (이벤트제목, 이벤트내용) 삽입 *이벤트내용 : 콜백함수 (event : 해당 태그가 제공하는 모든 것) => {}

ㄴ form 태그 한정 함수 = 새로고침 방지(preventDefault 기본값으로 설정된 걸 피하는 함수)

---

eary return 자바스크립트에서 예외처리하는 개꿀팁

---

switch 문

코드를 종료시키는 문법

마지막 줄에서 return  해버리기 때문에 switch문 아래의 코드는 작동하지 않습니다.

  switch (value) {

    case "A":

      return;

      alert("여러분은 망상에 빠져 사는 사람입니다");

    case "B":

      return;

      alert("온실속 화초같은 분, 포기하지 않도록 조심");

    case "C":

      return;

      alert("비타민같은 분입니다 삶의 활력이 넘칩니다");

    default:

      return;

      alert("물러가라 사탄아!");

  }

 

MBTI 만들어보기

const EI = document.querySelector("#ei");

const NS = document.querySelector("#ns");

const FT = document.querySelector("#ft");

const PJ = document.querySelector("#pj");

// let mbti = "";

const btn = document.querySelector("#btn");

EI.addEventListener("change", (event) => {

  mbti = event.target.value;

  console.log(mbti);

});

NS.addEventListener("change", (event) => {

  mbti = event.target.value;

  console.log(mbti);

});

FT.addEventListener("change", (event) => {

  mbti = event.target.value;

  console.log(mbti);

});

PJ.addEventListener("change", (event) => {

  mbti = event.target.value;

  console.log(mbti);

});

btn.addEventListener("click", () => {

  if (EI.value.length !== 1) {

    alert("E or I");

    EI.showPicker(); // select 태그 한정판

    // selet 태그 클릭 했을 때 처럼 옵션 보여줌

    return;

  }

  if (NS.value.length !== 1) {

    alert("N or S");

    EI.showPicker(); // select 태그 한정판

    // selet 태그 클릭 했을 때 처럼 옵션 보여줌

    return;

  }

  if (FT.value.length !== 1) {

    alert("F or T");

    EI.showPicker(); // select 태그 한정판

    // selet 태그 클릭 했을 때 처럼 옵션 보여줌

    return;

  }

  if (PJ.value.length !== 1) {

    alert("P or J");

    EI.showPicker(); // select 태그 한정판

    // selet 태그 클릭 했을 때 처럼 옵션 보여줌

    return;

  }

  const mbti = `${EI.value}${NS.value}${FT.value}${PJ.value}`;

  console.log(mbti);

  const found = mbtis.find((item) => item === mbti);

  if (!found) {

    return alert("존재하지 않는 mbti입니다");

  }

  console.log(personality[mbti.toLowerCase()], mbti);

  alert("당신은 ${mbti}입니다" personality[mbti.toLowerCase()], mbti) ///수정

});