<JavaScript>
- Javascript를 이용하면 동적인, 사용자와 상호작용할 수 있는 웹 페이지를 만들 수 있다.
따라서, 우선 html을 이용해 웹 페이지를 만든 후, javascript를 이용해 사용자와 상호작용할 수 있도록 기능을
추가한다. 이로써 html의 정보와 javascript의 기술이 융합된 웹 페이지를 만들 수 있는 것이다.
- 기본적으로 javascript는 html 위에서 동작하는 언어다.
<Html과 JavaScript가 만나는 방법>
1) <script> </script>
- 웹 브라우저한테 html의 코드로 javascript가 시작된다고 알리는 태그
- 태그 안쪽의 코드를 javascript로 인식
- html은 정적, javascript는 동적인 언어
- html은 1+1을 입력하면 그대로 출력 / javascript는 1+1을 2로 계산해 출력
2) event
- 웹 브라우저는 웹 브라우저 위에서 일어나는 사건들 중에 기념할만한 것들, 약 10~20개 정도 되는 event들을
정의해놓았다. 그것을 이용해 사용자와 상호작용하는 웹 페이지를 만드는 것이다.
ex) onclick, onchange, onkeydown
→ input 태그
- type=”button” : 버튼 형식
- value=”hi” : 버튼에 ‘hi’ 표기
(1) onclick=”alert(‘hi’)”:
- onclick 속성의 속성값에는 반드시 javascript가 와야 한다.
- onclick 속성의 속성값은 웹 브라우저가 기억하고 있다가 사용자가 클릭했을 때 기억하고 있던 javascript 코드를 실행한다.
(2) onchange
-alert(‘changed!’): 텍스트의 내용 변경 감지 시 ‘changed!’라고 쓰여있는 경고창 표시
(3) onkeydown
-alert(‘key down!’): 키보드 눌리면 ‘key down!’이라고 쓰여있는 경고창 표시
(3) 콘솔창
- 웹 페이지 상에서 우클릭→검사를 통해 개발자 도구의 콘솔 창을 띄워 javascript를 바로 실행할 수 있다.
<JavaScript의 속성>
→ html은 한 번 화면에 표시되면 자신을 바꿀 수 있는 능력이 없는 정적인 언어이다. 직접 작성해주는 대로 작업을 수행한다. 반면 javascript로 코드를 작성하면 사용자가 어떤 행동을 하느냐에 따라 다른 작업을 수행한다.
→ 위의 예시에서 사용자가 누르는 버튼에 따라 body의 style 속성값이 바뀐다.
