Vanilla JS - 조건문(if~else)

1. if 조건문 사용 형식

- JS에서 if 조건문을 사용하는 방식은 다음과 같다.

if (condition) {
    // 해당 조건에 수행할 명령문 
} else if (condition){
    // 해당 조건에 수행할 명령문 
} else {
    // 위의 2가지 조건에 해당하지 않는 경우, 수행할 명령문 
}

기본적인 비교/논리 연산자

- 앞으로 조건문을 사용할 때, 비교와 논리연산자를 통해 표현을 많이 하게 될 것이다.

- JS에서는 어떻게 표현하는지 아래의 사진을 참고하여 알아두자.

2. 조건문을 사용한 JS

- 이번에는 조건문을 사용하여 JS 적용하는 예제를 만들어보자.

- 예제) h1태그를 클릭하면 글자색이 변하도록 만드는 이벤트를 조건문을 이용해서 구현한다.

[기본 HTML]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vanilla JS</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h1 id="title">Hello, JavaScript!</h1>
    <!-- Script 태그는 Body태그의 가장 마지막에 위치한다. -->
    <script src="index.js"></script>
  </body>
</html>

[기본 CSS]

body {
  background-color: powderblue;
  color: black;
}

[작성할 JS코드]

const title = document.querySelector("h1");

// 초기화 작업
const baseColor = "black";

function init() {
  title.style.color = baseColor;
}

// 이벤트 핸들러
function clickHandler() {
  if (title.style.color == baseColor) {
    title.style.color = "white";
  } else {
    title.style.color = "black";
  }
}

init();
title.addEventListener("click", clickHandler);

[출력화면]

- JS를 통해 브라우저에 존재하는 다양한 이벤트를 통제할 수 있다. 이벤트에 관한 정보는 아래 링크에서 확인할 수 있다.

developer.mozilla.org/en-US/docs/Web/Events

Event reference

DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the Event interface, and may have additional custom fields and/or functions used to get additional information about wh

developer.mozilla.org

3. HTML 엘리먼트의 class 속성을 이용한 JS

- 위의 예제와 동일한 결과를 반환하지만, HTML 태그의 속성요소 중 하나인 class를 이용해서 구현해보자.

[기본 HTML]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vanilla JS</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h1 id="title">Hello, JavaScript!</h1>
    <!-- Script 태그는 Body태그의 가장 마지막에 위치한다. -->
    <script src="index.js"></script>
  </body>
</html>

[css 코드]

body {
  background-color: lavender;
}

h1 {
  color: darkslategray;
}

.clicked {
  color: blueviolet;
}

- 여기서 중요한 부분은, clicked라는 클래스 선택자를 이용해 color 속성값이 바뀌도록 한다는 것이다.

[JS 코드]

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

const CLICKED_CLASS = "clicked";

function clickHandler() {
  const currentClass = title.className;
  if (currentClass !== CLICKED_CLASS) {
    title.className = CLICKED_CLASS;
  } else {
    title.className = "empty";
  }
}

function init() {
  title.addEventListener("click", clickHandler);
}

init();

[출력화면]

4. ClassList

- 위의 class속성을 아예 바꿔버리면 기본의 class이름이 갖고 있는 css를 모두 잃게된다. (아래 예시참고)

설명) class 속성 변경으로 인해 해당 요소의 클래스가 갖고있던 기존 글씨크기를 잃어버리는 모습

- 위의 문제를 해결하기 위해서는 어떻게 해야할까? classList를 사용하면 해결할 수 있다.

- classList란? 해당 엘리먼트가 여러개의 클래스명을 갖을 수 있게 하는 것이다. 클래스가 여러개의 이름을 갖게 하여, 기존의 css를 보유할 수 있도록 하는 것이다.

[기존 HTML]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vanilla JS</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h1 id="title" class="titleClass">Hello, JavaScript!</h1>
    <!-- Script 태그는 Body태그의 가장 마지막에 위치한다. -->
    <script src="index.js"></script>
  </body>
</html>

[CSS 코드]

body {
  background-color: lavender;
}

.titleClass {
  font-size: 60px;
  color: darkslategray;
}

.clicked {
  color: blueviolet;
}

[JS 코드]

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

const CLICKED_CLASS = "clicked";

function clickHandler() {
  const hasClass = title.classList.contains(CLICKED_CLASS);
  if (!hasClass) {
    title.classList.add(CLICKED_CLASS);
  } else {
    title.classList.remove(CLICKED_CLASS);
  }
}

function init() {
  title.addEventListener("click", clickHandler);
}

init();

[JS 코드 설명]

title.classList.contains(CLICKED_CLASS); → 해당 클래스가 존재하는지 확인 후, 그에 따라 true/false를 반환한다.
title.classList.add(CLICKED_CLASS); → class 속성에 괄호 안의 클래스명을 추가
title.classList.remove(CLICKED_CLASS); → class 속성에서 괄호 안의 클래스 명을 제거

[출력화면]

5. Toggle

- 지금까지 예제를 통해서 만들어 본 기능이 Toggl이다. 스위치를 이용해 전등을 껐다 켰다 하는 것 처럼, 특정 이벤트의 작동 전과 후에 따라 다른 기능을 연출할 수 있는 것이다.

- Toggle 함수를 사용하여 위의 예제를 간단한 코드로 구현해보자.

[기존 JS코드]

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

const CLICKED_CLASS = "clicked";

function clickHandler() {
  const hasClass = title.classList.contains(CLICKED_CLASS);
  if (!hasClass) {
    title.classList.add(CLICKED_CLASS);
  } else {
    title.classList.remove(CLICKED_CLASS);
  }
}

function init() {
  title.addEventListener("click", clickHandler);
}

init();

[Toggle 함수를 사용한 JS코드]

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

const CLICKED_CLASS = "clicked";

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

function init() {
  title.addEventListener("click", clickHandler);
}

init();

저작자표시

'Front-end > Vanilla JS' 카테고리의 다른 글

Vanilla JS - 지역 저장소(Local Storage) (0)	2020.10.10
Vanilla JS - 시계 만들기 (0)	2020.10.10
Vanilla JS - 이벤트와 이벤트 핸들러(Events & Event Handlers) (0)	2020.10.07
Vanilla JS - DOM(Document Object Model)(2) (0)	2020.10.06
Vanilla JS - DOM(Document Object Model)(1) (0)	2020.10.03

개발자를 향하여

Vanilla JS - 조건문(if~else)

1. if 조건문 사용 형식

기본적인 비교/논리 연산자

2. 조건문을 사용한 JS

3. HTML 엘리먼트의 class 속성을 이용한 JS

4. ClassList

5. Toggle

'Front-end > Vanilla JS' 카테고리의 다른 글

댓글

티스토리툴바

Vanilla JS - 조건문(if~else)

1. if 조건문 사용 형식

기본적인 비교/논리 연산자

2. 조건문을 사용한 JS

3. HTML 엘리먼트의 class 속성을 이용한 JS

4. ClassList

5. Toggle

'Front-end > Vanilla JS' 카테고리의 다른 글

관련글

댓글

티스토리툴바