본문 바로가기
웹프로그래밍

{JS] 6. 자바스크립트로 웹브라우저 제어하기

by kimsfamily 2020. 10. 7.

이번시간에는 첫번째 보여주었던 예제를 한번 구현해보겠습니다.

 

 

1. 먼저 버튼을 만들어야겠죠?

<input> 태그를 통해서 night, day에 대한 버튼을 만듭니다.

버튼이 만들어졌어요!

 

이제 본격적으로 어떻게 저 버튼을 누르면 배경화면의 색깔과 글자가 바뀌게 할지를 고민해야겠죠.

고민은 검색을 통해서 해결할 수 있습니다.

 

2. 자바스크립트로 CSS의 태그를 선택하는걸 검색해봅시다!

 

 

페이지를 들어가서 예제를 한번 살펴봅니다.

아래와 같이 사용하도록 되어 있네요.

var el = document.querySelector(".myclass");

자, 이걸 활용해볼께요

먼저 마우스를 클릭했을 때 발생하는 이벤트설정을 먼저 아래와 같이 합니다.

그리고 위 코드에 위 예제를 복사해서 붙여넣기 할께요!

아래와 같이 작성했습니다.

의미는,

 query는 웹브라우저에게 질의한다는 뜻이고,

 Selector는 css의 selector을 지정하는 의미죠.

 Selector 안에 body태그를 선택했습니다. (id별로 지정할 수 도 있어요)

 

자, 이제 선택이 되었으니 이 <body> 태그의 style 속성을 어떻게 자바스크립트로 넣을 수 있는지를 알아봐야 합니다.

 

3. 자바스크립트로 body 태그의 style 속성을 넣는법

 

검색한 결과 예제와 정의를 보면,

.style로 사용할 수 있는걸 확인할 수 있습니다.

기존에 작성된거에 .syte를 추가해줍니다.

그럼, body태그를 선택했고, style 속성을 지정해주었습니다.

이제 이 스타일속성에 어떤 액션을 줄지를 지정해주면 끝납니다!!

조금만 더 힘내세요!!

 

 

4. 자바스크립트로 body 태그의 style 속성에 배경화면 색깔 지정하는 법

 

javascript style background color로 검색했습니다.

 

네, 이런 예제가 나오네요!

document.body.style.backgroundColor = "red";

아래와 같이 backgroundColor까지 입력해줍니다.

자, 이제 저장을 하고 웹브라우저를 한번 열어봅니다.

개발자 모드에서 한번 실행해볼께요

왼쪽은 실행전 body태그에 값이 없지만, 실행 후 body태그에 style가 생긴걸 확인할 수 있습니다.

 

 

네, 드디어 성공하셨습니다.

나머지 코드도 작성해줄께요. 아래와 같이 작성합니다.

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

 

자, 모두 작성하셨으면, 결과를 한번씩 확인해보세요!!

이번시간은 여기까지 하겠습니다.

 

 

본 강의는 생활코딩 강의안을 바탕으로 재작성하였습니다.

opentutorials.org/course/3085/18792

 

 

댓글0