Web Programming/Front-End 실습

05 5주차 실습 (1~7)

Orangetasteboy 2023. 4. 22. 19:12
 

[실습 자료 열람 홈페이지]

  • 홈페이지 화면

  • 소스코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>변규진의 홈페이지</title>
<style>
    body { background-color: linen; color: green;
            margin-left: 40px; margin-right: 40px; }    /* body 태그의 배경색을 linen, 색을 green, */
    h3 {text-align: center; color: darkred;}            /* h3 태그를 가운데 정렬하고 색을 darkred로 설정 */
    hr { height: 5px; border: solid grey;
            background-color: grey }                    /* 수평 줄의 높이를 5px, border를 solid grey, 배경 색을 grey로 설정 */
    span { color: blue; font-size: 20px; }              /* span 태그의 색을 blue, 글자 크기를 20px로 설정 */
    a { color: black; }                                 /* a 태그의 링크 글자색을 black으로 설정 */
    a:visited { color: black; }                         /* a 태그의 방문한 링크 글자색을 black으로 설정 */
</style>
</head>
<body>
    <h3>변규진의 홈페이지</h3>
    <hr>                                                          <!-- 수평 줄 생성 -->
    <br>                                                          <!-- 줄 바꿈 -->
    <details>
        <summary>과제1</summary>
        <ul>
            <li><a href="과제1-1.html" target="_blank">과제1-1</a></li>     <!-- 순서가 없는 리스트 생성 -->
            <li><a href="과제1-2.html" target="_blank">과제1-2</a></li>     <!-- a 태그를 이용하여 과제 HTML 문서 링크와 연결 -->
            <li><a href="과제1-3.html" target="_blank">과제1-3</a></li>     <!-- target="_blank"로 링크 클릭시 새 탭에 사이트 출력 -->
        </ul>
    </details>
    <details>
        <summary>과제2</summary>
        <ul>
            <li><a href="과제2-1.html" target="_blank">과제2-1</a></li>
            <li><a href="과제2-2.html" target="_blank">과제2-2</a></li>
            <li><a href="과제2-3.html" target="_blank">과제2-3</a></li>
            <li><a href="과제2-4.html" target="_blank">과제2-4</a></li>
            <li><a href="과제2-5.html" target="_blank">과제2-5</a></li>
            <li><a href="과제2-6.html" target="_blank">과제2-6</a></li>
            <li><a href="과제2-7.html" target="_blank">과제2-7</a></li>
        </ul>
    </details>
    <details>
        <summary>과제3</summary>
        <ul>
            <li><a href="과제3-1.html" target="_blank">과제3-1</a></li>
            <li><a href="과제3-2.html" target="_blank">과제3-2</a></li>
            <li><a href="과제3-3.html" target="_blank">과제3-3</a></li>
            <li><a href="과제3-4.html" target="_blank">과제3-4</a></li>
            <li><a href="과제3-5.html" target="_blank">과제3-5</a></li>
            <li><a href="과제3-6.html" target="_blank">과제3-6</a></li>
            <li><a href="과제3-7.html" target="_blank">과제3-7</a></li>
            <li><a href="과제3-8.html" target="_blank">과제3-8</a></li>
            <li><a href="과제3-9.html" target="_blank">과제3-9</a></li>
            <li><a href="과제3-10.html" target="_blank">과제3-10</a></li>
            <li><a href="과제3-11.html" target="_blank">과제3-11</a></li>
        </ul>
    </details>
    <details>
        <summary>과제4</summary>
        <ul>
            <li><a href="과제4.html" target="_blank">끝말잇기 게임 만들기</a></li>
        </ul>
    </details>
    <details>
        <summary>과제5</summary>
        <ul>
            <li><a href="과제5-1.html" target="_blank">과제 5-1</a></li>
            <li><a href="과제5-2.html" target="_blank">과제 5-2</a></li>
            <li><a href="과제5-3.html" target="_blank">과제 5-3</a></li>
            <li><a href="과제5-4.html" target="_blank">과제 5-4</a></li>
            <li><a href="과제5-5.html" target="_blank">과제 5-5</a></li>
            <li><a href="과제5-6.html" target="_blank">과제 5-6</a></li>
            <li><a href="과제5-7.html" target="_blank">과제 5-7</a></li>
        </ul>
    </details>
</body>
</html>

 

