Working with Windows and Frames

February 8th, 2009

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.

Working with Forms and Regular Expressions

February 1st, 2009

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.

Working with Special Effects

January 19th, 2009

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.

Installing and Configuring a Web Server

January 11th, 2009

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.

Working with Data Types and Operators

December 15th, 2008

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.

PHP Functions & Control Structures

December 7th, 2008

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

JavaScript (archaic) if-then-else Syntax Explanation

November 16th, 2008

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;

you should view this as you would an IF - THEN - ELSE statement in Visual Basic (or any other programming language).

First, I should explain the ” || ” symbol, which is known as a pipe. You create this by using the backslash key on your keyboard with the shift key down, where on the keyboard, it looks like the symbol I typed in above with a break in the middle for each line. In programming, the pipe stands in for the OR operator. Now that you understand this symbol, we can get down to the syntax of the IF statement above.

I decipher this by starting with the question mark and moving to the left and verbalize it as follows: if defwin is null OR has a value of undefined, then the IF statement is true. If defwin has any other value, the IF statement is false. The result of the IF statement is assigned to the variable testpop (and this is why the equal sign is referred to as an assignment operator in programming).

This type of IF statement is considered ‘old school’ since it derives from old scripting languages. However, you can still use it in .Net and other languages. Now, if you see it referred to elsewhere, you’ll know what it means!

JavaScript Errors - Capturing the Low Hanging Fruit

November 9th, 2008

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!

Distance Vector Routing Protocols (Part 2) – CCNA

November 2nd, 2008

RIP uses a number of timers to ensure that its routes are fresh and to avoid routing loops. A routing loop occurs when a router thinks it has a path to a destination, but it does not. In other words, if your cousin sends an invitation to you at your address in Chicago, but you don’t live there, you will never get it no matter how many times your cousin sends you the invitation.

 

Timers measure time in seconds and you can modify their default behavior. One of these timers, the update timer, controls how often a router sends a routing update to its neighbors. This is known as a periodic update. The default for a Cisco router is 30 seconds.

 

The invalid timer defines the length of time, 90 seconds by default, which must pass before a router considers a route invalid. In other words, if RouterA has a route to NetworkA, but does not receive an update from another router for the route to NetworkA for 90 seconds, RouterA considers its route to NetworkA to be non-existent.

 

Once a router determines a route to be non-existent, it begins a countdown as to when an invalid route should be purged (or flushed) from its routing table (which will trigger the router to send a routing table update to its neighbors). The flush timer has a default length of 240 seconds. Once this timer runs out, an invalid route is removed from the routing table.

 

Using a typical lab scenario of four interconnected routers (in circular fashion, with each router named Left, Top, Right, and Bottom), let’s look at what happens when Right informs Top that a network to its far right is down (since this is election week, why not!). I suggest you take out a paper and pencil and then draw out this network as you would do in the lab.

 

When Top learns of this update, it must protect itself from a false routing update from router Left. To understand this scenario, you must consider that electricity travels at about 70% the speed of light and that routers often handle millions of routing requests per second. Therefore, we need to slow this traffic down to about 5 MPH to understand how a router can receive information about a bad route and then tell another router about what it knows.

 

Slowing traffic down to an understandable level, let’s next suppose that half a second after Top learns of the bad route, Top receives a routing update from router Left. Left’s update does not include the update from router Right that its far right network went down (imagine that the network’s switch lost power). When Top examines Left’s update, it notices that the update contains (what appears to be) a valid route to the far right network through router Bottom. Of course, we know that this route is down, but router Bottom does not because half a second after it sent its update to router Left, it received an update from Right with the bad news about its far right network.

 

What should Top do with the update it received from Left, Top could conclude that it has a valid route, put this route in its routing table, and then send it to router Right. Can you see what a mess we would now have on our hands? If this scenario played out (again, slowing the clock down to a speed we can understand), when Right next receives a request to route to the far right network, Right will send the request to Top. Next, Top sends the request to Left, and finally, Left sends the request back to Right (who starts the loop all over again). This is an example of a routing loop!

 

Obviously, this can’t be allowed to happen. So, here’s what happens. Once Top learns from Right that it has an invalid route, Top invokes a principal known as split horizon and starts its holddown timer, which by default runs for 180 seconds. The concept of split horizon basically solves the problem I raised in the above scenario by forbidding router Top from sending an update to router Right about the route that is down. In other words, I can’t update you about a topic you originally told me about for a specific period of time (the holddown time). Once the holddown timer expires though, all bets are off. Cisco has a very detailed explanation of these concepts here in an EIGRP tutorial.

 

Newer implementations of distance vector routing protocols such as RIP and EIGRP add one more element to the intrigue by implementing split horizon known with poison reverse. Using poison reverse with our example above, router Top would receive the route update from Right and then send the invalid route immediately back to Right with an unreachable metric. RIP’s metric would be 16, which is its definition of an infinite path.

 

Finally, to conclude this discussion for this week, when router Top receives the update from Right, Top immediately recalculates its routing table and sends a triggered update to its directly-connected neighbors. A triggered update occurs when a router learns of a route change outside of its scheduled update time, sent when the router’s update timer expires.

Distance Vector Routing Protocols (Part I) - CCNA

October 26th, 2008

When routers communicate with each other they use their own language, as you would assume. You no doubt are aware that a router’s main function is to receive a packet and then figure out the best path, based on what the router knows, to get the packet to its destination.

