JavaSctipt 시작하기

 JavaScript 시작하기

HTML, CSS를 학습하고 JavaScript 학습을 시작했습니다.

HTML, CSS JavaScript를 사용하고 있는 툴은 Brackets입니다. 이번 포스팅에서는 기본적인 부분을 정리해보겠습니다.

우선 HTML 코드에서 JavaScript를 사용할 수 있게 해주는 태그는 <script> </script> 태그 입니다.

script 태그를 통해서 웹브라우저에게 지금부터 자바스크립트가 시작된다는 것을 알려줍니다.

그리고, script태그 안에서 JavaScript 사용해보겠습니다.

 document 사용한 Hello world 출력

기본은 Hello world를 찍어봐야겠죠? 

각각의 웹 페이지에서는 자신의 document 객체를 갖습니다. document 인터페이스는 웹 페이지의 컨텐츠에 대해 접근할 

수 있도록 하는 기능을 제공하고, 해당 문서에 대한 전역 기능을 제공합니다. ( 참조 : Document Reference )

( 사진 출처 : w3schools )

Hello world를 찍어보기 위해, document객체를 사용하는 가장 일반적인 방법인 <script>태그에서 사용해보겠습니다.

DOM은 문서 객체 모델이라고도 합니다. DOM은 문서의 구조화된 표현과 DOM 구조에 접근할 수 있는 방법을 제공하여,

문서의 구조나 스타일, 내용 등을 변경할 수 있게 합니다.

DOM 속성이나 메소드에 대한 자세한 설명은 w3chools링크를 참고하시면 좋을 것 같습니다.

위처럼 Hello world를 찍는 방법은 매우 간단합니다.

하지만 왜 JavaScript를 사용하여 Hello world를 화면에 나타내는 걸까요? HTML의 태그를 통해서 간단하게 텍스트를

표현할 수 있을텐데.

이유는 바로 JavaScript는 데이터를 동적으로 화면에 표현할 수 있기 때문입니다.

위의 Hello world같은 경우는 <h1>태그를 사용해서도 간단하게 표현할 수 있습니다.

하지만, 동적인 데이터( 예를 들어 간단한 계산된 데이터를 표현하고 싶을 경우 )를 표현하고 싶은경우 JavaScript를 사용

하여 웹 페이지 화면에 표현할 수 있습니다.

위처럼 간단하게 JavaScript를 사용하여 10232 * 42 의 결과값을 웹 페이지에 표현하게됩니다.

 JavaScript 이벤트 사용해보기

JavaScript를 사용하여 다양한 이벤트를 사용할 수 있습니다.

수많은 이벤트 중 onchange, onclick, onmouseover, onmouseout, onkeydown, onload에 대해 정리해보았습니다.

onchange

onchange 이벤트는 HTML 엘리먼트가 변경되었을 때 발생하는 이벤트. 

onclick

onclick 이벤트는 HTML 엘리먼트를 클릭했을때 발생하는 이벤트.

onmouseover

onmouseover 이벤트는 마우스를 HTML 엘리먼트 위로 이동하게되면 발생하는 이벤트.

onmouseout

onmouseout 이벤트는 마우스를 HTML 엘리먼트 밖으로 이동하면 발생하는 이벤트.

onkeydown

onkeydown 이벤트는 유저가 키보드를 눌렀을때 발생하는 이벤트.

onload

onload 이벤트는 웹 브라우저가 페이지를 불러오는것을 완료했을때 발생하는 이벤트.