Making Stuff Happen with Javascript Using jQuery (Case)

This is a case study for use in a class like Software Development.

Please note: This case builds on a prior case called ‘Making HTML Manageable with CSS‘ and assumes familiarity with its contents.

Prototyping for Usability

Frangelico DeWitt and his team have just started developing a new suite of software for their employer HVAC in a Hurry (a heating and air conditioning service business). Their current focus is on a web application that helps field technicians find availability and pricing for replacement parts.

HTML-Prototype

Frangelico has been prototyping the front end with HTML and CSS, making pretty good progress. What he’s realized is that he wants to prototype a few interactions so they can move forward user testing their refinements. He could script this out with static HTML, but both for the sake of creating more (potentially) reusable assets and making the test infrastructure a little more robust, he’s decided to implement the interactions with Javascript.

The good news is that he has an a working on JS fiddle (Making HTML Manageable) and a set of user stories about what he wants to test (see Appendix A).

As a next step, Frangelico has decided he needs to make the prototype interactive so he can test this user story:
‘I don’t know the part number and I want to try to identify it online so I can move the job forward.’
and these test cases:
Make sure it’s possible to search by make/model of units
Make sure it’s possible to search by type

Making Stuff Happen

He’s made a start with this JS Fiddle: Making Stuff Happen with JQuery.

Looking at the sample code in the JS Fiddle above, can you toggle (show/hide) the #search-controls div with JQuery?

How about a somewhat more involved challenge?! Right now, the code allows the user to filter by manufacturer and model. How would you extend it to also filter by part type?

What else do you think is worth trying? Try it out!

Exhibit A: User Stories

These stories are the primary focal point for the team: they describe both what the team has learned about the user and what they want to do for them. As you get into the details, it’s key not to lose sight of your design intent and what you’ve decided is important to the user.

Epic User Story

‘As Ted the HVAC technician, I want to identify a part that needs replacing so I can decide my next steps.’

Storyboard

Based on their observations in the field, Frangelico’s team thought through the user experience of the epic with the following storyboard: hvac-epic-story

Child Stories

User Story

Test Cases

‘I know the part number and I want to find it on the system so I can figure out next steps on the repair.’ Make sure it’s possible to search by part number.
Make sure descriptive info. appears as the search narrows (photo?) to help avoid error.
‘I don’t know the part number and I want to try to identify it online so I can move the job forward.’ Make sure it’s possible to search by make/model of units
Make sure it’s possible to search by type
‘I don’t know the part number and I can’t determine it and I want help so I can move the job forward.’ Make sure an estimate of the turnaround time for an expert to review is available
‘I want to see the cost of the part and time to receive it so I decide on next steps and get agreement from the customer.’ Make sure it’s possible to dispatch a request by email to the customer in case they order their own parts and/or carry their own inventory of spares.
NOTE: How would the customer respond so we can help structure the next steps as we would otherwise?
Make sure it’s possible to indicate priority
Make sure cost associated with priority delivery are available
‘I want to order the part so that we can move forward with the repair.’

Exhibit B: Working with the Sample Code on JS Fiddle

Notes on Javascript:

  1. You can place Javascript directly in the Javascript pane without the <script> tags.
  2. If you’re using a library like JQuery, you need to select it in the JQuery panel (small icon with gears). You can see an example selection in the sample JS Fiddle for the case.

Exhibit C: Coding with Javascript & JQuery

Javascript is a programming language and JQuery is a set of libraries written in it/on top of it. JQuery is most widely used for facilitating dynamic interactions with HTML for user interfaces. In this exhibit, you’ll get an introduction to both (assuming you’re starting from zero programming experience) and in the Resources section below there’s more detailed material.

Javascript- What Is

While machines are getting smarter and smarter, you’ll probably be surprised at how literal and specific you have to be when programming. A single semicolon in the wrong place can break your whole program. That may sound daunting, but all it really means is that you have to be very step-wise and test-driven when you program.

What does Javascript look like? For starters, the snippet below has two lines of Javascript (JS) code. If you click on the Result tab, you’ll see two alerts pop up into your browser window (unless your pop-up blocker blocks them):

Notice that each full line/statement ends with a semicolon.

Logging to the Console

