[부스트코스]자바스크립트의 시작(프로그래밍, 조건문, 비교연산자와 블리언, 조건문, 리팩토링)

네이버 부스트코스/[부스트서포터즈3기]자바스크립트의 시작

[부스트코스]자바스크립트의 시작(프로그래밍, 조건문, 비교연산자와 블리언, 조건문, 리팩토링)

mmin.h 2021. 1. 15. 10:11

안녕하세요 부스터코스 3기 서포터즈 허브입니다. 🌿

부스터코스란?

커넥트재단은 네이버가 설립한 비영리 교육 재단입니다.
소프트웨어 개발자 양성 교육 프로그램, 부스트코스와 함께
당신의 개발 커리어를 업그레이드하세요!

제 포스팅은 강의 내 생각해보기와 수업에서 다루는 코드를 직접 크롬화면에서 확인 해볼 수 있도록 진행합니다. 관련된 개념과 강의는 함께 올려드리는 링크에서 확인해보실 수 있습니다.

www.boostcourse.org/cs124/joinLectures/52258

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

프로그램, 프로그래머, 프로그래밍

www.boostcourse.org/cs124/lecture/194603

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

프로그램에는 순서라는 의미가 있습니다. 프로그래밍은 이러한 순서를 만드는 행위를 말하죠. 프로그래머는 이러한 순서를 만드는 일을 하는 사람을 의미합니다. 이러한 용어는 소프트웨어 분야 뿐만 아니라 다양한 분야에서도 사용되는 말입니다.

컴퓨터를 사용할 때에는 다양한 기능을 순서대로 사용하게 됩니다. 그리고 보통은 이러한 기능이 반복적으로 이용됩니다. 컴퓨터 프로그래밍 언어란 시간의 순서에 따라서 실행되어야 할 기능을 글로 적어두는 방식을 의미합니다. 작업이 필요할 때마다 적어둔 글을 컴퓨터가 실행하도록 건네주는 것이죠.

HTML과 Javascript의 비교

HTML로 만든 웹페이지는 시간의 순서에 따라 실행되지 않고, 한 번 만들어지면 바뀌지 않습니다. 때문에 HTML은 컴퓨터 프로그래밍 언어가 아닌 것이죠.

반면에 Javascript는 사용자와 상호작용하고, 이를 위해서 시간에 따라 여러 기능이 실행되어야 하기 때문에 프로그래밍이라는 형태를 띄게 됩니다. 따라서 Javascript는 컴퓨터 프로그래밍 언어라고 부를 수 있는 것입니다.

그리고 더 나아가서 시간에 따라 코드가 실행되는 것 외에도, 조건에 따라 다른 코드가 실행되도록 하거나, 같은 코드가 반복적으로 실행할 수 있는 방법도 고안하게 된 것입니다.

생각해보기

이번 강의에서 HTML과는 달리 Javascript는 컴퓨터 프로그래밍 언어라는 것을 배웠습니다. 오늘 배운 내용을 바탕으로 HTML은 왜 프로그래밍 언어가 아닌지 스스로에게 설명해봅시다.

"HTML이 왜 프로그래밍이 아니나면 프로그램이 되기 위해선 시간에 따른 로직이 발생하여야 하는데 HTML 은 단순히 묘사하고 정적이기 때문이다."

조건문

https://www.boostcourse.org/cs124/lecture/194604/

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

조건문이란 프로그램이 조건에 따라서 다른 기능들이 다른 순서에 따라서 실행되도록 만들어주는 것입니다. 조건문은 단순하고 반복적인 업무 뿐만 아니라 복잡한 업무까지도 컴퓨터가 다룰 수 있도록 해 줍니다.

예를 들어 우리가 지금까지 만들었던 night/day 버튼 예제에 대해서 생각해봅시다. 지금까지는 night와 day의 버튼을 따로 만들어서 각각의 동작을 지정해 주었죠.