The packet received by the router - for example an IP (Internet Protocol) packet - is a <u>routed</u> protocol. The router takes the routed protocol and encapsulates it (entirely) inside its own protocol data unit (PDU). When the router performs this process, the newly-created PDU is sent to the next router.

Before the router sends the PDU to the next router, it needs to determine to which next router the PDU should be sent. Routers learn about best paths by communicating with other routers and use routing protocols like RIP (Routing Internet Protocol), OSPF (Open Shortest Path First), and EIGRP (Cisco routers only: Enhanced Internet Gateway Routing Protocol) to accomplish this goal.

RIP and EIGRP are classified as distance vector (DV) routing protocols, whereas OSPF is classified as a link state (LS) routing protocol. DV routing protocols keep track of distances and directions (or vectors) using a simple metric called hop count. Each router through which a packet must pass is equal to one hop. It’s that easy. One catch is that a DV routing protocol such as RIP will only route a PDU 16 times. Any hop count beyond that is considered unreachable. Therefore RIP seemingly does the impossible by defining infinity.

DV routing protocols talk to each other using the logic, or algorithm, of their underlying logic, and this talk results in the shortest distance to a destination. Of course, a router should have a path to every destination (unless you specifically do not want that). RIP’s algorithm is known as the <i>Bellman-Ford</i> algorithm, named after the men who developed it. Routers record what they learn about routes in what is called a topology table but the actual routes a router will use is recorded in a routing table. In other words, the topology table might contain more than one path to one destination, but the routing table will only record the one path that has the lowest metric (which makes this route the best path to a given destination).

LS routing protocols such as OSPF utilize the more complex <i>Dijkstra</i> algorithm, again, named after the person who created it. LS routing protocols create a composite metric by learning about the bandwidth and speed of the media through which the PDU will pass. We will discuss LS routing protocols in a later discussion.

Finally,  EIGRP, which, again, is a Cisco proprietary routing protocol, is referred to by Cisco as a hybrid routing protocol. A hybrid routing protocol (according to Cisco) takes the best features from the DV and LS routing protocols and uses them all. As with LS routing protocols. we will reserve our comments about EIGRP to a later discussion, when we can cover it fully.

If you noticed that I didn’t even mention IGRP, then you are ahead of the pack! Since IGRP and RIP (version 1) are no longer supported, I’m not going to discuss them in much detail. However, many features of RIP are common to IGRP with the exception of using only hop count to calculate its metric.

When a router boots up, like any other computer (or sentient being for my Star Trek fans), it first does an internal awareness check known as POST (power-on, self test). Once the router knows its internals are functioning as expected, the router next loads its operating system (OS). Cisco named its router (and switch) OS the Internetwork Operating System or IOS. Once the router loads its IOS, it next looks to see if it possesses a specific configuration file.

When a Windows computer reaches this stage of its boot process, it applies a specific configuration from its database known as the registry. The registry is stored on a computer’s hard drive, which means that it can be changed - such as when a user changes her desktop background - and then saved so that the next time the user logs in the new desktop color is applied. A router does not have an internal hard drive, however, it does have memory that is very similar to another type of memory found in computers - EPROM (erasible programmable read-only memory). Cisco refers to this memory as NVRAM (non-volatile random-access memory). Think of NVRAM as RAM that does <u>not</u> lose its contents when the router loses power. The configuration file stored in NVRAM contains router-specific information such as the router’s name, its IP addresses, security settings, and more.

Once the router applies its startup configuration file settings, it is now, finally, ready to talk to its neighbors. On Cisco routers, a router talks to its directly-connected neighbors using another special language via CDP (Cisco Discovery Protocol). Note that whenever you encounter a protocol with a vendor’s name in it, this protocol will only be installed and available if your equipment was manufactured by that vendor. In other words, a Juniper router will not run CDP and it won’t be able to use EIGRP. 

When Cisco routers communicate using CDP, they only tell each other about the network that directly connects them to each other. So, if Router1 is connected to another network, which is usually the case, Router2 will not learn of that network’s existance, meaning that if Router2 receives a packet addressed to the other network, Router2 just might drop the packet (not route it). Of course, the the Router2 human administrator can program a (static) route to the other network, but this is a lot of work and outside of a small network, this would not work!

After reading the above, you no doubt are thinking that if the router could communicate directly with other routers, without much human intervention, this process would work in small and large networks. If you are thinking along those lines, then you understand why RIP, EIGRP, OSPF, and other routing protocols were created. When a router is provided with a basic routing protocol configuration, the router is able to dynamically talk to other routers, learn about routes, send requests for information and answer such requests, all without human intervention. When routers operate in this fashion, the network is said to be <i>scalable</i>, meaning that regardless of the network’s size, the process still functions with little or no human intervention required.

So, after a Cisco router learns all it can via CDP, it needs a dynamic routing protocol, such as RIP, to learn about paths to networks beyond its directly-connected neighbors. The router’s next step, after completing the CDP process, is to send its entire routing table to each of its directly-connected neighbors. Once the neighbors receive this routing table, they recalculate their routing table using RIP’s algorithm and then send out their entire routing table to each of their directly-connected neighbors. This process continues until all of the routers in the network have no new routes to learn. In other words, when a router receives its neighbors routing table and learns nothing new, the process is complete. At this stage, the routers have reached agreement on how to reach known destinations. This stage of agreement is known as <i>convergence</i>.

In our next discussion, we will address timers, triggered updates, routing loops, split horizon, and route poisoning. Stay tuned for next week’s continuation!