1. 1 JavaScript csc667/867 Spring 2006 Ilmi Yoon

2. 2 Outline Basics of JavaScript, History Basics of the language variables, types, arrays, objects, and functions operators, expressions, strings, and statements Some simple examples JavaScript Full Reference at http://wp.netscape.com/eng/mozilla/3.0/h andbook/javascript/ http://wp.netscape.com/eng/mozilla/3.0/h andbook/javascript/

3. 3 What is JavaScript JavaScript is a “simple”, interpreted, programming language with elementary object- oriented capabilities JavaScript has two distinct but overlapping systems –client-side JavaScript runs on Web browsers –server-side JavaScript runs on Web servers Syntactically JavaScript resembles C, C++, Java JavaScript was developed by Netscape (formerly called LiveScript)

4. 4 What JavaScript Programs Can Do Write programs to perform any computation; it is equivalent in power to a general purpose programming language Control Web page appearance and content (this is its intended use) Control the Web browser, open windows and frames Interact with document content Retrieve and manipulate all hyperlinks Interact with the user Read/write client state with cookies

5. 5 Short History of JavaScript Released in 1996 with Netscape 2 Originally called LiveScript MS releases Jscript with IE 3.0 –Unreliable and buggy 1997 dHTML is born with Version 4.0 browsers. Web Programmers strike it rich.

6. 6 Short History of JavaScript 1999 begin to see versions of W3C Dom guidelines implemented in versions of JavaScript and Jscript Netscape and Open Source Community drop old Netscape core to develop first browser to meet W3C DOM guidelines Most new browsers now support W3C Dom

7. 7 Common Uses of JavaScript Client Side –Image Rollovers (most common) –Form Validation http://www.papiowines.com/contactus.asp http://www.papiowines.com/contactus.asp –Dynamic Form Generation http://www.robertmondavi.com/Wheretobuy/ http://www.robertmondavi.com/Wheretobuy/ –DHTML http://www.bart.gov http://www.bart.gov –Browser Detection Server-Side

8. 8 Dynamic HTML An integration of JavaScript, Cascading Style Sheets, and the Document Object Model. –Most common type is drop down menus –Created by accessing an html elements style sheet and changing its visibility

9. 9 What is DOM? Document Object Model (DOM) –“The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.” – from w3c.org

10. 10 Debugging your script Most common way –alert(); Better way –Use Firefox, Netscape type javascript: in the location bar and you will go to JavaScript console Real Debugging –Go to Microsoft and download script debugger. User Beware….

11. 11 Adding JavaScript to HTML Inline External File

12. 12 JavaScript is Embedded in HTML //the Javascript here produces content for the BODY on loading Deferred Script //the Javascript here creates functions for later use

13. 13 JavaScript Object Hierarchy self, window, parent, top plugins[ ] navigator mimetypes[ ] frames[ ] locationforms[ ]elements[ ] Current Windowhistoryanchors[ ]buttons checkboxes documentlinks[ ]fileUpload hidden packagesimages[ ]password radio applets[ ]reset select options embeds[ ]submit Java packagestext JavaClass objectstextarea

14. 14 JavaScript Built-in Objects and HTML Tags ObjectHTML TagObjectHTML Tag windowN/Abutton<INPUT TYPE=”button” frame checkbox<INPUT TYPE=”checkbox” historyN/Ahidden<INPUT TYPE=”hidden” locationN/Apassword<INPUT TYPE=”password” document radio<INPUT TYPE=”radio” form reset<INPUT TYPE=”reset” select submit<INPUT TYPE=”submit” textarea text<INPUT TYPE=”text” link anchor navigatorN/A

15. 15 Key Objects Document object is responsible for all content on a page contains all the user interface elements of a page Window object represents a browser window or frame. This is the top-level object for each document,Location, and History object group. Frame object Location object History object Form objects can contain user interface elements for user input Button objects include a button, submit and reset buttons

