코드 그라데이션
11. 자바스크립트와 객체 (1) 객체의 의미와 내장 객체 본문
객체
- 자바스크립트에서는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다.
- 웹과 관련된 대상을 모두 객체로 인식
자바스크립트의 객체
- 문서 객체 모델(DOM)： 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있음.
- 브라우저 관련 객체: 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있다. 사용하는 브라우 저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등.
- 내장 객체: 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있다., 예를 들어 날짜, 시간과 관련된 프로그램을 개발하려면 Date 객체를 가져와 쉽게 사용할 수 있다.
객체의 인스턴스 만들기
- 객체는 참조 형태로 사용해야 한다.
- 즉, 즉, 객체 자체가 아니라 인스턴스 instance의 형태로 만들어서 사용해야 한다는 의미
- 자바스크립트 안에 정의된 객체는 그대로 두고 객체와 똑같은 속성과 기능을 만들 수 있는데. 자바스크립트의 객체가 틀이라면 그 틀을 기본으로 해서 계속 같은 모양으로 찍어 내는 것이 인스턴스.
- 인스턴스에 식별자를 붙여서 사용한다.
- 객체의 인스턴스를 만들 때는 new라는 예약어를 사용하고, new 뒤에 만들려고 하는 객체 이름을 써주면 된다.
프로퍼티와 메서드
- 프로퍼티 : 객체의 특징이나 속성을 나타냄
- 메서드 : 객체에서 할 수 있는 동작
# 마침표 표기법으로 프로퍼티와 메서드 작성하기.
- 인스턴스는 객체의 프로퍼티와 메서드를 그대로 물려받아서 똑같이 사용한다.
- 메서드를 표시하려면 인스턴스명 뒤에 마침표(.)를 붙이고 객체의 프로퍼티나 메서드 이름을 작성
- 메서드는 함수이므로 이름 옆에 괄호를 넣어야 한다.
내장 객체
1. Array 객체
- 배열 관련
Array 객체로 배열 만들기
* Array 객체 인스턴스 만들기 - 초깃값이 없는 경우
var numbers = new Array(); // 배열 크기 지정 x
var numbers = new Array(4); // 배열 크기 지정 o* Array 객체 인스턴스 만들기 - 초깃값이 있는 경우
: 인스턴스 선언과 요솟값을 한번에 할당해 작성할 수 있다.
var numbers = ["one", "two", "three", "four"]; // 배열 선언
var numbers = Array("one", "two", "three", "four"); // Array 객체를 사용한 배열 선언
Array 객체의 length 프로퍼티 사용하기
- 배열 요소의 길이 구할 때 사용
- for문을 이용하여 전체 배열의 요솟값을 나열함.
예제 : 배열 만들고 요소 표시하기
<body>
<h1>배열의 각 요소 </h1>
<script>
var numbers = ["one", "two", "three", "four"];
for(i=0; i<numbers.length; i++) {
document.write("<p>" + numbers[i] + "</p>");
}
</script>
</body>실행 결과
Array 객체의 매서드
한 번에 정리
1) 배열끼리 합치는 concat() 메서드
- 어느 배열을 먼저 쓰는가에 따라 기준이 달라지고,
- 결과 배열의 순서도 달라진다.
2) 배열 안의 요소끼리 합치는 join() 메서드
- 배열 안의 요소를 연결해서 하나의 문자열로 만들어 준다.
- 각 요소 사이에 원하는 구분자를 넣을 수도 있는데, 따로 지정하지 않는다면 요소를 , 로 구분한다.
3) 새로운 요소를 추가하는 push(), unshift() 메서드
- 배열 맨 끝에 추가하려면 전자
- 배열 맨 앞에 추가하려면 후자
- 배열 맨 앞과 맨 뒤에 요소를 추가하면, 원래 있던 배열이 바뀐다.
4) 배열에서 요소를 꺼내는 pop(), shift() 메서드
- 뒤에 있는 요소 꺼낼 때 전자
- 앞에 있는 요소 꺼낼 때 후자
- 두 메서드는 꺼낸 요솟값을 반환하며, 기존 배열은 꺼낸 요소가 빠진 상태로 변경됨.
4개 예제
<!DOCTYPE html>
<html lang="ko">
<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>
<script>
// 배열 2개 합치기
var nums = [1, 2, 3];
var chars = ["a", "b", "c", "d", "xxxx", "kkkkk"];
var numChars = nums.concat(chars);
var charNums = chars.concat(nums);
document.write("nums에 chars 합치면 : ", numChars, "<br> chars에 nums 합치면 : ", charNums);
document.write("<hr>");
// 배열 안의 요소 합치기
var string1 = nums.join();
document.write("구분자 없이 : ", string1);
document.write("<hr>");
var string2 = chars.join();
document.write("/ 구분자 지정 : ", string2);
document.write("<hr>");
// 배열에 새로운 요소 추가하기
var ret1 = nums.push(4, 5);
document.write("length: ", ret1, " | 배열: ", nums);
document.write("<br>");
var ret2 = nums.unshift(0);
document.write("length : ", ret2, " | 배열: ", nums);
document.write("<hr>");
// 요소 추출하기 - 꺼낸 요솟값 반환
var popped1 = chars.pop(); // 마지막 요소 꺼냄
document.write("꺼낸 요소 : ", popped1, " | 배열 : ", chars);
document.write("<br>");
var popped2 = chars.shift(); // 첫번째 요소 꺼냄
document.write("꺼낸 요소 : ", popped2, " | 배열 : ", chars);
document.write("<hr>");
</script>
</body>
</html>실행 결과
5) 원하는 위치에 요소를 추가, 삭제하는 splice() 메서드
- 배열 중간에 요소를 추가하거나 삭제,
- 또는 한꺼번에 요소를 2개 이상 추가하거나 삭제할 때 사용
- 이 메서드를 실행하면 삭제한 요소로 이루어진 새로운 배열이 결과값으로 반환.
5-1. 인수가 1개인 경우
- 괄호 안의 인수는 배열의 인덱스 값을 의미.
- 인수가 지정한 인덱스 요소부터 배열의 맨 끝 요소까지 삭제한다.
- 메서드를 실행 후에는 삭제한 요소를 반호나하고 기존의 numbers 배열은 변경된 상태가 된다.
5-2. 인수가 2개인 경우
- 첫 번째 인수는 인덱스값이고
- 두 번째 인수는 삭제할 요소의 개수.
- 실행 후에는 삭제한 요소를 반환하고, 기존의 배열은 나머지 요소만 남는다.
5-3. 인수가 3개 이상인 경우
- 첫 번째 인수는 배열에서 삭제할 시작 위치
- 두 번째 인수는 삭제할 개수
- 세 번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정
예제
<!DOCTYPE html>
<html lang="ko">
<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>ArrayTest2</title>
</head>
<body>
<p>splice 메서드 사용하기</p>
<script>
// 인수가 1개일 경우
var numbers = [1, 2, 3, 4, 5, 9 , 10];
var newNumbers = numbers.splice(2);
document.write("반환된 배열 : " + newNumbers + "<br>" );
document.write("변경된 배열 : " + numbers );
document.write("<hr>");
// 인수가 2개일 경우
var study = ["html", "css", "web", "jquery", "korea"];
var newStudy = study.splice(2, 1);
document.write("반환된 배열 : " + newStudy + "<br>");
document.write("변경된 배열 : " + study);
document.write("<hr>");
// 인수가 3개 이상일 경우
var newStudy2 = study.splice(2, 1, "js");
document.write("반환된 배열 : " + newStudy2 + "<br>");
document.write("변경된 배열 : " + study);
</script>
</body>
</html>실행 결과
6) 기존 배열을 바꾸지 않으면서 요소를 꺼내는 slice() 메서드
- 시작과 끝 인덱스를 지정해서 요소를 여러 개 꺼내고, 실행 결과와 기존 배열이 바뀌지 않는다.
- 인수를 하나만 지정하면 그 인수를 시작 인덱스로 간주하고
- 지정한 요소부터 마지막 요소까지 꺼내서 반환한다.
- 인수 2개를 지정하면 여러 개 요소를 꺼낼 수 있다.
- 이것은 결국 꺼낼 요소의 구간을 지정하는 것
- 첫 번째 인수는 배열의 시작 인덱스
- 두 번째 인수는 끝 인덱스의 바로 직전 인덱스를 의미
- 메서드를 실행 한 후에는 꺼낸 요소를 반환한다.
** slice() 는 기존 배열에 영향을 주지 않지만, splice()는 기존 요소를 추가 혹은 삭제하면 기존 배열 자체가 수정된다.
** 기존 배열에서 꺼낸 요소로 새로운 배열을 만들어 사용하려면 전자를,
** 기존 배열의 일부 요소만 삭제하려면 splice()를 선택하자.
예제
<!DOCTYPE html>
<html lang="ko">
<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>Array3</title>
</head>
<body>
<h3>slice 메서드</h3>
<script>
// 추출한 요소로 배열 만들기, 기존 배열 변경안됨 - 인수가 1개인 경우
var colors = ["red", "green", "blue", "white", "black" , "orange"];
var colors2 = colors.slice(2); //인덱스 2부터 끝까지
document.write(colors2);
document.write("<br>");
// 추출한 요소로 배열 만들기, 기존 배열 변경 안 됨 - 인수가 2개인 경우
var colors3 = colors.slice(2, 4); // 인덱스 2, 3
document.write(colors3);
</script>
</body>
</html>실행 결과
Date 객체
메서드 정리
Math 객체
- 수학 계산과 관련된 메서드가 많음.
- 하지만 수학식에서만 사용하는 것은 아님
- ex. 무작위 수 추출 / 반올림
- Math 객체는 Date, Array와는 달리 따로 인스턴스를 만들지 않는다.
- Math.프로퍼티명 / Math.메서드명 (이 형태로 사용)
프로퍼티
메서드
728x90
'Front > Mega-JavaScript' 카테고리의 다른 글
| 13. 문서 객체 모델 (1) 기본 개념 (0) | 2023.05.23 |
|---|---|
| 12. 자바스크립트와 객체 (2) 브라우저와 관련된 객체 (0) | 2023.05.21 |
| 10. 함수와 이벤트 (4) 이벤트 처리기 관련 (0) | 2023.05.21 |
| 9. 함수와 이벤트 (3) 함수 표현식 (0) | 2023.05.21 |
| 8. 함수와 이벤트 (2) let, const / 함수의 재사용 (1) | 2023.05.20 |
'Front/Mega-JavaScript' Related Articles
more
Comments