1학년/명품 HTML+CSS+JS
7. 자바스크립트 코어 객체와 배열 실습문제 정답
피까츄
2023. 12. 4. 03:30
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>타이틀</title>
</head>
<body>
<h3>난수 10개 생성</h3>
<hr>
<script>
let n=[]; //배열 n 선언
for (let i=0; i<10; i++){ //난수 10개 배열에 저장
n[i] = Math.floor(Math.random()*100)+1;
}
for (let i=0; i<10; i++){ //배열 출력
document.write(n[i] + " ");
}
document.write("<hr>");
let big = n[0]; //big은 제일 큰 수 저장
for (let i=0; i<10; i++){
if (big <= n[i]) big=n[i];
}
document.write("제일 큰 수는 " + big);
document.write("<hr>");
n.sort(); //배열 정렬
for (let i=0; i<10; i++){
document.write(n[i] + " ");
}
</script>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>정수 5개 입력받아 역순으로 출력</title>
</head>
<body>
<h3>정수 5개 입력받아 역순으로 출력</h3>
<hr>
<script>
let user =[]
//5개의 숫자를 배열에 저장
for (let i=0; i<5; i++){
user[i] = prompt("정수입력",0);
}
//배열에 저장된 수 출력
document.write("입력된 수의 배열<br>");
for (let i=0; i<user.length; i++){
document.write(user[i] + " ");
}
document.write("<hr>");
user.sort() //정렬
//배열에 저장된 수 출력
document.write("역순으로 재정렬된 배열<br>");
for (let i=user.length-1; i>0; i--){
document.write(user[i] + " ");
}
</script>
</body>
</html>
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>타이틀</title>
</head>
<body>
<h3>오전이면 lightskyblue, 오후이면 orange 배경</h3>
<hr>
<script>
let now = new Date();
document.write("현재 시간: " + now.getHours() + "시, "
+ now.getMinutes() + "분, " + now.getSeconds() + "초");
if (now.getHours()<12){
document.body.style.backgroundColor = "lightskyblue";
}
else document.body.style.backgroundColor = "orange";
</script>
</body>
</html>
4.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>방문 요일에 따라 변하는</title>
</head>
<body>
<h3>일요일은 pink, 다른 요일은 gold 배경</h3>
<hr>
<script>
let now = new Date();
let day;
switch (now.getDay()){
case 0: day = "일요일"
case 1: day = "월요일"
case 2: day = "화요일"
case 3: day = "수요일"
case 4: day = "목요일"
case 5: day = "금요일"
case 6: day = "토요일"
}
document.write("오늘 : "+ now.getDate() + "일," + day );
if (day =="일요일"){
document.body.style.backgroundColor = "pink";
}
else document.body.style.backgroundColor = "gold";
</script>
</body>
</html>
5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문자열 분할</title>
</head>
<body>
<h3>문자열 분할</h3>
<hr>
<script>
let user = prompt("문자열 입력","");
let array = user.split("&");
for (let i=0; i<array.length; i++){
document.write(array[i] + "<br>");
}
</script>
</body>
</html>
6.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>17개의 CSS2 색이름과 색</title>
<style>
div {
display: inline-block;
width: 60px;
padding: 10px;
}
</style>
</head>
<body>
<h3>17개의 CSS2 색이름과 색</h3>
<hr>
<script>
let colorNames = ["maroon", "red", "orange", "yellow", "olive",
"purple", "fuchsia", "white", "lime", "green",
"navy", "blue", "aqua", "teal", "black", "silver", "gray"];
let text;
for (let i = 0; i < colorNames.length; i++) {
text = "<div style='background-color:";
text += colorNames[i];
text += "'>" + colorNames[i] + "</div>";
document.write(text);
}
</script>
</body>
</html>
7.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>16개의 랜덤한 색 만들기</title>
<style>
div {
display: inline-block;
width: 150px;
padding: 10px;
}
</style>
</head>
<body>
<h3>16개의 랜덤한 색 만들기</h3>
<hr>
<script>
for (let i = 0; i < 16; i++) {
let r = Math.floor(Math.random()*256);
let g = Math.floor(Math.random()*256);
let b = Math.floor(Math.random()*256);
let text;
let colorText = "rgb(" + r + "," + g + "," + b + ")";
text = "<div style='background-color:";
text += colorText;
text += "'>" + colorText + "</div>";
document.write(text);
}
</script>
</body>
</html>
8.(1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>book 객체 만들기</title>
</head>
<body>
<h3>book 객체 만들기</h3>
<hr>
<script>
let book = new Object();
book.title = "HTML5";
book.author = "황기태";
book.price = 20000;
document.write("book : " + book.title +", " + book.author + ", "+ book.price);
</script>
</body>
</html>
(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>book 객체 만들기</title>
</head>
<body>
<h3>book 객체 만들기</h3>
<hr>
<script>
let book = {
title : "HTML5",
author : "황기태",
price : 20000
};
document.write("book : " + book.title +", " + book.author + ", "+ book.price);
</script>
</body>
</html>
(3)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>book 객체 만들기</title>
</head>
<body>
<h3>book 객체 만들기</h3>
<hr>
<script>
function Book(title,author,price) {
this.title = title;
this.author = author;
this.price = price;
}
let book = new Book("HTML5","황기태",20000);
document.write("book : " + book.title +", " + book.author + ", "+ book.price);
</script>
</body>
</html>
9.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>book 객체 배열 만들기</title>
</head>
<body>
<h3>book 객체 배열 만들기</h3>
<hr>
<script>
let bookArray = [];
for (let i=0; i<5; i++){
let book = new Object();
let user = prompt("콤마(,)로 분리하면서 책제목 저자 가격 순으로 입력");
let list = user.split(",");
bookArray[i] = book;
bookArray[i].title = list[0];
bookArray[i].author = list[1];
bookArray[i].price = list[2];
document.write(bookArray[i].title +", " + bookArray[i].author + ", "+ bookArray[i].price + "<br>");
}
document.write("<hr>");
let max = 0;
for (let i=1; i<5; i++){
if (bookArray[i].price > bookArray[max].price)
max = i;
}
document.write("가장 가격이 비싼 책은: " + bookArray[max].title);
</script>
</body>
</html>
10.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>book 객체 배열만들기</title>
</head>
<body>
<h3>book 객체 배열 만들기</h3>
<hr>
<script>
let bookArray = [];
for (let i=0; i<5; i++){
let book = new Object();
let user = prompt("콤마(,)로 분리하면서 책제목 저자 가격 순으로 입력");
let list = user.split(",");
bookArray[i] = book;
bookArray[i].title = list[0];
bookArray[i].author = list[1];
bookArray[i].price = list[2];
document.write(bookArray[i].title +", " + bookArray[i].author + ", "+ bookArray[i].price + "<br>");
}
document.write("<hr>");
let max = 0;
for (let i=1; i<5; i++){
if (bookArray[i].price > bookArray[max].price)
max = i;
}
document.write("가장 가격이 비싼 책은: " + bookArray[max].title);
</script>
</body>
</html>