Lesson Plan

ITCSS Home

Student Center

TallTech Home

February 25, 2000

Details

Title	More statements, alerts, prompts, strings, & math. Some practical examples of JavaScript
Time Allotment	6 hrs

Reading / References

Tutorial 7 - Programming with JavaScript - New Perspectives Manual (NP)
Tutorial 8 - Programming with JavaScript - New Perspectives Manual (NP)

Supplemental Web Sites

WebMonkey
http://www.hotwired.com/webmonkey/javascript/tutorials/tutorial1.html (beginner)
http://www.hotwired.com/webmonkey/javascript/tutorials/tutorial2.html (advanced)

Cut & Paste Javascript
http://www.infohiway.com/javascript/indexf.htm

FreeSite
http://www.thefreesite.com/freejava.htm

Objectives (Morning)

Alert boxes
Prompts
Declare JavaScript externally
Look at some additional statements for more control.
Strings
Math functionality
Date Gotchas

Objectives (Afternoon)

Practical applications of JavaScript

Coursework / Lab Work (Morning)

Quiz
Concept review (Q&A)
Overview of new objectives
Work through practice exercises

Coursework / Lab Work (Afternoon)

Concept review (Q&A)
Overview of new objectives
Work through practice exercises

Homework

Work on checkpoints
Work on JavaScript assignments
Work on group JavaScript assignments

Exercises (Morning)

Using the previous exercises as a reference:

Take the updated weight converter add prompts asking the user for input
Add prompts to the area calculator
Add prompts to the record rainfall program
Add prompts to the loop exercise for the balance calculator

Exercises (Afternoon)

Work through JavaScript tutorial on Web Monkey
Load examples from these notes and test

Solutions

EXERCISE: LOOP EXERCISE WITH PROMPTS

<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</BODY>
</HTML>

Demo (Morning)

Alert Boxes

alert ("A message to the user");

Prompting the user

var myvariable = prompt("Question goes here?", "Default Value");

External references

Looping through an array – compatibility?

         for count in myArray
         {
                  write(myArray[count]);
         }

Breaking out early

         count = 0;
         while (count < 10)
         {
         if (count == 5)
             break;

         write(count + "...");
         count++;
         }

Jumping to the next iteration
        for iteration in myArray
         {
            if (Math.odd(iteration))
              continue;

            writeln(myArray[iteration]);
         }

Strings
                Concatenation
                String methods
                                i.e. toUpperCase(), toLowerCase
                                changing attributes

Working with the math functions
Math functionality / methods
i.e. abs - absolute value, min, max, etc.

Demo (Afternoon)

Window Manipulation

Controlling the status bar

<a href="javascript:void(0)" onMouseOver="window.status='Display Text'; return true">
hyperlink viewed by the user
</a>

Default Status

window.defaultStatus = “message in bar”;

Document background & foreground colors

document.bgColor = “color”;
document.fgColor = “color”;

DEMO: Different hyperlinks to change colors of background

Opening New Windows

HTML
<A HREF="newwindow.htm" TARGET="mywindow">open window</a>
<A HREF="newwindow2.htm" TARGET="mywindow">open window</a> - opens to same window

JavaScript
window.open("URL","name","features");
<a href="#" onClick="window.open('javascript_window_1.html','javascript_1');">Here's a window named javascript_1</a>.

open with
window.open("http://www.talltech.com ","window_name","location,menubar");

sizing
window.open("http://www.talltech.com","window_name"," location,height=100,width=100");

for a list of features see:
http://www.hotwired.com/webmonkey/98/03/index3a_page5.html?tw=javascript

Another Window Example

<html>
<head>
<title>Windows</title>
<script language="JavaScript">

</script>
</head>

<body>
<h1>Here are a bunch of different windows</h1>
<a href="#" onClick="defaultWindow();">The default window</a><br>
<a href="#" onClick="plainWindow();">A small, plain window</a><br>
<a href="#" onClick="locationWindow();">A resizable window with a location box</a><br>

</body>
</html>

Image rollover

Step #1

Create two sets of graphics. The first graphic appears in it’s normal state, the other appears in it’s hovered state.

Step #2

Insert HTML code to: (1) Insert the graphic, name the graphic, and trap mouse events.

Step #3

Create a script that will preload the graphics

Step #4

Call the graphic preload on document load.

Another Preload Example

Usage:

WM_preloadImages('image 1 URL', 'image 2 URL', 'image 3 URL', ...);

Script:

Determining the Browser / Custom Browser Code

navigator.appName

Microsoft Internet Explorer
Netscape

Navigator.appVersion

Example 1(browser differences):

<SCRIPT Language="JavaScript">

</SCRIPT>

Example 2 (a little biased):

<script Language="JavaScript">

</script>

Example 3 (browser redirection):

<script Language="JavaScript">

</script>

Setting form contents

Response to mouseover of anchors (edit controls):

<form name="first_form">
<input type="text" name="first_text" value="Are you happy?">
</form>

<a href="#" onMouseOver="window.document.first_form.first_text.value='Clap clap!';">Yes, and I know it.</a>
<a href="#" onMouseOver="window.document.first_form.first_text.value='Sour puss!';">No!</a>

Response to mouseover of anchors (text area):

<script language="JavaScript">

</script>

…

<form name="form_two">
<textarea name="the_textarea" rows=10 cols=60>
Mouse over below to see the first verse of The Webmonkey song, adapted from"I Wanna
Be Like You" (The Monkey Song)from Walt Disney's The Jungle Bookwritten by
Richard M. Sherman and Robert B. Sherman
</textarea>
</form>

<a href="#" onMouseOver="window.document.form_two.the_textarea.value=first_part;">Part 1</a>
<a href="#" onMouseOver="window.document.form_two.the_textarea.value=second_part;">Part 2</a>

Responding to form actions

Name:    <INPUT NAME="name" SIZE=30><P>
Email:   <INPUT NAME="email" SIZE=30><P>
Checkbox <INPUT NAME="check"
                TYPE=checkbox
                onClick="alert('You clicked the checkbox')"><P>

Checkbox2 <INPUT NAME="check2"
                TYPE=checkbox
                onClick="if (this.checked == true)
                         {
                             alert('Checkbox is checked.')
                         }
                         else
                         {
                             alert('Checkbox is cleared.')
                         }
                        "><P>

Radio Control:<BR>
<BLOCKQUOTE>
   <INPUT NAME="radio" TYPE=radio onClick="alert('Option 1')" CHECKED>Option 1<BR>
    <INPUT NAME="radio" TYPE=radio onClick="alert('Option 2')">Option 2<BR>
    <INPUT NAME="radio" TYPE=radio onClick="alert('Option 3')">Option 3<BR>
</BLOCKQUOTE>
<HR>
<INPUT TYPE=SUBMIT><INPUT TYPE=RESET>
</FORM>

Using other libraries of JavaScript

Form completion

Usage:

IsFormComplete("theFormName")

Script:

<script language="JavaScript">

</script>

Email entry validation

Usage:

IsEmailValid("FormName","ElemName")

Script: