# [10.15] javascript 정리

- Author: @kimyoungjo
- Published: 2019-10-17
- Updated: 2019-10-31
- Source: http://blex.me/@kimyoungjo/1015-javascript-%EC%A0%95%EB%A6%AC
- Tags: 자바스크립트, til, javascript

---

- window 객체 : window 객체는 Document의 상위객체이다.
- 주요 객체 : screen, location, history, document
- 주요 메소드 : parseInt, isNaN
- 전역객체이기에 생략이 가능하다 예) window.parseInt() => parseInt()

<br>

- window.close() : 창을 닫는다
- window.open() : 창을 연다
- window.encodeURI(), window.decodeURI() : 주소에 한글이 들어가면 %ECE%EE%EAEGAEAGASE%같은 한글이 이상한 글자로 바뀌는데 encode는 한글 -> 외계어 decode는 외계어 -> 한글로 바꿔준다

window.setTimeout(function, 밀리초(1000이 1초)) window.setInterval(function, 밀리초) clearTimeout clearInterval == break;(중간에 멈추는 기능)

BOM(브라우저 객체 모델)

navigator : 브라우저나 운영체제에 대한 정보가 들어있다. navigator.userAgent => 기타정보 확인가능(os정보, 브라우저 정보 버전 등)

screen : 화면에 대한 정보를 줌(크기) screen.availHeight(높이 등)

location : 주소에 대한 정보를 줌 location.host(www.naver.com)

history : 앞으로가기 뒤로가기 등 페이지 간을 이동하는 기능

Document 객체
document.getElementById(ClassName, Name, TagName) : html에서 해당 id(ClassName, Name, TagName)를 가진 태그를 선택한다.

DOM(Document Object Model)
이거 왜 쓰는거임? 모르겠는데; 그냥 getElementById만 쓰면되는거아닌가 복잡하네;

Date
var time = new Date(); <- 현재 시간 time에 저장
var time =  new Date(2019, 10, 15) <- 특정 시간 time에 저장
getFullYear() setFullYear() 연도 가져오기, 연도 설정하기 Date, Day, Hours, Minutes, Seconds도 가능 Day는 요일인데 0이 일요일이다.(화는 2)
날짜.toString 날짜를 문자로 바꿔서 표기한다.

RegExp
문자열에서 특정한 패턴을 찾아준다. {김영조, 김철수, 신짱구, 훈이, 맹구} 중 '김'으로 시작하는 단어를 찾아준다던지 하는 것 말이다.
/^김/ : 김으로 시작하는 것 /조$/ : 조로 끝나는 것 찾기
문자열.match(/^김/); 해당하는 패턴을 가진 문자를 반환
문자열.search(/^김/); 해당 패턴을 가진 문자의 index를 반환

객체지향 프로그래밍
생성자
- 자바스크립트에는 클래스가 없기때문에 생성자 함수를 클래스처럼 사용한다. 생성자함수는 대문자로 시작한다.
- 받은 매개변수는 ```this``` 처리를 해주는데 이 ```this```는 생성자 함수 자신을 가리킵니다. ```this.name``` 은 이 생성자의 name 변수 라는 뜻.

프로토타입
- prototype 객체는 사전 그대로 '원형'을 뜻 함.
- 같은 생성자로 만들어진 객체들은 모두 이 원형객체를 공유한다.(이 점을 이용하여 클래스처럼 사용하는 것.)
- \_\_proto__는 생성자 함수를 new로 호출할때 정의해 두었던 prototype을 참조한 객체.

```javascript
	function Vehicle(name, speed) {
		this.name = name;
		this.speed = speed;
	}
	Vehicle.prototype.drive = function(){
		console.log(this.name + ' runs at ' + this.speed)
	};
```
Vehicle은 생성자 drive는 메소드 여기에 객체 ```var tico = new Vehicle(tico, 500);``` 를 선언하면 Vehicle 생성자에 인자를 전달하여 this.name this.speed로 재정의 해주고 drive 메소드에게 this.name this.speed 를 전달하여 출력한다.

```javascript
	function Vehicle(name, speed) {
 		 this.name = name;
 		 this.speed = speed;
	}
	Vehicle.prototype.drive = function () {
  	console.log(this.name + ' runs at ' + this.speed)
	};
	var tico = new Vehicle('tico', 50);
	tico.drive(); // 'tico runs at 50'
	function Sedan(name, speed, maxSpeed) {
  		Vehicle.apply(this, arguments)
  		this.maxSpeed = maxSpeed;
	}
	Sedan.prototype = Object.create(Vehicle.prototype);
	Sedan.prototype.constructor = Sedan;
	Sedan.prototype.boost = function () {
  		console.log(this.name + ' boosts its speed at ' + this.maxSpeed);
	};
	var sonata = new Sedan('sonata', 100, 200);
	sonata.drive(); // 'sonata runs at 100'
	sonata.boost(); // 'sonata boosts its speed at 200'
```

```Vehicle.apply(this, arguments)``` 이 대표적인 상속받는 방법이다. Vehicle의 this들을 그대로 받는다는 뜻. 

Vehicle에 maxSpeed가 없었기 때문에 this를 만들어준다.

```Sedan.prototype = Object.create(Vehicle.prototype);```가 Sedan의 prototype과 Vehicle의 prototype을 연결해주는 구문이다. 그래야 prototype을 이용하는 메소드인 drive 메소드를 사용할 수 있으니까.

```Object.create(Vehicle.prototype); 과 new Vehicle()의 차이는 전자는 객체만 만들고 생성자는 실행하지 않는다는 것이다.

```Sedan.prototype.constructor = Sedan;``` 이것을 안해주면 부모인 Vehicle만 가리키기 때문에 Sedan으로 수정해주어야한다.

``` javascript
	function Truck(name, speed, load) {
		Vehicle.apply(this, arguments);
		this.load = load;
	}
	Truck.prototype = Object.create(Vehicle.prototype);
	Truck.prototype.constructor = Truck;
```

상속 실습 안보고 짜본 것

전역변수 : 제일 바깥범위에 변수를 만드는 것(지양해야 함)

지역변수 : 함수안에서 선언된 변수