자바스크립트의 시작 정리 4번째: 프로그램이란? & 조건문

Lofo·2021년 1월 14일

부스트코스 생활코딩 이고잉 자바스크립트

Javascript

목록 보기

5/14

현재까지 듣고 정리 안한 수업 LIST

프로그램, 프로그래밍, 프로그래머
조건문 예고
조건문의 활용
리팩토링(중복의 제거)
반복문 예고
배열
반복문

오늘의 정리 13 ~ 17번

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

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

HTML과 Javascript의 비교

HTML로 만든 웹페이지는 시간의 순서에 따라 실행되지 않고, 한 번 만들어지면 바뀌지 않습니다. 때문에 HTML은 컴퓨터 프로그래밍 언어가 아닌 것이죠.
반면에 Javascript는 사용자와 상호작용하고, 이를 위해서 시간에 따라 여러 기능이 실행되어야 하기 때문에 프로그래밍이라는 형태를 띄게 됩니다. 따라서 Javascript는 프로그래밍 언어라고 부를 수 있는 것입니다.

조건문

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

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

<input id="night_day" type="button" value="night">

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

여기서부터는 강의를 계속 진행하기 전, 먼저 검색해보고 적용한 내용입니다.

javascript id value라고 검색하면 될 것 같아 이렇게 검색해서 관련 내용을 찾아보았습니다. (공교롭게도 나중에 확인하니 이고잉님이랑 검색을 똑같이 했더라고요..ㅎ)
https://sourcestudy.tistory.com/206
저는 이 사이트가 가장 위에 나와서 포스트를 내용을 참고해서 코드를 작성해보았습니다.
Javascript에서 오브젝트를 얻는 방법 중에서 강의에서 id 태그를 사용하라고 했기 때문에 찾아보니까 id 태그를 이용해서 오브젝트를 받는 코드는 다음과 같습니다.

document.getElementById('textid').value;

textid 칸에 우리가 얻고 싶은 id 태그의 이름을 적으면 됩니다. 이를 이용해서 만든 토글 버튼의 코드는 다음과 같습니다.

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

강의를 계속 진행해보니 이고잉님께서는 저와 다른 코드를 작성했습니다. 저는 id 태그를 직접호출하는 코드를 사용했지만, 이고잉님께서는 querySelector를 사용했습니다.
둘의 차이에 대해서 검색해보니, 성능의 차이가 꽤 나고, getElementById는 ID태그만, querySelector는 CSS 선택자로 객체를 가져올 수 있다고 합니다.
성능과 생산성에 대한 논의를 읽어보았는데, 상당히 흥미로웠습니다. 아래 주소로 들어가셔서 한번 읽어보시면 재밌을 거에요.ㅎㅎ
https://hashcode.co.kr/questions/5692/%EA%B0%95%EC%9D%98-4-11-queryselector%EC%97%90-%EC%84%B1%EB%8A%A5%EB%AC%B8%EC%A0%9C%EC%97%90-%EB%8C%80%ED%95%B4-%EC%A7%88%EB%AC%B8-%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4

이고잉님께서 작성하신 토글 코드는 다음과 같습니다.

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';
}

생각해보기

13번 강의

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

A. HTML은 화면을 보여주기 위한 언어입니다. 화면을 구사하는 데에는 순서가 필요하지 않습니다. 그리고 어떤 동작을 반복해야되는 것도 없습니다. 그저 모양만 만들면 됩니다. 프로그램은 순서라는 말을 하시면서 프로그래밍 언어는 순서를 다르는 언어라고 했습니다. 순서가 없는 HTML은 프로그래밍 언어가 아닙니다.

14번 강의

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

A. 상황에 따라 프로그램의 진행을 다르게 할 수 있습니다. 조건문을 이용하면 시간에 따라서 화면 페이지가 자동으로 바뀌게 할 수 있습니다.

17번 강의

Q. 버튼의 onclick 속성을 다음과 같은 Javascript 코드로 바꾸었다고 해봅시다. 원래 구현한 토글과 차이가 있을까요?

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