1 / 44

JavaScript

JavaScript. Chapter 1 - Intro. Why use JavaScript? Interactivity LiveScript JavaScript Jscript ECMAScript JavaScript is not Java! Programming….. . Chapter 2. Do what it says on page 5. The first script. <SCRIPT TYPE="text/javascript" > <!-- alert("Hello world"); //--> </SCRIPT>.

sidney
Télécharger la présentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript W. W. Milner

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

  3. Chapter 2 • Do what it says on page 5 W. W. Milner

  4. The first script <SCRIPT TYPE="text/javascript" > <!-- alert("Hello world"); //--> </SCRIPT> W. W. Milner

  5. 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

  6. Chapter 3 • Variables – data values held in memory • Declaring variables • var price=2.50; W. W. Milner

  7. Input Entering data values at ‘run-time’ price = prompt("Enter the price", "10.00"); W. W. Milner

  8. 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

  9. Arithmetic • total = price * quantity; • result = 2 + 3; • result = 1 + 3 * 4; • result = (1 + 3) * 4; • result = 7 / 8; • Try page 12 W. W. Milner

  10. Data type • Number, date, currency, boolean… • String type = string of characters • Enclose in quotes – var myName; myName = “Walter Milner”; W. W. Milner

  11. String concatenation • A + joins strings string1 = “fat “; string2 = “cats”; alert(string1+string2); >> fat cats • What is "9" + "9"? W. W. Milner

  12. Changing string type to number • answer = "123.4"; • result = parseFloat(answer); W. W. Milner

  13. Symbol Meaning > greater than < less than >= greater than or equal to <= less than or equal to == equal != not equal if - the decision statement unitPrice = 1.30; if (quantity > 100) unitPrice = 1.20; Do task on page 14 W. W. Milner

  14. Repeating - loops var counter; for (counter=0; counter<4; counter++ ) alert(counter); Do task on page 15 W. W. Milner

  15. Chapter 3 - functions • Code structure - splitting code into parts • Function like mini-program • Data comes in, processed, result returned W. W. Milner

  16. Example function Values come in here function average(a,b,c) { var total; total = a+b+c; return total/3; } Value returned here W. W. Milner

  17. 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); function call x y z copied to a b c start W. W. Milner

  18. functions do the tasks page 17/18 W. W. Milner

  19. 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

  20. <!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

  21. Chapter 5 - The DOM • A way to refer to things in the window • objects • properties • methods • events W. W. Milner

  22. 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

  23. DOM hierarchy window navigator screen document history location form form button form W. W. Milner

  24. navigator • alert(window.navigator.userAgent); the useragent property of the navigator the navigator in the window the window W. W. Milner

  25. screen • readonly window.moveTo(0,0); x = screen.availWidth; y = screen.availHeight; window.resizeTo(x,y ); W. W. Milner

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

  27. document • document.bgColor="yellow"; • document.write("This is some <b>bold text</b>"); • Try the tasks on page 23 W. W. Milner

  28. Forms • CGI GET and POST and server-side processing • JavaScript client-side processing • Form data validation W. W. Milner

  29. 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

  30. 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

  31. Forms task • Try the task on page 27 W. W. Milner

  32. 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

  33. Form validation task • Try the task on page 29 W. W. Milner

  34. 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

  35. 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

  36. Timing - setTimeout make something happen (once) after a fixed delay interval = setTimeout('bang()', 5000); 5 seconds after this statement executes, this function is called clearInterval(interval); cancels this W. W. Milner

  37. 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

  38. Timing - tasks • Try page 33 W. W. Milner

  39. 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

  40. 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

  41. 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

  42. Menus W. W. Milner

  43. 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

  44. 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

More Related