[실습 5-1]

 

  • 프로그램 알고리즘
    1. 정수인 문자열을 입력한다.
    2. 입력받은 문자열이 정수인지 판별한다.
    3. 정수가 아니면 오류 문구를 출력한다.
    4. 정수이면 별을 1개부터 입력받은 정수까지 하나씩 늘려가며 출력한다.
 
  • 홈페이지 화면
    • 양의 정수가 입력된 경우

  • 양의 정수가 입력되지 않은 경우

  • 소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>과제 5-1</title>
</head>
<script>
    function star(num) { // 별을 출력하는 함수 정의
        n = parseInt(num); // 입력받은 num을 숫자로 변환하여 n에 저장
        if(isNaN(n)) { // n이 숫자가 아니면 오류 문구 출력
            document.write("입력 오류 입니다.");
        }
        for(i = 0; i < n; i++) { // 이중 for문으로 별 문자를 n층으로 출력
            for(j = 0; j <= i; j++) {
                document.write("*");
            }
            document.write("<br>")
        }
    }
</script>
<body>
    <h3>별 문자 출력하기</h3>
    <hr>
    <script>
        var num = prompt("정수를 입력하세요","1"); // prompt 함수로 정수 입력 받기
        star(num); // star 함수 호출
    </script>
</body>
</html>

 

[실습 5-2]

  • 프로그램 알고리즘
    1. &로 각 문자열을 구분하여 문자열들을 입력한다.
    2. 입력된 문자열들을 &을 기준으로 나누어 배열의 각 요소에 저장한다.
    3. 배열의 각 요소에 저장된 문자열들을 낱개로 출력한다.

 

  • 홈페이지 화면

  • 소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>과제 5-2</title>
</head>
<body>
<script>
    document.write("<h3>문자열 분할</h3><hr>");
    var A = prompt("문자열 입력"); // 문자열을 입력받아 string 객체 생성
    var arr = A.split("&"); // &를 기준으로 A string을 분할하여 arr 배열에 저장
    for(var i=0; i<arr.length; i++) { // arr 배열의 각 요소를 출력
        document.write(arr[i]+"<br>");
    }
</script>
</body>
</html>

 

[실습 5-3]

  • 프로그램 알고리즘
    • 책 제목, 저자, 가격을 “,”로 구분하여 입력한다.
    • 입력받은 문자열을 “,”를 기준으로 나누어 객체의 요소에 저장한다.
    • 이것을 5번 반복하여 총 5개의 도서 정보를 입력받는다.
    • 5개의 도서 정보를 출력한다.
    • 각 도서 정보의 가격을 비교하여 최대 값인 도서의 제목을 출력한다.

 

  • 홈페이지 화면

  • 소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>과제 5-3</title>
</head>
<body>
    <h3>book 객체 배열 만들기</h3>
    <hr>
    <script>
        var bookarr = new Array(); // 책 배열 생성
        for(i=0 ; i<5; i++)
        {
            var input = prompt("콤마(,)로 분리하면서 첵제목 저자 가격 순으로 입력");
            var info = input.split(","); // ,를 기준으로 input 문자열 분리
            var book = new Object(); // book 객체 생성
            book.title = info[0]; // book 객체의 title에 info의 책 제목 저장
            book.author = info[1]; // book 객체의 author에 info의 저자 저장
            book.price = info[2]; // book 객체의 price에 info의 가격 저장
            bookarr[i] = book;
        }

        for(i=0 ; i<bookarr.length ; i++) // bookarr 배열의 객체들을 출력
        {
            document.write(bookarr[i].title + ",");
            document.write(bookarr[i].author + ",");
            document.write(bookarr[i].price + "<br>");
        }

        var expensive = bookarr[0];
        for(i=0 ; i<bookarr.length ; i++) // 가장 비싼 책 비교
        {
            if(bookarr[i].price > expensive.price)
                expensive = bookarr[i];
        }
        document.write("<hr>");
        document.write("<br> 가장 가격이 비싼 책은 " + expensive.title); // 가장 비싼 책 출력
    </script>
</body>
</html>

 

[실습 5-4]

  • 프로그램 알고리즘
    1. 재료를 배열에 저장한다.
    2. 저장이 끝나고 저장된 양의 배열 크기만큼 반복하여 list를 만들어서 배열의 요소인 재료를 출력한다.

 

  • 홈페이지 화면

  • 소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>과제 5-4</title>
</head>
<body>
    <h3>라면을 만드는데 필요한 재료</h3>
    <hr>
    <script>
        var itemlist = ["라면", "계란", "물", "파"]; // 재료 배열 생성
        document.write("<ul>");

        // 재료 배열의 길이만큼 반복하여 모든 채료 출력
        for (var i = 0; i <= itemlist.length - 1; i++) {
            document.write("<li>"+itemlist[i]+"</li>");
        }
        document.write("</ul>");
