建立您的第一個 Web 應用程式：建立簡單筆記應用程式和字數計數器的初學者指南

在眾多的語言和框架選擇中，開始您的程式設計之旅可能會顯得令人畏懼。你甚至可能會想到讓人工智慧來處理一切！然而，網路程式設計可以是令人興奮的、易於理解的、並且完全免費的！

你將建構什麼

在本教程中，您將建立一個簡單的 Web 應用程序，旨在儲存文字註釋，同時計算這些註釋中的字元和單字數。

該應用程式會持久保存數據，即使在刷新頁面或重新打開頁面後也能檢索文字。這是一個實用的解決方案，可以快速存取重要文本，無論是地址、URL 還是其他任何內容。

顯示註解（包括日曆條目和 URL 清單）的簡單文字 Web 應用程式範例。

此外，該應用程式還追蹤字元和字數，為字串操作提供了精彩的介紹。雖然該應用程式的設計很基礎，但本教程使您能夠掌握基本的 Web 應用程式開發技能，從而釋放編碼的巨大可能性。

你將如何建構它

雖然 Web 應用程式可能存在很大差異，但它們通常整合了三種基本技術：HTML、CSS 和 JavaScript。這些元件中的每一個都在 Web 開發中發揮著至關重要的作用：

  • HTML：這是 Web 應用程式的結構，決定內容的組織方式。 HTML 定義文字是段落、標題或清單項目。
  • CSS：級聯樣式表為您的內容新增樣式，可讓您變更顏色、字體和版面配置。您可以使用 CSS 將元素加粗、調整邊框以及在螢幕上定位元素。
  • JavaScript：這種程式語言是將功能注入到 Web 應用程式中不可或缺的一部分。 JavaScript 可以創建互動式體驗，例如顯示/隱藏元素或建立複雜的應用程式（例如遊戲）。
web.dev 網站的主頁，提供 HTML、CSS 和 JavaScript 的學習資源。

應用程式結構

您要建立的應用程式包含三個簡單的檔案：index.html、styles.css和script.js。

運行此應用程式不存在任何高級要求 – 只需一個網頁瀏覽器就足夠了。由於這是一個前端應用程序，因此不需要 PHP 或本地伺服器等後端腳本語言。完成後，只需index.html在瀏覽器中開啟即可查看應用程式的運行情況。

該應用程式利用 Web Storage API 來保存文本，使其能夠保留資訊而無需寫入磁碟文件，因為 JavaScript 缺乏文件系統存取權。

如何建構記事本

首先在同一目錄中建立三個必要的檔案。或者，您可以從此GitHub 儲存庫下載檔案。

使用 HTML 建構結構

該index.html文件列出了應用程式的內容結構。它包含對 CSS 和 JavaScript 檔案的引用，允許瀏覽器將它們合併為無縫體驗。

就像任何 HTML 文件一樣，主框架由包含元資料的頭部和包含內容的主體組成：


<!DOCTYPE html>
<html>
<head>
...</head>
<body>
...</body>
</html>

head 部分包含簡短的元數據，包括頁面標題（在瀏覽器的標題列中可見）和文件的連結styles.css：


<title>Text</title>
<link rel="stylesheet"href="styles.css"/>

主體更加詳細，包括關鍵零件：


<div id="counter">
words: <span id="words">0</span>
/ characters: <span id="chars">0</span>
</div>
<textarea id="text"autofocus="1"></textarea>
<script src="script.js"></script>

該div元素被標識為“計數器”，包含單字和字元計數。它保留在頂部並隨著文字變更而動態更新。

注意屬性的使用至關重要id——它們的獨特值有助於設計這些元素的樣式並確定它們的功能。

它textarea為用戶提供了一個輸入文字的區域，該autofocus屬性確保它可以在頁面加載時進行輸入。最後，HTML 引用該script.js檔案。

此時，index.html在瀏覽器中開啟。它還無法運行，看起來可能不太正確，但是檢查每個階段的進度會很有幫助。

使用預設瀏覽器樣式的筆記 Web 應用程式的視圖，顯示所有內容都集中在左上角。

使用 CSS 讓事情看起來更好

雖然這個基本應用程式不需要進行大量的設計調整，但我們可以透過一些樣式來改進其佈局。

首先我們建立車身樣式，勾勒出整體外觀：


body {
margin: 0;
padding: 0;
display: grid;
min-height: 100vh;
grid-template-rows: min-content 1fr;
}

