혜랑's STORY

[WEB 8주차 실습] : JavaScript 본문

2020 SISS 21기 활동/여름방학 WEB

[WEB 8주차 실습] : JavaScript

hyerang0125 2020. 8. 25. 13:38

#innerHTML 속성

 - 화면 상의 버튼을 누르면 사용자로부터 promt를 통해 문자열을 입력받고, 입력받은 문자열을 버튼 아래 화면에 표시하는 웹문서를 작성하시오. 이때 출력할 자리인 <p>요소에 innerHTML 속성을 이용하여 <h1>요소를 추가하는 코드를 작성하시오.

- 실행결과

Chapter10-(1) 실습 결과

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
    <script>
        function read() {
            var string = prompt();
            document.getElementById('str').innerHTML = "<h1>" + string + "</h1>";
        }
    </script>
    
    <input id="btn1" type="button" value="Button" onclick="read();"/>
    
    <p id="str">

    </p>

</BODY>
</HTML>

 

#스타일 속성 변경하기

- 자바스크립트를 사용하여 style 속성에 접근하여 배경색을 변경하는 동적 웹문서를 만든다. 두개의 버튼을 만들고 파란색 버튼을 누르면 배경색이 파란색으로 붉은색 버튼을 누르면 배경색이 붉은색으로 변경되는 웹 문서를 작성한다.

- 실행결과

Chapter10-(3) 실행결과

<HTML>
<HEAD>
<TITLE></TITLE>
    <style>
        #box{
            width:1860px;
            height:895px;
        }
    </style>
</HEAD>
<BODY>
    <script>
        function changeColor(id, color) {
            document.getElementById(id).style.background = color;
        }
    </script>

    <button onclick="changeColor('box','blue');">Blue</button>
    <button onclick="changeColor('box','red');">Red</button>

    <div id="box">

    </div>

</BODY>
</HTML>

 

#계산기 만들기

- 두 개의 값을 텍스트 위젯으로 받아서 덧셈, 뺄셈, 곱셈, 나눗섬을 하는 웹문서를 작성하시오. 이 때 <select>요소로 연산자를 입력받아서 계산한다.

- 실행결과

Chapter10-(3) 실행결과

<HTML>
<HEAD>
<TITLE></TITLE>
    <style>
        input{
            width:70px;
        }
        select{
            width:70px;
        }
    </style>
</HEAD>
<BODY>
    <script>

        function cal() {
            var x = document.getElementById('a').value;
            var y = document.getElementById('b').value;

            if (document.getElementById('op').value == '+')
                document.getElementById('result').value = parseInt(x) + parseInt(y);
            else if (document.getElementById('op').value == '-')
                document.getElementById('result').value = parseInt(x) - parseInt(y);
            else if (document.getElementById('op').value == '*')
                document.getElementById('result').value = parseInt(x) * parseInt(y);
            else
                document.getElementById('result').value = parseInt(x) / parseInt(y);
        }
    </script>

    <form>
        <input type="text" id="a" />
        <select id="op">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" id="b" />
        <input type="button" value="=" onclick="cal();" />
        <input type="text" id="result" />
    </form>


</BODY>
</HTML>

 

#고양이 카페 사이트 만들기

- 각 고양이 이미지를 클릭하면 prompt로 "고양이 이름을 지어주세요."가 출력되고 이미지 아래에 사용자가 넣은 고양이 이름이 동적으로 생성되는 웹 문서를 작성한다.

- 실행결과

Chapter10-(4) 실행결과

<HTML>
<HEAD>
<TITLE></TITLE>
    <style>
        h1{
            text-align:center;
        }

        img{
            width:450px;
        }
        div{
            text-align:center;
            width:450px;
            float:left;
        }
    </style>
</HEAD>
<BODY>
    <script>
        function changeName(id) {
            var name = prompt("고양이의 이름을 지어주세요!");
            document.getElementById(id).innerHTML = "<h3>"+name+"</h3>";
        }
    </script>

    <h1>고양이 카페에 오신 걸 환영합니다!</h1>

    <img src="https://images.pexels.com/photos/1741205/pexels-photo-1741205.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" onclick="changeName('name1');"/>
    <img src="https://images.pexels.com/photos/1770918/pexels-photo-1770918.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" onclick="changeName('name2');"/>
    <img src="https://images.pexels.com/photos/2071873/pexels-photo-2071873.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" onclick="changeName('name3');"/>
    <img src="https://images.pexels.com/photos/977935/pexels-photo-977935.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" onclick="changeName('name4');"/>

    <div id="name1"></div>
    <div id="name2"></div>
    <div id="name3"></div>
    <div id="name4"></div>
</BODY>
</HTML>
저작자표시 비영리 변경금지

'2020 SISS 21기 활동 > 여름방학 WEB' 카테고리의 다른 글

2020 하계방학 웹프로젝트  (0) 2020.09.01
[WEB 8주차 이론] : JavaScript  (0) 2020.08.25
[WEB 7주차 이론] : JavaScript  (0) 2020.08.23
[WEB 6주차 실습] : JavaScript  (0) 2020.08.13
[WEB 6주차 이론] : JavaScript  (0) 2020.08.13
'2020 SISS 21기 활동/여름방학 WEB' Related Articles more