728x90
1.1에서 100(100포함)사이의 난수 10개를 생성하여 plots 이름의 배열에 저장하고, 배열에 저장된 수 중 가장 큰 수를 출력하는 웹 페이지를 작성하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>난수</title>
</head>
<body>
<h3>난수 10개 생성</h3>
<hr>
<script>
var n = []; //빈 배열 n생성
for(var i=0;i<10;i++){ //난수 10개 배열 저장
n[i]=Math.floor(Math.random()*100)+1;
}
for(var i=0;i<10;i++){ //배열 출력
document.write(n[i]+' ');
}
document.write("<hr>");
var big = n[0];
for(var i=0;i<10;i++){ //큰 수 찾기
if(n[i]>big)
big = n[i];
}
document.write("제일 큰 수는 "+big);
document.write("<hr>");
n.sort();//배열 정렬
for(var i=0;i<10;i++){ //배열 출력
document.write(n[i]+' ');
}
</script>
</body>
</html>
2.prompt() 함수를 반복 호출하여 5개의 정수를 입력받아 배열에 저장하고 입력된 반대 순으로 출력하는 웹 페이지를 작성하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>정수 5개 입력받아 역순으로 출력</title>
</head>
<body>
<h3>정수 5개 입력받아 역순으로 출력</h3>
<hr>
<script>
var list = new Array(5);
for(var i=0;i<list.length;i++){
list[i]=prompt("정수 입력","");
}
document.write('입력된 수의 배열<br>');
for(var i=0;i<list.length;i++){
document.write(list[i]+' ');
}
list.reverse();
document.write('<br>역순으로 재정렬된 배열<br>');
for(var i=0;i<list.length;i++){
document.write(list[i]+' ');
}
</script>
</body>
</html>
3.예제7-6을 수정하여 웹 페이지를 접속할 때 오전이면 배경색을 lightskyblue로, 오후이면 orange로 출력되게 하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>방문 시간에 따른 배경 변화</title>
<script>
function AMColor(obj){
obj.document.body.style.backgroundColor = "lightskyblue";
}
function PMColor(obj){
obj.document.body.style.backgroundColor = "Orange";
}
</script>
</head>
<body>
<h3>오전이면 lightskyblue, 오후이면 orange 배경</h3>
<hr>
<script>
var current = new Date();
var hour = current.getHours();
if(hour<=12) AMColor(this);
else PMColor(this);
document.write('현재 시간: ');
document.write(current.getHours(),'시, ');
document.write(current.getMinutes(),'분, ');
document.write(current.getSeconds(),'초');
</script>
</body>
</html>
4.예제 7-6을 수정하여, 웹 페이지를 접속할 때 월요일~토요일이면 배경색을 gold로, 일요일이면 pink로 출력되게 하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>방문 요일</title>
<script>
function goldColor(obj) {
obj.document.body.style.backgroundColor = "gold";
}
function pinkColor(obj) {
obj.document.body.style.backgroundColor = "pink";
}
</script>
</head>
<body>
<h3>일요일은 pink, 다른 요일은 gold 배경</h3>
<hr>
<script>
var current = new Date();
var day;
switch(current.getDay()){
case 0:
day="일요일";
break;
case 1:
day="월요일";
break;
case 2:
day="화요일";
break;
case 3:
day="수요일";
break;
case 4:
day="목요일";
break;
case 5:
day="금요일";
break;
case 6:
day="토요일";
break;
}
document.write("오늘 : "+current.getDate()+"일, "+day);
if(day=="일요일") pinkColor(this);
else goldColor(this);
</script>
</body>
</html>
5.이름 문자열이 들어있는 배열 names는 다음과 같다.
var names = new Array("wonsun","jaemoonlee","kitae","gracehwang");
다음 문항에서 요구하는 자바스크립트 코드를 완성하라.
(1)names배열에 들어 있는 각 이름을 출력하라.
(2)names배열에서 가장 긴 이름을 출력하라.
(3names배열에서 사전에서 가장 먼저 나오는 이름을 출력하라.
(4)names배열을 증가 순으로 재정렬하여 출력하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문자열 배열 다루기</title>
</head>
<body>
<h3>문자열 배열 다루기</h3>
<hr>
<script>
var names = new Array("wonsun","jaemoonlee","kitae","gracehwang");
//1.
document.write('이름: ');
for(var i=0;i<names.length;i++){
document.write(names[i]+' ');
}
document.write('<br>');
//2.
document.write('가장 긴 이름: ');
var longname = names[0];
var longlength = names[0].length;
for(var i=0;i<names.length;i++){
if(names[i].length>longlength){
longname = names[i];
longlength = names[i].length;
}
}
document.write(longname+'<br>');
//3.
names.sort();
document.write('가장 먼저 나오는 이름 : '+names[0]+'<br>');
//4.
document.write('증가순 이름: ');
for(var i=0;i<names.length;i++){
document.write(names[i]+' ');
}
document.write('<br>');
</script>
</body>
</html>
6.prompt()함수를 호출하여 사용자로부터 문자열을 입력받고 "&"문자를 기준으로 분할하여 출력하는 웹 페이지를 작성하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문자열 분할</title>
</head>
<body>
<h3>문자열 분할</h3>
<hr>
<script>
var exp = prompt("문자열 입력","");
var list = exp.split('&');
for(var i=0;i<list.length;i++){
document.write(list[i]+'<br>');
}
</script>
</body>
</html>
7.다음과 같이 색 이름을 가진 문자열 배열 colorNames를 만들고, 문자열을 <div>태그로 출력하라. <div>태그의 배경색은 해당 색으로 칠해라.
var colorNames =["maroon","red","orange","yellow","olive","purple","fuchsia","white","lime","green","navy","blue","aqua","teal","black","silver","gray"]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>17개의 CSS 색이름과 색</title>
<style>
div{
display: inline-block;
width: 60px;
padding: 10px;
}
</style>
</head>
<body>
<h3>17개의 CSS 색이름과 색</h3>
<hr>
<script>
var colorNames = ["maroon","red","orange","yellow","olive","purple","fuchsia","white","lime","green","navy","blue","aqua","teal","black","silver","gray"];
for(var i=0;i<colorNames.length;i++){
document.write('<div style="background:'+colorNames[i]+'">'+colorNames[i]+'</div>');
}
</script>
</body>
</html>
8.다음 브라우저 화면과 같이, document.write()를 이용하여 16개의 <div>태그를 출력하고 각 <div>태그에 출력되는 배경색을 랜덤한 색으로 칠하는 웹 페이지를 작성하라. 웹 페이지를 로드할 때마다 색이 랜덤하게 바뀐다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>16개의 랜덤한 색 만들기</title>
<style>
div{
display: inline-block;
width: 150px;
padding: 10px;
}
</style>
</head>
<body>
<h3>17개의 CSS 색이름과 색</h3>
<hr>
<script>
for(var i=0;i<16;i++){
var color = 'rgb('+Math.floor(Math.random()*257)+','+Math.floor(Math.random()*257)+','+Math.floor(Math.random()*257)+')';
document.write('<div style="background:'+color+'">'+color+'</div>');
}
</script>
</body>
</html>
9.book 객체를 만들려고 한다. 이 객체는 title, author, price이 3개의 프로퍼티로 구성되며 각 프로퍼티는 "HTML5","황기태",20000로 각각 초기화된다.
(1)new Object()를 이용하여 book 객체를 작성하고 객체를 출력하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>book객체 만들기</title>
<script>
var book = new Object();
book.title = "HTML5";
book.author = "황기태";
book.price = 20000;
</script>
</head>
<body>
<h3>book 객체 만들기</h3>
<hr>
<script>
document.write('book : '+book.title+', '+book.author+', '+book.price);
</script>
</body>
</html>(2)리터럴 표기법으로 book객체를 작성하고 객체를 출력하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>book객체 만들기</title>
<script>
var book = {
title : "HTML5",
author : "황기태",
price : 20000
};
</script>
</head>
<body>
<h3>book 객체 만들기</h3>
<hr>
<script>
document.write('book : '+book.title+', '+book.author+', '+book.price);
</script>
</body>
</html>(3)프로토타입 Book을 작성하고 book객체를 출력하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>book객체 만들기</title>
<script>
function Book(title,author,price) {
this.title = title;
this.author = author;
this.price = price;
}
</script>
</head>
<body>
<h3>book 객체 만들기</h3>
<hr>
<script>
var book = new Book('HTML5','황기태',20000);
document.write('book : '+book.title+', '+book.author+', '+book.price);
</script>
</body>
</html>
10.문제 9의 (1)에서 new Object를 이용하여 생성된 book 객체를 이용하여 book의 객체 배열 bookArray를 생성하고, 다음과 같이 prompt() 함수를 통해 5개 책 정보를 입력받은 후 가장 비싼 책의 이름을 출력하는 웹 페이지를 작성하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>book객체 만들기</title>
</head>
<body>
<h3>book 객체 만들기</h3>
<hr>
<script>
var bookArray = new Array(5);
for(var i=0;i<bookArray.length;i++){
var input = prompt('콤마(,)로 분리하면서 책제목 저자 가격 순으로 입력','');
var inputlist = input.split(',');
bookArray[i] = new Object();
bookArray[i].title = inputlist[0];
bookArray[i].author = inputlist[1];
bookArray[i].price = inputlist[2];
}
for(var i=0;i<bookArray.length;i++){
document.write(bookArray[i].title+', '+bookArray[i].author+', '+bookArray[i].price+'<br>');
}
expensiveBook = bookArray[0].title;
expensivePrice = bookArray[0].price;
for(var i=0;i<bookArray.length;i++){
if(bookArray[i].price>expensivePrice){
expensiveBook = bookArray[i].title;
expensivePrice = bookArray[i].price;
}
}
document.write('가장 가격이 비산 책은 '+expensiveBook);
</script>
</body>
</html>728x90
'HTML+CSS+JavaScript' 카테고리의 다른 글
| [HTML5+CSS3+Javascript 웹프로그래밍]9장 실습문제 (0) | 2021.11.14 |
|---|---|
| [HTML5+CSS3+Javascript 웹프로그래밍]8장 실습문제 (0) | 2021.11.14 |
| [HTML5+CSS3+Javascript 웹프로그래밍]7장 연습문제 (0) | 2021.10.15 |
| [HTML5+CSS3+Javascript 웹프로그래밍]3장 실습문제 (0) | 2021.10.15 |
| [HTML5+CSS3+Javascript 웹프로그래밍]4장 실습문제 (0) | 2021.10.12 |