<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style>
#print {
height: 100px;
}
#div2 {
height: 300px;
width: 500px;
border: 1px solid black;
}
</style>
<h1> 객체 실습 문제 </h1>
문제1. <br>
다음 입력 버튼을 클릭하면 이름,나이,주소를 prompt로 입력 받은 후 입력 받은 정보를 <br>
member 라는 객체에 저장하여라.<br>
이 후 출력 버튼을 클릭하면 member 객체 안에 있는 정보를 <br>
출력 창에 출력되도록 만들어라.<br>
(입력을 받지 않은 상태에서 출력 버튼 클릭시 입력을 먼저 해달라는 알림을 띄우도록 하여라)<br>
ex) <br>
이름 : OOO <br>
나이 : OO세 <br>
주소 : XXX XXX XXXX ... <br>
<fieldset>
<legend style="color:red;">출력창</legend>
<div id="print">
</div>
</fieldset><br>
<button onclick="insertMember();">입력</button>
<button onclick="printMember();">출력</button>
<br><br>
<hr>
<hr>
<br><br>
문제2. <br>
다음 입력 버튼 클릭시 학생정보를 3명 저장받아(for문 사용) <br>
테이블을 생성하여 출력하는 코드를 작성하여라. <br>
단, 학생 정보는 객체로 처리하여 저장후 테이블에 입력하고<br>
모든 학생 정보는 객체 배열에 저장하여 console.log(objectArr)로 출력시 <br>
객체 배열 정보가 console.log에 나와야 함 <br>
<center>
<div id="div2">
<table id="memberInfo" border="1px" width="300px" height="250px">
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
<tr>
<td name="name"></td>
<td name="age"></td>
<td name="addr"></td>
</tr>
<tr>
<td name="name"></td>
<td name="age"></td>
<td name="addr"></td>
</tr>
<tr>
<td name="name"></td>
<td name="age"></td>
<td name="addr"></td>
</tr>
</table>
</div>
<labal style="color:red;">학생정보 테이블</labal>
</center>
<button onclick="student();">입력 및 출력</button>
</body>
</html>
<script></script>내부 코드 작성하기
#js_object_ex1.html
[입력]버튼 onclick="insertMember();"
[출력]버튼 onclick="printMember();"
<script>
//member 객체 안에 값이 있는지 판단하기 위해 null 먼저 선언
var member = null;
function insertMember() {
var inputname = prompt("이름 입력")
var inputage = prompt("나이입력");
var inputaddr = prompt("주소입력");
//printMember 함수에서 사용할 수 있도록 전역변수로 선언 (var 없이 선언)
member = {
name: inputname,
age: inputage,
addr: inputaddr
};
console.log(member);
}
function printMember() {
var print = document.getElementById("print");
//입력을 받지 않은 상태에서 출력 버튼 클릭시
if (member == null) {
alert("입력 먼저 해주세요")
} else {
print.innerHTML =
"이름 : " + member.name + "<br>" +
"나이 : " + member.age + "<br>" +
"주소 : " + member.addr + "<br>"
}
}
</script>
#js_object_ex1.html
[입력 및 출력]버튼 onclick="student();"
1) 입력받은 값을 객체배열에 저장 → 객체배열명[인덱스].변수명을 가져와서 테이블td에 값 넣기
<script>
//생성자 함수
function Student(name, age, addr) {
this.name = name;
this.age = age;
this.addr = addr;
}
function student() {
//객체 배열 생성 방법(1)
var objectArr = [];
var nameTd = document.getElementsByName("name");
var ageTd = document.getElementsByName("age");
var addrTd = document.getElementsByName("addr");
for (var i = 0; i < 3; i++) {
var nameInput = prompt((i + 1) + "번째 학생 이름 입력")
var ageInput = prompt((i + 1) + "번째 학생 나이 입력")
var addrInput = prompt((i + 1) + "번째 학생 주소 입력")
var s = new Student(nameInput, ageInput, addrInput)
//객체 배열에 저장
objectArr.push(s);
//(객체배열명[인덱스].변수명)
nameTd[i].innerHTML = objectArr[i].name;
ageTd[i].innerHTML = objectArr[i].age;
addrTd[i].innerHTML = objectArr[i].addr;
}
console.log(objectArr);
}
</script>
2) 입력받은 값을 바로 테이블td에 값으로 넣기 → 객체배열에 저장
<script>
function Student(name, age, addr) {
this.name = name;
this.age = age;
this.addr = addr;
}
function student() {
//객체 배열 생성 방법(2)
var objectArr = new Array();
var nameTd = document.getElementsByName("name");
var ageTd = document.getElementsByName("age");
var addrTd = document.getElementsByName("addr");
for (var i = 0; i < 3; i++) {
var name = prompt((i + 1) + "번째 학생 이름 입력");
var age = prompt((i + 1) + "번째 학생 나이 입력");
var addr = prompt((i + 1) + "번째 학생 주소 입력");
nameTd[i].innerHTML = name;
ageTd[i].innerHTML = age;
addrTd[i].innerHTML = addr;
var s = new Student(name, age, addr);
//객체배열에 저장
objectArr.push(s);
}
console.log(objectArr);
}
</script>
'JavaScript' 카테고리의 다른 글
| 05_BOM(2) (0) | 2020.10.25 |
|---|---|
| 05_BOM(1) (0) | 2020.10.25 |
| 04_객체 (0) | 2020.10.25 |
| 03_함수(실습예제(2)) (0) | 2020.10.22 |
| 03_함수(실습예제(1)) (0) | 2020.10.22 |