on
WEB2 - JavaScript 1 to 4
WEB2 - JavaScript 1 to 4
JavaScript 수업소개
HTML 의 등장 이후, 사용자와 상호작용하는 웹페이지를 만들고 싶다는 욕망
HTML 은 정적이다. 한 번 화면에 출력되면 언제나 그 모습 그대로다. 반면에 우리가 알고 있는 데스크탑이나 모바일에서 사용되는 여러 프로그램들, 예를 들어 게임 같은 건 사용자의 조작에 반응해서 프로그램이 움직인다. 사람들은 웹페이지도 게임처럼 동적으로 사용자와 상호작용할 수 있게 되기를 원했다. 그래서 태어난 것이 JavaScript이다.
이제 웹은 HTML을 이용해서 웹페이지를 우선 만든 후에, 그렇게 만들어진 웹페이지를 JavaScript를 이용해서 사용자와 상호작용할 수 있도록 기능을 추가함으로써 HTML 의 정보와 JavaScript의 기능을 모두 갖춘 유일무이한 시스템으로 성장했다.
예를 들어서 우리가 알고 있는 수많은 웹사이트들이 프로그램처럼 사용자와 상호작용하면서도 검색엔진을 통해서 검색된다는 것은 웹만이 가진 독창적인 특성이라고 할 수 있다.
JavaScript 수업목적
실습이 중심이 돼서 문법을 익히는 것이 부가적으로 따라오는 수업
웹페이지의 야간모드와 주간모드를 버튼을 통해서 바꾸는 기능을 만들어 보자. 즉 사용자와 상호작용 하는 것.
사용자가 버튼을 클릭했을 때 그것에 반응해서 웹페이지를 바꿔주고 있다는 것.
HTML 과 JS의 만남 : script 태그
JavaScript는 기본적으로 HTML 위에서 동작하는 언어이다.
그렇기 때문에 어떻게 하면 HTML 이라는 컴퓨터 언어에 완전히 다른 문법을 가지고 있는 JavaScript를 낑겨 넣을 것인가(?)라는 얘기를 해보자.
New file - ex1.html
JavaScript document.write('你好世界'); HTML 你好世界
1+1 입력.
HTML 은 정적이다. 반면 JavaScript는 동적이다.
JavaScript document.write(1+1); HTML 1+1
1+1을 입력하면 2값으로 계산기와 같은 기능으로 출력할 수 있다.
HTML 과 JS의 만남 : 이벤트
New file - ex2.html button 만들기
button 안에 글쓰기
button 을 클릭했을 때 경고창이 뜨게 하고 싶다.
경고창은 alert 이라는 기능
추천 검색어 JavaScript alert
여기서 onclick 이라는 속성은 아주 특별한 속성인데 HTML 설명서에는 'onclick 속성의 값으로는 반드시 JavaScript가 와야 합니다' 라고 적혀 있다.
두 번째는 'onclick 속성의 속성 값은 웹브라우저가 기억하고 있다가 이 onclick 속성이 위치하고 있는 태그에 클릭했을 때 기억하고 있던 JS 코드를 JS 문법에 따라 해석해 거기 적혀 있는대로 웹브라우저가 동작할 것입니다' 라고 적혀 있다.
웹브라우저 입장에서는 onclick 속성을 만나면 'alert('你好') 라고 하는 것을 기억하고 있다가 사용자가 이 버튼을 클릭하면 그 때 실행해야지' 라고 생각하고 기다리고 있다.
이렇게 웹브라우저 위에서 일어나는 일들을 사건, event 라고 한다.
어떤 이벤트가 일어났을 때 어떠한 JS가 실행되도록 하는 것이 이 onclick 이라는 것이다.
그렇다면 웹브라우저에서 일어날 수 있는 event 들은 어떤 것들이 있을까?
상상해본다면 무수히 많겠지만 그 중 기념할 만한 것들을 정해놓았다.
여기 안에 '내용이 변했을 때' 라는 이벤트를 체크하는 이벤트도 있다.
글씨를 적고 마우스 포인트를 바깥쪽으로 뺄 때 웹브라우저가 onchange 이벤트를 실행시키게 된다.
추가적으로 적은 글자 뒤에 쓸데 없는 것을 적었다가 다시 지우면 실행되지 않는다.
추천 검색어 javascript keydown event attribute
글씨를 적고 마우스 포인트를 바깥쪽으로 뺄 때 웹브라우저가 onchange 이벤트를 실행시키게 된다. 추가적으로 적은 글자 뒤에 쓸데 없는 것을 적었다가 다시 지우면 실행되지 않는다.
이번 시간의 주인공은 'on' 으로 시작하는 속성들이었다. (onclick, onchange, onkeydown)
이런 속성들을 event 라고 부른다.
from http://livebyfaith117.tistory.com/18 by ccl(A) rewrite - 2021-09-13 13:27:18