Class 22: Lab: Introduction to JavaScript

Held Tuesday, February 29, 2000

Overview

Today we continue our investigations of JavaScript by trying some simple hands-on activities.

Question 22 for today's class: Describe an algorithm that you think would be useful for the Web.

Question 23 for Wednesday's class: Write a short JavaScript program and corresponding Web page using the techniques you've learned.

Notes

• As I noted at the beginning of the semester, I'll be out of town next Friday (March 10), attending a conference on computer science education. Since many of you have midterms, and can use the extra time, I'm cancelling class.
• Apologies for the sketchiness of today's outline. I'm still working hard to catch up from having been away for a week.

Contents

• Rough Lab
  • Preliminaries
  • Simple Output
  • Getting Input
  • Linking
  • Always Running JavaScript
  • Changing the Document
  • Common Code
  • Whatever

Summary

• Ways of writing Javascript, revisited.
• .js files.

Rough Lab

Preliminaries

• You are now ready to write your own JavaScript programs within Web pages.
• You may want to refer to yesterday's example as you do this.
• Yes, I'm being purposefully vague in the following instructions. You need to learn to experiment and look at references as you program.

Simple Output

• First, create a page with two buttons, one that says ``Hi'' and one that says ``Hello''.
• Make the ``Hi'' button put up an alert box.
  • The parameter to the input tag should be onClick="alert('...')"
• Make the ``Hello'' button change the status bar.
  • The parameter to the input tag should be onClick="document.status='...'"

Getting Input

• Next, add a ``Greet'' button that, when clicked, as the user for a name and prints a greeting.

Linking

• You can write JavaScript commands that switch to another page using document.location="...".
• For example

  <input type="button" value="Go Home!"
      onClick="document.location='http://www.math.grin.edu/'">
  

• Try adding that button and see what happens when you click it.

Always Running JavaScript

• At times, you'd like to have JavaScript that runs whenever the page is loaded, not just when the user clicks a button. You can put JavaScript in the middle of the page with a script tag.
• For example,

  <script language="javascript">
  username = prompt('What is your name?', '');
  document.status = 'A page customized for ' + username;
  </script>
  

• Try inserting that code somewhere in the page and see what happens.

Changing the Document

• JavaScript would not be a lot of use if all we could do was read values and put them in dialog boxes.
• One of JavaScript's most powerful properties is that it can create new text as part of the page with document.write.

  <script language="javascript">
  username = prompt('What is your name?', '');
  document.write = 'A page customized for ' + username;
  </script>
  

• Try inserting that code somewhere in the page and see what happens.

Common Code

• Eventually, you'll want to turn pieces of common code into functions.
• You define a function in JavaScript with

  function functionname(inputs)
  {
    instructions
  }
  

• For example, here's a function that greets the user.

  function greet()
  {
    username = prompt('Please enter your name:', '');
    alert('Hi ' + username);
  }
  

• We use this in our HTML as follows:
  • Save the function in a file ending in .js. For example, greet.js
  • In the head of the document, add the following

    <script language="javascript" src="greet.js">
    </script>
    

  • In the body of the document, you can now call greet(). For example, onClick="greet()".
• Try it.

Whatever

If you still have time left, play with the commands you've learned so far.