JavaScript 개발자 수업 62일차(2) - Collection, Window, Screen, Location, History , Links, Images

1. Collection

2. Window

3. Screen

4. Location

5. History

6. Links

7. Images

---

1. Collection

[ 정의 ]

- JavaScript  Built-in Collection

- 브라우저가 HTML 문서를 로딩하는 과정에서 자동으로 만드는 배열

window.document.images                 // 문서 내의 모든 <img> 태그 배열
window.document.links                  // 문서 내의 모든 <a href=""> 태그 배열
window.document.anchors                // 문서 내의 모든 <a name=""> 태그 배열
window.document.forms                  // 문서 내의 모든 <form> 태그 배열
window.document.forms[index].elements  // 해당 폼 태그의 자식 태그 배열
window.document.all                    // 문서 내의 모든 name을 가지는 태그 배열

 

2. Window

- 최상위 객체

- 브라우저 창 자체를 참조하는 객체이다.

- 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다.

- window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수가 된다.

 

3. Screen

- window 객체의 자식 객체 이다.

- 유일한 객체이며, 예약어를 제공한다.

- 화면에 대한 정보를 제공한다.

console.log(window.screen.availWidth);   // 화면 너비크기?
console.log(window.screen.availHeight);  // 화면 높이크기?
console.log(screen.colorDepth);          // 몇비트 컬러인지?

--> 1536
    824
    24
    
//현재 제 PC는 크기가 125%로 되어있으므로 원래는 1920 x 1080 입니다.

 

4. Location

- window 객체의 자식 객체 이다.

- 현재 창의 URL과 관련된 정보를 제공 및 조작한다.

[ location 예제 1 ]

// 1. 읽기 기능
console.log(location.host);        // 127.0.0.1:5500
console.log(location.hostname);    // 127.0.0.1
console.log(location.port);        // 5500
console.log(location.protocol);    // http:

// 2. 페이지 이동 메소드
location.assign('http://google.com');  // 구글페이지로 이동하지만, history는 남는다. (뒤로가기 가능) 
location.replace('http://google.com'); // 구글페이지로 완전히 이동하고, history는 지워진다. (뒤로가기 불가)

// 3. 프로퍼티 (가장 많이 쓰인다 ****)
locatio.href = "http://naver.com"; // 네이버로 이동

// 4. 페이지 새로고침
location.reload();

// 페이지 현재창, 새창으로 열기
location.href = URL;       // 현재창에서 이동하기
window.open(URL, name, '') // 새창으로 이동하기

 

[ location 예제 2 ]

window.onkeydown = function() {
    if(event.keyCode == 70) {
        location.href = "http://google.com";
    } else if (event.keyCode == 65) {
        location.href = "http://amazon.com";
    } else if (event.keyCode == 67) {
        location.href = "http://coupang.com";
    } else if (event.keyCode == 68) {
        location.href = "http://daum.net";
    }
};


--> 웹 페이지 내에서 
    'g'를 입력하면 구글,
    'a'를 입력하면 아마존,
    'c'를 입력하면 쿠팡,
    'd'를 입력하면 다음 웹 페이지로 이동한다.
    

 

5. Histroy

- window 객체의 자식 객체 이다.

- 브라우저의 방문 기록을 탐색한다.

- 페이지 history 이동 메소드

history.go();      // 이전 페이지
history.back();    // 이전 페이지
history.forward(); // 다음 페이지


history.go(-2);    // 2칸 뒤로 가기
history.go(1);     // 1칸 앞으로 가기
history.go(2);     // 2칸 앞으로 가기

 

6. Links

[ <a> 태그 조작 ]

- 자체 조작 X

- 속성 조작 O

- PCDATA 조작 O

[ 버튼을 클릭하여 다른 웹 페이지로 이동하기 예제 ]

See the Pen link 예제 by yhyuk (@yhyuk) on CodePen.

 

 

 

7. Images

- window의 document의 자식 객체 이다.

- 이미지를 조작 할 수 있다.

[ images 예제 1 - onclick ]

See the Pen by yhyuk (@yhyuk) on CodePen.

 

 

 

 

[ images 예제 2 - onclick ]

See the Pen images 예제2 by yhyuk (@yhyuk) on CodePen.

 

 

 

 

[ images 예제 3 - 롤 오버 이미지 (onmouseoever, onmouseout) ]

See the Pen images 예제3 by yhyuk (@yhyuk) on CodePen.

 

 

---

MEMO>

# 주말동안 정리하는데 시간을 많이 투자할 거같다. 아직까지 머릿속에 정확히 개념이 안잡히는데 그 부분도 복습하면서 보완을 해야겠다. 

# 포트폴리오도 부트스트랩 템플릿 찾아서 해야하는데.......... 점점.. 수업이 끝나면 나도 모르게 나태해진거같다. 수업 절반도 안남았으니 눈 앞에 할 것들에 집중하자!