TABLE FRAME 속성

// 정규식 짜르귀 ~
preg_replace : function( array_pattern, array_pattern_replace, string ){

      for (var i=0 , new_string = new String(string) , stop = array_pattern.length; i < stop; i++)
        new_string = new_string.replace( new RegExp(array_pattern[i], "gi") , array_pattern_replace[i] );

      return new_string;
}

http://company.com/dir/page.html에서 아래의 URL을 참조 했을때의 결과입니다.

<script>	document.domain = "mySite.com"</script>

여러분이 개발자이고 나와 같은 길을 걸어 왔다면, 웹페이지에서 꽤 많은 Javascript 조각들을 사용해 왔을 것이다. 마치 UI의 딱풀 마냥..

최근까지 나는 Javascript가 내가 취업 했을 때보다 더 객체지향(OO_ 능력을 가졌다고는 하지만 난 별로 그것을 사용해야하는 느낌은 받지 못했다. 브라우져들이 Javascript와 DOM의 좀더 표준화된 형상을 지원하기 시작함에 따라, client 상에서 구동하기 위한 더 복잡하고 기능적인 코드를 작성하 것이 가능해졌다. 그것은 AJAX 사상(事象)을 탄생하도록 도왔다.

우리 모두가 AJAX 애플리케이션을 만들기위해 코드를 작성하는 것을 것을 배울 즈음해서, 우리가 알고있었던 Javascript는 정말 빙산의 일각에 불과했다. 자, 이제 우리는 입력값 검사와 하찮은 업무들과 같은 간단한 UI 허드렛일들을 넘어서 사용되고 있는 Javascript을 살펴 볼 것이다. 요즘, client 상의 코드는 점점 더 진보적이고 계층화되며, 더 많이 실제 데스크탑 애플리케이션 또는 c/s환경의 무거운 client 처럼 되어 가고 있다. 우리는 class library, object model, hierarchy, pattern 들 그리고 단지 우리의 server 쪽 코드에서 눈에 익었던 다른 많은 것들을 알아 볼 것이다.

여러가지면에서 우리는 갑작스레 화면의 bar를 전보다 훨씬 높게 놓는것에 대해 얘기 할수 있다. 새로운 WEB을 위해 애플리케이션들을 작성하기 위해서는 훨씬 강도높은 기술의 숙달을 필요로 한다. 그리고 우리는 이 목적을 이루기 위해서 우리 자신의 Javascript 기술들을 향상시켜야만 한다. 만일 외부에 존재하는 많은 javascript library를 사용하기를 시도한다면, Prototype.js, Scriptaculous, moo.fx, Behaviour, YUI, 등등 처럼, 여러분은 결국 그 JS code를 여러분 스스로 판독해서 알아야 할것이다. 아마 여러분은 라이브러리들이 그것을 구현하는 방법을 배우기 원하거나 알기 원하거나 해서, 또는 라이브러리가 사용법을 이해하기 위한 유일한 방법이거나 해서, 문서가 대부분의 라이브러리들과 관련되어 있어 보이지 않거나 해서..( Maybe because you want to learn how they do it, or because you're curious, or more often because that's the only way to figure out how to use it, since documentation does not seem to be highly regarded with most of these libraries. 아마도 이유인즉 그것들이 어떻게 동작하지 배우고 싶기 때문이거나, 호기심 때문이거나, 종종 이 라이브러리들의 대부분이 문서화가 덜 되어있기 때문에, 사용법을 알기 위한 유일한 방법이 그것밖에 없기 때문일 것이다. ) 그 밖에 무엇이든지 그 경우에 있어서, 전에 그것과 같은 어떠한 것들을 본적이 없다면 여러분은 낯설고 두려운 상황에 직면하게 될 것이다.

이 글의 목적은 아직 익숙하지 않은 생성자들의 타입들을 꼼꼼히 설명함에 있다.

Prototype.js documentation

JavaScript Object Notation (JSON,)은 AJAX 테마와 관련하여 갑자기 뜬 새로운 기술 용어 중 하나이다. JSON은 javascript에서 선언적 object의 하나의 방식이다. 이제 바로 예제를 보고 어떻게 처리하는지 보도록 하자.

자, 소스 포맷을 약간 추가 해서 알아 보기 쉽게 보도록 하자:

여기서 우리는 두개의 속성들(color 과 legCount)과 메서드(communicate)를 이용하여 object 참조를 만들었다. 콤마로 구분된 리스트로서 object의 속성들과 메소드들을 정의되어있는것을 이해하는것은 어렵지 않은 일이다. 각 구성들을 name으로 정의되어 보여지며 colon(:) 따라오서 그 다음으로 정의부 이다. 속성의 경우에서는 단지 값으로 정의부를 채운다. 익명 함수(anonymous function)을 할당으로 메소드들을 만든다. 이는 다음 아래 줄에서 더 자세히 설명할 것이다. object를 만든 후에 myPet 변수에 할당하며, 우리는 다음과 같이 이 변수를 사용 할수 있다:

여러분은 요즘 JS에서 도처에 사용되어진 JSON을 볼 것이다. 함수들에 인수, 리턴 값들, 서버의 응답들(string들 에서) etc.

이는 위 질문에 대해 생각해 본적 없는 개발자들에게는 좀 생소 할 것이지만 JS에서 함수(function) 또한 object이다. 예를 들어, string을 처리하는 다른 함수에 인자로서 함수를 처리 할 수 있다. 이는 광범위하게 사용되어지고 매우 유용하다.

이 예제를 보도록 하자. 우리는 다른 함수(annoyThePet)에 함수들(myDog.bark, myCat.meow)을 인자로 주어 줄 것이다. annoyThePet function에서 인자로 주어진 function을 사용 할 것이다.

우리가 myDog.bark 과 myCat.meow에 추가도니 괄호 "()" 없이 인자로 사용한 것에 대하여 주목 해야 한다. 만일 우리가 인수로 넘긴 function이 존재 하지 않거나 method를 호출하고 return value를 인수로 넘긴다면, 두 경우에 대해 undefined를 보일 것이다.

여러분이 나의 게으른 고양이가 개 처럼 짖게 만들기 원한다면, 여러분은 이처럼 쉽게 할 수 있다:

다음 JS안에 두 줄은 같은 일을 한다.

나는 여러분이 이미 알고 있는 대로, 여러분은 사각 괄호를 사용하여 array안의 각각의 아이템들을 접근 할 수 있다:

하지만 여러분들을 숫자 색인으로만 접근 제한하지 않는다. 여러분은 string으로 멤버의 이름을 사용하여 JS object 각 멤버들을 접근 할 수 있다. 다음 예제는 빈 object를 만들고 name으로서 어떤 멤버들을 추가한다.

위의 코드는 아래와 같이 동일한 효과를 가진다:

다양한 방법으로, JS에서 object들의 사상과 연관 arraray(hashes)들은 구별 하지 않는다. 다음 두 줄 역시 같은 일을 한다.

OOP 프로그래밍 언어들의 강력한 힘은 class들의 사용에서 나온다. JS에서 나는 어떻게 class들을 정의하는지 나의 이전 경험으로 비춰볼때 짐작초차 하기 어렵다. 직접 판단하시오.

우리의 Pet class에 method를 추가 하는 방법을 보도록 하자. 우리는 모든 class들이 가지고 있는 prototype property를 사용하게 될 것이다. prototype property는 class의 어떠한 object가 가지고 있을 모든 멤버들을 포함하는 object이다. String, Number, and Date 같은 default JS class들 조차도 prototype object을 가지고 있다. 우리는 method들과 property들을 prototype object에 추가 할 수 있다. 그 class의 어떠한 object가 이 새로운 멤버를 자동으로 얻는다.

prototype.js과 같은 라이브러리는 여러모로 편리할 때가 있다. 만일 우리가 prototype.js를 사용한다면, 우리의 코드를 깔끔하게 할 수 있다.(적어도 내 견해로는..)

만일 여러분이 클로져(절차를 오브젝트로서 취급하는 기능. 이 오브젝트화 된 절차를 클로져라함)를 지원하는 언어들 - Ruby 또는 C#2.0- 을 이용하여 작업한 적이 없다면 여러분은 다음 이디엄이 매우 생소하다는것을 느낄 것이다.

워~! 내가 너무 앞어서 여러분이 이것보다 더 좋은 기사를 찾아 보기 전에 여기 무슨 일이 생겼는지 설명한다.

무엇보다 먼저, 위 예제에서 우리는 prototype.js library를 사용하고 있다. 이것은 Array class에 each function을 추가한다. each function은 function object을 하나의 인자를 받는다. 차례로, array에서 각 item에 대해 이 function을 한번씩 호출 할 것이며, 호출될때 두개의 인자를 전달한다. 현재 item에 대한 그 item과 index 이다. 자 우리의 iterator function을 호출 해보자. 또한 우리는 이것과 같은 작성된 코드를 작성할 수 있다.

비록, 이 마지막 포맷이 이해하기에 더 편하지만 myIterator function을 찾는 코드에서 주변으로 튀어 버리는 현상을 야기한다. myIterator를 호출하는 같은 장소에서 iterator function의 로직을 가지는것이 좋다. 또한, 이경우에, 우리의 코드에서 어디 다른 곳에 iterator function를 필요로 하지 않을 것이며, 그래서 우리는 문제없이 myIterator function을 anonymous function로 할 수 있다.

원래의 예제를 더 분명하게 하기 위해서 어떤 하이라이팅 효과를 이용해서 다시 보자.

우리가 가지고 있는 가장 일반적인 문제들 가운데 하나는 JS를 이용함에 있어서 this 키워드의 사용을 우리의 코드에 작성하기 시작할 때 이다. 그것은 실제 올가미가 될수 있다.

우리가 전에 언급한 것 처럼, 함수 또한 JS에서 object이고 때때로 우리는 function를 전달한 것을 알아 채지 못한다.

예제로 이 코드 조각으로 다뤄 보자.

buttonClicked function를 어떠한 object 외부에서 정의 하였기 때문에 우리는 this 키워드가 window 또는 document object 참조를 포함 할 것이라고 생각하는 경향이 있을 것이다.(이코드 브라우저에서 보여지는 HTML 페이지의 중앙에 있다고 가정 하자.)

그러나 우리가 이 코드를 실행시켜 보면 그것이 클릭된 버튼의 id를 가리키거나 보여지는 것으로 작동되어 보여진다. 각 버튼의 onclick method은 buttonClicked object 참조를 포함하게 되며, 이전의 거기에 무엇이 있던간에 교체되어 진다. 버튼을 클릭할때 마다, 브라우저는 다음 줄과 같은 어떤 일을 수행할 것이다.

결국 그렇게 혼란스러운것은 아니다. 그렇죠? 그러나 여러분이 다뤄야할 다른 object를 갖기 시작했고 버튼의 click과 같은 이벤트에서 이러한 object를 반응시키기 원한다.

나의 페이지에서 Clear button을 클릭 할수 있고 이 3개의 text 박스들을 모두 비울 것이다. 그 다음에 여러분은 runtime error를 얻기 위해 단지 버튼 클릭만 시도하면 된다. 이 에러는 this 키워드와 관련 있을 것이다(추측 컨데..). 이 문제는 this가 버튼에 참조를 포함한다면 this.formFields가 정의 되지 않는다 것이다. 이것은 정확하게 무슨 일이 발생 하겠는가 이다. 한가지 빠른 해결책은 우리의 코드 마지막 줄을 재 작성하는 것이 될 것이다.

그것은 우리가 helper object의 컨텍스트 안에 우리의 helper method를 호출하는 특정의 타입의 새로운 function을 만드는 방법이다.

소개

웹 도처에 사용되는 자바스크립트의 늘어가는 인기는 클라이언트측 코드가 안정성, 속도, 재사용성등이 혼합으로 구현되도록 하는것이 좀더 중요하게 되었다. 이것을 달성하기 위한 가장 좋은 방법중 하나는 간단한 라이브러리와 모든 프로젝트를 위한 기본사항처럼 사용하기 위한 문법이다. 고맙게도 Sam Stephenson 는 우리의 자바스크립트 개발을 쉽게 하기 위한 Prototype.js 라 불리는 놀라운 함수들의 라이브러리를 만들었다.

우리의 독자들이Prototype 문법을 사용하는 문서 를 읽은 후 크게 놀랐고, 우리는 많은 개발자를 위해 좀더 쉽게 배울수 있도록 도와주는 라이브러리를 위한 참조문서를 만드는게 좋겠다는 결심을 했다. 다음의 튜토리얼은 Particletree프로젝트에서 사용된 가장 공통적인 함수들을 사용하는 간단한 예제와 함께 설명할 것이다. 이 문서는 Sergio Pereira에 의해 좀더 많은 내용을 가진 비공식적인 프로토타입 문서 와 함께 사용되었음을 의미한다. 그리고 script.aculo.us 문서 위키는 모든 자바스크립트/프로토타입 개발자들이 읽기를 매우 추천한다.

시작하기

파일을 다운로드 한 후에, 당신이 선호하는 디렉토리에 그 파일들을 넣어둬라. 당신이 해야할 일은 html문서에 다음처럼 추가를 하는 것이다.

이것으로 자바 스크립트를 개발하는게 10배는 쉬워진다. 지금, 당신이 획득한 새롭고 멋진 무기를 보자.

알림 - 이 튜토리얼은 1.3.1버전을 기반으로 작성되었다.

$() 함수

가장 자주 사용되고 편리한 함수인, $()는 DOM요소를 다루기 위한 쉬운 방법을 제공한다. 일반적으로, 당신이 DOM내 특정 요소에 접근하고자 한다면, 다음처럼 작성할것이다.

$()를 사용하면, 다음처럼 간단히 작성할수 있다.

간단하고 멋지지만 이러한 장점보다, $()함수는 다중 요소를 함수안으로 가져오는 기능을 가지고 있기 때문에 document.getElementById()보다 좀더 강력하다.

이 예제에서, 우리는 루프를 통해 간단히 접근할수 있는 요소들의 배열을 가지고 오는 것을 볼수 있다.

폼 헬퍼(Form Helper) 함수

폼은 HTML과 CSS관점에서 근심거리일뿐 아니라, 자바스크립트의 측면에서도 그렇다. Prototype.js는 폼을 다루는 유용하고 독창적인 함수를 제공한다.

$F() 함수 는 폼 요소의 값과 전달하는 ID를 반환한다. 만약 우리가 다음처럼 HTML필드를 둔다면,

우리는 $F()함수를 사용하여 폼내의 값들에 쉽게 접근할수 있다.

제어와는 관계없이 값을 얻는 기능은 대부분의 환경에서 좀더 쉽게 폼을 처리하도록 해준다. 여기에 이 함수를 사용할때 찾을수 있는 두가지 결점이 있다. 1) radio그룹의 선택된 값에 접근하는 쉬운 방법이 없다(하나의 radio요소의 값만 처리). 2) $()함수를 사용할때처럼 다중 ID를 전달하는 것이 불가능하다.

