我用 ChatGPT 寫了哪些 JavaScript

說明

本篇算是心得分享，我如何使用 ChatGPT 幫我生成 JavaScript 程式碼，大大縮短了工作時間，直接事半功倍。

問答

生成 HTML

問：

用 JavaScript 安全的方式生成
<div>Hello World</div>
並插入到 <div id="output"></div>

回答的內容我就不說了，我得到如下的程式碼

答：

// 找到具有指定 id 的 HTML 元素
const outputDiv = document.getElementById("output");

// 創建新的 div 元素
const newDiv = document.createElement("div");

// 創建文本節點
const text = document.createTextNode("Hello World");

// 在新的 div 元素中添加文本節點
newDiv.appendChild(text);

// 在指定的 HTML 元素中插入新的 div 元素
outputDiv.appendChild(newDiv);

複製功能

問：

使用 Javascript 請給我複製按鈕的功能，複製 <div id="output">Hello World</div> 裡面的文字

答：

<div id="output">Hello World</div>
<button id="copyBtn">複製</button>

const copyBtn = document.getElementById("copyBtn");
const outputElement = document.getElementById("output");

copyBtn.addEventListener("click", () => {
  const textToCopy = outputElement.innerText;

  navigator.clipboard.writeText(textToCopy).then(() => {
    alert(`已複製文字：${textToCopy}`);
  }).catch((error) => {
    console.error('複製失敗：', error);
  });
});

關閉按鈕功能

問：

使用 Javascript 提供一個按鈕，可以刪除 <div id="output">Hello World</div> 元素

答：

<div id="output">Hello World</div>
<button id="deleteBtn">刪除</button>

const deleteBtn = document.getElementById("deleteBtn");
const outputElement = document.getElementById("output");

deleteBtn.addEventListener("click", () => {
  outputElement.parentNode.removeChild(outputElement);
});

上述可以看到，deleteBtn 可以再簡潔一點

deleteBtn.addEventListener("click", () => {
  outputElement.remove();
});

所以自己還是需要有理解能力，才能判斷這樣的程式是否合適目前的專案

總結

以上舉例了一些使用 ChatGPT 協助我開發 JavaScript 的過程，讓大家知道 ChatGPT 是一個強大的助手，ChatGPT 也是有回答錯誤的時候，還是需自行判斷、修改才行。

以下是一些使用 ChatGPT 詢問 JavaScript 問題的技巧：

1. 清楚描述問題：在詢問問題時，要清楚描述問題的背景、環境和預期結果。如果能提供相關程式碼和錯誤訊息，也能幫助 ChatGPT 更好地理解你的問題。

2. 簡潔明瞭：請盡量使用簡單的、易於理解的語言描述問題，避免使用過於專業或模糊的術語。這有助於 ChatGPT 更好地理解你的問題。

3. 具體問題：詢問問題時，要盡量具體，不要泛泛而談。比如，不要問「怎麼使用 JavaScript？」，而是問「我想在網頁中顯示當前日期，該如何使用 JavaScript 實現？」。這樣 ChatGPT 才能更好地幫助你解決問題。

4. 註明版本：如果你使用的是特定版本的 JavaScript，請在問題描述中註明版本號。這能幫助 ChatGPT 更好地理解你的問題，並提供更準確的解決方案。

5. 查閱文檔：在詢問問題之前，建議先查閱相關的 JavaScript 文檔或資源。這些文檔通常能提供相關的示例和解決方案，有時也能解答你的問題。如果你在查閱文檔後仍然有疑問，再向 ChatGPT 提問。