技术维基

如何使用JavaScript的bcrypt庫

了解如何使用bcrypt庫在JavaScript中加密和驗證密碼 bcrypt是JavaScript中最常用的用於處理密碼的npm包之一。這是基本的安全知識，但對於新手開發人員來說值得一提：您永遠不應該以明文形式在數據庫或其他地方存儲密碼。絕對不行。相反，您需要從密碼中生成一個哈希值，然後將其存儲。使用方法如下： import bcrypt from 'bcrypt' // 或 // const bcrypt = require('bcrypt') const password = 'oe3im3io2r3o2' const rounds = 10 bcrypt.hash(password, rounds, (err, hash) => { if (err) { console.error(err) return } console.log(hash) }) 您需要將一個數字作為第二個參數傳遞，該數字越大，哈希值就越安全，但生成的時間也越長。該庫的README文件告訴我們，在2GHz核心上，我們可以生成： rounds=8 : ~40 hashes/sec rounds=9 : ~20 hashes/sec rounds=10: ~10 hashes/sec rounds=11: ~5 hashes/sec rounds=12: 2-3 hashes/sec rounds=13: ~1 sec/hash rounds=14: ~1.5 sec/hash rounds=15: ~3 sec/hash rounds=25: ~1 hour/hash rounds=31: 2-3 days/hash 如果您多次運行bcrypt....

如何使用JavaScript為DOM元素設定樣式

透過純粹的JavaScript，我們可以動態地為網頁上的元素應用樣式。在網頁瀏覽器中，有哪些API可以達成這個目的呢？首先，其中最乾淨的方式之一就是為元素新增或移除類別，並使用CSS中的類別樣式。 const element = document.querySelector('#my-element') 您可以使用元素的classList屬性以及其add()和remove()方法： element.classList.add('myclass') element.classList.remove('myclass') 您也可以直接使用style屬性修改元素的每個CSS屬性，該屬性會引用元素的內嵌樣式。例如，您可以這樣修改元素的顏色： element.style.color = '#fff' 您可以修改元素的邊框： element.style.border = '1px solid black' 您看到了color和border。您可以使用camelCase（駝峰式大小寫）來修改所有的CSS屬性，當CSS屬性名稱包含破折號時。在這個 MDN 頁面中，您可以方便地找到一個翻譯表，其中列出了所有的CSS屬性。

如何使用JavaScript重定向到另一个网页

JavaScript提供了许多方法来将用户重定向到不同的网页。学习最常用的方法，也了解一下所有其他选项，使用纯JavaScript。如果在程序执行期间需要转到另一个页面，JavaScript提供了许多方法来将用户重定向到不同的网页。其中被认为是规范的导航到新URL的方法是： window.location = 'https://newurl.com' 如果要重定向到同一域中的不同路径，请使用： window.location.pathname = '/new' 这是使用History API提供的location对象来实现的。其他重定向选项程序设计的大多数情况下，同一个操作可以有多种方法来执行。因为浏览器中的window是隐式的，所以你也可以这样做： location = 'https://newurl.com' 另一种方法是设置location的href属性： window.location.href = 'https://newurl.com' location对象还有一个assign()方法，它接受一个URL，并执行相同的操作： window.location.assign('https://newurl.com') replace()方法与前面的方法不同，因为它重写了历史记录中的当前页面。当前页面被抹掉，所以当你点击“返回”按钮时，你会回到现在成为最后访问页面的页面。 window.location.replace('https://newurl.com') 在某些情况下，这可能很方便。访问window对象的不同方式浏览器暴露了self和top对象，它们都引用window对象，所以你可以在上述所有示例中使用它们来代替window： self.location = 'https://newurl.com' top.location = 'https://newurl.com' 使用服务器端指令进行301重定向前面的示例都考虑了程序决定跳转到另一页的情况。如果需要重定向是因为当前URL已经过时并且需要进一步跳转到新的URL，最好使用服务器级的指令，并设置301 HTTP代码以通知搜索引擎当前URL已经永久移动到新资源。如果使用Apache，可以通过.htaccess来实现这一点。Netlify通过一个_redirects文件来完成这个任务。是否可以使用JavaScript进行301重定向？不幸的是，不可以。这是无法在客户端上完成的。 301 HTTP响应代码必须在JavaScript被浏览器执行之前从服务器发送。实验证明，搜索引擎将JavaScript重定向解释为301重定向。参见这篇Search Engine Land的文章。 Google表示：使用JavaScript重定向用户可以是一种合理的做法。例如，如果用户登录后将其重定向到内部页面，可以使用JavaScript来实现。在检查JavaScript或其他重定向方法以确保您的网站符合我们的指南时，请考虑意图。请记住，当移动您的网站时，301重定向是最佳选择，但如果您无法访问网站的服务器，则可以使用JavaScript重定向来实现该目的。使用HTML元标签另一种选择是在HTML中使用元标签： <html> <head> <meta http-equiv="refresh" content="0;URL=https://newurl.com/"> </head> </html> 这将导致浏览器在加载并解析当前页面后加载新页面，并且不会向搜索引擎发送任何信号。始终使用301服务器级别重定向是最佳选择。

如何使用JavaScript重定向到新URL