*다른 함수인, Form.getElements() 는 타입에 관계없이 모든 폼 요소의 배열을 반환한다.

이 예제에서, 우리는 myform이라는 id를 가진 폼으로 부터 모든 요소를 가져온다. 만약 당신이 onclick을 추가하고 싶거나 각각의 폼필드에 도움말 팝업을 추가하기를 원한다면, 당신은 위와 같은 형식을 통해 할수 있다.

우리가 볼 다음 메소드는 Form.serialize()이다. Ajax요청을 빌드할때, 당신은 데이터를 전달하기 위해 당신 자신만의 문자열을 포맷팅하기를 원한다. 폼이 서브밋되었을때, 문자열은 빌드되고, serialize()는 처리를 쉽게 만든다.

우리를 돕기 위해 문자열을 빌드하라. 하지만 메소드를 좀더 좋게 만드는 것은 이것은 필드의 타입에 기초를 두지 않는 것이다. 우리는 이전에 $F()가 radio그룹에서 몇가지 문제점을 가지는 것을 봤다. 하지만 serialize()는 어떠한 필드 타입을 위해서도 값을 정확하게 처리한다. 사용가능한 폼 메소드만 있는 것은 아니다, 나머지것들을 보기 위해서는 Sergio의 문서 를 보라.

getElementsByClassName

