我用 ChatGPT 寫了哪些 JavaScript


建立時間: 2023年3月14日 01:33
更新時間: 2023年3月14日 01:54

說明

本篇算是心得分享,我如何使用 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 提問。

觀看次數: 767
askchatgptjavascriptskill問答
按讚追蹤 Enjoy 軟體 Facebook 粉絲專頁
每週分享資訊技術

一杯咖啡的力量,勝過千言萬語的感謝。

支持我一杯咖啡,讓我繼續創作優質內容,與您分享更多知識與樂趣!