Module 2: JavaScript

Overview

This module gives students an opportunity to do some hands-on client-side scripting using JavaScript. Each lesson builds on previous lessons, and end in the end students will have created a functioning clock with buttons that enable users to toggle its display on and off. This can be challenging for some students, but much of the activities can be accomplished by copying and pasting code, then patiently troubleshooting if things don't work as expected.

Lesson 1: Using JavaScript to Show an Alert

Estimated time required: 90+ minutes
Link to student Lesson 1 page

Tips for Delivering This Lesson

The Javascript function that's created in this lesson is named showAlert (with an upper case "A"). Students often learn about case sensitivity in this lesson, and about attending to detail.
Often, this and other JavaScript activities don't work the first time. This is actually a good thing, as it forces students to think logically about how it's supposed to work, and what might cause it to fail. Often the problems are very simple typo's like a misspelled function name or incorrect punctuation. We recommend providing varying degrees of assistance to students. Students who have the aptitude to think logically through the troubleshooting process on their own should be encouraged to do so, or perhaps some carefully worded hints will help them to find the solution. There's nothing quite as intrinsically rewarding as that Aha! moment when a student finally figures out their coding problem. If students are less coding-savvy, they may require more extensive assistance.
This lesson calls for students to add an attribute to the <body> element. It's common for students to add an additional <body> element rather than build upon the one that's already there. When that happens, it might be time to pause and review the basics: One head, one body, opening and closing HTML tags, the difference between elements and attributes, and finally the relationship between HTML elements and JavaScript. It's important for students to understand the big picture.

Example Output

When this lesson is complete, students will have added an alert to javascript.html, plus a link that triggers the alert.

Lesson 2: Javascript Errors and Debugging

Estimated time required: 60 - 90 minutes
Link to student Lesson 2 page

Answer Key For Buggy Examples

This lesson includes three buggy examples, and students are asked to identify the bugs. Here are the correct answers:

Misspelled variable on line 4. The letter T in "mytext" needs to be capitalized.
Unclosed character string on line 3. The closing quotation mark is missing.
Spelling error on line 2. The word "function" is misspelled.

Lesson 3: Building a JavaScript Clock Part 1

Estimated time required: 90+ minutes
Link to student Lesson 3 page

Tips for Delivering This Lesson

This is the first of three lessons in which students begin to build an interactive clock. This can be challenging for many introductory students. You may wish to make these lessons optional or extra credit.
Be sure you understand the activities yourself, as this will help you to provide support to students.
Each of the lessons can be successfully completed by simply copying and pasting the example code provided. However, students must follow instructions very closely, and if ultimately their script doesn't work as expected, they'll need to understand how all the parts work together in order to figure out what might fail.
Encourage students to practice the debugging skills they learned in the previous lesson. For example, is the updateTime() function being called when the page loads? They can find out by adding an alert() as the first line of that function, and commenting out everything else in that function. If the alert doesn't appear when the page loads, then the function isn't being called. Why not? This sort of logical thinking can help students to isolate the problem, and can help them to understand the relationship between all the parts.
Troubleshooting is an art that's developed and perfected over time. Introductory students can benefit from observing others who are good at it. If there's a common problem that many students are experiencing, it can be helpful to work as a class through the process of troubleshooting, while projecting an example website. If there are one or more advanced students who are good at troubleshooting, they could possibly be invited to lead that discussion.
The example portfolio site that accompanies this curriculum includes each of the JavaScript lessons, and all are known to be working correctly. Studying the example code, and comparing that to code that isn't working, might help in identifying particularly challenging bugs.

Example Output

When this lesson is complete, students will have added a clock to javascript.html. It doesn't tick away the seconds yet—it simply displays the current time when the page loads. This clock will be improved in subsequent lessons.

Lesson 4: Building a JavaScript Clock Part 2

Estimated time required: 90+ minutes
Link to student Lesson 4 page

Tips for Delivering This Lesson

