자바스크립트 웹 개발 관련 정리

1.종류

내장 객체 - 사용자가 미리 작성

Date, String, Array, document ....

사용자 정의 객체 - 사용자가 생성자를 정의

• 객체 상수(Object literal)로 부터 객체 생성

간단하지만 객체를 하나만 생성할 수 있다. 추가로 객체를 생성하려면 동일한 코드반복, 싱글톤

var myCar = {
    model: "",
    speed: 0,
    brake: function () {this.speed -=10;},
    accel: function () {this.speed += 10;)
};

myCar.speed = 10;
myCar.brake();

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

사용자 정의 객체 - 생성자 (객체를 초기화) 필요. 객체 생성 연산자는 new.

객체 멤버: 객체 안의 속성과 메서드

function Car(model, speed) {
    this.model = model;
    this.speed = speed;

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

var myCar = new Car("520d", 60);
myCar.model = "sonata";
myCar.brake();

// 기존의 객체에 속성과 메서드 추가
myCar.turbo = true;
myCar.showModel = function() {
    alert();
}

개별적인 객체만 생성. 각 객체는 다른 객체와 완전히 별도로 취급. 하나의 객체가 가지고 있는 속성과 메서드는 다른 객체가 전혀 이용 못함.

2. 프로토 타입

• 정의: 여러 객체가 공유하는 메서드를 정의

function Point(xpos, ypos) {
    this.x = xpos;
    this.y = ypos;
}

// getDistance 메서드는 prototype 객체 안에 정의
Point.prototype.getDistance = function() {
    return Math.sqrt(this.x*this.x + this.y * this.y);
};

var p1 = new Point(10, 20);
var d1 = p1.getDistance();
var p2 = new Point(20,30);
var d2 = p2.getDistance();

• 프로토타입 체인

1. 객체 안에 속성이나 메서드가 정의되어 있는지 체크
2. 객체 안에 정의되어 있지 않으면 객체의 prototype이 속성이나 메서드를 가지고 있는지 체크
3. 워하는 속성/메서드를 찾을 때까지 프로토타입 체인을 따라서 올라간다.
4. 객체

• Object 객체

최상위 객체

하위 객체에서 재정의해서 사용 가능

constructor
valueOf() - 객체를 숫자로 변환
toString() - 객체를 문자열로 변환
hasOwnProperty()
isPrototypeOf()

• 문자열 리터럴 vs 문자열 객체

문자열 리터럴: "" 생성

문자열 객체: new 생성

→ String 객체가 함수로 전달될 때는 값만 전달. 즉, 함수 안에서 전달받은 문자열을 변경하더라도 원본은 변경되지 않는다.

• Array 객체

// 배열 크기 자동 조절
// 여러 자료형 저장 가능
// 배열 크기보다 큰 인덱스 값으로 배열 요소 접근 시 undefined 값 반환
var myArr = new Array();

// concat(val1[val2[value...]]) - 배열에 연결
var joined = x.concat(y);

// indexOf(searchStr[,startIndex])
fruits.indexOf("banana");

// push(value), pop() - stack

// shift() - 배열 첫번째 요소 반환, unshift() - queue

// sort()
// 사용자 기준 정렬
myArr.sort(function(a,b) { return a-b });

// Array.slice([begin[,end]]) - 배열의 일부를 복사해 새로운 배열로 반환. 시작인덱스 없으면 0

// join(delimetere) - 배열ㄹ의 요소들을 하나의 문자열로 출력 -> 배열을 서버로 보낼 때 유용
var fruits = ["apple", "banana"];
var s = fruits.join("+");

=> apple+banana

// filter() - 어떤 조건에 부합하는 요소만을 선택하여 새로운 배열로 만들어서 반환
var numbers = [10,20,30]
function isBigEnough(element, idx, arr) {
    return (element >=20);
}

var filtered = numbers.filter(isBigEnough);

4. 예외처리

/*
try {}
catch (변수) {]
*/

// throw - 기준을 정하고 이 기준에 맞지 않으면 사용자에게 경고 메시지

5. DOM

HTML 문서의 계층적인 구조를 트리로 표현. HTML 문서를 객체로 표현.

→DOM 트리 순회하며 내용, 속성, CSS 동적으로 변경

→ 이벤트 반응

BOM(Browser Object Model) > DOM

BOM 구조
                  **window**
**document** frames[] history(방문한 url저장) location(현재url) navigator(브라우저 정보) screen(사용자화면)
**forms[]
anchors[]
layers[]
images[]**

window 객체 → 최상위 노드. 브라우저 그 자체를 표현. 브라우저 내에 모든 것이 객체로 표현되어 자바스크립트에서는 객체의 속성을 변경하고 객체의 메서드를 호출해주면 웹 브라우저에 모든 것을 제어 가능

• 노드 종류

DOCUMENT_NODE - DOM 트리의 루트 노드. HTML 문서. window.document = DOCUMENT_NODE 타입의 노드

ELEMENT_NODE - HTML 요소를 나타내는 노드., ,

• HTML요소 찾기

1.id로 찾기

// 요소가 발견되면 getElementById()는 요소를 객체 형태로 반환. 요소 없으면 null
// 요소가 가지고 있는 내용을 반환하는 것이 아니라 요소 자체를 반환
var x = document.getElementById("main");

// 요소 내용을 추출하려면 innerHTML 사용
// id가 main인 요소의 내용을 출력
alert(document.getElementById("main").innerHTML);

// 속성 value 추출
function {
    var obj = document.getElementById("target");
    alert(obj.value);
}

// 입력 양식 찾기
// document 객체 안에 forms라는 배열 객체

<form> // document.forms[0]
    <input type="text" value=''> // document.forms[0].elements[0]
    <input type="text" value=''> // document.forms[0].elements[1]
</form>

// 배열의 요소는 이름으로 찾을 수 있다
// 연관 배열로 '키'와 '값'의 형태로 저장
<form name="myform"> // document.myform
    <input type="text" id="target1" name="text1"> // document.myform.text1
    <input type="text" id="target2" name="text2"> // document.myform.text2
    <input type="submit">
</form>

function {
    var obj = document.myform.text1;
    alert(obj.value);
}

2.태그 이름으로 찾기

// getElementByTagName()
// 태그의 이름을 인수로 받아서 이 태그를 사용하는 모든 요소를 배열에 넣어서 반환
var eleArr = document.getElementsByTagName("div"); // 문서안 모든 div ㅌ태그를 찾아 반환

var list = document.getElementsByTagName('ul)[0]; // 문서 내의 첫 번째 <ul> 요소 찾음
var allItems = list.getElementByTagName('li'); // list 안에서, 첫번째 ul안에 모든 li 반환

// 첫 번째 자식 노드의 data 필드를 출력. 첫 번째 자식노드는 텍스트 데이터를 가지고 있는 노드
// 어떤 노드가 텍스트 데이터를 가지고 있으면, 텍스트 데이터는 첫 번째 자식 노드로 저장
// 텍스트 데이터는 별도의 자식 노드에 저장
for (var i=0, len = allItems.length; i<len; i++) {
    alert(allItems[i].firstChild.data);
}

3. form 데이터 접근

• getElementById() 사용

• name 찾기 → form["name"]

• DOM 트리 순회

자식 노드와 부모 노드 관계를 이용해 한 노드씩 방문하는 방법

childNodes[], nextSibling[], parentNode[]

childNodes - 한 요소의 모든 자식 노드에 접근. 배열 반환

firstChild - 'childNodes' 배열의 첫번째 자식노드 반환. childNodes[0]

lastChild - 마지막 자식노드 반환. childNodes[childNodes.length-1]

parentNode - 현재 노드의 부모노드 반환

nextSibling - 현재 노드의 다음 형제 노드 반환

previousSibling - 현재 노드의 이전 형제 노드 반환

• HTML 변경하기

HTML 문서가 직접 변경되는 것이 아니라 DOM만 변경된다

1. 요소의 내용 변경

• innerHTML 속성 사용 - innerHTML의 속성은 (텍스트) 또는 (HTML + 텍스트)

시작 태그와 종료 태그 사이의 내용을 변경하려면 innerHTML 속성에 원하는 내용을 대입

function get() {
    var val = document.getElementById("ex").innerHTML;
    alert(val);
}

function set(v) {
    document.getElementById("ex").innerHTML = v;
}

<div id="ex">Here</div>
<a href="#" onclick="get()">first</a><br/>
<a href="#" onclick="set('after')>second</a>

2. 요소의 속성 변경

<img id="image" src="pome.png">
<script>
function changeImage() {
    document.getElementById("image").src = "poodle.png";
</script>
<input type="button" onclick="changeImage()" value="Click" />

3. 요소의 스타일 변경

<p id="p1">Para</p>
function changeStyle() {
    document.getElementById("p1").style.color = "red";
    document.getElementById("p1").style.fontFamily= "Century";
    document.getElementById("p1").style.fontStyle= "italic";
}
<input type="button" onclick="changeStyle()" value="Click"/>

<input type="button" value="Hide" onclick="document.getElementById('heading').style.visibility = 'hidden'"/>
<input type="button" value="Show" onclick="document.getElementById('heading').style.visibility = 'visible'" />

• DOM 노드 삭제, 추가

1. HTML 요소 생성

1) 추가하기 원하는 노드 생성

2) 문서 내에서 추가할 위치 찾음

3) 새로운 노드를 기존의 노드에 연결

