본문 바로가기
블록체인 및 경제/웹프로그래밍

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

by Danny_Kim 2020. 10. 7.

자바스크립트 강의 목차

0. 자바스크립트란 무엇인가?

1. Script 태그 (document.write)

2. 자바스크립트 이벤트란 무엇인가?

3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기

4. 데이터 타입 문자열과 숫자

5. 변수와 대입연산자

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

7. 비교연산자, Boolean 데이터타입

8. 자바스크립트 조건문 및 활용법

9. 리팩토링(refactoring)

10. 배열에 대한 이해

11. 반복문에 대하여

12. 배열과 반복문

13. 배열과 반복문의 활용

14. 함수란 무엇이고 왜 필요한가?

15. 함수의 기본사용법, 매개변수, 인자, 리턴

16. 함수의 활용

17. 객체는 왜 필요한가?

18. 객체란 무엇인가?(객체 생성, 추가, 추출방법)

19. 객체의 활용

20. 파일로 쪼개어 관리하기

21. 라이브러리와 프레임워크

22. API & UI 그리고 프로젝트 활용도구

 


 

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

 

 

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