JavaScript 1일차 - 수업소개 / HTML과 JavaScript의 만남 1 (script 태그) / HTML과 JavaScript의 만남 2 (이벤트)

수업소개

 

JavaScript의 탄생 배경 : 사람들의 조작에 의해 상호작용이 가능한 웹사이트를 만들고 싶다!

html이 멈춰있는 이미지라고 한다면 JavaScript는 그 이미지를 마치 영화처럼 움직이게 한다.

 

수업의 목적

자바스크립트는 html을 제어한다!

 

수업의 최종적인 목표는 무엇인가?

-하나의 기능을 구현하기 위해서 필요한 문법을 챙긴다. 실습을 통해 문법을 배운다!

 

사용자와의 상호작용을 통해 야간모드/주간모드를 버튼을 통해서 바꾸는 기능을 만들어보는 실습을 할 것이다.

 

HTML과 JavaScript의 만남 1 (script 태그)

 

<script></script> : JavaScript의 시작과 끝을 알리는 태그. 이 안의 내용은 JavaScript로 해석한다.

 

html로 입력한 1+1은 그냥 1+1로 보여지지만 JavaScript는 계산이 가능

 

자바스크립트에서 어떤 글씨를 쓸 때에는 document.write();를 쓴다

ex) document.write('hello world');

    document.write(1+1);

 

HTML과 JavaScript의 만남 2 (이벤트)

 

버튼을 누르면 경고창이 뜨게하고싶다!

JavaScript alert 구글링

 

<input type="button" value="hi"> : hi라는 버튼을 생성

<input type="button" value="hi" onclick="alert('hi')"> : hi버튼을 클릭하면 hi경고창이 뜬다

 

- onclick 속성

onclick 속성 뒤에는 반드시 js가 와야한다.

onclick이 위치한 곳을 클릭하면 뒤에 js가 동작된다.

 

- 웹브라우저에서 일어날 수 있는 이벤트(onclick, onpage, onkeydown....)

<input type="button" value="hi" onclick="alert('hi')">

<input type="text" onchange="alert('changed')"> : 텍스트를 입력했을때 내용이 변경되면 changed 경고창이 뜬다

<input type="text" onkeydown="alert('key down!')"> : 텍스트를 입력했을때 키가 눌리면 key down! 경고창이 뜬다