a. 변수의 선언

변수를 선언할 때는 var 를 꼭 붙여야 한다..

만일, 선언과 동시에 값이 할당될 때는 var 를 생략할 수 있는데, 이것이 전역변수이다..

    var = i ;  // 자료형에 무관한 변수의 선언부이다

    j = 30 ;   // 선언과 함께 값이 할당된 전역변수이다

b. 변수의 초기화

변수가 선언만 되고 초기화가 아직 안되어 있으면 이것을 undefined(불확정의..) 이라고 한다..

어떤 자료형이든 올 수 있고..

다시 다른 자료형으로 초기화 시키면.. 자동으로 바뀌고.. 또 초기화 하면.. 또 바뀌고..

자바스크립트는 지조가 없다.. ㅡㅡ;

c. 변수의 범위

지역변수 : 함수의 body 안에서 선언되었다면.. 그 안에서만 사용할 수 있다..

전역변수 : 한번 선언되면 window전역에서 사용이 가능하다..

매개변수(argument)는 함수의 인자로 받은 변수로.. 함수 안에서만 사용이 가능하다..

☞ 자바스크립트에서 지역변수는 함수가 실행될 때 임시로 저장했다가 함수가 종료되면 바로 메모리에서 해제되는 임시적인 정보로서 stack 에 저장된다.  자바스크립트 프로그래밍에서 메모리는 크게 stack 과 heap 으로 구분하는데  stack 은 사용이 끝나면 바로 지우는 구조로 되어있기 때문에  heap 에 비해서 용량을 작게 차지하고 있다.  따라서 자료가 많이 들어있는 배열이나 객체들을 지역변수에 할당하여 사용하면 자칫 stack overflow 가 발생할 수 있으므로 지역변수를 너무 많이 사용하지 않도록 주의해야 한다.

추가되어진 사항들

a. Array Object

자바스크립트의 Array 객체는 그 길이가 유동적이어서 처음 Array 객체를 만들 때 길이를 결정해도 배열의 길이를 벗어나는 배열변수를 사용하면 자동으로 그 길이는 증가한다.

Array Property

length

input

index

lastIndex

prototype

하지만, Array 객체에 사용될 수 있는 것은 length, prototype 뿐이다.

Array Method

concat(a1 [, a2, ...])

join("str")

pop()

push(arg1 [, arg2])

reverse()

shift()

unshift(arg1 [, arg2])

slice(atartIndex, [endIndex])

splice(index, lingth [, element])

sort([function])

toString()

b. Boolean Object

Boolean Property

prototype

constructor

Boolean Method

toSource()

toString()

valueOf()

Date(milliseconds)

Date Method

static parse("Month Day, Year[, 시, 분, 초]")

static UTC(연, 월, 일 [, 시, 분, 초])

toLocalString()

toGMTString()

toString()

valueOf()

getYear()

getFullYear()

getMonth()

getDate()

getDay()

getHours()

getMinutes()

getSeconds()

getTime()

getMilliseconds()

getUTCDate()

getUTCDay()

getUTCFullYear()

getUTCHours()

getUTCMilliseconds()

getUTCMinutes()

getUTCMonth()

getUTCSeconds()

setYear()

setFullYear()

setMonth()

setDate()

setDay()

setHours()

setMinutes()

setSeconds()

setTime()

setMilliseconds()

setUTCDate()

setUTCDay()

setUTCFullYear()

setUTCHours()

setUTCMilliseconds()

setUTCMinutes()

setUTCMonth()

setUTCSeconds()

d. Function Object & Argument Object

Function Property

arguments

arityⓝ

length

Function Method

apply()

call()

toString()

e. Math Object

Math Object 는 new연산자를 사용할 수 없다

Math Object 는 수학적 연산의 오류를 막기 위해서 생성자 함수를 통해 Math Object 를 만들고 상수의 값을 변경하는 것을 모두 제한하므로 static 요소들로만 정의되어 있다.

Math Property(값을 변경할 수 없는 읽기전용의 상수들)

E

LN10

LN2

LOG10E

LOG2E

