網頁設計知識標題背景
網站知識RECOGNIZING WEBSITE

網頁已經進入新時代,好網站不再需要花大錢!

有網頁設計需求請與我們聯絡,新視野設計提供多種方案供您選擇。

  • #效益好≠比較貴
  • #優質附加服務,提升網站效益
  • #妥善規劃,提供多種方案選擇
線上諮詢

網頁設計知識 - 網頁程式相關

JavaScript 語法介紹

JavaScript 是一種用於創建動態網頁的腳本語言,能夠讓網頁與使用者互動。它與 HTML 和 CSS 相結合,讓開發者能夠設計更具互動性和功能性的網站。JavaScript 可以用來控制頁面上的元素、處理表單、進行數據驗證以及與伺服器進行通信。

JavaScript 語法介紹

JavaScript 基本語法

以下是 JavaScript 的一些基本語法範例,展示其如何與 HTML 一起使用。

1. Hello, World! 範例

最簡單的 JavaScript 程式會將 "Hello, World!" 顯示在瀏覽器中:


<html>
<body>
    <script>
        document.write("Hello, World!");
    </script>
</body>
</html>

    

這段程式碼會將 "Hello, World!" 直接輸出到頁面中。

2. 變數與數據類型

JavaScript 支援多種資料類型,包括字串、數字、布林值等。變數可以使用 varletconst 來宣告:


<html>
<body>
    <script>
        let name = "John";
        let age = 25;
        let isAdult = true;

        document.write("姓名: " + name + "<br>");
        document.write("年齡: " + age + "<br>");
        document.write("成年: " + isAdult + "<br>");
    </script>
</body>
</html>

    

這段程式會將變數 nameageisAdult 的值顯示在頁面上。

3. 條件語句

JavaScript 使用 if...else 語句來進行條件判斷:


<html>
<body>
    <script>
        let age = 18;
        if (age >= 18) {
            document.write("你已成年");
        } else {
            document.write("你還未成年");
        }
    </script>
</body>
</html>

    

這段程式根據年齡輸出 "你已成年" 或 "你還未成年"。

4. 迴圈

JavaScript 支持多種迴圈結構,如 for 迴圈:


<html>
<body>
    <script>
        for (let i = 1; i <= 5; i++) {
            document.write("這是第 " + i + " 次迴圈<br>");
        }
    </script>
</body>
</html>

    

這段程式會輸出 1 到 5 的數字。

5. 函數

JavaScript 使用 function 關鍵字來定義函數:


<html>
<body>
    <script>
        function greet(name) {
            return "Hello, " + name;
        }

        document.write(greet("Alice"));
    </script>
</body>
</html>

    

這段程式會輸出 "Hello, Alice"。

6. DOM 操作

JavaScript 可用來操作 DOM(Document Object Model),例如更改 HTML 元素的內容:


<html>
<body>
    <p id="demo">這是一段文字。</p>

    <script>
        document.getElementById("demo").innerHTML = "這段文字已被 JavaScript 更改。";
    </script>
</body>
</html>

    

這段程式會將頁面中的段落內容更改為 "這段文字已被 JavaScript 更改"。

7. 表單驗證

JavaScript 可用來進行表單驗證:


<html>
<body>
    <form name="myForm">
        姓名: <input type="text" name="name"><br>
        <input type="button" value="提交" onclick="validateForm()">
    </form>

    <script>
        function validateForm() {
            let x = document.forms["myForm"]["name"].value;
            if (x == "") {
                alert("姓名不能為空");
                return false;
            } else {
                alert("表單提交成功");
            }
        }
    </script>
</body>
</html>

    

這段程式會檢查姓名欄位是否為空,若為空則顯示錯誤提示。

8. 事件處理

JavaScript 可以處理使用者的互動,如按鈕點擊:


<html>
<body>
    <button onclick="displayMessage()">點擊我</button>

    <script>
        function displayMessage() {
            alert("你點擊了按鈕!");
        }
    </script>
</body>
</html>

    

這段程式會在使用者點擊按鈕時彈出提示訊息。

結論

JavaScript 是一種功能強大的腳本語言,用於創建動態和互動式的網頁。它可以操作 DOM 元素、進行表單驗證、處理事件等,是現代 Web 開發中不可或缺的技術之一。JavaScript 能夠與 HTML 和 CSS 結合,創建豐富的用戶體驗。


歡迎推廣本文,請務必連結(LINK)本文出處:新視野網頁設計公司