혜랑's STORY

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

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

[WEB 6주차 실습] : JavaScript

hyerang0125 2020. 8. 13. 16:08

#사칙연산 계산결과표 작성

Chapter08-(1) 실행 결과

<!-- Chapter08-(1).html -->
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<TITLE></TITLE>
    <style>
        table,th,tr{
            border:1px solid black;
        }
        th{
            width:100px;
        }
    </style>
</HEAD>
<BODY>
    <table>
        <tr style="font-weight:bolder">
            <th>숫자</th>
            <th>34</th>
            <th>25</th>
        </tr>
        <tr>
            <th>더하기</th>
            <Script>
                function plus(left, right) {
                    return left + right;
                }
                document.write("<th colspan=2>" + plus(34, 25) + "</th>");
            </Script>
        </tr>
        <tr>
            <th>빼기</th>
            <Script>
                function minus(left, right) {
                    return left - right;
                }
                document.write("<th colspan=2>" + minus(34, 25) + "</th>");
            </Script>
        </tr>
        <tr>
            <th>곱하기</th>
            <Script>
                function multiplication(left, right) {
                    return left * right;
                }
                document.write("<th colspan=2>" + multiplication(34, 25) + "</th>");
            </Script>
        </tr>
        <tr>
            <th>나누기</th>
            <Script>
                function divied(left, right) {
                    return left / right;
                }
                document.write("<th colspan=2>" + divied(34, 25) + "</th>");
            </Script>
        </tr>
    </table>


</BODY>
</HTML>

#switch문으로 한영 번역하기

Chapter08-(2) 실행 결과

<!--Chapter08-(2).html-->
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<TITLE></TITLE>
</HEAD>
<BODY>
    <script>
        function changeDay() {
            var day = document.getElementById("string").value;

            switch (day) {
                case "월요일":
                    document.write("Monday");
                    break;
                case "화요일":
                    document.write("Tuesday");
                    break;
                case "수요일":
                    document.write("Wednesday");
                    break;
                case "목요일":
                    document.write("thursday");
                    break;
                case "금요일":
                    document.write("Friday");
                    break;
                case"토요일":
                    document.write("Saturday");
                    break;
                case "일요일":
                    document.write("Sunday");
                    break;

            }
        }
    </script>

    <input type="text" id="string"/>
    <button type="button" onclick="changeDay()">번역하기</button>


</BODY>
</HTML>

#반복문 사용하기

Chapter08-(3) 실행 결과

<!-- Chapter08-(3).html -->
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<TITLE></TITLE>
</HEAD>
<BODY>
    <script>
        var sum1 = 0;
        for (var i = 1; i <= 1000; i++) {
            sum1 += i;
        }
        document.write(sum1+"<br>");

        var sum2 = 0, i = 0;
        while (i <= 1000) {
            if (i % 2 === 0)
                sum2 += i;
            i++;
        }
        document.write(sum2+"<br>");
    </script>


</BODY>
</HTML>

#BMI 계산하는 함수 정의하기

Chapter08-(4) 실행결과

<!--Chapter08-(4).html-->
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<TITLE></TITLE>
    <style>
        input{
            text-align:right;
        }
    </style>
</HEAD>
<BODY>
    <script>
        function BMI() {
            var cm = document.getElementById('height_cm').value / 100;
            var kg = document.getElementById('weight_kg').value;

            var bmi = kg / (cm * cm);

            if (bmi >= 30)
                document.write("당신은 현재 [비만] 상태입니다. 운동하세요!");
            else if (25 <= bmi && bmi < 30)
                document.write("당신은 현재 [과체중] 상태입니다. 조심하세요!");
            else if (18.5 <= bmi && bmi < 25)
                document.write("당신은 [정상]입니다^^");
            else
                document.write("당신은 현재 [저체중] 상태입니다. 많이드세요!");
        }
    </script>
    <form>
        <fieldset>
            키 : <input type="text" id="height_cm" placeholder="cm"/><br />
            몸무게 : <input type="text" id="weight_kg" placeholder="kg"/><br />
            <button onclick="BMI()">계산하기</button>
        </fieldset>
    </form>

</BODY>
</HTML>
저작자표시

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

[WEB 8주차 이론] : JavaScript  (0) 2020.08.25
[WEB 7주차 이론] : JavaScript  (0) 2020.08.23
[WEB 6주차 이론] : JavaScript  (0) 2020.08.13
[WEB 5주차 이론] : JavaScript  (0) 2020.08.08
[WEB 4주차 공부] : CSS  (0) 2020.08.02
'2020 SISS 21기 활동/여름방학 WEB' Related Articles more