</script>
</body>
</html>

 

[실습 5-5]

  • 프로그램 알고리즘
    • 리스트에 해당하는 부분을 마우스로 클릭한다.
    • 마우스로 클릭된 것이 인식되면 리스트의 배경색을 변경한다.

 

  • 홈페이지 화면

  • 소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>과제 5-5</title>
</head>
<body>
    <h3>라면을 끓이는 순서</h3>
    <hr>
    <ol type="A" onclick="this.style.backgroundColor='yellowgreen'">
        <li>물을 끓인다.</li>
        <li>라면과 스프를 넣는다.</li>
        <li>파를 썰어 넣는다.</li>
        <li>5분 후 <strong>맛있게</strong> 먹는다.</li>
    </ol>
    <script>
        var liArray = document.getElementsByTagName("li");
        for (i = 0; i < liArray.length; i++) {
            var obj = liArray[i];
            obj.style.color = 'green';
        }
    </script>
</body>
</html>

 

[실습 5-6]

  • 프로그램 알고리즘
    1. border 버튼을 누르면 “C언어“ 글자에 테두리가 생긴다.
    2. p 버튼을 누르면 태그의 개수를 알림창에 띄운다.

 

  • 홈페이지 화면

  • 소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>과제 5-6</title>
</head>
<script>
    function line() {
        // getElementById() 함수로 id=mySpan인 태그에 접근
        var i = document.getElementById("mySpan");
        i.style.border = "2px dotted violet"
    }
    function tag_number() {
        // getElementsByTagName() 함수로 p 태그에 접근
        var i = document.getElementsByTagName("p");
        alert("<p> 태그의 개수는 "+i.length); // p 태그의 개수 출력
    }
</script>
<body>
    <h3>자바스크립트란?
        <button onclick="line()">border</button>
        <button onclick="tag_number()">p</button>
    </h3>
    <hr>
    <p>자바스크립트는 웹 프로그래밍 언어로서 웹 페이지를 동적 변경시킬 수 있다.</p>
    <p><span id="mySpan">C언어</span>를 아는 사용자는 빠르게 학습할 수 있다.</p>
    <p>이벤트 등 GUI 프로그래밍에 필요한 요소들이 있어 학습에 약간의 어려움이 있다.</p>
</body>
</html>

 

[실습 5-7]

  • 프로그램 알고리즘
    1. 스페이드 7이 제일 위에 있다.
    2. 스페이드 7을 클릭하면 스페이드 7은 맨 아래로 가고 스페이드 3이 제일 위로 올라온다.
    3. 스페이드 3을 클릭하면 스페이드 3은 맨 아래로 가고 스페이드 2가 제일 위로 올라온다.
    4. 스페이드 2를 클릭하면 스페이드 2는 맨 아래로 가고 스페이드 A가 제일 위로 올라온다.
    5. 스페이드 A를 클릭하면 스페이드 A는 맨 아래로 가고 스페이드 7이 제일 위로 올라온다.
    6. 1~5 반복

 

  • 홈페이지 화면

  • 소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>과제 5-6</title>
    <style>
        /* position을 absolute로 지정 */
        div { position: absolute; }
        img { position: absolute; }
    </style>
</head>
<body>
    <h3>z-index 스타일 프로퍼티</h3>
    <hr>
    <div>
        <img id="spadeA" src="spadeA.png" width="100" height="140" alt="스페이드A">
        <img id="spade2" src="spade2.png" width="100" height="140" alt="스페이드2">
        <img id="spade3" src="spade3.png" width="100" height="140" alt="스페이드3">
        <img id="spade7" src="spade7.png" width="100" height="140" alt="스페이드7">
    </div>
    <script>
        // getElementsByTagName() 함수로 img 태그에 접근
        var imgarr = document.getElementsByTagName("img");
        for (i = 0; i < imgarr.length; ++i) {
            var img = imgarr[i]; // 이미지 4개를 각각 배열에 저장
            img.style.zIndex = i; // 이미지에 z-index 우선순위 설정
            img.style.left = "10px";
            img.style.top = "20px";
            img.onclick = next; // 이미지를 클릭하면 next() 함수 실행
        }
        function next() { // 클릭된 카드가 맨 밑으로 들어가고 바로 밑의 카드가 보이는 함수 정의
            for (i = 0; i < imgarr.length; ++i) {
                var img = imgarr[i];
                img.style.zIndex++; // z-index 우선순위에 1을 더해주기
                img.style.zIndex %= imgarr.length;
            }
        }
    </script>
</body>
</html>