자바스크립트는 HTML 문서내에 삽입되어 동적인 웹페이지를 구현할 수 있는 스크립트언어이다. 네스케이프社에서 개발하였다.
HTML안에 삽입 될때는 <script> ~ </script>안에 정의한다.
요즘은 script 태그에 "type=text/javascript" 구문을 넣지 않는데 이는 HTML5부터 표준이 되었기 때문이다.
자바스크립트를 지원하지 않는 브라우져의 경우 내용이 그냥 화면에 표시되므로… <!-- //--> 와 같은 html 주석 코드를 넣는다.
<script> ~ </script>의위치는<head>~</head>태그또는<body>~</body>태그에모두정의가능.
<script language="javascript"><!--자바스크립트문장들...//--></script> <HEAD>정의 <BODY>호출 (실행전 정의되도록 하기 위해 권장)
<html> <head> <title>연습</title> <script language= "javascript"> <!-- …….. //--> </head> <body> …. </body> </html>
파일을 불러올 때는
<SCRIPT language="javascript" src="http://chat.vaslor.net/chat.js"></SCRIPT>
<script>의 src 속성을 사용해서 외부 JavaScript 파일을 요구 응답형 JavaScript로 사용하는 것이 좋은 방법이다. XHTML 규칙을 지킴과 동시에 유지보수와 관리에 대한 이점도 살릴 수 있다.
기본적으로 웹 브라우저가 외부 자바스크립트를 불러오는 일반 script 태그를 만나게 되면, 우선 해당 스크립트를 내려받아 해석하고 실행(execute)할 때까지 웹 문서의 HTML 코드 parsing 작업을 잠시 뒤로 미룬다. 그래서 용량이 큰 스크립트를 문서 해석 초기에 만나게 되면 해당 페이지를 불러오는 속도마저 지체되는 현상을 일으키게 되어 결국 전체적 성능을 떨어뜨리는 결과를 가져오는데, 이런 성능의 병목 현상을 막기 위해 여러 다양한 꼼수들이 쓰여왔다. 이런 부작용을 근본적으로 막기 위해 소개된 것이 script 태그의 async와 defer 속성이다.
사용 예를 보면 아주 단순하다:
<script async src="myAsyncScript.js" onload="myInit()"></script> <script defer src="myDeferScript.js" onload="myInit()"></script>
위와 같이 async 혹은 defer 된 스크립트는 문서 parsing 작업의 중단 없이 동시에 내려받게 되며, 선택적으로 onload handler를 지정해서 일반적인 초기화 작업도 진행할 수 있다. 둘의 차이를 결정짓는 중요한 것은 바로 스크립트가 실행되는 시점이 서로 다르다는 것인데, async script는 window의 load event 전 내려받는 즉시 바로 실행되는 데 반해 defer script는 문서의 parsing 작업이 끝난 후 DOMContentLoaded event 전에 문서에 삽입된 순서에 따라 실행된다.
인라인 JavaScript 코드는 항상 <script> 태그 안에 기술하게 되며, XHTML 해석기가 <script> 태그를 해석할 때 JavaScript 코드로 인한 오류를 발생시킬 확률이 매우 크다. 이러한 오류를 방지하는 방법은 JavaScript 코드를 CDATA 섹션과 주석으로 묶어버리는 것이다.
<script type="text/javascript"> //<![[CDATA[ var s = "안녕하라!"; alert(s); //]]> </script>
/* 설명 */ :여러줄을주석문을사용할때 // 설명 : 한줄을주석문으로사용할때
<html> <head> <title>연습</title> <script language= “javascript”> <!-- // 여기는주석입니다. /* 여기도주석입니다*/ …….. //--> </head> <body> …. </body> </html>
자바스크립트의 자료형은 varient 타입이라고 할 수 있다. 세부적으로는 char, int, double, float, int, long, short, void 등의 타입을 가지고 있지만, 구분없이 선언해도 된다.
var i=10; var j="문자열";
Abc(o) 123abc (x) Total# (x) Two of (x) int(x) Not! (x) _tot (o)
var _ = function() { alert("hello from _"); } var \u0024 = function() { alert("hello from $ defined as u0024"); } var Ø = function() { alert("hello from Ø"); } var $$$$$ = function() { alert("hello from $$$$$"); }
<html> <head><title> </title> <script language="javascript"> <!-- document.write("Hello~") //--> </script> </head> <body> </body> </html>
자바스크립트의 변수에는 값, 객체 뿐아니라 함수도 할당할 수 있다. 이런 형식은 선언문이 아니라, 일반 수식과 같은 표현식 이므로, 끝에 ; 를 붙여준다.
var add = function (a,b){ return a+b; };
다른 언어같으면 function 다음에 함수 이름이 오겠지만, 변수이름이랑 함수이름이 같으므로, 함수이름은 생략한다.
호출은 그냥 변수 이름으로 한다.
add(10,12);
객체 안에 속성으로 변수를 담을 수 있으므로, 객체 안에 함수를 담을 수도 있다.
var test = {};
test.add = function(a,b){return a+b;};
객체를 만들면서 함수를 정의할 수도 있다.
var test = { add: function(a,b){return a+b;} };
function add(a,b) { // do … return a+b; }
array 정의 및 값 설정은 다음과 같은 세 가지 방법이 있다.
var cars = new Array(); cars[0] = "Volvo"; cars[1] = "BMW"; var cars = new Array("Volvo", "BMW" ); var cars = ["Volvo", "BMW"];
배열안의 요소는 대괄호 []를 이용해서 접근한다.
배열의 요소는 변수, 객체, 함수 등이 될 수 있다. 배열에 함수를 넣고 실행하는 것은 다른 언어에서는 볼 수 없는 특성이다.
var car[2]=function(a,b) { return a+b;}; console.log( car[2](10,11) );
배열의 요소에 하나씩 접근하는 방법은 for 반복문을 사용하면 된다.
for (var i=0; i< cars.length; i++) { console.log( car[i] ); }
forEach 메소드를 사용할 수도 있다. 메소드 이므로, 파라메터로 작동할 함수를 전달한다. 다른 언어와 약간 차이가 있다.
cars.forEach( function(item,index) { console.log( item ); } )
index는 각 요소의 인덱스 값이다.
배열의 메소드
push() | 끝에 추가 |
pop() | 맨끝의 요소 삭제 |
unshift() | 앞에 추가 |
shift() | 맨앞의 요소 삭제 |
splice() | 배열의 요소 삭제, 추가 |
slice() | 배열의 일부 요소를 복제 |
배열의 중간에 있는 요소를 지우려면 delete 키워드를 사용한다. (메소드 아님)
delete cars[1];
이 경우 요소는 삭제되지만, 공간은 그대로 있기 때문에 undefined 요소가 생기고, 배열의 길이도 그대로이다. 아예 공간까지 없애버리는 splice() 메소드를 사용하면 된다.
cars.splice(1,2); // 인덱스1번 요소와 그 다음 요소를 삭제한다
car.splice(1,0,"현대"); // 1번 자리에 추가
프로그래밍에 있어 모든 사물을 객체라 하고 고유의 속성과 메소드를 가지고 있다. 자바스크립트는 OOP가 아닌 객체기반(Object Based Program)이다. 자바스크립트는 객체기반언어이므로 자바처럼 클래스 선언이나 상속등은 지원하지 않는다. 자바스크립트의 객체는 한정된 수준에서 지원되고, 주로 정의되어 있는 개체를 사용한다.
객체(object) 는 중괄호 { } 를 이용해 만들 수 있다. 객체 안의 key/value pair 는 name:value 로 표기되고, comma 로 구분된다. 속성은 점(.) 연산자와 속성의 이름을 이용해 접근 할 수도 있고, 대괄호와 속성의 의름을 이용해서 접근할 수 있다.
다음의 2가지 방법으로 만들 수 있다.
person = new Object(); person = {firstname:"John"}; person.firstname = "John"; person['address']="Korea";
function person( firstname ) { this.firstname = firstname; }
오브젝트에 메소드 추가
function person(firstname) { … this.changeName = changeName; function changeName(name) { this.lastname = name; } }
자바스크립트 내장 객체는 Date Array String Math Boolean Number등이고 미리 정의가 되어 있다. 즉 사용자가 많이 사용하는 기능을 자바스크립트에 미리 내장시켰다는 것이다.
날짜와 시간을 다루는 객체로 현재 날짜시간을 알 수 있고, 시간을 설정하고 계산할 수 있다. 주요 메소드는 날짜를 설정(set),구하기(get),변환(conversion)이 있다.
<SCRIPT LANGUAGE="JavaScript"> today = new Date() str = "오늘 날짜는 " + today.getYear() + "년 " str += (today.getMonth()+1) + "월 " str += today.getDate() + "일입니다. <br>" document.write(str) str = "현재 시간은 " + today.getHours() + "시 " str += (today.getMinutes()+1) + "분 " str += today.getSeconds() + "초입니다. <br>" document.write(str) </SCRIPT>
일반적으로 자바스크립트에서 사용하는 문자열을 가르킨다.
<SCRIPT LANGUAGE="JavaScript"> var msg1, msg2 msg1 = "HappyBirthdayToYou" msg2 = "생일축하합니다" document.write(msg1.length, "<br>") document.write(msg2.length, "<br>") document.write(msg1.charAt(3), "<br>") document.write(msg2.charAt(5), "<br>") document.write(msg1.indexOf("y"), "<br>") document.write(msg2.indexOf("합"), "<br>") document.write(msg2.indexOf("꼭"), "<br>") document.write(msg1.substring(2,9),"<br>") document.write(msg2.substring(3,7),"<br>") </SCRIPT>
자바스크립트에서 배열을 사용하기 위한 객체
<SCRIPT LANGUAGE="JavaScript"> objects = new Array(3) objects[0] = "yellow" objects[1] = "blue" objects[2] = "white" document.write(objects.join("/")+"<br>") document.write(objects.reverse().join("/")+"<br>") document.write(objects.sort().join("/")+"<br>") </SCRIPT>
== is equal to== === is exactly equal to ( value and type )=== != is not equal !== is not equal ( neither value or type )
if statement if…else statement if…else if…else statement switch statement
switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }
for( variables in object ){ // do sth... }
text string 인 경우 \ 를 이용해서 code line을 구분할 수 있다.
document.write("Hello \ World!");
confirm( "text" );
var result = confirm("OK?"); if (result === true ) { // do sth… } else { // do sth… }
prompt("text", "default value");
<button onclick="myFunctionvar name= prompt("what your name?", "input name"); if ( name != null && name != "" ) { alert( "Hello" + name + "!!" ); }
<button onclick="myFunction()">New page</button> <script> function myFunction() { var page=prompt("새로 만들 페이지이름이나 수정할 페이지이름을 입력하세요","연습장"); if (page!=null) { window.location.href = "http://vaslor.net/wiki/"+page+"?do=edit"; } } </script>
이벤트 종류.
Abort | 이미지를 읽다가 중단시켰을 때 | OnAbort |
Blur | 윈도우, 폼의요소, 프레임이 포커스를 읽었을 때 | OnBlur |
Click | 폼 요소나 링크를 클릭했을 대 | OnClick |
Change | Text, textarea, select등의 값이 변경되었을 때 | OnChange |
Dragdrop | 브라우져 윈도우에 객체를 Dragdrop 했을때 | OnDragDrop |
Focus | 포커스를 얻었을 때 | OnFocus |
Load | 웹페이지의 로딩을 마쳤을 때 | OnLoad |
Keydown | 사용자가 키를 눌렀을 때 | OnKeyDown |
Keypress | 사용자가 키를 누르고 있는 동안 | OnKeyPress |
KeyUp | 사용자가 누른 키를 놓는 순간 | OnKeyUp |
MouseDown | 사용자가 마우스를 누르는 순간 | OnMouseDown |
MouseMove | 사용자가 마우스를 움직일 때마다 | OnMouseMove |
MouseOut | 마우스가 특정영역에 있다가 나갔을 때 | OnMouseOut |
MouseOver | 마우스가 특정영역에 위에 위치할 때 | OnMouseOver |
MouseUp | 사용자가 마우스 버튼을 놓는순간 | OnMouseUp |
Move | 새로운 윈도우나 프레임의 위치가 옮겨질 때 | OnMove |
Select | Text나 textarea의 일부가 선택되었을 때 | OnSelect |
Submit | 전송버튼을 클릭하여 전송할 때 | OnSubmit |
Unload | 브라우저 종료 또는 웹 페이지에서 벗어날 때 | OnUnload |
Error | 문서나 이미지를 읽다가 오류가 발생했을 때 | OnError |
Reset | 입력양식을 reset 시켰을때 | OnReset |
Resize | 윈도우의 크기가 변경되었을 때 | OnResize |
이외에도 더 있다. 참조
이벤트 핸들러는 HTML 태그의 속성으로 사용된다.
<body onLoad="alert('어서오세요')"> <input type=”button” value=”확인” onClick="alert('어서오세요')"> document.onClick = "alert('어서오세요')"
try { if(x>10) { throw "Err1"; } else if(x<5) { throw "Err2"; } else if(isNaN(x)) { throw "Err3"; } } catch(err) { if(err=="Err1") { document.write("Error! The value is too high."); } if(err=="Err2") { document.write("Error! The value is too low."); } if(err=="Err3") { document.write("Error! The value is not a number."); } }