객체란?
-'복합' 자료형이라고 불린다
-객체 안에 여러 자료형 포함 된다 : 숫자, 문자열 등
-객체도 자료형이다 = 자료를 저장하고 처리하는 기본 단위
-하나의 변수에 다양한 정보를 담기 위해 사용
-사용 ex. 회원 정보 : 이름, 아이디, 비번, 생년월일
-객체(Object) : 자바스크립트 프로그램에서 인식할 수 있는 모든 대상 가리킴
-자바스크립트에서는 웹 문서나 웹 브라우저와 관련된 것들을 객체로 인식
객체 종류
내장 객체
-자주 사용하는 요소는 미리 객체로 정의되어 있음
ex. Date 객체, Number, Boolean, Array, Math
문서 객체 모델(DOM)
-객체를 사용해 웹 문서를 관리하는 방식
-이미지, 링크, 텍스트 필드 등도 모두 각각 객체로 만들어져 있음
ex. Document객체, Image객체
브라우저 객체 모델(BOM)
-웹 브라우저 정보를 객체로 다룸 (주소 표시줄, 창 크기 등)
ex. Navigator 객체, History, Location, Screen
사용자 정의 객체
-사용자가 필요할 때 직접 정의
객체 속성
-속성(Property) : 값을 담고 있는 정보
-속성 값을 가져올 때는 객체 이름 뒤에 마침표(.)를 찍고 속성이름 적는다
ex. navigator.vender (vender가 속성이다)
객체 매서드
-매서드(Method) : 객체가 어떻게 동작할지 선언한 함수 | 객체 안에 정의된 함수 | 매서드 = 함수
ex. 콘솔창에 window 치면 Window라고 나온다.(첫글자 대문자 = 객체) ▶표시를 누르면 f(함수)가 붙은 요소 alert, blur 등이 나온다. 이것이 메서드!!
-window 객체의 함수는 함수이름만 사용해서 실행 가능! ex. alert("내용")
객체의 프로토타입
-프로토타입(Prototype) : 웹의 기본틀
ex. Image객체는 모든 웹 이미지가 공통으로 가진 속성, 기능 모아 놓은 것
객체의 인스턴스
-인스턴스(Instance) : 복제품 | 프로토타입을 사용해 만들어낸 객체
ex. 인스턴스로 3개 찍어내면, Image객체의 속성과 함수를 그대로 사용 가능
인스턴스 만들기
-new 예약어 + 프로토타입 객체 이름 + ( )
ex. 변수값이 now인 Date 객체 인스턴스 : now는 Date에서 정의한 속성, 함수 모두 사용 가능!
var now = new Date()
무작위 수 프로그램 by 내장 함수
-Math 객체 : 삼각 함수나 로그 함수를 비롯한 수학 연산 함수를 가지고 있는 내장 객체
1. 객체 속성과 함수를 정리해 놓은 사이트
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects
표준 내장 객체
이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다.
developer.mozilla.org
2. Math의 주요 메서드
| abs(x) | 절댓값 |
| cbrt(x) | 세제곱근 |
| ceil(x) | 올림(소수점 이하) |
| floor(x) | 내림 |
| random() | 무작위 수(0~1 사이) |
| round(x) | 반올림 |
3. 콘솔 창에 Math.random() 입력하면 때마다 다른 숫자 나온다
-↑버튼 : 바로 전에 입력한 소스 나온다(다시 입력x)
4. 1~100 숫자 중 무작위 수
기본 random값 x 100 (0.00~99.99까지 나옴)
+1(1.00~100.99까지 나옴)
소숫점 이하 버림 = Math.floor
= Math.floor(Math.random() * 100 +1)
1~50 숫자 중 무작위 수 = Math.floor(Math.random() * 50 +1) : 50만 바뀜
5. Math객체는 인스턴스 없다.
-new 예약어X
-객체이름 뒤에 바로 속성, 함수 사용하면 됨
사용자 정의 객체
-방법 : 객체 리터럴, 생성자 함수 이용
리터럴 표기법 - 객체 만들기
-리터럴(Literal) : 프로그래밍에서 자료 표시 방식, 변수 선언 동시에 값 지정하는 표기 방식
var a = 10;
-객체 리터럴 표기법 : 객체 선언 동시에 값 지정
-중괄호 안에 속성 이름: 값 쌍으로 지정
-여러개일 경우 쉼표(,) 넣어 구분
-함수 이름: function(){...} 쌍으로 지정
-객체를 정의해 변수에 할당할 때는 닫는 중괄호 다음에 세미콜론 ; 붙여준다
-속성 값 가져오는 법= 같다
ex. book.title | book.info()
-새로운 속성 추가
객체 속성에 원하는 값만 넣으면 된다
ex. book.field = "IT"
장난감 정보 객체 만들기 by 리터럴 표기법
-각 객체를 따로 정의하는 것이 편할 때(= 공통으로 들어가는 속성, 함수 별로 없을 때) 리터럴 표기법 사용한다
1. toyRobot 객체 선언(5개의 속성, 1개의 함수 있음)
-showStock()함수 = 재고를 화면에 표시
-toyRobot 객체 속성 값 사용하려면 this 예약어와 함께 저장
--this = 현재 객체 = toyRobot객체
생성자 함수 - 객체 만들기
-항상 필요한 속성, 함수는 틀처럼 미리 만든다
-필요할 때마다 복제한 인스턴스 만든다
-이때 생성자 함수 사용해서 객체 만든다
-생성자 함수 : 객체를 만들어 내는 함수
-function 예약어를 사용해 선언
-함수 안에서 속성, 함수 정의 : this 예약어 + 마침표(.) + 속성 이름
-객체 인스턴스 만든다
도서 목록 객체 만들기 by 생성자 함수
-책마다 제목, 저자, 분야, 가격 등 포함해야하는 정보가 많다
-하나에 변수에 포함할 정보가 많을 경우 > 객체 형태로 저장하는 것이 좋다
-Book 객체를 사용해 정보 저장, 가져오기
1. 생성자 함수를 이용해 Book객체 만든다.
-기본틀 : function Book(){...} = Book 객체 생성자 (객체 이름은 첫글자 대문자)
-함수 안 속성 정의
2. 인스턴스 만들기
-Book 매개 변수에 넣을 값도 함께 지정한다
-html객체, youtube객체, python객체 만든다
3. 책 제목 표시하기
-배열로 작성한다. (배열도 하나의 변수에 여러값 저장하는 복합 자료임)
-bookList 배열 만들기 > html, youtube, python 객체 저장하기
-콘솔 창에 bookList 입력
> (3) : 3개의 방이 있다, [Book, Book, Book] : 배열의 각 방에 Book 객체가 각각 저장되어 있다.
bookList에는 0~2까지 모두 3개의 방이 있다. 순서대로 html, youtube, python 객체이다. (담긴 속성도 나온다.)
4. bookList 배열에 저장된 도서 객체에서 책 제목만 골라서 표시
-for문 사용
- i : 방 번호
- bookList.length : 배열의 방 개수
5. 객체를 사용하면 하나에 변수에 여러 정보를 묶어서 관리, 원하는 정보만 골라서 활용 가능
기념일 계산기 만들기 by Date 객체
Date 객체
-날짜, 시간, 특정 날짜나 시간까지 얼마나 남았는지 알 수 있다.
현재 날짜 정보를 가지는 Date 객체 만들기
new Date( )
특정 날짜나 시간 정보를 가지는 Date 객체 만들기
-괄호 안에 날짜 정보 입력
-입력 안 한 값은 기본값 : 시간=오전9시, 날짜=1일
-시간 정보 입력하려면 대문자T추가한 후 입력
new Date("2018-02-25T18:00:00")
-UTC : 국제 표준시 : 맨끝에 Z 붙인다 > 한국 시간에 9시간 더해진다
Date 객체의 주요 함수
-get 가져오다
-set 설정하다
날짜/시간 정보 가져오는 함수
| getFullYear() | 연도 정보 | 4자리 표시 |
| getMonth() | 월 정보 | 0~11로 표시됨 | 0이 1월 |
| getDate() | 일 정보 |
| getDay() | 요일 정보 | 0~6로 표시됨 | 0이 일요일 |
| getTime() | 밀리초로 표시 | 1970년 1월 1일 자정 이후 시간 |
| getHours() | 시 표시 | 0~23 |
| getMinutes() | 분 표시 | 0~59 |
| getSeconds() | 초 표시 | 0~59 |
| getMilliseconds() | 밀리초 표시 | 0~999 | 1/1000초 |
날짜/시간 정보 설정하는 함수
| setFullYear() | 연도 | 4자리 설정 |
| setMonth() | 월 | 0~11로 표시됨 | 0이 1월 |
| setDate() | 일 | 1~31 |
| setTime() | 밀리초 설정 | 1970년 1월 1일 자정 이후 시간 |
| setHours() | 시 설정 | 0~23 |
| setMinutes() | 분 설정 | 0~59 |
| setSeconds() | 초 설정 | 0~59 |
| setMilliseconds() | 밀리초 설정 | 0~999 |
현재 날짜와 시간 정보 가져오기
-콘솔
-getDate(), getDay(), getTime() 함수 사용
1. Date 객체 인스턴스 만들고 저장한다.
var now = new Date()
2. 날짜 정보만 가져온다.
now.getDate()
10
3. 요일 정보만 가져온다.
now.getDay()
4
4. now의 시간 정보, 특정 날짜로부터 며칠 후 혹은 며칠 전처럼 시간의 흐름을 계산할 때 편리함
now.getTime()
1543439203
5. 오늘 날짜로부터 50일 지난 후의 날짜 계산
now.getDate() 로 오늘 날짜 알아내고
> 그 값에 50 더한다
> now.setDate() 로 날짜 정보로 바꾼다.
>시간의 흐름을 계산할 때 밀리초를 사용한다
now.setDate( now.getDate() + 50 )
1532442532434
now
Tue Dec 25 2018 13:58:45
기념일 계산 프로그램 - 며칠 만났는지 알아보기
1. html 파일에서 웹 브라우저에서 결괏값을 표시할 부분의 id 값 확인한다.
만난지 #accent
100일 #date100
200일 #date200
1년 #date365
500일 #date500
2. 프로그램 순서도
오늘 날짜 Date 객체 만들기
처음 만난날 Date 객체 만들기
↓
오늘 날짜 밀리초로 바꾸기
처음 만난날 밀리초로 바꾸기
↓
두 밀리초 차이 계산
↓
결과값을 날자수로 바꾸기
↓
화면에 표시
3. 객체 만들기
4. 밀리초 바꾸기, 차이값 변수 저장
5. 날짜 수로 바꾸기
-밀리초 값을 1일=1000 * 60 * 60* 24 로 나눈다
-실수일 수도 있다 > Math객체의 round()함수로 반올림 한다
-passedDay 변수에 저장
6. 화면에 표시
-지금까지 며칠이 지났는지 #accent 부분에 표시
-innerText는 텍스트만 표시
기념일 계산 프로그램 - 100일 후 날짜 계산
1. toFirst 변수에 100일을 밀리초 값으로 바꿔서 더한다
-그 값을 future 변수에 저장
-future 변수를 Date 객체로 만든다
2. 날짜 정보 중에서 연, 월, 일만 추출하고 year, month, day 변수에 저장
-getFullYear(), getMonth(), getDate() 이용
3. 추출한 값을 "#date100" 요소에 표시
4. 200일 계산하는 식
- 달라진 점 : 100 > 200 | "#date100" > "#date200"
기념일 계산 프로그램 - calcDate() 함수 선언
-같은 명령 반복 대신 함수로 만들어 처리한다
-특정 기념일을 계산하는 calcDate()함수 작성
1. 100일 기념일 계산하는 법 복습
100일 밀리초 변환
처음 만난 날에 더하기
future함수에 저장
↓
future 값을 사용해 새로운 Date 객체 만들기
someday함수에 저장
↓
연,월.일 값 가져오기
year, month, date 변수에 저장
↓
화면에 표시
2. 100일 200일 계산 중 변하는 값을 변수로 지정
- 달라진 점 : 100 > 200 | "#date100" > "#date200"
3. calcDate()함수 만들기
-기념일을 계산할 값을 받는 매개변수 days > 괄호 안에 적기
function calcDate (days) {....}
4. 100 숫자 부분을 days 변수로 바꾼다.
5. 함수 호출 꼭!!! 한다
-함수 선언 앞에다 한다
'JavaScript' 카테고리의 다른 글
| Do it : JS -8. 문서 객체 모델(DOM) (0) | 2020.10.12 |
|---|---|
| Do it : JS -7. Array 객체 (0) | 2020.10.09 |
| Do it : JS -5. 함수와 이벤트 (0) | 2020.10.05 |
| Do it : JS -4. 제어문 : if문 | if..else문 | switch문 | for문 | while문 | do..while문 | break문 | continue문 (0) | 2020.10.03 |
| Do it : JS -3.변수, 자료형, 연산자 (0) | 2020.10.01 |