_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the book authors, 2002 Web Design in a Nutshell Chapter 28: Introduction to JavaScript

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition2  Wiley and the book authors, 2002 Summary

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition3  Wiley and the book authors, 2002 Synopsis JavaScript is a client-side scripting language that adds interactivity to web pages and lets designers control various aspects of the browser itself. With JavaScript you can do such things as display additional information about links, create mouse rollover effects, change the contents of pages based on certain conditions, randomly display content on a page, load content in new browser windows and frames, and (with some help from CSS) move elements around on the page. A scripting language is somewhere between a markup language, like HTML, and a full-blown programming language, like Java. With JavaScript, you can add extra functionality to your web site using short snippets of scripting code that has a syntax that’s fairly easy to understand.

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition4  Wiley and the book authors, 2002 JavaScript history JavaScript was first introduced by Netscape as LiveScript in Navigator 2.0, as a simple scripting language that could be embedded directly in web pages. With the advent of the media attention revolving around the Java programming language, it was later renamed to JavaScript with Sun’s blessing. Since then, JavaScript has evolved through 5 versions and is now codified in a standard. Microsoft also began supporting its limited version of JavaScript, called Jscript, in version 3 of IE. JavaScript (and Jscript) have now been standardized as ECMAScript. JavaScript version 1.5 is an implementation of the third version of the ECMAScript standard. NS6 and IE5.5 support this version of the language fairly well.

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition5  Wiley and the book authors, 2002 JavaScript basics JavaScript code is usually placed directly in an HTML document. The code can go in either the head or the body (although all JS functions should be defined in the ), and there can be numerous scripts in a single HTML document. <!-- script goes here //--> The tags define the boundaries of the script and sets the scripting language to JavaScript. The language attribute is necessary to distinguish JavaScript from other scripting language, like VBScript, that can also be embedded in web pages (although, if not specified, JavaScript is the default). Finally, HTML comments surround the script to hide the code from really old browsers that don’t understand the tag. Otherwise, those browsers would just display the code like preformatted text, which isn’t very pretty.

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition6  Wiley and the book authors, 2002 Functions There are 2 parts to most JavaScript applications: the functions that tell the browser what to do, and the actual calls to those functions. Let’s take the example of a simple web page that displays a linked document in a second window: <!-- function openWin(URL) { aWindow = window.open(URL,”otherwindow”,”toolbar=no,width=350, height=400,status=no,scrollbars=yes,resize=no,menubar=no”); } //--> Mozart Wagner

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition7  Wiley and the book authors, 2002 Functions (cont.) The JavaScript inside the tags defines a function, called openWin(), that tells the browser what to do when the function is called. In the body of the document, the openWin() function is being called from the anchor tags.  The line starts off as a normal tag, but the value of href is not a standard URL, it’s a call to a JavaScript function. The word javascript: tells the browser that the link contains JS code. In this case, that code is a call to the openWin() function which was defined in the head of the document.  Since the JS call is in a link, the function is run when the user clicks on the link (the word “Mozart”).  The content in parenthesis – mozart.html – specifies a value that is passed to the openWin() function.  The rest of the line is a standard link.

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition8  Wiley and the book authors, 2002 Functions (cont.) In the openWin() function:  The first line of code declares a new function with the name openWin(); this declaration is simply a way of giving a name to a set of instructions for the browser.  The set of parentheses – () – indicates that the function takes arguments, and the names of the arguments are listed inside the parentheses. Arguments are information that must be given to a function when it is called; the function uses this information to perform its job.  In this example, the openWin() function takes one argument, named URL, and uses URL to open a new window that displays the page at that location.  After the function declaration comes an opening curly bracket ({). You’ll see the closing curly bracket (}) on the last line of the function. Everything between these curly brackets is the code that is run each time the function is called.  The 2 lines of code are actually a single statement that is longer than the viewable area of this page. The line starts by creating a new variable. A variable is just a name that is associated with a piece of information. In this case, we’re putting the result of some window-opening code into the variable aWindow.

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition9  Wiley and the book authors, 2002 Functions (cont.) In the openWin() function:  The window-opening code calls the window.open() function (actually a method) which is defined by the JavaScript language. It provides a standard way to open a new window and lets you specify a bunch of information about the window to be opened.  There are 3 arguments for window.open():  the URL of the document to be displayed in the window  the name of the window  the characteristics of the window  Note that when we call window.open(), we’re not specifying an actual URL, but using the value of the URL argument that is passed into the openWin() function.  The 2 nd argument to window.open(), “otherwindow”, is a string that indicates the name of the new window. A string is simply a collection of characters surrounded by single or double-quotes.  The 3 rd argument is another string that specifies the characteristics of the window: the window’s size is 350x400, it has scrollbars but no toolbar, status bar, or menu bar, and it cannot be resized by the user. Note that no spaces or carriage returns are permitted inside the string for this final argument.

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition10  Wiley and the book authors, 2002 Event handlers In the previous example, the JavaScript function was triggered when the user clicked on an ordinary link. JavaScript code can also be triggered by more subtle user actions, such as moving the mouse over an element on the page (commonly called a “rollover”), or by browser actions, such as the loading of a page. These actions are called events. In JavaScript, you tie specific functionality to events with event handlers. An event handler simply watches for a predefined event and executes some code when it occurs. This response to user action is the foundation of interactivity.

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition11  Wiley and the book authors, 2002 Event handlers (cont.) In the following example, the onMouseOver event handler triggers a function called turnOn() when the user passes the mouse over the image on the page The turnOn() function could give the browser instructions to swap out the button_off.gif image with another one. This kind of code is the basis of the rollover buttons that are so popular on the Web.

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition12  Wiley and the book authors, 2002 Event handlers (cont.) Event handlerSupported by onAbortImages onBlur,onFocusWindows & form elements onChangeForm elements onClickButton elements, links onDblClickEntire document, images, links, buttons onErrorImages, windows onKeyDown,onKeyPress, onKeyUp Entire document, images, links, text input elements onLoad,onUnloadWindows, images onMouseDown,onMouseUpEntire document, links, images, button elements onMouseOver,onMouseOutLinks, images, layers onReset,OnSubmitForms

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition13  Wiley and the book authors, 2002 Sample scripts (status line messages) Probably the simplest JavaScript you can add to your site is a message that appears in the status bar (the bar at the bottom that shows URLs or says “Document Don’t”). You can use this bar to display a message or extra information when the user places the mouse over a link. To do this, simply add a little JavaScript to a standard anchor tag. You don’t even need to write a function. Mozart This code displays the text “A study of Mozart’s operas” when the user puts the cursor over the Mozart link. The return true; bit is just some code required to keep the browser from doing its normal job of writing the URL in the status bar.

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition14  Wiley and the book authors, 2002 Sample scripts (Image rollovers) While browsing the Web, you’ve probably encountered images that change when you pass your mouse pointer over them. This effect, commonly called a rollover, is created using JS code that swaps out one graphic for another when the onMouseOver event handler is called for the image. Rollovers are popular because they provide a strong visual cue that the graphic is clickable. To begin, you need to make 2 versions of each rollover graphic: one in an “on” state and one in an “off” state. Buttons in the “on” state typically feature brighter colors, a glow, or some other visual indication of being active. You can also swap in a completely different image if that suits your purpose. The only requirement is that the graphics have exactly the same pixel dimensions, or one will be resized and distorted.

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition15  Wiley and the book authors, 2002 Sample scripts (Image rollovers, cont.) This example creates a simple image swap when the cursor is over each image: 2 rollover images if (document.images) { // “On images” img1on = new Image(); img1on.src = “image1on.gif”; img2on = new Image(); img2on.src = “image2on.gif”; // “Off images” img1off = new Image(); img1off.src = “image1off.gif”; img2off = new Image(); img2off.src = “image2off.gif”; }

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition16  Wiley and the book authors, 2002 Sample scripts (Image rollovers, cont.) function imgOn(imgName) { if (document.images) document.images[imgName].src = eval(imgName + “on.src”); } function imgOff(imgName) { if (document.images) document.images[imgName].src = eval(imgName + “off.src”); }

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition17  Wiley and the book authors, 2002 Sample scripts (Image rollovers, cont.) <A HREF=“page1.html” onMouseOver=“imgOn(‘img1’)” onMouseOut=“imgOff(‘img1’)”> <A HREF=“page2.html” onMouseOver=“imgOn(‘img2’)” onMouseOut=“imgOff(‘img2’)”>

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition18  Wiley and the book authors, 2002 Sample scripts (Checking browser version) If you have a script that you know works in Netscape 6 and IE 5.5, but doesn’t work in older browsers, or if you need to perform one function for Netscape and another for IE, you may want to check browser versions and serve your script to users of the browsers in which it works, but not to users of other browsers. The first step is to check the browser’s name and version number and assign that information to global variables. The following code puts the name of the browser in a variable called browserName and the version number in a variable called browserVersion. Depending on the name and number in these variables, the variable browser is assigned a value corresponding to the appropriate browser. Thus, if the browser is Netscape 6, browser is set to nn6; if the browser is IE 4, browser is set to ie4. After the browser identity has been assigned to this variable, you can use if/else statements to ensure that only the correct browser tries to run any browser-specific code. This is not a particularly good or complete example. For something a little more exhaustive, try developer/sniffer/browser_type.htmlhttp:// developer/sniffer/browser_type.html

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition19  Wiley and the book authors, 2002 Sample scripts (Checking browser version, cont.) What version? browserName = navigator.appName; browserVersion = parseInt(navigator.appVersion); if (browserName == “Netscape” && browserVersion == 5) browser = “nn6”; else if (browserName == “Netscape” && browserVersion == 4) browser = “nn4”; else if (browserName == “Netscape” && browserVersion == 3) browser = “nn3”; else if (browserName == “Microsoft Internet Explorer” && browserVersion == 4 && navigator.appVersion.indexOf(“MSIE 5.5”) != -1) browser = “ie55”; else if (browserName == “Microsoft Internet Explorer” && browserVersion == 4 && navigator.appVersion.indexOf(“MSIE 5.0”) != -1) browser = “ie5”; else if (browserName == “Microsoft Internet Explorer” && browserVersion == 4) browser = “ie4”; else browser = “unknown”;

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition20  Wiley and the book authors, 2002 Sample scripts (Checking browser version, cont.) // handle browser-specific code if (browser == “nn6” || browser == “ie55”) { // latest JavaScript code goes here } else if (browser == “ie4” || browser == “ie5”) { // ie4 specific code goes here } else if (browser == “nn3” || browser == “nn4”) { // Netscape 3 code goes here } else { // alternative code goes here }