◈ 웹문서를 브라우저가 해석하여 출력하는 순서
WebDocument Reading >> HTML Parsing(DOM Parser) >>
DOM Tree - CSS Style & JavaScript Processing >>
HTML Rendering : 출력 >> Event - EventHadler(JavaScript)
◈ 자바스크립트 자동 완성 기능을 제공받기 위해 이클립스에 Tern 플러그인 설치
①Help >> Eclipse Marketplace >> Find : tern 검색 >> Tern Eclipse IDE 설치
②Tern 플러그인을 이용하여 자바스크립트 자동 완성 기능을 제공받기 위해 프로젝트 변환
③프로젝트 >> 마우스 오른쪽 버튼(메뉴) >> Configure >> Convert to Tern Project >>
Modules : Browser와 jQuery 선택 >> Apply And Close
◈ script 태그의 src 속성을 사용하여 JavaScript Source 파일을 불러와 웹문서에 포함
→ src 속성 : JavaScript Source 파일의 URL 주소를 속성값으로 설정<script type="text/javascript" src="01_hello.js"></script>
📃01_hello.js
//JavaScript Source File // → 모든 웹문서에서 공통적으로 사용되는 기능을 제공하기 위해 작성 alert("JavaScript Source File에 작성된 자바스트립트 명령");
◈ 자바스크립트의 주석문은 자바와 동일
◈ 자바스크립트는 한 줄에 작성된 코드를 하나의 명령으로 인식하여 처리
→ 명령 마지막에 ; 기호 생략 가능
◈ 자바스크립트는 객체 지향 프로그래밍 언어로 객체를 이용하여 프로그램 작성
→ 객체의 속성(Property)과 메소드(Method)를 사용하여 명령을 작성해 실행
◈ 자바스크립트는 웹브라우저를 window 객체로 표현하여 속성과 메소드 제공
◈ window.alert(message) : 메세지창(경고창)을 생성하여 메세지를 출력하는 메소드(함수)
→ window 객체 생략 가능window.alert("Hello, Javascipt!!!");
alert("head 태그에 작성된 자바스트립트 명령");
🐧자바스크립트(JavaScript)
: 페이지에서 발생한 이벤트에 대해 페이지를 동적으로 조작하기 위한 기능을 제공하는 스크립트 프로그래밍 언어 - 클라이언트에서 해석되어 실행
◈ 태그의 onXXX 속성(이벤트 속성)에 대한 속성값으로 이벤트 처리 명령(JavaScript) 작성
형식)onXXX="javascript:자바스트립트명령; 자바스트립트명령;..."
→ javascript 접두사(NameSpace) 생략 가능
→ 네임스페이스(NameSpace) : 객체를 구분하기 위해 범위(영역)을 표현하기 위한 식별자<button type="button" onclick="javascript:alert('이벤트 처리 명령');">메세지 버튼</button> <button type="button" onclick="alert('이벤트 처리 명령');">메세지 버튼</button>
◈ 이벤트에 의해 페이지를 조작할 경우 body 태그의 마지막 자식태그로 script 태그를 선언하여 명령을 작성하는 권장
<script type="text/javascript"> alert("body 태그에 작성된 자바스트립트 명령"); </script>
📃01_hello.html
<!-- 웹문서를 브라우저가 해석하여 출력하는 순서 --> <!-- => WebDocument Reading >> HTML Parsing(DOM Parser) >> DOM Tree - CSS Style & JavaScript Processing > HTML Rendering : 출력 >> Event - EventHadler(JavaScript) --> <!-- ======================================================================= --> <!-- 자바스크립트 자동 완성 기능을 제공받기 위해 이클립스에 Tern 플러그인 설치 --> <!-- Help >> Eclipse Marketplace >> Find : tern 검색 >> Tern Eclipse IDE 설치 --> <!-- Tern 플러그인을 이용하여 자바스크립트 자동 완성 기능을 제공받기 위해 프로젝트 변환 --> <!-- 프로젝트 >> 마우스 오른쪽 버튼(메뉴) >> Configure >> Convert to Tern Project > Modules : Browser와 jQuery 선택 >> Apply And Close --> <!-- ======================================================================= --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript</title> <!-- script 태그의 src 속성을 사용하여 JavaScript Source 파일을 불러와 웹문서에 포함 --> <!-- => src 속성 : JavaScript Source 파일의 URL 주소를 속성값으로 설정 --> <script type="text/javascript" src="01_hello.js"></script> <!-- ======================================================================= --> <!-- script 태그 : 스크립트 언어를 사용하여 프로그램을 작성하는 영역을 제공하는 태그 --> <!-- => script 태그가 여러개 선언되어 있는 경우 순차적으로 실행 --> <!-- type 속성 : 스크립트 언어에 대한 문서형식(MimeType)을 속성값으로 설정 --> <script type="text/javascript"> //자바스크립트의 주석문은 자바와 동일 //============================================================================== //자바스크립트는 한 줄에 작성된 코드를 하나의 명령으로 인식하여 처리 // => 명령 마지막에 ; 기호 생략 가능 //============================================================================== //자바스크립트는 객체 지향 프로그래밍 언어로 객체를 이용하여 프로그램 작성 // => 객체의 속성(Property)과 메소드(Method)를 사용하여 명령을 작성해 실행 //============================================================================== //자바스크립트는 웹브라우저를 window 객체로 표현하여 속성과 메소드 제공 //window.alert(message) : 메세지창(경고창)을 생성하여 메세지를 출력하는 메소드(함수) // => window 객체 생략 가능 //window.alert("Hello, Javascipt!!!"); //alert("Hello, Javascipt!!!"); //============================================================================== alert("head 태그에 작성된 자바스트립트 명령"); </script> </head> <body> <!-- <script type="text/javascript"> alert("body 태그에 작성된 자바스트립트 명령"); </script> --> <h1>자바스크립트 작성</h1> <hr> <p>자바스크립트(JavaScript) : 페이지에서 발생한 이벤트에 대해 페이지를 동적으로 조작하기 위한 기능을 제공하는 스크립트 프로그래밍 언어 - 클라이언트에서 해석되어 실행</p> <hr> <!-- 태그의 onXXX 속성(이벤트 속성)에 대한 속성값으로 이벤트 처리 명령(JavaScript) 작성 --> <!-- 형식)onXXX="javascript:자바스트립트명령; 자바스트립트명령;..." --> <!-- => javascript 접두사(NameSpace) 생략 가능 --> <!-- => 네임스페이스(NameSpace) : 객체를 구분하기 위해 범위(영역)을 표현하기 위한 식별자 --> <!-- <button type="button">메세지 버튼</button> --> <button type="button" onclick="alert('이벤트 처리 명령');">메세지 버튼</button> <!-- ======================================================================= --> <!-- 이벤트에 의해 페이지를 조작할 경우 body 태그의 마지막 자식태그로 script 태그를 선언하여 명령을 작성하는 권장 --> <script type="text/javascript"> alert("body 태그에 작성된 자바스트립트 명령"); </script> </body> </html>