此 CSS 採用網格佈局將單字和字元計數排列在文字區域上方的窄行中。此grid-template-rows屬性決定計數行應佔用盡可能少的空間（min-content），而文字區域填入剩餘空間（1fr）。

計數器行接收基本樣式以將其與文字區域區分開來，主要是透過其背景：


#counter {
font-family: sans-serif;
background-color: #f7f7f7;
text-align: center;
width: 100%;
padding: 0 0.5em 0;
}

文字區域的樣式確保文字清晰易讀，並留有足夠的空白：


textarea {
width: 100%;
height: 100%;
font-size: 16pt;
padding: 1em;
box-sizing: border-box;
outline: 0;
border: none;
border-top: 1px solid #999;
}

具有自訂樣式的筆記應用程式在頂部顯示計數器欄，在下面顯示全尺寸的文字區域。

使用 JavaScript 新增功能

奠定了基礎後，您就可以將功能注入到您的應用程式中—賦予應用程式生命的程式碼！

在深入編碼之前，必須概述預期的功能。對於此應用程序，您將重點關注兩個主要目標：

  • 保留並重新載入輸入的文字。
  • 動態更新字元和字數。

這些功能需要更新某些文件元素。因此，首先使用getElementById以下方法來取得這些節點的參考：


const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");

這裡，words、chars、 和textarea對應於文件中各自的部分，由它們的 ID 屬性標識。

接下來，透過將應用程式設定為在文字變更時做出回應來引入互動性：


textarea.addEventListener("input", function(ev) {
localStorage.setItem("text", ev.target.value);
update_counts(ev.target.value);
});

此addEventListener方法綁定一個函數，以便在發生指定事件時觸發。在這種情況下，一旦使用者與文字區域交互，「input」事件就會觸發該函數。

接下來，Web Storage API 用於保存文字區域的當前內容，透過ev.target.value.此setItem方法將密鑰與要儲存的資料相關聯。

為了確保在應用程式初始化或刷新時載入文本，請新增另一個偵聽器：


window.addEventListener("load", function(ev) {
var text = localStorage.getItem("text");
textarea.value = text;
update_counts(text);
});

此偵聽器回應視窗的載入事件。視窗載入後，它會檢索已儲存的文字並相應地設定文字區域的值，同時呼叫update_counts()刷新單字和字元計數。

其餘功能位於update_counts()函數中，如下所示：


function update_counts(text) {
chars.innerHTML = text.length;
words.innerHTML = text.split(' ').length;
}

與文字區域不同，純文字缺少 value 屬性；因此，innerHTML將使用該屬性。length字串的屬性檢索總字元數。

為了將文字分解為單詞，我們使用text.split(' ')，它在每個空格字元分割字串，產生單字數組。結果數組的 length 屬性提供了字數。

但是，使用此程式碼您可能會遇到一些挑戰：

  1. 如果沒有周圍的空格字符，它將無法正確計算一行中的單字。
  2. 如果不存在文本，則由於split操作方式，它將不準確地報告單字。

若要解決第一個問題，請考慮拆分正規表示式以考慮空白字元：\s。要解決第二個問題，請過濾掉所有空字串：


words.innerHTML = text.split(/\s/).filter(function(n) { return n! = ''; }).length;

此網頁應用程式包含範例文本，顯示準確的字元和字數。

只需幾個基本文件即可建立有用的 Web 應用程式！您可以透過整合其他功能來擴展這個簡單的筆記應用程序，例如使用window.location 屬性來存取 URL 或允許透過改變傳遞給 的名稱來保存多個筆記localStorage.setItem。

額外的見解

1. 本 Web 應用程式教學的先決條件是什麼？

您所需要的只是對 HTML、CSS 和 JavaScript 有基本的了解。文字編輯器（例如 VSCode）和 Web 瀏覽器等工具也會有所幫助。

2. 我可以修改此網頁應用程式以添加更多功能嗎？

絕對地！本教程提供了基礎。您可以新增功能，例如儲存多個筆記、將筆記分類，甚至實現搜尋功能！

3. Web Storage API 是如何運作的？

Web 儲存 API 允許 Web 應用程式在瀏覽器中儲存資料。它將資料儲存在鍵值對中，即使在瀏覽器關閉後這些資料仍然存在，以便以後輕鬆檢索。

來源和圖片

Verwandte Artikel:

18 項基本 PS5 設定可自訂以增強遊戲體驗
6 種可能在國際邊境引發問題的高風險科技產品

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *