Student Menu. © Lesson 4. Printable layout. Links won't function in print.

Notes Section

Main Text


Module 4.0


Course Projects:

1. Scrolling Messages
2. Pop-up Windows

3. Alerting Form
    Validators/Calculators
4. Simple Image Rollovers

 

Simple JavaScripts Reviewed.


Attempt to use the concepts and techniques you've seen in this course for JavaScripts of your own.

The six, simple JavaScripts below were derived from scripts in our course projects. They are building blocks representing some common uses of JavaScript on the Web.

 

Module 4.1


How do I dynamically write or change HTML?

The Code:

<SCRIPT LANGUAGE = "JavaScript">
<!-- This syntax hides JavaScript from older browsers that can't recognize it.

// Use the lastModified Property of the Document Object.
document.write("Last modified <B>"+document.lastModified+"</B>. ")

// Use the appName and appVersion Property of the Navigator Object.
document.write("You are using <B>"+navigator.appName+"</B> version "+navigator.appVersion)

// This ends the hide from older browsers syntax enclosing the entire JavaScript-->
</SCRIPT>


Code in Action:

 



Module 4.2

How do I create a Function?

The Code:

<SCRIPT LANGUAGE = "JavaScript">
<!-- This syntax hides JavaScript from older browsers that can't recognize it.

// Create a function called FunctionName.
function FunctionName( )
   {
   function statement;  // Note a semicolon is optional for single statement functions.
   }

// This ends the hide from older browsers syntax enclosing the entire JavaScript-->
</SCRIPT>


Code in Action:

See Module 4.3

 


Module 4.3 builds upon Module 4.2

How can I use an Event Handler to call a Function?

Each button below has a corresponding Parameter--a value like red, white, blue, green or yellow--that gets passed to the Function when the button is clicked (onClick). The Function then assigns the value to the word inside its parenthesis (color). Finally, the value held by the word color is assigned to the bgColor Property of the Document Object.

The Code:

<HTML><HEAD><TITLE>Change Background Colors</TITLE>

<SCRIPT LANGUAGE = "JavaScript">
<!-- This syntax hides JavaScript from older browsers that can't recognize it.

// Create a function called ChangeColor, and pass it a parameter called color.
function ChangeColor(color)
   {
   document.bgColor = color;  // Note a semicolon is optional for single statement functions.
   }

// This ends the hide from older browsers syntax enclosing the entire JavaScript-->
</SCRIPT>

</HEAD><BODY>

<FORM NAME=ColorForm>
    <INPUT TYPE=button NAME=red VALUE=Red onClick=ChangeColor("red")>
    <INPUT TYPE=button NAME=white VALUE=White onClick=ChangeColor("white")>
    <INPUT TYPE=button NAME=blue VALUE=Blue onClick=ChangeColor("blue")>
    <INPUT TYPE=button NAME=green VALUE=Green onClick=ChangeColor("green")>
    <INPUT TYPE=button NAME=yellow VALUE=Yellow onClick=ChangeColor("yellow")>
</FORM >

</BODY></HTML>


Code in Action:

 


Module 4.4 builds upon Module 4.2

How do I add two numbers? (FORM calculator)

The Code:

Please try on your own. See your projects.


Code in Action:

 

 


Module 4.5 builds upon Module 4.2

How do I alert the user? (FORM validator)

The Code:

Please try on your own. See your projects.


Code in Action:

 

 


Module 4.6

How do I create a simple image rollover that pops open a new browser window?

The Code:

Please try on your own. See example in Lesson 3.


Code in Action:

 

 

 

Module 4.7

 

Conclusion.

  1. We have learned how to create scrolling messages, pop-up windows, alerting form validators/calculators and simple image rollovers.
  2. We have discovered several online resources including the JScript Language Reference, the HTML Validator, the BareBones Guide to HTML, the ZDWebopedia, the TechWeb Encloypedia, the JavaScript Guide and the JavaScript Reference.
  3. Remember, just as it took lots of time and practice to learn all the attributes and properties of HTML tags, so will be the case for the Properties, Methods, Events and Objects of JavaScript. Congratulations on making it this far! I look forward to seeing some of you in Part II. J