생활코딩 - WEB2: JavaScript을 공부하며 정리한 내용입니다.
웹브라우저는 한 번 화면에 출력되면 그 모습을 바꿀 수없다. 그러나 JavaScirpt라면 그것을 가능하게 한다.
즉, JavaScirpt는 HTML을 제어하는 언어이다.
태초의 웹페이지는 정적이었다. 그러나 동적인 웹페이지를 만들고자 하는 사람들의 욕심이 생기며 JavaScirpt가 고안되었으며 이러한 사용자와 상호작용하는 웹페이지를 만들고자 하는 욕망이 JavaScirpt의 근원이다.
현재 우리가 사용하는 대부분의 웹페이지는 사람들의 조작에 반응하며 움직인다. 이러한 웹사이트들은 html로 만들어진 위에 JavaScirpt로 상호작용 기능을 추가해서 만든 것이다.
Illustration by Pedro Fernandes / Getty Images.
비유적으로 말하자면 HTML이 인간의 골격이라면, JavaScirpt는 뇌이다.
그만큼 JS는 웹페이지의 중심적인 역할을 담당하고 있다고 볼 수 있다.
학습목표
이번 JavaScirpt 실습에서는 Night Mode Button을 만드는 것을 통하여 JavaScirpt가 어떻게 웹페이지를 제어하는지 익히고, querySelectorAll()를 이용해 선택한 엘리먼트에 onclick=""을 통해 발생하는 event를 이해하는 것이 목표이다.
먼저 최종 목표의 웹페이지는 아래와 같다.
웹페이지에 day모드와 night모드가 있으며 각각의 버튼을 클릭하면 그에 해당하는 모드가 적용되는 즉, 사용자와 상호작용하는 웹페이지를 만드는 것이 최종 목표이다.
START
1. button 만들기
먼저 에디터를 켜고 night모드를 생성할 html 파일을 불러왔다 그리고 아래처럼 input태그를 이용해 버튼을 생성해준다.
<input type="button value="day onclick=""/>클릭했을 때 특정 사건 (나이트모드로 변화)이 일어나게 해주기 때문에 JavaScirpt의 속성 중의 하나인 onclick을 사용한다. 이때 속성 onclick의 값으로 반드시 JS가 오며, 속성값을 웹브라우저가 기억하고 있다가 사용자가 클릭했을 때 JS의 속성 onclick=""이 동작하는 원리이다.
이때 웹브라우저에게 일어나는 일을 event(사건)라고 한다.
2.querySelectorAll()를 이용하여 엘리먼트 선택
그리고 버튼을 클릭했을 때 상호작용이 생기며 JavaScirpt문법에 따라 body태그를 선택하도록 한다.
<input
type="button"
value="night"
onclick="
document.querySelector('body').
document.querySelector('body').
"
/>Document 메소드
querySelectorAll()는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적NodeList 를 반환한다.
<input
type="button"
value="night"
onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
"
/>3. 배경색과 폰트색 변경 (CSS 제어)
html의 body태그에 CSS를 querySelectorAll()를 이용해 넣고,
동일한 선택자로 텍스트 컬러도 설정한다.
<input
type="button"
value="day"
onclick="document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
"
/>
4. day button 만들기
코드를 복사하여 day 버튼도 만든다. 여기서는 배경컬러와 폰트컬러를 반대로 해야한다. 버튼 value는 night이지만 css 속성은 day모드값으로 넣어줘야 하기때문에 여기서 조금 헷갈릴 수 있음!
최종적으로 완성된 코드!
<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';
"
/>그러면 결과는 이렇게 나타난다. (night모드를 적용했을 때)
[참고]
https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll
