표준웹 11주차 : JavaScript_Object

오늘

• Core Object : Array, String, Math, Date, and so on
• User Defined Object
• DOM

Object

Modeling

실세계에 있는 모든 것을 객체라고 부른다
ex) 사람, 책상, 차, TV 등등
속성(properties)과 행위(function or method)로 구성
객체지향 : 구조화, 모듈화

JavaScript

• 실제로 JS는 객체기반의 언어이지, 객체지향언어는 아니다.

객체 타입

1. Global (core) object : 코어객체

• 따로 import 시키지 않고 바로 쓸 수 있는 객체들
  ex) array, date, string, math etc
• 객체의 생성 : 'new' 사용

var today = new Date(); //시간 정보를 다루는 Date 타입의 객체 생성
var msg = new String("Hello"); //"Hello" 문자열을 담은 String 타입의 객체 생성

-객체 접근 : dot(.) operator 이용하여 접근

obj.property = value; //객체 obj의 프로퍼티 값 변경
variable = obj.property; //객체 obj의 프로퍼티 값 알아내기
obj.method(parameters); //객체 obj의 메소드 호출

Array : 배열

• 다양한 원소를 저장하기 위함
• 배열의 index는 0으로 시작한다
• 배열의 생성
  [대괄호] 사용 or New Array[원소 개수]
• length 사용 가능

Date : 날짜

var now = new Date(); //현재 날짜와 시간(시분초)값으로 초기화된 객체 생성
var startDay = New Date(2017,2,1); //2017년 3월 1일 (2는 3월을 뜻함)

var now = new Date(); //현재 년월일,시분 알려줌 (만약 2017년 5월 15일 저녁 8시 48분)
var date = now.getDate(); //오늘 날짜 (date=15)
var hour = now.getHours(); //지금 시간 (hour=20)

String Object : 문자열

• 수정될 수 없다. (바꿀 수 없는 배열)
• method
  index, replace, char 등등
  

Math object : 수악

• 수학 관련
• 오브젝트를 따로 생성하지 않는다.
• method
  sqrt, PI, random, floor, write 등등

2. User Defined Object

코드를 편하게 사용하기 위해 사용자가 정의하는 것

객체 생성

Using new Object()

1. 빈 객체 생성
2. 빈 객체에 프로퍼티 추가
3. 빈 객체에 매소드 추가

Using literal notation

braces({})로 객체의 프로퍼티와 매소드를 묶어준다.
한꺼번에 변수에다가 중괄호로 묶는 것

Prototype : 프로토타입 생성

(templete 형태, C++과 비슷)

• 객체의 형태를 가진 프레임을 하나 만드는 것
• C++에서는 클래스 라고 부른다.
• Using new prototype
  ex) array, date, string etc
• 생성자...?

3. DOM : Document Object Model

자바는 HTML을 구성하는 tag와 css를 제어하기 위해 사용
html의 태그를 객체로서 관리하고 있다.
자바는 html의 내용이나 형태를 컨트롤 가능

HTML DOM

DOM Tree structure

• 부모자식관계를 갖는다.

DOM object

• 돔 트리의 하나의 노드
• html 태그 마다 돔객체가 하나씩 만들어진다.
  

DOM Tree

• 돔트리의 최상위 루트는 도큐먼트 객체이다.
• 돔 객체의 타입은 HTML 태그와 일치한다.
• HTML 태그마다 DOM 객체가 만들어진다.

HTML tag

• 트리에서의 한 노드가 된다.
• 태그 이름, 속성, css3스타일, 이벤트리스너, 콘텐츠(inner html)을 가진다.

DOM Object

• 속성(property), 메소드(method), 콜렉션(collection), 이벤트 리스너, css3 스타일을 구성요소로 갖는다.

3. BOM object
   자바를 가지고 웹 브라우저 자체를 컨트롤 가능하다

...이번 강의 너무 많아여...ㅠ_ㅠ 교수님 살려주세요...

21.06.06-21.06.07
중앙대학교 예술공학대학 서상현교수님의 표준웹테크놀로지 수업필기입니다.