16. 16 JavaScript - The Basics JavaScript is case-sensitive sum, SUM and Sum are 3 different identifiers –HTML is NOT case-sensitive JavaScript ignores spaces, tabs, newlines Semicolon is optional –but multiple statements on a line require a semicolon i = 1; j = 2 C and C++ style comments are supported //comment to end of line /* this can be a multiple line comment */

17. 17 JavaScript Literals Literals –numbers, strings, true, false, null All numbers are treated as floating point base10[-](1-9)(0-9)* base8[-]0(0-7)* base16[-]0(x|X)(0-9|a-f|A-F)* float[(+|-)][digits][.digits][(E|e)[(+|-)]digits] There are special numerical constants Number.MAX_VALUE, Number.MIN_VALUE, Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY

18. 18 String Literals Any sequence of zero or more characters enclosed within single or double quotes Examples –‘a single quoted string’ –“a double quoted string” –“” –“alert(‘Please Click OK’)”

19. 19 JavaScript Data Types TypeExampleDescription String“a string”a series of characters inside quote marks Number 123.45Any number not inside quote marks Boolean truea logical true and false Null nullcompletely devoid of any value, not a number, not a string, different than 0in C/C++ Objectall properties and methods belonging to the object Functiona function

20. 20 JavaScript Arrays and Objects Arrays –one dimensional, indexed from zero –array elements can contain any type of data including references to other arrays, to objects, to functions –array elements can have different types Objects –a collection of data where each item has a name –e.g. document has a property images array whose elements have properties width and height, e.g. document.images[i].width

21. 21 Arrays Elements are normally accessed using [] arr[0] = 1; arr[arr[0]] = 2; Arrays in JavaScript are sparse arr[0] = 1; arr[10000] = “a string”; only 2 indices are allocated Arbitrary expressions are permitted in [] frames[i*j+12] document.frames[i].elements[j++] Even expressions that evaluate to a string document[“lastModified”]

22. 22 Array and Objects Objects and arrays are really identical typeof(array) = typeof(object) = object typeof() returns a string which is the type of its argument (“number”, “string”, “boolean, “object”, “function”, “undefined”) Object elements are accessed using dot (.) An object/array on the left requires a field name on the right of dot document.lastModified frames[0].length The dot operator can be used with arrays arr[1] is identical to arr.1 but if i = 1, arr[1] is not equivalent to arr.i since property names are not evaluated

23. 23 Variables and Data Types JavaScript is a loosely typed language –Data types are converted during execution as needed –Data typing only matters during operations “6” + “67” = “667” String 6 + 67 = 73

24. 24 Variables and Data Types Numbers –Integer and floating-point numbers. Booleans –True or false. Can not use as 1 or 0 but 0 = false; Strings –Anything surrounded by “” or ‘’ ex. “My String” = ‘My String’ Object –myObj = new Object(); Null –Not the same as zero - no value at all. Undefined –The Variable has been created but no value has been assigned to it

25. 25 Scope Is the following code valid? for(var i = 0; i < 10;i++){ document.write(i); } alert(i);

26. 26 Scope Is the following code valid? for(var i = 0; i < 10;i++){ document.write(i); } alert(i); YES! Scopes only happens within functions

27. 27 Scope var myInt = 0 //Global Var function foo(){ var i = 10; //local variable myInt += i; } document.write(i); //will cause error

28. 28 Operators Arithmetic (the usual suspects) –+,-,*,/,%,--,++ Comparison –==, !=, >, >=, <, <= Boolean –&&, ||, !

29. 29 Statements Conditionals –if(x < 0){ alert(“x is negative”); }else{ alert(“x is positive”); } –switch(favoriteProf){ case “Yoon”: statements; break; case “Lank”: statements; break; default: statement; }

30. 30 Statements Loops –for(var i =0; i < myArray.length;i++){ document.write(i); } –do { statements;} while (condition) –while(condition){ statements; }

