onclick()           : 마우스 클릭할때
onload()           : 페이지가 로딩할때
onkeyup()         : 키보드 키가 눌렀다가 올라올때
onchage()         : 폼태그의 값이 변경되었을때
onmouseover()   : 마우스가 객체 위에 올라갔을때
onmouseout()     : 마우스가 객체 밖으로 옮겨졌을때
onSubmit()
onReset()
onAbort()          : 작업 끝내기
onFocus()
onBlur()             : 다른 곳으로 이동
onDbClick()
onDragDrop()
onError()
onKeyDown()
onkeypress()       : 누르고 있는 상태
onunload()
onmousedown()
onmousemove()
onmouseup()
oncontextmeue()
onResize()
onScroll()
onMove()
onSelect()

 * Data객체
 - String
var s = new String("문자열");

s="문자열";


s.constructor
s.length                           : 문자열 길이 리턴
s.prototype 
s.charAt(0)                        : index번째 문자 리턴 (0,1,..)
s.indexOf('a')                     : 왼쪽부터 확인하여 문자와 일치하는 index 리턴, 없으면 -1
s.lastIndexOf('a')                : 오른쪽부터 확인하여 문자와 일치하는 index 리턴, 없으면 -1 
s.substring(start, end)          : start ~ end-1 index를 추출
s.substr(start, len)               : start에서 len개 만큼 추출
concat(s,s1,..)                     : 문자열 합치기 s+s1+..
s.toUpperCase()                 : 대문자 변환
s.toLowerCase()                  : 소문자 변환
s.split(구분자, 구분자의 개수) : 구분자로 s를 분리 
s.replace(a,b)                     : s에서 a를 b로 변경

 - Number
var n = new Number();


n.MIN_VALUE
n.MAX_VALUE
n.NaN : Not a number
n.toFixed(자리수)  : 지정된 소수점 자리수 만큼 문자열로 리턴
n.toString() : number -> string
n.valueOf() : 기본형으로 값을 리턴

 - Date
var d = new Date();


d.getFullYear()         : 연도 리턴
d.getMonth()+1       : 월 리턴. 0-1월
d.getDate()             : 일 리턴

d.getHours()            : 시간
d.getMinutes()          : 분
d.getSeconds()         : 초
d.getDay()               : 요일 리턴. 0-일요일
d.setMonth(7)
d.setDate(1)

 - Array
var arr = new Array();
arr = [1,2,3];


push(value)
pop()
reverse()
indexOf('a')
slice(start,end)
splice(index, delCount)
sort()
join()

 - Boolean
var b = new Boolean(1);


b.toString() => "true" or "false"
b.valueOf() => 기본값으로 리턴

 - Math

Math.abs(-21)                  : 절대값

Math.round(3.7)               : 올림
Math.ceil(3.7)                  : 버림
Math.floor(2.6)                 : 반올림
Math.floor(3.789*10)/10     : 원하는 소숫점 까지 표시
Math.max(10,20,30)           : max값
Math.min(10,20,30)           : min값
Math.random()                 : 0~1까지 랜덤값


 - Object
 var o = new Object();
 - RegExp

 * BOM(Browser Object Model)
 - window

window.document.name명.id
1) property
document
name
history
location
navigation
screen
opener
parent
self
top
moveTo()
print()
focus()
blur()                              : 포커스 제거


2) 대화상자
alert("a")                         : 알림창
prompt("값을 입력하세요")  : 사용자 입력창
confirm()                         : 확인창

3) popup
open("새로 open할 창의 path", "팝업창의 이름", "width=500, height=300,top=100, toolbar=yes,state=yes")
close()                                                                   : 닫기

opener                                                                  : 부모 객체
 
4) 데이터 처리
 parseInt("문자열")                  :  string -> number
 parseFloat("문자열");              : string -> number
 isNaN(값)                            : 입력한 문자열이 숫자인지 문자인지 판단.
 eval(값)                               : 매개변수로 전달된 데이터를 실제로 실행.(보안에 취약) 계산실행.
 data.trim()                           : 공백제거

5) 자동실행
setTimeout(함수, timeout ms시간)      : 한번 실행
setInterval(함수, timeout ms 시간)       : 반복 실행
clearTimeout(해체할 작업의 id)           :  매개변수로 전달된 작업id에서 참조하는 작업을 종료 

