Notes
Outline
JavaScript
Making Web pages come alive
Objectives
Be able to read JavaScript scripts
Be able to write JavaScript scripts
To See Examples
Open text editor
Create HTML page
Type in each example, save and view with browser
Static vs. Dynamic
Static
page appears exactly as it was encoded, nothing changes
only HTML
Dynamic
page changes (possibly in response to users actions)
Can’t be only HTML
Scripts
Scripts: server-side vs. client-side
Server-side
the first type possible on the Web
action occurs at the server
Client-side
handles user interaction
generally easier to implement
may be prepared and implemented offline
action occurs on the client side (browser)
JavaScript is the most common example
DHTML
HTML-Document description-we did
JavaScript- Client-side interaction-will do
CSS- Style definition-beyond
Dynamic HTML = HTML + CSS + scripts
JavaScript
Developed by Netscape to be simple, cross-browser scripting language for Web
Syntax based on ‘C’ - a good starting point to learn other programming languages
JavaScript is not Java
<script type="text/javascript"> …</script> enclose a JavaScript script
Write()
JavaScript’s output statement:
document.write (“Text”);
Inside the <script> tag, we must output HTML
document.write (“<p>Text<br/>text</p>”);
Hello World
<html>
<head><title>hello javascript</title></head>
<body>
<script >
document.writeln ("Hello, World!");
</script>
</body>
</html>
Output?
What is the output?
<html>
 <head><title>hello javascript</title></head>
 <body>
  <script >
   document.write ("Hello,\n          World");
   document.write ("Hello,<br/>2 the          &nbsp;&nbsp;&nbsp;World");
  </script>
 </body>
</html>
Why?
Hello, WorldHello,
2 the    World
the document.writeln() method preserves any line breaks in the text string.
JavaScript
Statements end with ;
Can often get away with omitting
Character strings enclosed in  “  ” or  ‘ ’
Can include an external source file with the src attribute :
<script src=“file_name.js”></script>
 JavaScript Comments
//  Ignore rest of line
/*     Ignore everything
enclosed
   */