31. 31 Functions The function definition is a statement which describes the function: its name, any values (known as "arguments") which it accepts incoming, and the statements of which the function is comprised. –function funcName(argument1,argument2,etc) { statements; }

32. 32 Functions Example: function foo(myString){ document.write(myString); } foo(“Computers are fun”); foo(); //will this work?

33. 33 Functions When calling functions, JavaScript will try to match the function with same number of arguments Previous example would work but the argument myString would be undefined.

34. 34 JavaScript Objects To declare an object var myObj = new Object(); To set properties myObj.name = “blah” Setting methods myObj.foo = foo;

35. 35 JavaScript Objects Prototype an object function petDog(name,breed,year){ this.name = name; this.breed = breed; this.year = year; } var myDog = new petDog(“rusty”,”mutt”,1990);

36. 36 Date: Browser Output

37. 37 Using alert(), confirm(), and prompt() Example of alert, confirm, prompt function alertUser() { alert("An alert box contains an exclamation mark");} function confirmUser() { var msg = "\n please confirm that you want\n" + "to test another button?"; if (confirm(msg)) document.write(" You selected OK "); else document.write(" You selected Cancel "); } function promptUser() { name1=prompt("What is your name?”, “ “); document.write(" welcome to this page " + name1 + " "); }

38. 38 Using alert(), confirm(), and prompt() welcome to this page

39. 39 Clicking on alert()

40. 40 Clicking on confirm()

41. 41 Clicking on prompt()

42. 42 Simple Examples Swap Images –Steps Preload images On mouse over event swap the image On mouse out event restore the image

43. 43 Examples (continued) Preload images –if(document.images){ menu1img = new Image(); menu1img.src = '/images/nav1_stations.gif'; menu1imgOn = new Image(); menu1imgOn.src = '/images/nav1_stations_on.gif'; } Swap Image function –function swapImage(imageName, newImage){ if(document.images[imageName]){ document.images[imageName].src = newImage.src; } } The Html –

44. 44 Form Validation Create function to run on form’s onSubmit event

45. 45 Form Validation (continued) function checkForm(theForm){ if(theForm["firstName"].value == ""){ alert("You must enter your first name"); theForm["firstName"].focus(); return false; } return true; }

46. 46 Other ways to access a form –document.forms[0].elements[0] gets the first form and first element of the form –document.forms[“formName”].elements[“eleme ntName”]

47. 47 Supporting IE and NS IE and NS do not support the same JavaScript language –they include similar/identical capabilities, but the way to invoke them is different We must write JavaScript that works across both browsers –if a client gets a JavaScript error it is annoying and there is nothing viewers can do

48. 48 Multi-browser support The JavaScript /* * Determine what code to use */ if( document.all ){ this.init = IE_init; }else if ( document.layers ) { this.init = NN_init; }else if (document.getElementById) { this.init = std_init; }

49. 49 Multi-browser support (IE) The JavaScript /* * Init functions */ function IE_init(){ this.SwapImageOn = std_SwapImageOn; this.SwapImageOff = std_SwapImageOff; this.TurnSubOn = IE_TurnSubOn; this.TurnSubOff = IE_TurnSubOff; this.TurnOffLevel2 = std_TurnOffLevel2; this.TurnOnLevel2 = std_TurnOnLevel2; __windowLoaded(); }

50. 50 Multi-browser support The JavaScript function IE_TurnSubOn(sectionname) { if(eval(sectionname+"SubDiv")){ if(active_sub_div) TurnSubOff(active_sub_div); active_sub_div = sectionname; eval(sectionname+"SubDiv").style.visibility = "visible"; } function NN_TurnSubOn(sectionname) { if(eval(sectionname+"SubDiv")){ if(active_sub_div) TurnSubOff(active_sub_div); active_sub_div = sectionname; document.layers[sectionname+"SubDiv"].visibility = "visible"; } function std_TurnSubOn(sectionname) { if(document.getElementById( sectionname+"SubDiv" ) != null){ if(active_sub_div) TurnSubOff(active_sub_div); active_sub_div = sectionname; document.getElementById( sectionname+"SubDiv" ).style.visibility = "visible"; }

51. 51 Multi-browser support Browser Detection function getBrowserSpecs() { var is = new Object(); var agt = navigator.userAgent.toLowerCase().toLowerCase(); // *** BROWSER VERSION *** // Note: On IE5, these return 4, so use is.ie5up to detect IE5. var reNumber = new RegExp( "[0-9\.]+" ); // assume the version is the first number in the USER AGENT is.major = parseInt( reNumber.exec( agt )[0] ); is.minor = parseFloat( reNumber.exec( agt )[0] );

52. 52 A Simple Example Simple Javascript First Example of JavaScript <!-- hide from old browsers by embedding in a comment document.write(“Last updated on “ + document.lastModified + “.”) // end script hiding -->

53. 53 Example 1: Browser Output

54. 54 Another Example Computing Factorials Another Example of JavaScript document.write(“ Factorial Table ”); for ( i = 1, fact = 1; i < 10; i++, fact = fact * i) { document.write(i + “! = “ + fact); document.write(“ ”); }

55. 55 Another Example

56. 56 JavaScript has Event Handlers Handling Events Example Handling Events in JavaScript <INPUT TYPE=”button” VALUE=”Click me” onClick=alert(“You clicked me”) >

57. 57 Example 3

58. 58 Determining the Browser navigator is a built-in object with properties that describe the browser –defined in both IE and NS –navigator.appName is a string with the browser name –navigator.appVersion is a string with the version number –to determine the correct version you may need to convert from string to number –parseFloat returns a number from a string, and ignores any part of the string after the number –Number only converts a string that is a number to a number

59. 59 Determining the Browser Check Browser document.write(“ This browser is “ + navigator.appName); document.write(“ Version “ + navigator.appVersion); if (parseFloat(navigator.appVersion) >= 4) { document.write(“ You have an up-to-date browser”); }

60. 60 Browser Output

61. 61 Avoiding Errors Since IE and NS differ somewhat in JavaScript, it is useful to first check if an object, property or method exists One can refer to any name in a conditional and if it is undefined the conditional returns false newItem = something;//produces an error if //something is undefined if ( something ) { newItem = something; } does not produce an error, but only changes newItem if something exists

62. 62 Example: Checking Window Size NS and IE use different object properties to hold the window size –IE: document.body.clientwidth or clientheight –NS: window.innerWidth or innerHeight Suppose you want to vary the response depending upon the size of the browser window –lets write a program that does this

63. 63 Re-Direct the Browser re-direct based upon window size function windowHeight( ) { if (document.body && //test for IE document.body.clientHeight) { return document.body.clientHeight;} else if (window.innerHeight) //test for NS { return window.innerHeight; } else {return 0;}; //both tests have failed } if (windowHeight() >= 500) { document.location = “fancy.html”;} else {document.location = “lessfancy.html”;};

64. 64 Points to Observe If the check for IE and NS both fail then a height of 0 is returned and the lessfancy file is displayed The conditional with the && clause is checked left-to-right in short-circuit mode

65. 65 Example: A Dynamically Changing Banner Use JavaScript to have a region where the HTML is dynamic use the STYLE attribute to create an HTML block that is accessed by JavaScript use a periodically scheduled event id = setInterval(JSstring, msec); JSstring is JavaScript code and msec is milliseconds JSstring is called every time

66. 66 Browser Output

67. 67 HEAD of the banner Example changing banner var banners = new Array(); banners[0] = “banner0”; banners[1] = “banner1”; banners[2] = “banner2”; var which = 0; function update() { display(“banner”, banners[which]); which++; if (which == banners.length) which = 0; } …display function...

68. 68 What Document HEAD does Defines array banners of HTML to display Defines counter, called which, that tells which element is being displayed Defines update which calls display() with ID “banner” and the current element of banners, then increments which

69. 69 Changing HTML in a Region function display(id, str) { if (document.all) { document.all[id].innerHTML=str;} else { document[id].document.open(); document[id].document.write(str); document[id].document.close(); }

70. 70 BODY of Banner Example Varying a Banner function update(){/*load new banner for eachcall*/} An example of a changing text banner if (setInterval) {document.write('the banner is loading');} else {document.write('Get a new browser');}; Here is the remainder of the document

71. 71 Points to Observe Uses onload event handler to start a periodic event with setInterval –runs the function update() every 5 seconds –update must be defined in the HEAD –does nothing if setInterval is not defined Uses an HTML SPAN tag to define the element that the update function will change –has an ID (similar to a name, but for all tags and is unique in the document) –has a STYLE attribute specifying absolute position needed in NS to modify the region

72. 72 Something on STYLE When an HTML tag specifies a style, the position of the element can be controlled –very useful for layout –for NS to change the text, the position must be absolute –this creates some awkwardness the next element is relative, and it turns out this means it will overlap the SPAN region that is being changed “fix” this using some BR tags to skip ahead

73. 73 Changing the SPAN region NS and IE uses different ways to alter what is in an HTML region –IE has innerHTML property which when set to a new value displays that HTML in the region –document.all[id].innerHTML = str; –NS has a document object for each such region open this document, write to it, and then close it document[id].document.open(); document[id].document.write(str); document[id].document.close();

74. 74 About display() Checks to see if document.all is defined –if so, uses IE4 convention of changing innerHTML –Otherwise assumes NS and uses NS conventions –note, this function will not be called for older browsers, because setInterval is not defined so the onload method does nothing

75. 75 Accessing the SPAN Region A SPAN tag with an ID attribute creates a JavaScript variable that can be used to modify that region of the document –array of objects, one for each HTML tag, with an ID attribute –accessed using the ID - string with a name –slightly different in NS and IE document.all[id] in IE document[id] in NS e.g. document.all[“banner”] or document[“banner”]

76. 76 Highlighting Menus Menus whose elements are temporarily highlighted as the mouse moves over them One way: use two images for each menu item and change between them using the mouseover and mouseout events –this works in NS and IE version 4 or later Second way: use STYLE attributes to dynamically change color, but this is harder to get working on both browsers

77. 77 Image Object Each image in an HTML document has an associated JavaScript object –the properties of the object include width and height in pixels src, URL of the image file, changes image when set complete, true after images finishes loading –can refer to object by NAME attribute of HTML IMG tag, or via built-in array of images document.images.name document.images[index] where index is either a number or a string containing the name of the image

78. 78 More on Image Object An image object is created automatically for each IMG tag in a document –if there is no name attribute, then one cannot refer to it by name in JavaScript An image object can also be created in JavaScript var myImage = new Image(); –this can be used to load images into a document that are not visible in the displayed document –pre-fetching to make images appear immediately

79. 79 An Image Rollover Image rollover is the effect used to change between two images when the mouse moves over it –the images must be the same size –for the changes to be immediate, images must be pre-fetched Generally used in highlighting menus, can be used wherever you want an image to change when the mouse moves over it try http://www.ruleweb.com/dhtml/index.html

80. 80 Rollover Example Image rollover function highlightdocs() { if (document.images) { document.images[“docs”].src = docsOn.src;}} function unhighlightdocs() { if (document.images) { document.images[“docs”].src= docsOff.src;}} if (document.images) { docsOn = new Image(); docsOn.src = “images/docs_on.gif”; docsOff = new Image(); docsOff.src = “images/docs_off.gif”;}

81. 81 Observe in the BODY The BODY creates an anchor with an image inside –there are mouse event handlers –image tag sets height, width, no border, alt text and name –the name is used to refer to the image in javaScript, document.images[“docs”] the HEAD defines two functions –only runs if browser supports image object –changes image by setting its src property to that of another, pre-fetched image called docs_on.gif

82. 82 More on the HEAD Highlighting requires two images –the image is created, then set is src property which loads the image –the names docsOn and docsOff are only used inside the functions, so it is OK to define them after not used until the event handlers are activated by the mouse moving over the image

83. 83 Generalizing to Multiple Images Suppose we want a general highlight/unhighlight functions for any image in a document define two arrays onImages and offImages –store pre-fetched images in these arrays, according to the same name as used for the image in the HTML –in general arrays can be indexed by strings as well as numbers

84. 84 Pre-fetching Required Images If (document.images) { var onImages = new Array; var offimages = new Array; onImages[“docs”] = new Image(); onImages[“docs”].src = “images/docs_on.gif”; offImages[“docs”] = new Image(); offImages[“docs”].src = “images/docs_off.gif”; onImages[“tech”] = new Image(); onImages[“tech”].src = “images/tech_on.gif”; offImages[“tech”] = new Image(); offImages[“tech”].src = “images/tech_off.gif”; …}

85. 85 General Highlighting Functions Name each image in the HTML document with the same name used in the pre-fetch arrays, onImages and offImages –e.g. the name “docs” was used for the images, so use the same name in the HTML –then one can highlight by simply setting the src property of an element in document.images to the src property of that element in onImages

86. 86 Code for General Highlighting function highlight(imgName) { if (document.images) { document.images[imgName].src = onImages[imgName].src;} } function unhighlight(imgName) { if (document.images) { document.images[imgName].src = offImages[imgName].src;} }

87. 87 Summary How to write JavaScript that works across browsers –checking that the browser supports a given feature such as document.images, before using it –avoid annoying JavaScript errors that occur when viewing in one browser or the other the built-in image object in JavaScript –accessing via name or array of images –created automatically for each IMG tag in the HTML –can also be created using new Image(); in JavaScript

88. 88 But Pre-fetching Repeats Code Each image to be highlighted requires creating two images and setting their src properties Repeated code is an indication of where to use subroutines Alternate strategy: create a global array with the names of all the images that will be used –must be the same as the names in IMG tags –this code requires images stored on the server to have file names based on these names –specify a path and extension path + name + “_on.” + ext(note+appends) so path = “images/”, name=“docs”, ext=“gif” then file must be in relative location “images/docs_on.gif” loop over the elements in this name array, creating and loading the images

89. 89 Pre-Fetching Function function prefetch(path, extension) { var imageName, i; if (document.images) { for ( i = 0; i < imageNames.length; i++) { imageName = imageNames[i]; onImages[imageName] = new Image() onImages[imageName].src = path + imageName + “_on.” + extension; offImages[imageName] = new Image(); offImages[imageName].src = path + imageName + “_off.” + extension; }

90. 90 Remainder of set-up var imageNames = new Array(“docs”, “tech”, “banner1”, “banner2”); if (document.images) { var onImages = new Array(); var offImages = new Array(); prefetch(“images/”, “gif”); } There are four highlighting images in array

91. 91 Body of Four Images... But there is still lots of repeated HTML

92. 92 Reducing Repeated Code Use document.write to produce the required HTML document.write(‘

93. 93 Some Explanations Consider document.write(‘<A HREF=“’ + hrefs[i] + ‘”’); which produces the HTML <A HREF=“documents.html” Consider document.write(‘onmouseover=‘“highlight(\’’ + imageName + ‘\’)”’ which produces the HTML onmouseover=“highlight(‘docs’)” where imageName has value “docs”

94. 94 Function for Creating the Menu Function createHighlightMenu(path, extension, w, h) { var imageName, I; for (i=0; i <imagesNames.length; i++) { imageName=imageNames[i]; if (document.images) { onImages[imageName] = new Image(); onImages[imageName].src = path + imageName + “_on.” + extension; offImages[imageName] = new Image(); offImages[imageName].src = path + imageName + “_off.” + extension; document.write(‘ ’); } }

95. 95 Document Body Using this function var imageNames = new Array(“docs”, “tech”, banner1”, “banner2”); var hrefs= new Array(“document.html”, “tech.html”, “banner1.html”, “banner2.html”); var altText new Array(“Docs”, “Techs”, “banner1”, “banner2”); if (document.images) { var onImages = new Array(); var offImages = new Array(); } createHighlightMenu(“images/”, “gif”, 25, 25);

96. 96 Example Document Object Property Values Property Value document.title ”My Home Page" document.fgColor #000000 document.bgColor#ffffff location.href "http://www.usc.edu/in.html" history.length8

97. 97 window.open() Method Attribute Examples To create a new window that shows only the toolbar and status bar and is resizable window.open(“newURL”, “New Window”, “toolbar,status,resizable”) the height and width defaults are the same as the browser a new window is positioned in the upper left hand corner of the screen a call to window.open() returns a value of the new window’s object; this should always be assigned to a variable, e.g. newWindow = window.open(““,””) if (newWindow != null) { newWindow.document.write(“ Hi ”)}

98. 98 Example Putting Up a Help Window function displayHelp() { hWin = window.open(““, “Help”, “height=200,width=400”) hWin.document.write(“ A Sample Help Window ”) hWin.document.write(“Please provide your first and last name ”) hWin.document.write(“Your Phone number should have no hyphens”) hWin.document.write(“ ”) hWin.document.write(“ ”) } Here is my Form NAME: Address: Phone:

99. 99 Help Window: Browser Output

100. 100 Example Checking for Empty Fields Elements Array function doit() { for (i = 0; i <= 3; i++) { if (document.forms[0].elements[i].value == "") { alert("Please fill out all fields.") document.forms[0].elements[i].focus() break } } } Enter your first name: Enter your last name: Male Female I am retired

101. 101 Checking for Empty Fields: Browser Output

102. 102 Checking Elements in a Form function checkFields() { var size = document.myform.elements.length var Flag = true for (var i = 0; i < size; i++) { if ((document.myform.element[i].value == null || document.myform.element[i].value == ““) && (typeof document.myform.element[i].value != ‘submit’ || typeof document.myform.element[i].value != ‘reset’) { Flag=true; alert(“The “ + document.myform.elements[i].name + “field is blank. Please enter a value.”); break }//endif } //end of for return Flag }

103. 103 Here is my Form Name: Address: Phone:

104. 104 Browser Output

105. 105 Multiple Selection Example Using Multiple Selection Lists function displaySelectionValues(objectName) { var ans = "" for (var i = 0; i < objectName.length; i++) { if(objectName.options[i].selected) { ans += objectName.options[i].text + " " } } myWin = window.open("", "Selections", "height=200,width=400") myWin.document.write("you picked these teams ") myWin.document.write(ans) } Dodgers Yankees Angels <INPUT TYPE="button" value="Show Selected Items" onClick="displaySelectionValues(this.form.teams)">

106. 106 Multiple Selection Lists: Browser Output

107. 107 Working with the Date Object getDate()returns date within month (1-31) getDay()returns day within week (0-6) getHours()returns hour within day (0-23) getMinutes()returns minutes within hour (0-59) getMonth() returns month within year (0-11) getSeconds()getTime() getYear()getTimeZoneOffSet() setDate(arg)sets date within month (1-31) setHours(arg)sets hour within day (0-23) setMinutes(arg)sets minutes within hour (0-59) setMonth(arg)sets month within year (0-11) setSeconds()setTime()setYear() Objects have get and set functions

108. 108 Using the Date Object The Date object has methods: getMonth(), getDay(), getYear() update = new Date(document.lastModified) theMonth = update.getMonth() + 1 theDay = update.getDay() the Year = update.getYear() document.writeln(“ Last updated:” + theMonth + “/” + theDay + “/” + theYear + “ ”)

109. 109 Date Object: Browser Output