생활코딩 10일차 [21.01.25]

<제어할 태그 선택하기>

JavaScript의 가장 중요한 쓰임 : 사용자와 상호작용하면서 마치 대화하는 느낌의 코드를 짜서 실행하기

이 예시로 웹 페이지의 야간모드, 주간모드 버튼 적용하기를 해보았다.

(HTML, JavaScript, CSS 한 데 모아 적용해보기 + 구글링하여 원하는 내용 찾아내기-검색하는 방법이 중요하다)

JS에서 제어할 태그 또는 element를 선택하는 방법

:document.querySelector( ) 로 지칭하고 끝에 .color,  .backgroundcolor 이런 식으로 어떤 속성을 수정할 건지 선택한다.

 

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

프로그램의 어원과 정의를 생각해보자. 프로그램의 정의를 따지기에 앞서, 프로그램이라는 말은 어디서 나왔을까?

예로부터, 음악회의 여러 연주 곡들의 순서를 한 페이지에 나열해놓은 것을 프로그램이라고 하였다. 여기서 핵심은 '시간의 순서'이다.

연주곡들을 '시간의 순서'에 따라 나열하였고, 이를 프로그램이라고 한다. 그렇다면 프로그램의 정의를 '시간의 순서'라는 초점으로 바라볼 수 있다. 

보통 HTML은 컴퓨터 언어라고 하고, JavaScript는 컴퓨터 언어라고도 하고, 컴퓨터 프로그래밍 언어라고도 한다. 하지만, HTML을 컴퓨터 프로그래밍 언어라고 지칭하지 못한다. 여기서 HTML과 JS의 차이점이 있다. 

HTML은 웹 페이지를 묘사하기 위해 고안된 언어이고 정적인 언어이다. 그래서 시간의 순서가 다소 무의미하다.

하지만 JS는 사용자와의 상호작용을 목적으로 고안된 언어이다. 상호작용을 하고 사용자가 컴퓨터를 이용한다는 것은 시간의 순서에 따라 차례대로 실행을 하거나 클릭을 하면 컴퓨터는 이에 반응하여 사용자와 상호작용한다. 상호작용에 있어 '시간의 순서'가 매우 중요하다는 뜻이다. 그렇기에 상호작용을 하기 위해 고안된 JS는 '시간의 순서'가 매우 중요하고, 그래서 컴퓨터 프로그래밍언어라고 한다.

그리고 이러한 '시간의 순서'에 맞게 코드를 짜는 사람들을 프로그래머라고 한다.

 

사용자가 상호작용하기위해 짜여진 JS의 코드들을 생각해보자. 우리가 매번 똑같은 코드를 반복하고 수많은 동작들이 있다면 불편하지 않을까? 시간이 갈수록 이 동적인 코드를 시간의 순서에 맞게, 잘 정리하고 효율적으로 쓰는 방법들이 진화되어왔다. 이를 통해 조건문, 반복문, 함수와 같은 내용들이 발전해왔고 이를 배우는 이유가 여기에 있다. 이 강의를 통해 우리가 프로그래밍 언어에 대해 다시 한 번 생각해보는 시간을 가지고, 다음 시간부터 나올 조건문, 반복문, 함수를 원론적으로 생각해볼 시간을 가졌다.

 

<조건문 예고>

조건문이란? 설정한 조건, 상황에 따라 시간의 순서를 입맛에 맞게 건너뛰거나 선택할 수 있는 것. [ if, else문 ] 

위에서 설정한 night, day 버튼이 두 개나 있는 게 불편하다. 이를 하나로 모으고 싶다. -> '토글'

토글(toggle)이란? 토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다.

 

<비교 연산자와 Boolean 데이터 타입>

boolean : true, false / 데이터 타입의 한 종류 (우리가 배웠던 데이터 타입 : number, string )

number와 string의 종류는 무한대이다. 숫자와 언어는 무한히 많으니까. 하지만 boolean은 두가지이다. (true, false)

비교연산자 : === 

document.write(1===1); : 이것을 실행하면 true라고 출력되고,

document.write(1===2); : 이것을 실행하면 false라고 출력된다.

*HTML에서 부등호(<,>) 쓰는 방법 : HTML에서는 부등호가 문법으로 사용되기 때문에, 1&lt;2라고 써야한다.

%lt; : less than의 의미 (<)

document.write(1<1); : 출력하면 false

document.write(1<2); : 출력하면 true

<조건문> & <조건문의 활용>

 

• 조건문의 문법 

if 다음 소괄호 ( ), 이 안에는 '무엇이 참인지'에 대한 값을 넣고, 중괄호 { } 안에는 참이면 출력될 코드를 기입한다.

else는 거짓일 때의 내용이며, 중괄호 { } 안에는 마찬가지로 거짓이면 출력될 코드를 기입한다.

if( ){ } 
 else { }

조건문의 예시

*<script> </script> 구문 내에서 html 식의 줄바꿈 <br> 쓰는 법 : 출력하려는 코드 안에서 문자 옆에 바로 <br>을 쓰면 줄바꿈이 된다.

출력되는 값

조건문을 활용하여 우리가 만든 웹 페이지에 night, day 기능이 한 번에 들어있는 버튼을 만들어보자.

 

우선 기본적으로, 버튼을 만들고, value값을 night로 지정한다.(기본 창은 day값인 밝은 창 화면이 나오므로 night로 바꾸는 value 기입)

클릭했을 때 night모드와 day 모드로 변환되는 것이기 때문에 onclick 이벤트를 작성한다. 여기서 조건문을 기입한다.

조건문은 기본적으로 참일 때와 거짓일 때의 이벤트를 달리 하는 논리로 구성되는데, 무엇이 참이고 무엇이 거짓인가?

조건문을 버튼의 value 값 === night 으로 설정한다. value가 night이면(참) night 창으로 활성화되고, value가 night가 아니면(거짓)

day 창으로 활성화된다.

버튼의 value 값을 지정하기 위해 input에 id값 "night_day"를 부여한다. 

자, 그러면 조건문을 작성해보자. '버튼의 value값 = night' 의미를 가진 조건문을 어떻게 작성할까? 그 전에 버튼의 value값을 지칭하는 코드를 알아야한다. 

document.querySelector('#night_day').value : '#night_day' 는 id가 night_day인 선택자라는 뜻이고 작은따옴표를 붙여준다. 끝에 .value라는 것을 적어주면 id가 night_day인 코드의 value값이라는 뜻이 된다.

조건문을 작성하고, 중괄호 안의 코드들은 각각 배경색과 글자색을 바꾸어주는 코드들이다. 

여기서 문제점을 알겠는가? 

우리가 의도한 대로, night 버튼을 눌러 배경화면과 글자색을 수정하였다. 그런데, 버튼의 value가 여전히 night 이다. 

이를 수정해주어야하는데, night 모드일 때는 버튼의 value가 day로, day 모드일 때는 버튼의 value가 night로 되게 수정해야한다.

그래서 조건문의 배경색, 글자색 코드 밑에 value값을 수정한다는 코드를 한 줄 더 기입해준다.

document.querySelector('#night_day').value='day';

이렇게 하면 완성된다.