HTML Forms and Regular Expressions

Week 3: HTML Forms and Frames; JavaScript Strings; Build Your First Interactive Website of JavaScript.isSexy’s How to Learn JavaScript Properly course has been focused mostly on learning material from the book. Beginning JavaScript, is a very good book for learning this material. I have found the explanations of concepts to be thorough, yet easy to understand, and there are loads of examples throughout the book to help illustrate the concepts discussed. I would say that Beginning JavaScript is the best resource for this particular track.

HTML Forms

HTML forms are great. They allow users to input information into a text box, select options from a list, check some boxes, or even see their progress through a specified task. Forms themselves, however, are rather boring. They don’t really do anything unless you have a destination for the information input (a destination server). Despite this, they are an essential part of the web.

Much of Chapter 11: HTML Forms: Interacting with the User (Chapter 7 in the 4th Edition) felt more like a review of basic HTML concepts than it did JavaScript instruction. There was a lot of instruction around how to create a form using <form />, <input />, and other such tags than actual interaction with the forms, or so it seemed. But of course, there actually was a lot around interaction.

This chapter talked about different event listeners available to form objects including focus, blur, change, and input, and showed some examples of using for loops to loop over radio buttons to determine what was selected and output that information to the screen. One thing I really enjoyed about this chapter was seeing how different using event listeners and selecting DOM elements is from jQuery (because of the more roundabout nature of the JS.isSexy course, I’ve not done any reading about interacting with the DOM using vanilla JS), which is helping me appreciate why jQuery is so widely used today. Now that I have my head wrapped around HTML forms, and jQuery, I’m ready to tackle a small real-world application of using this knowledge in WordPress.

Regular Expressions and String Manipulation

String manipulation is tricky, and it’s tricky for many reasons.

One thing I’m still trying to wrap my head around after finishing Chapter 6: String Manipulation is figuring out when I’d want to use regular expressions for string manipulation. I guess I can see a case if you’re building an app or program that allows a user to do some sort of search, and I could also see using it to do something like check for duplicate words, or replace one string with another. I guess it’s not that I can’t see a use for it at all, but more that I can’t see a direct use for this my current realm of development (much like trigonometry in high school, which, shockingly I haven’t used since).

Not only am I having difficulty wrapping my head around when I might use regular expressions and string manipulation in WordPress development, but regular expressions are hard! One of the examples from the book to validate a post code looked like this:

function isValidPostalCode( postalCode ) {
    var pcodeRegExp = /^(\d{5}(-\d{4})?|([a-z][a-z]?\d\d?|[a-z{2}\d[a-z])?\d[a-z][a-z])$/i;

    return pcodeRegExp.test( postalCode);
}

Gnarly, right? But the book actually offered some good reassurance: regular expressions are tricky, and they take time and patience to get right, and are best approached by breaking things down. So let’s quickly break down the example above:

All regular expression literals start and end with forward slashes: /.

^(\d{5}(-\d{4})?

The first part of this expression ^(\d{5} is looking for something beginning with a five-digit number (\d indicates a digit, {n} indicates the number of something), while the second part is looking for an optional dash (-) and four more digits. The set of parenthesis wrapping (-\d{4})? indicates it’s a group–in this case, of a dash and four numbers), and the question mark at the end indicates that this group is optional. So basically, we’re looking for xxxxx or xxxxx-xxxx where the x represents a digit between 0 and 9. The next part is checking whether we have a UK post code:

([a-z][a-z]?\d\d?|[a-z{2}\d[a-z])?\d[a-z][a-z])

First, it’s good to know that UK post codes are formatted something like this: TW10 6UQ. The post code could have one or two letters at the beginning, followed by one or two numbers, maybe another letter, a space, then a number and two letters. So let’s look at this:

[a-z][a-z]?\d\d?

The [a-z] looks for a letter between a and z, while the second one [a-z]? looks for another optional letter (remember ? indicates the match is optional in JS). Then the \d is looking for a digit between 0 and 9, while the following \d? is checking if there is another optional digit. So in the case of my old post code, it’d be checking if TW10 is valid.

You’ll see that there is a pipe ( ) following that expression, which is like a RegEx or operator. In this case we’re looking for [a-z][a-z]?\d\d? or [a-z{2}\d[a-z])?. Let’s look at this more closely:

[a-z{2}\d[a-z])?

Here, we’re looking for two letters from a to z ([a-z{2}) followed by a number (\d), then another optional letter ([a-z])?). This is to check whether the post code is something like SW1A.

\d[a-z][a-z])

For the final part of the expressions, we’re looking for a digit, and then two letters between a and z.

Honestly, I think finding weird convoluted examples like this is one of the best ways to figure regular expressions out. Even if you’re not necessarily writing your own RegEx, trying to figure out what someone else’s RegEx is doing feels like a good workout.

An Interactive Website

I rounded out this week’s JavaScript learning with Codecademy’s Make an Interactive Website course. I found this particular exercise to be more of a review of the concepts that I have learned up to this point in the JS.isSexy course, rather than learning anything new.

The basic premise was to review a concept, and then recreate some interactivity of an existing site’s functionality, such as Flipboard’s home page, and Twitter’s status updates. The basic idea was right, but I thought some of the instruction was rather misleading. For example, in the Twitter update example they wanted to disable the post button if the remaining character count was less than 0 or equal to 140 (i.e. nothing has been typed into the status box yet). Their correct answer looked something like this:

if(charactersLeft < 0) {
 $('.btn').addClass('disabled'); 
 }
 else if(charactersLeft == 140) {
 $('.btn').addClass('disabled');
 }
 else {
 $('.btn').removeClass('disabled');
 }

when in reality, they I think they should be reiterating good, optimized practices and used this:

if(charactersLeft < 0 || charactersLeft == 140) {
 $('.btn').addClass('disabled'); 
 }
 else {
 $('.btn').removeClass('disabled');
 }

At the very least, they should have mentioned that was an alternate way to arrive at the same solution.

Week 3 Wrap up

I am really feeling very comfortable with jQuery at this point. I’ve been testing it out on some side projects that are semi-WordPress related, as well as a few other unrelated projects.

Unfortunately, the 5th Edition of Beginning JavaScript did not include a chapter on Windows and Frames, so that is something I missed out learning this week. I also didn’t complete any work on Treehouse this week because I didn’t see any sections in the Full Stack JavaScript track that corresponded well to the book’s materials.