자바스크립트

자바스크립트_객체와배열을사용한데이터관리

subdong7 2017. 1. 20. 21:12


● 객체와 배열을 사용한 데이터 관리



▶ 학생들의 성적 총점과 평균을 계산하는 예제

( 생성자 함수와 프로토 타입을 사용하는 이유를 알 수 있다. )


// 현실에 존재하는 객체의 필요한 속성을 추출하는 작업을 '추상화'라고 부른다.


// 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 윤인성