하지만, 현재 상태가 night라면 day 모드로, 현재 상태가 day라면 night모드로 바꿔주는 기능을 가지도록 만들면, 버튼을 두 개 만들 필요 없이 하나로 구현할 수 있게 될 겁니다. 이러한 버튼을 토글이라고 부릅니다.

지금부터 if/else 조건문을 사용해서 이러한 토글을 구현해봅시다.

if 조건문을 써서 현재의 mode가 'day'로 지정되어 있을 때 실행될 코드를 지정하고, 그렇지 않을 경우에는 else 조건문을 사용해서 mode가 'night'로 지정되어 있을 때 실행될 코드를 지정할 수 있습니다.

생각해보기

1) 조건문이 필요한 이유가 무엇일까요? 조건문을 사용하면 어떤 점이 더 편리할까요? 예시를 들어서 생각해봅시다.

"만약 다음 수업의 boolean 의 대해서 안다면 toggle 의 내용으로 건너뛰고, 코딩을 처음 진행해본다면 수업을 듣는다. 이처럼 조건문은 우리의 시간과 비용을 절약해준다."

비교연산자와 블리언

https://www.boostcourse.org/cs124/lecture/194605/

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

비교 연산자 ===

Javascript에서 가장 많이 쓰이는 비교 연산자는 동등 비교 연산자 **===**입니다. 이 비교 연산자는 왼쪽과 오른쪽이 같은지 판단하는 것입니다. 예를 들어 다음과 같은 코드를 실행하면 결과가 어떻게 될까요?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compraison operators & bollean</title>
</head>

<body>
    <h1>Compraison operators & bollean</h1>
    <h2>===</h2>
    <h3>1===1</h3>
    <script>
        document.write(1 === 1); //true
    </script>
    <h3>1===2</h3>
    <script>
        document.write(1 === 2); //false
    </script>

</body>

</html>

비교 연산자 ===

여기서 알 수 있는 점은, 비교 연산자 ===는 이항 연산자라는 것입니다. 즉 좌항과 우항을 결합해서 그 관계에 따라 하나의 결과, 즉 True인지 False인지를 만들어내는 것이죠.

불리언(Boolean)

이렇게 비교 연산자를 사용하면 결과로 True 혹은 False가 만들어집니다. 이 때 이 True와 Fasle를 보고 불리언(Boolean) 데이터 타입이라고 부릅니다. 우리가 이전에 배웠던 데이터 타입인 숫자(Number)나 문자열(String)에는 아주 많은 종류가 있습니다. 하지만 불리언에는 True 아니면 False, 딱 두가지만이 존재하죠.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compraison operators & bollean</title>
</head>

<body>
    <h1>Compraison operators & bollean</h1>
    <h2>===</h2>
    <h3>1&lt;1</h3>
    <script>
        document.write(1 < 1); //false
    </script>
    <h3>1&lt;2</h3>
    <script>
        document.write(1 < 2); //true
    </script>

</body>

</html>

비교 연산자 <, >

또 다른 비교 연산자로는 두 값의 크기를 서로 비교하는 연산자가 있습니다. 우리가 흔히 부등호라고 부르는 **<, >**와 같은 것들이죠. 이를 HTML에서 쓸 때는 다음과 같이 씁니다.

HTML에서는 이 꺽쇠 기호(<,>)가 태그를 나타낼 때 쓰이기 때문에 혼란을 줄 수 있기 때문이죠. <가 <를 의미하는 것이고, >가 >를 의미합니다.

Javascript에서는 그대로 <, >로 나타내도 괜찮습니다. 다음과 같은 Javascript 코드를 실행하면 결과는 어떻게 될까요?

1) Javascript에서 '왼쪽이 오른쪽보다 크거나 같다'를 표현하기 위해서는 어떻게 비교 연산자를 사용하면 좋을까요? (힌트: javascript bigger than or equal to 라고 검색해보세요!)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal

Greater than or equal (>=) - JavaScript | MDN

