11강 / input, change 이벤트와 and, or 연산자

input 이벤트와 change 이벤트

input 이벤트

<input> 태그에서 발생하는 이벤트들이 있다.
input이벤트와 change 이벤트인데 <input> 안에 뭔가 입력할 때 발생한다.
진짜인지 확인하려면 <input>하나 찾아서 이벤트리스너 장착해보자.

const formIdInput = document.querySelector("#modal-id");

formIdInput.addEventListener("input", test);

function test() {
  console.log("안녕");
}

▲ <input>에 입력된 값이 변경될 때 input 이벤트가 발생한다.
<input>에 뭐 입력해보면 그 때마다 콘솔창에 안녕이 출력되는 것을 볼 수 있다.

change 이벤트

const formIdInput = document.querySelector("#modal-id");

formIdInput.addEventListener("change", test);

function test() {
  console.log("안녕");
}

▲ <input>에 입력된 값이 변경되고 커서를 다른 곳에 찍으면 change 이벤트가 발생한다.
<input>에 뭐 입력하고 커서를 다른데 찍어보자. 안녕이 출력되는 것을 볼 수 있다.

그래서 <input> 값이 변경되었을 때 뭔가 코드를 실행하고 싶으면
input, change 이벤트리스너를 활용해보면 될 것 같다.

---

true/false 자료

if 조건문 자리에는 == 등호 이런게 아니라 true, false를 넣어야 잘 작동한다.

if (true){
 console.log('진짜임')
}

진짜로 true 넣으면 if문이 실행 잘된다.
true는 참, false는 거짓을 뜻하는 자료형이다.
멋진 개발자말로 boolean 타입이라고 부른다.
boolean 타입

Q. 그럼 1 == 1 이런거 넣어도 if문 잘 작동하는 이유는?

A. 1 == 1 쓰면 그 자리에 true 아니면 false 가 자동으로 남아서 그렇다.
콘솔창에 1 == 1 출력해보자

Q. 타입이 뭐야?

자료가 무슨 형식을 가지고 있는지 구분하기 위한 용어이다.
123은 숫자타입 '123'은 문자타입 true는 boolean타입 이렇게 부르고
포켓몬으로 비유하면 불타입 비행타입 그런거랑 비슷하다!
데이터 타입

---

다른지 같은지 비교하고 싶으면? 비교연산자

비교연산자

console.log(2 != 1)

다름을 비교하고 싶으면 != 쓰면 된다.
위 코드는 그래서 true가 콘솔창에 출력된다!

console.log(2 == '2')//true 나옴console.log(2 === '2')//false 나옴

같다고 비교하려면 == 쓰면 된다고 했는데 실은 === 이것도 있다!
== 이건 느슨한 비교
=== 이건 엄격한 비교이다.
== 느슨한 비교는 자료의 타입변환을 지가 알아서 해보고 동일하면 true라고 판정해준다.
=== 엄격한 비교는 자료의 타입까지 동일해야 true라고 판정해준다.

---

if문 안에서 true, false 역할을 하는 자료들도 있다.

0
''
null
undefined
NaN

이런 것들은 if문 소괄호 안에서 false랑 같은 역할을 한다.

0제외 모든 숫자
'아무문자'
[]
{}

이런 것들은 if문 소괄호 안에서 true랑 같은 역할을 한다.

---

and/or 연산자

논리연산자

if문 소괄호 안에 조건식을 여러개 동시에 입력하고 싶을 때가 있다.
1 == 1
2 == 2
이런거 동시에 비교해서 참이면 뭔가 코드를 실행하고 싶으면 and/or 기호와 함께 적으면 된다.

and

if (1 == 1 && 2 == 2){
  console.log('안녕')
}

&& 기호는 논리학의 and 역할을 해준다.
그니까 왼쪽 오른쪽이 둘 다 true면 전체를 true로 바꿔준다.

if (1 == 1 && 2 == 3){
  console.log('안녕')
}

왼쪽 조건은 true이지만 오른쪽 조건은 false이기 때문에 '안녕'문구가 출력이 되지 않는다.

or

if (1 == 1 || 2 == 3){
  console.log('안녕')
}

|| 기호는 논리학의 or 역할을 해준다.
그니까 왼쪽 오른쪽 둘 중 true가 적어도 1개 있으면 전체를 true로 남겨준다.

if (1 == 4 || 2 == 3){
  console.log('안녕')
}

두 조건다 false이기 때문에 콘솔에 '안녕' 문구가 출력 되지 않는다.

---

12강 if/else, function 실력향상 과제

문제 1

Q1. 철수는 369게임을 더럽게 못합니다.

