JavaScript Tutorial

Download 62.76 Kb.
Size62.76 Kb.

JavaScript Tutorial

by Dr. William C. Jones, Jr. version of 9/21/03

This primer uses the least HTML possible. The purpose is to introduce the key concepts of JavaScript, namely, commands, variables, functions, and arrays. Each short section gives a web page, lets the student try it out, describes its effect, and explains why the source code causes that effect. Each such web page illustrates only one or two new concepts. The exercises have the students use these concepts to either modify an existing webpage or create a new one.

One class day of discussion and work on developing a simple webpage should suffice before this material is presented. Students should be able to lay out a text editor window and a browser window side-by-side on the screen, so they follow this process: (a) make a few changes in the HTML file in the editor; (b) click SAVE in the text editor; (c) click REFRESH in the browser window; (d) study the effect of the changes just made. They should be able to copy content from another source (e.g., CTRL/C) and paste it into the text editor window (e.g., CTRL/V). The only HTML they need know for this material is and Who was President in 1977?

Who was President in 10 years later?

Presidential Quiz

onClick=' alert ("Carter") '> and

onClick=' alert ("Reagan") '>

Have fun

This illustrates the use of the document object

Click a button to change the way things look

Here is a picture

Click a button to change the picture

Presidential Quiz #2

onClick=' answer.value="Carter" '> and

onClick=' answer.value="Reagan" '>

Have fun

Simple use of a textfield for input

onClick=' document.bgColor=choice.value; choice.value="Enter a color" '> and

onClick=' document.fgColor=choice.value; choice.value="Enter a color" '>

Have fun


Homework 7d: Modify your mine.html webpage to have the reader click one of 3 buttons to get a prompt box that asks the question, and have the answer displayed in a single textfield. Define a function for each question/answer combination.

8. User-defined Variables
You have seen built-in variables such as pic.src and answer.value. You can also define your own variables in JavaScript commands when you need them. You would do this because you obtain information in one place that you need to use in another place. Browse the jones8.html webpage to see how it gets the name of the reader after the second line of content is printed and uses that name within the later content. The source code is as follows.

illustrating dynamic content

Hello, , nice to see you.

Are you ready to buy something, ?

How about a T-shirt that says "" on it?

Presidential Quiz #3

Who was president in 1977?

Write in the correct answer

This illustrates the use of the if-else-command

GAME: Guess my secret word

GAME #2: Guess my secret word

GAME #3: Roll 2 Dice

Click the buttons to start or stop the animation

Enter the right answer in each space

... and
Download 62.76 Kb.

Share with your friends:

The database is protected by copyright © 2022
send message

    Main page