[Javascript] Javascript 정리

Javascript  ( ※ 참고사이트 https://www.w3schools.com/)

1. 스크립트 언어 : perl, vbscript, ...

2. 객체 기반 언어

3. 사용 방법

(1) inline style

- 태그안에서 작성

(2) internal style

- 페이지내에서 작성

(3) external style

- 별도의 파일에서 작성(.js)

4. 문법

(1) 메서드(함수)

function 함수명(...){

...

}

(2) 내장 함수

1) 메시지 관련 함수

- alert() : 알림창만 뜨는 함수

- confirm() : 알림창에 Yes/No 선택할수 있는 함수

- prompt() : 알림창에 입력까지 받을수 있는 함수

2) 변환 함수

- eval()

- parseInt(), parseFloat()

- Number(), String()

3) 그외의 함수

- isFinite() : 데이터가 유한한가를 물어보는 함수

- isNaN() : <not a number> 숫자인지 아닌지 물어보는 함수

- escape(), unescape()

알파벳과 숫자 및 * @ - _ + . / 를 제외한 문자를 모두 16진수로 바꾸어주거나 다시 원상태로 복구

(3) 객체

1) Array

- length  - concat(), join(), reverse(), sort(), slice(), ...

2) Date

getFullYear(), getMonth(0, getDate(), getDay(),    getHours(), getMinutes(), getSeconds(), getTime(), ...

3) Math

pow(), ceil(), round(), floor(), random(), abs(), ...

4) String

- anchor(), bold(), fontcolor(), fontsize(), italics(),  - link()  - toLowerCase(), toUpperCase(), charAt(), concat(),  - indexOf(), lastIndexOf(), split(), substring(), substr()

5) Screen

6) 객체와 함께 쓰면 좋은 문법

1) for~in : 향상된 for문

2) with

7) 브라우저 객체

window

parent

frame

self

top

document

link

anchor

image

applet

form

layer

area

location

history

navigator

---

window 

- status, closed, defaultStatus, opener, name, ...    <속성>

- open(), close(), moveTo(), resizeBy(), scrollBy(), scrollTo(), alert(), confirm(), prompt(),

  print(), focus(), blur(), setTimeout(), setInterval(0, clearTimeout(), ...    <메서드>

location

- hash, host, hostname, href, pathname, port, protocol, search, ...    <속성>

- reload(), replace(), ...    <메서드>

history -> 바로 이전페이지로 이동

- history.back()

Navigator -> 사용자의 웹브라우저 정보를 알아낼때

- appCodeName, appName, appVersion, userAgent, platform, ...    <속성>

- JavaEnavled(), ...    <메서드>

Image

- border, complete, height, width, hspace, vspace, length, lowsrc, name, src, ...

- onabort(), onerror(), onload(), ...

(4) DOM(Document Object Model)

1) DOM API

2) www.w3c.org/DOM

3) 정의

- 문서를 객체로 표현하기 위한 표준

- 이때의 문서는 Markup Language 문서이다.

- Javascript, java, c, c++, c#등 다양한 언어에서 DOM API를 지원

html의 태그들을 객체로 만들어서 Javascript에서 사용할수 있도록 DOM으로 표준화 시킴

4) DOM API(Node - Document - Element) <- 상속관계(Node가 최상위) 

- Node : DOM에서 표현되는 모든 것.

- 주요 property

nodeName	String
nodeValue	String
nodeType	unsigned short
parentNode	Node
childNodes	NodeList
firstChild	Node
lastChild	Node
previousSibling	Node
nextSibling	Node
ownerDocument	Document

nodeType	nodeName	nodeValue
Document	#document	null
Element	태그이름	null
Text	#text	문자열

nodeType	번호
ELEMENT_NODE	1
ATTRIBUTE_NODE	2
TEXT_NODE	3
...	...
DOCUMENT_NODE	9

- document

문서 전체를 나타내는 인터페이스

node인터페이스를 상속받는다.

추가된 property

documentElement    Element

함수                                리턴값

getElementById()              Element

getElementByTagName()    NodeList

NodeList

item(), length, ...

- element

태그를 알아내는 인터페이스

property

tagName    String

함수

getAttribute()

setAttribute()

removeAttribute()

5) 문서 구조 변경

- document에서 element를 생성

createElement(태그명)      element

createTextNode(문자열)    text

- Node의 DOM트리 변경 관련 함수

insertBefore(추가될 노드, 현재 노드)    node

replaceChild(교체할 노드, 현재 노드)    node

removeChild(제거할 노드)                  node

appendChild(새로 추가할 노드)           node

(5) 사용자 정의 객체

1) 클래스 생성

클래스 명 = function(파라미터){

this.인스턴스변수 = 파라미터

}

2) 메서드 생성

클래스명.prototype.메서드명 = function(){

}

3) Object를 이용한 클래스 만들기

var obj = new Object();

obj.id = "hong";

obj.name = "홍길동";

obj.setValue = function(id, name){

this.id = id;

this.name = name;

}

4) 패키지 만들기

kr = new Object();    //    kr ={};

kr.co = new Object();    // kr.co ={};

kr.co.Member = function(){

...

}

(6) 이벤트

1) 이벤트 종류

onclick, onblur, onfocus, onmouseover, onmouseout, onselect, onsubmit  onreset, onload, onunload, onabort, onerror, ondbclick, ondragdrop, onkeydown  onkeyup, onmousedown, onmouseup, onmove, onresize

2) 이벤트 리스터 방식의 함수

- addEventListner(이벤트, 이벤트 핸들러, 캡쳐타입)

attachEvent(이벤트, 이벤트 핸들러) : 구 IE

- removeEventListener(이벤트, 이벤트 핸들러, 캡쳐타입);

detachEvent(이벤트, 이벤트 핸들러)

3) 이벤트 정보 알아내기

4) 마우스 이벤트

- click, dbclick, mousedown, mouseup, mouseover, mouseout, ...

- 마우스 버튼 판별

w3c 표준

----------

button

0    : 일반 버튼(주로 왼쪽 버튼)

1    : 추가 버튼(주로 가운데, 휠)

2    : 컨텍스트 버튼(주로 오른쪽)

IE

-----

button

1    : 왼쪽

2, 0 : 오른쪽

4    : 가운데

which

--------

button

1   : 왼쪽

2   : 가운데

3   : 오른쪽

5) 키보드 이벤트

- keydown, keyup, keypress

- property

keyCode, ctrlKey, shiftKey, altKey, ...

6) 이벤트 흐름

- 3단계

캡쳐단계(capturing) : 이벤트 발생 대상까지 전달되는 단계

대상단계(targetting) : 이벤트가 발생 대생에 도착한 단계

버블링단계 : 발생 대상에서 다시 document까지 전달되는 단계

- capturing 중지

addEventListner(이벤트, 핸들러, false);

- bubbling 중지

stopPropagation()

cancelBubble = true (구 IE)