昨天的JS提到新增修改以及一些基本的JS語法，今天接著補充昨天的內容

刪除元素

JavaScript可以輕鬆的刪除HTML元素，這在開發中非常有用。通常需要根據特定條件刪除元素，或者在用戶交互中執行刪除操作。以下是一些方法：

1. 使用 remove() 方法
   每個HTML元素都有一個remove()方法，當我們調用這個方法時，它將從DOM中刪除這個元素。

const elementToRemove = document.querySelector('#toBeRemoved');
elementToRemove.remove();

這個方法非常簡單而且直觀。

2. 使用 parentNode.removeChild() 方法
   另一種刪除元素的方法是使用其父元素的 removeChild() 方法。這對於無法直接訪問要刪除的元素的情況很有用。

const parentElement = document.querySelector('#parent');
const elementToRemove = document.querySelector('#toBeRemoved');
parentElement.removeChild(elementToRemove);

這種方法需要訪問元素的父元素。

函數

JavaScript中的函數是一段可重複使用的代碼，它可以接受輸入（參數），執行操作，並返回結果。函數是組織和簡化代碼的重要工具。

• 定義函數
  要定義一個函數，可以使用function 關鍵字，指定函數名稱和參數，然後定義函數內部的代碼塊。下面舉一個簡單的範例

function hello(name) {
    console.log(`Hello, ${name}!`);
}

在這個例子中，我們定義了一個名為greet 的函數，它接受一個參數 name，並打印出一個歡迎消息。

• 調用函數
  利用上面的例子，我們如果要使用他，只需要像下面一樣，就可以執行了

hello('arbin');

事件處理

事件處理（Event Handling）是指在網頁開發中，對於用戶操作和瀏覽器事件的響應和管理過程。瀏覽器生成各種事件，例如點擊按鈕、提交表單、鍵盤敲擊、滑鼠移動等，開發人員可以使用JavaScript來監聽和處理這些事件，以實現互動性和動態性的網頁應用。下面會舉例幾個常見的例子

• 監聽事件
  監聽事件是指使用JavaScript編寫代碼來註冊對特定事件的監聽器（事件處理函數），以便在該事件發生時執行特定的操作。

const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
    alert('hello！');
});

上面的例子我們監聽了按鈕的點擊事件，並在事件發生時彈出一個警告"hello"。

• 事件對象
  事件對象（Event Object）是JavaScript中的一個特殊對象，它包含有關事件的詳細信息，以便在事件處理函數中使用。當事件發生時，瀏覽器將自動創建這個對象並傳遞給事件處理函數，以便開發人員可以訪問事件相關的數據。下面我整理了一些常見的屬性

例如我們假設我們現在有一個網頁有這個元素

<a href="https://www.example.com" id="myLink">跳轉到示例網站</a>

我們想要停止他的默認行為(跳轉到網站)，可以透過preventDeafult()實現。

document.getElementById('myLink').addEventListener('click', function(event) {
    // 阻止跳轉
    event.preventDefault();

    // 顯示確認對話框
    const userConfirmed = confirm('確定要跳轉嗎？');
    
    // 如果用戶確定跳轉，則手動導航到連結的URL
    if (userConfirmed) {
        window.location.href = event.target.href;
    }
});

這樣可以自定義連結的行為，並在需要時阻止默認的頁面跳轉，以確保用戶的確認。這是 preventDefault() 的一個簡單範例。

總結

JS有很多很好玩的地方，其實我原本也對JS沒有非常的熟悉，是因為學到flask，才慢慢往下深入研究，但目前仍然還在學習，希望之後前端後端都可以靈活的操作。