Like the previously lesson, this lesson can be completed simply by copying and pasting code. This should actually be encouraged since it helps to reduce the possibility of typo's, and sharing code is a common practice among Web developers.
Even though students can complete this lesson by copying and pasting code, it's important that they have an understanding of the different parts and how they all relate to one another. Some code will need to be added to existing code, and other code is intended to replace existing code. This is all spelled out in the lesson, but students will need to be following instructions closely, and thinking as they copy and paste.
This lesson provides an opportunity to revisit CSS, as students can stylize the clock they've created. This is important for a couple of reasons. It helps to tie the various parts of the course together, reinforcing the relationships between HTML, CSS, and JavaScript. It also might provide a breath of fresh air for students if they're struggling with JavaScript but were more comfortable with CSS. Even though this module primarily focuses on JavaScript, students should be encouraged to spend some time playing with CSS and see what kind of interesting designs they can come up with. Perhaps the class could produce a gallery of digital clocks showcasing the various designs.

Example Output

When this lesson is complete, students will have used CSS to enhance their clock in javascript.html, plus added functionality to keep it ticking.

Lesson 5: Using Javascript to Hide and Show Content

Estimated time required: 90+ minutes
Link to student Lesson 5 page

Tips for Delivering This Lesson

Dynamically showing and hiding content is one of the most common purposes served by JavaScript on today's Web. If students continue on with web design and development after this course, this lesson will have given students a valuable skill that they will certainly prove to be useful in their future.
Throughout this course students have been encouraged to consider accessibility as they've added new content to their sites. This lesson provides an opportunity to revisit that. Dynamic content poses unique challenges for some users, especially those who are blind. Imagine a blind user who is navigating through a website using a screen reader, and they arrive at a button. They click on that button and this results to new content being displayed elsewhere on the screen. Do they know the new content has appeared? If so, how can they read the new content, without losing their current place on the page? Historically, these have been problems with no solution. Dynamic content was simply not accessible to blind users. However, the W3C has been busy working on a new specification known as Accessible Rich Internet Applications (ARIA) that introduces new attributes that can be added to HTML elements. These new attributes are designed to communicate the roles, states, and properties of dynamic elements, making them accessible to assistive technology users. Understanding how ARIA works is beyond the scope of this curriculum, but students should be encouraged to think about and discuss this issue.

Lesson 6: Building a Custom Video Player

Estimated time required: 90+ minutes
Link to student Lesson 6 page

Tips for Delivering This Lesson

This is a fun lesson to wrap up the Javascript module. The JavaScript code can be copied and pasted into student's pages, but things can still go wrong. If it does, encourage students to use debugging techniques such as those learned in Lesson 2 to try to isolate the problem.
Be sure the video plays in the built-in browser (originally added to students' portfolio site in Unit 2) before starting this lesson. If the video with the built-in player doesn't play, the custom JavaScript player won't work either so the original problems need to be fixed first.

For advanced students, consider issuing challenges to them for ways to improve the player. One possibility would be to combine the Play and Pause buttons into one button that does both. Originally this would be a Play button, but after a user clicks it and the video starts playing, the button could change to a Pause button. This could be done with some fairly simple changes. First, they should add id="playpause" to the play button in HTML. Second, they could remove the Pause button. Third, they could make the following changes to the JavaScript code (changes are marked with NEW in the comments):

// create a few global variables to be used later 
// NEW: added two variables on the end
var video, speed, volume, playing, playButton;
      
function init() { 
  // initialize the player 
  // first, get the media element and assign it to the video variable
  video = document.getElementById('myvideo');      

  // get the current playbackRate from the HTML5 media API 
  // range is 0 to very fast, with 1 being normal playback 
  speed = video.playbackRate;         

  // volume range is 0 to 1 
  // set it in the middle so we have room to move it with our buttons
  volume = 0.5;
  video.volume = volume; 
        
  // NEW: set playing to false 
  playing = false; 
        
  // NEW: assign the playpause button to a variable so we can access it later
  playButton = document.getElementById('playpause');
}
             
function play() {  
  // NEW: pause if playing; play if not playing     
  if (playing) {
    video.pause(); 
    // change text of button back to 'Play' 
    playButton.innerHTML = 'Play';
    // reset playing
    playing = false;
  }
  else { // video is not playing
    video.play(); 
    // change text of button to 'Pause' 
    playButton.innerHTML = 'Pause';
    // reset playing
    playing = true;
  }
}

// remaining functions not changed, so not shown here...

Example Output

When this lesson is complete, students will have modified their video.html page so it now includes a custom video player.