JavaScript 기초정리1

Javascript/Ajax 2008. 8. 21. 15:58

1장. JavaScript

1.1) 자바스크립트란?

* 자바스크립트는 선마이크로시스템즈(Sun Micro Systems)와 넷스케이프에서 공동으로 개발한 스크립트 언어이다.

* Web을 서핑을 하면서 흔희 경험하는 공지사항을 담은 작은 창이라든지 마우스 포인터를 올리면 변하는 이미지 등은 자바스크립트 정적인 HTML문서에 사용한 예이다.

* 자바스크립트의 활용분야는 다음과 같다.

- HTML Form의 값을 가공하거나 검사하여 서버쪽에 보낼 때 (CGI와 연동)

- 사용자의 입력을 제어하고 싶을 때

- 브라우저내의 여러 가지 기능을 조절하고 싶을 때

- 사용자에게 메세지를 보내고 싶을 때(경고나 확인)

- Cookie를 이용한 페이지 간의 data 이동

- Window와 프레임의 생성 및 제어

- 자바와의 연동

1.2) 자바스크립트의 특징

* HTML문서 안에 자바스크립트로 작성된 프로그램을 넣어 둠으로써 브라우저에서 실행가능하다.

* 인터프리터 언어이므로 브라우저에 의하여 실행될 때마다 번역된다.

* 자바스크립트는 스크립트 언어이므로 그 자체가 실행 가능한 것은 아니다. 그러므로 자바스크립트를 지원하지 않는 브라우저에서는 자바스크립트를 무시한다.(HTML의 주석문을 사용한다.)

* 자바스크립트는 Type검사를 엄격하게 하지 않는다. 예컨대, 실행 중에 변수의 형이 결정되기도 하고 사용 전에 선언을 하지 않아도 된다.

* 대부분의 자바스크립트 코드는 사용자, 혹은 시스템에 대한 Event-Driven방식을 지원한다. 버튼이나 텍스트 같은 Form Field와 같은 HTML객체들은 이벤트 핸들러를 추가함으로써 기능을 확장할 수 있다.

1.3) HTML 문서에 자바스크립트 추가하는 방법

A. 코드 직접입력

* [형식]

</SCRIPT>

* Language속성을 생략하면 브라우저는 자동으로 JavaScript로 인식한다. 단 VBScript를 사용할 경우 명시해야 한다.

* <SCRIPT태그는 HTML문서 어디에나 올 수 있으나 주로 <HEAD>내에서 정의한다.

* HTML문서에 여러개의 <SCRIPT>가 올 수 있으며, HTML에 기술된 순서데로 수행되어진다.

* 자바스크립트를 지원하지 않는 브라우저에서는 자바스크립트 코드를 일반 문자로 해석한다. 따라서 자바스크립트 코드가 화면에 나타난다. 이것을 방지하기 위해 HTML의 주석문()을 사용한다.

* 브라우저에서 해석되지 않는 자바스크립트 코드를 사용하려면 자바스크립트 주석문을 사용하도록 한다.

- 단문주석 : //

- 복문주석 : /* ~ */

* 예제

<HTML>

<HEAD>

document.write("안녕하세요?") //문자열 출력

</SCRIPT>

</HEAD>

</HTML>

B. 자바스크립트 File호출

* [형식]

</SCRIPT>

* 호출하고자 하는 파일의 URL을 SRC="URL"속성에 입력한다.

* File의 확장자는 어떤 것이든 상관없으나 주로 .js를 사용한다.

* SRC속성을 사용하는 경우 <SCRIPT> ~ </SCRIPT>태그내에 자바스크립트 코드를 써도 무방하지만 그 코드는 실행되지는 않는다.

* 직접 자바스크립트코드를 입력하는 방법과 Include하는 방법을 혼용하여 사용 가능하다. 단 각각 <SCRIPT>태그를 사용해야 한다.

* 예제

[test.js]

document.write("안녕하세요!");

[sample.html]

<HTML>

<HEAD>

</SCRIPT>

</HEAD>

<BODY>

document.write("자바누리입니다.");

</SCRIPT>

>/BODY>

</HTML>

2장. JavaScript 기본문법

2.1) 자바스크립트 변수

*자바스크립트는 자동으로 데이터 유형을 판단하기 때문에 변수선언이 다른 언어보다 간단하다.

일반적인 경우 특별히 변수선언을 할 필요가 없다. 즉 변수를 선언하지 않고 필요한 곳에서 사용하면 되는데, 다만 변수를 선언하고자 하는 경우에는 var키워드를 사용하여 선언한다.

예) var total

var aNum, bNum

var count = 10

* 세미콜론(;)은 생략이 가능하나 주로 습관처럼 붙여서 사용한다.

*변수명 작성규칙은 다음과 같다.

