[SK고용디딤돌] 자바스크립트 (6/7) - 2주차

/** 복습 **/

 

● 함수 생성 3가지 방법

 

[1] function Parent() {} → function 문

 

[2] var Parent = function(){}; → function literal 자바스크립트에는 생성자 함수가 없다. 일반함수를 생성자로 사용자가 임의로 사용

 

[3] var Parent = new Function(); → Function 함수

 

(예)

var Parent2 = new Parent();

Parent.prototype === Parent2.__proto__

 

● 생성자 체이닝으로 상속 구현하기

 

function Parent() { } function Child() { } function Parent() { } function Child() { Parent.apply(this,[ ]); // 생성자 체이닝(constructor chaining) , Parent() scope를 하나 생성하는 것 }   // Child.prototype.__proto__ = Parent.prototype // __proto__는 표준이 아님   Child.prototype = new Parent(); Child.prototype. constructor = Child;

 

 function Parent() { }

 function Child() { }

 

function Parent() { }

function Child() {

Parent.apply(this,[ ]); // 생성자 체이닝(constructor chaining) , Parent() scope를 하나 생성하는 것

}

 

// Child.prototype.__proto__ = Parent.prototype // __proto__는 표준이 아님

 

Child.prototype = new Parent();

 

Child.prototype. constructor = Child;

 

 

[ 최종 구조 ]

 

● 슈퍼컨스터럭터로 상속 구현하기

 

function Parent(){} function Child(){ this.superconstructor(); // 객체의 메소드가 됨 Parent.apply(this,[ ]); 와 동일한 것임) } Child.prototype = new Parent(); Child.prototype.constructor = Child; Child.prototype.superconstructor = Parent; var obj = new Child();

 

 

 

※ 생성자 체이닝 vs 슈퍼컨스트럭터 둘 중에 하나만 써서 상속만 구현하면 됨

- 일반함수의 this는 window

- 생성자함수의 this는 new에 의해 할당된 객체 // 자바스크립트에서는 일반함수와 생성자함수 구별하지 않고 임의로 구별한다.

- 함수중에 객체의 메소드는 그 객체가 된다.    

 

 

/** 7장 내장객체 **/

 

 

● Array

- new 연산자와 생성자 함수 호출 이용해 Array 객체를 생성할 수 있지만 배열 리터럴로도 많이 사용함

- 동적배열

 

var arr = [1,2,3,4]

arr.push(5; 배열의 끝의 원소를 꺼내 배열에서 삭제

arr.pop(); 배열의 끝에 원소를 추가

 

shift <- 배열 처음에서 원소를 꺼내 삭제

unshift -> 배열 처음에 원소들을 추가

0	1	2	3
1	2	4	5

 

<- push 5 

-> pop

 

Stack - LIFO

Queue - FIFO

 

arr.splice(start, cnt [,rep [,...]]); -> 배열 재정렬 시켜줌, start 인덱스에서 cnt 개의 원소를 rep,...로 치환

arr.([func])

- 기본 오름차순은으로 정렬

- 두 인자가 같을 때 0, 첫번째 인자가 크면 1, 두번째 인자가 크면 -1을 반환하는 콜백함수

[배열 sort 예제]

 

 

 

sort 유니코드 기반.

 

원래 코드로 할려면 우리들의 콜백으로 해야 한다.

 

이름 오름/내림, 가격 오름/내림

 

 

 

 

 

[객체를 통해서 sorting 하기]

var objArr = [];
objArr.push({name: "iphone 6", price: 900000});
objArr.push({name: "galaxy s7", price: 1000000});
objArr.push({name: "ipad air2", price: 800000});
objArr.push({name: "new galaxy tab", price: 700000});

function objSorting(paramObj) {
    return function (obj1, obj2) {
        var result = -1;
        if (obj1[paramObj.propName] === obj2[paramObj.propName])
            result = 0;
        if (obj1[paramObj.propName] > obj2[paramObj.propName] && paramObj.asc == true)
            result = (paramObj.asc === true) ? 1 : -1;
        else
            result = (paramObj.asc === true) ? -1 : 1;
        return result;
    };
}

objArr.sort(objSorting({propName: "name", asc: true}));

 

[객체 찾기]

 

 

점쓰는것과 연관배열 표기법

식별자 첫글자는 a-zA-Z_$만 됨 이후는 0-9도 됨

paramObj.prop

 

- 참고 그림 -

 

 

 

● String

- 리터럴로 표현하는 것이 일반적

substr(start [,cnt]) 문자열에서 start 인덱스에서 cnt개의 문자를 반환.

 

● Number

- 리터럴로 표현하는 것이 일반적

toFixed 소수점 이하 자리수 n에 맞춰 변환(자리수가 부족한 경우 0으로 채움)

 

● Math

Math 객체는 수학의 각종 연산을 제공하는 객체로 new 연산자를 통해 객체를 만들 수 없습니다.

 

● Date                                                                                                                                                                                                                                                                                                                                                                                                                          

- Date 객체는 리터럴 표현이 존재하지 않으며, new 연산자와 생성자 호출을 통해 객체를 생성해야 함

- Date 객체는 1970년 1월 1일 0시 0분 0초를 기준으로 시각을 관리, Date 객체의 월 지정 값은 0~11임. (Epoch Time)

 

var d = new Date();

var d = new Date('2012/12/10');

var d = new Date(2012, 11, 10, 22, 10, 33, 500); // 년, 월(주의), 일, 시, 분, 초, 밀리초 - 월은 0~11 임.

 

서버개발은 UTC+0 시간을 기준으로한다. -> 세계 협정시 Greenwich Mean Time GMT +9에 우리나라가 존재

 

WB <-> WS

XML은 메타정보가 많다. (과자 질소)

ebXML 기업과 기업간에

 

JSON = JavaScript Object Notation 자바스크립트 객체 표기법

 

/** 8장 **/

 

 

● 웹 브라우저 객체

DOM : Document Object Model

ㄴ 레벨0

ㄴ 레벨1

ㄴ 레빌2

HTML DOM

 

[DOM HTML API를 이용한 HTML 문서 요소 접근 및 조작]

 

 

 

[문서 내 요소 찾기]

- Document.getElementByTagName(tag)

- Document.getElementById(id)

- HTMLDocument.getElementsByName(name)

 

[문서 수정하기]

- CharacterData.data

- Node.appendChild()

- Node.removeChild()

 

[문서 추가하기]

- Document.createelement()

- Document.createTextNode()

 

* HTML5 API

- QuerySelector( ◎ ) -> css3 selector

- QuerySelectorAll( ◎ ) -> css selector

 

● 발생한 사실을 설명하는 객체

 

[이벤트와 이벤트 핸들러]

<button onclick="function(){...}"> </button> // 이렇게 안씀

<button id="btn1"></button>

 

var button = new HTMLButtonElement()

button.onclick = function(event) {

  console.log(". . .");

}

 

var button = document.QuerySelector("#btn1"); // id를 써준다.html 버튼 element

<img src = " ">

<script src = " "

 

load이벤트는 초기화 작업하는데 적합, 모든 자원이 도착하면 딱 한번 발생,.

[추천서적]

자바스크립트 완벽가이드 (코뿔소)