Web應用課 3.1 JavaScript——變數與運算子、輸入輸出、判斷、迴圈

安河桥北i發表於2024-06-29
WebJavaScript變數

JS的呼叫方式與執行順序

使用方式

HTML頁面中的任意位置加上<script type="module"></script>標籤即可。
常見使用方式有以下幾種：

  • 直接在標籤內寫JS程式碼。
  • 直接引入檔案：<script type="module" src="/static/js/index.js"></script>
  • 將所需的程式碼透過import關鍵字引入到當前作用域。

示例：暴露和引入

/static/js/index.js檔案中的內容為：

let name = "acwing";

function print() {
    console.log("Hello World!");
}

export {
    name,
    print
}

<script type="module"></script>中的內容為：

<script type="module">
    import { name, print } from "/static/js/index.js";

    console.log(name);
    print();
</script>

執行順序

  1. 類似於HTML與CSS，按從上到下的順序執行；
  2. 事件驅動執行；

HTML，CSS，JS之間的關係

  1. CSS控制HTML
  2. JavaScript控制HTML與CSS
  3. 為了方便開發與維護，儘量按照上述順序寫程式碼。例如：不要在HTML中呼叫JavaScript中的函式。
    image

變數與運算子

用來宣告變數，作用範圍為當前作用域。
let用來定義變數；
const用來定義常量；

let s = "acwing",x = 5;
let d = { //物件
    name:zjq,
    age: 18,
}
const n = 100;

變數型別

  • number：數值變數，例如1, 2.5
let x = 1,y = 3.14;
  • string：字串，例如"acwing", 'yxc'，單引號與雙引號均可。字串中的每個字元為只讀型別。
let s1 = "acwing",s2 = "yxc",let s3 = s1.substr(0,1) + 'x' + s1.substr(2);
  • boolean：布林值，例如true, false
let flag = false;
  • object：物件，類似於C++中的指標，例如[1, 2, 3]，{name: "yxc", age: 18}，null
let d = {
	name: "zjq",//注意賦值使用冒號
	age: 18,
};
console.log(d['name'],d["age"]);//注意：一定要加上引號
console.log(d.name,d.age);
d['name'] = 'abc';

let key = 'age';
console.log(d[key]);//也可以使用變數來訪問字典
d.school = "pku";//支援動態新增原本不存在的屬性
delete d.school;//刪除屬性
console.log(typedef d,typedef null);//object型別
  • undefined：未定義的變數
let t;
console.log(typeof t);//undefined型別

類似於Python，JavaScript中的變數型別可以動態變化。

運算子

與C++、Python、Java類似，不同點：
** 表示乘方
等於與不等於用===和!==,注意：===會同時判斷型別，使用==會發生型別轉換。
取整

console.log(parseInt(5 / 3));
console.log(Math.ceil(5 / 3));//上取整
console.log(Math.floor(5 / 3));//下取整
console.log(Math.round(5 / 3));//四捨五入取整

輸入與輸出

  • 從HTML與使用者的互動中輸入資訊，例如透過input、textarea等標籤獲取使用者的鍵盤輸入，透過click、hover等事件獲取使用者的滑鼠輸入。
    HTML程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/index.css" type="text/css">
</head>
<body>
    <div>輸入</div>
    <textarea class="input"></textarea>
    <br>
    <button class="confirm">確定</button>
    <br>
    <textarea class="output"></textarea>

    <!-- 將js程式碼放置頁面最後，使其最後再渲染，可防止頁面元素載入慢導致js執行錯誤 -->
    <script type="module">
        import {
            main
        } from "/static/js/index.js";

        main();
    </script>
</body>
</html>

CSS程式碼

textarea{
    width: 70%;
    height: 500px;
}

button{
    width: 70%;
    height: 50px;
}

JS程式碼

let input = document.querySelector("textarea");//獲取單個html頁面標籤，若獲取全部標籤使用querySelectorAll函式
let input1 = document.querySelector(".input");//獲取某個類的頁面標籤
let confirm = document.querySelector(".confirm");//獲取頁面的按鈕，原理同上
let output = document.querySelector(".output");//獲取頁面中用於輸出的文字段落，原理同上

function main(){
    console.log(input);
    console.log(typeof input);
    confirm.addEventListener("click",function(){
        let str = input.value;//獲取輸入框中的內容，儲存到字串
        output.innerHTML = str;//將字串內容賦值給output段落的文字中
    });
}

export{
    main
}
  • 透過Ajax與WebSocket從伺服器端獲取輸入
  • 標準輸入，參考AcWing 1. A + B
let fs = require('fs');//匯入了內建的 fs（檔案系統）模組
let buf = '';//初始化了一個空字串 buf 來儲存輸入資料

process.stdin.on('readable', function() { //設定了一個事件監聽器,監聽標準輸入，每當有可讀的資料時,就會執行回撥函式。
    let chunk = process.stdin.read();//讀取輸入
    if (chunk) buf += chunk.toString();//追加到輸入快取區中
});

process.stdin.on('end', function() { //設定了一個事件監聽器,監聽標準輸入，當輸入流接收完所有資料時,就會觸發該事件。
    buf.split('\n').forEach(function(line) { //若輸入有多行，處理每一行
        let tokens = line.split(' ').map(function(x) { return parseInt(x); });//將每個數用空格隔開，並將型別從string轉換為Number
        if (tokens.length != 2) return; 
        console.log(tokens.reduce(function(a, b) { return a + b; }));//每次 reduce() 被呼叫時,a 代表之前計算的累積值,b 代表當前處理的數字。最終,reduce() 函式會返回所有數字的總和。
    });
});

格式化字串

字串中填入數值

let name = 'yxc', age = 18;
let s = `My name is ${name}, I'm ${age} years old.`;

定義多行字串

let s = 
`<div>
    <h2>標題</h2>
    <p>段落</p>
/div>`

保留兩位小數如何輸出

let x = 1.234567;
let s = `${x.toFixed(2)}`;

判斷語句

JavaScript中的if-else語句與C++、Python、Java中類似。
JavaScript中的邏輯運算子也與C++、Java中類似：

  • &&表示與
  • ||表示或
  • !表示非

迴圈語句

JavaScript中的迴圈語句與C++中類似，也包含for、while、do while迴圈。

for迴圈

for (let i = 0; i < 10; i++) {
    console.log(i);
}

列舉物件或陣列時可以使用：

for-in迴圈，可以列舉陣列中的下標，以及物件中的key

for(let k in arr){
	arr[k] = k;
}

for-of迴圈，可以列舉陣列中的值，以及物件中的value

for(let v in arr){
	console.log(v);
}

while迴圈

let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

do-while迴圈

do while語句與while語句非常相似。唯一的區別是，do while語句限制性迴圈體後檢查條件。不管條件的值如何，我們都要至少執行一次迴圈。

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 10);

相關文章