프로토타입(prototype)
자바스크립트의 모든 객체는 프로토타입이라는 객체를 포함
모든 객체는 프로토타입으로 부터 프로퍼티와 메소드를 상속
- 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터
상속을 받으며 상속되는 정보를 제공하는 객체를 프로토타입이라고 함
- 자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는
Object.prototype과 자신의 생성자 객체를 프로토타입으로 가짐
const mycar = new Car();
mycar <------- Object.prototype, Car.prototype
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>프로토타입</title>
</head>
<body>
<h2>프로토타입</h2>
<script>
function Car(brand,color,price){
this.brand = brand;
this.color = color;
this.price = price;
}
const mycar = new Car("Ferrari","Red",65000);
const momcar = new Car("K8","White",4000);
//기존에 없던 프로퍼티에 새로운 값 또는 함수를 넣어줌으로써
//그 객체에게 프로퍼티와 메소드를 추가할 수 있다.
mycar.mode = "스포츠모드";
mycar.roofOpen = function(){
console.log(this.brand + " 뚜껑 열기");
}
mycar.roofOpen();
//momcar는 프로퍼티를 가지고 있지 않으므로 실행 불가능
// momcar.roofOpen();
//Car 생성자로 만들어지는 프로토타입의 wheel = 4
//mycar, momcar 같은 객체들은 전부 Car 생성자로 만들어지는
//프로토타입을 상속받아서 객체가 만들어진다. 따라서 프로토타입에
//추가한 프로퍼티, 메소드들은 그 생성자로 생성하는 모든 객체들에게
//추가된다.
Car.prototype.wheel = 4;
Car.prototype.engineStart = function(){
console.log(this.brand+" 시동 켜기")
}
console.log('내 차의 바퀴 개수 : '+mycar.wheel);
console.log('엄마 차의 바퀴 개수 : '+momcar.wheel);
mycar.engineStart();
momcar.engineStart();
//{intdata : 10}
//{intdata : 20, strdata : "Hello"}
//{intdata : 30, strdata : "Bye", doubledata : 1.35}
function Test(intdata){
this.intdata = intdata;
}
const obj1 = new Test(10);
const obj2 = new Test(20);
obj2.strdata = "Hello";
const obj3 = new Test(30);
obj3.strdata = "Bye";
obj3.doubledata = 1.35;
</script>
</body>
</html>
Math 객체
수학에서 자주 사용하는 상수들과 함수들을 미리 구현해 놓은 자바스크립트 내장 객체
min() 최소값을 반환, 매개변수가 전달되지 않는다면 Infinity를 반환
비교할 수 없는 값이 포함되어 있다면 NaN를 반환
max() 최대값을 반환, 매개변수가 전달되지 않는다면 -Infinity를 반환
비교할 수 없는 값이 포함되어 있다면 NaN를 반환
floor() 소수점 첫째자리에서 내림
ceil() 소수점 첫째자리에서 올림
round() 소수점 첫째자리에서 반올림
random() 0보다 크거나 같고 1보다 작은 무작위 실수를 반환
String 객체
문자열을 쉽게 만들고 다룰 수 있게 한다.
const 객체명 = "문자열리터럴";
const 객체명 = new String("문자열리터럴");
length 문자열의 길이를 저장하는 프로퍼티
indexOf() 매개변수로 넘긴 문자열이 처음 등장하는 인덱스를 반환
charAt() 매개변수로 넘긴 인덱스에 위치한 문자를 반환
includes() 매개변수로 전달된 문자열이 포함되어 있는지를 확인 후 반환
substring() 매개변수가 1개일때에는 전달된 인덱스부터 끝까지 잘라서 반환
매개변수가 2개이면 첫번째 인덱스부터 두번째 인덱스 전까지
잘라서 반환
substr() 매개변수로 전달된 시작 인덱스에서 두번째로 전달된 길이만큼
잘라서 반환
split() 매개변수로 전달된 구분점을 기준으로 문자열을 나눈 후
배열에 저장해서 반환
replace() 첫번째 매개변수로 전달된 문자열을 찾아서 두번째 문자열로 치환
trim() 문자열의 앞 뒤 공백을 제거
Date 객체
날짜, 시간 등을 쉽게 다룰 수 있는 내장객체
2자리로 표현한 연도는 1900 ~ 1999
4자리로 표현한 연도는 작성한 연도 그대로
월 의 범위는 0 ~ 11월
new Date() : 현재 날짜, 시간을 저장하는 객체(브라우저 기준)
new Date("날짜문자열") : 해당 날짜, 해당 시간을 가리키는 객체 생성
new Date(n) : 1970년 1월 1일 0시 0분 0초 부터 n 밀리초만큼
지난 시간의 날짜 객체가 생성
new Date(년,월,일,시,분,초,밀리초) : 해당 특정 날짜, 시간을 가리키는 객체 생성
콜백 함수(callback function)
매개변수로 함수를 전달받아서 함수 내부에서 그 함수를 호출하는 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>콜백함수</title>
</head>
<body>
<h2>콜백함수</h2>
<script>
function f(callback){
//2. f() 내부 코드들 수행 시작(callback 매개변수에는 test 라는 함수가 담겨있음)
console.log("콜백 함수를 호출합니다~!")
//3. test() 로 작동 ---> test 함수를 호출(18번줄로 이동)
callback();
}
function test(){
//4. test() 내부 코드들 수행 시작
alert("테스트 함수 입니다!");
}
function test2(){
alert("테스트2 함수 입니다!");
}
//1. f() 함수 호출(12번줄로 이동)
f(test);
f(test2);
</script>
</body>
</html>
window 객체
현재 웹 브라우저의 창이나 탭을 표현하기 위한 객체
비표준 객체
setTimeout(콜백함수, 밀리초) : 넘겨준 함수를 해당 밀리초만큼 흐른 후 호출
clearTimeout(설정된 타임아웃 객체) : setTimeout에서 설정된 것을 취소
setInterval(콜백함수, 밀리초) : 넘겨준 함수를 해당 밀리초마다 호출
clearInterval(설정된 인터벌 객체) : setInterval에서 설정된 것을 취소
문서 객체 모델(Document Object Model)
XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
문서내의 모든 요소를 정의하고 각 요소에 접근하는 방법들을 제공해준다.
<html lang="en">
<head>
<title>타이틀</title>
</head>
<body>
<p class="bodytext">내용</p>
</body>
</html>
document객체
<html> - lang="en"
<head> <body>
<title> <p> - class="bodytext"
"타이틀" 내용
document 객체
웹 페이지 자체를 의미하는 객체
웹 페이지에 존재하는 HTML 요소에 접근할 때 반드시 document 객체로부터 시작
getElementsByTagName()
해당 태그 이름의 요소들을 모두 선택 후 배열로 가져옴
getElementById()
해당 아이디의 요소 하나를 선택해서 가져옴
getElementsByClassName()
해당 클래스에 속한 요소를 모두 선택 후 배열로 가져옴
getElementsByName()
해당 name 속성값을 가지는 요소를 모두 선택 후 배열로 가져옴
querySelectorAll()
CSS 선택자로 선택되는 요소들을 모두 선택 후 배열로 가져옴
'Language > JavaScript(web)' 카테고리의 다른 글
| [javascript] 노드(node) 추가, 생성, 제거, 복제 (0) | 2023.06.07 |
|---|---|
| [javascript] 변수의 범위, 화살표 함수, 객체 (0) | 2023.06.07 |
| [javascript] 제어문, 배열, 함수 (1) | 2023.06.07 |
| [javascript] 연산자, 제어문 (0) | 2023.06.07 |
| [javascript] 대화상자, 연산자 (0) | 2023.06.07 |
