1 week 10 a world wind tour of javascript javascript

1

Week 10A World Wind Tour of JavaScript

JavaScript

2

Objectives World wind tour of JavaScript

» JavaScript: Its Beginnings– Advantages and disadvantages– How differs from PHP

» Working with JS and HTML tags. » Running onload, when done, on an event» Using JS objects» Objects and forms (validating)» Rollovers

3

JavaScript: Its Beginnings JavaScript developed by Netscape & initially called livescript. After Java came out, Netscape cut a deal with Sun to rename

it to JavaScript (12/95). » They are separate, distinct languages. (Though JavaScript is simpler).

Microsoft … » Came out with their own flavor of JavaScript called “Jscript”.» They also added support for VBScript in IE. Differences are minor.

Eventually standardized … » JavaScript has been turned over to the European Computer

Manufactures Association, and is now officially called ECMAScript» Both Netscape & IE4.0 and Netscape implement ECMAScript

standard.

4

The “goods” on JavaScript

JavaScript can be used to: 1. perform simple client-side computations

For example, add up total costs of shopping cart before it is submitted.

2. facilitate dynamic and interactive Web page creation For example, do image roll overs, pop up windows

on click, expand a menu.3. Verify HTML forms enhance HTML forms with data

collections and form validation 4. manipulate user cookies -

5

The “not so goods” on JavaScript

JavaScript runs completely on Client machine It does NOT have:

1. Any graphic capabilities E.g., cannot show a graph of survey results.

2. Access to client (you PC) resources Cannot print, modifying PC files, or launching client

applications.3. Access to any Web server resources

E.g., cannot send email, write to file, write to database.

6

PHP/JavaScript Similarities and Differences

What they have in common. Both languages can:1. Be embedded in HTML documents2. Cause dynamic content to be displayed (e.g., the current date)3. Can be placed in external files and “included” into html files4. Look more like a programming language than HTML

What they DON’T have in common: 1. The big difference … JavaScript runs 100% on client (i.e., PC). This

means:A. JavaScript stuff runs noticeably faster

(not dependent on Internet and Web Server)B. PHP has access to Web Server resources (mail, databases, files)

2. Using differencesA. Writing JavaScript does NOT require a Web Server (but more

concern about browser implementation differences).B. PHP’s syntax is easier to write and understand for beginners.

7

How PHP Pages are Run

2. Send Request for PHP file

6. Return Results

Please EnterAPhoneNumber

Submit Erase

1. Web Browser

Web Browser

Phone QueryResults:

That isJohn Doe'sPhoneNumber

7. Web Browser

Your PC(Internet connected)

WebServer(Internet connected)

Web ServerSoftware

3. Receiverequest, find

file and read it.

4. ExecutePHP

statements

5. Sendresultsback.

JavaScript does not run here

JavaScript is run here by the browser but just before HTML

8




9

Adding JavaScript to HTML pages

JavaScript is added to HTML pages using the <script> tag.• usually placed in the HEAD or BODY of the document

<script src=URL language=“JavaScript”></script>

<script language=“JavaScript”></script>

If link to an external file (use .js suffix)

If embed JS within HTML

10

A Simple example<HTML>

<HEAD> <TITLE> A Beginning Script </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> document.write ("Welcome to the wonderful world of JavaScript"); </SCRIPT> </BODY> </HTML>

It’s a little like PHP. These statements are run before HTML document interpreted by browser

http://condor.depaul.edu/~dlash/extra/javascript/startingout.htm

11

Where do you put it?

•Can add JavaScript to head or body of html document

•Functions are usually added to the head section • assures that the functions OK (parsed) by the time they are called.

•Non-functions usually put in body • then can call and functions in head

12




13

When does it run?

• It can run•as the page loads•as soon as the page is finished loading•in response to user input (remember the form button?)

14

