w. w. milner javascript. w. w. milner chapter 1 - intro why use javascript? interactivity livescript...
TRANSCRIPT
W. W. Milner
Chapter 1 - Intro
• Why use JavaScript? Interactivity
• LiveScript JavaScript Jscript ECMAScript
• JavaScript is not Java!
• Programming…..
W. W. Milner
The first script
<SCRIPT TYPE="text/javascript" ><!--alert("Hello world");//--></SCRIPT>
W. W. Milner
Using separate script files
<!-- This shows a first piece of JavaScript --><!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
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
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
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" ><!--function greet()
{alert("Loaded");}
//--></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
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
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
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
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
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"><!--function showPic(f){document.pic.src=f;}// --></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"><!--var image1, image2, image3; function preLoad(){image1 = new Image(30,30);image2 = new Image(30,30);image3 = new Image(30,30);image1.src="default.gif";image2.src="pic1.gif";image3.src="pic2.gif";document.pic.src = image1.src;}// --></SCRIPT></head><body onLoad="preLoad()" onMouseOver="document.pic.src = image2.src" ><img name = "pic" ></body></html>
W. W. Milner
Styles for menus
<style type="text/css"><!--#ID1, #ID2 { /* initial settings of the two menu blocks */
font-family: Geneva, Arial, Helvetica, san-serif;font-size: 12px;color: #FFFFFF ;display : none; /* <<<< so you cant see them */background-color= #ffff00;position: absolute;top: 40px;width: 55px;border: thin solid black}
..-->
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