PI

SQRT1_2

SQRT2

Math Method

static abs(x)

g. String Object

String Property

length

prototype

String 태그효과 Method

big()

small()

blink()

bold()

fixed()

italics()

strike()

sub()

sup()

fontcolor("color")

fontsize(숫자)

anchor("name")

link("url")

String 문자열처리 Method

charAt(index)

charCodeAt(index)

concat(str)

static fromCharCode(num)

indexOf(str)

lastIndexOf(str)

slice(i1, i2)

substr(i1, [, length])

subString(i1, i2)

toLowerCase()

toUpperCase()

match(str)ⓡ

replace(str, rep)ⓡ

h. RegExp(Regular Expression) Object

정규식이란 (/) 에 둘러싸인 문자들의 집합으로서 문자열이 따옴표를 이용해서 문자열 리터럴을 정하는 것처럼 정규식도 (/)로 문자를 앞뒤로 포위하여 만든다..

정규식을 객체화한 RegExp Object 는 생성자함수의 매개변수에 문자열을 입력해서 만들 수 있는데 프로그램이 실행되는 동안에 정규식을 동적으로 생성하고자 할 때 유용하다..

일단 정규식과 RegExp Object 가 만들어지면 같이 취급된다..

Regular Expression : var re1 = /정규식/;                   

RegExp Object : var re2 = new RegEcp("정규식");     // 두 문장은 같은의미 이다

정규식의 메타문자

[]

[^]

{}

()

|

num

b

B

d

D

s

S

w

W

^

$

.

?

+

*

RegExp Property

constructor

global

ignoreCase

lastindex

multipleline

source

static input

static leftContext

static lastMatch

static multiline

static rightContext

static lastParen

static $n

static indexⓔ

static lastIndexⓔ

RegExp Method

compile("식", "속성")

exec(str)

test(str)

toSource()ⓝ

toString()

---

 2. HTMLElement & Collection

HTML 은 자바스크립트에서 객체로 해석되며 이를 HTMLElement 객체라고 한다.

 

 

 

HTMLElement Object

---

a. HTMLElement Object Property

allⓔ

alignⓔ

classname

childrenⓔ

clientHeight

clientLeftⓔ

clientTopⓔ

clientWidthⓔ

dir

disabled

id

innerHtml

innerTextⓔ

outerTextⓔ

outerHtmlⓔ

style

tagname

this

title

sourceIndexⓔ

parentElementⓔ

offsetParent

offsetHeight

offsetWidth

offsetLeft

offsetTop

readyStateⓔ

scrollHeightⓔ

scrollWidthⓔ

scrollLeftⓔ

scrollTopⓔ

 

 

 

Style Object

---

a. Style Object Property

 
 

Collection Object

---

컬렉션이란 객체들을 보다 쉽게 관리하기 위한 목적으로 자바스크립트에서 지원하는 객체들의 배열이다.  대부분 배열의 일반적인 length -1.. 뭐 단순히 이것만 가지고 있지만 모든 컬렉션의 단순한 Property이면서 공통된 부분이기도 하다.  여러개의 독립적인 객체들을 접근할 때는 for 반복문을 이용하여 편리하게 사용할 수 있다.

 

a. collection 의 종류

allⓔ

applets

anchors

cellsⓔ

childrenⓔ

elements

embeds

images

filtersⓔ

frames

links

options

plugins

scripts

stylesheets

 

b. BOM(Browser Object Model) & DOM(Document Object Model)

브라우저객체모델과 문서객체모델은 문서의 정보를 메모리에 올렸을 때 객체라는 단위로 정보를 조직하고 이용한다는 데 있다..

 

브라우저객체모델(BOM)

브라우저객체모델은 객체로 해석하는 태그가 미리 정해져 있다..

 

문서객체모델(DOM)

문서객체모델은 객체로 해석하는 무언가를 미리 정해두지 않고 문서의 내용을 기반으로 객체들의 트리구조가 생성된다..

DOM 은 문서에 포함된 HTMLElement 객체뿐 아니라 일반 Text 나 주석 문장까지도 참조할 수 있는 노드(Node) 단위로 문서의 정보를 구분한다..

