1. 객체
1) 자바스크립트 객체
language가 아닌 tooltip에 가까운 js
- 자바 스크립트는 객체 지향 언어(OOP)가 아님
2) 자바스크립트 객체의 유형
객체와 멤버 사이에 점(.) 연산자 이용
(1). 코어 객체
1. 자바스크립트 언어가 실행되는 어디서나 사용 가능한 기본 객체
2. 기본 객체로 표준 객체
3. Array, Date, String, Math 타입 등
4. 웹 페이지 자바스크립트 코드에서 혹은 서버에서 사용 가능
5. 객체가 생성되면 객체 내부에 프로퍼티와 메서드들 존재
(2). HTML DOM 객체
- HTML 문서에 작성된 각 HTML 태그들을 객체화한 것들
- HTML 문서의 내용과 모양을 제어하기 위한 목적
- W3C의 표준 객체
(3). 브라우저 객체
- 자바스크립트로 브라우저를 제어하기 위해 제공되는 객체
- BOM(Brower Object Model)에 따르는 객체들
- 비표준 객체
2. 배열
- 여러개의 원소들을 연속적으로 저장
- 전체를 하나의 단위로 다루는 데이터 구조
- 인덱스의 시작은 0에서 시작하여 배열의 각 원소에 접근
- 배열의 크기는 고정되지 않고 원소 추가시 늘어남
1) 배열 만들기
(1). [ ]로 배열 만들기
배열의 크기는 원소 추가시 늘어남
하지만 현재 배열보다 큰 인덱스에 원소를 추가하면 값이 비어있는 중간의 원소들이 생기기 때문에 문제가 발생
(2). Array 객체로 배열 만들기
1. 초기 값을 가진 배열
2. 초기화 되지 않은 배열
일정 크기의 배열 생성 후 나중에 원소 값 저장
3. 빈 배열 생성
원소 개수를 예상할 수 없는 경우
2) 배열의 원소 개수, length 프로퍼티
배열의 크기 : Array 객체의 length 프로퍼티
- length 프로퍼티는 사용자가 임의가 값을 변경 가능하지만 Array 객체에 의해 자동 관리됨
- 사용자가 임의로 값 변경 가능
3) 배열의 특징
- 배열은 Array 객체
- 배열은 여러 타입의 데이터 섞여 저장 가능
다양한 데이터 배열 생성
<html>
<head></head>
<style></style>
<body>
<script>
var any = new Array(8); // 5개의 원소를 가진 배열 생성
any[0] = 0;
any[1] = 5.5;
any[2] = "이미지";
date = new Date(); // Date 객체 저장
any[3] = date; // Date 객체 저장
var sum = 0;
for (i = 0; i < any.length; i++)
document.write("any[i] = " + any[i] + "<br>");
</script>
</body>
</html> // 7 입력 결과배열의 메서드 종류
pop : 배열 뒷부분의 값을 삭제
push : 배열 뒷부분에 값을 삽입
shift : 배열 앞부분에 값을 삭제
unshift : 배열 앞부분에 값을 삽입
splice : 배열의 특정위치에 요소를 추가하거나 삭제[splice(index, 제거할 요소 개수, 배열에 추가될 요소)]
slice(startIndex, endIndex : 배열의 startIndex부터 endIndex까지(endIndex는 불포함)에 대한 shallow copy를 새로운 배열 객체로 반환
concat : 다수의 배열을 합치고 병합된 배열의 사본을 반환
every : 배열의 모든 요소가 제고한 함수로 구현된 테스트를 통과하는지를 테스트
some : 지정된 함수의 결과가 true일 때까지 배열의 각 원소를 반복
forEach : 배열의 각 원소별로 지정된 함수를 실행
map : 배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환
filter : 지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 별도의 배열을 반환한
reduce : 누산기(accumulator) 및 배열의 각 값(좌에서 우로)에 대해 (누산된) 한 값으로 줄도록 함수를 적용
reverse : 배열의 원소 순서를 반대로 변환
sort : 배열의 원소를 알파벳순으로, 또는 지정된 함수에 따른 순서로 정렬. 모든 원소를 문자열로 취급해 사전적으로 정렬
toString : 배열을 문자열로 바꾸어 반환
valueOf : toString과 비슷, 그러나 배열을 반환
join : 배열 원소 전부를 하나의 문자열로 합함
3. Date 객체
시간 정보를 담은 객체
1) Date 객체 활용
<html>
<head></head>
<style></style>
<body>
<script>
var current = new Date(); // 현재 시간을 가진 Date 객체 생성
if (current.getSeconds() % 2 == 0)
document.body.style.backgroundColor = "violet";
else document.body.style.backgroundColor = "lightskyblue";
document.write("현재 시간 : ");
document.write(current.getHours(), "시");
document.write(current.getMinutes(), "분");
document.write(current.getSeconds(), "초");
</script>
</body>
</html>4. String 객체
1) 문자열 길이
String 객체의 length 프로퍼티 : 읽기 전용
2) 문자열을 배열처럼 사용
[ ] 연산자를 사용하여 각 문자 접근
5. Math 객체
- 수학 계산을 위한 프로퍼티와 메서드 제공
- new Math()로 객체 생성하지 않고 사용
- 난수 발생
<html>
<head></head>
<!--
배열 n을 선언하고, 난수를 10개 생성합니다.
난수 범위는 1~1000 사이입니다.
난수값을 실수에서 정수로 변환합니다.
그리고 배열에 저장한 다음 그 데이터를 출력합니다.
그리고 저장된 숫자중에서 가장 큰 값을 구하여 출력합니다.
또한 데이터를 정렬하여 출력해봅니다.
-->
<script>
function randomInt() {
return Math.floor(Math.random() * 1000) + 1;
}
</script>
<body>
<script>
var n = new Array(10);
var arr = new Array(10);
for (i = 0; i < 10; i++) {
n[i] = randomInt();
arr[i] = n[i];
arr.sort(function (a, b) {
return b - a;
});
}
document.write("배열의 데이터 출력 " + n + "<br>");
document.write("Big data 데이터 출력" + arr[0] + "<br>");
</script>
</body>
</html>6. new Object()로 사용자 객체 만들기
사용자가 새로운 타입의 객체 작성 가능
1) new Object()로 객체 만들기
2) 리터럴 표기법으로 객체 만들기
3) 객체의 틀(프로토타입)을 만들고 객체 생성하기
- 중괄호를 이용하여 객체의 프로퍼티와 메서드 지정
순서(코드상으로는 가독성을 위해 메서드를 먼저 적어줌)
(1) new Object()로 빈 객체 생성
(2) 빈 객체에 프로퍼티 추가
- 새로운 프로퍼티 추가(프로퍼티 이름과 초기값 지정)
(3) 빈 객체에 메서드 추가
- 메서드로 사용할 함수미리 작성
- 새 메서드 추가(메서드 이름에 함수 지정)
예시
7. 프로토타입(prototype)
- 객체의 모양을 가진 틀
- 붕어빵은 객체이고, 붕어빵을 찍어내는 틀은 프로토타입
- C++, Java에서는 클래스라고 부름
- Array, Data, String : js에서 제공하는 프로토타입
- 객체 생성시 'new 프로토타입'이용
<html>
<head>
<script>
// 프로토타입 만들기 : 생성자 함수 작성
function Account(owner, code, balance) {
// 프로퍼티 만들기
this.owner = owner; // 계좌 주인 프로퍼티 만들기
this.code = code; // 계좌 주인 프로퍼티 만들기
this.balance = balance; // 잔액 프로퍼티 만들기
// 메소드 만들기
this.inquiry = function () {
return this.balance;
};
this.deposit = function (money) {
this.balance += money;
};
this.withdraw = function (money) {
// 예금 인출, money는 인출하는 액수 money가 balance보다 작다고 가정
this.balance -= money;
return money;
};
}
</script>
</head>
<body>
<script>
// new 연산자 이용하여 계좌 객체 생성
var account = new Account("Jin", "111", 35000);
// 객체 활용
document.write("account : ");
document.write(account.owner + ", ");
document.write(account.code + ", ");
document.write(account.balance + "<br>");
account.deposit(10000); // 10000원 저금
document.write("10000원 저금후 잔액은 " + account.inquiry() + "<br>");
account.withdraw(5000); // 5000원 인출
document.write("5000원 저금후 잔액은 " + account.inquiry() + "<br>");
</script>
</body>
</html>