Don’t forget to end the comment
Objects
JavaScript is an Object Oriented Language.
Objects are things—nouns
They have attributes---adjectives
We call the attributes properties
They have actions---verbs
We call the actions methods– use ()
Objects
Use dot-notation to indicate that a method or  a property belongs to an object.
Car analogy
document.write()
document.bgColor
Recall: methods have ()
Objects
JavaScript objects include the HTML elements, window, document
lastModified is a property of the document object.
JavaScript
A variable stores a value.
Declare a variable with the keyword var
Assignment: variable = value;
+ adds numbers
+ concatenates strings of characters
e.g. “ab” + “cd” is “abcd”
lastModified is a property of the document object.
Example
<html>
 <head><title>Last Modified</title></head>
 <body>
  <script>
   var date;
   date=document.lastModified;
   document.writeln ("This page was last modified:“ + date);
  </script>
 </body>
</html>
Will automatically update. Output?
Output
This page was last modified: 01/25/2005 12:40:18
Note:
var date=document.lastModified;
 could have been in one line
See new window 2.html
Window
The document object is contained within a window object.
window has methods:
Alert ()
Confirm ()
Prompt ()
window is assumed so
alert () is equivalent to window.alert ()
Alert( )
Alert (“some string”) pops up a message box containing its string.
It is a method of the (assumed) window object.
Alert( )
<html>
<head><title>hello alert</title></head>
<body>
<script>
alert ("Hello, World!");
</script>
</body>
</html>
Output: alert box. Run it to see.
Confirm( )
Confirm uses if-else logic. true/false. Can I assume?
Declare a variable.
Confirm returns a value which you assign to a variable.  O.K. button sends true. Cancel sends false.
Test the variable:
Confirm( )
<script>
 var x = confirm ("Are you sure you are ok?");
 if (x)
alert ("Good!");
 else
alert ("Too bad");
</script>
Prompt( )
Prompt( ) method returns the text
<script>
var y=prompt
("please enter your name");
document.writeln (“Hello, ” + y);
</script>
Prompt( )
You assign the result to a variable.
You use the value.
Optional: Second parameter to Prompt( )
Is the default value.
Equality
== tests for equality
A==B has the value true when A and B are the same; false otherwise.
!= tests for inequality
Password
<head>
<script >
  var guess; var password=“fool”; guess=prompt(' enter password ');
if (password!=guess) location=“forbidden.html”;
</script>
</head>
Why fool? …
Because…
Password is in source which may be viewed .
I must admit that I couldn’t view it!!

Events
Usually, user actions generate events that belong to objects.
mouseover
load
click
Event Handlers
Event handlers-respond to users actions
onmouseover
onmouseout
onload
onunload
Event handlers are put inside corresponding HTML tags.
Not inside <script>…</script>
Case
onClick="alert ('You clicked the button!');"
The underlined parts are  HTML
The quoted string is JavaScript
onClick
The Java naming convention is easier to read.
This is fine in HTML, but an error if it occurs in JavaScript. JavaScript is case sensitive. HTML is not .
Please note: Since we have a quoted string inside another quoted string, we need both single and double quotes.
Event Handlers
Most HTML elements have the following event  handlers:
onClick -- the form element is clicked
onDblClick -- the form element is clicked twice in close succession
onMouseDown -- the mouse button is pressed while over the form element
onMouseOver -- the mouse is moved over the form element
onMouseOut -- the mouse is moved away from the form element
onMouseUp -- the mouse button is released while over the form element
onMouseMove -- the mouse is moved
In JavaScript, these should be spelled in all lowercase
Change Color
<html>
<head><title>Change the Background Color</title></head>
<body >
<h3><a href="#" onMouseover="document.bgColor=‘blue';" onMouseout ="document.bgColor='white';">
Move your cursor over this link to change background color to blue.</a></h3>
</body> </html>
OnMouseover
<a href="#" onMouseover="alert ('Ouch! I asked you not to click this link!');">
Don't click this link!</a>
What’s the first thing you’ll do?  J
Aside: I typed this twice. One worked. One didn’t. I never figured out difference.
Status (skip)
The window object has the property status whose value is displayed in the status bar.
Change it only briefly cause need the info.?
<a href=“#" onMouseover="status='Hi there!'; return true;"
onMouseout="status=' '; return true;">
Place your mouse here!</a>

Push Button
Object that has some effect when it is pushed:
e.g. doorbell
except traffic light
User defined (as opposed to which?)
Has no default behavior. (what was….)
May have client side scripts associated with its event attributes. When an event occurs (e.g., the user presses the button, releases it, etc.), the associated script is triggered.
Buttons are contained in forms
Button
type="button"
This command declares the input to be a button.
value="Click Me"
This will be the text people will see on the button. Write whatever you want your visitors to see.
name="button1"
You can give the button a name so you can refer to it.
Button event handler
<form>
<input type="button" value="See Some Text" name="button2" onClick="alert ('Some Text');">
</form>
Recall: window is the assumed object.
Color buttons
<form>
<input type="button" value="Change to Yellow!" name="buttonY" onClick="document.bgColor='yellow‘;">
<input type="button" value="Change to White!" name="buttonW" onClick="document.bgColor=‘white‘;">
</form>
open
open( ) is a method of the window object.
It opens a new window.
open(“URL”);
You can use it inside an event handler.
I had to use window.open(). I don’t know why.
Open
<form>
<input type="button" name="button1"         value ="new" onClick ="window.open('forbidden.html');">
</form>
<a href="#" onClick ="window.open('forbidden.html');">
open sesame</a>
Full featured window
window.open('http://www.blah.com/blah',
‘title','width=400,height=200,toolbar=yes, location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes') ;
Functions
A function is a named piece of code that performs a task. Has ()
Functions are put in <head> so they are loaded before the page displays.
Are executed only when invoked.
Body enclosed in{ } (called a block)
May have parameters in () (values used by the the function to do its task).
Functions
Methods are similar to functions that belong to an object.
Functions are similar to methods that belong to the script.  Placed in head so they are loaded before they are called.
An event handler should be very short
Many handlers call a function to do their job (delegate).
Examples
Function_wo_param
Simple calculator.html
(Simple)Guess_my_number.html
Bgcolor_buttons_func.html
On slide, too
Mixed up
On slide, too
Slide 48
Slide 49
Debugging Your JavaScript Programs
Three types of errors:
Load-time errors (occurs when the script is loading)
Run-time errors (occurs when the being executed)
Logical errors (free from syntax and structural mistakes, but result in incorrect results)
Common Mistakes
You need to debug your program: fix the mistakes w/o adding new ones.
Common mistakes include:
Misspelling a variable name
Mismatched parentheses or braces
Mismatched quotes
Missing quotes
Using ( instead of [ or {
Using = in place of ==
Tips for Writing Good JavaScript Code
Use good layout to make your code more readable.  Indent command blocks to make them easier to read and to set them off from other code
Use descriptive variable names to indicate the purpose of your variables
Be careful how you use uppercase and lowercase letters in your code, because JavaScript commands and names are case-sensitive
Tips for Writing Good JavaScript Code
Add comments to your code to document the purpose of each script
Initialize all variables at the top of your script and insert comments describing the purpose and nature of your variables
Create customized functions that can be reused in different scripts.  Place your customized functions in external files to make them available to your entire Web site
Summary
Objects
Properties
Methods
Variables
Push buttons
Events and handlers-inside HTML tags
functions
Summary
Given an HTML file containing a script, you should be able to show the corresponding web page.
Given a web page, you should be able to show the corresponding HTML file.