Script 태그
HTML의 태그 중 하나인 script 태그 안에 Javascript 코드를 쓸 수 있다.
<body>
<script>
document.write("hello,world");
</script>
</body>하지만 이는 HTML만으로도 똑같이 동작하게 코드를 작성할 수 있다.
HTML과 Javascript의 가장 큰 차이점은 Javascript로 작성한 코드는 동적이라는 것이다.
예를 들어, 1+1을 출력한다고 가정했을 때, HTML과 Javascript로 작성한 코드의 결과는 다음과 같다.
Javascript와 사용자의 상호작용, 이벤트
Javascript에서는 코드를 통해 사용자와 상호작용이 가능하다.
예를 들어, 다음과 같은 코드를 통해 버튼을 누르면 alert창(위에 안내문 뜨는거)이 뜨도록 할 수 있다.
<input type="button" value="hi" onclick="alert('hi')">
onclick은 사용자가 클릭하면 실행해주는 것이다.
이처럼 웹 브라우저에서 일어나는 유용한 사건을 이벤트(event)라고 한다.
이벤트는 onclick 말고도 onchange(입력창에서 사용자가 키보드를 이용해 무언가를 입력) 등 10~20가지의 이벤트가 존재한다.
변수
변수나 대입연산자 등의 개념에 대해서는 이미 자바를 공부하며 학습하였기 때문에 정리를 생략한다.
다만 Javascript에서 변수를 선언할 때는 변수 이름 앞에 var를 붙이면 좋다. 근데 안써도 되는 것 같다.
var world="hello"제어할 태그 선택하기
Javascript가 제어할 태그를 선택할 때는 querySelector를 이용하면 된다.
document.querySelector('body')위 코드는 페이지 내에서 body라는 이름의 태그를 모두 선택하는 것이다.
class를 가진 태그를 선택하고 싶으면 CSS와 마찬가지로 앞에 '.'을 붙이면 되고 id를 가지느 태그는 '#'을 붙여부녀 된다.
<input type="button" value="night" onclick="document.querySelector('body').style.backgroundColor='black';">위 코드는 "night라는 버튼을 클릭했을 때 body 태그의 배경 색상을 검은색으로 변경한다."라는 의미이다.