var node = document.createTextNode("Dynamic");
var parent = document.getElementById("target");
parent.appendChild(node); // 노드를 다른 노드에 자식노드로 추가

function addtext(t) {
    if(document.createTextNode) {
        var node = document.createTextNode(t);
        document.getElementById("target").appendChild(node);
    }
}

// 새로운 노드는 <div> 안에서 종료 태그 바로 앞에 추가
<div id="target" onclick="addtext('동적으로 텍스트 추가')" style="font: 20px bold;">
Click Here
</div>

// <div> 태그 바로 뒤에 첫번째 자식 노드를 추가
insertBefore(node, document.getElementById('target').firstChild);

2. HTML 요소 삭제

부모 노드를 알아야됨. 부모노드도 id 알면 찾을 수 있음

크롬, 오페라에서 정상 동작

function removeNode() {
    var parent = document.getElementById("target");
    var child = document.getElementById("p1");
    // 부모 노드를 통해 자식 노드 삭제
    parent.removeChild(child);
}

<div id="target">
        <p id="p1"></p>
</div>
<button onclick="removeNode()">Click</button>

• window 객체

open(), close()

// window.open(URL, name, specs, replace)
// name: 타겟 지정 or 윈도우 이름 - _blank, _parent, _self, _top, name
// specs: height, width -> size
// replace: 히스토리 리스트에서 새로운 엔트리인지 현재 엔트리를 대체하는지 여부
// true: replace, false: create
<form>
    <input type="button" value="google" onclick="window.open('http://www.google.com',
        '_blank', 'width=300, height=300', true)">
</form>

setTimeout(), setInterval()

일정한 시간이 지난 후, 인수로 전달된 함수를 딱 한 번만 호출.

// setTimeout(code, millisec)
// code: 호출되는 함수 이름
// millisec: 호출 전 흘러야 하는 시간

// setInterval() - 일정한 시간마다 주기적으로 함수를 호출

moveTo(), moveBy() - 윈도우 이동

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