[JS] #6-2 함수(Function) : 내장 객체(Object)

1. 객체란?

 

 객체는 특정한 기능을 제공받는 것이라 이해하면 된다.

 이것은 다른 프로그래밍 언어에서 각기 다른 이름으로 불리지만 결국 목적은 같다.

 필요한 기능을 손쉽게 사용하는 것!

 

 아래의 참조사이트를 참고하자.

 참조 사이트(객체의 개념) : https://www.w3schools.com/js/js_objects.asp

JavaScript Objects

 참조 사이트(객체의 종류) : https://www.w3schools.com/jsref/default.asp

JavaScript and HTML DOM Reference

 

 

2. 자바스크립트의 내장 객체(Object)

 

 Object는 변수와 함수로 구성이 된다.

 그리고 이 변수와 함수는 객체의 멤버이기에 멤버변수, 멤버함수라 불리기도 한다.

 

 멤버변수는 property, attribute, field, column 등등 다른 프로그램에서 같은 기능을 하는 여러 이름이 있다.

 멤버함수도 function, method 등으로 불린다.

 

 객체는

 - 객체명.멤버변수

 - 객체명.멤버함수()

 의 형태로 표현한다.

 

 지금까지 자바스크립트를 공부하며 은연중에 사용해왔던 객체를 다시 한번 되짚어보자.

 

 1) Math 객체

document.write(Math.abs(-3));
document.write(Math.PI);

 

 2) Number 객체

document.write(Number("5"));
document.write(Number("8.9"));

 

 3) Date 객체

const d=new Date();

 

 

3. 내장 객체(Object)의 종류

 

 자바 스크립트에서 사용할 수 있는 객체의 종류는 다양하다.

 그 안에서도 꼭 알아야할 객체를 위주로 알아보려 한다.

 

 1) Window 객체

 윈도우객체는 특이하게 객체명을 생략할 수 있는 객체이다.

 참조사이트 : https://www.w3schools.com/jsref/obj_window.asp

Window Object

 

 - alert();

 알림창을 띄우는 객체이다.

 window.alert(); 를 사용해도 되지만 window.를 생략해도 무방하다(이제 윈도우 생략은 그만 말해야지).

알림창? 경고창? 이 잘 출력된다.

 경고창에 문구를 출력하고 싶을 땐 alert() 안에 값을 입력하면 된다.

 역시나 문자는 " " 안에 적으면 된다.

 

 경고창에 줄바꿈을 하고 싶을 땐 명령어가 있다!

  \n이라는 명령어이다.

 사용하면 줄바꿈이 정상적으로 잘 이루어진다.

 

alert("서울\n제주\n\n부산");

 

 

 - confirm();

 confirm은 alert와 같이 웹사이트의 첫 화면에 경고창을 띄우지만 거기에 확인과 취소 버튼을 출력시킨다.

 

 

 - open(); 과 close();

 웹사이트에 새로운 창을 띄우거나 현재 창을 끌 때 사용한다.

 단 모바일 환경에서는 작동이 되지 않는다.

 

 - print();

 인쇄창을 띄운다.

 

 - setInterval(); 과 setTimeout();

 참조 사이트 : https://www.w3schools.com/jsref/met_win_settimeout.asp

Window setTimeout() Method

 이 두 함수는 주어진 시간에 따라 자동으로 함수를 호출한다.

 시간을 지정할 때는 초단위로 지정을 해준다(1 second = 1000 milliseconds).

 

 setInterval : 일정 시간마다 주기적으로 함수를 호출한다.

 setTimeout : 일정 시간이 지나는 시점에 함수를 한번만 호출한다.

 

 이 함수의 문법이 최근 달라져서 구버전과 새로운 버전 둘 다 업로드한다.

 당연히 새로운 버전을 사용하기를 권장한다.

- new version
 setInterval(함수명, 시간) : 주기적으로 함수 호출
 setTimeout(함수명, 시간) : 한번만 호출
- old version
 setInterval("함수명()", 시간)
 setTimeout("함수명()", 시간)

 

 한번 사용해보자.

function hello() {
    alert("hello");
} // hello end

// setInterval(hello, 3000); // 3초마다 주기적으로 hello 함수 호출
// setTimeout(hello, 3000); // 3초 후에 hello 함수 1번만 호출

 

 

 * 재귀적 함수 호출 관계를 이용해서 3초마다 주기적으로 hello 함수 호출하기

funtion hello() {
    setTimeout(hello, 3000);
}

 

 

 2) Screen 객체

 사용자의 device의 스크린 크기를 알 수 있는 객체이다.

 screen.width / screen.height 등으로 사용한다.

 

 3) Location 객체

 로케이션 객체는 현재 페이지에서 다른 페이지로 이동할 때 사용한다.

 로케이션은 아래와 같은 문법으로 사용한다.

// location.href="URL 또는 페이지명"
// location="URL 또는 페이지명"

 현재 페이지를 새로고침하는 것도 location에서 가능하다.

 location.reload(); 를 입력하면 현재 페이지를 새로고침한다.

 

 4) History 객체

 History 객체는 페이지를 기억했다가 뒤로, 앞으로 이동해주는 기능을 한다.

 .back은 뒤로 / .forward는 앞으로 한 페이지씩 이동시켜준다.

 그리고 .go()는 뒤의 숫자에 따라 페이지를 복수로 이동시켜준다.