The greater than or equal operator (>=) returns true if the left operand is greater than or equal to the right operand, and false otherwise. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the intera

developer.mozilla.org

console.log(5 >= 3);
// expected output: true

console.log(3 >= 3);
// expected output: true

console.log(3n >= 5);
// expected output: false

console.log('ab' >= 'aa');
// expected output: true

생각해보기

다음 코드의 실행 결과는 무엇일까요?

1+1 > 1+2 //false

조건문

https://www.boostcourse.org/cs124/lecture/194606/

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

<!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>
    <h1>Conditional statements</h1>
    <h2>Program</h2>
    <script>
        document.write("1<br>");
        document.write("2<br>");
        document.write("3<br>");
        document.write("4<br>");
    </script>
    <h2>IF-true</h2>
    <script>
        document.write("1<br>");
        if (true) {
            document.write("2<br>");
        } else {
            document.write("3<br>");
        }
        document.write("4<br>");
    </script>
     <h2>IF-false</h2>
     <script>
         document.write("1<br>");
         if (false) {
             document.write("2<br>");
         } else {
             document.write("3<br>");
         }
         document.write("4<br>");
     </script>
</body>

</html>

이 코드를 실행하게 되면 아까와는 달리 13이 출력되게 됩니다.

그렇다면 **if(true)**와 if(false), 그리고 else가 어떤 역할을 하길래 이런 결과가 나오는 것일까요?

if문의 괄호 안에는 불리언 데이터 타입이 옵니다. 그리고 만약 그 불리언이 true이면 첫 번째 중괄호에 있는 코드가 실행되고, else의 중괄호에 있는 코드는 무시됩니다. 반대로 그 불리언이 false이면 else의 중괄호에 있는 코드가 실행되고 첫 번째 중괄호에 있는 코드가 무시되겠죠.

지금 짠 코드에서는 괄호 안에 있는 불리언이 고정되어 있기 때문에 항상 같은 결과가 출력되게 됩니다. 하지만, 이 괄호 안에 있는 불리언이 상황에 따라서 true/false가 바뀌도록 만들어주면, 상황에 따라서 다른 코드가 실행되도록 만들어줄 수 있을 겁니다.

생각해보기

1) 다음 코드를 실행하였을 때의 결과는 무엇일까요?

<script>
  document.write('1')
  if(true) {
    document.write('2')
  }
  else {
    document.write('3')
  }
  if(false) {
    document.write('4')
  }
  else {
    document.write('5')
  }
  document.write('6')
</script>

이유는 먼저 1이 실행되고, 2는 true 이기 때문에 조건을 만족한다 하지만 3은 else 에 의해 실행되지 않고, 4는 1f의 조건문이 false 이기 때문에 실행이 되지 않고 6은 false의 else 문에 의해 실행된다.

조건문의 활용

https://www.boostcourse.org/cs124/lecture/194607/

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

javascript get value

https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript

How do I get the value of text input field using JavaScript?

I am working on a search with JavaScript. I would use a form, but it messes up something else on my page. I have this input text field:

stackoverflow.com

document.getElementById('textbox_id').value to get the value of desired box

For example, document.getElementById("searchTxt").value;

조건문을 활용한 토글 만들기

이번 시간에는 조건문을 활용해서 토글을 만들어 볼겁니다. 먼저 다음과 같이 버튼을 만들어 줍니다.

지금부터 이 버튼의 value 값을 기준으로, 이 value가 night면 day 버전으로 바뀌는 코드를, day면 night 버전으로 바뀌는 코드를 실행하도록 프로그램을 만들겁니다.

이것이 어려우시다면 위의 링크를 달아두었습니다. 확인 바랍니다.

버튼의 onclick 속성 안에 다음과 같은 Javascript 코드를 써 봅시다.

현재 페이지에서 querySelector을 사용해서 id가 night_day인 태그를 찾기 위해서 id를 나타내는 #을 붙여줍니다. 그리고 찾아낸 태그의 value를 알기 위해서 .value를 써 줍니다.

