JavaScript의 이해 - onclick

목표

Javascript를 통해 웹페이지에 button을 활성화시키고 click했을때 변화를 주고 싶음

 

 

문제

body tag에 style속성을 주기 위해서는 "이 속성을 주고자하는 tag가 누구인가?" 즉 body태그라는 것을 웹브라우져에게 알려주어야하는데 이 방법을 Javascript 문법으로 어떻게 입력하느냐 그리고 어떻게 속성을 입력하느냐

(Javascript를 통하여 제어하고자 하는 tag를 선택, css를 입력)

 

 

해결

 

 

 

 

0. Javascript in html의 방법으로 button을 만들고, 클릭했을때 body tag에 style 속성이 생겨나도록 하기 위해서는

 

1. <input type="button" value="night"> == 버튼생성

 

2. 버튼을 클릭했을때 라는 event가 필요 ==onclick event

  <input type="button" value="night" onclick="">

 

3. night라는 버튼을 클릭했을때 body tag의 style속성을 동적으로 만들고 싶기때문에
JavaScript의 문법에 따라 웹브라우져에게 body태그를 선택하도록 해야한다

 

4. google검색 - JavaScript select tag by css selector

 

<input type="button" value="night" onclick="document.querySelector('body')">

 

5. 선택은 완료 이제 이 body태그에 style속성을 어떻게 JavaScript로 넣을 수있는가

 google검색 - Javascript element style object

 

6. <input type="button" value="night" onclick="document.querySelector('body').style>

 

7. style속성 중 배경화면이라는 속성을 변화시키고 싶음

google검색 - javascript style background color

 

8. <input type="button" value="night" onclick="document.querySelector('body').style.backgroundColor = 'black' ;">

 

*JavaScript는 대소문자 구별을 확실하게 해야한다. ex) Selector , Color 등

*onclick=""에서 ""를 확실히 열고 닫아줘야 작동, querySelector('body')와 backgroundColor = 'black'에서 ""가 아닌 ''로 감싸줘야 작동

*중요한건 구글링을 했을때 전체를 검색하고 전체를 가져오는것이 아닌 부분을 검색하고 부분을 가져오는 것이 중요하고 그 구조를 파악하는것이 중요하다