getElementsByClassName()가 아직도 자바스크립트로 빌드되지 않은 이유는 뭔가.? 이것은 프로토타입이 아니고 그래서 프로토타입은 문서객체의 확장처럼 저장소(arsenal)로 이것을 추가했다. 이것은 document.getElementsByTagName()처럼 정확하게 작동한다. 단지 차이점은 className을 체크하는 것이다.

반환되는 배열은 주어진 className과 일치하는 모든 요소를 포함한다. 이것은 다중 className을 가진 요소들과도 잘 작동한다. getElementsByClassName()는 도처에서 모든 프로젝트에서 사용되는 함수가 되었다. 주로 DOM이벤트에 붙기 때문에 나는 모든 개발자가 이것을 사용하도록 제안한다.

요소 헬퍼(Element Helper) 함수

요소객체는 공통적으로 DOM조작을 돕는 많은 수의 헬퍼 함수를 제공한다. 몇몇 이러한 함수는 하나의 호출에 10줄 이상의 코드를 단순화하는동안 어떤 새로운 것도 생성하지 않는다. 그럼 몇몇 예제를 보자.

헬퍼 없이 요소의 높이를 가져오자.

그리고 지금은 헬퍼를 사용하는 경우이다.

이 경우, 헬퍼는 어떠한 잇점도 제공하지 않는다. 지금 우리가 요소로부터 className을 제거하길 원하는가.? 이것은 (Prototype.js소스코드로 부터 얻어진) 다소 긴 방법이다.

그리고 지금은 헬퍼 함수를 사용하는 경우이다.

멋진가.? 첫번째 예제와는 달리, 대부분의 헬퍼 함수는 공통적인 작업을 쉽게 수행하여 시간과 수고를 아낀다. 그리고 일관성을 위해, 이것은 프로젝트 도처에 Element문법을 사용하는 것이 가장 좋은 방법이 될것이다. 헬퍼 함수의 전체 목록과 그것들을 사용하는 방법을 보기 위해서, Sergio의 프로토타입 문서를 보라.

Try.these 함수

Try.these()는 다른 자바스크립트 구현물과 관계없이 브라우저를 종속되지 않고 작동하는 코드를 생성하도록 개발자를 도와주기 위한 멋진 함수이다. 객체와 브라우저 인식의 자신만의 방법대신에, 이 함수는 에러를 발생할때까지 코드의 하나의 경로를 수행하도록 시도하고 다음 경로로 교체한다.

위 예제에서, 첫번째 경로는 내부 에러발생시 수행을 멈출것이다. 이것을 알라. 모든것은 에러가 발생되지 전에 수행되어야 하기 때문에 이것은 우리의 코드가 신중하도록 하기 위해 중요하다. 우리는 코드가 두번 수행되지 않도록 주의해야만 한다. 전체적으로, Try.these()는 우리가 종종 사용하는 함수일뿐 아니라, 이것이 존재하고 어떻게 사용해야 하는지 아는것은 멋진 일이다.

Ajax 지원

이 라이브러리에서 Ajax지원 함수는 부족하지 않다. 그리고 나는 Prototype.js의 도움으로 Ajax애플리케이션을 생성하는 방법을 보여줄것이다. 문서로부터 우리는 다음처럼 일반적인 Ajax요청을 볼수 있다.

메소드가 post이거나 get인 지점에서, 파라미터는 이름/값 형태의 문자열이고, onComplete은 모든것이 종료되었을때 호출되어야 하는 함수이다. 핵심기능을 이해했을때, 라이브러리를 도구화하는 자신만의 함수를 생성하여 반복적인 Ajax호출을 만드는 것이 쉽다. 먼저, Ajax요청을 처리하는 간단한 함수이다.

요청이 종료된후, 이것을 ajax_response()로 보낸다.

