4-1. javascript

www.javaspecialist.co.kr
자바스크립트
자바스크립트 기본 문법들에 대하여 알아본다.
자바스크립트의 함수와 변수 특징에 대하여 알아본다.
자바스크립트 이벤트 처리 방법에 대하여 알아본다.

www.javaspecialist.co.kr자바 전문가 그룹
개요
특징과 기능
장점과 단점
기본 구조
실행 위치
예약어
기본 문법
데이터 타입
객체
배열
함수
연산자
제어문
예외처리
이벤트와 이벤트 핸들
러
버블링과 캡처링
Objects

1. 자바스크립트 개요
• 등장 배경
– 클라이언트쪽에서 독립적으로 실행되는 프로그램을 작성하기 위한 스크립트 언어로 넷스케이프
사에서 LiveScript를 발표했고. 이후 썬마이크로시스템사와 공동으로 라이브스크립트를 확장한
JavaScript를 탄생시켰다.
– 현재의 자바스크립트는 ECMA의 Technical Committee 39(TC-39)에서 정의한
ECMAScript(ECMA-262) 표준을 준수한다.
• 자바 스크립트
– 프로토타입 기반 객체지향 언어이다.
– 자바스크립트는 스크립트 언어의 특성 상 플랫폼에 독립적이며 모든 웹 브라우저에서 동일한 실
행 결과를 얻을 수 있다.
• 무료이며, 쉽고 자유롭게 사용할 수 있다.
– 프로그램 코드가 직접 html문서에 삽입되어, 브라우저에서 html파일을 읽을 때 같이 해석되고 실
행된다.
– 클라이언트에서만 실행되기에 정보를 서버에 보낼 필요 없이 처리할 수 있다.
– 컴파일 과정이 필요 없으며, 브라우저만 있다면 실행이 가능하다.
– 타입체크가 철저하지 않습니다. 즉, 변수들의 타입에 있어서 차이를 두지 않는다.
– 클래스 정의가 안되며, 클래스 상속 할 수 없습니다. 그러나 대신 객체를 정의하여 사용할 수 있
다.
• 스크립트 언어란?
– 어플리케이션이 실행되는 동안 라인 단위로 해석(인터프리터)되어 실행되는 언어.
– 별도의 컴파일 과정이 없다.
– 스크립트 언어를 해석하고 실행해 줄 프로그램이 별도로 필요하다.
– HTML 문서 내에서 스크립트 언어는 <script>와 </script>사이에 작성한다.

