Jam's story

명품 html+css+javascript 7장 실습문제 복습 본문

2021-2학기/html+css+javascript

명품 html+css+javascript 7장 실습문제 복습

애플쩀 2021. 12. 2. 12:00 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
<script type="text/javascript">
    function Book(){
        this.title="HTML5";
        this.book="황기태";
        this.price=20000;
    }
    document.write("book : ");
document.write(book.title + ", ");
document.write(book.author + ", ");
document.write(book.price+"<br>");

</script>
</body>
</html>

1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
<script type="text/javascript">
var n=[]; // 배열 n 선언
for(var i=0; i<10; i++) { // 난수 10개 생성
var x = Math.random()*100 + 1;
n[i] = Math.floor(x);
}
for(var i=0; i<10; i++) // 배열 출력
document.write(n[i] + " ");
document.write("<hr>");
var big = n[0];
for(var i=1; 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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <h3>정수 5개를 입력받아 역순으로 출력</h3>
<script type="text/javascript">
    var n=[];
    for(var i=0; i<5; i++){
        n[i]= prompt("정수입력");
    }
    document.write("입력된 수의 배열<br>");
    for(var i=0; i<5; i++){
        document.write(n[i]+" ");
    }
    document.write("<hr>");
    document.write("역순으로 재정렬된 배열<br>");
    for( var i=4; i>=0;i--){
        document.write(n[i]+" ");
    }
</script>
</body>
</html>

3

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
<script type="text/javascript">
var  current=new Date();
if(current.getHours()<12) document.body.style.backgroundColor="lightskyblue";
else document.body.style.backgroundColor="orange";

document.write("현재시간:");
document.write(current.getHours()+"시간");
</script>
</body>
</html>

4

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <h3>일요일은 pink 다른요일은 gold 배경</h3>
<script type="text/javascript">
document.write("<hr>");
    var current=new Date();
    if(current.getDay()==0)
        document.body.style.backgroundColor="pink";
    else 
        document.body.style.backgroundColor="gold";
    document.write("오늘:");
    document.write(current.getDate()+"일, ");
    switch(current.getDay()){
        case 0:
        document.write("일요일");
        break;
        case 1:
        document.write("월요일");
        break;
        case 2:
        document.write("화요일");
        break;
        case 3:
        document.write("수요일");
        break;
        case 4:
        document.write("목요일");
        break;
        case 5:
        document.write("금요일");
        break;
        case 6:
        document.write("토요일");
        break;
    }
</script>
</body>
</html>

5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <h3>names</h3>
<script type="text/javascript">
    function printArray(array){
        for(var i=0; i<array.length; i++){
            document.write(array[i]+" ");
        }
    }
    var names = new Array("wonsun", "jaemoonlee", "kitae", "gracehwang");

    for(var i=0; i<names.length; i++){
        document.write(names[i]+" ");
    }
    document.write("<br>");
    var max=names[0];
    for(var i=1; i<names.length; i++){
        if(max.length<names[i].length) max=names[i];
    }
    document.write(max);
    document.write("<br>");
    var pre=names[0];
    for(var i=0; i<names.length; i++){
        if(names[i]<pre) pre=names[i];
    }
    document.write(pre);
    document.write("<br>");
    names.sort();
    document.write("증가순 이름");
    printArray(names);
</script>
</body>
</html>

6

<!DOCTYPE html>

<html>

<head>

<title>문자열 분할</title>

</head>

<body>

<h3>문자열 분할</h3>

<hr>

<script>

let s = new String(prompt("문자열 입력"));

s = s.split("&");

for(i = 0; i < s.length; i++) {

document.write(s[i] + "<br>");

}

</script>

</body>

</html>

7

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        div{
            display: inline-block;
            width: 60px; padding: 10px;
        }
    </style>
</head>
<body>
<h3>17개의 css2색 이름과 색 </h3>
<script type="text/javascript">
    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++){
    var str="<div style='background-color:";
    str+=colorNames[i];
    str+="'>"+colorNames[i]+"</div>";
    document.write(str);
}
</script>
</body>
</html>

8

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        div{
            display: inline-block;
            width: 150px; padding: 10px;
        }
    </style>
</head>
<body>
<h3>16개의 랜덤한 색 만들기 </h3>
<script type="text/javascript">
for(i = 0; i < 4; i++) {

for(j = 0; j <4; j++) {

var x = Math.random() * 255;

x = Math.floor(x)

var y = Math.random() * 255;

y = Math.floor(y);

var z = Math.random() * 255;

z = Math.floor(z);

document.write("<div style = 'background-color : ");

document.write("rgb(" + x+"," + y + "," + z+")'>");

document.write("rgb(" + x+"," + y + "," + z+")");

document.write("</div>");

}

document.write("<br>");

}

</script>
</body>
</html>

9

new Object()를 이용하여  book객체를 작성하고 객체를 출력 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
<script type="text/javascript">
    var 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+"<br>");
</script>
</body>
</html>

2

리터럴표기법

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
<script type="text/javascript">
    var book={
        title:"HTML5",
        author:"황기태",
        price:20000
    };
    document.write("book : ");
document.write(book.title + ", ");
document.write(book.author + ", ");
document.write(book.price+"<br>");

</script>
</body>
</html>

3

프로토타입 book을 작성하고 book객체를 출력

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
<script type="text/javascript">
    function Book(){
        this.title="HTML5";
        this.book="황기태";
        this.price=20000;
    }
    document.write("book : ");
document.write(book.title + ", ");
document.write(book.author + ", ");
document.write(book.price+"<br>");

</script>
</body>
</html>

10

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
<script type="text/javascript">
    var bookArray=new Array();
    function putArray(data ,i){
        var s=data.split(",");
        var book=new Object();
        book.title=s[0];
        book.author=s[1];
        book.price=parseInt(s[2]);
        bookArray[i]=book;
        document.write(s[0]+","+s[1]+","+s[2]+"<br>");
    }
</script>
<script type="text/javascript">
    function expensive(){
        var exp=new Object();
        exp.price=0;
        for(var i=0; i<5; i++){
            if(exp.price<BookArray[i].price) exp=bookArray[i];
        }
        return exp;
    }
</script>
<script type="text/javascript">
    for(i=0; i<5; i++){
        var data=prompt(",로 분리하면서 책 제목 저자 가격순으로 ");
        putArray(data, i);
    }
    document.write("<hr>");
    var exp=expensive();
    document.wrtie("가장 가격이 비싼 책은"+exp.title);
</script>
</body>
</html>

 

저작자표시

'2021-2학기 > html+css+javascript' 카테고리의 다른 글

예제 9-15 버튼으로 이전 이후  (0) 2021.12.06
예제에서 추가된 사항까지  (0) 2021.12.06
명품 html+css+javascript 10장 실습문제  (0) 2021.11.24
중간고사 시험  (0) 2021.10.21
중간고사연습다시  (0) 2021.10.20
'2021-2학기/html+css+javascript' Related Articles more
Comments