20240814課堂

"> "> ">

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        button {
            background-color: #4CAF50;
            color: white;
            padding: 80px 40px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            
        }
        button:hover {
            background-color: #deeeb1;
            border: 6px solid black;
        }
    </style>
</head>

<body>

    <!-- 10. 於網頁放置一顆 按鈕(A) -->
     <button onclick="console.log('按下按鈕(A)')">按鈕(A)</button> 
     <!-- 這是一個簡單的按鈕，並且加入了 onclick 事件，
      事件中執行 console.log() 函式，顯示文字"按下按鈕(A)" -->

    <!-- 15. 測試加入滑鼠點擊事件，並直接呼叫 console.log() -->

    <!-- 20. 於網頁放置一顆 按鈕(B) ，
             加入點擊事件，事件中執行指定的 函式 apple -->

             <button id="buttonB" onclick="apple()">按鈕(B)</button>
    <!-- 25. 函式 apple 要做的事情：在 console 顯示一段文字 -->
     <script>
        function apple() 
        {
        //彈出視窗顯示"你按了我的按鈕(B)"
         alert("你按了我的按鈕(B)");
        }
        </script>
        
    
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        div {
            margin: 20px;
            padding: 20px;
            border: 1px solid black;
            background-color: rgb(171, 170, 170);
        }
        h4 
        {
            font-size: 30px;
            text-align: center;
            margin-top: 50px;
            margin-bottom: 20px;
        }
        p
        {
            font-size: 20px;
            text-align: center;
        }
        .textskin {
            width: 100px;
            height: 60px;
            font-size: 20px;
            text-align: center;
            border: 1px solid #000;
            padding: 10px;
            display: block;
            margin: auto;       /* 水平居中 */
            position: relative;
            top: 50%;           /* 垂直居中 */
        }
        btnGroup {
            display: flex;
            justify-content: center;
            margin-top: 50px;
        }
       
    </style>
</head>

<body>

    <h4>JavaScript is Case Sensitive</h4>
    <p><a href="<https://www.w3schools.com/js/js_syntax.asp>"><https://www.w3schools.com/js/js_syntax.asp></a></p>

    <h4>JavaScript Reserved Words</h4>
    <p><a href="<https://www.w3schools.com/js/js_reserved.asp>"><https://www.w3schools.com/js/js_reserved.asp></a></p>

    <div>
        <h4>簡易計算機</h4>
        <p>請輸入數字，並按下按鈕，將會顯示結果。</p>
        <input type="text" id="num1" class="textskin">
        <br>
        <br>
        <input type="text" id="num2" class="textskin">
        <br>
        <div class="btnGroup">
            <button onclick="add()">+</button>
            <button onclick="sub()">-</button>
            <button onclick="mul()">*</button>
            <button onclick="div()">/</button>
         <p id="result"></p>
        </div>
    </div>

    <script>

        function add() {
            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            var result = parseInt(num1) + parseInt(num2);
            document.getElementById("result").innerHTML = result;
        }

        function sub() {
            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            var result = parseInt(num1) - parseInt(num2);
            document.getElementById("result").innerHTML = result;
        }

        function mul() {
            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            var result = parseInt(num1) * parseInt(num2);
            document.getElementById("result").innerHTML = result;
        }

        function div() {
            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            var result = parseInt(num1) / parseInt(num2);
            document.getElementById("result").innerHTML = result;
        }
        // 10. 變數的命名
        

        // 20. 大小寫是有差異的

    </script>
</body>

</html>