Web Design in a Nutshell

Web Design in a Nutshell Chapter 28: Introduction to JavaScript

Summary

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.

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.

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 <head>), and there can be numerous scripts in a single HTML document. <SCRIPT LANGUAGE=“JavaScript”>  </SCRIPT> • The <script> 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 <script> tag. Otherwise, those browsers would just display the code like preformatted text, which isn’t very pretty.

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: <HTML> <HEAD> <SCRIPT LANGUAGE=“JavaScript”>  </SCRIPT> </HEAD> <BODY> <P><A HREF=“javascript:openWin(‘mozart.html’);”>Mozart</A></P> <P><A HREF=“javascript:opwnWin(‘wagner.html’);”>Wagner</A></P> </BODY> </HTML>

Functions (cont.) • The JavaScript inside the <script> 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 <A> 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.

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.

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 2nd 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 3rd 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.

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.

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 <img src=“button_off.gif” onMouseOver=“turnOn();”> • 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.

Event handlers (cont.)

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. <A href=“mozart.com” onMouseOver=“window.status=‘A study of Mozart’s operas’; return true;”>Mozart</A> • 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.

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.

Sample scripts (Image rollovers, cont.) • This example creates a simple image swap when the cursor is over each image: <HTML> <HEAD><TITLE>2 rollover images</TITLE> <SCRIPT> 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”; }

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

Sample scripts (Image rollovers, cont.) <BODY> <A HREF=“page1.html” onMouseOver=“imgOn(‘img1’)” onMouseOut=“imgOff(‘img1’)”> <IMG NAME=“img1” BORDER=0 HEIGHT=20 WIDTH=125 SRC=“image1off.gif”></A> <A HREF=“page2.html” onMouseOver=“imgOn(‘img2’)” onMouseOut=“imgOff(‘img2’)”> <IMG NAME=“img2” BORDER=0 HEIGHT=20 WIDTH=125 SRC=“image2off.gif”></A> </BODY> </HTML>

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 http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html

Sample scripts (Checking browser version, cont.) <HTML> <HEAD><TITLE>What version?</TITLE> <SCRIPT> 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”;

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 } </SCRIPT> </HEAD> <BODY>  </BODY> </HTML>

Web Design in a Nutshell