JavaScript

了解如何使用 JavaScript 以程式化的方式禁用或啟用按鈕 HTML 的按鈕元素是少數具有獨立狀態的元素之一。與幾乎所有的表單控件一起使用。 其中一個常見需求是使用 JavaScript 以程式化的方式禁用或啟用按鈕。 例如，您希望僅在文字輸入元素填寫時才啟用按鈕。 或者當特定的複選框被點擊時，例如那些用於表示“已閱讀條款和條件”的複選框，而實際上沒有人會閱讀。 以下是具體操作步驟： 首先，使用document.querySelector() 或 document.getElementById() 選取元素: const button = document.querySelector('button') 如果您有多個按鈕，您可能需要使用document.querySelectorAll() 並循環遍歷結果。 無論如何，一旦您有元素引用，您可以將其 disabled 屬性設置為 true 以禁用按鈕： button.disabled = true 若要重新啟用按鈕，則將其設置為 false 即可： button.disabled = false

如何使用 JavaScript 獲取明天的日期呢？ 前幾天我遇到了這個問題。 於是我對 Date 對象進行了一些測試，特別是使用了它的 getDate() 和 setDate() 方法。getDate() 方法返回當前日期，而 setDate() 方法設置當前日期。 以下是獲取明天日期的步驟： 首先，使用 new Date() 獲取當前日期。 通過將日期加 1 來設置新的日期。 完成！ 使用 setDate() 方法傳遞 <今天>.getDate() + 1 的結果，即可設置日期為「明天」。 如果日期是 31（在有 31 天的月份），而你在當前日期上使用 setDate() 方法加 1，日期將變為下個月的第一天。或者，如果是 12 月 31 日，那麼日期將變為下一年的 1 月 1 日。 以下是示例代碼： const today = new Date() const tomorrow = new Date(today) tomorrow.setDate(tomorrow.getDate() + 1) tomorrow 現在是代表明天日期的 Date 對象。時間不會改變，仍然是你執行命令的時間加上 24 小時。 如果你還想將時間重置為「明天的 00:00:00」，可以通過調用 tomorrow.setHours(0,0,0,0) 來實現。

如果您需要將 URL 作為 GET 請求的一部分發送，那麼您可能需要將其編碼。 在 JavaScript 中，該如何編碼 URL？ 根據您的需求，有兩個 JavaScript 函數可以幫助您。 第一個是 encodeURI()，第二個是 encodeURIComponent()。 注意：您可能會讀到 escape() 的相關資訊，但它已被棄用，不應使用。 這兩種方法在編碼哪些字符方面有所不同。 具體來說，encodeURI() 不會編碼 ~!@#$&*()=:/,;?+，而 encodeURIComponent() 則不會編碼 -_.!~*'()，而編碼其他所有字符。它們之間的區別是為了不同的用途： encodeURI() 用於編碼完整的 URL。 encodeURIComponent() 用於編碼單個 URL 參數值。 如果要對完整的 URL 調用 encodeURIComponent()，因為它會編碼 /，URL 路徑分隔符也將被編碼（以及其他內容）： encodeURI("http://example.com/ hey!/") //"http://example.com/%20hey!/" encodeURIComponent("http://www.example.org/a file with spaces.html") //"http%3A%2F%2Fexample.com%2F%20hey!%2F" MDN 提出了一個改進方案，以符合 RFC 3986 標準，使用以下函數實現： const fixedEncodeURIComponent = (str) => { return encodeURIComponent(str).replace(/[!'()\*]/g, (c) => { return '%' + c.charCodeAt(0).toString(16) }) } 您可以將它應用於要添加到 URL 中的每個參數。...

