• 關於我們
  • 宣布
  • 隱私權政策
  • 联系我们
MasterTrend 新闻
  • 家
    • 博客
    • 技术服务
    • 店铺
  • 教程
  • 硬體
  • 赌博
  • 手机
  • 安全
  • 視窗
  • 人工智能
  • 軟體
  • 网络
  • 消息
没有结果
查看所有结果
  • 家
    • 博客
    • 技术服务
    • 店铺
  • 教程
  • 硬體
  • 赌博
  • 手机
  • 安全
  • 視窗
  • 人工智能
  • 軟體
  • 网络
  • 消息
没有结果
查看所有结果
MasterTrend 新闻
没有结果
查看所有结果
開始 教程

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

MasterTrend 洞察 经过 MasterTrend 洞察
2025年1月5日 13日
在 教程
阅读时间:10 分钟阅读
到 到
0
轻松快速地创建您的第一个 Web 应用笔记 + 计数器
1
共享
4
视图
在 Facebook 上分享在 Twitter 上分享

內容

  1. 创建您的第一个 Web 应用程序:轻松快捷地记录 + 计数器
  2. 你要构建什么
  3. 你要如何建造它?
  4. 应用程序的结构
  5. 如何打造笔记记录器
    1. 使用 HTML 构建结构
    2. 使用 CSS 让它们看起来更美观
    3. 使用 JavaScript 添加功能
    4. 相关出版物

创建您的第一个 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 并支持多个注释。 🗒️🌍

分享這個:
49Facebook領英興趣X紅迪網豆瓣藍天執行緒數分享
49
分享

相关出版物

  • 如何修复 Twitter 错误
  • 2024 年如何免费下载嵌入式视频
  • 适用于 Windows 10/11 的最佳诊断工具
  • AMD Radeon RX 7000 5 和 6 纳米
  • Intel Alder Lake P 和 U 皮肤
  • SSD 固态硬盘的速度 - PC 和笔记本电脑
  • 波士顿动力 Atlas 的实际应用
  • Linux目录结构解释
标签: 常青内容技术提示
上一篇文章

如何在 Windows 11 中显示或隐藏库:分步指南🚀🔒

下一期

RTS 游戏:各大工作室为何纷纷放弃它们? 🎮🔥

MasterTrend 洞察

MasterTrend 洞察

我们的编辑团队分享深入的评论、教程和建议,以帮助您充分利用数字设备和工具。

下一期
RTS 游戏:5 款保持策略活力的独立游戏

RTS 游戏:各大工作室为何纷纷放弃它们? 🎮🔥

5 2 投票数
文章評級
訂閱
使用权
通知
客人
客人
0 評論
最古老的
最新 投票最多
線上評論
查看所有評論

保持联系

  • 976 风扇
  • 118 关注者
  • 1.4千 关注者
  • 1.8千 订阅者
订阅表格
  • 趋势
  • 评论
  • 最后的
如何在 Windows 11 桌面添加时钟:3 个万无一失的技巧!

如何在 Windows 11 桌面添加时钟:几分钟内完成更多工作! ⏱️

2025 年 1 月 5 日,第 1 期
12 个 Android 版 Lucky Patcher 的最佳替代品

Lucky Patcher 替代品:12 个更好、更简单的应用程序! 🎮⚡

2025年1月5日 12日
2024 年如何在 Android 上使用 AdGuard DNS

2025 年如何在 Android 上使用 AdGuard DNS

2025 年 2 月 11 日
如何在 Oblivion Remastered 中存储物品:您需要知道的 5 个技巧! 🗝️💼

如何在 Oblivion Remastered 中存储物品而不丢失你的战利品💎⚡

2025 年 1 月 5 日,第 1 期
Android 版 Gmail 功能:5 个小窍门助您节省时间

Android 上的 Gmail 功能:您不知道的 5 个技巧! 📱✨

12
主板维修 - 维修主板

笔记本主板维修

10
在没有互联网的情况下安装 Windows 11 家庭版

在没有互联网的情况下安装 Windows 11 家庭版

