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.

jQuery, JavaScript Objects and the BOM

The second week of learning JavaScript properly went a bit slower than intended. Actually, much slower…I think I’ve spend three weeks reviewing the material from the book, doing the Codecademy exercises, working through the relevant Treehouse courses, and playing around with things on my own. Progress has been slow, but I think it’s been really important for me to try to apply what I’ve been learning as I’m learning it (I’ll share a few examples later).

I really enjoyed Week 2: Learn JavaScript Objects, the Browser Object Model (BOM), and Events; Learn jQuery. There was a lot of repetition around objects, especially in the Codecademy exercises, but overall, the “week” was great because I felt like I’m getting into the part of JavaScript that I will find most useful–manipulating the Document Object Model, and making truly interactive websites.

Javascript objects

In week two, I learned that JavaScript is primarily an object-based language. Initially, this struck fear in me…what if this is a repeat of trying to learn Java in university (pure trauma)? But it turns out my fears were completely unfounded.

The book, Codecademy, and Treehouse all went into great detail about objects–how to create them, how to access their properties using dot or array notation, and how to create methods for the objects. I was starting to see how my learning in the first week was coming together, and how I was building onto it by learning about objects.

I learned that there are several ways to create an object:

  • Using the object literal
    var thing = {};
  • Using the object object
    var thing = new Object();
  • Creating a reference type
    function Thing( param ) {};
    var thing = new Thing();

At this point, it’s probably been two weeks since I went through the lessons on objects, and while I don’t want to say that I forgot what I learned, I am feeling a bit fuzzy. Hopefully getting back into learning will refresh my memory, and I can start getting an idea of how objects can be utilized in more real-world circumstances.

The Browser Object Model (BOM) and Events

There was a very short lesson in the book on the Browser Object Model (BOM), which is different from the Document Object Model (DOM), despite sounding similar. The BOM refers mostly to very general things that can happen within the context of using a web browser. This includes things like tracking your location to provide you with a better user experience, or serving up a different pages depending upon your browser version and what’s supported. It was actually pretty interesting stuff, even if I’m not entirely sure how I’ll use it yet.

jQuery

Learning jQuery was the real highlight of Week 2. I’ve been dabbling in jQuery every once in awhile since I’ve been working with WordPress. Prior to learning jQuery, I would look at jQuery code, vaguely understand it, but felt so lost when it came to trying to come up with jQuery code on my own because I didn’t completely understand what was going on. After Week 2 of Learning JS Properly, however, I feel much more confident when it comes to writing jQuery.

The book did a nice job of introducing jQuery as a JS library, which makes working across browsers easier and makes manipulating the Document Object Model (DOM) easier. The only problem is that jQuery is a rather late chapter in the book, and assumes you’re reading the book in order. So the examples discuss working with AJAX (part of JavaScriptIs.sexy’s Week 5 learning), and the DOM (also Week 5) make a little less sense, and the examples in the book are not at all helpful. Still, it was useful for introducing jQuery, and I will probably go back to it once I’ve completed Week 5.

Codecademy, on the other hand, was actually pretty damn good for jQuery. I found it moved a lot faster for jQuery than it did JavaScript, and because they focused mostly on jQuery as a means of manipulating the DOM, I felt like I was finally doing something fun and useful with my new skills. In fact, after finishing the Codecademy jQuery course, I created a little pen about my cats (naturally):

Treehouse’s jQuery course was also very good. It moved a bit slowly at times, but one of the most important things I got from that course was how to think about what I was hoping to accomplish with jQuery, and using that starting point to search the jQuery documentation for the functions/methods that would get me the end result. For me, this was game changing, and addressed that gap of not knowing where to start. The second part of Treehouse’s jQuery course went through jQuery widgets including Animsition, Sticky.js, and Slick.js, which I thought was fun and helpful since I’ve been working with various jQuery widgets for awhile.

For those using Beginning JavaScript, 5th Edition

If you’re following along and also trying to learn JavaScript properly, and you happen to also be using Beginning JavaScript, 5th Edition, you’ll notice that there are a few differences in chapter numbers between the forth and fifth editions. Here are the equivalent chapters between the forth and fifth editions:

4th Edition 5th Edition
Chapter 5, JavaScript — An Object-Based Language [icon name=”arrow-right” class=”” unprefixed_class=””] Chapter 5, JavaScript — An Object-Based Language
Chapter 6, Programming the Browser [icon name=”arrow-right” class=”” unprefixed_class=””] Chapter 8, Programming the Browser
Chapter 15, JavaScript Frameworks [icon name=”arrow-right” class=”” unprefixed_class=””] Chapter 16, jQuery

Learning JavaScript

One of my main goals for 2016 is to learn JavaScript. Not only because it’s being touted as the future of WordPress, but also because I felt like JavaScript (JS) was one of those very critical web languages that was missed when I took web design and development courses during my Graphic and Interactive Design program. I’ve also come across some really instances where my lack of JS knowledge has been a bit of a roadblock, not to mention the downright awesome shit that can be done with JSt. Have you seen ustwo’s REST API-driven site? It’s fucking amazing and totally driven by JavaScript.

The Plan

If you’re going to learn something, and learn it well, you need a plan, right? After a bit of digging, and I found a really great resource called JavaScript.isSexy (oh yeah it is!). They have a [free!] program they call, How to Learn JavaScript Properly, and it’s totally legit. Not only is there a plan for total n00bs like myself, but they have a guide for experienced developers too (which my husband is currently working through–the family that learns JS together, stays together, amiright?!). So no need to start with the very basics of programming if you already know a thing or two!

The resources they suggest for the beginner track are rather simple, and the only expense is the book:

  1. A book: Beginning JavaScript
  2. Four articles on JavaScriptIsSexy.com
  3. Four Codecademy tracks
  4. Four Code School tracks

Week 1 Review

I started working through Week 1: Making a Website with HTML and CSS; Learn JavaScript Data Types, Functions, Control Flow, and Loops last week. As someone who’s been working with WordPress daily for the past year or so, writing loads of functions, loops, etc., I found this to be a relatively easy, yet interesting week.

The thing is, almost all of my PHP experience has been trial by fire. As in, I have an idea of what I want to do, and roughly how I want to do it, and then proceed to do a reasonable amount of Google searching to find the answer, or better yet, have my code reviewed by a fellow WordPress developer who could help me work through problems and optimize my code. But this week’s reading in on JavaScript has helped me better understand some of the things I’ve been doing. Like for loops, for example. To get multiple images in my portfolio posts, I use a for loop to cycle through the images and generate the markup like this:

https://gist.github.com/carrieforde/8ced7b37b5c62f4bac1a

I had a rough idea what that for loop was doing before, but now I definitely understand what it’s doing, and that’s pretty awesome. Not only that, but I’ve got conditional logic down (if / else if / else) as well as other types of loops (while / do…while).

Every time I learn something new, I try to challenge myself to come up with an original exercise to practice my new JS skills. Here’s my favorite from this week (note: if you try to run this, it will create some pop-ups for user input):

Improving this Course

I know it’s early days, and I’m really stoked about this course and the track I’m on, but I definitely think there are a few things to that could use improvement.

  1. The website refers to Edition 4 of Beginning JavaScript, and I decided to purchase Edition 5. Not a big deal, but there are definitely differences in chapters in the latest edition, and it might be helpful if the Beginning track was updated to reflect the latest edition of the book.
  2. Codecademy is really boring. They basically spoon-feed you information, and it becomes tedious really quickly. I’ve been finding that the best part of Codecademy are end of track challenges.
  3. Consider swapping Codecademy for Treehouse. Yes, I know one advantage to this plan is that the only expense is the book, but the Treehouse Full-Stack JavaScript track is legit, and a really nice supplement to this course. So for now, I’ll be using the book, Codecademy, and Treehouse as resources.

On to Week 2…

I’m really stoked about Week 2: Learn JavaScript Objects, the Browser Object Model (BOM), and Events; Learn jQuery. I’ve dabbled a very small amount in jQuery over the past few months, and what I’ve tried and learned so far has been awesome (check out the category and archive toggles on Clayton Gerard’s site for some nifty jQuery slideToggle action), and I’m looking really forward to learning some new tricks to improve the interactivity of sites I create going forward.

Is anyone else out there trying to learn JavaScript? What sources are you finding useful?