我想解決這個特定的使用情境，即在我的分析中追蹤訂閱我的電子報的人數作為一個「目標」。我正在放棄使用Google Analytics，其中您可以設置「頁面漏斗目標」，意味著您訪問頁面X，您訪問頁面Y，這是一個目標。在我正在嘗試的新分析工具（Plausible）中無法實現，因此我必須找到一個技巧。在您訂閱之後，您會登錄到特定的頁面上，您可以從該頁面下載一些東西。我不能說「目標是訪問此頁面」，因為人們可能保存它，將其加入書籤，稍後返回。因此，我這樣做，在訂閱之後，您會被重定向到一個臨時頁面，並在頂部加入此JavaScript片段： <script> setTimeout(() => location.href = "/page", 2000) </script> 所以人們會在2秒後重定向到/page。此外，我還添加了一個顯示「2秒後將您重定向到下載頁面…」的信息，並提供了一個「或點擊這裡」的鏈接，以防萬一（禁用了JavaScript？）他們無法重定向。

如何使用JavaScript將內容複製到剪貼簿

了解如何使用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 (!...

如何使用JavaScript將文件上傳到服務器

在網絡應用程序中，上傳文件並在後端進行處理是最常見的文件處理功能之一。例如，上傳頭像或附件。假設我們有一個HTML文件輸入元素： <input type="file" id="fileUpload" /> 我們在#fileUpload DOM元素上註冊一個變化事件處理程序，當用戶選擇一個圖像時，我們會觸發handleImageUpload()函數並傳入所選文件。 const handleImageUpload = event => { const files = event.target.files const formData = new FormData() formData.append('myFile', files[0]) fetch('/saveImage', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log(data.path) }) .catch(error => { console.error(error) }) } document.querySelector('#fileUpload').addEventListener('change', event => { handleImageUpload(event) }) 我們使用Fetch API將文件發送到服務器。當服務器成功返回時，它將在path屬性中發送圖像路徑給我們。有了這一點，我們可以進行需要的操作，比如用圖像更新界面。使用Node.js處理文件上傳的服務器端處理下面是服務器端代碼的詳細說明。我們使用Node.js和Express框架來處理請求。安裝express-fileupload npm模塊： npm install express-fileupload 在中間件中使用它： import fileupload from 'express-fileupload' //或 const fileupload = require('express-fileupload') 在創建Express應用程序之後，添加以下代碼：...

如何使用JavaScript將字符串轉換為數字

學習如何使用JavaScript將字符串轉換為數字 JavaScript提供了多種將字符串值轉換為數字的方法。最佳方法：使用Number對象我個人認為最好的方法是使用Number對象，在非構造函數上下文中使用（不使用new關鍵字）： const count = Number('1234') //1234 這也會處理小數。 Number是一個可以執行多個操作的包裝對象。如果我們使用構造函數（new Number("1234")），它將返回一個Number對象而不是數字值，所以要注意。注意數字之間的分隔符： Number('10,000') //NaN Number('10.00') //10 Number('10000') //10000 如果需要解析帶有小數分隔符的字符串，請改用Intl.NumberFormat。其他方法使用parseInt()和parseFloat() 對於整數，另一個很好的解決方案是調用parseInt()函數： const count = parseInt('1234', 10) //1234 不要忘記第二個參數，即基數，對於十進制數字始終為10，否則轉換可能會嘗試猜測基數並產生意外結果。 parseInt()嘗試從不僅包含數字的字符串中獲取數字： parseInt('10 lions', 10) //10 但是，如果字符串不以數字開頭，將返回NaN（Not a Number）： parseInt("I'm 10", 10) //NaN 與Number一樣，它在數字之間的分隔符上不可靠： parseInt('10,000', 10) //10 ❌ parseInt('10.00', 10) //10 ✅（被視為小數，被截斷） parseInt('10.000', 10) //10 ✅（被視為小數，被截斷） parseInt('10.20', 10) //10 ✅（被視為小數，被截斷） parseInt('10.81', 10) //10 ✅（被視為小數，被截斷） parseInt('10000', 10) //10000 ✅ 如果要保留小數部分而不僅僅獲得整數部分，請使用parseFloat()。請注意，與parseInt()不同，它只接受一個參數 - 要轉換的字符串：...

如何使用JavaScript將逗號轉換為點

我遇到了一個問題：我有一個字串包含一個十進制數字，但使用者可以用兩種方式來表示，這包含使用點或逗號： 0,32 0.32 不同的國家使用不同的方法在數字中分隔整數部分和小數部分。所以我決定在找到逗號時將字串轉換為使用點。我使用了一個簡單的正則表達式來做到這一點： let value = '0,32' value = value.replace(/,/g, '.') //value 現在為 '0.32' 您可以使用replace(/\./g, ',')來進行相反的操作（請注意在正則表達式中點前面的\，因為它是一個特殊字符）。正則表達式中的g標誌確保如果逗號（或點在第二個例子中）有多個實例，它們都會被轉換。這在我們的使用情境下並不適用，我認為我們需要進行更多驗證來檢查輸入的完整性，但這是一個開始。在我的情況下，在進行這個替換之後，我調用了parseFloat(value)來從字符串中得到浮點數，然後使用toFixed(2)將小數位數限制為2： value = parseFloat(value).toFixed(2)

如何使用JavaScript將圖片添加到DOM

最近我需要以程式的方式將圖片添加到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中了。

如何使用JavaScript檢查複選框是否被選中？

找出如何使用JavaScript檢查複選框的狀態，看它是否被選中或未選中。檢查元素的checked屬性。假設你有這個複選框： <input type="checkbox" class="checkbox" /> 你可以通過以下方法檢查它是否被選中： document.querySelector('.checkbox').checked 你也可以檢查是否找到.checkbox:checked並不返回null： document.querySelector('.checkbox:checked') !== null 但我認為找.checked會更清晰。請勿使用getAttribute()來查找checked屬性的值，因為如果複選框在默認情況下被選中，它的值始終為true： <input type="checkbox" checked /> 另外，不要檢查複選框元素的value。無論複選框是否被選中，它的值始終是on。