javascript Step03_if

Step03_if

if문 : 조건부로 어떤 조건이 맞을때만 실행하는 함수

형태

if ( ~~~ 여기 안에다가 조건 적어넣기 ~~~ ){
    조건부로 수행할 코드블럭 모아놓기
}

ex)

let isLike=confirm("술을 좋아합니까 ?");

confirm : 확인(true)과 취소(false)가 있는 알림창을 띄우는 함수
confirm이 있는 이 위치에 boolean type(true or false) 를 리턴함 (변수명 isXXX canXXX !!!)

// 만일 isLike가 true 이면
        if(isLike == true){
            document.querySelector("#result").innerText="술한잔 합시다 !"
        }

        // 만일 좋아한다면 (이게 더 간단)
        if(isLike){
            document.querySelector("#result").innerText="술한잔 합시다 !"
        }

Step03_example

Number : 숫자모양의 문자열을 실제 숫자로 바꿔주는 빌트인 함수

ex)

Number("10")
10
Number("십")
NaN

• value를 읽어올 때는 항상 string type이다 !
  숫자를 입력해도 '10', 이렇게 string type으로 인식됨
  -> 실제 숫자로 바꿔줘야 할 때 Number함수 사용

ex)

document.querySelector("#height").value
'180'
// Number를 적용하면
Number(document.querySelector("#height").value)
180

• 키를 입력하고 확인 버튼을 눌렀을 때 (특정 시점)
  키가 180 이상이면(조건부) "키가 크군요" 라는 문자열을 p요소의 innerText로 출력하는 프로그래밍을 해보세요.

특정 시점 ! 이므로 제일먼저
document.querySelector("#checkBtn").addEventListener("click", function(){}); 써놓고 시작 ~~~

        document.querySelector("#checkBtn").addEventListener("click", function(){
            let h=Number(document.querySelector("#height").value);
            if (h>=180){
                document.querySelector("#result").innerText="키가 크군요"; // <-조건부 수행 블럭
            }
        });

1. 입력한 키를 읽어온다. 그리고 변수에 담아두기, 숫자니까 Number함수에 넣기
2. 만약 입력한 키가 180이상이면 "키가 크군요"를 p요소의 innerText에 출력

(height >= 180)에 남는 값 : true or false
페이지 로딩 시점 : addEventListener만 준비됨(버튼에 클릭이벤트가 일어났을때 실행할 이벤트함수만 등록)
밖에서 안쪽꺼 참조 불가능(h) ! 함수 안에서 만든건 함수 안에서만 사용 가능 (like for문)
h라는 변수는 버튼을 누를때마다 새로 만들어짐
변수는 어느영역에다가 만들어놨는지가 중요 ! (global영역이냐 함수 안이냐 판단해야 할 때가 있음)

Step03_quiz : 논리연산자

• 키가 너무 작거나 몸무게가 너무 크면 탈수 없는 놀이 기구가 있다.
  키는 150 이상, 몸무게는 100 미만이 기준이다. <-탈 수 있음
  키와 몸무게를 입력하고 확인하기 버튼을 누르면
  해당 놀이 기구를 탈수 있는지 없는지 메세지를
  p 요소의 innerText 로 출력하는 프로그래밍을 해 보세요.
  "탈수 있습니다." or "탈수 없습니다."

        document.querySelector("#checkBtn").addEventListener("click", function(){
            let h = Number(document.querySelector("#height").value)
            let w = Number(document.querySelector("#weight").value)
            if (h>=150 && w<100){
                document.querySelector("#result").innerText="탈 수 있습니다."
            } else {
                document.querySelector("#result").innerText="탈 수 없습니다."
            }
        });

• 변수 지정 함수 안에서 해야함 !!! 계속 틀렷오
  input요소 안에 데이터를 입력하고 버튼을 눌러야 변수가 생성되는 거니까 버튼을 누르는 함수 안에서 해야함 ***

• 논리연산자 : && (어느 하나라도 false이면 결과가 false)

• if / else : 양자택일, if가 수행되거나 else가 수행되거나(조건부 수행)

else if (다중if문)

if 만약 ~~라면
else if 그렇지않으면 ~~라면
.
.
.
else로 마무리
ex)

        document.querySelector("#inputJumsu").addEventListener("keydown", function(e){
            console.log("keydown!");
            console.log(e); // object 구조 살펴보기, 필요한거 보고 쓰기
            // 만일 Enter를 쳤다면 
            if (e.keyCode==13){
                // 입력한 점수를 읽어와서
                let jumsu=Number(document.querySelector("#inputJumsu").value);
                // 결과를 출력한다.
                if (jumsu>=90){
                    document.querySelector("#result").innerText="A입니다."
                } else if (jumsu>=80){
                    document.querySelector("#result").innerText="B입니다."
                } else if (jumsu>=70){
                    document.querySelector("#result").innerText="C입니다."
                } else if (jumsu>=60){
                    document.querySelector("#result").innerText="D입니다."
                } else {
                    document.querySelector("#result").innerText="F입니다."
                }
            } 
        });

이 총 5개의 블록중에서 하나만 수행이 된다 ! 중간에 수행이 되면 그다음 if문으로 가지 않고 빠져나온다

또 여기서 이벤트함수 !

document.querySelector("#inputJumsu").addEventListener("keydown", function(e){};

input요소에 값을 입력하면 input, keydown, keyup, change 등의 이벤트가 일어난다.
id가 inputJumsu인 요소에 무언가 입력했을 때 실행할 함수 등록
여기서 input은 just 값 입력에만 반응,
keydown은 키보드로 입력한 값 모두에 반응 -> 엔터키에 반응을 하므로 이거 사용

• 엔터키의 값을 구하기 위해
  console.log(e) 찍어서 보기
  key :문자열로 들어있음
  keyCode : 숫자로 들어있음