Académique Documents
Professionnel Documents
Culture Documents
Web-based Applications
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 3 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 4
Content Introduction to Variables
I. JavaScript and the Details
Variable identifiers and their types
The notion of objets A variable in Javascript has a type:
Arrays
number (integer or non integer)
Control structures
Condition and selection String
Iteration Boolean
Procedures and functions Null
II. Event-Based Programming with JavaScript
What is an event? JavaScript is not strongly typed.
What are the recognized events?
Capturing events.
III. Practical Examples
Data entry validation within a form;
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 5 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 6
Declaring Variables
Type Conversion on the fly
The first time a variable is used it must be declared with the
keyword var.
Because JavaScript is not strongly typed, it
var identifier = value; is possible to:
The identifier must start with a letter or underscore _ and can Change the type of a variable;
have as many characters as necessary (letters, digits, Do operations on variables of different types.
underscore).
The major type, or default type, is string.
Javascript is sensitive to capital letters.
myvariable is different from MyVariable and x X
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 7 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 8
Variable Examples Variable Examples (cont)
<HTML> <BODY>
<HEAD> <script language="JavaScript">
<TITLE>My First Java Script with variables</TITLE> <!-- hide script
<script language="JavaScript"> document.write("myAddition="+myAddition+"<BR>");
<! hide script document.write("myConcatenation="+myConcatenation+"<BR>");
var myNumber=35; document.write("myError="+myError+"<BR>");
var myString="2004"; document.write("myDream="+myDream+"<BR>");
var myOtherString=CMPUT410"; myError = myNumber * 3;
var myAddition = myNumber+myNumber; document.write("myError="+myError+"<BR>");
var myConcatenation = myStyring + myOtherString; myNumber=Bye!";
var myError = myNumber + myOtherString; document.write("myNumber="+myNumber+"<BR>");
var myCalculation = myNumber + myString; // end of hide --> myAddition=70
var myDream = myOtherString + myString; </script>
myConcatenation=2004CMPUT410
// end of hide --> </BODY>
</script> </HTML> myError=35CMPUT410
</HEAD> myDream= CMPUT4102004
myError=105
myNumber=Bye!
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 9 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 10
Content
I. JavaScript and the Details
Variable identifiers and their types JavaScript & Concept of Objects
The notion of objets
Arrays
Control structures JavaScript is not an object-oriented language.
Condition and selection JavaScript is an object-based language.
Iteration There are many pre-defined objects, but
Procedures and functions programmers can define their own objects.
II. Event-Based Programming with JavaScript
What is an event? An object has attributes (specific properties) as
What are the recognized events? well as methods (behaviour of objects).
Capturing events. An attribute could be a value or recursively
III. Practical Examples another object.
Data entry validation within a form;
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 11 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 12
A Book is an Object What are the Objects, What
Title
are their Properties?
Authors
Editors
Number of pages
Price
Set of Chapters
Set of figures and images
etc.
?
Each book has the same
attributes with different
values
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 13 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 14
document.MyForm.Name.value
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 15 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 16
Predefined Object Classes Object Date
There are many intrinsic pre-defined objects in The object Date needs to be instantiated
JavaScript: with the keyword new.
var today= new date();
Date Navigator
String History The class Date doesnt have properties but
Math Location the following methods:
Window Form getDate() getYear()
Document etc getDay() setDate()
getHours() setHours()
getMinutes() setMinutes()
etc
These objects have their pre-defined attributes and getMonth() setMonth()
methods. getSeconds() getSeconds()
getTime(); setTime();
getTimezoneOffset() setYear()
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 17 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 18
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 19 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 20
The Object String (cont) Example with String Object
Other methods for the String object: <HTML>
<HEAD>
link() <TITLE>My test with strings</TITLE>
toUpperCase() astring.toUpperCase() converts into uppercase <script language="JavaScript">
toLowerCase() astring.toLowerCase() converts into lowercase var myString=prompt(Give me a phrase",I am at school");
substring() astring.substring(3,5) substring from 3rd character to 5th. </script>
indexOf() astring.indexOf(anOther) returns the position of anOther in astring. </HEAD><BODY>
charAt() astring.charAt(4) returns the 4th character. <script language="JavaScript">
document.write(myString+"<BR>");
document.write(myString.bold()+"<BR>");
document.write(myString.italics()+"<BR>");
The index in a string starts at 0. document.write(myString.fontcolor("red").blink()+"<BR>");
document.write(myString.link("http://www.cnn.com")+"<BR>");
document.write(myString +"<BR>");
</script>
</BODY></HTML>
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 21 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 22
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 27 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 28
Object Hierarchy
Document Object Model
window
(DOM) history
frame links
Now that we know what a JavaScript object is location anchors button
and we know how to open a window, it is time to image checkbox
document
applets FileUpload
learn about the document object model. hidden
embeds
JavaScript includes predefined objects such as area password
window. These objects have predefined form reset
submit
properties and methods. Most of the tricks to make a web text
An object property can also be an object. page more dynamic use the document textarea
model and take advantage of the select
hierarchical model. option
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 29 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 30
Content
The Object Navigator I. JavaScript and the Details
Variable identifiers and their types
There are no methods associated but some attributes: The notion of objets
Arrays
<html> Control structures
<head><title>Version of the Navigator</title></head>
<body>
Condition and selection
<h1> Lets see what browser it is</h1> Iteration
<hr> Procedures and functions
<script language="javascript"> II. Event-Based Programming with JavaScript
document.write(The version of this browser is: " + navigator.appVersion);
document.write ("<br>The Browser is: <B>" + navigator.appName + "</B>"); What is an event?
document.write("<br>Its code name is: " + navigator.appCodeName); What are the recognized events?
document.write ("<br>The OS is: " + navigator.userAgent); Capturing events.
</script>
</body></html> III. Practical Examples
Data entry validation within a form;
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 35 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 36
Arrays Simple Example with Arrays
<HTML>
Variables can contain numbers, strings, and object <HEAD>
references. There is also another type of information <TITLE>test with arrays</TITLE>
<SCRIPT LANGUAGE="JavaScript">
that JavaScript can manipulate: Arrays. var colours=new Array("red","blue","green","white");
</SCRIPT>
</HEAD>
var products = new Array(car, truck, bike); <BODY>
product[0] car <a href="#" onClick="document.bgColor=colours[0];return true;">Colour1</a>
<BR>
product[1] truck
<a href="#" onClick="document.bgColor=colours[1];return true;">Colour2</a>
product[2] bike <BR>
product.length 3 <a href="#" onClick="document.bgColor=colours[2];return true;">Colour3</a>
<BR>
<a href="#" onClick="document.bgColor=colours[3];return true;">Colour4</a>
</BODY>
</HTML>
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 37 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 38
if (condition) {
instruction1;
if (condition) instruction;
instruction2;
if (condition) {
} else {
instruction1;
instructionA;
instruction2;
instructionB;
}
}
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 43 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 44
Nested Selections Logic Operators
We can also have many nested conditions
Conjunction:
And &&
example: (price>=200 && member==true)
if (condition1) {instructions1;} Disjunction
else if (condition2) {instructions2;} Or ||
else if (condition3) {instructions3;}
example: (age>26 || total==1000)
else if (condition4) {instructions4;}
. Negation
else {otherInstructions;} Not !
example: (!finale && !(numbre==50))
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 45 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 46
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 47 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 48
Example with Repetition
For Loop
<HTML>
<HEAD><TITLE>quiz</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var now = new Date();
var x = now.getSeconds();
var answer=prompt(guess the seconds"); for (init;condition;increment) instruction;
</SCRIPT></HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript">
while (answer!= x) { for (init;condition;increment) {
document.write(answer +"<br>"); instruction1;
if (x< answer) alert(Too big"); instruction2;
else alert(Too small");
answer =prompt(" guess the seconds ");
}
}
document.write("Bravo!");
</SCRIPT></BODY></HTML> for (i=0;i<20;i++) document.write(*);
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 49 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 50
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 55 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 56
There is a Problem
The button could be: The previous code could be put in different places
within the text.
<FORM>
Notice that if the minutes or the secondes are less
<INPUT TYPE="button" VALUE="time" onClick=" than 10, only one digit is displayed (0,1, 2, 3, 9)
var theDate=new Date(); and not two (00, 01, 02,09).
var hour=theDate.getHours();
var minutes=theDate.getMinutes();
Now we have to update the code wherever we
var secondes=theDate.getSeconds(); incerted it.
var theTime=hour + ':' + minutes + ':' + secondes; A better solution would be to write a subroutine
alert(theTime);"> that displays the time and call this same sub-
</FORM>
routine with all the buttons in the text.
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 57 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 58
Sub-routine without
Updating the sub-routine
Parameters
function announceTime() {
<SCRIPT LANGUAGE="JavaScript"> var theDate=new Date();
<! hide me var hour=theDate.getHours();
function announceTime() { var minutes=theDate.getMinutes();
var theDate=new Date(); if (minutes<10) minutes="0"+ minutes;
var hour=theDate.getHours(); var seconds=theDate.getSeconds();
var minutes=theDate.getMinutes(); if (seconds<10) seconds="0"+ seconds;
var seconds=theDate.getSeconds(); var theTime=heure + ':' + minutes + ':' + seconds;
var theTime=hour + ':' + minutes + ':' + seconds; alert(theTime);
alert(theTime); }
} <FORM>
// end hide --> <INPUT TYPE="button" VALUE="Time"
onClick="announceTime();"> The change is done once and all buttons are updated.
</SCRIPT> </FORM>
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 59 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 60
Sub-routine with parameters
Sub-routine with parameters
and return value
if (minutes<10) minutes="0"+ minutes;
arguments
if (secondes<10) seconds="0"+ seconds;
function correct(theNumber) {
Similar operations we could create a new function to var myValue;
do this same operation. if (theNumber<10) myValue="0"+theNumber;
else myValue=theNumber;
return myValue;
}
Returned value
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 61 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 62
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 63 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 64
Object - Array Index by Property
An array is indexed by an integer (0 to N).
Each object is made of an array of values and
properties. An array representing an object is also
indexed by object attribute.
Thus, we could write:
myHouse[0] = 8; Thus, we could write:
myHouse[1] = 1990; myHouse[rooms] = 8;
myHouse[2] = true; myHouse[year] = 1990;
myHouse[aGarage] = true;
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 65 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 66
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 67 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 68
Calling the Method Summary Part I
We saw the basics of JavaScript and we learned to
function displayHouse(){ write scripts and perhaps interpret scripts written by
document.write(House has + this.rooms + others.
rooms); We explored the concept of object with JavaScript and covered
if (this.aGarage) some predefined objects such as String, Date, Math, Window, etc., as
well as their properties and methods.
document.write( and a garage.); We discussed the document object model (DOM).
document.write(Built in + this.year); We saw how to create new objects and extend their properties and
} methods.
myHouse=new house(8,1990,true);
myHouse.display(); House has 8 rooms and a garage. Built in 1990
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 69 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 70
Content
I. JavaScript and the Details Interactive Application
Variable identifiers and their types
The notion of objets For an interactive application one needs the
Arrays possiblity to react to users actions.
Control structures We need to provide the user with means to enter
Condition and selection data, click on objects, select options, etc.
Iteration The application needs to capture the users actions
Procedures and functions and react to these actions.
II. Event-Based Programming with JavaScript Identify events and answer them.
What is an event?
What are the recognized events?
Capturing events.
III. Practical Examples
Data entry validation within a form;
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 71 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 72
Content
What is an Event? I. JavaScript and the Details
Variable identifiers and their types
The notion of objets
An event is a change in the environment due to some
Arrays
actions usually (but not always) made by the user. Control structures
These actions are pertaining to the mouse and Condition and selection
keyboard. Iteration
A change in the document or the objects in the Procedures and functions
document constitute events. II. Event-Based Programming with JavaScript
What is an event?
Example: moving or clicking the mouse, updating a What are the recognized events?
value in an entry field, etc. Capturing events.
III. Practical Examples
Data entry validation within a form;
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 73 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 74
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 75 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 76
The Event Targets
Other Events
The targets actually capture the events; these are objects from the
document object model (DOM). Objects dont capture the same
events. onError
onClick A HREF, BUTTON, CHECKBOX, RADIO,
RESET, SUBMIT
onAbort
onMouseOver A HREF These events are used with window and
onBlur PASSWORD, SELECT, TEXT, TEXTAREA
onFocus PASSWORD, SELECT, TEXT, TEXTAREA image and come from page or image loading
onSelect PASSWORD, TEXT, TEXTAREA interruptions (manual interruption, abort,
onChange PASSWORD, SELECT, TEXT, TEXTAREA
onSubmit FORM etc.).
onLoad BODY (window), IMAGE
onUnload BODY (window)
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 77 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 78
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 79 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 80
A living Clock Example of a Timer
<html><head><title>Timer</title>
We saw how to display the current time in a <SCRIPT LANGUAGE="JavaScript">
function myClock () {
previous example. var now = new Date();
var hour = now.getHours();
To have a clock, it suffices to contineously var minutes = now.getMinutes();
display the time at the same place. var seconds = now.getSeconds();
var timeResult = "" + hour+ ((minutes < 10)?":0":":")
We have to call the function to display the + minutes + ((seconds < 10)?":0":":") + seconds;
return timeResult;
time at regular intervals. }
<BODY onLoad="WhatTime()">
function WhatTime() {
Defining a timeout within the time display var theTime=myClock();
<FORM>
<INPUT TYPE=TEXT SIZE=8
function would do the trick. document.forms[0].clicking.value=theTime;
NAME=clicking">
setTimeout(WhatTime()',1000);
</FORM>
}
</BODY></html>
</SCRIPT></head>
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 81 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 82
Content
I. JavaScript and the Details Order of Execution
Variable identifiers and their types
The notion of objets In traditional programming, the order of execution is
Arrays
dictated by the order of instrctions in the code. The
Control structures
execution is instruction by instruction.
Condition and selection
Iteration With event-based programming, the order of execution
Procedures and functions depends upon the events.
II. Event-Based Programming with JavaScript When an event is intercepted, the corresponding
What is an event? instructions are executed.
What are the recognized events?
Capturing events.
III. Practical Examples
Data entry validation within a form;
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 87 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 88
Order of Execution (cont) Associating Functions with
Functions should be defined before they are Events
invoked. After defining a function, one must
Warning: An event could happen before the associate this function to the events we want
whole document is loaded. The user can indeed to capture.
use the mouse while only part of the page is
loaded and displayed. We use the keywords for these events
(event handlers) that we saw previously.
Before invoking a function we must make sure it
is defined.
<BODY onLoad=JavaScript instructions>
This is one reason why it is better to put the <FRAMESET onLoad=JavaScript instructions>
function definitions in <HEAD> window.onLoad=FonctionReference;
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 89 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 90
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 91 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 92
Common Events and window Common Events and link
onLoad invoked when the page is loaded. onClick invoked when a hyperlink is clicked.
onUnload invoked when the page is left. onMouseOver invoked when the mouse is over the
link.
HTML Syntax HTML Syntax
<BODY
<A
[BACKGROUND= imageURL] [BGCOLOR = color]
HREF = URL
[TEXT = color] [LINK = color] [ALINK = color] [VLINK = color]
[TARGET = target_window]
[onLoad = handler] [onUnload = handler] > [onClick = handler]
<FRAMESET [onMouseOver = handler] >
[ROWS=lines] [COLS=columns]
[onLoad=handler] [onUnload=handler]>
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 93 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 94
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 95 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 96
Common Events and checkbox Common Events and radio button
onClick invoked when the checkbox is clicked. onClick invoked when the radio button is
clicked.
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 97 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 98
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 101 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 102
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 103 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 104
Summary Part II Content
I. JavaScript and the Details
Variable identifiers and their types
The notion of objets
Arrays
We saw what is an event in JavaScript. Control structures
We saw how events are intercepted. Condition and selection
We enumerated the known events. Iteration
We saw the form elements and the associated events. Procedures and functions
We saw how to program with events and how the II. Event-Based Programming with JavaScript
execution is done. What is an event?
We illustrated the concepts with simple examples. What are the recognized events?
Capturing events.
III. Practical Examples
Data entry validation within a form;
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 105 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 106
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 113 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 114
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 115 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 116
Return True
Some useful References
What is "return true", "return false"?
This is what is used to actually allow, or stop the form from JavaScript with Netscape
submitting, respectively. This is how JavaScript controls the http://developer.netscape.com/docs/manuals/index.html?content=javascript.html
submitting of a form. By default, a form will return true. (Submit Jscript (Microsoft) http://msdn.microsoft.com/scripting/default.htm
the form).
Builder.com http://www.builder.com
This is a important point. For example, you can stop a link from
completing upon clicking. Designing with JavaScript http://www.webcoder.com/
<a href="normal.htm" onclick="return Ask the JavaScript Pro http://www.inquiry.com/techtips/js_pro/
false">Click here, it won't work!</a> WebMonkey http://hotwired.lycos.com/webmonkey/programming/javascript/
Yahoo
By returning false, we prohibit the action from completing! http://dir.yahoo.com/Computers_and_Internet/Programming_Languages/JavaScript/
Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 117 Dr. Osmar R. Zaane, 2001-2006 Web-based Information Systems University of Alberta 118