- 변수명은 항상 알파벳이나 ‘_’로 시작해야 한다.

- 한글이름은 사용할 수 없다.

- 대.소문자를 구별한다.

- 변수명에 스페이스나 콤마, 물음표(?), 인용부호("")는 사용할 수 없다.

- 예약어(Reserved Word)는 변수명으로 사용 할 수 없다.

2.2) Data Type

자바스크립트는 별도의 Data Type을 선언하지 않는다. 변수에 입력되는 값에 의해 Data Type이 판별되어진다.

자바스크립트에서 사용할 수 있는 Data Type은 문자열, 숫자, Boolean, Null들이 있다.

* 문자열(String)

자바스크립트에서는 문자열을 큰따옴표("")나 작은따옴표('')사이에 넣어 사용한다.

문자열 내에 특수문자를 표현하고 싶을 때 Escape Sequence(\)를 사용한다.

예) name = "자바누리"

*숫자

자바스크립트에서는 10진수, 8진수, 16진수와 소수점이 있는 실수 및 지수를 사용할 수 있다.

예) count = 10;

* Boolean

true, false를 나타내며 따옴표를 사용하지 않는다.

예) valid = true

*null

정의되지 않은 변수 값으로 '아무것도 없음'을 의미하며 공백문자("")와는 다르다.

예) a = null;

if ( a == null )

2.3) 연산자(Operator)

자바스크립트의 연산자는 일반 프로그래밍 언어의 연산자와 유사하다.

* 산술연산자

＋, －, *(곱하기), /(나누기), %(나머지)

++(1씩 증가), --(1씩 감소)

* 문자열 연산자 (+)

'+'연산자를 사용하여 문자열을 하나로 합친다.

예) str1 = "Hello "; str2 = "Javanuri"

document.write(str1 + str2) ==> 새로운 문자열 "Hello Javanuri" 생성.

※ '+=' 연산자를 사용하면 앞의 문자열에 뒷 문자열을 덧붙인다(새로운 문자열 생성 않됨)

* 할당(Assignment) 연산자

A = B B의 값을 A에 할당

A += B A = A + B

A -= B A = A - B

A *= B A = A * B

A /= B A = A / B

A %= B A = A % B (나머지를 A에 저장한다)

* 비교 연산자

A == B A와 B가 같으면 true, 다르면 false

A != B A와 B가 같지 않으면 true, 같으면 false

A > B

A < B

A >= B

A <= B

* 논리(Logical) 연산자

A && B A=true B=true이면 true, 나머지는 모두 false

A || B A또는 B가 true이면 true, 모두 false면 false

!A A가 true이면 false, A가 false이면 true

* 조건 연산자

(condition)? A : B 조건이 true이면 A를 수행하고, 조건이 false이면 B를 수행한다.

* 연산자 우선순위

우선순위	연산자
1	., [ ], ( )
2	++, --, !
3	*, /, %
4	+, -
5	<, >, <=, >=
6	==, !=
7	&&
8	\|\|
9	? :
10	=, +=, -=, *=, /=, %=

2.4) Logical Statement

* if문

if(condition)

else

조건이 true이면 A를, 조건이 false이면 B를 수행한다.

if(조건)...else if(조건) ... else구문도 사용가능하다.

* 반복문

종류	설명
I. while문	Entry Condition Loop - 한번도 수행되지 않을 수 있다. while(조건) { ... }
II. do ... while문	Exit Condition Loop - 무조건 한번은 수행된다. do { ... } while(조건)
III. for문	반복횟수가 지정되어 있을때 사용한다. for(초기값; 조건; 증감치) { ... }

* switch문

   switch(조건식)
   {
   case value1:
   자바스크립트코드
   break;

   case value2:
   자바스크립트코드
   break;
   ...
   default:
   자바스크립트코드
   break;
   }

2.5) 함수(Function)

자바스크립트에서 함수란 특정작업을 수행하는 각 코드를 하나로 묶어 놓은 것을 의미한다.

* [형식]

function 함수명(parameter1, parameter2, ... )

{

...

}

* 함수를 선언할 때 function 키워드를 사용한다.

* 함수 선언부에 함수의 return type은 명시하지 않는다.

* Parameter를 사용하지 않으면 괄호 안을 비워 둔다.

* 함수를 <BODY>태그 내에서 호출할 때 <SCRIPT> ~ </SCRIPT>내에 하도록 한다.

* Parameter를 선언할 때 var 키워드를 사용하지 않는다.

* 함수에서 값 전달 방식은 Passing by value방식을 취한다.

* return문을 만나면 자바스크립트 코드는 더 이상 수행되지 않는다. 따라서 return문은 스크립트 코드 마지막에 넣도록 한다.

* 예제

<HTML>

<HEAD>

function total(a, b, c) {

return a + b + c;

}

</SCRIPT>

</HEAD>

<BODY>

document.write( "10 + 20 + 30 = " + total(10, 20, 30) );

</SCRIPT>

</BODY>

</HTML>

3장. JavaScript 객체

3.1) 자바스크립트 객체 종류

자바스크립트에는 수많은 객체가 이미 정의되어 있다. 이 객체들은 크게 두 가지 Web Browser와 관련 있는 Browser객체와 자바스크립트 자체에 내장된 객체로 나누어 볼 수 있다. 또한 이 두가지 객체모형 이외에 사용자가 객체를 직접 정의하여 사용할 수 있다.

I. Browser 객체

* 브라우저 객체는 브라우저 화면에 나타나는 모든 요소들을 포함하는 것으로 트리 구조로 되어 있다. Window라는 최상위 객체에서 파생된 수 많은 하위 객체를 포함하고 있으며 각각의 하위 객체들은 계층 구조에 의해 정의되어 있으며 접근할 수 있다.

* 브라우저 객체에는 Window, Document, Frame, History, Location, Form, Image, Link, Radio, Text, Checkbox, Select, Textarea, Navigator등이 있다.

* Netscape의 객체모형과 Explorer의 객체 모형은 약간 다르다.

II. 내장객체

* 자바스크립트 내장객체에는 Date, Math, String, Array등이 있다.

* Math 객체는 static객체이므로 new를 이용하여 생성하지 않는다. 수학계산이나 난수 등을 얻기 위해 사용되는 객체이다.

* 다른 내장 객체들은 별도의 설명을 참조하기 바란다.

III. 사용자 정의 객체

* 자바스크립트에는 많은 객체들이 내장되어 있지만 보다 효율적인 작업을 위해 객체를 직접 정의해서 사용하기도 한다. 사용자 정의객체는 생성자 함수(Constructor)와 new keyword를 이용하여 만든다.

3.2) Browser 객체

3.2.1) 윈도우

Window는 JavaScript의 Browser객체로 웹서핑(Web Surfing)을 하다 보면 흔히 만나게 되는 것이 광고나 Event, 여러 가지 공지사항 등을 작은 창에 띄우는 것이다.

자바스크립트를 이용하면 이와같은 Window들을 다양한 방법으로 제어할 수 있다.

I. Window Open

[형식]

winObject = window.open("url", "name", "options");

* winObject는 open된 window를 가리키는 reference변수이다.

* url (반드시 있어야 한다)

새로 만들어진 window에 나타날 web문서의 URL을 적는다. 적당한 url이 없을 경우 ""로 표시한다.

* name (반드시 있어야 한다)

새로 만들어진 window의 이름을 지정한다. 적당한 name을 붙이지 않으려면 ""로 표시하면 된다. name위치에 입력한 이름은 <FORM>이나 <A>태그에서 사용하는 Target속성으로 연결할 수 있다.

* options (생략가능하며 생략하는 경우 default값이 적용된다)

1. menubar : window의 menubar표시 여부 (yes/no or 1/0)

2. toolbar : window의 toolbar표시 여부 (yes/no or 1/0)

3. location : window의 location box표시여부 (yes/no or 1/0)

4. directories : window의 directory button들의 출력여부 (yes/no or 1/0)

5. status : window의 상태표시줄 표시 여부 (yes/no or 1/0)

6. scrollbars : window의 가로, 세로 scrollbar표시 여부 (yes/no or 1/0)

7. resizable : window의 크기가 조절 될 수 있는지 결정 (yes/no or 1/0)

8. width : Display될 window의 너비 결정 (단위 pixel)

9. height : Display될 window의 높이 결정 (단위 pixel)

10. left : Display될 window의 좌측 상단의 x좌표 (단위 pixel)

11. top : Display될 window의 좌측 상단의 x좌표 (단위 pixel)

II. Window Close

[형식]

window.close();

* window를 종료할 때는 반드시 Window가 open이 되었는지 check한 다음 close하도록 한다.

III. 예제

다음 예제를 실행하여 'Window열기'를 Click하면 300 X 200크기의 작은 Window가 화면(50,50)위치에 open된다.

'Window닫기'를 누르면 현재 open된 작은 window를 닫느다.

closeWin()에서 s_win.close()를 사용하지 않고 window.close를 사용하면 Link가 있는 Parent Window를 종료할 것인지 묻는 Confirm Box가 뜬다.

<HTML>

<HEAD>

function openWin()

{

s_win = window.open( "", "small", "width=300,height=200,left=50,top=50");

}

function closeWin()

{

if ( s_win != null )

s_win.close();

}

</SCRIPT>

</HEAD>

<BODY>

<H3><A HREF="javascript:openWin()">Window 열기</A></H3>

<H3><A HREF="javascript:closeWin()">Window 닫기</A></H3>

</BODY>

</HTML>

3.2.2) Document

Document는 window의 하위 객체로 document는 window.document를 의미한다. 주로 최상위 객체인 window는 생략하고 사용한다.

I. Document Open

[형식]

Window명.document.open();

* document.open()은 윈도우에 문서를 출력할 준비를 하도록 명령하는 것이다.

* Window Open시 document.open()은 생략해도 무관하다. 그 이유는 document.write()가 사용되면 브라우저는 자동적으로 document.open()메소드를 실행하기 때문이다.

II. Document Close

[형식]

Window명.document.close();

* 문서를 열고 무엇인가를 쓴 다음 문서를 닫아 줄때 사용한다.

* document.open()처럼 대부분 생략하고 사용하지만 현재 Window가 아닌 임의의 다른 Window에 무엇인가를 출력할 경우는 반드시 document.close()를 적어 주어야 한다. 그렇지 않으면 브라우저는 문자열의 출력이 완료되지 않았다고 판단하기 때문에 제대로 된 결과가 나타나지 않을 수도 있다.

III. Document Write

[형식]

Window명.document.write(); or

Window명.document.writeln();

* Open한 문서에 무엇인가를 Write할 때 사용한다.

* document.write()는 줄바꿈을 하지 않으며, document.writeln()은 줄바꿈을 한다.

III. Document Write

[형식]

Window명.document.write(); or

Window명.document.writeln();

* Open한 문서에 무엇인가를 Write할 때 사용한다.

* document.write()는 줄바꿈을 하지 않으며, document.writeln()은 줄바꿈을 한다.

IV. Document Clear

[형식]

Window명.document.clear();

* Document를 clear할 때 사용한다.

* window를 clear하고자 할 경우 open(), clear(), close()순으로 해야 한다.

V. 예제

<HTML>

<HEAD>

var winObj = null;

function openWin()

{

winObj = window.open("", "", "width=300,height=250");

}

function closeWin()

{

if ( winObj != null )

{

winObj.close();

winObj = null;

}

function writeWin()

{

if ( winObj != null )

{

winObj.document.open();

winObj.document.writeln("<HTML><HEAD>");

winObj.document.writeln("<TITLE>Document</TITLE>");

winObj.document.writeln("</HEAD><BODY><CENTER>");

winObj.document.writeln("<H3>안녕하세요!</H3>");

winObj.document.writeln("</CENTER></BODY></HTML>");

winObj.document.close();

}

function clearWin()

{

if ( winObj != null )

{

winObj.document.open();

winObj.document.clear();

winObj.document.close();

}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

3.2.3) Frame

* Frame이란 하나의 Browser안에 독립적으로 존재하는 다수의 Frame을 표현할 수 있는 Window의 특별한 유형을 말한다.

* 각각의 Frame들은 자신만의 URL을 가지며, 모두 같은 Window내에 존재한다.

* Frame은 최소 3개의 File로 구성된다.

각각의 Frame을 포함하는 Parent가 존재한다.

* Parent Window에서 Child Frame으로의 이동

[형식]

framName.location.href="URL"

단순히 Child Frame의 이름을 적어 주는 식으로 접근한다.

* Child Frame에서 Child Frame으로의 이동

[형식]

parent.frameName.location.href="URL"

Child Frame에서 Child Frame으로 바로 접근할 수 없으므로 Parent Frame을 거쳐 접근해야 한다.

* Child Frame에서 Parent Window로의 이동

[형식]

parent.location.href="URL"

Child Frame에서 Parent Window로 접근한다는 것은 Frame을 없애는 것과 같다. Window객체의 속성인 parent를 이용하여 부모 윈도우로 접근할 수 있다.

3.2.4) History

Window의 하위객체로 History가 있다. 이것은 사용자가 방문했던 사이트의 목록을 기록해 둔 것이라고 할 수 있다.

Browser의 도구 모음에서 [뒤로], [앞으로] 버튼을 눌렀을 때 브라우저는 History목록을 이용해서 앞으로 혹은 뒤로 이동하게 된다.

자바스크립트를 이용하면 도구 모음에서 [뒤로], [앞으로]버튼을 눌렀을 때와 같은 효과를 얻을 수 있다.

* [형식]

window는 생략 가능하다.

window.history.go()

history객체의 go(숫자) 메소드는 숫자만큼 페이지를 앞뒤로 이동시켜 준다.

window.history.forward()

history객체의 go(1)과 같은 역할을 한다.

window.history.back()

history객체의 go(-1)과 같은 역할을 한다.

* [예제]

<HTML>

<BODY>

<FORM>

</FORM>

</BODY>

</HTML>

ABOUT ME

Developer Developer

티스토리툴바

ABOUT ME

관련글 관련글 더보기

티스토리툴바