이렇게 가져온 value 값을 night와 비교하면 되겠죠. 그렇다면 다음과 같이 써 주면 됩니다.

하지만 이 코드에는 결정적인 문제가 있습니다. 바로 버튼이 눌릴 때마다 value가 바뀌지 않는 것이죠. 그렇기 때문에 항상 원래 설정된 value인 night에 해당하는 코드, 즉 첫 번째 중괄호에 있는 코드만 실행되게 됩니다. 이를 해결하기 위해서는 코드가 실행될 때마다 value를 바꿔주는 코드도 추가해주면 됩니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB1 - javaScript</title>
</head>

<body style="">
    <h1><a href="index.html">WEB</a></h1>
    <input type="button" value="night" onclick="
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
    ">
    <input type="button" value="day" onclick="
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
    ">
    <input id="night_day" type="button" value="night" onclick="
    if(document.querySelector('#night_day').value === 'night'){
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        document.querySelector('#night_day').value = 'day'
    }
    else{
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        document.querySelector('#night_day').value = 'night'
    }

    ">
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JAVASCRIPT</a></li>
    </ol>
    <h2>JavaScript</h2>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente officia incidunt quas reprehenderit alias
        eveniet necessitatibus eligendi harum obcaecati temporibus, odit, dolor nulla adipisci tempore illum suscipit
        quod voluptatibus debitis quam atque nemo accusantium voluptatum voluptates voluptas. Laudantium labore,
        praesentium architecto perspiciatis enim totam! Magni fugit corporis iste ratione dolorem temporibus. Magni
        perferendis aspernatur mollitia! Eaque dolorem, exercitationem corrupti amet aliquid quis ab eligendi. Nam odio
        maxime quae explicabo repellat velit error fuga dolores quo quia. Quidem beatae iusto dolore eos, consequatur
        fuga magnam! Sed esse asperiores dolor et adipisci corrupti eveniet tempore deleniti rerum possimus natus,
        reiciendis accusantium ut reprehenderit! Animi quaerat ratione, facere saepe iusto eos, obcaecati, provident
        ius doloribus nam! Modi, hic! Est vel ipsam laborum placeat! Non nulla dolorum autem corrupti.
    </p>
</body>

</html>

리팩토링(중복의 제거)

https://www.boostcourse.org/cs124/lecture/194611/

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

리팩토링 - this 사용하기

리팩토링이란 비효율적인 코드를 효율적으로 만들어서 가독성을 높이고 유지보수가 쉽도록 만드는 것입니다. 코드의 기능적인 면에서는 변화가 없도록 말이죠. 이번 시간에는 코드의 비효율적인 부분을 찾아내서 고쳐보는 리팩토링 작업을 진행해봅시다.

지난 강의에서 완성한 다음과 같은 토클 코드를 살펴봅시다.

<input type="button" value="night" onclick="
    if(this.value === 'night'){
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        this.value = 'day'
    }
    else{
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        this.value = 'night'
    }
    ">

여기에서는 자기가 속한 버튼을 찾기 위해서 document.querySelector('#night_day') 라는 코드를 사용했습니다. 하지만 만약 이 코드를 복사해서 하나의 버튼을 더 만들게 된다면 어떻게 될까요?

id는 하나의 태그에만 적용될 수 있으므로 새롭게 만들어진 버튼에는 새로운 id값을 적용해줘야겠죠. 예를 들어서 새롭게 만든 버튼의 id를 #night_day2라고 만들었다고 해 봅시다. 그렇게 되면 이 코드에서 모든 #night_day를 #night_day2로 직접 바꿔주는 작업을 진행해야 합니다. 무척 비효율적이죠.

그래서 Javascript에는 자기 자신을 가리키기 위한 this라는 키워드가 있습니다. document.querySelector('#night_day') 대신 this를 써도 되는 것이죠. 그러면 다음과 같이 쓸 수 있습니다.