在 2015 年，ECMAScript 6 (ES6) 標準引入了類別。這篇文章將教你如何使用類別。 JavaScript 有一種相對不常見的方式來實現繼承：原型繼承。雖然我認為原型繼承是很好的一種方式，但它與其他流行的程式語言實現的繼承方式不同，後者是基於類別的。 來自於 Java、Python 或其他語言的人很難理解原型繼承的細節，因此 ECMAScript 委員會決定在原型繼承的基礎上添加糖衣語法，使其類似於其他流行語言中基於類別的繼承方式。 重要的是：JavaScript 在底層仍然保持相同，你仍然可以以正常的方式訪問對象原型。 類別定義 以下是一個類別的示例： class Person { constructor(name) { this.name = name } hello() { return 'Hello, I am ' + this.name + '.' } } 類別有一個識別符，我們可以使用 new ClassIdentifier() 來創建新對象。 當對象被初始化時，將調用 constructor 方法，並傳入任何參數。 類別可以有任意數量的方法。在這個例子中，hello 是一個方法，可以在所有由這個類別派生的對象上調用： const flavio = new Person('Flavio') flavio.hello() 類別繼承 一個類別可以繼承另一個類別，在使用該類別初始化的對象將繼承兩個類別的所有方法。 如果被繼承的類別和繼承的類別中有同樣名稱的方法，最近的方法將優先執行： class Programmer extends Person { hello() { return super.hello() + ' I am a programmer....

我想使用 Puppeteer 點擊一個「接受全部」的 Cookie 按鈕，我使用了以下程式碼： const [linkcookie] = await page.$x("//a[contains(., '接受全部')]") if (linkcookie) { await linkcookie.click() } 請注意，如果按鈕是一個 button 的 HTML 元素（這取決於 HTML 標記的使用方式），你必須使用以下程式碼： page.$x("//button[contains(., '接受全部')]") 作為替代方式 👍 同時，你也可以參考我的完整 Puppeteer 教學

本文將介紹如何使用瀏覽器提供的 prompt() API，讓使用者做出選擇。 prompt() 函式可讓我們從使用者獲取輸入。 這個 API 已經存在於網頁的早期，並且獲得各大瀏覽器的支援。 它非常簡單易用，特別適用於快速原型開發，你可以直接調用 prompt() 函式來獲取使用者輸入，而不需要建立表單。 下面是使用方法：調用 prompt() 函式，並傳入一個字符串作為問題的描述： prompt("你的年齡是多少？") 在 Chrome 瀏覽器中的效果如下： 在 Safari 瀏覽器中的效果如下： 在 Firefox 瀏覽器中的效果如下： 可以看到，每個瀏覽器的外觀有所不同，但運作原理是相同的。 需要呼叫 window.prompt() 函式，但由於 window 是隱含的，因此也可以直接呼叫 prompt() 瀏覽器會阻塞腳本的執行，直到使用者輸入內容並按下確定或取消按鈕。除非點擊按鈕，否則無法退出該操作。 輸入的值將從該函式返回，因此我們可以將其賦值給一個變數： const age = prompt("你的年齡是多少？") 你還可以傳入第二個參數作為預設值： const age = prompt("你的年齡是多少？", 18) 如果使用者未輸入任何內容並點擊確定，將返回一個空字符串。 如果使用者點擊取消按鈕，prompt() 函式將返回 null。

結合async/await和map()的使用可能有點棘手。了解如何使用。 您想在map()調用中執行一個異步函數，對數組的每個元素執行操作並取回結果。 該如何做到這一點？ 這是正確的語法： const list = [1, 2, 3, 4, 5] //... 填充了數值的數組 const functionThatReturnsAPromise = item => { //返回一個Promise的函數 return Promise.resolve('ok') } const doSomethingAsync = async item => { return functionThatReturnsAPromise(item) } const getData = async () => { return Promise.all(list.map(item => doSomethingAsync(item))) } getData().then(data => { console.log(data) }) 主要要注意的是Promise.all()的使用，當所有的Promise都被解析時，它才會被解析。 list.map()返回一個Promise列表，所以在result中，我們將得到當我們運行的所有內容都被解析時的值。 請記住，在調用await的任何代碼周圍都必須包裹在一個async函數中。 有關Promise的詳細信息，請參見Promises文章，以及async/await指南。 使用這些占位符函數名稱來展示示例可能很難理解，所以這是一個簡單的例子，展示了如何使用這種技巧，這是我為Twitter克隆版本編寫的Prisma數據刪除函數，首先刪除推文，然後刪除用戶： export const clearData = async (prisma) => { const users = await prisma.user.findMany({}) const tweets = await prisma....

在本篇文章中，我將向您展示我如何使用JavaScript為JavaScript課程建立一個註冊計數器，以便我可以看到有多少人註冊了這個課程（註冊時間為11月15日至11月22日！） 這個計數器是一個完全多餘的東西，是我在拖延時做的，想要避免重要的工作。 我一直在思考不同的方法來實現這個功能，比如使用Scriptable創建一個JavaScript的iOS小工具。 但後來我想，嗯，那就只做一個網頁好了。一個我可以在iPad上保持打開的網頁，我將iPad放在桌子旁邊或其他可以不時看到它的地方。 我可以設置iPad永不進入睡眠狀態，並將網頁設置為每2分鐘自動刷新。 做一個簡單的網頁的好處是我可以在任何地方訪問它。無論是在iPad上、iPhone上還是Mac上。 我創建了一個Node.js程序來獲取我所需的數據。 第一步是編寫一個獲取數據的函數： const getData = async () => { return new Promise((resolve, reject) => { let count = 0 //獲取計數 resolve(count) }) } 我將其設置為async函數，因為我使用了fetch請求，而且很可能你也需要它。 如果你感興趣，我將所有的註冊信息存儲在Airtable紀錄中，所以在getData()內部，我放置了從Airtable獲取計數所需的所有代碼。 然後，我創建了一個非常簡單的Express服務器，該服務器提供了一個HTML頁面，該頁面在頁面的中央顯示了計數。 const express = require('express') const app = express() app.get('/', async (req, res, next) => { const count = await getData() const html = ` <html> <head> <!-- 每2分鐘自動刷新 --> <meta http-equiv="refresh" content="120"> <!-- 在iOS上允許全屏顯示 --> <meta name="apple-mobile-web-app-capable" content="yes"> <link href="https://fonts....

了解如何使用JavaScript和Clipboard API將內容複製到剪貼簿。 有時候，我們需要將網站上提供的內容複製並粘貼到其他地方，例如API金鑰或應用程序的激活令牌。 這些網站通常通過點擊內容框使內容複製到剪貼簿，然後我們可以直接粘貼到需要的地方。如何在自己的網站上實現這一功能呢？使用Clipboard API！ 除了使用document.execCommand()功能來實現複製/粘貼的功能，我們也可以使用Clipboard API。事實上，Clipboard API設計的目的就是取代document.execCommand()。 Clipboard API可以在navigator.clipboard對象中使用： navigator.clipboard 由於Clipboard API相對較新，並非所有瀏覽器都實現了該API。目前，主流的瀏覽器（例如：Chrome、現代版Edge、Firefox和Opera）都支持該API。 為了確保瀏覽器支持Clipboard API，可以通過檢查navigator.clipboard對象是否存在來進行判斷： if (!navigator.clipboard) { // Clipboard API不可用 return; } 需要理解的一點是，沒有用戶許可的情況下不能從剪貼簿複製/粘貼內容。 對於讀取和寫入剪貼簿，所需的許可權略有不同。對於寫入剪貼簿，只需獲得用戶的意圖：將剪貼簿操作作為用戶動作的響應，例如點擊事件。 寫入剪貼簿 假設我們在HTML網頁上有一個<p>標籤： <p>Some text</p> 我們為其添加一個點擊事件監聽器，並且首先檢查Clipboard API是否可用： document.querySelector('p').addEventListener('click', async event => { if (!navigator.clipboard) { // Clipboard API不可用 return; } }); 現在，我們希望將<p>標籤中的內容複製到剪貼簿中。我們可以通過查找event.target對應的元素上的innerText來實現： document.querySelector('p').addEventListener('click', async event => { if (!navigator.clipboard) { // Clipboard API不可用 return; } const text = event.target.innerText; }); 接下來，我們使用navigator.clipboard.writeText()方法來將內容寫入剪貼簿，並將其包裝在try/catch語句中以處理可能發生的任何錯誤。 以下是完整的示例代碼： document.querySelector('p').addEventListener('click', async event => { if (!...

最近我需要以程式的方式將圖片添加到DOM（也就是HTML頁面）中，這篇文章將告訴你如何以動態的方式實現。 首先，我們使用Document物件的createElement方法來創建一個img元素： const image = document.createElement('img') 然後，我們設置圖片的src屬性： image.src = '/picture.png' （你可以使用相對或絕對URL，就像在常規的HTML img 標籤中一樣） 接下來，我們找到要添加圖片的容器元素，並將其作為參數傳遞給appendChild()方法： document.querySelector('.container').appendChild(image) 就這樣，圖片就成功地被添加到DOM中了。