이제, 브라우저가 DOM 을 포함하게 됨으로써 Text의 글자수, 부모객체, 자식객체, 앞이나 뒤에 있는 내용 등에 대한 다양한 정보와 Text의 일부를 복사하거나 삭제, 혹은 수정하는 일을 자바스크립트에서 수행할 수 있다..

 

 

 

---

---

3. Event & EventHandler

 

 

 

Event

---

 

 

 

EventHandler

---

이벤트핸들러는 이벤트가 발생했을 때 자동으로 실행되는 메소드의 일종으로서 객체의 프로퍼티로 정의되어 있다..

객체에서 이벤트가 발생되면 해당 객체의 애벤트핸들러가 자동으로 작동하여 이벤트핸들러에 미리 정의되어 있는 기본 실행명령을 수행한다..

단, HTML 속성으로 이벤트핸들러를 사용할 때에는 대소문자를 구별하지 않지만 객체의 Property로 사용될 때에는 모두 소문자로만 사용해야 한다..

 

a. EventHandler 설정하기

Event의 타입 앞에 on을 붙여서 사용한다..

대 소 문자를 구분하지 않지만 일반적으로 변수명을 작성하듯 사용하는게 좋을 듯.. ^^

명령을 직접 입력 할 수도 있고 함수를 호출할 수도 있다..

 

b. EventHandler

onAbort

onBeforeCopy

onBeforeCut

onBeforePaste

onAfterPrintⓔ

onBeforePrintⓔ

onBlur

onChange

onDblClick

onClick

    onClick 의 이벤트핸들러의 기본 실행명령

    Link

    FileUpload

    Reset

    Submit

    Checkbox, Radio

    ☞ Click 이벤트의 return=false 이면 해당 객체의 기본실행명령을 중지할 수 있다..

   

    추가 : Pop-Up 메뉴 관련 이벤트핸들러의 기본 실행명령

    onBeforeCopyⓔ

    onBeforeCutⓔ

    onBeforePasteⓔ

    onCopyⓔ

    onCutⓔ

    onPasteⓔ

    onContextMenu

    ☞ Pop-Up 이벤트의 return=false 이면 해당 객체의 기본실행명령을 중지할 수 있다..

 

onContextMenu

onCopy

onCut

onDragⓔ

    onDrag의 이벤트핸들러의 기본 실행명령

    ondrag

    ondragstart

    ondragenter

    ondragover

    ondragleave

    ondragend

    ondrop

    ☞ Drag 이벤트의 return=false 이면 해당 객체의 기본실행명령을 중지할 수 있다..

   

onDragStartⓔ

onDragEnterⓔ

onDragOverⓔ

onDragLeaveⓔ

onDragEndⓔ

onDropⓔ

onError

onFocus

onKeyDown

onKeyPress

onKeyUp

onLoad

onUnload

onBeforeUnloadⓔ

onMouseDown

onMouseEnter

onMouseLeave

onMouseMove

onMouseOut

onMouseOver

onMouseUp

onMouseWheelⓔ

onMove

onPaste

onReset

onResize

onScroll

onSelect

onSelectStartⓔ

onSubmit

 

c. Explorer에서 Event Object Property

altKey

altLeft

button

cancleBubble

clientX, clientY

ctrlKey

ctrlLeft

dataTransfer

fromElement

keyCode

oddsetX, offsetY

propertyName

qualifier

reason

repeat

returnValue

    returnValue 의 이벤트핸들러의 기본 실행명령들

    onclick

    oncontextmenu

    oncut

    ondragstart

    ondrop

    onkeydown

    onkeypress

    onmouseover

    onpaste

    onreset

    onselectstart

    onsubmit

    ☞ 이벤트핸들러의 기본 실행명령은 해당 객체의 return=false 이면 실행되지 않는다..

 

screenX, screenY

shiftKey

shiftLeft

srcElement

toElement

type

x, y

☞ Event Object 는 Explorer 에서 window.event로 전달된다(window 생략가능..)

 

 

 

