Web Design for JavaScript: Learning the Prototyping Basics

In my book, Learning to Program, I teach the concepts, principles, and tools needed to program the right way. I’m not going to try to do that here. This article will teach about prototyping in JavaScript – some of the things you learn will be just plain ugly. But that’s okay because you’re just prototyping. If you want to learn more and learn why those bad things are bad for real applications, check out my book.

By the time you’re done reading this article, you will have learned just enough JavaScript to make a prototype registration form that checks for unique usernames and has a password strength indicator. We’ll be using an online editor called CodePen to take care of a bunch of the hard stuff. The hard stuff is interesting and important to learn, but again, that is not the purpose of this article.

Prerequisites

You should be able to write some HTML and CSS. We’re prototyping here, so you don’t need to be a master. This article is about knowing just enough JavaScript to prototype. I will give you the HTML and CSS code needed for the example, but I’m not going to explain what it does (I might add some comments… I’m a softy).

Step 1: Make a plan

We want to prototype 2 features (and maybe one bonus feature) in our registration form.

Show a message if the user enters a username that is already taken
Show an indication of how strong the user’s password is
(Bonus) Allow the user to see the password they typed using a checkbox as a toggle

For the first two features, we will need to run some JavaScript every time the user enters something in the text boxes. For the bonus feature, we will need to run some JavaScript every time the user clicks on the checkbox. Now that you know what you need to do, let’s figure out how to do it!

Step 2: Setup your workspace

Your prototyping workspace will be a CodePen. You can start with a blank CodePen if you want, or you can use one that I have prepared with all of the HTML and CSS code. If you choose to use my CodePen, you will want to “fork” it before you start working (see below).

Step 3: Using jQuery for Prototyping

If you read this blog, you have probably heard of jQuery, a JavaScript tool (AKA library) that happens to work really well for prototyping. We will be using jQuery to help us make our prototype faster. The first step is to add jQuery to the CodePen. First, click on the cog icon next to “JS” (see below).

Then, in the modal that appears, select “jQuery” from the “Quick-add” dropdown, and click “Save & Close”. NOTE: Don’t select “jQuery UI”—we don’t need that.

NOTE: We are also using Bootstrap for styles. Bootstrap is a CSS library that is great for prototyping.

Step 4: Using jQuery Selectors

In our plan, we decided that we needed to run some JavaScript every time the user entered something in the username text box. To make that happen, we need to get a reference to the text box in our JavaScript.

jQuery makes this easy with “selectors”. Selectors are a way to “select” HTML from the webpage. While selectors can get pretty complicated, for prototypes they can pretty much always be simple. There are two things you should know:

# is for the id attribute
. is for the class attribute

The HTML for the username text box looks like this:

<code>&lt;input type="text" class="form-control" id="username"&gt;
</code>

Note the id attribute has a value of “username”. To select the username text box with jQuery, we would use this code:

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

Now see if you can figure out how to get references to the password text box and the show password checkbox before we move on to the next step. Write your code in the “JS” section of the CodePen.

At this point, we have a reference to the textbox, but we haven’t done anything with it, so your form shouldn’t behave any differently (yet).

Step 5: Set Up Event Listeners

Now that we have references to our text boxes, set up our event listeners. An “event” is something that happens to our webpage, like a “click” or a “keyup” or a “hover”, and a “listener” is the JavaScript code that runs every time these events happen. a jQuery event listener looks like this:

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

There’s a lot going on there, but you don’t have to worry about most of it. You should recognize your #username selector, followed by .on (which is jQuery’s way of creating an event listener). Inside of the .on‘s parentheses you see an event name ('keyup') and a function. The function is just a container for code to be run when the event happens.

The password event listener should look like this:

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

And the show password event listener should look like this:

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

Step 6: Handling the Events

The event listeners are set up, but they still aren’t doing anything. Let’s change that.

Username Event Handler

For the username text box, we want to show a message if the username is not unique. This is just a prototype, so we can just pick some username (e.g. “potus”) and show the the message if the user types in exactly that username.

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

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

});
</code>

That may look a little crazy, but stay with me and we can figure it out. The event we want t listen to is “keyup”, which occurs every time the user lets the key… go up. On each key up, we want to know if the text box’s value equals (===) 'potus'. In a jQuery event listener, this is the HTML element where the event happened. So, $(this).val() is the text currently in the text box. If that text equals 'potus', then we select the element that has the class username-group and we give it another class: has-error. Bootstrap will make the label text and text borders red, and the CSS I provided will make the error message appear.

If the value in the textbox is anything other than 'potus', we will remove the has-error class, so the message goes away and the text color and borders are black again. See what happens if you delete the $('.username-group').removeClass('has-error');, then type “potus2016” in the username textbox.

Password Strength Event Handler

For our password strength prototype, we will say that passwords 4 characters or less are weak, 5 to 9 characters are strong, and 10 or more characters are very strong. The code for the password strength event handler is actually very similar to the username event handler.

<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 &lt; 4) {
    $('.password-group').addClass('has-error');
  }

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

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

});
</code>

First we remove 3 classes: has-success, has-warning, and has-error. This is done for basically the same reason we removed the has-error class above.

We already know that $(this).val() is the value in the text box. The .length we’ve got tacked on at the end tells us how many characters are in the textbox. Now we check the length of the password with a series of if and else ifs. if the length is 0, then return, or in other words, stop running the function. A password of length 0 is not a password and it therefore has no strength. else if the length of the password is less than 4 (remember < from math class?), add the has-error class to the .password-group element. else if the password length is less than 10, add the has-warning class. The last else only happens if the password length is 10 or more, so add the has-success class. These classes will change the label text and text box borders from red to yellow to green.

Show password

You’re on your own for this one, but I will give you some hints.

Instead of using the 'keyup' event, you should use the 'change' event
if (this.checked) { will tell you if the checkbox is checked or not.
To show the password text, you can change the #password‘s type attribute from 'password' to 'text'. You can do that with $('#password').attr('type', 'text');
Don’t forget to change back to 'password' if the checkbox is not checked

If you’re completely stuck, you can look at the complete version of the prototype on this CodePen. Good luck!

Summary

Congratulations! You created a pretty cool prototype. There is clearly a lot more that you could learn, but the principles of:

Referencing HTML elements in JavaScript
Setting up event listeners
Handling events by adding/removing classes and changing attributes will get your really far in prototyping for the web.

Great work!

For More on Web Development, See: