반응형

2021-01-14

 

#2. 5 If, else, and, or (11:09)

 

이번 강의에서는 if-else에 대해서 알려준다. 

 

if-else는 조건문이다. 

 

예를 들어 유저가 로그인했으면 조건에 대한 부분을 보여주고 

안 했으면 다른 부분을 보여주는 

 

다행스럽게도 if-else는 모든 프로그래밍 언어에 존재한다. 

 

자바스크립트에서의 if-else는 이렇게 생겼다. 

if(condition) {
   block
} else {
   block
}

block은 자바스크립트 표현법이다.

이건 console.log , alert 아무거나 와도 되고 

 

조건은 if()의 () 사이에 들어가게 되고 참을 의미하면 뭐든 넣을 수 있다.

 

예를들어보자. 

if (10>5) {
console.log("hi")
} else {
console.log("ho")
}

10은 5보다 크다. 참을 나타내고 참에 대한 결과로 hi를 출력해내는걸 확인할 수 있다. 

다른 예) " === "

if (10===5) {
console.log("hi")
} else {
console.log("ho")
}

이 코드에서 === 는 단순히 10과 5가 같은 건지 체크하는 것이다. 체크를 해보면 

true(참)이 아닐테니 else 쪽으로 넘어가서 ho를 출력할 것이다.

 

 

===로는 다양한 걸 체크해볼 수 있는데

자료형이 같은지 체크해볼 수도 있다. 

 

 

명심해두어야 할 것은 if의 조건은 무조건 참이어야 한다. 

if 문에 작성한 것을 실행하려면 말이다.

 

if (10===5) {
console.log("hi")
} else {
console.log("ho")
}


if (10==="10") {
console.log("hi")
} else {
console.log("ho")
}


if ("lsw"==="lswd") {
console.log("hi")
} else {
console.log("ho")
}

숫자와 ""로감싸진 String이 같은지도 체크할 수 있고 String끼리 문자열의 문자들이 같은지도 체크할 수 있다. 

 

다른 예 ) 다중 if

if( 10 === "10") {
console.log("hi")
} else if(10>5){
console.log("lalala")
}else { console.log("ho")}

 

위의 코드를 보면 두 가지의 조건을 걸 수 있고 첫 번째 조건이 참이 아니기에 그다음 조건으로 넘어가 조건이 맞는지 검사를 하게 되고 검사 후 참이어서 그다음 else로 넘어가지 않고 lalala를 콘솔 창에 띄우는 걸 볼 수 있다.

 

 

 

 

다른 예 ) 조건의 결합 '&&'(and) , '||'(or)

if(10>5 && "lsw" === "lsw") {
console.log("hi")
}else {
console.log("ho")
}

위의 코드는 두 가지의 조건이 참이어야지 되는 조건이고 &&를 사용해서 구현할 수 있다.

 

|| 를 사용하면 둘 중 하나만 조건이 참이면 if문의 코드를 실행한다.

if(10<5 || "lsw" === "lsw") {
console.log("hi")
}else {
console.log("ho")
}

 

prompt and if

 

const age = prompt("How old are you");

if ( age>=18 && age <=21 ) {
console.log("you can drink but yon should not")
}else if ( age<18) {
console.log("you cant")
}
else{
console.log("go ahead")
}

prompt를 이용해서 웹페이지가 시작되었을 때 alert와 같은 경고창을 띄울 수 있는데 이는 아주 오래된 JavaScript라서 

잘 안 쓰인다고 한다 그냥 그렇다고 한다. 

다시 코드를 넘어와서 prompt로 나이를 받아와 조건문을 이용해서 console로그에 띄운 걸 확인할 수 있다. 

#2. 6 DOM - If else - Function practice (09:10)

예제 컬러 체크

 

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
</head>

<body>
<h2 id="title">Hello!</h2>
<script src="index.js"></script>
</body>
</html>

const title = document.querySelector("#title");
const BASE_COLOR = "black"
const OTHER_COLOR = "red"



function checkColor(){
    if( title.style.color ===BASE_COLOR){
        title.style.color=OTHER_COLOR;
    }else {
        title.style.color=BASE_COLOR;
    }
}


function init() {
    title.style.color=BASE_COLOR
    title.addEventListener("click", checkColor)
}

init();

위의 코드를 보면 BASE_COLOR와 OTHER_COLOR를 설정해준다. 

보통 사람들은 상수를 선언할 때 대문자로 한다고 한다. 

설정해준 후  evnetListener를 추가해줘서 h1태그 (title)을 클릭 시 checkColor 함수를 실행하게 하여 