clearInterval(해체할 작업의 id)

 - Location
host
href
hostname
origin
port
protocol
assign(URL)
reload(bool) : F - 캐시(default), T - server
replace(URL)
 
 - form
text
password
checkbox
radio
selectedIndex
 
 - History : URL history
length
back()
forward()
go(number|URL)
 
 - Screen
availHeight : taskbar 제외
availWidth
height
width

 - Navigation : 브라우저 정보
appName
appVersion
cookieEnabled
language
onLine
product : engine
userAgent

 

* DOM(Document Object Model)

 - 구성요소

document   : dom 객체의 가장 상위객체
element     : html문서를 구성하는 컨텐츠
text           : 태그와 태그 사이에 입력한 문자열, 공백도 문자열 객체로 인식
attribute     : 태그내부에 정의되어 있는 속성

 

- 속성

firstChild             : 첫번째 자식 노드
lastChild             : 마지막 자식 노드
childNodes          : 특정노드의 모든 자식노드들을 반환. (배열)
nodeName          : 노드이 이름(엘리먼트명과 동일 - 텍스트노드인 경우 #text로 출력)
nodeType            : 1-요소, 2-속성, 3-내용
nodeValue
ownerDocument   : 최상위 요소
parentNode
previousSibling
nextSibling

 

- 메소드

getElementById("Id명")                               : id로 정의된 객체를 반환, 단일객체에 동적 작업을 수행
getElementsByClassName("class명")               : class명으로 정의된 객체를 반환(배열)
getElementsByTagName("태그명")                 : 태그명으로 정의된 객체를 반환(배열)
document.getElementById("result").innerHTML : HTML 속성 조회

document.getElementById("result").innerText   : Text 속성 조회
getAttribute("속성명")                                : 속성에 정의된 값이 리턴
setAttribute("속성명","값")                           : 선택한 객체에 속성과 속성값을 정의할 수 있다. 

 

- 노드 추가

1) 삽일될 노드를 생성(createElement or createTextNode)
createTextNode("텍스트") : 텍스트(문자열) 노드를 생성
createElement("엘리먼트명") : 엘리먼트(태그)를 생성

 

2) 삽입될 위치 구하기
어떤 노드의 하위노드로 추가될 지 알아야 하므로 삽입될 부모노드의 위치를 구하기

3) 노드를 추가
appendChild("노드명") : 매개변수로 정의된 노드를 삽입.(부모노드의 lastChild로 삽입)

insertBefore("추가될 노드명", "target노드명") : target 노드 뒤에 추가

 

부모노드.removeChild("노드명") : 노드를 삭제

부모노드.lastElementChild        : 공백무시 get
부모노드.hasChildNodes()        : child노드가 있으면 true, 없으면 false 리턴
cloneNode(option)                 : 노드 복사
hasAtrributes()
setAttributeNode()
querySelector()
querySelectorAll()
createAttribute()

1. 인터프리터 언어

 

2. 데이터형

 number - 실수, 정수

 string - 문자, 문자열

 undefined 가능

 

3. 변수 사용

 var 변수명;         -> parsing시 undefined 값 할당. (지역 변수)

  => scope가 {} 단위가 아닌 function{} 단위.

 

 변수명 = literal;   -> run time 중 값 할당. (전역변수)

 

 

4. 데이터 타입의 전환이 자유로움. 변수에 할당되는 값에 따라 변수 타입 결정됨.

 

5. typeof (변수)  => 타입 반환

'string', 'number', 'object', 'undefined', 'function', 'boolean',

 

6. 데이터가 자동으로 형변환 됨.

 

7. 문자열과 다른 데이터형이 + 연산하면 문자열로 연결됨.

ex) '123'+45 => '12345'

 

8. 비교 연산자 ==, != 필요시 형변환 후 비교

 

9. identical 연산자 ===, !== 형 변환하지않고 비교

 

10. 논리연산자 &&, || 사용 시 자동 형 변환으로 return 값이 true, false가 아닌 결과 값도 리턴됨.

ex) "123" || 0  => "123"

     "123" && 0 => 0

어떤 함수가 인자를 받을 때 반드시 배열을 받아야 할 경우

이벤트 처리시 ie와 다른 브라우저 간 처리방법이 다른경우

 

11. 기타 연산자

