Geek Certs Blog

This tutorial explores the use of windows and frames with JavaScript.  We will learn about the properties of the window object, how to create status bar messages, and how to work with the location and history objects. Next, the text shows us how to use JavaScript to create pop-up windows, how to design Web pages that work properly in the presence of pop-up blockers, and how to create alert, confirm and dialog boxes. Finally, we learn to work with frames and framesets using JavaScript. I’ve recapped each of this tutorial’s sessions in the next three paragraphs. 

In the first session, we learn about the window object, status bar messages and the location and history objects.  We’re next taught how to create permanent and transient status bar messages.  We’ll also learn how to work with the properties of the location and history objects.  Finally, we will be able to apply automatic page navigation to a Web site. 

The permanent status bar message is only permanent for the current document. Once the browser loads a different page, the permanent status bar message returns to either the browser default or a permanent message specified for the new page. You have to instruct the browser to stop displaying a transient status bar message. You can do so by using the onmouseout event of the <a> tag. 

JavaScript can use the history object to navigate through the history list, by going forward or back. If a user is at the beginning or at the end of the history list, the back() or forward() method, respectively, has no effect, and the current page remains in the browser. To navigate to a particular page in the history object use the go(integer) method. 

In many situations it is useful to redirect the browser to another page. The Reference Window on page 700 describes two ways to automatically redirect Web pages. If you set the wait time before redirection to zero, the redirection to occur almost instantaneously and often users are not even aware that a redirection has taken place.In the second session, we will walk through working with pop-up windows, alert, confirm and prompt dialog boxes.  After that you’ll study modal and modeless windows.  Walk through the code so you learn how to work with pop-up windows with JavaScript so you learn how to adjust your code to accommodate pop-up blockers and how to work with the properties and methods of pop-up windows. After that, we’ll cover creating alert, confirm, and prompt dialog boxes. In fact, the tutorial shows us how to write content directly into a pop-up window.  Finally, we’ll look at how to work with modal and modeless windows. You should remember these from VB as they are similar in function (but not in coding). 

You can create new windows using both HTML and JavaScript. You can create secondary windows with HTML code, by using the target property of the <a> tag. You can give a new window any name, except one that is reserved by HTML for other purposes. If a window with the same name were already open, its contents would be replaced with the new page. If the name you select is one of the names of your frames, the page will be loaded in that frame and not in a new window. 

JavaScript lets you have more control on the windows you create. For example, you can specify the window size, its position on the screen, and whether the new window has toolbars, a menu bar, and a status bar. The Reference Window on page 703 describes how to create a pop-up window using JavaScript. Figure 13-12 describes the different window features and their values. In JavaScript, if you don’t specify a features list, the new window adopts the characteristics of the browser window that created it (its parent). It’s important to point out that if you do specify a features list, then some rules apply: if you don’t specify a width or height, the width or height of the original browser window is used; and, if you don’t include a particular feature in the list, that feature will not appear in the window. By default a pop-up window will appear in the upper-left corner of your screen; however you can specify a different location using the features named left and top in Internet Explorer. The Reference Window on page 707 describes how to control the pop-up window features. Don’t spend much time studying variations in Netscape since this browser is no longer supported by its maker. 

You can write JavaScript code to control the interaction between various browser windows. As you would expect, you can do lots of things with browser windows, like specifying which window has the focus, allowing users to move windows to different locations and resize them, and automatically close windows. Figure 13-17 describes some of the methods of the window object. 

Dialog boxes and windows can either be modal or modeless. A modal window prevents users from doing work in any other window or dialog box until the window is closed. An example of a modal window is an alert box in a browser window. A modeless window allows users to work in other dialog boxes and windows even as the window stays open. For example, pop-up windows are general modeless. You can force a pop-up window to be modal by adding the following event handler to the window’s body element: onblur = “self.focus()”. 

Figure 13-26 describes some of the features of modal and modeless dialog boxes and their values. Unfortunately, you can’t use the document.write() method to write content directly to a new window created with showModalDialog() nor with showModelessDialgo(). Any information must be sent through the data in the arguments parameter for the method being used. The value(s) can be later accessed within the pop-up window using the dialogArguments property of the window object. 

In the third session, we finally work with frame and frameset objects and study how to navigate between frames and learn how to change the content of a frame.  Next, we will see how to change a frame layout and how to block frames and force pages into framesets. The last piece of coding in this tutorial revolves around learning about how to work with inline frames. 

As you probably know, frames are organized into framesets, each frame displaying a separate URL. A window can contain multiple framesets. Framesets can be nested inside each other. The name attribute of a frame element is used when creating links whose targets are designed to appear in specific frames. The Reference Window on page 728 describes how to reference frames and framesets. 

To navigate between frames you have to navigate through the hierarchy of frames in the frameset. You can use the parent and top keywords to navigate between frames. 

In most cases JavaScript treats a frame as a separate browser window, so most of the properties and methods that can be applied to window objects can also be applied to frame objects. Check out page 730 for an example about how to change the content of a frame. Keep in mind that this is also how you change the contents of a window object. 

A frameset is laid out in rows or columns. You can use the rows and columns properties of the frameset object using JavaScript. A frameset can be removed of hidden by setting its height (or width) value to 0 pixels.

I’ve never enjoyed working with regular expressions. It is tedious and not often used. However, we do need to know how these work, so please stay with the material because when you need to know how to parse strings, etc. this knowledge proves invaluable.

Forms, on the other hand, are not too difficult. You will find that learning to use JS in conjunction with forms can also prove quite useful. For example, you might need to perform some dynamic operation on a Web form (joining two data fields, extracting one piece of a string, etc.), perform form validation before saving data to a database, or calculate some value based on other values entered by the customer. You can do this using JS as you will see during this tutorial’s lesson.

Keep in mind that JS treats the contents of input fields as text strings.  So, if you use the “+” sign in an operation, JS concatenates your strings and it does not perform addition!  This means that you must first convert your string to a number so that you can perform math. The Reference Window on page 767 describes how to extract a number from a text string. To convert a number to a text string you can add a text string to it (for example, “”), or you can use the String() function. The typeof() function can be used to learn if JavaScript considers a particular object type to be a text or a number.

Form validation is a process by which the server or a user’s browser checks a form for data entry errors. Further, there are two types of form validation: server-side validation and client-side validation. With the former, all of the work is done on the server (so the user’s browser sends its values to the server and when the server finishes its work, the server returns its results back to the user’s browser) whereas with the latter all of the work is done on the user’s PC (with the results being sent to the server).

Part of validation might be to pull values from form fields, which are text values. You should be familiar with (and understand) the difference between the slice(), substr(), substring() and split() methods. The examples shown on Figure 14-29 may help you better grasp how each of these methods works. Don’t forget that strings can also be formatted using styles sheets.

A regular expression is a text string that defines a character pattern. One use of regular expressions is pattern-matching, in which a text string is tested to see whether it matches the pattern defined by a regular expression. Pattern matching is just one use of regular expressions. They can also be used to extract substrings, insert new text, or replace old text (as I mentioned previously).

Regular expressions can also include symbols that indicate the number of times a particular character should be repeated. The repetition characters are listed on Figure 14-43. If you need to use one of the special reserved symbols in a regular expression, you should use an escape sequence. An escape sequence is a special command inside a text string that tells the JavaScript interpreter not to interpret what follows as a character. The character that indicates an escape sequence in a regular expression is the backslash character “\” (see Figure 14-45).

A regular expression can also be created using the object constructor, as shown in the Reference Window on page 804. There are some important differences between the two ways of creating a regular expression in JavaScript. For one, the regular expression literal is already compiled, which means that it is ready to perform pattern matching and other regular expression tasks. The new RegExp() object, on the other hand, must be compiled before it can be used. The other important difference is that the new RegExp() constructor takes a text string for its parameter value. Text strings can also contain escape sequences, which may be used to insert non-textual characters like tabs or carriage returns. To avoid conflict between escape sequences designed for text strings and escape sequences designed for regular expressions, you have to insert an additional escape character \ for each regular expression escape sequence.

The syntax of regular expressions may be intimidating (it is for me too!). The way you get these concepts is to walk through the examples and then try some of your own variations of what you see, observing what happens when you change things around. Once you learn this concept the next time around is a bit easier as you struggle to relearn it once again – like I do every year. LOL.