이진욱의코딩

복습차 응용 본문

JS

복습차 응용

Crucifi 2019. 7. 20. 00:41

이번시간에는 제가 한 번 앞선내용 복습도 할겸, 이런것도 가능하다 라는것을 보여주기 위해서

코드를 짜봤습니다.

 

흔히 우리가 웹브라우저를 이용할 때를 보면 자기전이나 어두운 곳에서 인터넷 검색이나 이런 활동들을 하는데요

이럴 때 쓰는 야간모드라는 것이 있습니다.

흰색바탕이 검은색으로 색반전이 일어나면서 밤에 스마트폰 또는 컴퓨터로 검색이나 작업을 할 때 눈의 피로를

감소시켜주는 역할을 합니다.

 

프로토타입으로 만든것이니 많이 허술합니다.....

 

<!DOCTYPE html>
<html>
<head>
  <title>web1-javascript</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1 ><a href="0717.html">web</a></h1>
  <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';
   ">
   <ol>
     <li><a href="https://terms.naver.com/entry.nhn?docId=1168097&cid=40942&categoryId=32838">html</a></li>
     <li><a href="https://terms.naver.com/entry.nhn?docId=1179641&cid=40942&categoryId=32854">css</a></li>
     <li><a href="https://terms.naver.com/entry.nhn?docId=848218&ref=y&cid=42346&categoryId=42346">js</a></li>
   </ol>
   <h2>javascript</h2>
   <p>
      웹 페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어.
      사용자 경험을 향상시키기 위한 방법으로 주로 사용된다. 일반적으로 HTML 문서에 내재되며, 브라우저에서 실행된다.예를 들면, 마우스를 HTML 문서의 특정 이미지나 
      텍스트 위로 가져갔을 때 이미지 크기가 커지거나 텍스트의 색이 바뀌는 기능이다. 
      또 검색창 입력 박스에 ‘자’를 입력하면 현재 기준으로 사용자 검색이 많은 ‘자’로 시작하는 검색어 목록을 보여주는 기능도 자바스크립트로 구현한 것이다.
      자바스크립트는 1995년 미국의 넷스케이프 커뮤니케이션즈(Netscape Communications)에서 처음 개발되었다. 자바스크립트 표준은 1996년 11월부터 유럽 컴퓨터 제조업자 
      협회(ECMA: European Computer Manufacturers Association) 기술위원회 39(TC-39)에서 에크마스크립트(ECMAScript, ECMA-262)라는 이름으로 개발되었다. 
      최신 표준은 2017년 6월에 제정된 ECMAScript 2017이며, 2015년부터 1년에 한 번씩 새로운 버전의 ECMAScript를 공개하고 있다.
      자바스크립트는 주로 웹 브라우저 내에서 사용되는 언어였으나, 자바스크립트 기반의 런타임 플랫폼(예: Node.js)들이 개발되면서 서버측 프로그램 개발에도 사용이 크게 확대되었다.
      다음은 자바스크립트가 내재된 HTML 문서의 예로, 브라우저에서 ‘자바스크립트 실행’ 버튼을 클릭하면 < script > 태그
    </p>
  
  </body>
 </html>

코드는 이렇게 한 번 적어봤구요

 

결과를 한 번 봅시다.

 

흰색바탕
색반전

코드 설명하겠습니다.

 

input type="button" value="night" onclick=" 이부분은 button을 만드는 태그에서 value는 버튼의 이름을 의미하고

onclick은 버튼을 클릭하는 이벤트가 발생했을 때 어떤 동작을 할 것인지를 동적으로 자바스크립트 코드를 통해서

지정하는 역할을 한다.

 

document.querySelector('body').style.backgroundColor = 'black';

document.querySelector('body').style.color = 'white';

 

querySelect메소드의 지정대상을 body태그로 설정

 

지정 대상이 아이디일 경우에는 앞에 #을 붙여주고 클래스일 경우에는 .을 붙여준다. 그리고 elector뒤에 저런식으로 붙여서 배경색깔을 지정할 수 있고 폰트 색깔은 .color을 붙이면 된다.

 

 

이렇게 하면 night버튼을 클릭 했을 때 화면과 폰트 색깔을 야간모드로 변경 해주는 코드가 완성된다.

 

 

 

'JS' 카테고리의 다른 글

조건문  (0) 2019.07.24
비교연산자와 블리언  (0) 2019.07.24
HTML과 JS의 만남: 이벤트  (0) 2019.07.19
HTML과 JS의 만남  (0) 2019.07.19
JavaScript  (0) 2019.07.19
'JS' Related Articles more