728x90

웹브라우저 제어

JS 를 통해서 할 수 있는 일 중의 하나인 웹브라우저 제어에 대해 알아보자. 

첫 번째, CSS 의 가장 본질적이고 중요한 문법들을 살펴보자.

두 번째, JS 를 이용해서 제어하고자 하는 태그를 선택하는 방법에 대해 살펴보자. 

( 9 to 11 은 CSS 에 대한 수업으로 skip.)

제어할 태그 선택하기
  • 3.html 으로 가서 야간모드와 주간 모드 버튼 만들기.
    버튼을 클릭했을 때 태그의 style 속성을 동적으로, 프로그래밍적으로, 또 상호작용에 의해 넣으려고 한다. 
    • JS 문법에 따라서 웹브라우저에게 <body> 태그를 선택하도록 하는 명령
       추천검색어 javascript select tag by css selector

      Ex) element = document.querySelector(selectors);
      (query - 질의하다. 즉 웹브라우저에게 질의하다. Selector 는 CSS 의 선택자.)

      Ex) id값을 가진 태그라면 
      <body id="target">
        <input type="button" value="深色模式-开启" onclick="
          document.querySelector('#target')
        ">

    • <body> 태그에 style 이라는 속성을 어떻게 JS 로 넣을 수 있는가
      추천 검색어 javascript element style

      Ex) var x = document.getElementById("myP").style.borderTop;
      (getElementById 은 querySelector 의 대체제)
    • JS 에서 <body style = "background-color : black ; "> 으로 하고 싶다.
      추천 검색어 javascript style background-color

      Ex) document.getElementById("myDiv").style.backgroundColor = "lightblue";
      (주의할 것은 CSS 에서와 다르게  - 가 빠지고 C 가 대문자라는 것) 

이렇게 한 후 웹페이지에서 검사를 들어가 확인해보면 버튼을 클릭했을 때 <body> 태그가 변하는 것을 볼 수 있었다.

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - JavaScript</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1><a href="index.html" title="到百科">WEB网络</a></h1>
    <input type="button" value="深色模式-开启" onclick="
      document.querySelector('body').style.backgroundColor='black';
      document.querySelector('body').style.color='white';
    ">
    <input type="button" value="深色模式-关闭" onclick="
      document.querySelector('body').style.backgroundColor='white';
      document.querySelector('body').style.color='black';
    ">
    <div id="grid">
      <ol>
        <h3>计算机语言-常见语言</h3>
        <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
        <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
        <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
      </ol>
      <div id="文章">
        <h3>-JavaScript</h3>
          <p style="margin-top:40px;">
              <strong><u>JavaScript</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
          </p>
          <p>
            <a href="https://baike.baidu.com/item/JavaScript" target="_blank" title="到百科的JavaScript意义">更多>></a>
          </p>
          <img src="coding.jpg" width="50%">
        </div>
      </div>
  </body>
</html>
프로그램, 프로그래밍, 프로그래머
PROGRAM, PROGRAMMING, PROGRAMER

JS 라는 프로그래밍 언어가 무엇인가를 이론적으로 돌아보는 시간. 

또한 프로그래밍 언어에 대한 좀 더 보편적인 의미를 음미해보는 시간. 

 

HTML 과 JS 는 둘다 컴퓨터 언어다. 그러나 JS 는 컴퓨터 언어임과 동시에 컴퓨터 프로그래밍 언어라고 하고 HTML 은 컴퓨터 프로그래밍 언어라고 하지는 않는다. 

 

이 차이를 알기 위해서는 프로그램 PROGRAM 이라는 말이 어떤 의미인지 생각해보면 좋을 것 같다. 

 

생활코딩님의 설명으로 어원을 따라가면 

음악회를 가보면 음악이 연주되는 순서가 있다. 이런 순서를 예전부터 PROGRAM 이라고 했다.

즉 PROGRAM 이라는 말의 중심에는 순서라는 의미가 깊숙이 자리 잡고 있었다. 

이 순서를 만드는 행위를 PROGRAMMING 이라고 하고 그 순서를 만드는 사람을 PROGRAMER 라고 한다. 

여러 분야에서 사용되는 말이지만 소프트웨어 산업에서도 차용한 것이라고 볼 수 있다. 

 

컴퓨터로 돌아와서 적용해보면 

 우리가 컴퓨터를 사용하며 반복되는 과정이 발생하고 반복되는 과정에서 시간이 많이 걸리고, 자주 반복하고, 실수를 계속한다면, 반복적인 일을 계속하게 된다면 절망할 것이다. 이 절망을 극복한 사람들이 만들기 시작했다. 

 

시간의 순서에 따라서 실행되어야 할 기능을 프로그래밍 언어의 문법에 맞게 글로 적어두는 방식을 고안한 것.

그 작업이 다시 필요할 때 고안한 것을 글로 적어두었던 것을 '실행해줘'라고 컴퓨터에게 주면 그 일을 한다.

이것이 PROGRAM 의 가장 본질적인 의미이다. 

 

 HTML 은 웹페이지를 묘사하는 목적의 언어이기 때문에 시간의 순서에 따라 무엇을 할 필요가 없다. 그래서 시간의 순서에 따라 실행되는 기능을 갖고 있지 않는다. 

 

 하지만 JS 는 다르다. 사용자와 상호작용하기 위해서 고안된 컴퓨터 언어이고 그러기 위해서는 시간의 순서에 따라서 웹브라우저의 여러 기능이 실행되어야 하기 때문에 PROGRAMMING 이라는 형태를 띠고 있고 바로 이런 점이 HTML 과 JS 의 다른 중요한 특징이라고 생각한다.

<input type="button" value="深色模式-开启" onclick="
      document.querySelector('body').style.backgroundColor='black';
      document.querySelector('body').style.color='white';
    ">

 위의 코드처럼 '<body> 태그의 백그라운드 컬러를 검은색으로 한 다음 <body> 태그의 텍스트 컬러를 흰색으로 해'라는 명령을 한다. 

 

 이렇게 처음에는 시간의 순서에 따라 나열하는 정도로 사람들은 만족했지만 이제는 다른 조건에 따라서 다른 순서의 기능이 실행되게 하거나 반복해서 어떤 기능이 실행되도록 하고도 싶어졌다. 

 또 이 코드의 복잡해짐에 따라, 순서의 배치가 복잡해짐에 따라서, 이 복잡해진 순서를 단순하게 잘 정리 정돈하는 방법도 차차 고안되기 시작했다. 

 

 이제 인류의 여러 가지 욕심들, 그 욕심을 이루기 위해서 성취한 업적들을 따라가면서 핵심적인 기능들, 이를테면 조건문, 반복문, 함수 등을 살펴보자. 

저작자표시

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

WEB2 - JavaScript 18 (리팩토링 중복의 제거)  (6) 2021.09.15
WEB2 - JavaScript 14 to 17 (조건문)  (2) 2021.09.15
WEB2 - JavaScript 6 to 7  (0) 2021.09.14
WEB2 - JavaScript 5  (0) 2021.09.13
WEB2 - JavaScript 1 to 4  (0) 2021.09.13

티스토리툴바