실제 369게임 말고 약간 쉽게 각색해서
'3의 배수에서' 박수를 치면 되는 게임을 하고 있습니다.
근데 철수는 바보라 숫자를 하나 주었을 때 이 숫자가 3의 배수인지 아닌지 파악하기 넘나 힘든 관계로
프로그래밍으로 이 문제를 해결하려고 합니다.
어떤 숫자를 함수 안에 집어넣으면 박수를 쳐야할 지 말아야할 지 판단해주는 함수를 만들려고 하는데
어떻게 함수를 만들어야할까요?

function game369() {
//빨리 이 함수를 디자인해봅시다.
}

실행결과 예시 :
game369(6); 실행하면 3의 배수니까 콘솔창에 '박수'라는 글자가 떠야합니다.
game369(12); 실행하면 3의 배수니까 콘솔창에 '박수'라는 글자가 떠야합니다.
game369(11); 실행하면 3의 배수 아니니까 콘솔창에 '통과'라는 글자가 떠야합니다.

힌트 :
자바스크립트엔 % 나머지 연산자가 있다.

풀이

HTML / JS 파일 생성

문제를 풀기 위해 index파일에서 하지 않고 따로 `if_test라는 파일을 만들어 문제를 풀 것이다.

3의 배수인지 파악하는 방법

나머지 값을 확인하면 배수인지를 쉽게 확인할 수 있다.

• 1을 3으로 나누면 나머지는 1이다.
• 2를 3으로 나누면 나머지는 2이다.
• 3을 3으로 나누면 나머지는 0이다.
• 4를 3으로 나누면 나머지는 1이다.
  즉 3으로 나누기 시작하면 나오는 값은 0, 1, 2가 된다.
  자바스크립트에서 나머지 값은 %을 이용하면 된다.
  3의 배수인지 파악하는 방법

prompt 함수

JavaScript에서 prompt() 함수는 사용자에게 입력을 요청하는 프롬프트 상자를 화면에 표시하기 위해 사용된다.
프롬프트 상자에서 계속 진행하려면 "확인" 또는 "취소" 버튼을 클릭해야 한다.

우리는 prompt를 사용하여 숫자를 집어넣고 그 숫자가 3의 배수라면 '박수'가 나오고 아니라면 '통과'라는 문구가 나오게 할 것이다.


prompt 사용법은 아래와 같다.
prompt() 함수는 두 개의 인수를 가지는 함수이며, 사용하는 즉시 프롬프트 상자가 화면에 표시된다.

prompt(프롬프트 상자에 표시되는 레이블, 프롬프트 상자의 텍스트 박스에 표시되는 문자열(생략가능))

프롬프트 상자에서 "확인" 버튼을 클릭하면 사용자가 입력한 값을 반환하는데 값 유형이 문자열이다.
사용자 입력 값을 숫자로 얻고 싶은 경우 타입을 변환해야 한다.
prompt 함수

1. prompt 함수를 변수로 지정하기

우리는 prompt에서 적은 값이 3의 배수인지 알아야하기 때문에 변수에 그 값을 넣어 보관하고 있어야 한다.

const number369 = prompt("숫자를 입력하세요");

아래 결과와 같이 콘솔에 number369를 찍어보니 prompt에 적은 값이 나오는 것을 볼 수 있다.

2. 값이 3의 배수인지 확인하는 game369함수 만들기

방법 1

const number369 = prompt("숫자를 입력하세요");

function game369(number) {
  if (number % 3 == 0) {
    console.log("박수");
  } else if (number % 3 != 0) {
    console.log("통과");
  }
}

game369(number369);

작동원리는 아래와 같다.

• 1. prompt가 나오면 숫자를 입력하면 그 숫자는 number369에 들어간다. (string 문자열 타입으로)
• 2. number369는 game369 argument로 들어가게 된다
• 3. game369의 parameter는 number369의 값이다.
• 4. game369의 parameter는 3으로 나누어진 나머지가 0이라면 '박수'라는 문구가 나온다.
• 5. 그게 아니라면 '통과'라는 문구가 나온다.

방법 2 (스터디원 추천)

const number369 = prompt("숫자를 입력하세요");

function game369(number) {
  if (number % 3 == 0) {
    console.log("박수");
  } else console.log("통과");
}

game369(number369);

else if문을 쓰기보다 else를 사용하여 코드를 더 줄이는 방법을 택하였다!

결과

실행결과 예시대로 한 결과이다.

---

문제 2

Q2. 하지만 369게임 업그레이드 버전이 등장했습니다.

369게임 업그레이드 버전은 3의 배수에서 박수를 치는건 맞지만
9의 배수에서는 박수를 두번 쳐야합니다.
철수는 역시나 이것도 프로그래밍으로 이 문제를 해결하려고 합니다.
아까 만들었던 369게임() 함수를 어떻게 고치면 될까요?

function game369() {
//빨리 이 함수를 디자인해봅시다.
}

실행결과 예시 :
game369(6); 실행하면 콘솔창에 '박수'라는 글자가 떠야합니다.
game369(9); 실행하면 콘솔창에 '박수x2'라는 글자가 떠야합니다.
game369(11); 실행하면 콘솔창에 '통과'라는 글자가 떠야합니다.

참고1) 함수이름 작명시 맨 처음 단어는 숫자를 사용하시면 안됩니다.
참고2) 페이지 내의 다른 곳에서 자바스크립트 문법 에러가 뜨는 경우 다른 코드도 실행이 제대로 되지 않습니다.
콘솔창에 에러가 없는지 한번 확인해보십시오.

풀이

1. game369함수 변경

JS의 함수는 위에서 밑으로 읽는 코드이기 때문에 3의배수 조건문을 먼저 넣는다면 9의 숫자가 들어갔을 때 '박수x2'가 나올게 아니라 3의 배수인 '박수'가 나올 것이다.
그렇기 때문에 9의배수 조건문을 먼저 넣어야겠다고 생각했다.

const number369 = prompt("숫자를 입력하세요");

function game369(number) {
  if (number % 9 == 0) {
    console.log("박수x2");
  } else if (number % 3 == 0) {
    console.log("박수");
  } else console.log("통과");
}

game369(number369);

• 1. prompt가 나오면 숫자를 입력하면 그 숫자는 number369에 들어간다. (string 문자열 타입으로)
• 2. number369는 game369argument로 들어가게 된다
• 3. game369의 parameter는 9로 나누어진 나머지가 0이라면 '박수'라는 문구가 나온다.
• 4. game369의 parameter는 3으로 나누어진 나머지가 0이라면 '박수'라는 문구가 나온다.
• 5. 그게 아니라면 '통과'라는 문구가 나온다.

결과

---

문제 3

Q3. 공인중개사 시험점수를 입력하면 합격인지 알려주는 함수를 만들어봅시다.

공인중개사 1차 시험은 개론, 민법 2개 과목이 있습니다.
과목마다 100점 만점이지만 두 과목 합해서 120점 이상이면 합격시켜줍니다.
다만 한 과목이 40점 미만이면 과락으로 불합격됩니다.
과목 점수 2개를 파라미터로 입력하면 합격인지 불합격인지 여부를 콘솔창에 출력하는 함수를 만들어보십시오.

function testPass(){
//코드 짜면 됩니다
}

실행결과 예시 :
testPass(70, 70); 실행시 총점 120이상이니 콘솔창에 '합격'이 출력되어야합니다.
testPass(30, 100); 실행시 하나 과락이니 콘솔창에 '불합격'이 출력되어야합니다.
testPass(50, 50); 실행시 총점 120미만이니 콘솔창에 '불합격'이 출력되어야합니다.

풀이

1. prompt 함수를 변수로 지정하기 & 값을 숫자로 바꾸기

1번문제에서 했던 것과 마찬가지로 변수에 값을 넣을 것이다.
문자열을 숫자로 바꾸는 방법은 2가지가 있다 parseInt()와 Number()이다.
parseInt()
Number()
우리는 이 중 Number()를 사용할 것이다.

const score1 = Number(prompt("개론 점수를 입력하세요"));
const score2 = Number(prompt("민법 점수를 입력하세요"));

parseInt()와 Number()의 차이


숫자로 잘 바뀌는지 typeof를 통해 타입이 뭔지 알아보자
typeof

문자열이던 타입이 숫자로 잘 바뀌는 것을 볼 수 있다.
prompt에 숫자를 적어넣는데 왜 숫자로 타입을 바꾸나요?
처음에도 말했듯이 prompt에서 숫자를 적어넣어도 반환되는 값은 문자열이다!

2. 합격 불합격 여부 판별하는 testScore 함수 만들기

const score1 = Number(prompt("개론 점수를 입력하세요"));
const score2 = Number(prompt("민법 점수를 입력하세요"));

function testScore(number1, number2) {
  if (number1 < 40 || number2 < 40) {
    console.log("불합격");
  } else if (number1 + number2 < 120) {
    console.log("불합격");
  } else {
    console.log("합격");
  }
}

testScore(score1, score2);

• 1. prompt가 나오면 점수를 입력하면 그 숫자는 score1 , score2에 들어간다. (number 숫자 타입으로)
• 2. score1 , score2는 testScore argument로 들어가게 된다
• 3. testScore parameter number1, number2는 score1 , score2의 값이다.
• 4. number1, number2가 40 미만이라면 '불합격'라는 문구가 나온다.
• 5. number1, number2의 합이 120 미만이라면 '불합격'라는 문구가 나온다.
• 6. 그 외의 경우는 '합격'이라는 문구가 나온다.

나는 불합격의 조건을 모두 적어서 그 외 조건들은 모두 합격 조건이다.
반대로 한다면 합격의 조건을 모두 적을 수 있을 것 같다.

결과

---

응용 문제 1

(응용) 원래의 369게임 룰을 적용하려면 어떻게 해야할까요?

3의 배수에서 박수를 치는게 아니라 끝자리가 3,6,9로 끝나는 숫자라면 '박수'를 출력되게 하는겁니다.
이건 숫자의 마지막자리를 어떻게 파악할지 구글 검색해보면 쉽게 해결된다.

풀이

1. 숫자(문자열) 마지막 자리 파악

prompt에서 받는 값은 문자열타입이기 때문에 문자열의 마지막 문자를 파악하면 될 것 같다.
방법은 4가지가 있는데 자세한건 아래 사이트를 참고하면 될 것 같다.
문자열의 마지막 문자 가져오기, 4가지 방법

slice()

4가지 방법 중에 사용할 방법은 slice()이다.
slice()함수는 문자열에서도 사용할 수 있지만 배열에서도 사용할 수 있다.
사용방법은 아래와 같다.

str.slice(beginIndex[, endIndex])

위 방법을 통해 코드를 짜보자.

2. 369게임이 되는 game369 함수 만들기

const numbrer369 = prompt("숫자를 입력하세요");

function game369(number) {
  if (number.slice(-1) == 3 || number.slice(-1) == 6 || number.slice(-1) == 9) {
    console.log("박수");
  } else {
    console.log("통과");
  }
}

game369(numbrer369);

• 1. prompt가 나오면 숫자를 입력하면 그 숫자는 number369에 들어간다. (string 문자열 타입으로)
• 2. number369는 game369 argument로 들어가게 된다
• 3. 값의 마지막 숫자가 3, 6, 9라면 '박수'라는 문구가 나온다.
• 4. 그게 아니라면 '통과'라는 문구가 나온다.

결과

---

응용 문제 2

(응용2) 합격판독기에 0에서 100사이 숫자가 아닌걸 입력하면 '점수가 아닙니다' alert를 띄우려면 어떻게 코드짜야할까요?

풀이

1. 원래 있던 testScore 함수에 조건문 1가지 추가하기

const score1 = Number(prompt("개론 점수를 입력하세요"));
const score2 = Number(prompt("민법 점수를 입력하세요"));

function testScore(number1, number2) {
  if (number1 < 0 || number1 > 100 || number2 < 0 || number2 > 100) {
    alert("점수가 아닙니다");
  } else if (number1 < 40 || number2 < 40) {
    console.log("불합격");
  } else if (number1 + number2 < 120) {
    console.log("불합격");
  } else {
    console.log("합격");
  }
}

testScore(score1, score2);

• number1, number2가 0미만 이거나 100초과라면 '점수가 아닙니다'라는 문구가 나온다.

결과

---

과제 풀이 전체 코드

if_test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./if_test.js"></script>
  </body>
</html>

if_test.js

/** 문제 1, 2번 **/
const number369 = prompt("숫자를 입력하세요");

function game369() {
  if (number369 % 9 == 0) {
    console.log("박수x2");
  } else if (number369 % 3 == 0) {
    console.log("박수");
  } else console.log("통과");
}

game369();

/** 문제 3번 **/
const score1 = Number(prompt("개론 점수를 입력하세요"));
const score2 = Number(prompt("민법 점수를 입력하세요"));

function testScore(number1, number2) {
  if (number1 < 40 || number2 < 40) {
    console.log("불합격");
  } else if (number1 + number2 < 120) {
    console.log("불합격");
  } else {
    console.log("합격");
  }
}

testScore(score1, score2);

/** 응용 문제 1번 **/
const numbrer369 = prompt("숫자를 입력하세요");

function game369(number) {
  if (number.slice(-1) == 3 || number.slice(-1) == 6 || number.slice(-1) == 9) {
    console.log("박수");
  } else {
    console.log("통과");
  }
}

game369(numbrer369);

/** 응용 문제 2번 **/
const score1 = Number(prompt("개론 점수를 입력하세요"));
const score2 = Number(prompt("민법 점수를 입력하세요"));

function testScore(number1, number2) {
  if (number1 < 0 || number1 > 100 || number2 < 0 || number2 > 100) {
    alert("점수가 아닙니다");
  } else if (number1 < 40 || number2 < 40) {
    console.log("불합격");
  } else if (number1 + number2 < 120) {
    console.log("불합격");
  } else {
    console.log("합격");
  }
}

testScore(score1, score2);