당신이 Ajax요청을 만든후, 응답은 언제나 ajax-response()로 보내진다. 여기서 다른 Ajax요청은 bHasRedirect(전역변수)가 true로 셋팅된 경우에만 만들어질것이고 true가 아니라면 아마 코드는 함수와 originalRequest.responseText()의 전역 배열에 기반하여 수행될것이다.

PeriodicalExecuter

PeriodicalExecuter객체가 초기화되면, 이것은 주어진 기간에 특정 함수를 반복적으로 호출한다. 이것은 당신이 사이트의 Ajax부분을 자동으로 수정하길 바랄때 유용할것이다.

PeriodicalExecuter 생성자는 첫번째 파라미터처럼 호출하기 위한 함수를 예상한다. 그리고 이것은 시간간격(초단위)이다. 비록 공통적인 setInterval()가 밀리세컨드를 다루지만 시간을 혼동하지 말라. 하지만 이 함수에서 우리는 초 단위로 다룬다. 예제는 Ajax가 복잡하다고 가정하지만, 이것은 어떤 이유로 페이지를 수정할수 있다. Prototype.js는 또한 Ajax를 다룰때 쉽게 처리할수 있는 Ajax.PeriodicalUpdater클래스를 가진다.

추가적인 고급기능.

우리가 Prototype.js가 제공하는 모든 함수와 메소드를 다룰수는 없지만, 이것은 여기서 다룰수 없는 것중에 몇몇을 강조해두는 것은 중요하다고 볼수 있다.

감독(observe) - 이 메소드 함수는 addEvent()와 비슷하고, DOM에 이벤트를 붙이기 위해 사용된다.

사용자 상호작용(User Interaction) - 당신은 사용자를 처리하는 key가 무엇을 만드는지 알기 위해 KEY_TAB와 같은 전역값내 빌드된것을 찾을수 있다. 추가적으로, 당신은 마우스를 클릭할때 위치를 찾을수 있다.

클래스 생성(Class Creation) - Prototype.js가 제공하는 것이 무엇인지 왜 멈추는가.? 같은 문법과 함수를 사용하여, 우리는 일관성을 유지하기 위해 자신만의 클래스를 빌드할수 있다. 생성자와 추가적인 메소드를 추가하는 것은 결코 쉽지 않다. 이것을 포장하기 위해 문서에서 Class.create() 를 보라.

당신이 저자를 알지못하고 무엇인가 발생한것을 제대로 이해하지 못할때 일반적인 코드/라이브러리를 사용하는 것을 받아들일수 있는가.? 당신이 코드를 테스트하고 사람/커뮤니티를 신뢰하는 만큼 나의 대답은 예이다. Prototype.js의 경우, 신뢰는 두개의 소스로부터 빌드된다. 먼저, Ruby on Rails 은 프로토타입 지원과 통합되었다. Ruby on Rails이 훌륭한 개발 기본이 된 이후로, 많은 버그가 발견되었고 Prototype.js가 좀더 안정화되도록 많은 문제가 해결되었다. 두번째, 개발자는 Ruby on Rails의 creator 를 고용하는 37시그널에서 근무한다. 나는 회사의 개발 환경을 신뢰할 뿐 아니라, Prototype.js가 테스트가 지속되고 지속적으로 발전하리라고 생각한다. 주어진 것으로 나의 프로젝트를 테스트하고, 나는 나의 모든 프로젝트에 이 라이브러리를 자신있게 사용한다.

Prototype.js는 이 튜토리얼에서 목록화된 것보다 두배 이상의 함수를 가지고 명백히 체크아웃할 가치가 있다. 만약 당신이 파일 사이즈(약 30K)가 꺼려진다면, 당신이 사용하지 않는 클래스는 뺄수 있고 사용자에게 제공하기 전에 PHP와 함께 자바스크립트 파일을 압축할수 있다는 것을 기억하라. 또한 당신이 약간의 메소드를 사용했다면 나머지는 배우기 쉽다. 그래서 배우는 과정은 매우 간단하다. 기본적으로 이것을 시도하기 위한 핑계거리는 없다. 위에서 본 예제는 Particletree에서 이것들을 다룬 방법이고 테스트없이 사용된 것은 없다. 기억하라. 이것은 Prototype.js에 대한 소개이고 그래서 비공식적인 프로토타입 문서를 참조하고 신뢰해야 하며 다양한 메소드를 찾는 어려운 작업을 위해 script.aculo.us 문서 위키 wiki를 보라. 언제나 처럼, 당신이 실수나 가능한 개선사항이 있다면, 우리에게 알려달라.

• HTML에 JavaScript 삽입
  <script language="javascript">
JavaScript Statements
</script>
  
  
• HTML에 JavaScript 코드 파일 삽입
  <script language="javascipt" src="src.js">
</script>
  
  
• 변수의 대소문자 구분
  
  
• 변수에 포함된 데이터의 형을 지정하지 않고, JavaScript 인터프리터가 변수에 포함된 데이터 형을 추적하고 변환.
  
  
• JavaScript 데이터 형
  • 숫 자 형 : 정수와 부동 소수
  • BOOLEAN : true, false
  • STRING : 작은 따옴표나 큰 따옴표에 들어가 있는 값으로, 특수문자 포맷 사용시에는 '\'와 함께 사용.
  • null : 아무런 값도 없는 것으로, 변수를 초기화 시키거나 어떤 값이나 이벤트를 지울 때 사용됨
  • undefined : 변수만 만들고, 값을 할당하지 않은 상태
  
  
• 유형간의 변환
  • 스트링 피연산자가 비스트링 연산자와 사용된 경우 다른 연산자를 모두 스트링으로 변환
  • BOOLEAN값은 1과 0으로 변환되어 수치 연산을 지원
  • null값은 스트링 연산에 대해서는 "null", 논리 연산에서는 false, 그리고 수치 연산에서는 0으로 각각 변환
  • 변환 함수
    • eval() : 스트링 표현식을 수치값으로 변환하고, 파라미터가 수치형태가 아닌 스트링 값이면 에러 발생
    • parseInt() : 스트링에 포함된 첫번째 정수를 리턴하고, 스트링이 정수로 시작되지 않으면 0을 리턴
    • parseFloat() : 스트링에 포함된 첫번째 부동 소수를 리턴하거나 스트링이 적절한 부동 소수로 시작되지 않으면 0을 리턴
  
  
• 배열 : 값의 시퀀스를 정렬할 수 있는 객체로, JavaScript의 특수형으로 배열 사용 전엔 반드시 선언해야 한다.
  • 배열 선언 예
    arrayName = new Array(arrayLength)
arrayName = new Array()
arrayName = new Array(value0,value1, ..., valuen)
  
  
• JavaScript만의 특수 연산자
  • comma(,) 연산자 : 두 표현식을 계산하고, 두 번째 표현식의 값 리턴
  • delete 연산자 : 객체의 프로퍼티나 배열 인덱스의 요소 삭제하고, 항상 undefined 값 리턴
  • new 연산자 : 객체 형의 인스턴스를 만들기 위해 사용
  • typeof 연산자 : 연산자의 형을 식별하는 스트링 값을 리턴
  • void 연산자 : 값을 리턴하지 않는다
  
  
• 지역 변수와 전역 변수 : 함수 안에서만 사용되는 것을 지역 변수라 하고, 프로그램 내에서 사용되는 변수를 전역 변수라 하는 데, 지역 변수 사용시 반드시 var 키워드와 함께 선언해야 함
  

이벤트 처리!!

• 이벤트 정의와 사용
  • 이벤트 : 사용자가 웹페이지나 기타 다른 브라우저에 수행한 작업으로 인한 결과
  • 이벤트 처리 : 이벤트로 인해 수행되는 프로세스
  • 이벤트 핸들러 : 프로세스를 수행하는 코드
  • 사용 예 : 사용자가 링크 위로 마우스를 갖다 대면 다이얼로그 박스를 표시한다거나, 폼에 입력한 데이터를 검증한다거나, 버튼을 클릭할 때 애니메이션을 나타내거나, Java 애플릿과 브라우저 플러그인이 상호작용을 하도록 한다.
  
  