checkColor 함수 안에 있는 조건문을 실행하여 BASE_COLOR인지 확인 후 같다면 OTHER_COLOR로 바꾸고 

다시 클릭하면 BASE_COLOR랑 같은지 확인해보는데 아까 OTHER_COLOR로 바뀌어서 다르니까 ELSE문에 있는 

다시 BASE_COLOR로 돌아가는 코드를 실행하는 걸 확인할 수 있다.

 

이러한 방법이 로직을 수정하는 방법이라고 볼 수 있다. 

이벤트 룰 수정하고 색깔을 바꾼다. 

 

그리고 이벤트의 근원을 찾고자 한다면 MDN사이트를 애용하자

developer.mozilla.org/ko/docs/Web/Events

 

이벤트 참조 | MDN

DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가

developer.mozilla.org

2021/01/07 - [JAVA & APP :국비지원 학원 복습/JavaScript] - JavaScript : 08 이벤트

 

JavaScript : 08 이벤트

2021-01-06 수업 내용 정리 겸 복습 이벤트 event : html 요소에 발생하는 어떤 사건 *마우스 클릭, 키 입력, 브라우저 크기 변경)을 의미 특정 요소에 어떤 사건이 발생되면 웹브라우저가 이것을 감지

i-am-lsw.tistory.com

#2. 7 DOM - If else - Function practice Two (13:08)

 

 

이전 강의와 같은 방법은 대게 좋은 방법은 아니다 

왜냐하면 CSS에서나 HTML에서 처리해야 할걸 JavaScript에서 해결하고 있기 때문이다. 

각자의 영역에서 해결해야 할 일을 지정해주는 것이 좋다고 생각한다. 

그래서 JavaScript에서는 로직만을 다루게 한번 이전 강의의 코드들을 수정해보겠다. 

 

 

html

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="index.css">
</head>

<body>
<h2 id="title" class="btn">Hello!</h2>
<script src="index.js"></script>
</body>
</html>

css

body {
  font-family: sans-serif;
}
h1 {color:black;}

.btn{
  cursor:pointer;
}

.clicked {
  color:red;
}

JavaScript

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked"


function handleClick() {
    if (title.className !== CLICKED_CLASS){
        title.className=CLICKED_CLASS;
    }else {
        title.className="";
    }
}


function init() {
    title.addEventListener('click', handleClick)
}
init();

위의 코드들을 보면 알 수 있지만 초기 코드에 적용된 클래스인 btn인 두 번째 클릭 때는 빠져있는 것을 보인다.

이는 script에 else문에 class를 전부 지워버리는 코드를 작성해서 인데 btn이라는 class이름을 써줄 수 있지만 

효율적인 방법은 아니다.  

이문제를 해결하기 위해서는 claslist를 이용하는 것이다.

classList를 이용한 코드를 한번 다시 보자.

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked"


function handleClick() {
    if ( !title.classList.contains(CLICKED_CLASS)){
        title.classList.add(CLICKED_CLASS);
    }else {
        title.classList.remove(CLICKED_CLASS);
    }
}


function init() {
    title.addEventListener('click', handleClick)
}
init();

 

classList.add , classList.remove, classList.contains 함수를 이용해서 단순하게 CLICKED_CLASS만 추가했다 지우는 걸 확인할 수 있다.

 

그리고 프로그래머들은 게으른데 이 방법보다 더 좋은 방법이 있다.

그 방법은 toggle을 이용하는 것 토글로 지정해주면 알아서 검사해서 없으면 추가 있으면 지워준다.

아래 코드를 봐보자.

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked"


function handleClick() {
    title.classList.toggle(CLICKED_CLASS);
}


function init() {
    title.addEventListener('click', handleClick)
}
init();

 

해보면 위와 같이 똑같이 적용되는 걸 확인할 수 있다. 

반응형

'노마드코더 > 바닐라JS로 크롬앱 만들기' 카테고리의 다른 글

바닐라JS 2주 완성반 DAY6: #3.3~3.4  (0) 2021.01.17
바닐라JS 2주 완성반 DAY5: #3.0~3.2  (0) 2021.01.16
바닐라JS 2주 완성반 DAY3 : 2.0~2.4  (0) 2021.01.14
바닐라JS 2주 완성반 DAY2 : 1.6~1.10  (0) 2021.01.12
바닐라JS 2주 완성반 DAY1 : 1.1~1.5  (0) 2021.01.11

+ Recent posts

티스토리툴바