類別：Tutoriales
發布

创建您的第一个 Web 应用程序并轻松掌握编程🚀💻

轻松快速地创建您的第一个 Web 应用笔记 + 计数器

创建您的第一个 Web 应用程序：轻松快捷地记录 + 计数器

开始编程似乎是一件令人难以承受的事情，因为需要考虑太多的语言、框架和方法。有时将所有事情委托给人工智能似乎更容易。不用担心！网络编程可以简单、有趣，而且最重要的是完全免费！ 🌐✨

你要构建什么

通过遵循本教程，您将创建一个简单的 Web 应用程序来存储文本注释并计算字符和单词。

该应用程序将保留数据，因此当您重新加载或重新打开页面时它会记住文本。这意味着您将有一种方便的方式来保存以后想要引用的任何文本，例如地址、URL 等。📄🔗

一个简单的基于文本的 Web 应用程序的示例，显示注释，包括日历条目和 URL 列表。

它还计算字符和单词，这是对字符串（文本）处理的一个很好的介绍。当然，该应用程序非常简单：这就是目的！但是通过本教程，您将学习开发 Web 应用程序的基础知识，然后世界将由您掌控。 🦪💻

你要如何建造它？

尽管 Web 应用程序种类繁多，但它们通常涉及三种主要技术：HTML、CSS 和 JavaScript。在开始之前了解他们的角色至关重要。 📚

  • HTML：超文本标记语言允许您定义内容的结构。有了它，您可以根据文本的含义对其进行标记，例如，指示它是段落、标题还是列表中的项目。
  • CSS：层叠样式表允许您设置内容的样式。使用这种语言，您可以将段落涂成绿色，将所有链接加粗，或者将侧边栏放置在主文章旁边。 🎨
  • JavaScript：使用此编程语言，您可以为您的网站添加功能。您可以让按钮在单击时显示或隐藏文档的某些部分，或者实现功能齐全的文字处理器或视频游戏。 🎮

他 网站.dev （由 Chrome 团队成员撰写）和 MDN，Mozilla 开发者网络，是有关基础网络技术的两个极好的信息来源。

web.dev 网站的主页，其中包含 HTML、CSS 和 JavaScript 的学习资源。

应用程序的结构

您将构建的应用程序将包含三个简单的文件：index.html、styles.css 和 script.js。 🗂️

运行该应用程序没有特殊要求，您只需要一个网络浏览器。没有后端功能，因此您不需要 PHP 或本地 Web 服务器等脚本语言。完成后，你可以打开 直接在浏览器中打开 index.html 文件 一切都会好起来的。 😊

值得注意的是，此应用程序会保存您的文本，而不会将其写入磁盘上的特定文件，因为 JavaScript 无法访问文件系统。使用 Web Storage API，这是 cookie 的强大替代品。 🍪💾

如何打造笔记记录器

在同一目录中创建以下三个文件，然后在Web浏览器中打开index.html。或者，您可以从 这个 GitHub 仓库。 📥

使用 HTML 构建结构

index.html 文件以 HTML 形式定义应用程序内容的结构。包含对其他两个文件的引用，以便浏览器可以将它们组合成最终产品。

与所有 HTML 文档一样，顶级结构包括包含元数据的 head 部分和包含页面上将显示的实际内容的 body 部分：

html>
<html>
<头>
    ...
头>

<身体>
…
身体>
html>

头部的元数据非常简短，只有页面标题（出现在浏览器的标题栏中）和对styles.css文件的引用：

    <标题>文本标题>
    <关联 相对=“样式表” 网址=“styles.css” />

身体比较复杂，但重要的部分只有几个：

    <div ID=“柜台”>
        字： <跨度 ID=“字”>0跨度>
        / 人物： <跨度 ID=“字符”>0跨度>
    div>

<文本区域 ID=“文本” 自动对焦=«1»>文本区域>

<脚本 源码=script.js>脚本>

div 元素包含应用程序的字数和字符数。它将位于网络应用程序的顶部，并将在每次文本更改时更新。

请注意 id 属性，它对于操作至关重要。 id 的值必须是唯一的，以便应用程序可以使用它来识别特定的项目。这样做可以帮助我们设计这些元素的样式，并在添加功能时定位它们。

文本区域是一个内置表单元素，允许您在浏览器中输入简单文本。有了自动对焦属性，您可以在页面加载后立即开始输入。最后，页面引用javascript文件script.js。

此时，您可以在浏览器中打开index.html文件。它现在不会做任何事情，甚至看起来也不太好，但在每个阶段测试您的应用程序以确保基本功能按预期运行是有帮助的。

具有默认浏览器样式的笔记网络应用程序的视图，显示分组在左上角的所有内容。

使用 CSS 让它们看起来更美观

CSS 允许您通过定位网页的各个部分并指定字体大小和背景颜色等属性的值来设置网页的各个部分的样式。这个示例应用程序不需要非常精致的设计，因为它的界面非常基础。然而，我们可以用一些风格来消除粗糙的边缘。 🎨✨

首先，设计主体样式来定义整体设计：

身体 {
    利润: 0;
    填充: 0;
    展示: 网格;
    最小高度: 100极值;
    网格模板行: 最低内容 1法语;
}

此 CSS 使用 网格布局 将字数和字符数定位在文本区域上方的窄行中。 grid-template-rows 属性指定计数行应尽可能短（min-content）并且文本区域应填充剩余空间（1fr）。

计数器行具有基本样式，以将其与其余文本区分开来，主要是通过其背景：

#计数器 {
    字体系列: 无衬线字体;
    背景颜色: #f7f7f7;
    文本对齐: 中心;
    宽度: 100%;
    填充: 0.5em 0;
}

最后，文本区域的样式被设计为显示清晰的文本，并具有足够的空间。将计数与文本分开的线实际上是该文本区域的顶部边框。

文本区域 {
    宽度: 100%;
    高度: 100%;
    字体大小: 16点;
    填充: 1在;
    盒子大小: 边框;
    大纲: 0;
    边界: 没有任何;
    顶部边框: 1像素 坚硬的 #999;
}
具有自定义样式的笔记应用程序在顶部显示计数栏，下方显示全尺寸文本区域。

使用 JavaScript 添加功能

有了结构和样式，您就可以添加功能了：使这个简单的应用程序真正执行某些操作的代码。 🛠️

在开始编写哪怕是最简单的代码之前，最好先了解一下您想要它做什么。在这种情况下，只有几个一般要求：

  • 保存输入的文本并在必要时重新加载。
  • 更新字符和字数以提供实时统计数据。 📊

这两项要求都涉及更新文档中的元素。因此脚本首先使用 getElementById 方法获取对这些节点的引用：

常量 单词 = 文档.getElementById(“字”);
常量 字符 = 文档.getElementById(“字符”);
常量 文本区域 = 文档.getElementById(“文本”);

请注意，words、chars 和 text 是文档中各自元素的 ID，在 HTML 文件中使用 id 属性分配。

接下来，我们需要应用程序在文本改变时做出反应：

文本区域.addEventListener(“输入”, 功能(电动汽车) { localStorage.setItem（“文本”，ev.目标.值);更新计数（ev.目标.值）； });

事件监听器是 JavaScript 在某个事件发生时自动执行的函数。在这种情况下，我们将一个监听器附加到 textarea 节点，当“input”事件发生时执行该监听器。也就是说，当有人与文本区域交互时。

接下来，我们使用Web Storage API来保存textarea的当前内容，该内容来自ev.target.value。在这个结构中，ev 是表示触发监听器的事件的对象，ev.target 是接收事件的节点，ev.target.value 是该文本区域的文本。

setItem 方法采用两个参数：与数据关联的键名和要存储的实际数据。

接下来，我们调用 update_counts()，传递相同的文本。我们稍后会解释该功能。

现在我们正在保存文本，您将需要在应用程序打开或重新加载时再次加载它。我们可以通过使用另一个监听器来解决这个问题：

窗户.添加事件监听器（“加载”, 功能(电动汽车) {
    变量 文本 = localStorage.getItem(“文本”（此处似有缺失，请提供更正后的文本）。文本区域.值=文本；更新计数（文本）； });

该监听器处理发生在窗口对象上的加载事件，窗口对象是浏览器窗口的顶级表示。当窗口加载时，对 getItem() 的调用将从本地存储返回存储的文本值。然后，此代码将 textarea 的值设置为已加载的文本，并且像上面的监听器一样，使用此文本调用 update_counts()。

剩余的工作在 update_counts() 函数中完成，如下所示：

功能 更新计数(文本) { chars.innerHTML = 文本.长度; words.innerHTML = text.split(' '）。长度; }

与文本区域不同，常规文本没有值属性，因此我们设置 innerHTML 属性。字符串的长度属性是一个简单的只读属性，它告诉我们字符的数量。

text.split(' ') 在空格字符处拆分字符串，并将结果作为字符串数组返回。与字符串一样，数组具有长度属性，该属性告诉我们数组中元素的数量。

但是，如果您测试此代码，您可能会注意到几个错误：

  1. 它无法正确计算一行中的单个单词，因为其周围没有空格字符。
  2. 由于分割的方式，没有任何文本时它会报告一个单词。

为了解决第一个问题，您可以根据正则表达式（\s 表示“空白字符”）而不是空格进行拆分。要解决第二个问题，请从结果中过滤掉空字符串：

    words.innerHTML = text.split(/\s/）。筛选（功能(n) { 返回 n != ''； }）。长度;

如果你不完全理解这一行，请查看 MDN 页面 分裂 和 筛选.

带有示例文本的网络应用程序，显示准确的字符和字数。

只需几个文件即可构建许多有用的 Web 应用程序。您还可以扩展这个简单的笔记应用程序以添加更多功能。例如，您可以使用 window.location 属性 通过改变传递给 localStorage.setItem 的名称来检索当前 URL 并支持多个注释。 🗒️🌍

相關文章：

5 2 投票数
文章評級
訂閱
通知
客人

0 評論
最古老的
最新 投票最多
線上評論
查看所有評論