Open Challenge
p.340
다음 배열에 들어 있는 각 문자열을 다음 브라우저 화면과 같이 리스트의 아이템으로 출력하는 웹 페이지를 작성하라.
파일명 : openChallenge.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>라면을 만드는데 필요한 재료</h3>
<hr>
<script>
let itemlist = ["라면", "계란", "물", "파"];
for (let i = 0; i < itemlist.length; i++) {
document.write("<li>" + itemlist[i] + "</li>")
}
</script>
</body>
</html>
실습문제
1. 1에서 100(100 포함) 사이의 난수 10개를 생성하여 plots 이름의 배열에 저장하고, 배열에 저장된 수 중 가장 큰 수를 출력하는 웹 페이지를 작성하라.
파일명 : challenge1.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>난수 10 개 생성</h3>
<hr>
<script>
let n = [];
for (let i = 0; i < 10; i++) {
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];
for (let i = 0; i < 10; i++) {
if (big < n[i]) big = n[i]
}
document.write("제일 큰 수는 " + big);
document.write("<hr>")
n.sort(function (a, b) {
return a - b
})
for (let i = 0; i < 10; i++) {
document.write(n[i] + " ")
}
</script>
</body>
</html>
2. prompt() 함수를 반복 호출하여 5개의 정수를 입력받아 배열에 저장하고 입력된 반대 순으로 출력하는 웹 페이지를 작성하라.
파일명 : challenge2.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>정수 5개 입력받아 역순으로 출력</h3>
<hr>
<script>
let n = new Array(5)
for (let i = 0; i < n.length; i++) {
let num = prompt("정수 입력")
n[i] = num
}
document.write("입력된 수의 배열")
document.write("<br>")
for (let i = 0; i < n.length; i++) {
document.write(n[i] + " ")
}
document.write("<hr>")
n.sort(function (a, b) {
return b - a
})
document.write("역순으로 재정렬된 배열")
document.write("<br>")
for (let i = 0; i < n.length; i++) {
document.write(n[i] + " ")
}
</script>
</body>
</html>
3. 예제 7-6을 수정하여 웹 페이지를 접속할 때 오전이면 배경색을 lightskyblue로, 오후이면 orange로 출력되게 하라.
파일명 : challenge3.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>방문 시간에 따라 변하는 배경색</title>
</head>
<body>
<h3>오전이면 lightskyblue, 오후이면 orange 배경
</h3>
<hr>
<script>
let current = new Date()
if (current.getHours < 12) {
document.body.style.backgroundColor = "lightskyblue";
}
else
document.body.style.backgroundColor = "orange";
document.write("현재 시간 : " + current.getHours() + "시,")
document.write(current.getMinutes() + "분,")
document.write(current.getSeconds() + "초")
</script>
</body>
</html>
4. 예제 7-6을 수정하여, 웹 페이지를 접속할 때 월요일~토요일이면 배경색을 gold로, 일요일이면 pink로 출력되게 하라.
파일명 : challenge4.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>방문 시간에 따라 변하는 배경색</title>
</head>
<body>
<h3>일요일은 pink, 다른 요일은 gold배경
</h3>
<hr>
<script>
let current = new Date()
if (current.getDay() == 0) {
document.body.style.backgroundColor = "pink"
}
else
document.body.style.backgroundColor = "gold"
document.write("오늘 : " + current.getDate() + "일,")
let result
switch (current.getDay()) {
case 0:
result = "일요일"
break;
case 1:
result = "월요일"
break;
case 2:
result = "화요일"
break;
case 3:
result = "수요일"
break;
case 4:
result = "목요일"
break;
case 5:
result = "금요일"
break;
case 6:
result = "토요일"
break;
}
document.write(result)
</script>
</body>
</html>
5. 이름 문자열이 들어 있는 배열 names는 다음과 같다.
다음 문항에서 요구하는 자바스크립트 코드를 작성하라.
(1) names 배열에 들어 있는 각 이름을 출력하라.
(2) names 배열에서 가장 긴 이름을 출력하라.
(3) names 배열에서 사전에서 가장 먼저 나오는 이름을 출력하라.
(4) names 배열에서 증가 순으로 재 정렬하여 출력하라.
파일명 : challenge5.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>문자열 배열 다루기</h3>
<hr>
<script>
let names = new Array("wonsun", "jaemoonlee", "kitae", "gracehwang")
//(1) names 배열에 들어 있는 각 이름을 출력하라.
document.write("이름 : ")
for (let i = 0; i < names.length; i++) {
document.write(names[i] + " ")
}
document.write("<br>")
//(2) names 배열에서 가장 긴 이름을 출력하라.
let max = names[0]
for (let i = 0; i < names.length; i++) {
if (max.length < names[i].length)
max = names[i]
}
document.write("가장 긴 이름 : ")
document.write(max + "<br>")
//(3) names 배열에서 사전에서 가장 먼저 나오는 이름을 출력하라.
names.sort()
document.write("가장 먼저 나오는 이름 : " + names[0] + "<br>")
//(4) names 배열을 증가 순으로 재 정렬하여 출력하라.
document.write("증가순 이름 : ")
for (let i = 0; i < names.length; i++) {
document.write(names[i] + " ")
}
</script>
</body>
</html>
6. prompt() 함수를 호출하여 사용자로부터 문자열을 입력받고 "&" 문자를 기준으로 분할하여 출력하는 웹 페이지를 작성하라.
※ Hint
prompt() 함수를 이용하여 입력받은 문자열을 String에 담고, String 객체의 split() 함수를 이용하면 "&"를 기준으로 분할된 문자열을 배열로 얻을 수 있다.
파일명 : challenge6.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>문자열 분할</h3>
<hr>
<script>
let line = prompt("문자열 입력", "")
//split 함수는 배열을 리턴함
let tmp = line.split("&")
for (let i = 0; i < tmp.length; i++) {
document.write(tmp[i] + "<br>")
}
</script>
</body>
</html>
7. 다음과 같이 색 이름을 가진 문자열 배열 colorNames를 만들고, 문자열을 <div> 태그로 출력하라.
<div> 태그의 배경색은 해당 색으로 칠하라.
※ Hint
<div> 태그를 인라인 블록 박스로 출력하기 위해서는 다음 CSS3 스타일 시트가 필요하다.
div { display : inline-block; width : 60px; padding : 10px; }
파일명 : challenge7.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
<style>
div {
display: inline-block;
width: 60px;
padding: 10px
}
</style>
</head>
<body>
<script>
let colorNames = ["maroon", "red", "orange", "yellow", "olive", "purple", "fuchsia", "white", "lime", "green", "navy", "blue", "aqua", "teal"
, "black", "silver", "gray"]
for (let i = 0; i < colorNames.length; i++) {
document.write("<div style='background-color:" + colorNames[i] + "'>" + colorNames[i] + "</div>")
}
</script>
</body>
</html>
8. 다음 브라우저 화면과 같이, document.write()를 이용하여 16개의 <div> 태그를 출력하고 각 <div> 태그에 출력되는 배경색을 랜덤 한 색으로 칠하는 웹 페이지를 작성하라. 웹 페이지를 로드할 때마다 색이 랜덤 하게 바뀐다.
※ Hint
<div> 태그를 인라인 블록 박스로 출력하기 위해서는 다음 CSS3 스타일 시트가 필요하다.
div { display : inline-block; width : 150px; padding : 10px; }
파일명 : challenge8.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
<style>
div {
display: inline-block;
width: 150px;
padding: 10px
}
</style>
</head>
<body>
<script>
let colorNames = []
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);
colorNames[i] = "rgb(" + r + "," + g + "," + b + ")"
}
for (let i = 0; i < 16; i++) {
document.write("<div style='background-color:" + colorNames[i] + "'>" + colorNames[i] + "</div>")
}
</script>
</body>
</html>
9. book 객체를 만들려고 한다. 이 객체는 title, author, price의 3개의 프로퍼티로 구성되며 각 프로퍼티는 "HTML5", "황기태", 20000으로 각각 초기화 된다.
(1) new Object()를 이용하여 book 객체를 작성하고 객체를 출력하라.
(2) 리터럴 표기법으로 book객체를 작성하고 객체를 출력하라.
(3) 프로토타입 Book을 작성하고 book 객체를 출력하라.
파일명 : challenge9_1.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>book 객체 만들기</h3>
<hr>
<script>
let book = new Object();
book.title = "HTML5"
book.author = "황기태"
book.price = 20000
document.write("book : ")
document.write(book.title + ", ")
document.write(book.author + ", ")
document.write(book.price)
</script>
</body>
</html>파일명 : challenge9_2.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>book 객체 만들기</h3>
<script>
let book = {
title : "HTML5",
author : "황기태",
price : 20000
}
document.write("book : ")
document.write(book.title+", ")
document.write(book.author+", ")
document.write(book.price)
</script>
</body>
</html>파일명 : challenge9_3.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>book 객체 만들기</h3>
<script>
function Book() {
this.title = "HTML5"
this.author = "황기태"
this.price = 20000
}
let book = new Book()
document.write("book : ")
document.write(book.title + ", ")
document.write(book.author + ", ")
document.write(book.price)
</script>
</body>
</html>
10. 문제 9의 (1)에서 new Object()를 이용하여 생성한 book 객체를 이용하여 book의 객체 배열 bookArray를 생성하고, 다음과 같이 prompt() 함수를 통해 5개 책 정보를 입력받은 후 가장 비싼 책의 이름을 출력하는 웹 페이지를 작성하라.
파일명 : challenge10.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>book 객체 만들기</h3>
<hr>
<script>
let book = new Object();
let bookArray = new Array(5);
let result
let resultIndex
for (let i = 0; i < bookArray.length; i++) {
bookArray[i] = prompt("콤마(,)로 분리하면서 책제목 저자 가격 순으로 입력")
let tmp = bookArray[i].split(",")
let book = new Object();
book.title = tmp[0]
book.author = tmp[1]
book.price = tmp[2]
bookArray[i] = book
}
result = bookArray[0].price
for (let i = 0; i < bookArray.length; i++) {
if (result < bookArray[i].price) {
result = bookArray[i].price
resultIndex = i
}
}
for (let i = 0; i < bookArray.length; i++) {
document.write(bookArray[i].title + ", ")
document.write(bookArray[i].author + ", ")
document.write(bookArray[i].price + "<br>")
}
document.write("<hr>")
document.write("가장 가격이 비싼 책은 " + bookArray[resultIndex].title)
</script>
</body>
</html>