,  => 계속해서 진행

instanceof => 객체가 지정된 클래스의 인스턴스인지 확인

 

12. 향상된 for문

for(i in array){

}

 

13. break label문

label:

for(i=0;i<9;i++){

    for(j=0;j<9;j++){

        break label;

    }

}

// 여기로 옴.

 

14. continue label문

label:

for(i=0;i<9;i++){ // 여기로 옴.

    for(j=0;j<9;j++){

        continue label;

    }

}

 

15. 함수 선언

함수명(); // 가능

function 함수명(매개변수, ...){

    return 값;

}

 => 함수가 생성되는 시점. parsing 단계

 

16. 함수 리터럴 (익명함수)

변수명(); // 불가능

var 변수명 = function(매개변수,..){

    return 값;

}

변수명(); // 가능

 

 => 함수가 생성되는 시점. runtime 단계

 

17. Function 생성자

var a = 변수명(인자1,..) // 불가능

var 변수명 = new Function("인자1", ...,"실행 문장");

var a = 변수명(인자1,..) // 가능

 

 => 함수가 생성되는 시점. runtime 단계

 

18. 함수 정의 매개변수 개수와 호출인자 개수가 달라도 가능

function test(a, b){

}

test(a); => 가능

test(a,b); => 가능

 

19. arguments 내장변수를 이용해 parameter 배열을 사용가능

    arguments.callee()는 현재 실행 함수 호출

function test(a, b){

    for(i=0; i<arguments.length; i++){

        arguments[i];

        arguments.callee(a); // 재귀함수 사용가능

    }

}

test(a);

test(a,b);

 

20. 중첩 함수를 이용하여 외부에서 호출 불가하도록 사용 가능

var a=function(){

    var b = function(){

    }

}

b(); // b함수 호출 불가

 

function a(){

    function b(){

    }

}

b(); // b함수 호출 불가

 

21. 콜백 함수 - 이벤트 처리시 많이 사용

var a = function(){  //  콜백 함수

    // 실행문

}

 

onclick(a); // onclick()이벤트로 a콜백 함수 호출

 

22. 내장함수

alert("a"); // 알림창

setTimeout(함수, timeout 시간); // 한번 실행

setInterval(함수, timeout 시간) // 반복 실행

parseInt("문자열"); // string -> number

parseFloat("문자열"); // string -> number

 

* 별도 정리

 

 

23. 내장객체

 * Data

 - String, Number, Date, Array, Boolean, Object, Math, RegExp

 

 * Browser

 - Window, Screen, Location, History, Navigation

 

 * DOM

 

* 별도 정리

 

24. 지역변수, 전역변수

1) function 밖에서 변수를 선언하는 경우 - 전역변수
2) function 내부에서 변수를 선언하는 경우 - 전역변수
    (반드시 변수가 선언된 function부터 실행되어야한다. )
3) var키워드를 이용해서 function내부에서 정의하는 변수 - 지역변수
4) var키워드를 이용해서 function 밖에서 정의하는 변수 - 전역변수

 

25. 함수 호이스팅

선언부(<head>)에 함수를 선언시 global영역으로 최우선으로 실행된다. 

이로 인해 문제가 발생하는데,

1) 선언부에 함수의 호출이 있는 경우 함수의 선언이 선행되지않아도 에러가 발생하지않는다.

2) Global 영역이 크면 respone시간이 오래 걸린다.

이로인해 표현식으로 사용 권고.(함수 리터럴)

var 변수명 = function 함수명(매개변수1,..){

           실행내용

}

1. <body>태그에서 정의하고 사용하는 방법

 <body>
	<script type="text/javascript">
		// 실행내용
	</script>
</body>

 

2. <head>태그안에 스크립트를 정의 <body>태그 내에서 호출해서 사용한다.

<head>
	<script type="text/javascript">
		// 함수정의
	</script>
</head>
<body>
	<script type="text/javascript">
		// 함수호출
	</script>
</body>

 

 3. 태그 내부에 inline으로 삽입 (event handler를 이용하여 함수를 호출한다)

<body>
	<input type="button" onclick="함수호출()"/>
    <a href="javascript:함수호출()">
</body>


 4) 외부문서를 참조하여 사용

<head>
	<script type="text/javascript" src=".js파일 경로"></script>
</head>

 

+ Recent posts

1