Interactive JavaScript

What is it?

The JavaScript functions that allow you to make interactive web pages.

Why should I learn it?

Your HTML pages need JavaScript to become more interactive.

What can I do with it?

You can change the elements of a page based on a user's input. You will learn about manipulating the Document Object Model (DOM) to customize pages and present data.

How long will it take?

Programming is something that you learn over time, through practice. But in a few hours, you will be introduced to the interactive elements of JavaScript that you will be able to apply to your own projects. Subsequent exercises will more complex applications of interactive JavaScript.

Getting Started

Now is a good time to switch over to writing code to an HTML document. In the last lesson, you learned some basic programming concepts. Now we'll work with some practical applications. Open a text editor like Text Wrangler and use it to write the code, just as we did in the HTML and CSS exercises. Save your files with .html extension (any name is fine, something like javascript.html). Open the html file that includes the JavaScript in the browser.

Like CSS, you can include your JavaScript in a separate file that you link to all your pages. That is recommended if you are using functions that will be repeated on multiple pages. JavaScript files should have a .js extension. This is how you reference the .js file in the HTML document.

<script src="script.js"></script>

JavaScript files are often saved in a separate folder, so make sure your path to the .js file is relative to the file in which you are linking it.

For these exercises, however, we'll be developing the JavaScript within the HTML pages, since it will just be applying to the page in which we are working. You will notice some sections of the code look like regular HTML. When we want to add code, we do that within the script tag.

<script> </script>

getElementById(); is a magical method that you can use to access parts of a Web page. We'll be working with this and other functions that "manipulate the DOM" or change the Document Object Model. We'll apply this method to change what is displayed on the page or the "innerHTML" of the element to which we are applying it. This will be very powerful when combined with forms to ask a user for input to change something on a page.

There are other methods like getElementById, including getElementsbyTagName, getElementsbyClassName, that you may need to use to achieve certain functionality, but we will start with getElementById, since it is designed to change one element on a page.

Interactivity with a Prompt

Let’s properly structure the document to include the HTML5 doctype declaration.

<!DOCTYPE html>

We'll make a page that prompts for a name and then changes the innerHTML of the document to reflect that name. Copy the code on the right and paste it into a text document. We'll be doing a series of exercises, so save this as javascript1.html.

Notice that the code includes a span with an id of "firstname." We'll be filling that span with the result of the prompt. We open the getElementbyId method with the document object and include the innerHTML property. Then we assign the value "firstname" that was collected from the prompt.

Code Sample - Basic Interactivity

Interactivity with Multiple Prompts

You can include multiple prompts assigned to different variable names to add more information to the page. For example, you could also prompt for last name, email and other information.

Remember the previous exercise where you determined your popstar name? Let's create a script that prompts for first and last name and calculates it for anyone.

Code Sample - Multiple Prompts

Interactivity with an if Statement

You can now start implementing different techniques to have your programs make decisions. Let's use an if statement to determine if someone's password is of an appropriate length. See the script at the right that prompts for a password, determines the number of characters and provides a response as to whether the password is greater than or equal to 8 characters or not.

Code Sample - if Statement

Do a Calculation

You can use programming to, of course, do some good ole math. The script to the right prompts the user for two numbers, then adds them. Look, a calculator!

Notice in the code the use of the parseInt method. When a variable is created with a prompt, the program doesn't know yet that it is a number. You use parseInt to convert it to a whole number or use parseFloat if you want the numbers to be able to include decimals.

Play around with the code to do some of your own calculations, based on the math operators we learned in the previous exercise.

Code Sample - Calculation

Change the program around to perform some different types of calculations on your own.

Events

You can use events to execute JavaScript commands based on actions on the screen. An event is an interaction – onclick, onload, onmouseover, onmouseout.

A simple script to illustrate the use of an event is provided to the right. It includes an "onclick" event on the h1 element. The script, which is simply called within the h1 element, uses the "this" object to indicate the current element and changes the innerHTML.

Code Sample - Event

Change the program to use the onmouseover event, instead of onclick. Consider the situations in which one is preferred over the other.

Interactivity with Form

So far, we have received inputs from users via prompts and events. But a more efficient way is to use forms to capture multiple items and execute a script on the onsubmit event.

The code to the right creates a form (remember the code from the HTML forms tutorial) that asks for a first and last name in two different text fields. When the user submits the form, the document reflects a welcome message that is customize for the user.

Notice that we have an onsubmit event applied to the id associated with the form. Then the script executes a function that stores the form inputs in variables and manipulates the DOM element "yourname" to include a welcome message that is customized for the user.

There are other things you can manipulate with getElementById. You can change the style of an element by including a style property.

document.getElementById("yourname").style.fontWeight = "bold";

Add the code above to the end of your script to turn the line bold.

Code Sample - Forms

Form with Array and for Loop

Let's create a form that asks for three names. We want to use the length method to evaluate the number of characters in each. Instead of doing this three different times, let's create a loop that reads each item from the array that we create to hold the items. We grab the value of each form element. The script then writes a line that includes each name and some text including the number of characters on a separate line. Notice that the loop condition evaluates to namelist.length, which means it is continuing until the end of the array. When the length property is used on an array, it returns the number of elements in the array.

Also notice the return false; link just before the function ends. This is required to make sure the page does not refresh when the form is submitted.

Use the code to the right to create your script and run the file.

Code Sample - Forms

Notice in the code above the use of "+=". This appends to the innerHTML rather than overwriting.

Exercise 1: Add a calculation that adds up the characters in the three names. Create another element with an id to hold that answer.

Exercise 2: Modify this code yourself to add an if statement that adds an asterisk if the name has more than four characters. You will probably need an else statement to handle what it should do if it doesn't.

Exercise 3: Modify the code so that the user can input a number of characters to evaluate. Instead of checking for four characters, it will check for the number indicated.

Another exercise

Use the script to the right to start to provide solutions to the following problems. The form and input element are already set up for someone to submit a password, and there are several DOM elements already set up to hold your answers.

  1. Return the password to a DOM element.
  2. Return the number of characters in that word to a DOM element
  3. Return the first character to a DOM element.
  4. Return the last character to a DOM element.
  5. Use an if statement to test if the first character is uppercase and indicate in a DOM element. Hint for 5 & 6: (letter.toUpperCase() == letter) changes the letter to uppercase and checks to see if it is the same as the original letter. If so, then it is uppercase.
  6. Use a loop to test if any character is uppercase and indicate in a DOM element.

Notice that a generic function is set up using the onsubmit function associated with the form with the "form1" id. Everything you do must go within this function. The return false; statement is required so that the form doesn't submit, only the DOM changes.

You should be able to get 1-3 pretty easily. 4-6 are a little more challenging. Take your time, think through the algorithm. Don't let the code beat you!

Code Sample - Another

Side Note

The document object is part of the Document Object Model (DOM). The DOM is an application programming interface (API) associated with the page that allows you to access and change things with JavaScript, as we did with getElementById(). There are other objects associated with the DOM. Some objects are browser objects (i.e. window). You can get more information on the DOM at CSS Tricks and W3C.

We are starting to add interactivity to Web pages. The Web pages we are working on here simply demonstrate the functionality. Remember that you will need to include this functionality in well designed, responsive websites, as you learned in previous lessons. Think about the layout structure and create a div or series of divs to include your form and resulting functionality.

Moving On

You've had a lot of experience now with using programming techniques to solve a variety of problems. Next we’ll apply more comprehensive techniques in making an Interactive Quiz and with the Interactive Charting Exercise.