js基礎

LZC發表於2020-10-09
JS

新建test1.html檔案，內容如下，然後用瀏覽器開啟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
<h1>我的第一個 JavaScript 程式</h1>
<script>
    // 呼叫alert方法，瀏覽器會彈出一個提示框
    alert("Hello JavaScript");
</script>
</body>
</html>

js應該寫在哪裡？

  1. 第一種方式：直接寫在HTML頁面中，如上面的例子所示。

如需在 HTML 頁面中插入 JavaScript，請使用 會告訴 JavaScript 在何處開始和結束。

  1. 第二種方式：外部的 JavaScript

也可以把指令碼儲存到外部檔案中。外部檔案通常包含被多個網頁使用的程式碼。

外部 JavaScript 檔案的副檔名是 .js。

如需使用外部檔案，請在

將上面的程式碼改造成兩個檔案test1.html和test1.js，這兩個檔案處於同一個資料夾下，內容如下所示

test1.js的內容如下所示：

alert("Hello JavaScript");

test1.html的程式碼如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
    <h1>我的第一個 JavaScript 程式</h1>

    <script src="./test1.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
</head>
<body>
<h1>點選事件</h1>
<!--點選這個按鈕的時候，就會呼叫myFunction1函式-->
<button onclick="myFunction1()">按鈕1</button>

<!--也可以傳遞引數-->
<button onclick="myFunction2(10)">按鈕2</button>
<script>
    // 這裡是定義了一個函式
    // 函式都是以function開頭,然後空格加函式名,這裡的myFunction1就是函式名
    function myFunction1() {
        alert("你點選了按鈕1");
    }
    function myFunction2(x) {
        alert("你點選了按鈕2,x的值為：" + x);
    }
</script>
</body>
</html>

建立test3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3</title>
</head>
<body>
<h1>語法</h1>

<script>
    // JavaScript 使用關鍵字 var 來定義變數， 使用等號來為變數賦值：
    var a = 6;
    alert("a = " + a);
    // if、for、while語句的用法跟Java類似的，下面以for迴圈為例
    // 計算1到10之間偶數的總和
    var sum = 0;
    for (var i = 1; i <= 10; i++) {
        if (i % 2 == 0) {
            sum = sum + i;
        }
    }
    alert("1到10之間偶數的總和sum = " + sum);
</script>
</body>
</html>

JavaScript的物件是一種無序的集合資料型別，它由若干鍵值對組成。

JavaScript的物件用於描述現實世界中的某個物件。例如，為了描述“小明”這個淘氣的小朋友，我們可以用若干鍵值對來描述他：

建立test4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test4</title>
</head>
<body>
<h1>物件</h1>

<script>
    var xiaoming = {
        name: '小明',
        birth: 1990,
        school: 'No.1 Middle School',
        height: 1.70,
        weight: 65,
        score: null
    };
    // 透過 xiaoming.name 訪問屬性name
    alert("修改前, name = " + xiaoming.name);
    // 修改屬性name
    xiaoming.name = "小明666";
    alert("修改後, name = " + xiaoming.name);
</script>
</body>
</html>

JavaScript用一個{...}表示一個物件，鍵值對以xxx: xxx形式申明，用,隔開。注意，最後一個鍵值對不需要在末尾加,，如果加了，有的瀏覽器（如低版本的IE）將報錯。

建立test5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test5</title>
</head>
<body>
<h1>操作HTML元素</h1>

<div id="demo">我的第一個段落，點我</div>

<script>
    // 在test2中我們使用的是onclick屬性指定一個函式來執行點選事件
    // 下面我們換一種點選方式
    // 獲取 id = “demo” 的HTML節點元素
    var demo = document.getElementById("demo");
    // 為 id = “demo” 的HTML節點元素新增一個點選事件，當這個節點被點選時就會觸發這個函式
    demo.onclick = function () {
        // 改變段落內容，new Date()是返回當前時間
        demo.innerText = new Date();
    };
</script>
</body>
</html>

新建兩個頁面，login.html、index.html，分別代表登入頁面和首頁，登入成功後會跳轉到首頁

index.html程式碼如下，這個頁面程式碼非常簡單，主要來看下登入頁面的程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<h1>登入成功，進入首頁</h1>
<script>
</script>
</body>
</html>

login.html程式碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入</title>
</head>
<body>
<h1>登入</h1>

名字: <input type="text" id="name">
密碼: <input type="password" id="password">
<button onclick="login()">登入</button>

<script>
    // 點選登入按鈕時就會呼叫這個函式
    function login() {
        // 獲取名字
        var name = document.getElementById("name").value;
        // 獲取密碼
        var password = document.getElementById("password").value;

        // 這裡判斷名字與密碼不能為空
        if (name == '' || password == '') {
            alert("名字或者密碼不能為空");
            return; // 這一行程式碼代表不能繼續往下執行了
        }

        alert("name = " + name + ", password = " + password);

        // 假設賬號為admin,密碼為123456
        if (name == "admin" && password == "123456") {
            // 登入成功，則跳轉到index.html頁面
            alert("登入成功");
            // 這裡是跳轉頁面
            window.location.href="./index.html";
        } else {
            alert("賬號密碼錯誤，請重新輸入");
        }
    }
</script>
</body>
</html>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章