1 JavaScript csc667/867 Spring 2005 Ilmi Yoon

2 Outline Basics of JavaScript, Some simple examples Basics of the language variables, types, arrays, objects, and functions operators, expressions, strings, and statements JavaScript Full Reference at andbook/javascript/ andbook/javascript/

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

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

6 Example 1: Browser Output

7 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(“ ”); }

8 Another Example

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

10 Example 3

11 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

12 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 */

13 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

14 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’)”

15 JavaScript Data Types TypeExampleDescription String“a string”a series of characters inside quote marks Number Any 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

16 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

17 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”]

18 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

19 Date: Browser Output

20 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 + " "); }

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

22 Clicking on alert()

23 Clicking on confirm()

24 Clicking on prompt()

25 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

26 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

27 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”); }

28 Browser Output

29 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

30 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

31 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”;};

32 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

33 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

34 Browser Output

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

36 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

37 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(); }

38 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

39 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

40 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

41 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();

42 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

43 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”]

44 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

45 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

46 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

47 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

48 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”;}

49 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

50 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

51 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

52 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”; …}

53 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

54 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;} }

55 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

56 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

57 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; }

58 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

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

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

61 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”

62 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(‘ ’); } }

63 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);

64 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

65 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

66 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

67 Example Document Object Property Values Property Value document.title ”My Home Page" document.fgColor # document.bgColor#ffffff location.href " history.length8

68 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 ”)}

69 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:

70 Help Window: Browser Output

71 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

72 Checking for Empty Fields: Browser Output

73 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 }

74 Here is my Form Name: Address: Phone:

75 Browser Output

76 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)">

77 Multiple Selection Lists: Browser Output

78 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

79 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 + “ ”)

80 Date Object: Browser Output