자바 스크립트(js) 입문 공부 5. 비교 연산, 조건문 if문 , if~ else 문

 

 

자바스크립트는 주어진 두 항을 비교할 수 있는 ‘비교 연산자’를 제공합니다. 

자바스크립트에서는 대소 비교와 등가 비교 두 가지의 유형을 볼 수 있습니다. 

 

대소 비교 

비교 연산식은 언제나 boolean 데이터를 반환합니다.

크냐 작냐를 비교하는 대소 비교, 같냐 다르냐를 비교하는 등가 비교는 모두 하나의 질문이며, 질문에 대한 답이 참(true) 또는 거짓(false)입니다.

예를 들어 3이 5보다 작은지 -> true
6과 6이 다른지 -> false

 

등가 비교 

등가 비교는 다음 네 가지 연산자를 사용해 처리할 수 있습니다.

등호(이퀄 사인, =) 하나는 대입연산자이므로, 기호 개수를 잘 확인해야 합니다. 

 

 

 

등가 비교를 할 때, 등호(=)의 개수에 따라 비교 규칙에 차이를 보입니다. 

== 는 ‘추상적(abstract) 같음 비교’로써, 자료형이 서로 다르더라도 같다고 판단할 수 있는 비교입니다.

문자열 1 과 숫자열 1은 다르지만  == 으로 사용하면 같은 것으로 인정을 합니다. (추상적인 같음 비교) 

=== 는 ‘엄격한(strict) 같음 비교’로써, 자료형과 데이터가 모두 일치해야만 같다고 판단합니다. 

문자열 1과 숫자열 1을 === 으로 비교하면 자료형과 데이터가 모두 일치해야만 같다고 판단을 합니다. (엄격한 같음 비교) 

 

---

 

조건문

조건문이란 주어진 조건의 참/거짓 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문을 뜻합니다.

여기에서 조건이란, 불리언 데이터를 반환하거나 불리언 데이터로 해석할 수 있는 표현식을 의미합니다.

조건의 예) 
게임 캐릭터의 HP가 0입니까? => true일 경우 캐릭터는 죽는다.
지하철 요금을 낼 만큼의 돈이 있습니까? => true일 경우 지하철을 탈 수 있다.

 

if문

키워드 if를 이용해 만드는 구문 ‘if문’은 가장 일반적인 형태의 조건문입니다.

if문의 기본 형태는 다음과 같습니다.

 

(변수 number의 값이 3과 같다면 콘솔에 “It is true!”를 출력해라. (3과 같지 않을 경우 아무 일도 일어나지 않음))

 

if else문 

if는 조건이 참일 때 할 일을 정의하는 구문을 만듭니다.

else를 추가하여 조건이 거짓일 때의 할일을 추가 정의할 수 있습니다.

else를 추가한 if문을 if-else문이라 부르기도 합니다.

( 변수 number의 값이 3과 같다면 콘솔에 “It is true!”를 출력해라.  그렇지 않을 경우에는 콘솔에 “It is false!”를 출력해라.)

조건문에 대한 예시를 아래에서 같이 확인해볼게요.

let myAge = 50
let urAge = prompt("나는 50세인데, 당신 나이는 어떻게 됩니까.")

if(myAge == urAge){
    alert("우린 동갑이다.")
}
else{
    alert("나이는 숫자에 불과하다.")
}

실행화면을 확인할 수 있습니다. 

예제를 하나 더 작성해볼게요. 이번에는  window.parseInt(문자열) 메소드를 사용합니다. 

문자열을 숫자로 변경해주는 브라우저 기능입니다. 

 window.parseInt(문자열) 에 알파벳이나 한글이 들어가면 예외처리가 됩니다. 

// window.parseInt(문자열) : 숫자로 변경해주는 브라우저 기능
// 알파벳이나 한글이 들어가면 예외처리가 된다. 

let cAge = parseInt(prompt("승객의 나이는 어떻게 됩니까?"))
if(cAge < 8){
    console.log("어린이는 무료입니다.")
} else if(cAge < 20){
    console.log("청소년 요금은 700원 입니다. ")
} else if(cAge < 65){
    console.log("성인 요금은 1250원 입니다.")
} else{
    console.log("어르신 분들은 무료입니다.")
}

 

콘솔 창이 아닌 화면에 직접 출력하는 방법을 같이 볼게요. 

    <p id = "text"> </p>

let cAge = parseInt(prompt("승객의 나이는 어떻게 됩니까?"))
let p = document.getElementById("text")

if(cAge < 8){
   p.textContent = ("어린이는 무료입니다.")
} else if(cAge < 20){
    p.textContent = ("청소년 요금은 700원 입니다. ")
} else if(cAge < 65){
    p.textContent = ("성인 요금은 1250원 입니다.")
} else{
    p.textContent = ("어르신 분들은 무료입니다.")
}

 

 

출력한 글자에 스타일을 주고 싶을 때 쓸 수 있는 내용들을 잠깐 살펴볼게요. 

 

노드node

자바 스크립트에서 요소 하나를 부를 때 쓰는 단위를 노드(node) 라고 합니다. 

자바 스크립트 노드에는 자바 스크립트에서 형성한 DOM 속성들이 포함이 되어 있습니다.

노드에는 브라우저가 DOM을 형성하면서 추가된 node 의 특성들 말고 

html 에서부터 가지고 있는 atribute 에도 접근할 수 있습니다. (style 등) 

그렇기 때문에 css 페이지 혹은 html 의 style로 따로 작성하지 않아도 자바 스크립트에서 스타일을 사용할 수 있습니다.

let cAge = parseInt(prompt("승객의 나이는 어떻게 됩니까?"))
let p = document.getElementById("text")

if(cAge < 8){
   p.textContent = ("어린이는 무료입니다.")
   p.style.color = "pink"
   p.style.backgroundColor = "blue"

} else if(cAge < 20){
    p.textContent = ("청소년 요금은 700원 입니다. ")
} else if(cAge < 65){
    p.textContent = ("성인 요금은 1250원 입니다.")
} else{
    p.textContent = ("어르신 분들은 무료입니다.")
}

 

Style을 추가할 때 가장 좋은 것은 css 문서를 통해 스타일시트를 추가하는 것이지만 

간단한 색상의 변경이나 배경색의 변경 등은 노드의 속성을 사용할 수도 있습니다. 

 

여기까지 비교 연산과 조건문을 확인해보았습니다.

이 다음에는 반복문에 대해서 같이 알아보겠습니다.