Week 8 HTML, CSS, JavaScript
欢迎！
- 前几周，我们向您介绍了 Python，这是一种高级编程语言，它使用了我们在 C 中学到的相同构建块。今天，我们将在 HTML、CSS 和 JavaScript 中进一步扩展这些构建块。
互联网
互联网是我们都使用的一项技术。
利用前几周的技能，我们可以构建自己的网页和应用程序。
ARPANET 将互联网上最早的一些节点彼此连接起来。
两点之间的点可以被视为路由器。
路由器
要将数据从一个地方路由到另一个地方，我们需要做出“路由决策”。也就是说，有人需要编程如何将数据从 A 点传输到 B 点。
你可以想象数据如何从A点到B点走多条路径，这样当路由器拥塞时，数据可以流经另一条路径。 数据包从一个路由器传输到另一个路由器，从一台计算机传输到另一台计算机。
TCP/IP 是两种协议，允许计算机通过互联网在它们之间传输数据。
IP 或 互联网协议 是计算机可以通过互联网相互识别的一种方式。每台计算机在世界上都有一个唯一的地址。地址采用以下形式：
#.#.#.#
数字范围从
0到255。 IP 地址是 32 位，这意味着这些地址可以容纳超过 40 亿个地址。新版本的 IP 地址实现了 128 位，可以容纳更多的计算机！在现实世界中，服务器为我们做了很多工作。
数据包的结构如下：
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|Version| IHL |Type of Service| Total Length |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Identification |Flags| Fragment Offset |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Time to Live | Protocol | Header Checksum |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Source Address |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Destination Address |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Options | Padding |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
- 数据包是标准化的。源和目的地保存在每个数据包中。
TCP 或传输控制协议有助于跟踪发送的数据包的顺序。
此外，TCP 用于区分 Web 服务。例如，
80用于表示 HTTP，443用于表示 HTTPS。这些数字是端口号。当信息从一个位置发送到另一位置时，会发送源 IP 地址、目标 IP 地址和 TCP 端口号。
这些协议还用于将大文件拆分成多个部分或数据包。例如，一张很大的猫的照片可以分多个数据包发送。当某个数据包丢失时，TCP/IP 可以再次向源服务器请求缺失的数据包。
当所有数据已发送和接收时，TCP 将确认。
DNS
- 如果你需要记住一个IP地址才能访问一个网站，那将是非常繁琐的。
DNS 或 域名系统 是互联网上的服务器集合，用于将 harvard.edu 等网站地址路由到特定的 IP 地址。
- DNS 只是一个表或数据库，它将特定的完全限定域名链接到特定的 IP 地址。
DHCP
DHCP 是一种确定您设备的 IP 地址的协议。
- 此外，该协议定义了您的设备使用的默认网关和名称服务器。
HTTPS
HTTP 或超文本传输协议 是一种应用层协议，开发人员使用它在不同位置之间传输数据，从而构建强大而有用的功能。HTTPS 是该协议的安全版本。
当您看到诸如
https://www.example.com之类的地址时，您实际上是在隐式访问该地址，该地址末尾带有/。路径 是该斜杠之后存在的内容。例如，
https://www.example.com/folder/file.html访问example.com，浏览到folder目录，然后访问名为file.html的文件。.com称为“顶级域”，用于表示与该地址相关的位置或组织类型。
该地址中的 https 是用于连接到该网址的协议。通过协议，我们的意思是 HTTP 利用 GET 或 POST 请求从服务器请求信息。例如，您可以启动 Google Chrome，右键单击，然后单击 inspect。当您打开developer tools并访问Network时，选择Preserve log，您将看到Request Headers。您会看到提及 GET。这在其他浏览器中也是可能的，但使用的方法略有不同。
例如，当发出 GET 请求时，您的计算机可能会向服务器发送以下内容：
GET / HTTP/2
Host: www.harvard.edu
请注意，此请求通过 HTTP 请求 www.harvard.edu 上提供的内容。
一般来说，向服务器发出请求后，您会在 Response Headers 中收到以下内容：
HTTP/2 200
Content-Type: text/html
这种检查这些日志的方法可能比需要的更复杂一些。您可以在 cs50.dev 上分析 HTTP 协议的工作情况。例如，在终端窗口中键入以下内容：
curl -I https://www.harvard.edu/
请注意，此命令的输出返回服务器响应的所有标头值。
- 通过网络浏览器中的开发者工具，您可以在浏览上述网站时看到所有 HTTP 请求。
此外，在终端窗口中执行以下命令：
curl -I https://harvard.edu
请注意，您将看到 301 响应，向浏览器提供在哪里可以找到正确网站的提示。
同样，在终端窗口中执行以下命令：
curl -I http://www.harvard.edu/
请注意，https 中的 s 已被删除。服务器响应将显示响应为301，这意味着该网站已永久移动。
与301类似，代码404表示未找到指定的URL。还有许多其他响应代码，例如：
200 OK
301 Moved Permanently
302 Found
304 Not Modified
307 Temporary Redirect
401 Unauthorized
403 Forbidden
404 Not Found
418 I'm a Teapot
500 Internal Server Error
503 Service Unavailable
- 值得一提的是，当
500错误涉及您创建的产品或应用程序时，500错误始终是您作为开发人员的错误。这对于下周的习题集以及可能对你的期末项目尤其重要！
HTML
HTML或超文本标记语言由标签组成，每个标签可能有一些描述它的属性*。
在您的终端中，输入 code hello.html 并编写代码，如下所示：
lang="en">
hello, title
hello, body
请注意，html 标记既打开又关闭该文件。此外，请注意 lang 属性，它修改 html 标记的行为。另请注意，还有 head 标签和 body 标签。缩进不是必需的，但确实暗示了层次结构。
您可以通过输入
http-server来提供代码。此服务内容现在可以在很长的 URL 上获得。如果你点击它，你就可以访问你自己的代码生成的网站。当您访问这个URL时，请注意文件名
hello.html出现在这个URL的末尾。此外，请注意，根据 URL，服务器正在通过端口 8080 提供服务。
标签的层次结构可以表示如下：
当我们稍后学习 JavaScript 时，这个层次结构的知识将会很有用。
浏览器将从上到下、从左到右读取您的 HTML 文件。
由于 HTML 中的空格和缩进实际上被忽略，因此您将需要使用 <p> 段落标记来打开和关闭段落。考虑以下几点：
lang="en">
paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
请注意，段落以 <p> 标签开头，以 </p> 标签结尾。
HTML 允许表示标题：
lang="en">
headings
One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
Two
Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
Three
Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
Four
Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
Five
Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
Six
Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
请注意，<h1>、<h2> 和 <h3> 表示不同级别的标题。
我们还可以在 HTML 中创建无序列表：
lang="en">
list
foo
- bar
- baz
请注意，<ul> 标记创建一个包含三个项目的无序列表。
我们还可以在 HTML 中创建有序列表：
lang="en">
list
foo
- bar
- baz
请注意，<ol> 标记创建了一个包含三个项目的有序列表。
我们还可以在HTML中创建一个表：
lang="en">
table
1
2
3
4
5
6
7
8
9
*
0
#
表格还具有打开和关闭其中每个元素的标签。另外，请注意 HTML 中注释的语法。
图像也可以在 HTML 中使用：
lang="en">
image
alt="photo of bridge" src="bridge.png">
请注意，src="bridge.png" 表示图像文件所在的路径。
视频也可以包含在 HTML 中：
lang="en">
video
controls muted>
src="video.mp4" type="video/mp4">
请注意，type 属性指定这是 mp4 类型的视频。此外，请注意 controls 和 muted 是如何传递给 video 的。
您还可以在各个网页之间建立链接：
lang="en">
link
Visit href="https://www.harvard.edu">Harvard.
请注意，<a> 或 anchor 标签用于使 Harvard 成为可链接文本。
您还可以创建让人想起 Google 搜索的表单：
lang="en">
search
action="https://www.google.com/search" method="get">
name="q" type="search">
type="submit" value="Google Search">
请注意，form 标记打开并提供了它将采用的 action 的属性。包含 input 字段，传递名称 q 和类型 search。
我们可以按如下方式更好地进行搜索：
lang="en">
search
action="https://www.google.com/search" method="get">
autocomplete="off" autofocus name="q" placeholder="Query" type="search">
Google Search
请注意，autocomplete 被设为 off。autofocus 已启用。
- 我们只看到了您可以添加到网站的众多 HTML 元素中的几个。如果您有一个想法要添加到您的网站中，而我们还没有见过（按钮、音频文件等），请尝试在 Google 上搜索“X in HTML”来找到正确的语法！同样，您可以使用cs50.ai来帮助您发现更多HTML功能！
正则表达式
正则表达式或正则表达式是确保用户提供的数据符合特定格式的一种方法。
我们可以使用正则表达式实现我们自己的注册页面，如下所示：
lang="en">
register
autocomplete="off" autofocus name="email" placeholder="Email" type="email">
Register
请注意，input 标记包含指定其类型为 email 的属性。浏览器知道要仔细检查输入是否是电子邮件地址。
当浏览器使用这些内置属性来检查电子邮件地址时，我们可以添加 pattern 属性以确保只有特定数据最终出现在电子邮件地址中：
lang="en">
register
autocomplete="off" autofocus name="email" pattern=".+@.+\.edu" placeholder="Email" type="email">
Register
请注意，pattern 属性被赋予一个正则表达式，以表示电子邮件地址必须包含 @ 符号和 .edu。
- 您可以从Mozilla 的文档 了解有关正则表达式的更多信息。另外，您可以向cs50.ai查询提示。
CSS
CSS 或“级联样式表”是一种标记语言，可让您微调 HTML 文件的美观性。
- CSS 填充有属性，其中包括键值对。
在您的终端中，输入 code home.html 并编写代码，如下所示：
lang="en">
css
style="font-size: large; text-align: center;">
John Harvard
style="font-size: medium; text-align: center;">
Welcome to my home page!
style="font-size: small; text-align: center;">
Copyright © John Harvard
请注意，为 <p> 标记提供了一些 style 属性。 font-size 设置为 large、medium 或 small。 然后将 text-align 设置为中心。
虽然上面的内容是正确的，但设计得并不好。我们可以通过修改代码来删除冗余，如下所示：
lang="en">
css
style="text-align: center">
style="font-size: large">
John Harvard
style="font-size: medium">
Welcome to my home page!
style="font-size: small">
Copyright © John Harvard
请注意，<div> 标签用于将此 HTML 文件划分为特定区域。 text-align: center 在 HTML 的整个主体上调用。由于 body 内的所有内容都是 body 的子级，因此 center 属性会向下级联到这些子级。
事实证明，HTML 中包含了更新的语义标签。我们可以修改我们的代码如下：
lang="en">
css
style="text-align: center">
style="font-size: large">
John Harvard
style="font-size: medium">
Welcome to my home page!
style="font-size: small">
Copyright © John Harvard
请注意，header 和 footer 都分配有不同的样式。
这种将样式和信息全部放在同一位置的做法并不是一个好的做法。我们可以将 style 元素移动到文件顶部，如下所示：
lang="en">
.centered
{
text-align: center;
}
.large
{
font-size: large;
}
.medium
{
font-size: medium;
}
.small
{
font-size: small;
}
css
class="centered">
class="large">
John Harvard
class="medium">
Welcome to my home page!
class="small">
Copyright © John Harvard
请注意，所有样式标签都放置在 style 标签包装器的 head 中。另外，请注意，我们已将名为 centered、large、medium 和 small 的类分配给我们的元素，并且我们通过在名称前放置一个点来选择这些类，如 .centered 中
事实证明，我们可以将所有样式代码移动到一个名为 CSS 文件的特殊文件中。我们可以创建一个名为 style.css 的文件并将我们的类粘贴到其中：
.centered
{
text-align: center;
}
.large
{
font-size: large;
}
.medium
{
font-size: medium;
}
.small
{
font-size: small;
}
请注意，这是我们的 HTML 文件中逐字显示的内容。
然后我们可以告诉浏览器在哪里找到此 HTML 文件的 CSS：
lang="en">
href="style.css" rel="stylesheet">
css
class="centered">
class="large">
John Harvard
class="medium">
Welcome to my home page!
class="small">
Copyright © John Harvard
请注意，style.css 作为样式表链接到此 HTML 文件，告诉浏览器在哪里找到我们创建的样式。
框架
- 与我们可以在 Python 中利用的第三方库类似，有一些名为 frameworks 的第三方库，我们可以将其与 HTML 文件一起使用。
Bootstrap就是这些框架之一，我们可以用它来美化我们的HTML并轻松完善设计元素，使我们的页面更具可读性。
可以通过在 html 文件的 head 中添加以下 link 标签来使用 Bootstrap：
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
bootstrap
考虑以下 HTML：
lang="en">
phonebook
Name
Number
Carter
+1-617-495-1000
David
+1-617-495-1000
John
+1-949-468-2750
请注意，当查看此页面的服务版本时，它非常简单。
现在考虑以下实现 Bootstrap 使用的 HTML：
lang="en">
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
phonebook
class="table">
scope="col">Name
scope="col">Number
Carter
+1-617-495-1000
David
+1-949-468-2750
请注意这个网站现在变得多么漂亮了。
同样，请考虑之前创建的搜索页面的以下扩展：
lang="en">
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
search
class="container-fluid">
class="m-3 nav">
class="nav-item">
class="nav-link text-dark" href="https://about.google/">About
- class="nav-item">
class="nav-link text-dark" href="https://store.google.com/">Store
- class="nav-item ms-auto">
class="nav-link text-dark" href="https://www.google.com/gmail/">Gmail
- class="nav-item">
class="nav-link text-dark" href="https://www.google.com/imghp">Images
- class="nav-item">
class="nav-link text-dark" href="https://www.google.com/intl/en/about/products">
xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grid-3x3-gap-fill" viewBox="0 0 16 16">
d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2z"/>
- class="nav-item">
class="btn btn-primary" href="https://accounts.google.com/ServiceLogin" role="button">Sign in
class="text-center">
alt="Happy Cat" class="img-fluid w-25" src="cat.gif">
action="https://www.google.com/search" class="mt-4" method="get">
autocomplete="off" autofocus class="form-control form-control-lg mb-4 mx-auto w-50" name="q" placeholder="Query" type="search">
class="btn btn-light">Google Search
class="btn btn-light" name="btnI">I'm Feeling Lucky
感谢 Bootstrap，这个版本的页面非常风格化。
- 您可以在Bootstrap 文档 中了解更多相关信息。
JavaScript
- JavaScript 是另一种允许网页内交互的编程语言。
考虑 hello.html 的以下实现，其中包括 JavaScript 和 HTML：
lang="en">
function greet()
{
alert('hello, ' + document.querySelector('#name').value);
}
hello
onsubmit="greet(); return false;">
autocomplete="off" autofocus id="name" placeholder="Name" type="text">
type="submit">
请注意此表单如何使用 onsubmit 属性来触发在文件顶部找到的 script。该脚本使用 alert 创建警报弹出窗口。 #name.value 转到页面上的文本框并获取用户输入的值。
一般来说，混合 onsubmit 和 JavaScript 被认为是不好的设计。我们可以按如下方式推进我们的代码：
lang="en">
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').addEventListener('submit', function(e) {
alert('hello, ' + document.querySelector('#name').value);
e.preventDefault();
});
});
hello
autocomplete="off" autofocus id="name" placeholder="Name" type="text">
type="submit">
请注意，此版本的代码创建了一个 addEventListener 来侦听正在触发的表单 submit。请注意 DOMContentLoaded 如何确保在执行 JavaScript 之前加载整个页面。
我们可以按如下方式推进此代码：
lang="en">
document.addEventListener('DOMContentLoaded', function() {
let input = document.querySelector('input');
input.addEventListener('keyup', function(event) {
let name = document.querySelector('p');
if (input.value) {
name.innerHTML = `hello, ${input.value}`;
}
else {
name.innerHTML = 'hello, whoever you are';
}
});
});
hello
autocomplete="off" autofocus placeholder="Name" type="text">
请注意，当用户键入名称时，DOM 在内存中动态更新。如果input里面有值，在键盘上的keyup上，DOM就被更新。否则，将显示默认文本。
- JavaScript 允许您动态读取和修改加载到内存中的 html 文档，这样用户无需重新加载即可看到更改。
考虑以下 HTML：
lang="en">
background
id="red">R
id="green">G
id="blue">B
let body = document.querySelector('body');
document.querySelector('#red').addEventListener('click', function() {
body.style.backgroundColor = 'red';
});
document.querySelector('#green').addEventListener('click', function() {
body.style.backgroundColor = 'green';
});
document.querySelector('#blue').addEventListener('click', function() {
body.style.backgroundColor = 'blue';
});
请注意，JavaScript 侦听何时单击特定按钮。单击此按钮后，页面上的某些样式属性会发生更改。 body 被定义为页面的主体。然后，事件侦听器等待单击其中一个按钮。然后，body.style.backgroundColor 被更改。
同样，请考虑以下事项：
lang="en">
// Toggles visibility of greeting
function blink()
{
let body = document.querySelector('body');
if (body.style.visibility == 'hidden')
{
body.style.visibility = 'visible';
}
else
{
body.style.visibility = 'hidden';
}
}
// Blink every 500ms
window.setInterval(blink, 500);
blink
hello, world
此示例以设定的时间间隔闪烁文本。请注意，window.setInterval 接受两个参数：要调用的函数和函数调用之间的等待时间（以毫秒为单位）。
考虑以下自动完成文本的 JavaScript 实现：
lang="en">
autocomplete
autocomplete="off" autofocus placeholder="Query" type="text">
src="large.js">
let input = document.querySelector('input');
input.addEventListener('keyup', function(event) {
let html = '';
if (input.value) {
for (word of WORDS) {
if (word.startsWith(input.value)) {
html += `${word}`;
}
}
}
document.querySelector('ul').innerHTML = html;
});
这是自动完成的 JavaScript 实现。这来自一个名为 large.js 的文件（此处未显示），该文件是单词列表。
- JavaScript 的功能很多，可以在 JavaScript 文档 中找到。
总结
在本课程中，您学习了如何创建自己的 HTML 文件、设置它们的样式、利用第三方框架以及利用 JavaScript。具体来说，我们讨论了……
TCP/IP
DNS
HTML
正则表达式
CSS
框架
JavaScript
下次见！