---

---

4. Browser Object Model

브라우저객체모델은 HTML 문서에 포함되어 있는 태그 중에서 name 속성을 가지고 있는 <A>, <APPLET>, <IMG>, <EMBED>, <FORM>, <IFRAME> 태그의 HTMLElement 객체를 Document 객체의 하위객체로 정의하고 있다.. 

이 중요한 태그들은 자바스크립트에서 객체로 취급되고..

태그의 name 속성은 자동으로 Document 객체의 Property로 만들어 진다.. 

그러므로, name 속성을 사용하지 않아도..

해당 객체의 Collection은 Document 객체의 Property로 미리 정해져 있다는 것.. ^^

브라우저객체모델이란 바로 Window와 여기에 포함된 정보들을 트리형태로 미리 정의해둔 객체들의 계층구조라고 할 수 있겠다..

 

 

 

Window Object Property

---

a. Window Object Property

closed

defaultStatus

document(하위객체)

frames(하위객체)

history(하위객체)

image(하위객체)

length

location(하위객체)

name

navigator(하위객체)

opener

Option(하위객체)

parent

self

screen

screenLeftⓔ

screenTopⓔ

status

top

window

 

 

 

Window Object Method

---

a. Window Object Method

alert(string)

blur()

clearInterval(mark)

clearTimeout(mark)

close()

confirm(string)

focus()

moveBy(x, y)

moveTo(x, y)

open(["f", "n", "o"])

    open() 의 options 변수들

    directories

    fullscreenⓔ

    height

    width

    left

    top

    location

    menubar

    resizable

    carollbars

    status

    toolbar

    ☞ open() 의 option 기능은 yes, no로 제어된다..

 

print()

prompt(string)

resizeBy(x, y)

resizeTo(x, y)

scrollBy(x, y)

scrollTo(x, y)

setInterval("f()", t)

setTimeout("f()", t)

navigator("URL")ⓔ

showModalessDialog()ⓔ

showModalDialog("URL", arg, "o")ⓔ

    Modal-Dialog의 Property(window에 종속적이긴 하지만 또 하나의 window이다..)

    dialogArguments

    returnValue

    ☞ window 객체로서 두개의 Property를 가지고 있다..

 

    showModalDialog() 의 options 변수들

    dialogLeft

    dialogTop

    dialogWidth

    dialogHeight

    center

    edge

    help

    resizable

    ☞ 크기와 위치를 정하는데 필셀정보의 단위는 "px" 이다..

 

 

 

Window Object EventHandler

---

a. Window Object EventHandler

onbeforeunloadⓔ

onblur

onerror

onfocus

onload

onmove

onresize

onscrollⓔ

onunload

 

 

 

Window Sub Object

---

a. Document Object

 

b. Frame Object

 

c. History Object

 

d. Location Object

 

e. Navigator Object

 

f. Screen Object

 

g. Image & Option Object

 

 

 

---

 

 

 

 

---

---

5. Document Object

문서객체모델은 문서에 포함된 모든 내용을 포괄하는 가상의 객체로서 문서에 포함된 내용만을 기준으로 프로그래밍 하는 최상위 객체이다..

하지만, 브라우저객체모델에서는 그저 윈도우의 하위객체라는 것... ㅋㅋ

문서의 제목, 배경, 글씨, 문서 등을 참조하는 Document 객체와 그 하위객체들을 말한다..

Document 의 하위객체들은 여러형태의 컬렉션으로 참조한다..^^

 

 

 

Document Object Property

---

 

 

 

Document Object Method

---

 

 

 

Document Object EventHandler

---

 

 

 

Document Sub Object

---

a. All Collection

 

b. Anchor Collection

 

c. Applet Collection

 

d. Body Collection

 

e. Embed Collection

 

f. Frame Collection

 

g. Image Collection

 

h. Link Collection

 

i. StyleSheet Collection

 

 

 

---

---

6. Form Object

adsfasdf

---

---

---

7. Style Object

adsfadf

---

---

---

8. DOM(Document Object Model)

adsfasdfad