JS에선 객체 또한 하나의 변수처럼 취급할 수 있다고 이해했다.
그런 이유로 배열을 생성하고 값을 집어넣을 때
객체를 넣을 수 있다는 말이다.
그리고 여지껏 값을 직접 입력했는데 생성자를 통해서 값을 설정 할 수 있다.
new 키워드를 사용한다.
예제를 통해 배열에 어떻게 집어넣는지 생성자를 어떻게 쓰는지 확인해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.area{
height: 250px;
border: 1px solid black;
background: lightgray;
}
</style>
</head>
<body>
<h1>객체 배열</h1>
<h3>객체와 배열을 사용한 데이터 관리</h3>
<button onclick="test1();">실행확인</button>
<div id="area1" class="area"></div>
<script type="text/javascript">
function test1() {
var student0 = {
name:'이르음',
java:Math.floor(Math.random() * 100) + 1,
oracle:Math.floor(Math.random() * 100) + 1,
HTML5:Math.floor(Math.random() * 100) + 1,
CSS3:Math.floor(Math.random() * 100) + 1,
javaScript:Math.floor(Math.random() * 100) + 1
}
var student1 = {
name:'이르음1',
java:Math.floor(Math.random() * 100) + 1,
oracle:Math.floor(Math.random() * 100) + 1,
HTML5:Math.floor(Math.random() * 100) + 1,
CSS3:Math.floor(Math.random() * 100) + 1,
javaScript:Math.floor(Math.random() * 100) + 1
}
var student2 = {
name:'이르음2',
java:Math.floor(Math.random() * 100) + 1,
oracle:Math.floor(Math.random() * 100) + 1,
HTML5:Math.floor(Math.random() * 100) + 1,
CSS3:Math.floor(Math.random() * 100) + 1,
javaScript:Math.floor(Math.random() * 100) + 1
}
var student3 = {
name:'이르음3',
java:Math.floor(Math.random() * 100) + 1,
oracle:Math.floor(Math.random() * 100) + 1,
HTML5:Math.floor(Math.random() * 100) + 1,
CSS3:Math.floor(Math.random() * 100) + 1,
javaScript:Math.floor(Math.random() * 100) + 1
}
var student4 = {
name:'이르음4',
java:Math.floor(Math.random() * 100) + 1,
oracle:Math.floor(Math.random() * 100) + 1,
HTML5:Math.floor(Math.random() * 100) + 1,
CSS3:Math.floor(Math.random() * 100) + 1,
javaScript:Math.floor(Math.random() * 100) + 1
}
var student5 = {
name:'이르음5',
java:Math.floor(Math.random() * 100) + 1,
oracle:Math.floor(Math.random() * 100) + 1,
HTML5:Math.floor(Math.random() * 100) + 1,
CSS3:Math.floor(Math.random() * 100) + 1,
javaScript:Math.floor(Math.random() * 100) + 1
}
var student6 = {
name:'이르음6',
java:Math.floor(Math.random() * 100) + 1,
oracle:Math.floor(Math.random() * 100) + 1,
HTML5:Math.floor(Math.random() * 100) + 1,
CSS3:Math.floor(Math.random() * 100) + 1,
javaScript:Math.floor(Math.random() * 100) + 1
}
var student7 = {
name:'이르음7',
java:Math.floor(Math.random() * 100) + 1,
oracle:Math.floor(Math.random() * 100) + 1,
HTML5:Math.floor(Math.random() * 100) + 1,
CSS3:Math.floor(Math.random() * 100) + 1,
javaScript:Math.floor(Math.random() * 100) + 1
}
var student8 = {
name:'이르음8',
java:Math.floor(Math.random() * 100) + 1,
oracle:Math.floor(Math.random() * 100) + 1,
HTML5:Math.floor(Math.random() * 100) + 1,
CSS3:Math.floor(Math.random() * 100) + 1,
javaScript:Math.floor(Math.random() * 100) + 1
}
var student9 = {
name:'이르음9',
java:Math.floor(Math.random() * 100) + 1,
oracle:Math.floor(Math.random() * 100) + 1,
HTML5:Math.floor(Math.random() * 100) + 1,
CSS3:Math.floor(Math.random() * 100) + 1,
javaScript:Math.floor(Math.random() * 100) + 1
}
// 배열 선언
var students = [];
students.push(student0);
students.push(student1);
students.push(student2);
students.push(student3);
students.push(student4);
students.push(student5);
students.push(student6);
students.push(student7);
students.push(student8);
students.push(student9);
console.log(students);
// 각 객체별 메소드 추가
for(var i = 0; i < students.length; i++){
students[i].getSum = function() {
return this.java + this.oracle + this.HTML5 + this.CSS3 + this.javaScript;
}
students[i].getAvg = function() {
return students[i].getSum() / 5;
}
}
// 모든 학생의 정보가 담긴 배열의 메소드를 통해 총점과 평균 출력
for(var i in students){
with(students[i]){
document.getElementById("area1").innerHTML += "이름 : " + name + ", 총점 : " + getSum() + ", 평균 : " + getAvg() + "<br>";
}
}
}
</script>
<hr>
<h3>생성자 함수</h3>
<p>new 키워드를 사용해서 객체를 생성할 수 있는 함수를 의미한다.</p>
<button onclick="test2();">실행 확인</button>
<div id="area2" class="area"></div>
<script type="text/javascript">
function Student(name, java, oracle, html5, css3, javascript) {
// 속성 정의
this.name = name;
this.java = java;
this.oracle = oracle;
this.html5 = html5;
this.css3 = css3;
this.javascript = javascript;
// 메소드 정의
this.getSum = function(){
return this.java + this.oracle + this.html5 + this.css3 + this.javascript;
}
this.getAvg = function(){
return this.getSum() / 5;
}
this.toString = function() {
return "이름 : " + this.name + ", 총점 : " + this.getSum() + ", 평균 : " + this.getAvg() + "<br>";
}
}
function test2(){
var student = new Student(prompt('이름을 입력하세요.'),
parseInt(prompt('자바 점수를 입력하세요.')),
parseInt(prompt('오라클 점수를 입력하세요.')),
parseInt(prompt('html5 점수를 입력하세요.')),
parseInt(prompt('css3 점수를 입력하세요.')),
parseInt(prompt('javascript 점수를 입력하세요.')))
var area2 = document.getElementById("area2")
area2.innerHTML += student;
}
</script>
</body>
</html>