01 수업 소개 ~ 02 수업의 목적 _ 2

1.

야간 모드와 주간 모드를 버튼을 통해 바꾸는 방법을 알아보기.

 

1)

<input> 이라는 태그가 필요 하다.

 

2)

button 이라는 속성이 필요 하다.

 

3)

button 이라는 속성의 값을 의미하는 value 속성이 필요 하다.

 

4)

onclick 이라는 속성이 필요 하다.

>>

onclick 이라는 속성은 다음과 같다.

 

onclick 이라는 속성의 값으로는 자바스크립트가 와야 한다.

 

즉, onclick 이라는 속성의 값으로 자바스크립트 코드를 넣으면,

사용자가 onclick 의 속성이 위치하고 있는 버튼을 클릭했을 때,

자바스크립트 코드를 실행 하게 된다.

 

5)

자바스크립트 코드는 다음과 같다.

 

야간 모드시.

 

document.querySelector('태그명').style.backgroundColor = 'black';

document.querySelector('태그명').style.color = 'white';

 

주간 모드시.

 

document.querySelector('태그명').style.backgroundColor = 'white';

document.querySelector('태그명').style.color = 'black';

 

여기서, document 란, '이 문서' 를 의미 한다.

즉, '이 웹 페이지' 이다.

 

주 / 야 간 모드 모두, 뒷 배경색이 바뀌어야 하는데,

그래서, 코드가 위와 같은 것이다.

 

('태그명') 에 당연히, ('body') 가 들어 가야 하고,

 

.style 을 붙힘으로써,'이 문서' 의,'(body') 태그 영역의,style 속성 값으로,배경색을 black (white) 으로 지정 할거야 ~

 

라는 코드가 된다.

 

style.color = 'black (white); 라는 코드는, 텍스트 컬러의 색을 바꾸는 CSS 코드 이다.

 

style 속성값으로는 반드시 CSS 코드가 온다고 약속 되어 있다.

 

6)

 

4), 5) 에서의 개념을 정리 하면, 아래와 같다.

 

' onclick 이라는 속성의 값으로는 자바스크립트 코드가 와야 한다. '

 

' style 속성값으로는 반드시, CSS 코드가 와야 한다. '

 

( CSS 언어의 목표는 웹 페이지를 디자인하는데 최적화돼 있다. )

 

 

 

 

 

2.

위의 내용들을, 다시 한번 정리 하면 다음과 같다.

 

1) 

자바스크립트는 사용자와 상호 작용 하는 언어 이다. == 동적 언어 이다.

 

2)

HTML 태그 언어로만 구성되어 있는 웹 페이지는, 화면에 한번 출력 되면,

자기 자신을 절대로 바꿀 수 없다. == 정적 언어 이다.

 

3)

자바스크립트는 HTML을 제어 하는 언어 이다.

 

정적인 웹 페이지를 동적으로 바꿔주니까~

 

 

 

 

 

3.

 

그런데, 이 자바스크립트를 HTML 위에서 사용 하기 위해서는,

 

자바스크립트 코드가 시작된다는 사실을 알려 줘야 한다.

 

그때 사용 하는 태그가 <script> 태그 이다.

 

웹 브라우저는 <script> 태그 내부에 있는 코드를,

자바스크립트 코드로 해석 한다.

 

그냥 그렇게 약속이 되어 있다.