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.

This week’s material is fun to work with!

This tutorial explains how to create rollovers, menus, filters and transitions. Students learn how to create and use different types of effects in their Web pages, and how to use some of these effects as Web page navigation aids.

Make sure you look back to Tutorial 11 and review object collections if you’ve forgotten what those are. They are explored further this week. The Reference Window on page 638 describes how to reference an inline image. Be aware that an image can be referenced by its name, but since the name attribute has been deprecated in favor of the id attribute, it’s generally safer to use the document.images object collection. For backward compatibility with older browsers, it is recommended to use both the id and name attributes, set to the same value. Don’t forget the importance of good cross-browser Web site design as there are still many people using older versions of browsers. Also remember that there are a good number of browsers available and that your users (customers) will probably use most of them.

You can write code that detects if a browser supports image objects. If a browser does not support image objects, the rollover effect cannot be obtained, but with good Web development practices, the users should be able to navigate through the Web site without problems. If users have problems navigating your site they won’t stay and you will probably lose a customer.

There are two types of menus: pop-up and pull-downs. You should be familiar with both of these. A pop-up menu can be created using hidden <div> elements and JavaScript code. The clip style attribute can be used to create pull-down menus. Make sure you do the example that is in the book so you know how to do this. Create pop-up menus using JavaScript code. A pop-up menu should appear when the user clicks (or onmouseover, depending on the design) on a menu title. Only one pop-up menu should be visible at a time. If a user clicks the page content that appears below the menus, any active menu should be hidden. JavaScript to show and hide a menu needs to be created.

A function to display the appropriate pop-up menu and to hide all others should also be created. This function will be called when the user clicks on a menu title, specifying it in the href property of the <a> tag. The section exercise explains in detail how to create a pop-up menu for the case study (hint, hint).

A filter is an effect that is applied to an object or page to change its appearance. Using Internet Explorer filters, you can make text or images appear partially transparent, add a drop shadow, or make an object appear to glow. Filters were introduced in Internet Explorer version 4.0 and are not supported by other browsers, so they should be used with caution (I don’t recommend using them at all unless you always get the browser type the user has installed). You should run the filter demo (see page 659) so that you know what these are and how to use them.

A transition is a visual effect that is applied to an object over an interval of time. Transitions are only supported by the Internet Explorer browser. Internet Explorer 4.0 supports two types of transitions: blend and reveal. The Reference Window on page 668 shows how to create transition styles. The section also includes a transition demo. Make sure you check this out. On pages 672-673, a step-by-step exercise shows how to add a transition to a pop-up menu.

Interpage transitions, involve effects applied to a page when a browser either enters or exits the page. Interpage transitions are created using the meta element within the head section of the HTML file. There are four types of transitions, which are run when a user initially enters the Web page, exits the page, enters the Web site, or exits the site, respectively. The Reference Window on page 674 describes how to create an interpage transition.

Finally, the section contains a step-by-step exercise showing how to add an interpage transition to a Web page.

PHP is a Web programming language, similar to JavaScript in that it’s not an object-oriented programming language. The big differentiator between the two is that PHP allows us to take data from a Web page and place it in a database. In reverse, we can also take data from a database and place it on a Web page. You can also do this with ASP (Active Server Pages), but PHP provides much more functionality, as you shall see. Like JavaScript, PHP is based on the ‘old’ programming language of C.

As with the JavaScript programming language, capitalization, parentheses, and quotation marks (single and double) are used and how you use them determines whether your code works (or not). Pay close attention to your typing and scan for errors as your first line of defense when your code does not function as expected.

PHP is a strange name for a programming language. When it originated, it meant Personal Home Pages, but then became a strange occurrence – a self-referencing acronym – when folks began to call it PHP Hypertext Processor (which is PHP referred to within the PHP acronym). Strange, wouldn’t you say?

The authoritative Web site for PHP can be found at http://us.php.net/history. You should bookmark this site and look there for answers to problems you encounter.

As mentioned above, you don’t need to install PHP on your home computer if you don’t want to do that. I suggest that you do as if you don’t, you won’t be able to run PHP code unless you’re connected to the Internet. Chapter 2 outlines what you need to do to install PHP on your computer. However, if the install takes more than a couple of hours or so, I’d save that task for another day (like next summer).

