#07-1 [프로그래밍 기초(이론/실습)] (05.11) - JavaScript 객체 *수정중

sookyoung.k·2023년 5월 12일
0

NEWDEAL TIL

목록 보기
11/49
post-thumbnail

객체 (Object) = '복합 자료형'

세상에 존재하는 모든 것

* 객체 ➡️ 속성 + 메소드

'나' (객체)
✔️ '나'의 속성 - 키: 170, 태어난 년도: 1996년 등의 정보
✔️ '나'의 메소드 - 밥먹기(), 술마시기(), 달리기(), 공부하기() 등...

자바스크립트 객체 = 인식할 수 있는 모든 대상

자료를 저장하고 처리하는 기본 단위

➡️ 하나의 변수에 다양한 정보를 담기 위해서 사용하는 자료형

내장 객체 (Built-in Object)

자바스크립트에 미리 정의되어 있는 객체 (자주 사용하니까)
ex. Date, Number, Boolean, Array, Math 등등

➡️ 자바스크립트 자체에서 정의하여 제공하는 메소드

* 참고 사이트 (다양한 객체와 내장 메소드 등을 확인할 수 있다.)
TCP SCHOOL
TCP SCHOOL - Date 객체

문서 객체 모델 (DOM)

객체를 사용해 웹 문서를 관리하는 방식
ex. Document, Image 등등

웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등 모두 각 별도의 객체로 미리 존재

✔️ DOM은 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스
✔️ 자바스크립트는 DOM 인터페이스를 이용하여 접근할 수 있다!
ex. document.querySelector(selectors) element.innerHTML 이런 식으로!

* 참고한 블로그
문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법

브라우저 객체 모델 (BOM)

웹 브라우저 정보를 객체로 다루는 것
ex. window(최상위), location, navigator, history, screen, document 등

📌 window 객체
alert(), prompt() 등의 메소드들을 가지고 있다

* 참고한 블로그
브라우저 객체 모델 (BOM)

사용자 정의 객체

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

		var toyRobot = {  // toyRobot 객체를 선언한 후 프로퍼티와 메서드 정의
			productId: "123-12",
			name: "Robot",
			price : "25,000",
			madeIn : "Korea",
			quantity: 10,
			showStock : function() {  // showStock( ) 메서드 정의
				document.querySelector('#display').innerHTML = this.name + " 제품은 " + this.quantity + "개 남아있습니다.";
			}
		};

➡️ 사용자가 직접 객체의 속성과 메소드를 정의한다!

속성과 메서드

속성(Property) : 값을 담고 있는 정보

✔️ 속성 값을 가져올 때 ➡️ 객체 이름 뒤에 마침표(.)를 찍고 속성명을 적으면 불러올 수 있다! (예) navigator.vendor

메서드(Method) = 함수 : 객체의 동작

✔️ prompt() 이것도 프롬프트 함수

✔️ Window 객체에 open() 함수가 미리 만들어져 있는 것!
✔️ Window 객체의 함수는 이름만 사용해서 실행 가능~
✔️ 객체의 메서드를 사용할 때에도 마침표(.)를 사용

프로토타입과 인스턴스

profile
영차영차 😎

0개의 댓글