• JavaScript가 정의한 이벤트

  HTML 태그	JavaScript 이벤트	설명
  다양	mouseMove	마우스 이동
  <A>..</A>	Click	마우스로 링크를 클릭
  	dbClick	마우스를 링크위에서 더블클릭
  	mouseDown	마우스 버튼을 누름
  	mouseUp	마우스 버튼을 놓음
  	mouseOver	마우스를 링크위로 이동
  	mouseOut	링크 위에 있던 마우스를 링크 밖으로 이동
  	keyDown	사용자가 키를 누름
  	keyUp	사용자가 키를 놓음
  	keyPress	사용자가 키를 눌렀다가 놓음
  <IMG>	abort	사용자 액션으로 인해 이미지 로딩 작업을 중단함
  	error	이미지 로딩하는 동안 에러 발생
  	load	이미지가 로드되고 화면에 나타남
  	keyDown	사용자가 키를 누름
  	keyUp	사용자가 키를 놓음
  	keyPress	사용자가 키를 눌렀다가 놓음
  <AREA>	mouseOver	마우스가 클라이언트측 이미지맵의 한 영역으로 이동함
  	mouseOut	마우스가 이미지맵 영역 밖으로 이동
  	dbClick	사용자가 이미지맵의 한 영역을 더블클릭함
  <BODY>..</BODY>	Click	사용자가 문서의 본문을 클릭
  	dbClick	문서의 본문을 더블 클릭함
  	keyDown	키를 누름
  	keyUp	키를 놓음
  	keyPress	키를 눌렀다가 놓음
  	mouseDown	마우스 버튼을 누름
  	mouseUp	마우스 버튼을 놓음
  <BODY>..</BODY> <FRAMESET>..</FRAMESET> <FRAME>..</FRAME>	blur	윈도우에서 현재 입력 포커스가 사라짐
  	error	윈도우가 로드되는 동안 에러 발생
  	focus	입력 포커스가 현재 윈도우로 이동
  	load	윈도우 로딩이 완료됨
  	unload	윈도우를 종료함
  	move	윈도우가 이동됨
  	resize	윈도우의 크기가 바뀜
  	dragDrop	윈도우에 객체를 드롭
  <FORM>..</FORM>	submit	사용자가 폼을 제출
  	reset	사용자가 폼을 재설정
  <INPUT TYPE="text">	blur	현재 입력 포커스가 텍스트 필드에서 사라짐
  	focus	현재 입력 포커스가 텍스트 필드로 이동
  	change	텍스트 필드가 변경되어 현재 입력 포커스가 사라짐
  	select	텍스트 필드에 있는 텍스트가 선택됨
  <INPUT TYPE="password">	blur	패스워드 필드에서 입력 포커스가 사라짐
  	focus	패스워드 필드에 입력 포커스 생김
  <TEXTAREA>..</TEXTAREA>	blur	텍스트 영역이 현재 입력 포커스가 사람짐
  	focus	텍스트 영역에 입력 포커스 생김
  	change	텍스트 영역이 변경되어 입력 포커스가 사라짐
  	select	텍스트 영역에서 텍스트가 선택됨
  	keyDown	키를 누름
  	keyUp	키를 놓음
  	keyPress	키를 눌렀다 놓음
  <INPUT TYPE="button">	Click	버튼이 클릭됨
  	blur	입력할 수 없도록 버튼이 흐려짐
  	focus	입력할 수 있도록 포커스 생김
  	mouseDown	버튼 위에서 왼쪽 마우스 버튼 누름
  	mouseUp	버튼 위에서 왼쪽 마우스 버튼 놓음
  <INPUT TYPE="submit">	Click	제출 버튼이 클릭됨
  	blur	제출 버튼에서 입력 포커스가 사라짐
  	focus	제출 버튼에 입력 포커스 생김
  <INPUT TYPE="reset">	Click	리셋 버튼이 클릭됨
  	blur	리셋 버튼에서 포커스가 사라짐
  	focus	리셋 버튼에서 포터스가 놓임
  <INPUT TYPE="radio">	Click	라디오 버튼이 클릭
  	blur	라디오 버튼에서 입력 포커스가 사라짐
  	focus	라디오 버튼에 입력 포커스 생김
  <INPUT TYPE="checkbox">	Click	체크 박스가 클릭
  	blur	체크 박스에서 입력 포커스가 사라짐
  	focus	체크 박스에 입력 포커스 놓임
  <INPUT TYPE="file">	blur	파일 업로드 폼 요소에서 입력 포커스 사라짐
  	change	사용자가 업로드될 파일을 선택
  	focus	파일 업로드 폼 요소에 입력 포커스 놓임
  <SELECT>..</SELECT>	blur	선택 요소가 현재 입력 포커스 잃음
  	change	선택 요소가 변경되어 입력 포커스가 사라짐
  	focus	선택 요소에 현재 입력 포커스가 놓임

  
  
• 이벤트 처리 속성

  이벤트핸들링속성	실행되는 상황
  onAbort	이미지를 로딩하는 작업이 사용자의 한 행동으로 인해 취소되었음
  onBlur	문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 사라짐
  onChange	텍스트 필드나 텍스트 영역, 파일 업로드 필드, 선택 항목이 변경되어 현재 입력 포커스가 사라짐
  onClick	링크나 클라이언트측 이미지맵 영역, 폼 요소가 클릭됨
  onDbClick	링크나 클라이언트측 이미지맵 영역, 문서가 더블 클릭됨
  onDragDrop	드래그된 객체가 윈도우나 프레임에 드롭됨
  onError	이미지나 윈도우, 프레임을 로딩하는 동안 에러가 발생함
  onFocus	문서나 윈도우, 프레임 세트, 폼 요소에 입력 포커스 놓임
  onKeyDown	키를 누름
  onKeyPress	키를 눌렀다 놓음
  onKeyUp	키를 놓음
  onLoad	이미지나 문서, 프레임이 로드됨
  onMouseDown	마우스 버튼 누름
  onMouseMove	마우스를 이동함
  onMouseOut	링크나 클라이언트측 이미지맵에서 마우스를 옮김
  onMouseOver	마우스를 링크나 클라이언트측 이미지맵으로 옮김
  onMouseUp	마우스 버튼을 놓음
  onMove	사용자가 윈도우나 프레임을 이동함
  onReset	폼의 리셋 버튼을 클릭하여 폼을 리셋시킴
  onResize	사용자가 윈도우나 프레임의 크기를 조절
  onSelect	텍스트는 텍스트 필드나 영역에서 선택됨
  onSubmit	폼이 제출됨
  onUnload	사용자가 문서나 프레임 세트를 종료함

객체 정의하기

• 객체 유형 정의
  
  • 프로퍼티 : 객체에 들어 있는 데이터 값에 액세스할 때 사용.
  • 메소드 : 객체에 어떤 작업을 할 때 사용하는 함수.
• 객체 유형 만들기
  사용자가 직접 객체 유형을 정의하고 특정 객체 인스턴스를 만들 수 있 는데 이렇게 만들려면 객체 유형의 특정 인스턴스를 만들 때 사용되는 함수를 정의하기만 하면 된다. 본래 이러한 생성자 함수는 다음과 같은 일을 한다.
  
  • 객체 유형의 프로퍼티에 값을 할당한다.
  • 객체 유형의 메소드로 사용할 수 있는 다른 함수를 지정한다.
