일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Direct12
- 타입 객체
- 자료구조
- 백준
- codility
- DirectX 12
- 알고리즘
- 프로그래머스
- 쓰레드
- 파일시스템 구현
- 렌더링 파이프라인
- 컨디션 변수
- directx
- 그리디 알고리즘
- 영속성
- 병행성 관련 오류
- I/O장치
- 디자인패턴
- 스케줄링
- 멀티프로세서
- 다이나믹프로그래밍
- OS
- 병행성
- 동적계획법
- 락
- 다이나믹 프로그래밍
- 그리디알고리즘
- 운영체제
- 멀티쓰레드
- DirectX12
- Today
- Total
기록공간
자바스크립트 (JavaScript) 간단정리 본문
· 자바스크립트의 특징
1. 인터프리트 언어
컴파일 과정이 필요없이 브라우저가 읽고... 해석하고... 실행한다.
2. 동적 데이터타입
모든 변수를 『var』로 선언하면 끝이다.
데이터 타입을 별도로 지정해 줄 필요가 없다.
3. 객체 지향 언어
단, 자바와 다른 점은 클래스 개념을 사용하지 않으며
프로토타입을 활용하게 된다.
· 직접적으로 많이 사용하는 용도
1. 이벤트에 반응하는 동작의 구현
2. AJAX 를 통해 페이지 로딩 과정 없이 컨텐츠 연동이나 데이터 제출 가능
3. HTML 엘리먼트 구조 / CSS 디자인 등을 동적으로 전환
4. 사용자 입력 데이터에 대한 검증
· 자바스크립트 객체
1. 내장 객체, 사용자 정의 객체
※ 내장 객체는 생성자 함수가 미리 작성되어 있으며
사용자 정의 객체는 사용자가 이 생성자 함수를 정의하는 것이다.
2. 사용자 정의 객체
① 객체와 연관된 데이터는 객체가 생성될 때 초기화 되어야 하는데...
생성자라고 부르는 특별한 함수가 객체를 활성화 시키는데 필요하다.
『var arr = new Array();』
② 생성자로 객체를 생성하기 위해서는
자바와 마찬가지로 『new』 연산자를 활용하게 된다.
③ 생성자(객체)의 이름은 첫 글자를 대문자로 표기한다.
④ 생성자 내부에 속성, 함수를 생성하기 위해
『this』 키워드를 사용한다.
⑤ 객체의 멤버인 속성과 함수는 『.(dot)』 연산자로 접근한다.
⑥ 사용자 정의 객체를 만드는 기본 형식 및 구조
(생성자를 구성하는 기본 형식 및 구조)
function 생성자명(인자리스트) ← 생성자명의 첫 글자... 대문자
{
// 속성 정의
this.멤버명 = 인자;
// 메소드 정의
// (동작)
this.멤버명 = function(인자리스트)
{
// 메소드 내부 코드
...
return 반환값;
};
}
⑦ 프로토타입
한 객체가 가지고 있는 속성과 메소드를
다른 객체(혹은 다른 여러 객체)가 공유할 수 있도록 지원하는 개념
ex)
function Car(x, y)
{
this.x=x;
this.y=y;
this.getDistance = function()
{
return (this.x * this.x + this.y * this.y);
}
}
→ 이 코드가 자동차(Car)를 나타내는 객체라고 가정한다.
여기서 『getDistance()』는 최초 위치부터 거리를 계산하는 함수라고 가정한다.
이 때, 여러 대의 자동차를 사용하는 경우...
var c1 = new Car(10, 20)
var c2 = new Car(10, 40)
:
이와 같은 구문을 활용하여 객체를 생성했다면...
객체들마다 『getDistance()』 메소드(함수)를 가지게 되면서
메모리 낭비를 초래하게 된다.
이 때... 객체들마다 메소드(함수)를 가지는 것이 아니라
하나의 메소드(함수)를 만들어 공유하기 위해
프로토타입을 정의하게 된다.
※ 모든 객체는 프로토타입이라는 숨겨진 객체를 포함하고 있다.
『Car』 객체의 프로토타입은 『Car.prototype』이라는
숨겨진 객체를 갖고 있다는 것이다.
function Car(x, y)
{
this.x=x;
this.y=y;
}
// 메서드가 필요할 때에만 메모리에 퍼올려주도록 한다.
Car.prototype.getDistance = function()
{
return (this.x * this.x + this.y * this.y
}
// 메서드가 필요할 때에만 메모리에 퍼올려주도록 한다.
var c3 = new Car(10, 80);
c3.getDistance();
'FrontEnd > JavaScript' 카테고리의 다른 글
로컬 스토리지(Local Storage) (0) | 2021.04.20 |
---|---|
<script>를 <body> 맨 뒤에 삽입하는 이유? (0) | 2021.04.19 |
바닐라 자바스크립트(Vanilla JS)란? (0) | 2021.04.19 |
AJAX 정리 (0) | 2020.12.09 |
jQuery(제이쿼리) 정리 (0) | 2020.12.09 |