因為之後我會利用flask做一個簡單的聊天機器人，而在製作時會使用到JavaScript，所以我們今天先來學一些基礎的JavaScript。

JavaScript是什麼?

JavaScript是一種腳本語言，通常用於瀏覽器中，可以使網頁變得動態且具有互動性。它可以操縱HTML元素、處理用戶輸入，以及與後端服務器進行通信。這是一門非常重要的網頁開發語言，幾乎每個現代網站都會使用到JavaScript。
以下是JavaScript的一些關鍵特點：

1. 動態性和互動性
   JavaScript使得網頁可以根據用戶的操作動態更新，而無需重新載入整個頁面。這意味著您可以創建互動式表單、圖片輪播、遊戲等功能。
2. 瀏覽器端語言
   JavaScript主要運行在瀏覽器中，充當客戶端腳本語言。這表示它在用戶的瀏覽器上執行，與HTML和CSS協同工作，使網頁更加動態。
3. 多範式語言
   JavaScript是一種多範式語言，支持面向對象編程（OOP）、函數式編程（FP）和命令式編程。這意味著它非常靈活，能夠應對各種編程需求。
4. 豐富的生態系統
   JavaScrip跟python一樣擁有龐大而且活躍的開發社區，提供了大量的庫（如React、Vue、jQuery）和框架（如Angular、Node.js），可用於加速應用程序的開發。

基本JavaScript用法

在學習一個程式語言最開始當然要先了解變數和數據類型啦，畢竟他是我們在撰寫一個程式時最基本的。

變數

• 在JavaScript中，變數有三個宣告方式：var、let和const。
  • var:宣告一個可隨意更改其內容的變數。
  • let:宣告一個可隨意更改其內容的區塊區域變數。
  • const:宣告一個只可讀取的不可變的常數。

條件語句

let score = 80;

if (score >= 70) {
    console.log("You passed!");
    // 當分數大於等於70時輸出"You passed"
} else {
    console.log("88");
    // 否則輸出"88"
}

這是一個最基本的if用法，相信聰明的你們可以舉一反三的！

迴圈

for (let i = 0; i < 5; i++) {
    console.log("Iteration " + i);
}

(基本上這些基本的用法都大同小異)

修改HTML元素

• 修改內容：使用textContent或innerHTML屬性可以修改元素的內容：

const tmp = document.querySelector('#Element');
tmp.textContent = '修改成新的內容';

上面透過宣告一個了一個id=Element的網頁元素為tmp，並將tmp的內容改成修改成新的內容。

也可以透過使用innerHTML來設置HTML內容：

const tmp = document.querySelector('#Element');
tmp.innerHTML = '<p>新的HTML內容</p>';

一旦選擇了元素，我們可以通過innerHTML屬性來設置該元素的HTML內容。在這個例子中，我們將innerHTML設置為一個包含一個<p>段落的HTML字符串。這將導致選擇的元素的內容被替換為新的HTML內容。

動態創建新HTML元素

我們可以透過 document.createElement() 來創建新的元素

const newDiv = document.createElement('div');

或是設置新元素的屬性

newDiv.id = 'myNewDiv';
newDiv.className = 'box';
newDiv.textContent = 'This is a new div';

可以使用appendChild()、insertBefore() 等方法來將新元素添加

const parent = document.getElementById('parent');
parent.appendChild(newDiv);