JS #1 HTML과 JS의 만남.

<input type="button" value="night" onclick="

document.querySelector('body').style.backgroundColor='black';

document.querySelector('body').style.color='white';

">

night 버튼, 클릭 시 자바스크립트 실행.

​

document.querySelector('body')

-> 이 문서 내에서 body tag를 선택. 즉 화면 전체.

​

document.querySelector('body').style.backgroundColor='black';

-> body tag 내 style 속성 값인 배경색을 검정색으로.

​

즉 버튼을 눌러 자바 스크립트를 실행해서 css 속성을 변경한다.

​

​

자바스크립트는 HTML 위에서 동작하는 언어.

​

JS를 추가하려면

<script>

document.write('hello world');

</script>

태그 이용.

​

​

​

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

클릭 시 경고문 hi가 나온다. -> 이벤트.

type="text" -> 텍스트 박스.

onchange=".." -> 값이 변경될 시 이벤트 발생.

onkeydown=".." -> 키를 눌렀을 시 이벤트 발생.

​

​

'(문자열)'.length -> 문자열의 크기.

​

개발자 도구의 콘솔창을 활용해서 따로 자바스크립트 파일을 만들지 않아도

자바스크립트 코드를 짜보고 실행할 수 있다.