- window 객체 : window 객체는 Document의 상위객체이다.
- 주요 객체 : screen, location, history, document
- 주요 메소드 : parseInt, isNaN
- 전역객체이기에 생략이 가능하다 예) window.parseInt() => parseInt()
- 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을 참조한 객체.
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 를 전달하여 출력한다.
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 메소드를 사용할 수 있으니까.
```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;상속 실습 안보고 짜본 것
전역변수 : 제일 바깥범위에 변수를 만드는 것(지양해야 함)
지역변수 : 함수안에서 선언된 변수
Ghost