在我的书里，学习编程，我教授正确的编程方法所需的概念、原则和工具。我不打算在这里这样做。这篇文章将讲授JavaScript的原型化-你学到的一些东西很难看。但没关系因为你只是在做原型。如果你想了解更多，并了解为什么这些坏东西对实际应用是不好的，请看我的书。

阅读完这篇文章之后，您将学到足够多的JavaScript来制作一个原型注册表单，检查惟一的用户名，并有一个密码强度指示符。我们将使用一个名为代码笔来处理一堆棘手的事情。困难的东西是有趣和重要的学习，但同样，这不是本文的目的。

先决条件

您应该能够编写一些HTML和CSS。我们在这里做原型，所以你不需要成为大师。本文的主题是了解足够多的JavaScript来进行原型。我将给出示例所需的HTML和CSS代码，但我不打算解释它的作用(我可能会添加一些注释…)。我是个温柔的人)。

第0步：制定计划

我们想要原型2功能(也许一个额外的功能)在我们的注册表格。

1. 如果用户输入已被接受的用户名，则显示一条消息。

2. 显示用户密码有多强

3. (奖励)允许用户查看他们使用复选框作为切换输入的密码

福州网络公司对于前两个特性，每次用户在文本框中输入内容时，我们都需要运行一些JavaScript。为了获得额外的特性，每次用户单击复选框时，我们都需要运行一些JavaScript。现在你知道你需要做什么了，让我们想办法去做吧！

步骤1：设置工作区

您的原型工作空间将是一个代码笔。如果需要，可以从空白的CodePen开始，也可以使用我用HTML和CSS代码编写的代码。如果你选择使用我的代码笔，您将希望在开始工作之前“分叉”(见下文)。

步骤2：使用jQuery进行原型设计

如果您阅读了这个博客，您可能听说过jQuery，这是一种JavaScript工具(AKA库)，它恰好可以很好地用于原型开发。我们将使用jQuery来帮助我们更快地制作我们的原型。第一步是向CodePen添加jQuery。首先，点击“JS”旁边的齿轮图标(见下文)。

然后，在出现的模式中，从“快速添加”下拉列表中选择“jQuery”，然后单击“Save&Close”。注意：不要选择“jQueryUI”--我们不需要这样做。

注意：我们也在使用自举风格。引导是一个CSS库，是一个很好的原型。

步骤3：使用jQuery选择器

在我们的计划中，我们决定每次用户在用户名文本框中输入内容时都需要运行一些JavaScript。为了实现这一点，我们需要在JavaScript中获得对文本框的引用。

jQuery使使用“选择器”很容易。选择器是从网页中“选择”HTML的一种方式。虽然选择器可能变得非常复杂，但对于原型，它们几乎总是简单的。有两件事你应该知道：

1. 

#

2. 是为了

id

3. 属性

4. 

.

5. 是为了

class

6. 属性

用户名文本框的HTML如下所示：

<code><input type="text" id="username">
</code>

注意id属性的值为“username”。要选择带有jQuery的“用户名”文本框，我们将使用以下代码：

<code>$('#username');
</code>

现在，在我们继续下一步之前，看看如何获得对密码文本框和显示密码复选框的引用。在CodePen的“JS”部分编写代码。

此时，我们有一个对TextBox的引用，但是我们还没有对它做任何事情，所以您的表单不应该有任何不同的行为(目前为止)。

步骤4：设置事件侦听器

既然我们有了对文本框的引用，那么就设置我们的事件侦听器。“事件”是发生在我们的网页上的事情，比如“点击”、“按键”或“悬停”，而“侦听器”是每次这些事件发生时运行的JavaScript代码。jQuery事件侦听器如下所示：

<code>$('#username').on('keyup', function() {
  // This is where we will check for duplicate usernames
});
</code>

那里发生了很多事情，但你不必担心其中的大部分。你应该认出你的#username选择器，后面跟着.on(这是jQuery创建事件侦听器的方式)。在.on的括号--您可以看到事件名('keyup')和function。该函数只是一个容器，用于在事件发生时运行代码。

密码事件侦听器应该如下所示：

<code>$('#password').on('keyup', function() {
  // This is where we will check the password strength
});
</code>

显示密码事件侦听器应该如下所示：

<code>$('#show-password').on('change', function() {
  // This is where we will show and hide the password
});
</code>

步骤5：处理事件

事件侦听器已经设置，但他们仍然什么也不做。让我们改变一下。

用户名事件处理程序

对于“用户名”文本框，如果用户名不是唯一的，我们希望显示一条消息。这只是一个原型，所以我们可以选择一些用户名(例如“POTUS”)，并显示消息，如果用户键入的正是这个用户名。

<code>$('#username').on('keyup', function() {

  if ($(this).val() === 'potus') {
    $('.username-group').addClass('has-error');
  } else {
    $('.username-group').removeClass('has-error');
  }

});
</code>

这看起来有点疯狂，但是和我呆在一起，我们就能搞清楚了。我们想要侦听的事件是“keyup”，每次用户允许键…时都会发生。上去吧。在每个键上，我们想知道if文本框valUE等于(===) 'potus'。在jQuery事件侦听器中，this事件发生的HTML元素。所以,$(this).val()当前在文本框中的文本。如果文本等于'potus'，然后选择具有类的元素。username-group我们再给它上一堂课：has-error。引导将使标签文本和文本边框变为红色，我提供的CSS将显示错误消息。

如果文本框中的值不是'potus'，我们将移除has-error类，这样消息就消失了，文本的颜色和边框又变黑了。如果删除$('.username-group').removeClass('has-error');，然后在用户名文本框中键入“potus2016”。

密码强度事件处理程序

对于我们的密码强度原型，我们会说密码4个或更少的字符是弱的，5到9个字符是强的，10个或更多的字符是非常强的。密码强度事件处理程序的代码实际上非常类似于username事件处理程序。

<code>$('#password').on('keyup', function() {

  // Remove all password strength classes
  $('.password-group').removeClass('has-success has-warning has-error');

  if ($(this).val().length === 0) {
    return;
  }

  else if ($(this).val().length < 4) {
    $('.password-group').addClass('has-error');
  }

  else if ($(this).val().length < 10) {
    $('.password-group').addClass('has-warning');
  }

  else {
    $('.password-group').addClass('has-success');
  }

});
</code>

首先，我们删除3个类：has-success, has-warning，和has-error。这样做的原因基本上与我们删除has-error以上班级。

我们已经知道$(this).val()文本框中的值。这个.length我们已经被加到了最后告诉我们在文本框中有多少个字符。现在，我们使用一系列的if和else ifS.if长度是0，然后return，换句话说，停止运行该函数。长度密码0不是密码，因此没有任何力量。else if密码的长度小于4(记住<从数学课开始？)，加上has-error类的.password-group元素。else if密码长度小于10，添加has-warning班级。最后一次else只有在密码长度为10或更长时才会发生，因此请添加has-success班级。这些类将标签文本和文本框边框从红色更改为黄色到绿色。

显示密码

这件事由你自己决定，但我会给你一些提示。

· 而不是使用

'keyup'

· 事件，则应使用

'change'

· 事件

· 

if (this.checked) {

· 将告诉您是否选中了复选框。

· 若要显示密码文本，可以更改

#password

· 氏

type

· 属性

'password'

· 到

'text'

· 。你可以用

$('#password').attr('type', 'text');

· 

· 别忘了换回

'password'

· 如果未选中复选框

如果您完全卡住了，您可以查看原型的完整版本这个代码笔。祝好运!

摘要

祝贺你!你创造了一个很酷的原型。显然，您可以学到更多，但是(1)在JavaScript中引用HTML元素，(2)设置事件侦听器，(3)通过添加/删除类和更改属性来处理事件，福州网络公司这些原则将使您在Web的原型化方面取得很大进展。干得好！