（前端）Web开发之旅的开始可能会让你感到困惑。标记（markup）一开始真的很奇怪。CSS有时可以让你的页面变得美丽，有时你却不知道为什么一个属性会把你的页面搞得一团糟。而且如果这是你第一次使用编程语言，JavaScript可能是这三个中最令人望而生畏的。
但是，当你终于掌握了HTML、CSS和JavaScript，你会怎么做呢？练习。想一些你想用你新获得的知识做的事情，无论它是否“有用”，无论它有多复杂。只要做一些有助于你更好地掌握HTML、CSS和JavaScript的东西。而且，请永远不要忘记构建一些傻瓜东西的价值 :)
今天，正如你从标题中已经发现的那样，我将带领你使用HTML、CSS和JavaScript创建一个登录页面。但是不要担心。同样地，就像标题所说的那样，这是你的第一个登录页面，这意味着代码尽可能简单，并且每一行代码都会有解释。
在跳转到代码之前，让我先向你展示我们将要创建的内容：
登录页面
成功登录
使用无效凭据登录
正如你所看到的，页面包含一个标题、一个登录表单（用于输入用户名和密码）以及一个“提交”输入数据的登录按钮。请注意，我在“提交”一词周围使用了引号，因为实际上没有真正的提交。用户名和密码都不会被发送到服务器进行验证。相反，当用户单击登录按钮时，我们使用JavaScript验证用户名为“user”，密码为“web_dev”。如果它们匹配，则会显示一个警告对话框并重新加载页面（为了简单起见）；否则，我们会显示一个错误消息。
现在，你对最终结果更加熟悉了，让我们继续看代码。
HTML
我们将从HTML开始，因为它负责显示页面中的信息。换句话说，我们首先将编写和组织页面中包含的所有信息，而不必担心样式（CSS）或交互性（JavaScript）。分析完整个HTML文件，直到你准备好为止，然后继续阅读下面的解释。
HTML文件
像往常一样，在HTML文件中，我们有两个部分：<head>和<body>。前者包括关于我们网页的元信息，如所使用的字符编码、页面的标题（在浏览器标签中看到的名称）以及该HTML文件将使用的CSS和JavaScript文件的引用。请注意，在<script>标签中有一个defer属性，以便JavaScript脚本仅在HTML完全加载后执行。
在<body>中，我们包含所有将在页面中可见的信息。我们使用<main>元素来包装页面的所有内容，而不是简单的<div>。虽然<main>和其他语义元素在功能上与<div>相同，即它们包装其他元素，但前者为浏览器提供有关网页内容的更多信息，并简化像屏幕阅读器这样的工具的工作，这些工具对于使Web更具可访问性至关重要。
在<main>元素中，也就是白色矩形中，我们拥有屏幕上看到的所有信息：一个作为<h1>元素的“登录”标题，一个仅设置错误消息所需空间的<div>，以及最后是登录表单，<form>。该表单由三个<input>元素组成：一个用于用户名的文本字段，一个用于密码的密码字段以及相应的表单提交按钮。使用password作为第二个字段的类型很重要，这样当用户输入密码时，它会显示点而不是实际密码。此外，请注意placeholder属性。你给该属性的值将显示为表单字段的占位符文本。
顺便说一句，如果你想知道为什么<input>元素没有关闭，那是因为它们不需要关闭标签（</input>或类似的东西）。这就是我们所说的自闭合标签。
当然，我们要充分利用ID和类来方便我们使用CSS。ID允许我们明确地选择HTML元素，即每个ID表示我们文件中的单个元素。另一方面，当我们有一组CSS样式要重复应用于多个元素时，我们使用类。接下来，我们将看到这些ID和类的实际用途。
CSS
CSS文件
现在我们有了CSS，换句话说，我们有了页面的样式。要修改我们HTML文件中的每个元素，我们可以使用ID、类或标签名称本身进行选择，尽管不建议使用最后一种选项。你看，更具体的CSS选择器的样式将覆盖不太具体的选择器的样式。例如，ID选择器的样式会覆盖类选择器的样式，类选择器的样式会覆盖标签名称选择器的样式。换句话说，始终使你的CSS选择器尽可能具体，以影响你希望受影响的元素。
而且不要忘记，虽然标签名称选择器只需要标签的名称，但ID选择器以井号（#）开头，而类选择器以点号（.）开头。如果一个元素具有ID“test-id”，则可以使用#test-id通过其ID在CSS中选择它。如果一个元素有一个类“test-class”，那么它可以被识别为.test-class。尽管如此，你仍然可以使用标签名选择器。例如，请查看代码片段的开头。<html>和<body>标签名称被用作选择器。尽管如此，请不要忘记HTML文件中只有一个这两个元素... 在这种情况下，我们使用这前两个规则集（选择器加上括号内的所有内容）来进行页面范围的修改。将<html>和<body>的高度设置为100%可以使页面使用整个屏幕，将<body>的边距设置为0可以消除因此元素的默认样式而出现的任何垂直滚动。
在<body>中，我们使其使用网格显示，以使其内容在垂直和水平方向上居中对齐（分别使用align-items和justify-items）。换句话说，它接受<body>的内容，这些内容只是<main>元素，并将<main>及其内容定位于屏幕的正中心。这被称为CSS网格布局，如果你不熟悉它，可以在此处阅读我撰写的有关它的快速介绍文章（链接），以便你学习更多。
我们将仅使用最简单的网格布局用例，即使元素使用网格显示，然后相应地定位其内容，但我建议你在有机会时了解网格布局。它是一个简单而强大的工具，可定位你页面中的元素。
对于<main>，它以其id main-holder（上述代码片段的第15行）而闻名，我们调整其大小并调整其样式，使其从黑色背景中脱颖而出。我们还将<main>转换为网格，以便于定位其内容，这些内容只是三个元素：<h1>，<div>和<form>。因此，默认情况下，CSS将其作为三行网格进行处理，每行一个元素。换句话说，将白色矩形视为三行网格。
网格的第一行，标题，保持不变。它唯一的修改是居中，因为main-holder的内容居中。
另一方面，第二行确实进行了一些修改（第26到49行），因为我们需要修改包含错误消息的行，然后修改错误消息本身。我们再次使用网格布局将消息居中显示在第二行内，并使<div>占据其行中的所有可用空间（请记住，按默认情况下，<div>与其包含的元素相同大小，因此要使其更大，需要指定其高度和/或宽度）。
对于错误消息，我们只是对其大小和样式进行微调。请注意，最初其opacity设置为0，即不可见。当用户输入无效凭据时，此值将使用JavaScript更改。
我们还更改了错误消息中一半文本的显示。如果回顾HTML中的消息元素，我们有：
<p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</p>
请注意，包装一半文本的<span>元素。<span>在你想要仅对元素的部分文本进行样式设置时非常有用。因为我们希望将错误消息拆分为两行文本，“无效的用户名”和“和/或密码”，所以我们通过将<span>的显示设置为block（#error-msg-second-line {display: block;}）使第二半部分显示为新的文本行。再次尝试使CSS选择器尽可能具体。
现在，我们只需要浏览<form>的规则集，即<main>网格的第三行，以完成CSS（从第71行到末尾）。我们首先使用网格布局最后一次将<form>转换为网格。但是，我们还在其规则集中使用了另一个网格属性#login-form。由于<form>是<main>元素网格容器的网格项，因此我们可以告诉它如何将该网格项定位在其自己的行内。因此，我们告诉它在其行内垂直对齐到顶部，使用align-self: flex-start。不多不少。
然后我们对表单字段进行样式设置。由于我们希望两个字段（用户名和密码）看起来相同，因此我们创建了一个选择给两个元素的类，即login-form-field。我们不是通过仅使用其ID选择每个单独的元素以重复CSS，而是将CSS一次编写在单个类中，然后将该类分配给两个元素。
对于样式修改，这些是一些轻微的更改，以使这两个<input>元素看起来更好。为了使占位符文本样式与<input>的样式保持一致，我们还使用<a class="af ma" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder" rel="noopener ugc nofollow" target="_blank">::placeholder</a>伪元素更改了这些占位符的颜色。但是，我们不是将其设置为通用的并编写::placeholder {...}，而是指定我们仅想要更改具有.login-form-field类的元素的占位符，如下所示：.login-form-field::placeholder {...}。再次尝试使你的CSS选择器尽可能具体。
最后，我们更改登录按钮的样式，以使其看起来更好。除了cursor: pointer会在悬停在按钮上时将光标更改为指针外，没有什么新的内容。
好的，我们已经完成了HTML，刚刚完成了CSS，现在我们只需要通过JavaScript进入最后的阶段。
JavaScript
JavaScript文件
首先，我们使用JavaScript获取我们需要使用的所有元素：登录表单，登录按钮和登录错误消息。我们通过调用document.getElementById方法，传递要查找的元素的ID来实现。此外，由于这三个变量的值不会更改，即这些变量始终引用完全相同的元素，因此我们将所有三个变量声明为const。接下来，我们为登录按钮创建一个事件监听器，类型为click。换句话说，每次单击登录按钮时，都会执行在"click"之后定义的函数。该函数接收一个参数，我们称其为e，它是一个鼠标事件，表示单击按钮（将其命名为e只是一种约定俗成的方式，你可以自己取名）。
在函数内部，我们首先阻止单击登录按钮的默认行为（即提交表单数据）。在本演示中，我们不想提交数据，只想使用JavaScript进行验证，因此使用e.preventDefault()来防止提交。
然后，我们分别获取用户在username和password表单字段中输入的值。我们可以利用JavaScript语法来选择loginForm表单的字段，即formElement.nameOfField，其中formElement是你的HTML<form>，nameOfField是你正在查找的<input>元素的name属性的值。要获取所选字段的值，只需添加.value。例如，如果用户在username字段中输入了"user01"，那么我们可以通过loginForm.username.value获取该值。很不错，对吧？
现在，最后的润色。每当用户单击登录按钮时，我们都会检索在表单字段中键入的任何值。但是我们需要对这些凭据做些什么。然后，我们将编写一个if/else块，如果登录凭据有效，则执行一块代码，如果无效，则执行另一块代码。我们还需要一个条件，对吧？让我们将该条件设置为凭据的实际验证。为了简单起见，该验证将检查键入的用户名是否为"user"，密码是否为"web_dev"。在JavaScript语法中，这相当于
username === "user" && password === "web_dev"
其中&&是AND运算符，指定我们需要用户名等于"user"和密码等于"web_dev"。
如果凭据确实有效，那么我们将显示一个警报对话框，其中包含用户已成功登录的消息，然后重新加载页面（同样，只是为了简单起见）。但是，如果用户名或密码无效，则更改登录错误消息（loginErrorMsg）的opacity属性，使其可见，并让用户知道他们的凭据无效。我们可以通过访问loginErrorMsg的styles（loginErroMsg.styles）然后访问opacity属性（loginErrorMsg.styles.opacity）来在JavaScript中进行CSS更改。将其设置为1意味着错误消息将完全不透明。
这就是全部。我们已经到达了本说明的结尾，现在你拥有了一个使用HTML、CSS和JavaScript创建的完全功能的登录页面。我认为这是学习前端Web开发早期阶段的一个好主意，因为它可以通过添加动画、更改页面设计或在学习后端语言（如Node.js、Java、PHP等）时进行服务器端验证而轻松改进。
评论(0)