[JavaScript] 자바스크립트 객체

2. 자바스크립트 객체

2.1 자바스크립트의 객체

1) 내장 객체 : document, window, screen, browser 등

Date : 날짜와 시간 작업

Number : 수치형 데이터

String : 문자열 관련

Math : 수학 연산

Array : 배열

2) 사용자 정의 객체

- 객체 상수로부터 객체 생성

var myCar = {

  model: "520d",

  speed: 60,

  color: "red",

  break: function() { this.speed -= 10; }

  accel: function() { this.speed += 10; }

};

myCar.color = "yellow";

myCar.break();

- 생성자 함수를 이용한 객체 생성

function Car(model, speed, color) {

  this.model = model;

  this.speed = speed;

  this.color = color;

  this.break = function() {

    this.speed -= speed;

  }

  this.accel = function() {

    this.speed += speed;

  }

}

var myCar = new Car("520d", 60, "white");

myCar.color = "yellow";

myCar.break();

나. 실습예제

01) date1.html

02) date2.html

03) date3.html

04) date4.html

05) number1.html

06) number2.html

07) match.html

08) math1.html

09) math2.html

10) math3.html

11) array1.html

12) array2.html (요일 표시)

13) sort.html

14) try.html

15) screen.html

16) custom_type.html (사용자 정의 자료형)

17) calendar.html

3. DOM과 이벤트 처리, 입력검증

3.1 문서 객체 모델(DOM, Document Object Model)

3.1.1 document 객체 : 웹 문서의 최상위 객체

* id로 요소 찾기 : getElementById("태그의 id");

* 태그.innerHTML : 태그 내부의 사용

* 태그.value : 태그의 입력 값

* 태그의 속성 변경 : 태그.src = "값"

document.getElementById("img2").src = "poodle.png";

* 태그의 스타일 변경 : 태그.style.속성이름 = "속성 값";

document.getElementById("img2").style.color = "blue";

3.1.2 window 객체

- 팝업창 열기 : window.open(url, 윈도우의 name, 옵션);

- 타이머 설정 : setTimeout(), setInterval()

setTimeout(코드, 밀리세컨드)    한번만 호출됨

setInterval(코드, 밀리세컨드)    반복적으로 호출됨

- 윈도우 이동 :

절대좌표로 이동 - moveTo(x축 길이, y축 길이)

상대좌표로 이동 - moveBy(x축 길이, y축 길이)

- 윈도우의 크기 변경 : resizeTo(), resizeBy()

- 포커스 이동 : focus()

- 스크롤 위치 이동 : scrollTo(), scrollBy()

3.1.3 location 객체

- 페이지 이동 :

location.href = "이동할 주소";

location.replace("이동할 주소");

3.1.4 이벤트 처리

- onclick : 클릭 이벤트

- onload : 웹 페이지에 진입했을 때

- onchange : 값이 바뀔 때

- onmouseover : 마우스 커서가 올라갈 때

- onmouseout : 마우스 커서가 나갈 때

- onfocus : 포커스를 얻을 때

- onblur : 포커스를 잃을 때

- onkeydown : 키 입력을 할 때

5) 정규 표현식(Regular Expression)

1. 확장문자 (: backslash)

- s : 공백 문자(스페이스, 탭, 폼 피드, 라인 피드)

- d : 숫자

- D : 숫자가 아닌 문자 [^0-9] 와 동일

- w : 알파벳, 숫자, 밑줄 기호(_) [A-Za-z0-9]

- W : w의 반대 문자 [^A-Za-z0-9]

- 특수문자 : 특수문자 자체를 의미 ex. + (+ 기호 자체)

2. 특수문자

- * : 0회 이상 반복

- + : 1회 이상 반복

- ? : 0 또는 1개의 문자 매칭

- . : 정확히 1개 문자 매칭

3. 플래그

- g : 전역 매칭(매칭되는 모든 값을 찾음)

- i : 대 소문자 무시

- m : 여러 줄 매칭

4. 기타

- () : 괄호로 묶인 패턴은 매칭된 다음, 그 부분을 기억한다.

- | : ~또는~

- {} : 반복 횟수

# 간단한 정규 표현식

var re = /a/  var re = /a/i  var re = /apple/  var re = /[a-z]/  var re = /[a-zA-Z0-9]/  var re = /[a-z]|[0-9]/  var re = /a|b|c/  var re = /[^a-z]/  var re = /[a-z]$/

a가 있는 문자열  a가 있는 문자열, 대소문자 구분 안함  apple이 있는 문자열  a~z 사이의 모든 문자  a~z, A~Z 0~9 사이의 모든 문자  a~z, 혹은 0~9 사이의 문자  a 혹은 b 혹은 c인 문자  a~z까지의 문자가 아닌 문자("^" 부정)  문자가 a~z로 끝남