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 <!-- alert("Hello world"); //-->

W. W. Milner Using separate script files HelloWorld Some page content

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 = * 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; SymbolMeaning >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 function function 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 functions <!-- function greet() { alert("Loaded"); } //--> 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 navigatorscreendocumenthistorylocation form buttonform

W. W. Milner navigator alert(window.navigator.userAgent); the window the 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="

W. W. Milner document document.bgColor="yellow"; document.write("This is some bold text "); 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 Result:

W. W. Milner Event-handler for button 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 validation function 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;.. 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; } // --> Pic one Pic two

W. W. Milner Image roll-over <!-- function showPic(f) { document.pic.src=f; } // --> 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 <!-- 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; } // --> <body onLoad="preLoad()" onMouseOver="document.pic.src = image2.src" >

W. W. Milner Menus

W. W. Milner Styles for menus <!-- #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