[JavaScript] 생활코딩 2일차

Woohyun Shin·2021년 8월 22일

대입 연산자 변수

변수와 대입 연산자

웹브라우저 제어

JavaScript

목록 보기

2/3

변수와 대입 연산자

이번 시간에는 변수와 대입 연산자에 대해서 공부해볼 것이다.

변수란 '바뀔 수 있는 어떤 값'이고, 대입 연산자(=)는 '우항에 있는 값을 왼쪽 변수에 대입'하는 역할을 가지고 있다. 변수를 사용함으로써 우리는 여러가지 효용을 얻을 수 있다.

앞으로 우리는 변수 앞에 var 이라는 키워드를 사용하는 것이 좋다.

ex)var name = 'leezche';

웹브라우저 제어

이번 시간에는 JS를 통해서 할 수 있는 일 중의 하나인 웹브라우저를 제어하는 방법에 대한 테크닉들을 살펴볼 것이다.

그래서 우리는 첫 번째로, CSS의 가장 본질적이고 중요한 문법들을 살펴볼 것이고, 두 번째로 JS를 이용해서 우리가 제어하고자 하는 태그를 선택하는 방법에 대해서 살펴볼 것이다.

우리는 day와 night 버튼을 만들어서 웹페이지를 라이트 모드와 다크 모드로 설정해볼 것이다.

day와 night 버튼을 클릭했을 때 < body >태그의 style 속성을 동적으로, 프로그래밍적으로, 상호작용에 의해서 넣으려면 JS의 문법에 따라서 웹브라우저에게 body 태그를 선택하도록 해야한다.

그래서 우리는 JS로 CSS의 선택자를 'body'태그로 하고 이에 대한 style 속성에서 백그라운드와 색상을 지정하기 위해 document.querySelector('body').style.backgroundColor = 'black'; 라는 태그를 사용할 것이다.

<!doctype html>
<html>
<head>
<title>WEB1 - JavaScript</title>
<meta charset="utf=8">
</head>

<body>
  <h1><a href="index.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="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>

  <h2>JavaScript</h2>
  <p>
  자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다. 자바스크립트가 썬 마이크로시스템즈의 자바와 구문이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문에 바탕을 뒀기 때문이고, 자바와 자바스크립트는 직접적인 관련성이 없다. 이름과 구문 외에는 자바보다 셀프나 스킴과 유사성이 많다. 자바스크립트는 ECMAScript의 표준 사양을 가장 잘 구현한 언어로 인정받고 있으며 ECMAScript 5 (ES5) 까지는 대부분의 브라우저에서 기본적으로 지원되었으나 ECMAScript 6 이후부터는 브라우저 호환성을 위해 트랜스파일러로 컴파일된다.[3]
 </p>

</body>
</html>