<HTML><HEAD><TITLE>Document Object</TITLE></HEAD><BODY bgColor=#ccccff><CENTER><H2>Document Object </H2><SCRIPT language=JavaScript> document.writeln("This page was last modified on” + document.lastModified);</SCRIPT></CENTER></BODY></HTML>

JavaScript that Runs as Page Loads

Enter JavaScript. Within thehtml body (in this case)

Normal HTML code

document.write like print. Get lastModified browser vrbl. . The + is catenation.

Calls function to get current date and output date

http://condnor.depaul.edu/~dlash/extra/javascript/lastmodifiedworks.htm

15

JavaScript output (onload) is HTML

input … . The output of JavaScript statements is taken as HTML input...

<HTML> <HEAD> <TITLE> A Beginning Script </TITLE> </HEAD> <BODY>

<SCRIPT language=JavaScript> document.write ("<FONT Size=4>JavaScript commands are

interpreted first</FONT>"); document.write ("<BR> <FONT COLOR=BLUE>JS output often

generates HTML</FONT>");</SCRIPT></BODY></HTML>

</HTML>http://condor.depaul.edu/~dlash/extra/javascript/secondjs.htm

16

<html> <head> <title> Java Example 2 </title> </head> <body onload=waitLittle()><font size=4 color=blue> welcome to my page </font><br>Here is my stuff<br> <br>

<script language="JavaScript">function waitLittle(){ setTimeout( "alertMe()", 5000 );}function alertMe(){ alert('test');}</script>This is some text over here.<img src="../donald.gif"></body> </html>

http://condor.depaul.edu/~dlash/javascript//javascript2.html

JavaScript that Runs when Loading Complete

Execute this function call after 5000 miliseconds

Create a pop-up box with test as text

17

JavaScript that Runs in Response to User Input

<html><head><script language="JavaScript"></script></head><body style="background-color: #fffff0;"><form name="getDate"><input type="button" name="getTime" onClick="showTime()" value="Show Current Time" /><input type="text" name="curTime" size="40" onClick="alertme()"/></form>

http://nwswww.ih.lucent.com/~dlash/perlcourse/javascript/javascript3.htm

When click call showtime

Set the value of the form variable curTime to the current time

If they click generate an alert

18

Dealing with Browsers that don’t Support JavaScript

You may have noticed something a little strange about the examples so far.

<script language=“JavaScript”>

</script>

This makes the script invisible to browsers that don’t support JavaScript by“commenting it out”. In addition, you can provide some page contentthat only displays when the browser DOESN’T handle JavaScript:

<noscript>Your browser doesn’t support Javascript

</noscript>

The only limitation with this is that this will NOT be displayed by NS if the userhas JavaScript just disabled.

19

Some Important Aspects of JavaScript

• Case Sensitive: Variable names, functions you use - (e.g., Date not date )

•Space Insensitive - generally ignored, except in strings•Statements end in semicolon – Except JS will assume you meant to semicolon at the end of the line if the statement appears to be complete.

20




21

JavaScript And Objects ... JavaScript is object-oriented (Just a thing you

can access) Objects have

» properties - are variables or other objects describing the object.

– (like document.lastmodified). – In general these are accessed by

ObjectName.ProperyName

» methods - behaviors or built-in functions you use» accessed my ObjectName.MethodName()

document.lastmodified

Object name Property of object

22

Using JavaScript Objects …

Lots of useful properties available g Here are some properties for window object:

» document.lastModified – (read-only property) gives the document last changed date

» document.URL - (read-only property) gives the URL of the document source code file.

» window.referrer – (read-only property) gives the URL of the calling document. (It is an empty string, if user does not reach the URL by clicking a link.

» window.title – (read-only property) gives the value in the <TITLE> ... </TITLE> tag.

23

Printing out one of theseCan use the plus sign (+) to attach

string output with

propert output

document.write("last modified:”

+ document.lastModified +

"<P>");

Print out this string

Attach to the string this property

Attach to the entire string this html tag

Write the following out.

24

For example <HTML>

<HEAD> <TITLE>Document Information Properties</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> document.write("Referring link was:”

+ document.referrer) + "<BR>") document.write("Document URL is:“ + document.URL +"<BR>") document.write("The title is: " + document.title +"<BR>") document. write("last modified:”

+ document.lastModified + "</P>") </SCRIPT> <HR> This is my web site. It is my Web Site all by myself. </BODY> </HTML>

http://condor.depaul.edu/~dlash/extra/javascript/DocumentInformationProperties.htm

25

The Math Object

An example JavaScript object.

Math.abs(number)Math.sin(number)Math.cos(number)Math.round(number)Math.ceil(number)Math.floor(number)Math.log(number) Math.sqrt(number)Math.random(number)

absolute valuesine of an angle (expressed in radians)cosine of an angle (expressed in radians)closest integer valuerounds up to next integer valuerounds down to next integer valuenatural log of the numbersquare root of the numberreturns a floating point number

that is >= 0.0 but < 1.0

Other methods include:tangent, arc tangent, arc sine, arc cosine, tangent, power, angle of polar

coordinates, maximum, and minimum. Also has constant definitions for values like pi and e (natural log base).

26

The Date Object

The Date object to access time and date information. Unlike the Math object, need to create a Date object first:

var dateObj = new Date();

You can specify the data/time when you create the object.

xmasObj = new Date(“December, 25, 2002”);

Can print out current date via: document.write ( new Date().toLocaleString());

Creates new date object

27




28

Document objects

Getting access to page contents requires document object.

Everything on the page is associated with an object. Some of these objects contain other objects. The object hierarchy is:

window

frame

navigator

history

location

document

link

anchor

form

element

29

JavaScript is Event Driven Event-driven: When “event” occurs then take some action.

JavaScript supports several events such as:

– onLoad– onUnload– onFocus– onBlur– onMouseOver– onMouseOut– onChange– onSelect

<td><input type="text" name="total" OnClick="genAlert()"></td>

When click this form element then do this JavaScript function

30

Example of Events and Forms

•Consider the following Form with 3 text boxes.•Onclick either first 2 text fields adds them up. •If click last on create a pop-up

First num

Second num

Total

http://condor.depaul.edu/~dlash/extra/javascript/myform.htm

31

Document objects (cont.)

<html><head> <title> my form </title> </head> <body> <script src="total.js" language="javascript" type="TEXT/JAVASCRIPT"> </script>

<form name="totals"><table> <tr> <td>Value1</td> <td><input type="text" name="first" value=0 onClick="calcTotals()"></td> </tr> <tr> <td>Value2:</td> <td><input type="text" name="second" value=0 OnClick="calcTotals()"></td> </tr> <tr> <td>Total:</td> <td><input type="text" name="total" OnClick="genAlert()"></td> </tr> </tr></table></form></body> </html>

Uses an external javascript file.

Form named totals

Text box names first, second, total

onClick call genAlert() function

onClick call calcTotals() function

32

Document objects (cont.)

The following would be in the file total.js:

function genAlert() { message="Error: Do not change total score value. It will be filled in by theWeb Application"; alert( message );}

function calcTotals() { f=document.totals;

f.total.value = parseInt(f.first.value) + parseInt(f.second.value);}

It would be useful to check if valid number but it works for what it does.

Add the form element called “first” with the element called “second”

Call form document.totals “f”

33

A simple variation .. <html><head> <title> my form </title> </head><body onLoad="calcTotals()" > <script src="total.js" language="javascript" type="TEXT/JAVASCRIPT"> </script><form name="totals"><table> <tr> <td>Value1</td> <td><input type="text" name="first" value=3 onClick="calcTotals()"></td> </tr> <tr> <td>Value2:</td> <td><input type="text" name="second" value=4 OnClick="calcTotals()"></td> </tr> <tr> <td>Total:</td> <td><input type="text" name="total" OnClick="genAlert()"></td> </tr> </tr></table><input type="button" name="submit" value="submit" onClick="calcTotals()" /></form></body> </html>

Call calcTotal() onload.

Call give initial values to textboxes.

Not a submit button but when hit button call calctotals also.

http://condor.depaul.edu/~dlash/extra/javascript/myform2.htm

34

Form Validation

To validate forms need control onSubmit of form

window.document.forms["inputValues"].submit();

To block submission of a form when the submit button is clicked, we definethe onsubmit event for the form:

onsubmit=“return checkitout();” a value of false will stop submit

35

Form Validation (cont.)

Example,

<form name="inputValues” method=“post” action=“URL”,onsubmit=“return inputValid();” >

We would then define the function:

function inputValid(){

if (everthingIsOk)return true;

elsereturn false;

}

36

Example using onSubmit()

<html><head> <title> my form </title> </head><body onLoad="calcTotals()" >

<script src="total2.js" language="javascript" type="TEXT/JAVASCRIPT">

<form name="totals" method="post" action="savevalues.php" onSubmit="return inputValid();" ><table> <tr> <td>Value1</td> <td><input type="text" name="first" value=3 onClick="calcTotals()"></td> </tr> <tr> <td>Value2:</td> <td><input type="text" name="second" value=4 OnClick="calcTotals()"></td> </tr> <tr> <td>Total:</td> <td><input type="text" name="total" OnClick="genAlert()"></td> </tr> </tr></table><input type="submit" value="submit" /></form></body> </html>

Action setonSubmit set

Changed to submit button type.


37

Example using onSubmit() – total2.js

function genAlert() { message="Error: Do not change total score value. It will be filled in by theWeb Application"; alert( message );}

function calcTotals() { f=document.totals; f.total.value = parseInt(f.first.value) + parseInt(f.second.value);}function inputValid() { f=document.totals; calcTotals(); if ( parseInt(f.total.value) > 50 ) { return true; } else { alert("Please Continute until hit 50"); return false; }}

New function checks if total > 50.

Re-calculate totals

38

Accessing Other Form Elements

Can access and validate things like:

• select (including ones with the MULTIPLE attribute)• password (the real value, not the line of asterisks)• radio buttons• checkboxes• textarea• hidden fields

Getting these is beyond scope of class but can give an example …

39

Example Getting Radio and select buttons

<html><head> <title> my form </title> </head><body onLoad="calcTotals()" > <script src="total4.js" language="javascript" type="TEXT/JAVASCRIPT"> </script>

<form name="survey1"><table> <tr> <td>Pick a button</td> <td><input type="radio" name="first" value=1> One <input type="radio" name="first" value=2> Two <input type="radio" name="first" value=3> Three </td> </tr> <tr> <td>Select an Option:</td> <td> <select name="second" > <option value=1> One </option> <option value=2 selected> Two </option> <option value=3> Three </option> </select> </tr> <tr> <td>Total:</td> <td><input type="text" name="total" OnClick="genAlert()"></td> </tr> </tr></table><input type="button" name="submit" value="submit" onClick="calcTotals()" /></form></body> </html>


40

Example Getting Radio and select buttons

function genAlert() { message="Error: Do not change total score value. It will be filled in by the Web Application"; alert( message );}

function get_radio_value( form, button ) { var RadioButton = document[form][button]; for (i=0; i<RadioButton.length; i++ ){ if (RadioButton[i].checked){ return RadioButton[i].value; } } return 0;}function getSelectValue( formname, selectname ){ var theMenu = document[formname][selectname]; var selectedItem = theMenu.selectedIndex; if ( selectedItem == -1 ) { return 0; } else { return theMenu.options[selectedItem].value; }}

function calcTotals() { f=document.survey1; f.total.value=0;

radio1 = get_radio_value("survey1", "first" ); select1 = getSelectValue( "survey1", "second" ); f.total.value=(parseInt(radio1)+parseInt(select1));}

For each radio button in the group

If it is checked then return its value

41

Accessing Other Form Elements (cont.)

But reading the form elements is not the only thing you can do. You can alsoalter them:

var formObj = window.document.forms["sample"]formObj.elements["textBox"].value = "Random Text";formObj.elements["passwrd"].value = "rosebud";formObj.elements["checkbox4"][1].checked = true;formObj.elements["checkbox4"][0].checked = false;formObj.elements["checkbox1"].value = "Citizen_Kane"formObj.elements["checkbox1"].checked = true;formObj.elements["checkbox2"].checked = false;formObj.elements["checkbox3"].checked = false;formObj.elements["radio1"][3].checked = true;formObj.elements["select1"].selectedIndex = 2;formObj.elements["select1"].options[2].text = "Gioachino Rossini";formObj.elements["select1"].options[2].value = "Rossini";formObj.elements["select2"].options[4].text = "William Tell";formObj.elements["select2"].options[4].value = "WillTell";formObj.elements["select2"].options[4].selected = true;formObj.elements["select2"].options[2].selected = true;formObj.elements["select2"].options[1].selected = false;

42

One More Examplehtml><head> <title> my form </title> </head>

<body>

<script src="total_regexpr.js" language="javascript" type="TEXT/JAVASCRIPT">

</script>

<form name="totals" method="post" action="savevalues2.php" onSubmit="return inputValid();" >

<table>

<tr>

<td>Enter Soc Security</td>

<td><input type="text" name="soc"></td>

</table>

<input type="submit" value="submit">

</form>

</body> </html>

43

One More Example (Cont.)

function inputValid() {

f=document.totals;

inSoc = (f.soc.value);

social = /^(\d{9}|\d{3}-\d{2}-\d{4})$/;

var matchIndex = inSoc.search(social);

if ( matchIndex >= 0 ) {

return true;

} else {

alert("Please enter 9 digits");

alert(matchIndex);

return false;

}

}

http://condor.depaul.edu/~dlash/extra/javascript/

44




45

Creating Rollovers You can create a “crude” rollover mechanism

by changing src properities of a file. Not the way best way to do this (since will not

be downloaded until you mouse over the image.)

http://condor.depaul.edu/~dlash/extra/javascript/RolloverBeethoven.htm

46

The Source <html><head><title>Rollover Beethoven</title></head><body bgcolor="white"><div align="center"><h1>Rollover Beethoven</h1><a href="#" onmouseover=

"document['beethoven'].src=‘RolloverBeethoven_files/beethovenon.jpg';" onmouseout= "document['beethoven'].src='RolloverBeethoven_files/beethovenoff.jpg';"> <img src="RolloverBeethoven_files/beethovenoff.jpg" width="250" height="70" name="beethoven"border="0" alt="Picture of Beethoven"></a>

</div></body></html>

The <a> tag responds to mouseover and mouseout events. It is set to “null” value.

Set the image src= property

The default image

Border=”0” prevents image border from appearing.

47

One more thing … debug

If type javascript: In netscape only will create debug console: http://condor.depaul.edu/~dlash/extra/javascript/lastmod_error.htm

48

Summary World wind tour of JavaScript



49

Overall Summary We have looked at many things:

– HTML – Great for static text, images, forms Links, font tags, lists, tables, forms, frames.

– Design – Think through how site looks Talk with site owner Consistent navigation Graphic design use photo editing software

– CSS – Allows greater control of text, > 1 developers, common format

– PHP – Create dynamic content, run on WebServer, receive form input

– JavaScript – Run on browser, validate forms, roll overs, pop ups, menu elements.

50

Overall Summary A “real” Site might include all of these:

» Html – to display content.» Design – photo-editor» CSS – to control look and feel» PHP – to send email, save to database» JavaScript –to validate forms, control certain elements

A “real” web developer would have much more experience with: » PHP (or some other script) – Databases, other things» JavaScript – » Frontpage type of software –

Hopefully you found information valuable and help take some of the magic out of Websites and website design

1 week 10 a world wind tour of javascript javascript

Documents