728x90

JavaScript 수업소개

 HTML 의 등장 이후, 사용자와 상호작용하는 웹페이지를 만들고 싶다는 욕망

 

 HTML 은 정적이다. 한 번 화면에 출력되면 언제나 그 모습 그대로다. 반면에 우리가 알고 있는 데스크탑이나 모바일에서 사용되는 여러 프로그램들, 예를 들어 게임 같은 건 사용자의 조작에 반응해서 프로그램이 움직인다. 사람들은 웹페이지도 게임처럼 동적으로 사용자와 상호작용할 수 있게 되기를 원했다. 그래서 태어난 것이 JavaScript이다. 

 

 이제 웹은 HTML을 이용해서 웹페이지를 우선 만든 후에, 그렇게 만들어진 웹페이지를 JavaScript를 이용해서 사용자와 상호작용할 수 있도록 기능을 추가함으로써 HTML 의 정보와 JavaScript의 기능을 모두 갖춘 유일무이한 시스템으로 성장했다. 

 

 예를 들어서 우리가 알고 있는 수많은 웹사이트들이 프로그램처럼 사용자와 상호작용하면서도 검색엔진을 통해서 검색된다는 것은 웹만이 가진 독창적인 특성이라고 할 수 있다. 

JavaScript 수업목적

실습이 중심이 돼서 문법을 익히는 것이 부가적으로 따라오는 수업

웹페이지의 야간모드와 주간모드를 버튼을 통해서 바꾸는 기능을 만들어 보자. 즉 사용자와 상호작용 하는 것.

사용자가 버튼을 클릭했을 때 그것에 반응해서 웹페이지를 바꿔주고 있다는 것. 

HTML 과 JS의 만남 : script 태그

JavaScript는 기본적으로 HTML 위에서 동작하는 언어이다. 

그렇기 때문에 어떻게 하면 HTML 이라는 컴퓨터 언어에 완전히 다른 문법을 가지고 있는 JavaScript를 낑겨 넣을 것인가(?)라는 얘기를 해보자. 

  • New file - ex1.html
    • <script>태그 - JavaScript를 넣는 방법, 웹브라우저에게 HTML 의 코드로 '지금부터 JavaScript가 시작됩니다' 라고 알려준다. 
      <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"
    <title></title>
  </head>
  <body>
    <h1>JavaScript</h1>
    <script>
      document.write('你好世界');
    </script>
    <h1>HTML</h1>
    你好世界
  </body>
</html>​
      <script> 태그를 이용해서 JavaScript를 사용한 것과 HTML 의 텍스트 그대로 입력한 것과 결과는 동일하다. 

  • 1+1 입력. 
    HTML 은 정적이다. 반면 JavaScript는 동적이다.
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"
    <title></title>
  </head>
  <body>
    <h1>JavaScript</h1>
    <script>
      document.write(1+1);
    </script>
    <h1>HTML</h1>
    1+1
  </body>
</html>​

    1+1을 입력하면 2값으로 계산기와 같은 기능으로 출력할 수 있다.
HTML 과 JS의 만남 : 이벤트
  • New file - ex2.html
    • button 만들기 
      <input type="button">   
    • button 안에 글쓰기 
      <input type="button" value="你好">     
    • button 을 클릭했을 때 경고창이 뜨게 하고 싶다. 
      경고창은 alert 이라는 기능 
      추천 검색어 JavaScript alert
      <input type="button" value="你好" onclick="alert('你好')">

 
 여기서 onclick 이라는 속성은 아주 특별한 속성인데 HTML 설명서에는 'onclick 속성의 값으로는 반드시 JavaScript가 와야 합니다' 라고 적혀 있다.
 두 번째는 'onclick 속성의 속성 값은 웹브라우저가 기억하고 있다가 이 onclick 속성이 위치하고 있는 태그에 클릭했을 때 기억하고 있던 JS 코드를 JS 문법에 따라 해석해 거기 적혀 있는대로 웹브라우저가 동작할 것입니다' 라고 적혀 있다. 

 웹브라우저 입장에서는 onclick 속성을 만나면 'alert('你好') 라고 하는 것을 기억하고 있다가 사용자가 이 버튼을 클릭하면 그 때 실행해야지' 라고 생각하고 기다리고 있다. 

 이렇게 웹브라우저 위에서 일어나는 일들을 사건, event 라고 한다.
어떤 이벤트가 일어났을 때 어떠한 JS가 실행되도록 하는 것이 이 onclick 이라는 것이다. 

그렇다면 웹브라우저에서 일어날 수 있는 event 들은 어떤 것들이 있을까? 
상상해본다면 무수히 많겠지만 그 중 기념할 만한 것들을 정해놓았다. 

  • <input type="text">     
    • 여기 안에 '내용이 변했을 때' 라는 이벤트를 체크하는 이벤트도 있다.
      <input type="text" onchange="alert('changed')">

글씨를 적고 마우스 포인트를 바깥쪽으로 뺄 때 웹브라우저가 onchange 이벤트를 실행시키게 된다. 
추가적으로 적은 글자 뒤에 쓸데 없는 것을 적었다가 다시 지우면 실행되지 않는다. 

  • <input type="text" onkeydown="alert('key down!')"> 
    추천 검색어 javascript keydown event attribute

이번 시간의 주인공은 'on' 으로 시작하는 속성들이었다. (onclick, onchange, onkeydown)
이런 속성들을 event 라고 부른다. 

 

저작자표시

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

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

티스토리툴바