Since all of the work we’re doing is in the browser, that’s a good place to look at what your code is doing so you can expand and debug it in a test-driven way. Unless you have a strong preference and prior experience doing otherwise, I recommend using Google’s Chrome browser, and the rest of this material assumes that.

The ‘console’ is basically a place you can see statements that Javascript sends there, which, as I mentioned, is a very common thing for JS coders to do. Recently, JSFiddle made a change where they implement the console inside the Fiddle itself. I prefer the native Chrome Console, and that’s what the balance of this case (and related cases) shows. However, this is not currently the default in JSFiddle. Once you open the sample code in JSFiddle, you’ll need to:
1: Click ‘Settings’ in the upper right
2: Disable the option ‘Console in the editor’

js-fiddle-ugh.001From there, to see the console  in Chrome just right click within the browser and click ‘Inspect’. Now in the top of menu of the frame that appears, click ‘Console’. You’re there. For more, see this tutorial: The Console in Chrome.

The JS Fiddle below has the two statements you saw before, but now they’re sent to the console:

If you have the console open and you click Result, you’ll see the results of those two statements. Pro tip: You’ll probably be seeing other output from content on this page and maybe your own Chrome plug-in’s. If you use the filter control in type ‘index’, you’ll see just the JS Fiddle stuff.

If you want to know why something is or is not happening, the console is your friend. You’ll see extensive use of it in the JS Fiddle for the case itself (Making Stuff Happen with Javascript).

Note: You will not see the console in JS Fiddle itself. The ‘Result’ screen shows what a user will see.

The If … Else Statement

Another thing you’ll notice in the sample code is if … else statements. Here’s a JS Fiddle with an example:

For more on that, check out this quick note: The If Else Statement in Javascript.

Comments and Commenting Out Code

You’ll see comments and you’ll probably want to use them to make notes to yourself and temporarily disable code as you’re trying things. For more on that, see this quick note: Comments in Javsascript.

Variables

Variables are a place you can store a value to use it later. If that sounds abstract, trust me, you’ll be doing it all the time once you get coding. In this snippet, we declare a variable ‘x’, change its value, and log that value to the console.

Quick note on variables vs. comparisons: In JS, ‘==’ is a comparison operator, meaning it asks ‘are these two things equal?’. The operators ‘!=’ does the opposite: checks if they’re not equal.

JQuery

JQuery is a widely supported library for helping developers interact with HTML page elements, and you’ll see it used in the case. Here’s a quick JS Fiddle with an example of what it does:

This diagram unpacks the function’s plumbing:

jQuery-example-v2

If you’re itching to dive in to the case, here’s a very quick reference: JQuery Introduction. If you want a somewhat more structured, gradual introduction, check out the first resource below- the Codecademy tutorial on JQuery. I think you can probably get going after just the first lesson (JQuery Setup). I offer this with the usual caveat: be careful with your time and just cover enough to get comfortable engaging with the case. Also, there are a couple of specific sections I would skim/skip and I’ve noted those in the reference.

Final note: You’ll notice somewhat different JQuery conventions in the W3C tutorial vs. Codecademy: this kind of thing is unfortunate but not uncommon. Here is an explanation: JS Fiddle- JQuery Conventions.

Resources

  1. Introduction to JQuery on Codecademy
    I would start with just the first lesson, JQuery Setup, and see if you’re comfortable engaging with the case after that. There are a couple of items in that lesson that deal with how you add Javascript to a page: don’t worry about those (see Exhibit B for how to do it in JS Fiddle). Proceed to the other lessons if you feel you need to and I think you’ll be fine with just the free items.
  2. Just for Backup: Introduction to Javascript on Codecademy
    If you just feel overwhelmed by programming and Javascript, you can ease into the material very gently by starting here. I noticed that it didn’t allow me to skip items within a lesson but you can skip forward to different lessons.
  3. Just for Reference: Symbol Reference for Javascript

Appendix 1: JQuery vs. ‘Plain’ Javascript

While it’s not essential to understand the details for purposes of this case, it’s worth generally understanding how JQuery relates to ‘plain’ or standard JS. As an external ‘helper’ library, JQuery’s charter is to abbreviate, standardize, and generally make JS interactions with HTML easier to create and maintain. However, standard JS (governed by a non-profit called ECMA) has come a long way toward making this type of work easier.

For example, the following snippet implements the search button functionality you saw above with plain JS:

std-js.001