• 객체 사용 예
  
  1. table 객체의 정의 (table.js)
     function table_getValue(row,col){
      return this.data[row* this.columns+col ];
     }
     function table_setValue(row,col,value){
      this.data[row* this.columns+col ]=value;
     }
     function table_set(contents){
      var n=contents.length;
      for(var j=0;jthis.data[j]=contents[j];
     }
     function table_isHeader(row,col){
      return this.header[row* this.columns+col ];
     }
     function table_makeHeader(row,col){   this.header[row* this.columns+col ]=true;
     }
     function table_makeNormal(row,col){   this.header[row* this.columns+col ]=false;
     }
     function table_makeHeaderRow(row){   for(var j=0;j< this.columns+j)
        this.header[row* this.columns+col ]=true;
     }
     function table_makeHeaderColumn(col){   for(var i=0;i< this.rows;++i)
        this.header[i* this.columns+col ]=true;
     }
     function table_write(doc){
      doc.write("<TABLE BORDER="+ this.border+">");
      for(var i=0;i< this.rows;++i) {
        doc.write("<TR>");
        for(var j=0;j< this.columns;++j) {
          if( this.header[i* this.columns+j ]) {
            doc.write("<TH>");
            doc.write( this.data[i* this.columns+j ]);
            doc.write("</TH>");
          }
          else {
            doc.write("<TD>");
            doc.write( this.data[i* this.columns+j ]);
            doc.write("</TD>");
          }
        }
        doc.writeln("</TR>");
      }
      doc.writeln("</TABLE>");
     }
     funtion table(rows,columns) {
      this.rows=rows
      this.columns=columns
      this.border=0
      this.data=new Array(rows*columns)
      this.header=new Array(rows*columns)
      this.getValue=table_getValue
      this.setValue=table_setValue
      this.set=table_set
      this.isHeader=table_isHeader
      this.makeHeader=table_makeHeader
      this.makeNormal=table_makeNormal
      this.makeHeaderRow=table_makeHeaderRow
      this.makeHeaderColumn=table_makeHeaderColumn
      this.write=table_write
       }
     
     
  2. table 객체 사용하기
     <HTML>
     <HEAD>
     <TITLE>Defining Object Types</TITLE
     <SCRIPT LANGUAGE="JavaScript" SRC="table.js"><!-
     //-></SCRIPT>
     </HEAD>
     <BODY>
     <H1>Defining Object Types</H1>
     <SCRIPT LANGUAGE="JavaScript"><!-
     t=new table(3,4)
     contents=new
     Array("This","is","a","test","of","the","table","object.","Let's","see","it","work")
     t.set(contents)
     t.border=4
     t.makeHeaderColumn(0)
     t.write(document)
     //-></SCRIPT>
     </BODY>
     </HTML>
     
     
  3. 객체 유형에 프로퍼티와 메소드 추가
     : prototype 프로퍼티를 통해서 인스턴스화할 수 있는 미리 정의된 객체 유형에 프로퍼티와 메소드 추가
     사용 예
     <HTML>
     <HEAD>
     <TITLE>Updating Object Types </TITLE>
     <SCRIPT LANGUAGE="JavaScript" SRC="table.js"><!-
     //-></SCRIPT>
     </HEAD>
     <BODY>
     <H1>Updating Object Types</H1>
     <SCRIPT LANGUAGE="JavaScript"><!-
     function table_colorWrite(doc){
      ........
      함수 정의
      ........
      ........
     }
     t=new table(3,4)
     table.prototype.bgColor="Cyan"
     table.prototype.colorWrite=table_colorWrite
     .............
     .............
     t.colorWrite(document)
     //-></SCRIPT>
     </BODY>
     </HTML>
     
     
  4. 프로퍼티와 메소드 삭제
     delete objectName.propertyName
     delete objectName.methodName
     

브라우저 객체

window 객체

• 모든 브라우저 스크립트의 기본적인 것으로, 브라우저가 자동으로 정의하는 최상위 레벨의 객체이다. 현재 열려 있는 각 윈도우에 대해 별도의 window 객체가 정의된다.

frame 객체

• 프레임은 윈도우를 독립된 표시 영역들로 분할한 후, 이 영역들에 표시되는 정보들을 강력하게 컨트롤 할 수 있게 해준다.
• 프레임 객체의 프로퍼티와 메소드는 window 객체와 같지만, close() 메소드는 지원하지 않는다.

document 객체

• JavaScript 에서 아주 중요한 객체로, 이 객체를 사용하면 로드될 문서를 업데이트하고 로드된 문서 안에 있는 HTML 요소에 액세스할 수 있다.

navigator 객체

• navigator 객체는 window 객체와 마찬가지로 브라우저 객체 모델에서 최상위 레벨의 객체이며, 스크립트를 실행할 때 사용되는 브라우저의 종류와 버전에 대한 정보 제공한다.

event 객체

screen 객체