<input type="button" value="night" onclick="
        var target = document.querySelector('body'); 
    if(this.value === 'night'){
        
        target.style.backgroundColor = 'black';
        target.style.color = 'white';
        this.value = 'day'
    }
    else{
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
        this.value = 'night'
    }
    ">

코드가 훨씬 간결해진 것을 볼 수 있습니다. 그 뿐만 아니라, 이 코드는 몇 번을 복사해서 붙여넣더라도 따로 추가적인 수정 없이 계속 사용할 수 있습니다.

리팩토링 - 중복 제거하기

두 번째로 리팩토링 해 볼 부분은 바로 document.querySelector('body') 입니다. 이 부분이 무려 4번이나 등장하고 있죠. 코딩을 할 때에는 중복을 없애주는 것이 중요합니다. 그렇기 때문에 이 부분을 제거해보도록 합시다.

이렇게 하면 target이라는 변수를 만들어서 거기에 body 태그를 찾아서 넣고, 이 target 변수만 간단하게 사용해서 코드의 길이를 줄일 수 있습니다. 그 뿐만 아니라 첫 번째 줄만 수정해주면, target이 쓰이는 네 줄을 모두 바꿀 수 있다는 장점도 가지고 있습니다.

생각해보기

1) 다음과 같은 코드에서 리팩토링을 진행할 수 있는 부분을 찾아서 고쳐봅시다.

if(document.querySelector('h1').value === 'night') {
  document.querySelector('body').style.backgroundColor = 'black';
  document.querySelector('h1').style.color = 'white';
  document.querySelector('h1').value = 'day';
}
else {
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('h1').style.color = 'black';
  document.querySelector('h1').value = 'night';
}

var target_h1 = document.querySElector('h1');
var target_body = document.querySElector('body');


if(document.querySelector('h1').value === 'night') {
    target_body.style.backgroundColor = 'black';
    target_h1.style.color = 'white';
    target_h1.value = 'day';
  }
  else {
    target_body.style.backgroundColor = 'white';
    target_h1.style.color = 'black';
    target_h1.value = 'night';
  }

www.boostcourse.org/

다 함께 배우고 성장하는 부스트코스

부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다.

www.boostcourse.org

github.com/hhhminme

hhhminme - Overview

꾸준히 공부중인 초보 개발자지망생 hub@kakao.com. hhhminme has 12 repositories available. Follow their code on GitHub.

github.com

'네이버 부스트코스 > [부스트서포터즈3기]자바스크립트의 시작' 카테고리의 다른 글

[부스트코스]자바스크립트의 시작(배열과 반복문, 활용) (0)	2021.01.26
[부스트코스]자바스크립트의 시작(반복문,배열) (0)	2021.01.19
[부스트코스]자바스크립트의 시작(데이터타입, 변수와 대입연산자, 웹브라우저 제어, CSS기초, 제어 태그 선택) (0)	2021.01.11
[부스트코스]자바스크립트의 시작(수업 소개,script 태그,이벤트,콘솔) (0)	2021.01.10
[부스트코스] 네이버 커넥트 부스트코스 3기 서포터즈 합격! (0)	2021.01.09

현재글[부스트코스]자바스크립트의 시작(프로그래밍, 조건문, 비교연산자와 블리언, 조건문, 리팩토링)

반가워요 허브입니다.

💬hub@kakao.com

👍github.com/hhhminme

🤖한국산업기술대학교 AI 챗봇 산돌이

https://pf.kakao.com/_pRxlZxb

자바스크립트, API, 자료구조, 백준, AWS, 정렬, 생활코딩, 퀴즈풀이, 알고리즘, 자바스크립트의시작, 부스트코스, 네이버커넥트, 문제풀이, 연결리스트, 선택정렬, Linked list, 부스트코스서포터즈, 네이버, 배열, c언어,

Today :
Yesterday :

👨‍💻 ModernAlchemist 허브의 개발 일지