Keep in mind that when the PHP engine is installed you also need a Web server under which to run it. This means that you will need to turn your computer into a Web server. You have two good options available to make this possible. One option is to install the Apache server on your computer. I have a program (I believe it’s still on the school’s “i” drive) that installs PHP v5.0 and Apache in one install package. You are welcome to try this if you want to do that. You can install Apache on Windows XP Pro. I’d check Apache’s Web site for a Vista version if you’re running that OS.

Since I’m a Microsoft sort of guy, I prefer the second option, which is to enable IIS (Internet Information Services) in Windows XP. You can use IIS instead of Apache and again, chapter 2 outlines how to do that. Remember too that Apache is Unix-based and IIS is Microsoft-based. You install IIS as you would any other Windows Component (through the Control Panel / Add/Remove Programs / Add/Remove Windows Components). Once you install IIS, it shows up with your other Admin tools under the Control Panel / Administrative Tools link. Windows XP can use IIS v6.0 whereas Vista shipped with IIS v7.0.

Windows XP can act as a Web server and can host one (and only one) Web site. This comes in handy when you’re on a company LAN and you want your own personal Web site (you might need one for your work, which isn’t as uncommon as you might think). If you install IIS on a Windows Server, then the server can host thousands of Web sites. Of course, you must also install PHP on the server so that PHP code can be understood (refer to page 53). A great primer for understanding IIS can be found at http://en.wikipedia.org/wiki/Internet_Information_Services.  In case you need it, here’s a good URL for installing IIS in Windows XP Pro: (http://www.webwizguide.com/kb/asp_tutorials/installing_iis_winXP_pro.asp). Microsoft’s IIS Web site URL is http://www.iis.net/default.aspx?tabid=1.

In addition to PHP and Web server ability (IIS or Apache), you also need a database for use by your Web site. Most people today are using the free MySQL database engine. Their Web site URL is http://www.mysql.com/, and you will want to bookmark this site as well. You can download the install program from this Web site too if you want to install it on your computer.

You should be quite familiar with variables at this point in your programming education and recall that variable data types determine what types of operations it supports along with the amount of memory which is allocated to support it.

For example, a Boolean variable typically would not be used to store a user name or password. Its values are binary and these values are either true (1) or false (0). You would use a Boolean variable to determine whether something happened (or not) or whether something is on (true) or off (false).

Another example of a data type is an array. Arrays, as you should recall, are great for collecting data through the use of a single variable for related items. For example, let’s say you were creating a list of automobile models. You could create an array that stores each model for Ford trucks and then refer to this one variable, along with its index rather than defining a named variable for each one. Don’t forget that an array’s index begins with zero (0) and that this identifies the first item in the array. The array is an example of a compound data type. This means that it can hold more than one value. The other type of compound data type is the object, which you worked with in VB (and can be used in PHP).

You’ve spent a lot of time working with what are called primitive data types. A primitive data type is a variable that can hold one value. Examples are strings, integers, floating point numbers, and Booleans.

In PHP, the main things to remember are that variable names (referred to as identifiers) must begin with a dollar sign and that variable names cannot contain any spaces. While some use underscores to separate words in a variable name, I personally don’t like doing that. I prefer to use something like $LastName rather than $last_name because to me the underscore takes longer. But, that’s just me. You can use whichever you like.

A nice online review of PHP data types can be found at: http://www.daaq.net/old/php/index.php?page=php+data+types&parent=php+basics.

Assignment operators (+=, -+, *=, /=, =), comparisons, logical operators (AND, OR, XOR), and math operators work the same in PHP as they do in VB.  One operator does need an explanation though, and it is the modulus. The modulus operation differs from simple division and this is easy to see through the use of a math calculation. If we divide 7/3 we get 2.3333333333 (it goes on forever). The modulus is the remainder (.3333333333).

Type casting, or casting, ensures that a data type is the kind a script expects. This is helpful for form input, verifying that data is indeed of the kind the script needs to execute. You can use the gettype() function to view a variable’s data type, and other functions to determine whether a variable is of a specific data type.

It’s probably a good time to review the operator order of precedence. In other words, when you have a math formula such as 7 x (8 + 3) / 4 x 2^3, what is done first? How do we always know the correct answer? I always remember the order in which operations are evaluated by using the sentence: Please Excuse My Dear Aunt Sally. Taking the first letter of each word, we can gleam the order. Here’s the answer: Parentheses, Exponents, Multiplication, Division, Addition, and Subtraction. So, you always add before you subtract, perform calculations inside parentheses before doing anything else, multiply before adding, etc.

Feel free to drop me an email if you’d like the answer to the problem above.

As you are well aware, a function is made up of a number of statements that are executed one at a time, but as a single unit. Functions should be constructed so that they do one things. In other words, your function should calculate a mortgage payment (principal and interest) but it should not calculate a mortgage payment, the monthly taxes, or the monthly insurance escrow amounts. These last two items should be calculated in their own functions with all of the functions contributing to a variable named something like $totalPayment. As you saw in last week’s study material, a PHP function looks like this: 

<?php function_name ($parameter1, $parameter2) {   Put PHP function statements here;} ?> 

Doesn’t this look similar to JavaScript (JS)? If you answered in the affirmative, you’re on the right track. Like JS, in PHP, function statements are placed inside curly braces and end in a semi-colon. 

Once you create a function, you need to invoke (or call) it. In PHP v4 and later, you can place PHP code at the bottom of the page and call the function from the top of the page. I don’t know why you’d do that – don’t! – but it can be done. As in Visual Basic, variables can have limited or global scope. A global variable has scope for that Web page whereas a standard variable’s scope is limited to the specific function in which it was created. 

PHP includes various predefined global arrays, called autoglobals or superglobals, which contain client, server, and environment information that you can use in your scripts. Autoglobals are arrays whose elements are referred to (when needed) with an alphanumeric key instead of an index number. Two of the most commonly used autoglobals are $_GET and $_POST. They allow you to access the values of forms that are submitted to a PHP script. The default method for submitting a form is “get,” which appends form data as one long string to the URL specified by the action attribute (this data is actually displayed in the browser’s address bar). The “post” option sends form data as a transmission separate from the URL specified by the action attribute.For example, if we have a form set up like this:

<form action=”start.php” method=”get”>Name: <input type=”text” name=”fname” />Age: <input type=”text” name=”lname” /><input type=”submit” />

</form>

When the user clicks submit, on the next Web page that we display, the address bar will look like this:

http://www.goblackwood.com/start.php?fname=John&lname=Blackwood

So, what do you think? Should you use $_GET to pass usernames and passwords between your Web pages? NOT!The Web page we display after the user clicks submit could have the following code to use these values to display what the user previously entered:

Welcome <?php echo $_GET[”fname”] . “ “ . echo $_GET[”lname”]; ?>.<br />

The $_POST variable collects values from a form invisibly! This means that when the user clicks submit, the data you pick up from the form can’t be seen in the address bar and is invisible. Here’s what the address bar looks like when the user clicks submit and we next open the start.php Web page:http://www.goblackwood.com/start.phpNow, the start.php Web page can use the $_POST variable to pick up what the user previously entered:

Welcome <?php echo $_POST[”fname”] . “ “ . echo $_POST[”lname”]; ?>.<br />

Why use POST instead of GET? Simply put – you don’t want values entered by a user displayed in the address bar. It’s that easy.

One more superglobal should be mentioned, although it’s not mentioned in the chapter. The $_COOKIE variable is used to retrieve a cookie value. A cookie is a small file put on a user’s computer by your Web server. Then, so long as the cookie is “alive” the cookie can be used to identify a user each time the user requests one of your Web pages. You can also use a cookie to customize a user’s experience on your Web page, just as Amazon.com does when you are greeted with your name when you visit their site after having previously logged in.

You create a cookie using the setcookie() function in PHP. Next, you obtain the cookie values (such as the user’s name, pages visited, etc.) by printing or echoing the value to the screen, paper, email, or a database. Contrary to popular opinion, cookies cannot harm your computer.

As expected, PHP supports IF, IF-ELSE, nested IF, and SWITCH statements. Further, when you need to perform the same code statement many times (as in a VB for statement), you can use PHP’s while, do…while, for, and foreach statements.

When a looping statement (such as a while statement) repeats itself, this is known as an iteration. Remember that when you loop, you must ensure that the loop ends. Otherwise, the loop will run forever.

The while statement does something so long as the condition is true. The do…while statement does something at least once and iterates so long as the condition remains true while the do statement iterates one time only. The for statement iterates so long as your condition and counter remain true. Finally, foreach statements are used to iterate through arrays or objects (like folders).

Links you may find useful for this week’s study:

http://www.w3schools.com/PHP/php_functions.asp http://www.w3schools.com/PHP/php_if_else.asp http://www.w3schools.com/PHP/php_looping.asp http://www.w3schools.com/PHP/php_get.asp http://www.w3schools.com/PHP/php_cookies.asp

I wanted to add an explanation for a JavaScript phrase that a couple of you asked me about. When you encounter the a statement that looks like this:testpop = (defwin == null) || typeof(defwin) == “undefined”) ? true : false;

One easy thing you can do is look for a yellow triangle in the bottom-left corner of your browser window. If you see an error listed there, double-click the icon to open a small window that will tell you the error’s line number. Caveat: Keep in mind that sometimes one error often times leads to another error. So, the line number shown might not be the end of the story, only its beginning…

When your code is not working as expected, buckle down! Something is wrong. You just need to keep your wits, use your skills, and figure it out. You can do it!

Some companies use Microsoft server operating systems to run their Web sites. We could accomplish this by installing Windows Server 2003 on a powerful computer and then enabling IIS (Internet Information Services) on the server. Turn on IIS by navigating to Add/Remove Programs. Then, click Add/Remove Windows Components (in the left side pane). IIS functionality is located in the Application Server item. Click it and then click Details to open a new window. You’ll see IIS listed and you turn it on by enabling its check box. If you’re a current Linux fan, just think of IIS as Microsoft’s equivalent of Apache, the most widely-used Web server operating system used today.

Web pages can be created using applications that hide their complexity. Start out by creating a new document in Microsoft Word and by formatting it with cool fonts, pictures, and graphs. Then, save the document as a Web page by clicking File and then click Save As. You just created your own Web page and saving it as a Web page gives it an .html file extension instead of the standard Microsoft Word .doc file extension.

Creating a Web page in this way is fine when we want to publish a simple page to our company Intranet or our own personal Web site. As you might have guessed, when Web pages are so easily created, they contain a lot of behind the scenes formatting (also known as overhead) that makes the page load slower than if we had created it manually using HTML (hyper text markup language) code.

If you want a professional looking Web site, you’ve got to hire someone who can program in HTML (and a few other Web languages) or you’ll have to learn how to do it yourself. Most Web pages are written in HTML - one of the programming languages that designers use to create Web pages.

You can see any Web page’s HTML code by right-clicking in any text area (don’t click on a graphic). Then, select View Source from the Context Menu that appears to see that page’s HTML code.

The Internet (notice the capitalization of the “I”) is the infrastructure of wires and fiber optic cable that connects the entire world’s networks together. For example, at your home, you may have a dialup, DSL, cable, or satellite Internet connection. Let’s say you have dialup.

As you know, when you plug the phone line in your computer’s modem, you also must plug the other end into a phone jack on the wall. This phone jack on the wall then goes to the outside of your home to your phone provider’s box (usually screwed onto your house). From there, it moves up to a telephone pole, across the pole wires, and on to some office where it joins thousands of other wires in a phone network. DSL works the same way.

Your phone company, and a number of other companies, manage the network that joins all of these wires together. All of this is the Internet.

Continuing to use the example from above, the World Wide Web (WWW), is all of the computers (this includes computers and servers) that use the Internet to talk to each other. Therefore, when you log into your computer and open Internet Explorer, typing in http://www.google.com, you are accessing Google’s Web server, available to anyone who has access to the Internet.

When you type in Google’s address in your browser’s address line (as in the above paragraph), what you type in is the URL (Uniform Resource Locator) for that Web site. An URL is a Web address. You can download files from most servers (where you move a copy of a file that resides on another computer to your computer), or, in some cases, you can upload (where you move a copy of a file that resides on your computer to another computer) a file to another computer on the Internet.

As you probably are aware, clicking a link sometimes asks you if you want to save the file to your computer or just open it. If you choose to save it to your computer, it might take a while to do so. This is because the communications rules you are using are not really made to copy things quickly. The communication rules, also known as a protocol, is known as HTTP (Hyper Text Transfer Protocol). You can use a faster protocol to upload or download files to a computer (or server), but you have to know how to use it. The faster protocol is known as FTP (File Transfer Protocol). For small files, you won’t notice much speed difference.