Do it! 자바스크립트

6강 여러 자료를 한꺼번에 담는 객체

1. 객체란?

하나의 변수에 여러 정보를 저장할 수 있는 객체

• 자바스크립트에서 객체(Object)

내장 객체
자바스크립트 프로그래밍을 할 때 자주 사용하는 요소를 자바스크립트 안에 미리 객체로 정의 되있는데, 이런 객체가 내장 객체
ex) Number, Boolean, Array, Math

문서 객체 모델(DOM)
객체를 사용해 웹 문서를 관리하는 방식, 문서 객체 모델
ex) Document객체, Image객체

브라우저 객체 모델(BOM)
웹 브라우저의 주소 표시줄이나 창 크기 등 웹 브라우저 정보를 객체로 다루는 객체
ex) Navigator객체, History객체, Location객체, Screen객체

사용자 정의 객체
사용자가 필요할 때마다 자신의 객체를 정의해서 사용하는 객체

• 객체의 속성과 메서드 알아보기

▪ 객체에서 값을 담고 있는 정보, 속성(Property)

navigator.vendor  // Navigator의 속성 확인 // 객체뒤에 . 을찍고 속성값을 입력
'Google Inc.'

▪ 객체가 어떻게 동작할지를 선언해 놓은 함수, 메서드(Method)
▪ window객체 안에 여러 메서드가 이미 있음
▪ 계속 사용했던 alert( )이 window객체의 메서드

• 객체의 프로토타입과 인스턴스 소개
  ▪ Image객체는 모든 웹 이미지가 공통으로 가지는 속성과 기능을 모아 놓은 것, 웹 이미지를 위한 기본 틀
  이런 틀을 '프로토타입(Prototype)'
  ▪ 이런 프로토타입을 사용해 만들어낸 객체는 '인스턴트(Instance)''

• 객체의 인스턴트 만들기

var now = new Date( )  // Date 객체의 인스턴트를 만들고 , now 변수에 저장
now
Sat May 14 2022 02:05:50 GMT+0900 (한국 표준시)

now.toLocaleDateString()
'2022. 5. 14.'

• 내장 객체로 무작위 수 프로그램 만들기

Math.random()*100+1
6.815814776319317
Math.floor(Math.random()*100+1)
38

2. 사용자 정의 객체 만들기

• 리터럴 표기법을 사용해 객체를 만드는 방법
  ▪ 리터럴(Literal)이란? 프로그래밍에서 자료를 표기하는 방식
  리터럴을 사용한다는것은 변수를 선언하면서 동시에 값을 지정해 주는 표기 방식

var a = 10; // 변수를 선언하면서 동시의 값을 지정하는 것

var book = {   				// book은 객체
	title: "자바스크립트",
	author: "고쌤", 		   // author는 속성이름, 고쌤은 속성값
	pages: 500,
	price: 15000,
	info: function(){  	   // info는 함수이름
		alert(this.title + "책의 분량은 " + this.pages + "쪽입니다.");  // function은 함수
	}
}

book.field = "IT"
'IT'                      // 정보를 추가 하고  싶을 때

book
{title: '자바스크립트', author: '고쌤', pages: 500, price: 15000, info: ƒ, …}
author: "고쌤"
field: "IT"
info: ƒ ()
pages: 500
price: 15000
title: "자바스크립트"
[[Prototype]]: Object

• 리터럴 표기법으로 장난감 정보 객체 만들기

var toyRobot = {
    productId: "123-12",
    name: "Robot",
    price: "25000",
    madeIn: "Korea",
    quantity: 10,
    showStock: function(){
        document.querySelector('#display').innerHTML = this.name + " 제품은 " + this.quantity + "개 남아있습니다.";
    }
};

toyRobot.showStock();

• 생성자 함수를 사용해 객체를 만드는 방법
  생성자 함수란? 객체를 만들어 내는 함수

function Book(author, pages, price, title) {
	this.author = author;
	this.pages = pages;
	this.price = price;
	this.title = title;
}

jsBook = new Book("홍길동", 500, 15000, "자바스크립트")    // 인스턴트 만들기
Book {author: '홍길동', pages: 500, price: 15000, title: '자바스크립트'}
author: "홍길동"
pages: 500
price: 15000
title: "자바스크립트"
[[Prototype]]: Object

jsBook.title
'자바스크립트'

• 생성자 함수로 도서 목록 객체 만들기

function Book(title, author, volume, price){
    this.title = title;
    this.author = author;
    this.volume = volume;
    this.price = price;
}
var html = new Book ('웹 표준의 정석','Ko','608','28,000');
var youtube = new Book('유튜브 영상 만들기','Kim','368','16,000');
var python = new Book('점프 투 파이썬','Park','352','18,000');
var bookList = [html,youtube,python];

document.write("<h1>책 제목으로 살펴보기"+"</h1>");
for(var i = 0; i<bookList.length; i++){
    document.write("<p>"+bookList[i].title+"</p>");
}

3. Date 객체를 활용해 기념일 계산기 만들기

• 현재 날짜와 시간 정보 가져오기

var now = new Date()
now
Mon May 16 2022 15:28:16 GMT+0900 (한국 표준시)
now.getDate()
16
now.getDay()
1                          // 0부터 일요일, 1은 월요일
now.getTime()
1652682496866
now.setDate(now.getDate() + 50 )          // 오늘 날짜를 가져온 다음,50을 더한 것을 다시 날짜로 입력
1657002496866                             // 결괏값이 밀리초로 표시
now 
Tue Jul 05 2022 15:28:16 GMT+0900 (한국 표준시)

• 기념일 계산 프로그램 만들기 - 며칠 만났는지 알아보기

var now = new Date();                   // 오늘 날짜
var firstDay = new Date("2018-03-23");  // 처음 만난 날짜 정보를 객체로 만듬
var toNow = now.getTime();              // 오늘 날짜를 밀리초로 바꿈
var toFirst = firstDay.getTime();       // 처음 만난 날짜를 밀리초로 바꿈
var passTime = toNow - toFirst;         // 처음 만난 날짜와 오늘 사이의 값
var passedDay = Math.round(passTime/(1000*60*60*24));    // 밀리초를 날짜 수로 변환 후 반올림
document.querySelector('#accent').innerHTML = passedDay + "일";  // #accent 영역에 표시

• 기념일 계산 프로그램 만들기 - 100일 후 날짜 계산하기

var future = toFirst + 100 * (1000* 60 * 60 * 24);  // 처음 만난 날에 100일 더하기
var someday = new Date(future);        // 100일을 더한 future 값에 date 객체의 인스턴스 만들기  
var year = someday.getFullYear();      // 연도가져오기
var month = someday.getMonth();        // 월 가져오기
var date = someday.getDate();          // 일 가져오기
document.querySelector("#date100").innerText = year + "년 " + month + "월 " + date + "일";

future = toFirst + 200 * (1000*60*60*24);    // 처음 만난 날에 200일 더하기
someday = new Date(future);
year = someday.getFullYear();
month = someday.getMonth();
date = someday.getDate();
document.querySelector("#date200").innerText = year + "년 " + month + "월 " + date + "일";

• 기념일 계산 프로그램 만들기 - calcDate( ) 함수 선언하기

calcDate(100);
calcDate(200);
calcDate(365);
calcDate(500);

function calcDate(days) {         // calcDate() 함수를 days 매개변수로 해서 선언
   var future = toFirst + days * (1000* 60 * 60 * 24);
   var someday = new Date(future);
   var year = someday.getFullYear();
   var month = someday.getMonth();
   var date = someday.getDate();
   document.querySelector("#date" + days).innerText = year + "년 " + month + "월 " + date + "일";
}

// 함수 선언 소스 앞에 함수 실행 소수를 추가!

---

💬하루 되돌아보기
오늘은 갑자기 알바를 하고 와서 할 수있는 부분까지 최대한 하고 잔다..
7강까지 하고 싶었지만.. 6강도 다 못 끝냈다ㅠㅠ

객체는 알듯말듯하다.
일단 저 기념일 계산기를 만들어야 확실히 이해 할거 같기도 한데..

++ 기념일 계산기를 만들었다.
밀리초는 개념자체는 알겠는데 큰 숫자덩어리라 조금 아리송하다.
다시 날짜로 바꿔주는 부분이 제일 헷갈리는 거같다.
함수 선언해서 코드가 간결해지는 부분이 제일 뿌듯하다고나 할까..ㅎㅎ