W. W. Milner JavaScript. W. W. Milner Chapter 1 - Intro Why use JavaScript? Interactivity LiveScript JavaScript Jscript ECMAScript JavaScript is not Java!

W. W. Milner

JavaScript

W. W. Milner

Chapter 1 - Intro

• Why use JavaScript? Interactivity

• LiveScript JavaScript Jscript ECMAScript

• JavaScript is not Java!

• Programming…..

W. W. Milner

Chapter 2

• Do what it says on page 5

W. W. Milner

The first script

<SCRIPT TYPE="text/javascript" ></SCRIPT>

W. W. Milner

Using separate script files

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title> ----- 1 - HelloWorld ------- </title><SCRIPT SRC="hithere.js" TYPE="text/javascript"></head><body><p> Some page content </p></body></html>

W. W. Milner

Chapter 3

• Variables – data values held in memory

• Declaring variables

• var price=2.50;

W. W. Milner

Input

Entering data values at ‘run-time’

price = prompt("Enter the price", "10.00");

W. W. Milner

What’s wrong?

price = prompt "Enter the price", "10.00";

price = prompt("Enter the price", "10.00";

price = prompt("Enter the price", 10.00);

price = prompt( Enter the price", "10.00");

prompt("Enter the price", "10.00");

price = prompt("Enter the price", "10.00")

W. W. Milner

Arithmetic

• total = price * quantity;

• result = 2 + 3;

• result = 1 + 3 * 4;

• result = (1 + 3) * 4;

• result = 7 / 8;

• Try page 12

W. W. Milner

Data type

• Number, date, currency, boolean…

• String type = string of characters

• Enclose in quotes –var myName;

myName = “Walter Milner”;

W. W. Milner

String concatenation

• A + joins strings

string1 = “fat “;

string2 = “cats”;

alert(string1+string2); >> fat cats

• What is

"9" + "9"?

W. W. Milner

Changing string type to number

• answer = "123.4";

• result = parseFloat(answer);

W. W. Milner

if - the decision statement

unitPrice = 1.30;if (quantity > 100)

unitPrice = 1.20;

Symbol Meaning

> greater than

< less than

>= greater than or equal to

<= less than or equal to

== equal

!= not equal

Do task on page 14

W. W. Milner

Repeating - loops

var counter;for (counter=0; counter<4; counter++ )

alert(counter);

Do task on page 15

W. W. Milner

Chapter 3 - functions

• Code structure - splitting code into parts

• Function like mini-program

• Data comes in, processed, result returned

W. W. Milner

Example function

function average(a,b,c){

var total;total = a+b+c;return total/3;

}

Values come in here

Value returned here

W. W. Milner

Call and return of functionfunction average(a,b,c){

var total;total = a+b+c;return total/3;

}

..

x=4;y=3;z=2;answer=average(x,y,z);alert(answer);

start

function call

x y z copied to a b c

W. W. Milner

functions

do the tasks page 17/18

W. W. Milner

event-handling functions

• examples of events -

• key press, mouse move, mouse click, timer times out

• GUI programming = responding to user events

• event-handler = function called when an event happens

W. W. Milner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title> ----- 2 - functions ------- </title><SCRIPT TYPE="text/javascript" ></SCRIPT></head> <body onload="greet()" ></body></html>

The onLoad event

do task page 18/19

W. W. Milner

Chapter 5 - The DOM

• A way to refer to things in the window

• objects

• properties

• methods

• events

W. W. Milner

DOM example

var newWindow =window.open("","nw", "menubar, status, resizable");

newWindow.status ="Hello folks";

newWindow.resizeTo(400,200);• Do task top of page 21

W. W. Milner

DOM hierarchy

window

navigator screen document history location

form form

button form

W. W. Milner

navigator

• alert(window.navigator.userAgent);

the windowthe navigator in the window

the useragent property of the

navigator

W. W. Milner

screen

• readonly

window.moveTo(0,0);

x = screen.availWidth;

y = screen.availHeight;

window.resizeTo(x,y );

W. W. Milner

location

• location.href="http://www.yahoo.com/";

W. W. Milner

document

• document.bgColor="yellow";• document.write("This is some <b>bold text</b>");

• Try the tasks on page 23

W. W. Milner

Forms

• CGI GET and POST and server-side processing

• JavaScript client-side processing

• Form data validation

W. W. Milner

Form example

<form name="myform" method="post" action="" > <input type="text" name="num1"> <input type="text" name="num2"> <br> <input type="button" name="Button" value="+" > <br> Result:<input type="text" name="result"></form>

W. W. Milner

Event-handler for button

<input type="button" name="Button" value="+" onClick="doAdd()">

function doAdd(){var number1, number2, result;number1=parseFloat(myform.num1.value);number2=parseFloat(myform.num2.value);result = number1+number2;myform.result.value=result;}

W. W. Milner

Forms task

• Try the task on page 27

W. W. Milner

Form data validationfunction checkForm(){var OK=true;if (document.form1.forename.value=="")

{alert("Please type in your forename");

document.getElementById("fNamePrompt").style.color="red";OK=false;}

if (document.form1.surname.value==""){alert("Please type in your surname");

document.getElementById("sNamePrompt").style.color="red";OK=false;}

if (OK){// submit form here}

}

W. W. Milner

Form validation task

• Try the task on page 29

W. W. Milner

Chapter 7 - The Math object

function rollDice(){var x = Math.random();x = 6*x;x = Math.floor(x);x=x+1;alert(x);} Task on page 31

W. W. Milner

Date object

var now = new Date();

var result="It is now "+now;document.getElementById("timeField").innerText=result;

..

<p id="timeField"> </p>

• hours = now.getHours();

• Task on page 32

W. W. Milner

Timing - setTimeout

interval = setTimeout('bang()', 5000);

5 seconds after this statement executes, this function is called

make something happen (once) after a fixed delay

clearInterval(interval);

cancels this

W. W. Milner

setInterval

makes something happen repeatedly at fixed intervals

interval = setInterval('ticktock()', 1000);

this function is called every second after this

clearInterval(interval);

stops it

W. W. Milner

Timing - tasks

• Try page 33

W. W. Milner

Chapter 8 - Standard tricks - rollovers

..function showPic(f){document.pic.src=f;}// --></SCRIPT> </head> <body ><p onMouseOver="showPic('pic1.gif')"> Pic one </p><p onMouseOver="showPic('pic2.gif')"> Pic two</p><img name = "pic" src="default.gif"></body></html>

W. W. Milner

Image roll-over<SCRIPT TYPE="text/javascript"></SCRIPT> </head> <body ><img name = "pic" src="default.gif" onMouseOver="showPic('pic1.gif')" onMouseOut="showPic('pic2.gif')" ></body>

Task - try this out - produce a page showing an image, which changes to a second image when the mouse goes over it, and a third image when the mouse leaves it. Get images from the Web or draw them using the graphics software on the computer

W. W. Milner

Pre-loading images

<SCRIPT TYPE="text/javascript"></SCRIPT></head><body onLoad="preLoad()" onMouseOver="document.pic.src = image2.src" ><img name = "pic" ></body></html>

W. W. Milner

Menus

W. W. Milner

Styles for menus

<style type="text/css">

W. W. Milner

JavaScript for the menus

function mouseMethod(leftPos, whichID){ /* when they click on a menu item *//* change from display none to display block - can see it */document.getElementById(whichID).style.display = "block";/* make it correct position across screen */document.getElementById(whichID).style.left = leftPos;}

function hideAgain(whichID){ /* when they click hide, revert to display none */document.getElementById(whichID).style.display = "none";}

Task - Try this out. Add a third block

W. W. Milner JavaScript. W. W. Milner Chapter 1 - Intro Why use JavaScript? Interactivity LiveScript JavaScript Jscript ECMAScript JavaScript is not Java!

Documents

milner javascript slide

use javascript

milner chapter