10
如何通过 4 个步骤备份 Windows 11/10 中的驱动程序!

如何在 Windows 11/10 中备份驱动程序:避免错误! 🚨💾

10
未在网络上注册 几分钟内修复此 Android 错误

未在网络上注册:几分钟内修复此 Android 错误 ⏳🔧

2025年6月27日
技嘉 B760M AORUS ELITE WIFI6E GEN5

技嘉 B760M AORUS ELITE WIFI6E GEN5 PCIe Gen5 现已上市!⚡💻

2025年6月27日
Chrome 中的广告软件:清理浏览器的 5 个简单步骤

Chrome 中的广告软件:立即检测并移除这些威胁!🛑💻

2025年6月26日
异度之刃

Xenoblade Chronicles X 登陆 Switch:经典的 Wii U 结局现已登陆 Switch 🌟🔥

2025年6月26日

最新资讯

未在网络上注册 几分钟内修复此 Android 错误

未在网络上注册:几分钟内修复此 Android 错误 ⏳🔧

2025年6月27日
3
技嘉 B760M AORUS ELITE WIFI6E GEN5

技嘉 B760M AORUS ELITE WIFI6E GEN5 PCIe Gen5 现已上市!⚡💻

2025年6月27日
4
Chrome 中的广告软件:清理浏览器的 5 个简单步骤

Chrome 中的广告软件:立即检测并移除这些威胁!🛑💻

2025年6月26日
4
异度之刃

Xenoblade Chronicles X 登陆 Switch:经典的 Wii U 结局现已登陆 Switch 🌟🔥

2025年6月26日
3
MasterTrend 新闻徽标

MasterTrend Info 是您获取科技资讯的首选:探索硬件、软件、游戏、移动设备和人工智能领域的新闻、教程和分析。订阅我们的新闻通讯,不错过任何潮流趋势。

跟着我们

按类别浏览

  • 赌博
  • 硬體
  • 人工智能
  • 手机
  • 消息
  • 网络
  • 安全
  • 軟體
  • 教程
  • 視窗

最新资讯

未在网络上注册 几分钟内修复此 Android 错误

未在网络上注册:几分钟内修复此 Android 错误 ⏳🔧

2025年6月27日
技嘉 B760M AORUS ELITE WIFI6E GEN5

技嘉 B760M AORUS ELITE WIFI6E GEN5 PCIe Gen5 现已上市!⚡💻

2025年6月27日
  • 關於我們
  • 宣布
  • 隱私權政策
  • 联系我们

版权所有 © 2025 https://mastertrend.info/ - 保留所有权利。所有商标均为其各自所有者的财产。

es_ES Spanish
es_ES Spanish
en_US English
pt_BR Portuguese
fr_FR French
it_IT Italian
ru_RU Russian
de_DE German
zh_CN Chinese
ko_KR Korean
ja Japanese
th Thai
hi_IN Hindi
ar Arabic
tr_TR Turkish
pl_PL Polish
id_ID Indonesian
没有结果
查看所有结果
  • 赌博
  • 硬體
  • 人工智能
  • 手机
  • 消息
  • 网络
  • 安全
  • 軟體
  • 教程
  • 視窗

版权所有 © 2025 https://mastertrend.info/ - 保留所有权利。所有商标均为其各自所有者的财产。

評論作者訊息
:wpds_微笑::wpds_grin::wpds_wink::wpds_mrgreen::wpds_中性::wpds_扭曲::wpds_箭頭::wpds_shock::wpds_unamused::wpds_酷::wpds_邪惡::wpds_oops::wpds_razz::wpds_roll::wpds_cry::wpds_eek::wpds_哈哈::wpds_mad::wpds_悲傷::wpds_感嘆號::wpds_問題::wpds_想法::wpds_嗯::wpds_beg::wpds_whew::wpds_咯咯::wpds_silly::wpds_羨慕::wpds_shutmouth:
wpDiscuz
紅迪網藍天X乳齒象黑客新闻
分享這個:
乳齒象VKWhatsApp电报短信黑客新闻线信使
你的 Mastodon 实例