JS 튜토리얼

제이에스 홈 JS 소개 JS 어디로 JS 출력 JS 문 JS 구문 JS 코멘트 JS 변수 제이에스렛 JS 상수 JS 연산자 JS 산술 JS 할당 JS 데이터 유형 JS 함수 JS 객체 JS 이벤트 JS 문자열 JS 문자열 메서드 JS 문자열 검색 JS 문자열 템플릿 JS 번호 JS 숫자 메서드 JS 배열 JS 배열 메서드 JS 배열 정렬 JS 배열 반복 JS 배열 상수 JS 날짜 JS 날짜 형식 JS 날짜 가져오기 메서드 JS 날짜 설정 방법 JS 수학 JS 랜덤 JS 부울 JS 비교 JS 조건 JS 스위치 JS 루프 In에 대한 JS 루프 의 JS 루프 JS 루프 동안 JS 브레이크 JS 이터러블 JS 세트 JS 맵 JS 유형 JS 유형 변환 JS 비트와이즈 JS 정규 표현식 JS 오류 JS 범위 JS 호이스팅 JS 엄격 모드 JS 이 키워드 JS 화살표 함수 JS 클래스 JS JSON JS 디버깅 JS 스타일 가이드 JS 모범 사례 JS 실수 JS 성능 JS 예약어

JS 버전

JS 버전 JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE / 엣지 JS 연혁

JS 객체

객체 정의 개체 속성 개체 메서드 개체 표시 개체 접근자 객체 생성자 개체 프로토타입 객체 반복 가능 객체 세트 객체 맵 개체 참조

JS 함수

기능 정의 기능 매개변수 함수 호출 함수 호출 기능 적용 함수 클로저

JS 클래스

수업 소개 클래스 상속 클래스 정적

JS 비동기

JS 콜백 JS 비동기 JS 약속 JS 비동기/대기

JS HTML DOM

DOM 소개 DOM 메서드 DOM 문서 DOM 요소 DOM HTML DOM 양식 DOM CSS DOM 애니메이션 DOM 이벤트 DOM 이벤트 리스너 DOM 탐색 DOM 노드 DOM 컬렉션 DOM 노드 목록

JS 브라우저 BOM

JS 창 JS 화면 JS 위치 JS 연혁 JS 네비게이터 JS 팝업 경고 JS 타이밍 JS 쿠키

JS 웹 API

웹 API 소개 웹 양식 API 웹 기록 API 웹 스토리지 API 웹 작업자 API 웹 가져오기 API 웹 지리적 위치 API

JS 아약스

AJAX 소개 AJAX XMLHttp AJAX 요청 AJAX 응답 AJAX XML 파일 AJAX PHP AJAX ASP AJAX 데이터베이스 AJAX 애플리케이션 AJAX 예제

JS JSON

JSON 소개 JSON 구문 JSON 대 XML JSON 데이터 유형 JSON 구문 분석 JSON 문자열화 JSON 객체 JSON 배열 JSON 서버 JSON PHP JSON HTML JSON JSONP

JS 대 jQuery

jQuery 선택기 제이쿼리 HTML 제이쿼리 CSS 제이쿼리 DOM

JS 그래픽

JS 그래픽 JS 캔버스 JS 플로틀리 JS 차트.js JS 구글 차트 JS D3.js

JS 예제

JS 예제 JS HTML DOM JS HTML 입력 JS HTML 객체 JS HTML 이벤트 JS 브라우저 JS 편집기 JS 연습 JS 퀴즈 JS 인증서

JS 참조

자바스크립트 객체 HTML DOM 객체


자바스크립트 객체


실생활 개체, 속성 및 방법

실생활에서 자동차는 물건 입니다.

자동차에는 무게와 색상과 같은 속성 과 시작 및 중지와 같은 메서드 가 있습니다.

물체 속성 행동 양식

car.name = 피아트

car.model = 500

car.weight = 850kg

car.color = 흰색

car.start()

car.drive()

car.brake()

car.stop()

모든 자동차는 동일한 속성 을 가지고 있지만 속성 은 자동차마다 다릅니다.

모든 자동차는 동일한 방법 을 가지고 있지만 방법은 다른 시간에 수행됩니다 .


자바스크립트 객체

JavaScript 변수가 데이터 값의 컨테이너라는 것을 이미 배웠습니다.

이 코드 는 car라는 변수 에 간단한 값 (Fiat)을 할당합니다 .

let car = "Fiat";

객체도 변수입니다. 그러나 개체에는 많은 값이 포함될 수 있습니다.

이 코드 는 car라는 변수 에 많은 값 (Fiat, 500, 흰색)을 할당합니다 .

const car = {type:"Fiat", model:"500", color:"white"};

값은 이름:값 쌍(콜론으로 구분된 이름과 값)으로 작성됩니다.

const 키워드 를 사용하여 객체를 선언하는 것이 일반적 입니다.

JS Const 장에서 객체와 함께 const 를 사용하는 방법에 대해 자세히 알아보세요 .



객체 정의

객체 리터럴을 사용하여 JavaScript 객체를 정의(및 생성)합니다.

예시

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

공백과 줄 바꿈은 중요하지 않습니다. 객체 정의는 여러 줄에 걸쳐 있을 수 있습니다.

예시

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

개체 속성

JavaScript 객체 의 이름:값 쌍을 속성 이라고 합니다 .

재산 재산 가치
이름 남자
암사슴
나이 50
눈 색깔 푸른

개체 속성 액세스

다음 두 가지 방법으로 개체 속성에 액세스할 수 있습니다.

objectName.propertyName

또는

objectName["propertyName"]

예 1

person.lastName;

예2

person["lastName"];

JavaScript 객체는 속성이라고 하는 명명된 값 의 컨테이너입니다.


개체 메서드

객체는 또한 메소드 를 가질 수 있습니다 .

메서드는 개체에 대해 수행할 수 있는 작업 입니다.

메서드는 속성에 함수 정의 로 저장됩니다 .

재산 재산 가치
이름 남자
암사슴
나이 50
눈 색깔 푸른
전체 이름 function() {return this.firstName + " " + this.lastName;}

메서드는 속성으로 저장된 함수입니다.


예시

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

키워드 _

함수 정의에서 함수 this의 "소유자"를 나타냅니다.

위의 예 에서 함수 를 "소유"하는 this사람 개체 입니다.fullName

즉, 이 객체 의 속성을 this.firstName의미 합니다 .firstName

JS this Keywordthis 에서 키워드에 대해 자세히 알아보세요 .


개체 메서드 액세스

다음 구문을 사용하여 개체 메서드에 액세스합니다.

objectName.methodName()

예시

name = person.fullName();

() 괄호 없이 메서드에 액세스하면 함수 정의 가 반환 됩니다 .

예시

name = person.fullName;

문자열, 숫자 및 부울을 객체로 선언하지 마십시오!

JavaScript 변수가 키워드 " "로 선언되면 new변수는 객체로 생성됩니다.

x = new String();        // Declares x as a String object
y = new Number();        // Declares y as a Number object
z = new Boolean();       // Declares z as a Boolean object

String, NumberBoolean개체 를 피하십시오 . 코드가 복잡해지고 실행 속도가 느려집니다.

이 자습서의 뒷부분에서 개체에 대해 자세히 알아볼 것입니다.


연습으로 자신을 테스트하십시오

연습:

개체 "John"에서 정보를 추출하여 경고 합니다.person

const person = {
  firstName: "John",
  lastName: "Doe"
};

alert();