2. 자바스크립트 특징과 기능
• 자바스크립트의 특징
– 웹 문서(HTML)에 끼워서 사용하는 스크립트 언어
– 웹 브라우저에서 웹 문서를 실행할 때 프로그램 코드가 해석되기 때문에 웹 브라우저에 자
바스크립트 해석기가 있어야 한다.
– 인터프리터 언어의 형태를 띄고 있다.
– 몇 가지 객체 지향 요소를 포기하고 있다. 클래스를 정의할 수 없다. 클래스를 상속의 이점
을 사용할 수 없다. 이로인해 다형성 사용에 있어서도 제약이 있다.
– 그러나 함수를 정의하고 함수로 객체를 생성할 수 있다.
• 자바스크립트의 기능
– 일반적으로 HTML로만 작성된 웹 문서는 단순히 정보만을 제공할 뿐, 웹 문서에 동적으로
움직일 수 있는 프로그램적인 요소를 추가할 수 없다.
– HTLM 문서 내에서 프로그램적인 요소를 자바스크립트를 이용하면 해결할 수 있다.
– 자바스크립트는 어떤 이벤트에 대한 반응을 할 수 있도록 웹 문서를 구성할 수 있다.
• 예를 들어, 사용자가 웹 문서 내 특정 부분을 클릭했거나 웹 문서가 호출된 후에 웹 문서
에`서 어떤 작업이 진행되도록 구성할 수 있다.
– 자바스크립트는 웹 문서 내의 HTML 요소의 내용을 읽거나 바꿀 수 있다.
– 자바스크립트는 클라이언트의 정보를 서버에 보내기 전에 먼저 검증할 수 있으며, 이로 인
해 서버의 작업 부담도 줄여줄 수 있다.
– 자바스크립트는 클라이언트가 어떤 웹 브라우저를 사용하는지 알아내어 사용자의 웹 브라
우저에 맞는 웹 문서를 호출하는 맞춤형 서비스를 제공할 수 있다.
– 자바스크립트는 클라이언트 컴퓨터에 쿠키를 새로 만들거나 생성된 쿠키를 삭제할 수 있
다.

3. 자바스크립트의 장점과 단점
• 자바스크립트의 장점
– 작업 속도가 빠름
• 자바스크립트는 HTML 파일 내에서 작성할 수 있으므로 개발 속도가 빠르다.
• 자바, C/C++ 등 프로그래밍 언어의 기본적인 틀을 그대로 갖추고 있어 프로그래머라면
쉽게 언어를 익힐 수 있다.
– 플랫폼 독립적
– 배우기 쉬움
• 객체의 단순화로 인한 프로그램 제작 용이
• 자바스크립트의 단점
– 소스 코드가 노출된다. 컴파일 하지 않는 언어이므로 누구든 복사하여 사용할 수 있다.
• 자바스크립트 패킹을 통해 소스코드 노출을 어느 정도 커버할 수 있음
– Packer - http://dean.edwards.name/packer/
– Unpacker - http://www.strictly-software.com/unpacker#unpacker
– 한정된 객체와 객체 함수를 가지고 있다.
• C++의 STL, Java의 API 처럼 풍부한 라이브러리를 가지고 있지 않다.
• 제한된 객체와 객체 함수를 사용하므로 복잡한 게임, 메신저, 채팅방 등의 프로그램은
개발이 어렵다.

4. 자바스크립트의 기본 구조
• 자바스크립트의 기본 구조
– <script> 태그를 사용하여 HTML 문서에 코드를 작성한다.
– type 속성값으로"text/javascript"를 입력(HTML5 에서는 생략 가능)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="euc-kr" />
5. <title>javascript-base.html</title>
6. </head>
7. <body>
8. <hr>
9. <h1>자바스크립트 기본 구조</h1>
10. <hr>
11. <script type="text/javascript">
12. document.write("<h2>안녕하세요!</h2>");
13. </script>
14. </body>
15. </html>
자바스크립트의 문
법을 배우기 위해서
꼭 HTML 문서가 필
요한 것은 아니다.
Firebug와 몇몇
Extension 만 있어도
가능하다.

5. 자바스크립트의 실행 위치 (1/3) – head 태그
• 자바스크립트가 <head> 태그 영역에 배치되는 경우
– 클라이언트 작업 전 자바스크립트에서 지정한 이벤트가 웹 브라우저에 전달
– <body> 태그 영역에서도 공통적으로 반응
1. <!DOCTYPE html>
2. <html>
3. <head>
5. <title>javascript-head.html</title>
7. window.onload = function( ){
8. alert("이 메시지 상자는 onload 이벤트가 발생할 때 보입니다.");
9. };
10. document.write("<h2>자바스크립트 세계에 오신 걸 환영합니
다.</h2>");
11. </script>
12. </head>
13. <body>
14. <hr><h1>자바스크립트가 head 요소 영역에 위치했을 때</h1><hr>
15. </body>
16. </html>

5. 자바스크립트의 실행 위치 (2/3) – body 태그
• 자바스크립트가 <body> 태그 영역에 배치되는 경우
– <body> 태그 영역에 "document.write( )"함수를 이용하여 정보를 표현
– HTML 요소가 파싱된 다음 실행되도록 할 때
1. <!DOCTYPE html>
2. <html>
3. <head>
5. <title> javascript-body.html </title>
6. </head>
7. <body>
8. <hr><h2>자바스크립트가 body 요소 영역 내에 위치했을 때</h2><hr>
10. document.write("자바스크립트의 문장");
11. </script>
12. <p> xhtml의 문장 </p>
13. </body>
14. </html>

5. 자바스크립트의 실행 위치 (3/3) – 외부파일
• 자바스크립트를 외부 파일로 사용되는 경우
– <head> 태그 부분이든 <body> 태그 부분이든 기능을 구현할 곳에 삽입
– 외부 파일 자바스크립트의 확장자는 "js"
– script element의 src 속성값이 호출할 자바스크립트의 파일명
– defer 속성을 추가하면 HTML 문서가 파싱된 다음 자바스크립트 코드가 실행됨
– HTML5 에는 async 속성도 추가되었음
– HTML5에는 type 속성 생략 가능함
– 사용 방법
– 자바스크립트 파일 안에는 <script> 태그를 포함할 수 없음
<script type="text/javascript" src="호출할 자바스크립트 파일명.js"></script>

6. 예약어(ECMAScript 표준)
• Keyword
break do instanceof typeof
case else new var
catch finally return void
continue for switch while
debugger function this with
default if throw
delete in try
• FutureReservedWord
class enum extends super
const export import interface
implements let static yield
public protected package private
자바 언어에서 볼
수 있는 키워드들
입니다.

7. 자바스크립트의 기본 문법
• 자바스크립트의 표현 방식
– 자바스크립트 구문
• 문장 끝에 세미콜론(;)을 입력한다.
• 구문 사이를 구분하기 위해 사용. 생략해도 무관하나 오류방지를 위해 권장한다.
• ;을 넣지 않았을 경우 Packing 된 자바스크립트 파일에서 오류가 발생할 수 있음
– 자바스크립트 주석
• // : 한 줄 주석 처리. 프로그램 코드 끝에 사용
• /* ~ */ : 한 줄 이상의 주석 처리
– 변수 선언
• var 키워드 이용
• var 없이 변수 사용 가능하지만 그러면 전역변수(최상위 객체의 멤버)가 됨
• 자바스크립트에서 변수의 스코프(scope)는 코드 블록({ })이 아닌 함수 단위 임
1. function hello(name) {
2. console.log("Say Hello~ " + name);
3. var a = 10;
4. b = 20;
5. };
6. hello("KilDong");
7. console.log(a); //Reference
Error
8. console.log(b); //20 출력됨

8. 데이터 타입 (1/3)- Primitive data type
• Primitive data type
– 숫자(number)
• 정수, 실수 구분 없음
• 모든 수가 동일한 크기의 변수에 저장됨
• Infinity, NaN도 숫자임  이들은 비교할 경우 isFinite(), isNaN()으로 비교해야 함.
– 문자열(string)
• 문자, 문자열 구분 없음
• 쌍따옴표("") 로 묶어도 되고, 홑따옴표(‘’)로 묶어도 됨
• var s = "Hello World"; //리터럴로 변수 선언
• var o = new String("Hello World") //생성자 이용
• String(new Date()); //new 없이 사용하면 문자열 객체로 반환하는 기능(문자열 아님)
– 불린(boolean) 타입
• true/false
• 비교 결과가 0, null, ""(빈 문자열), false, undefined, NaN으로 판단되면 false, 나머진 true
• 동등 비교를 할 경우 타입도 같이 비교해 주는 === 사용을 권장
– undefined
• 정의되지 않음을 의미하며, 루트객체의 속성으로 정의되어 있음
• 변수를 선언하면 할당되기 전에 undefined가 됨
• 불린형은 false로 반환, 숫자는 NaN, 문자열은 "undefined"로 반환됨
– null
• 객체가 없음을 의미하는 명시적으로 할당하는 값임.
• 키워드임

8. 데이터 타입 (2/3) - Reference data type
• Reference data type
– 객체
• {}로 생성
• 생성자함수 이용
– 배열
• [ ]
– 함수
• 자바스크립트는 클래스가 없다.
• 함수를 이용해서 객체를 생성한다.
– 기타
• 날짜(Date), 정규식(RegExp) 등 내장 객체
• Window 객체
• Document 객체
• Element, Node 객체 등

8. 데이터 타입 (3/3) - 객체
• 자바스크립트에서 객체는 모든 것(Everything)을 의미한다.
– 문자열(String), 숫자(Number), 배열(Array), 함수(Function) 등
• 자바스크립트는 내장(built-in) 객체와 사용자 정의 객체가 있다.
– 내장 객체
• Number, String, Date, Array, Boolean, Math, RegExp, JSON
– 사용자 정의 객체
• Object의 인스턴스를 생성하고 정의하는 방법
– person = new Object();
– person.name = "JinKyoung";
– person.age = 30;
• 생성자를 이용하는 방법
– function Person(name, age) {
– this.name = name; //속성 추가
– this.age = age;
– this.setName = function(newName) { //메서드 추가
– this.name = newName;
– }
– }
– var friend = new Person("KikDong", 25);
• 리터럴을 이용하는 방법
– var person = { name: "Sunsin", age: 35};

9. 연산자
• Punctuator
{ } ( ) [ ]
. ; , < > <=
>= == != === !==
+ - * % ++ --
<< >> >>> & | ^
! ~ && || ? :
= += -= *= %= <<=
>>= >>>= &= |= ^=
• DivPunctuator
/ /=
• 조건 연산자(삼항연산자)
– 조건식 ? 처리내용1 : 처리내용2
– 조건 결과값이 참(true)이면"처리내용 1", 거짓(false)이면"처리내용 2" 반환
===와 !==는 타
입도 비교하는 연
산자이다.
&&와 ||의 결과는
true/false가 아니다.
왼쪽 항 또는 오른쪽
항의 결과가 대입됩
니다.
보통의 다른 언어에서 볼 수 있는
연산자와 기호들입니다.
단항연산자, 다항연산자, 비트연
산자, 대입연산자, 논리연산자 등
이 있다.

10. 제어문 (1/3)
• 조건문
– if() 문
• if(조건식) { }else { }
– 조건 연산자
• 조건식 ? 식1 : 식2
– switch() 문
• switch(a) {
• case a>2 :
• //실행문;
• break;
• case a==2 :
• //실행문;
• break;
• default :
• //실행문;
• }
• 조건 평가 규칙
– 비교 결과가 0, null, ""(빈 문자열), false, undefined, NaN으로 판단되면 false, 나머진 true
– || 와 && 두 조건식을 비교하는데 사용하지만 실행 결과는 true 또는 false 가 아닌 왼쪽항 또는 우
측 항의 결과가 된다.
• ||은 false가 아닌 첫 번째 항의 결과가 반환됨(모두 false로 판단될 경우 마지막 항의 값 반환)
• && 은 false로 판단 된 첫 번째 항의 결과가 반환(false로 판단되는 항이 없을 경우 마지막 항의
값 반환)

10. 제어문 (2/3)
• 반복실행 할 수 있는 문장으로 for, for/in, while, do/while문이 있다.
• for 문
– 사용법
• for(변수 초기화; 반복 여부 테스트; 변수 값 증가) {
• //실행코드 블록
• }
• for/in 문
– 사용법
• for(변수 in 객체) {
• //실행 코드 블록
• }
– 실행 코드 블록에서 객체의 멤버에 접근하기 위해 [ ]사용 가능
– for/in 문으로는 사용자가 정의한 속성에만 접근 가능하지만, Object 객체에 원래 정의된 속
성에는 접근할 수 없다.
1. var myObj = { p1:‘a’, p2:‘b’}; //객체 정의
2. var result=‘’;
3. for(var prop in myObj) {
4. result += ‘속성명: ’ + prop + ‘, 값: ’ + myObj[prop] + ‘n’;
5. }
1. var ar = [‘a’, ‘b’]; //배열 정의
2. var result=‘’;
3. for(var i in ar) {
4. result += ‘인덱스: ’ + i + ‘, 값: ’ + ar[i] + ‘n’;
5. }

10. 제어문 (3/3)
• while문
– var i=0;
– while(i<10) {
– i++;
– }
• do/while 문
– var i=0;
– do {
– i++;
– } while(i<10);
• 반복문 안에서 변수 선언시 var 변수로 선언하지 않으면 전역
변수가 된다.(함수 밖에서 참조 가능)

11. 예외 처리
• try/catch/finally
– 사용법
• try {
• //실행 코드를 포함
• }catch(error) {
• //예외가 발생했을 경우 처리할 코드
• }finally {
• //항상 실행되는 코드 포함
• }
– try 블록이 있으면 최소한 catch 블록이나 finally 블록 둘 중 하나는 존재해야 한다.
– try 블록만 단독으로 사용 못한다.
• throw
– 사용법
• throw 예외객체
– 예
• if("예외 발생조건이 되면") {
• throw new Error("예외 메시지");
• throw "예외 메시지";
• throw 4;
• }
속성과 메서
드
설명
message 사람이 읽을 수 있는 예외 설명
name
예외 타입을 문자열로 가지고 있다. Error(예외 객체의 최
상위 객체), EvalError, SyntaxError, URIError, TypeError
등이 있다.
toString()
표준에는 정의되어 있지만 스크립트 언어에서 구현할 필
요 없다.
message, name으로 예외에 대한 정보를 참고할 수 있다.
Error 객체의 속성과 메서드
try {
console.log(a);
}catch(error) {
console.info(error.message);
console.info(error.name);
}finally {
console.info("return
resource");
}

12. 함수 (1/6) - 기본개념
• 함수의 정의
– 프로그램 내에서 특정 작업 수행 위해 독립적으로 만들어진 하나의 단위
– 예약어 ‘function’으로 시작
– 함수의 시작과 끝을 구분하는 기호: 중괄호({ })
– 반환형(return type), 매개변수(parameter)에 대한 자료형 입력 안 함
– 함수 정의 구문 구조
• function name(parameters) {
• //statements;
• }
– function : 함수 정의하는 키워드
– name : 함수 이름, 선언과 동시 실행할 경우 생략 가능(anonymous function)
– parameters : 파라미터 변수, 값을 필요로 하지 않는다면 생략 가능
– statements : 함수의 몸체, 지역변수 정의 및 또 다른 함수를 정의할 수 있다.
» 지역변수 정의 시 var 선언 안 하면 전역변수가 됨
– 함수 호출 구문 구조
• name(arguments);
– name: 함수명
– arguments: 함수 호출 시 전달해야 할 값
– Lexical 특성
• 코드 그대로의 환경을 기준으로 정의한 변수 스코프에서 변수의 검색이 일어난다.
• 함수 밖에서 선언된 전역변수를 함수 안에서 값을 수정할 때 초기화 하지 않고 참조하면 undef
ined
var data=10;
function calc() {
console.log(data);
var data=20;
}

12. 함수 (2/6) - 함수의 역할
• 자바스크립트에서 함수는 객체지향 프로그래밍 언어에서 메서드의 기능보다 훨씬 더 많은
기능을 한다.
• 자바스크립트에서 함수의 역할을 다음 3가지로 구분할 수 있다.
– 호출 가능한 루틴으로서의 함수
• new 없이 사용
– 값으로서의 함수
• 인자로 전달 가능
• 변수에 할당 가능
• 다른 함수의 반환값으로 사용 가능
– 다른 인스턴스를 생성할 수 있는 요소. 객체 타입으로서의 함수
• new와 함께 사용되어 객체를 생성하는 역할
• 함수 이름 첫 문자를 대문자로 정의한다.(강제사항은 아님)
 자기 참조 호출 패턴
– 함수 정의와 함께 실행하도록 함
– 필요하다면 인자를 포함시킬 수 있음.
– (function() {
– console.log("함수 정의와 함께 실행됨");
– })();

12. 함수 (3/6) - 함수와 변수 스코프
+ prototype :
- 함수 내 var 변수
함수 내 코드
(변수 스코프의 변수 참조)
+ constructor :
+ 런타임시 추가/제거되는
변수
변수 스코프
실행코드 블록
프로토타입 객체
공개 변수 영역
함수 객체
함수는 객체로 사용될 수도 있
으므로
add.Description = "설명"; 이라
고 하면 Description 변수가 공
개변수 영역에 할당된다.
function add(x, y) {
return x+y;
}
라고 함수를 정의했을 때
-x : undefined
-y : undefined
return x+y;
함수명.prototype
함수명.공개변수명함수명()
프로토타입 객체에 추가된 멤
버는 인스턴스가 상속받는다.
이 때 프로토타입 멤버의 비 대
칭성에 주의하자.
함수명.prototype.멤버 = 값;

12. 함수 (3/6) - 함수와 변수 스코프
function Person() {
var name;
var age;
}
var person1 = new Person();
person1.name = "홍길동";
person1.age = 30;
console.log(person1.name + " " + person1.age);
Person.prototype.city = "서울";//모든 인스턴스가 상속 받는다.
console.log(person1.city);
person1.city = "뉴욕";//인스턴스에 city라는 변수 추가된다.
//프로토타입의 변수 값이 수정되지 않는다.
//프로토타입 변수의 값을 수정하려면 반드시 프로토타입객체를
//통해서 수정해야 한다.
console.log(Person.prototype.city);//서울 출력됨. 뉴욕이 출력되지 않는다.
//프로토타입 변수의 비 대칭성이라 부른다.
Person.job = "프로그래머";
console.log(Person.job);//공개변수 영역

12. 함수 (4/6) - 함수 정의 방법
• 함수 정의
– function add(x, y) {
– return x+y;
– }
• 함수 리터럴 사용
– var add = function(x, y) {
– return x+y;
– }
• Function 생성자 사용
– var add = new Function("x", "y", "return x+y");
– 생성자 함수 마지막 인자가 실행 코드가 된다.
• 함수 호출과 함수 인자
– 함수 호출시에 인자의 수는 정의시 매개변수의 수와 일치하지 않아도 됨
– 매개변수보다 인자의 수가 부족하면 나머진 undefined로 할당됨
– 인자의 수가 더 많으면 남는 인자는 무시됨

12. 함수 (5/6) - arguments
• arguments
– 함수 인자로 전달되는 데이터를 가진 객체, Object 타입
– arguments.callee 속성
• 익명 함수(anonymous function)에서 자신을 참조함
– arguments.length
• 전달되는 인자의 개수
var add = function() {
var sum=0
console.log(arguments.length);
for(var data in arguments) {
//console.log(arguments[data]);
sum = sum + arguments[data];
}
return sum;
}
console.log(add(10, 20, 30, 40));
console.log(add(10, 20, 30));
var fact = (function(n) {
//console.log(arguments.callee);
var self = arguments.callee;
if(n==0)
return 1;
else
return (n * self(n-1));
})(10);
console.log(fact)//3628800

12. 함수 (6/6) - 자바스크립트 클로저
• 내부 함수를 반환값으로 사용하는 특수한 함수
• 예)
– function outer() {
– var x=0;
– return function() {
– return ++x;
– }
– }
– var f = outer();
– var g = outer();
– f(); //1
– f(); //2
– g(); //1
– g(); //2
+ prototype :
- x : 0;
return ++x; -x : 0
outer 클로저
f
return ++x;
-x : 0
return ++x;
g
f와 g는 독립된 변
수 공간을 가진 인
스턴스를 반환한다
.
클로저를 포함하면
멤버를 가질 수 없
음

13. 이벤트 (1/5) - 이벤트와 이벤트 핸들러
• 이벤트와 이벤트 핸들러 정의 및 종류
– 이벤트(event)
• 사용자에 의한 특정 행위의 결과로 발생하는 사용자와 프로그램 사이의 상호작용 처리
의 요인
– 버튼 클릭시, 하이퍼링크 위에 마우스 커서를 위치 시킬 경우 등에 발생하는 이벤트
– 이벤트 핸들러(Event Handler)
• 이벤트를 처리하는 기능
• 이벤트 처리 루틴
• HTML 문서에서 발생하는 이벤트는 onxxx 식으로 이벤트 핸들러 속성이 정의되어 있다.
– 클릭 이벤트는 onclick 이벤트 핸들러 이용
• 이벤트 핸들링
– HTML 태그의 속성으로 등록
• <input type="checkbox" name="options" value="true" onclick="handler()">
– function handler() { …; } 함수가 <script> 태그 안에 정의되어 있어야 함.
– 요소 객체의 메서드로 등록
• document.getElementById("options").onclick = function() {…;}
• 이벤트 핸들러
– 함수의 인자로 event 객체가 전달됨, 함수 정의시 선언안해도 자동 전달됨
– 이벤트 핸들러 코드에서 false 를 반환하면 요소의 기본적인 액션을 취소시킨다.
• event.preventDefault();와 같음

13. 이벤트 (1/5) - 이벤트와 이벤트 핸들러
function handler() {
console.log("이벤트 발생함");
}
window.onload = function() {
var pElement = document.querySelector("#two");
pElement.onclick = function() {//파라미터로 event를 정의하지 않아도 evnet
객체 전달됨
console.log(pElement.textContent);
console.log(event)
}
var naverElement = document.querySelector("#naver");
naverElement.onclick = function(event) {
event.preventDefault();//엘리먼트의 기본 액션을 취소시킴
console.log(naverElement.href);
//return false;//엘리먼트의 기본 액션을 취소시킴
}
//var threeElement = document.querySelector("#three");
var threeElement = document.getElementById("three");
threeElement.addEventListener("click", function() {
console.log(threeElement.textContent);
});
};
<p onclick="handler()">첫 번째 문장입니다.</p>
<p id="two">두 번째 문장입니다.</p>
<a href="http://www.naver.com" id="naver">네이버
</a>
<p id="three">세 번째 문장입니다.</p>
body 태그의 내용

13. 이벤트 (2/5) - DOM Level 2 이벤트 핸들링
• W3C에서 표준화 한 DOM Level2 이벤트 모델
• 이벤트를 등록하거나 제거하는 표준적인 방법을 비롯해 이벤트 전파 메커니즘에 대한 표준,
이벤트 핸들링 메서드로 전달되는 이벤트 객체에 대한 표준 등이 포함돼 있다.
• DOM Level2를 지원하는 브라우저는 DOM Level 0(앞에서 설명한 이벤트 처리)을 지원한다.
– 익스플로러 8이하는 DOM Level2를 지원안함
• 이벤트 캡처링과 이벤트버블링
– 이벤트 캡처링 : 타겟 요소의 이벤트를 처리하기 위해 상위 요소의 이벤트까지 처리되는
현상.
– 이벤트 버블링 : 타겟 요소의 이벤트를 처리하고 상위 요소에 이벤트가 전달되는 현상.
• 이벤트 핸들링
– elem.addEventListener(string type, Function handler, useCapture);
• type : 핸들링 하고 싶은 이벤트, DOM Level0 의 이벤트 핸들러에서 on을 빼면된다.
• handler : 이벤트가 발생했을 경우 호출될 이벤트 핸들링 함수. 인자로 이벤트 객체가 전
달된다.
• useCapture : true일 경우 이벤트 버블링을 캡처링 단계에서만 호출되도록 한다. false(
디폴트)일 경우 타겟 단계와 버블링 단계에서 호출된다.
– elem.removeEventListener(string type, Function handler, useCapture);
• addEventListener로 등록된 이벤트 핸들러 제거
– event.stopPropagation();
• 이벤트 캡처링에서는 타겟 요소를 포함한 가장 상위 요소의 이벤트만 처리한다.
• 이벤트 버블링 단계에서, 타겟요소의 이벤트만 처리되도록 함

13. 이벤트 (3/5) - 이벤트 캡처링/버블링 예
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>Insert title here</title>
6. <script>
7. window.onload = function() {
8. var elements = document.querySelectorAll("div");
9. for(var i=0; i<elements.length; i++) {
10. elements[i].addEventListener("click", function(event) {
11. console.log(this.getAttribute("id"));
12. event.stopPropagation();
13. }, true);
14. };
15. };
16. </script>
17. </head>
18. <body>
19. <div id="a">AAAAAA
20. <div id="b">BBBBBB
21. <div id="c">CCCCCC
22. </div>
23. </div>
24. </div>
25. </body>
26. </html>
<div>A
</div>
<div>B
</div>
<div>C
</div>
useCaptur
e
stopPropa
gation
A클릭 B클릭 C클릭 비고
true yes a a a
true no a a b a b c
false yes a b c 권장
false no a b a c b a

13. 이벤트 (4/5) - Event 객체의 속성과 메서드
속성/메서드 설명
type
발생한 이벤트의 타입. "click", "keydown"처럼 이벤트 핸들러를 등록할 때 사용한 속
성명과 동일한 문자열이다.
target 원래 이벤트가 발생한 요소로서 다음에 설명하는 currentTarget과는 다를 수 있다.
currentTarget
이벤트가 처리되고 있는 요소로서 현재 실행되고 있는 핸들러가 등록된 요소를 반환
한다. 만약 캡처링 또는 버블링 하는 동안 이벤트가 처리된다면 이 속성의 값은 원래
이벤트가 발생한 요소를 나타내는 target속성의 값과는 다를 수 있다.
bubbles
버블링 이벤트인지를 나타낸다. 버블링 이벤트인 경우는 true를, 그렇지 않은 경우에
는 false를 반환한다.
calcelable preventDefault() 메서드로 취소될 수 있는 기본 액션이 존재하는지 알려준다.
eventPhase
이벤트 전파가 어떤 단계인지를 알려주는 상수 값. 다음 상수 중 하나를 값으로 취한
다.
Event.CAPTURING_PHASE
Event.AT_TARGET
Event.BUBBLING_PHASE
preventDefault()
브라우저가 이벤트와 관련된 기본 액션을 수행하지 않게 한다. 예를 들면 <a> 태그의
경우 링크가 가리키는 주소로 이동하지 않게 한다.
stopPropagation()
캡처링, 타켓팅, 버블링 경로상에 현재 핸들링되고 있는 객체 이상으로 이벤트가 전
파되지 않게 한다.

13. 이벤트 (5/5) - 윈도우 이벤트 속성
Attribute Value Description HTML5
onafterprint script Script to be run after the document is printed New
onbeforeprint script Script to be run before the document is printed New
onbeforeonload script Script to be run before the document loads New
onblur script Script to be run when the window loses focus
onerror script Script to be run when an error occur New
onfocus script Script to be run when the window gets focus
onhaschange script Script to be run when the document has change New
onload script Script to be run when the document loads
onmessage script Script to be run when the message is triggered New
onoffline script Script to be run when the document goes offline
ononline script Script to be run when the document comes online New
onpagehide script Script to be run when the window is hidden New
onpageshow script Script to be run when the window becomes visible New
onpopstate script Script to be run when the window's history changes New
onredo script Script to be run when the document performs a redo New
onresize script Script to be run when the window is resized New
onstorage script Script to be run when a document loads New
onundo script Script to be run when a document performs an undo New
onunload script Script to be run when the user leaves the document New

• Window object
• Navigator object
• Screen object
• History object
• Location object
• 참고
– http://www.w3schools.com/js/js_window.asp
• DOM Node
• DOM NodeList
• DOM NamedNodeMap
• DOM Document
• DOM Element
• DOM Attr
Core DOM Object Browser Object Model (BOM)
14. Objects (1/6) - Browser Objects & Core DOM Objects

• Document object
– 브라우저 창에 로드 된 각 HTML 문서는 d
ocument 개체가 된다.
– document 개체는 스크립트 내에서 페이
지의 모든 HTML 요소에 대한 액세스를
제공한다.
• Event object
• HTMLElement object
• Anchor object
• Area object
• Base object
• Body object
• Button object
• Form object
• Frame/IFrame object
• Frameset object
• Image object
• Input Button object
• Input Checkbox object
• Input File object
• Input Hidden object
• Input Password object
• Input Radio object
• Input Reset object
• Input Submit object
• Input Text object
• Link object
• Meta object
• Object object
• Option object
• Select object
• Style object
• Table object
• td / th object
• tr object
• Textarea object
14. Objects (2/6) - HTML DOM Objects
참고 : http://www.w3schools.com/jsref/default.asp

14. Objects (3/6) - HTMLElement 객체의 주요 속성과 메서드
• HTMLElement 객체의 속성과 메서드는 Node 객체와 Element 객체가 상속받는다.
• 속성
– className : 요소의 class 속성을 지정하거나 리턴한다.
– id : 요소의 id 속성을 지정하거나 리턴한다.
– innerHTML : 요소의 HTML 컨텐트(텍스트 포함)을 지정하거나 리턴한다.
– tabIndex : 요소의 탭 순서를 지정하거나 리턴한다.
– title : 요소의 title속성을 지정하거나 리턴한다.
• 메서드
– toString() : 요소를 문자열로 변환한다.
• 참고
– http://www.w3schools.com/jsref/dom_obj_all.asp

14. Objects (4/6) - Node 객체의 속성과 메서드
• Node 객체는 document, element 객체, attribute 객체, Text, comment 등이 있다.
• 속성
– attributes : 노드 속성들의 컬렉션을 리턴한다.
– childNodes : 자식노드들을 NodeList 타입으로 리턴한다.
– parentNode : 부모 노드를 리턴한다.
– textContent : 노드와 노드 자손 노드의 텍스트 컨텐트를 지정하거나 리턴한다.
• input 요소의 값은 value 속성을 이용해 지정하거나 리턴받을 수 있다.
• 메서드
– appendChild(newListItem) : 인자로 지정한 노드를 자식노드로 추가(마지막 노드로 추가됨
)
– cloneNode() : 노드 복사(인자 값이 true이면 깊은 복사, false(기본 값) 이면 얇은 복사)
– hasAttributes() : 어떤 속성이라도 가지고 있으면 true 리턴한다.
– hasChildNodes() : 자식 노드를 가지고 있으면 true 리턴한다.
– insertBefore(newItem, existingItem) : 인자로 지정한 노드를 현재 존재하는 자식노드 앞에
삽입한다.
– removeChild(childNode) : 자식 노드를 제거한다.
– replaceChild(newNode, oldNode) : 자식 노드에서 oldNode를 newNode로 바꾼다.
• 참고
– http://www.w3schools.com/jsref/dom_obj_node.asp

14. Objects (5/6) - Element 객체의 속성과 메서드
• Element 객체는 HTML 문서 내에서 요소를 표현한다.
• Element 객체는 Element, Text, Comment, CDATASection, ProcessingInstruction, EntityRefe
rence 를 자식노드로 가질 수 있다.
• Element 객체는 Node 객체의 속성과 메서드를 사용할 수 있다.
• 속성
– tagName : 요소의 태그 이름을 리턴한다.
• 메서드
– getAttribute("attrName"), setAttribute("attrName", "value"), removeAttribute("attrName") :
요소 속성을 리턴, 수정, 삭제한다.
– hasAttribute("attrName")은 해당 속성이 있으면 true 리턴한다.
• 참고
– http://www.w3schools.com/jsref/dom_obj_element.asp

14. Objects (6/6) - Text 객체의 속성과 메서드
• <input type="text"> 객체
• Node객체와 Element 객체의 속성과 메서드를 상속받아 사용할 수 있다.
• 속성
– defaultValue : 텍스트 필드의 기본 값을 지정하거나 리턴한다.
– disabled : 텍스트 필드의 disabled 상태를 지정하거나 리턴한다.
– form : 텍스트 필드가 포함되어 있는 form 객체를 리턴한다.
– name : 텍스트 필드의 name 속성의 값을 지정하거나 리턴한다.
– type : 텍스트 필드의 어떤 타입인지 반환한다. Input 요소가 어떤 타입인지 알 수 있다.
– value : 텍스트 필드의 value 속성의 값을 지정하거나 입력된 값을 반환한다.
• 메서드
– select() : 텍스트 필드의 컨텐트를 선택한다.(블록 설정됨)
• 참고
– http://www.w3schools.com/jsref/dom_obj_text.asp

4-1. javascript

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (16)

Ähnlich wie 4-1. javascript

Ähnlich wie 4-1. javascript (20)

4-1. javascript