자바스크립트_객체와배열을사용한데이터관리
● 객체와 배열을 사용한 데이터 관리
▶ 학생들의 성적 총점과 평균을 계산하는 예제
( 생성자 함수와 프로토 타입을 사용하는 이유를 알 수 있다. )
// 현실에 존재하는 객체의 필요한 속성을 추출하는 작업을 '추상화'라고 부른다.
// 1. 학생 데이터를 만든다.
var student0 = { 이름 : '홍길동0', 국어 : 80, 수학 : 70 , 영어 : 50, 과학 : 11 };
var student1 = { 이름 : '홍길동1', 국어 : 60, 수학 : 66 , 영어 : 60, 과학 : 22 };
var student2 = { 이름 : '홍길동2', 국어 : 50, 수학 : 77 , 영어 : 70, 과학 : 100 };
var student3 = { 이름 : '홍길동3', 국어 : 40, 수학 : 44 , 영어 : 30, 과학 : 33 };
var student4 = { 이름 : '홍길동4', 국어 : 50, 수학 : 55 , 영어 : 40, 과학 : 44 };
var student5 = { 이름 : '홍길동5', 국어 : 60, 수학 : 65 , 영어 : 50, 과학 : 67 };
var student6 = { 이름 : '홍길동6', 국어 : 70, 수학 : 34 , 영어 : 70, 과학 : 45 };
var student7 = { 이름 : '홍길동7', 국어 : 80, 수학 : 78 , 영어 : 60, 과학 : 77 };
var student8 = { 이름 : '홍길동8', 국어 : 90, 수학 : 34 , 영어 : 40, 과학 : 88 };
var student9 = { 이름 : '홍길동9', 국어 : 80, 수학 : 21 , 영어 : 70, 과학 : 70 };
// 2. 객체가 흩어져 있으면 조작이 어려우므로 배열내에 저장한다.
//배열의 push() 메서드를 사용한다.
var students = [];
// 여기 push 안에다가 넣어준다. students.push( { } );
students.push( { 이름 : '홍길동0', 국어 : 80, 수학 : 70 , 영어 : 50, 과학 : 11 } );
students.push( { 이름 : '홍길동1', 국어 : 60, 수학 : 66 , 영어 : 60, 과학 : 22 } );
students.push( { 이름 : '홍길동2', 국어 : 50, 수학 : 77 , 영어 : 70, 과학 : 100 } );
students.push( { 이름 : '홍길동3', 국어 : 40, 수학 : 44 , 영어 : 30, 과학 : 33 } );
students.push( { 이름 : '홍길동4', 국어 : 50, 수학 : 55 , 영어 : 40, 과학 : 44 } );
students.push( { 이름 : '홍길동5', 국어 : 60, 수학 : 65 , 영어 : 50, 과학 : 67 } );
students.push( { 이름 : '홍길동6', 국어 : 70, 수학 : 34 , 영어 : 70, 과학 : 45 } );
students.push( { 이름 : '홍길동7', 국어 : 80, 수학 : 78 , 영어 : 60, 과학 : 77 } );
students.push( { 이름 : '홍길동8', 국어 : 90, 수학 : 34 , 영어 : 40, 과학 : 88 } );
students.push( { 이름 : '홍길동9', 국어 : 80, 수학 : 21 , 영어 : 70, 과학 : 70 } );
// 배열에 객체를 집어넣으면 배열 students 에 10개의 요소 가 생긴다.
// 모든 students 배열 내의 객체에 메서드를 추가한다.
for ( var i in students ) {
// 총점을 구하는 메서드를 추가한다.
students[i].getSum = function() {
return this.국어 + this.수학 + this.영어 + this.과학;
};
// 평균을 구하는 메서드를 추가한다.
students[i].getAverage = function () {
return this.getSum() / 4 ;
};
}
var output = '이름\t총점\t평균\n';
for ( var i in students ){
with ( students[i] ) {
output += 이름 + '\t' + getSum() + '\t' + getAverage() + '\n' ;
}
}
alert ( output );
결과 :
> 결과창은 explorer 에서 돌린 결과
크롬에서는 왜인지 모르겠는데 \t ( escape sequence ) 안 먹힌다,,
눈에 잘 안들어오지만 가볍게 보고 넘어가기로 한다.
출처 책 : 모던 웹을 위한 JavaScript jQuery 입문 by 윤인성