CSci 220 - Lecture 21

Web Page Design

© Morris Firebaugh

 

A. Introduction




B. Review JavaScript Syntax

JavaScript is a very Big Language

How does JavaScript compare to Java?

JavaScript Java
Interpreted (not compiled) by client. Compiled bytecodes downloaded from server, executed on client.
Object-based. No distinction between types of objects. Inheritance is through the prototype mechanism and properties and methods can be added to any object dynamically. Object-oriented. Objects are divided into classes and instances with all inheritance through the class hieararchy. Classes and instances cannot have properties or methods added dynamically.
Code integrated with, and embedded in, HTML. Applets distinct from HTML (accessed from HTML pages).
Variable data types not declared (loose typing). Variable data types must be declared (strong typing).
Dynamic binding. Object references checked at runtime. Static binding. Object references must exist at compile-time.
Cannot automatically write to hard disk. Cannot automatically write to hard disk.



Four Modes of Embedding JavaScript in HTML Documents

  1. As statements and functions within a <SCRIPT> Tag
  2. By specifying a file as the JavaScript Source
  3. By specifying a JavaScript expression as the value of an HTML attribute [e.g., <HR WIDTH="&{barWidth};%" ALIGN="LEFT">
  4. As event handlers within certain other HTML tags (mostly form elements)




A Language is defined by:

 
C. JavaScript References

Several excellent references on JavaScript include:

http://developer.netscape.com/docs/manuals/communicator/jsref/index.htm

http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm

http://www.htmlgoodies.com/primers/jsp/jsp_toc.html


These three references contain all you need to know (everything there is to know?) about JavaScript! 



D. JavaScript Built-In Functions

Event Applies to Occurs when Event handler
Abort
images User aborts the loading of an image (for example by clicking a link or clicking the Stop button)
onAbort
Blur
windows and all form elements User removes input focus from window or form element
onBlur
Change
text fields, textareas, select lists User changes value of element
onChange
Click
buttons, radio buttons, checkboxes, submit buttons, reset buttons, links User clicks form element or link
onClick
DragDrop
windows User drops an object onto the browser window, such as dropping a file on the browser window
onDragDrop
Error
images, windows The loading of a document or image causes an error
onError
Focus
windows and all form elements User gives input focus to window or form element
onFocus
KeyDown
documents, images, links, text areas User depresses a key
onKeyDown
KeyPress
documents, images, links, text areas User presses or holds down a key
onKeyPress
KeyUp
documents, images, links, text areas User releases a key
onKeyUp
Load
document body User loads the page in the Navigator
onLoad
MouseDown
documents, buttons, links User depresses a mouse button
onMouseDown
MouseMove
nothing by default User moves the cursor
onMouseMove
MouseOut
areas, links User moves cursor out of a client-side image map or link
onMouseOut
MouseOver
links User moves cursor over a link
onMouseOver
MouseUp
documents, buttons, links User releases a mouse button
onMouseUp
Move
windows User or script moves a window
onMove
Reset
forms User resets a form (clicks a Reset button)
onReset
Resize
windows User or script resizes a window
onResize
Select
text fields, textareas User selects form element's input field
onSelect
Submit
forms User submits a form
onSubmit
Unload
document body User exits the page
onUnload



General Syntax for Handling Events:

<TAG  eventHandler="JavaScript Code"> 



These are particularly useful for FORMS (see Example 6 below):

<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">




E. Examples of JavaScript


Example 1: Use JavaScript to color text

<script language="javascript"><!--
document.write("<FONT COLOR='RED'>This Is Red Text</FONT><BR>")
document.write("<FONT COLOR='BLUE'>This Is Blue Text</FONT>")
// -->
</script>

Results:


Example 2: A JavaScript to report the Current Date

<SCRIPT LANGUAGE="JavaScript">
//This script by Joe Burns Ph.D.
RightNow = new Date();
document.write("<FONT COLOR='green'>Welcome to Lecture 21! You stopped by on:</FONT> " + RightNow.getMonth()+ "/" + RightNow.getDate() + "/" + RightNow.getYear() )
</SCRIPT>

Results:


Example 3: Use onMouseOver to Change Page Color and Status

<A HREF="http://www.uwp.edu/academic/computer.science/Faculty/firebaugh.www/firebaugh.html"onMouseOver=" document.bgColor='pink', onMouseOver=window.status='Return to your Professors Home Page';
return true">Click Here</A>

Results:

Click Here


Example 4: Use onClick to call up an Alert Box

<A HREF="http://www.htmlgoodies.com"
onClick="alert('You are off!');">
Click Here</A>

Results:

Click Here


Example 5: Doing Math with JavaScript

<HEAD> 
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide script from old browsers
function square(number) { return number * number; } // End script hiding from old browsers --> </SCRIPT> </HEAD> <BODY> <SCRIPT> document.write("The function returned ", square(5), "."); </SCRIPT> <P> All done. </BODY>

Results:

math.html


Example 6: Generalized Math Calculator

<HTML>
<HEAD>
<SCRIPT>
<!--- Hide script from old browsers
function compute(f) {
   if (confirm("Are you sure?"))
      f.result.value = eval(f.expr.value)
   else
      alert("Please come back again.")
}
// end hiding from old browsers -->
</SCRIPT>
</HEAD>

<BODY>
<FORM>
Enter an expression:
<INPUT TYPE="text" NAME="expr" SIZE=15 >
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
<BR>
Result:
<INPUT TYPE="text" NAME="result" SIZE=15 >
</FORM>
</BODY>
</HTML>

Results:

calculator.html




F. Laboratory Assignment # 11

 




Updated 4/2/2000