| Lesson 8: History Today our discussion will be primarily in reference to the WebTv browser's JellyScript implementation (as of 2.5.5). While all browsers have some support for a History object, WebTv's is very easy to access and manipulate, while other browsers may require the UniversalBrowserRead privilege, and that issue is for more advanced discussions (see reference sources for more info). We will continue in our break from the previous thread's format by creating a working tool (rather than just an example) using the History object, the location object, and a for loop. This hopefully will help to tie some basic concepts together with the syntax of the JavaScript language. 1) History Object- an array of the user's recent surfing history in order (this order is affected by the use of the back button, replacing pages left by use of the back button with the next page visited!) 2) Location Object- the URL of the current page, this can be used to change the URL value (ie change the page like using goto) 3) For Loop- one of several looping routines in JavaScript with this basic syntax: for(Variable=Value;Conditional;Increment){ JavaScript Statements; } WebTv Browser History JavaScript Menu: 1) Event Handler: onClick A) Begin by making sure the first option (menu title) has not been choosen by checking the selectedIndex value of the options. The first element of any array in JavaScript is 0, so we check to be certain the selectedIndex is not 0. B) Use the location object to change the page to a URL taken from the text of the selected option (notice how we reference the option by using it's selectedIndex property as the index number of the options array, this is the only way to access the selected option in a select menu). 2) Create the Menu: For Loop 1) For loops are possibly the most common programming loop used in JavaScript. The variable used to increment the loop is declared within the statement (h=), it can be checked within the statement (h>=), and is incremented within the statement (h--). This can be spoken as: (Starting with h equal to something; continue so long as a check here is true; increase h a certain amount){ do something so long as the check is true performed is true} So in the tool script, the for loop is 1) Setting h equal to the number of pages in the user's history minus two (one for the current page, and one to compensate for arrays starting from zero). 2) Checking to see if h is still greater than zero meaning there are more pages left in the history so we should continue the loop. 3) Changing the value of h by subtracting one (in JavaScript you can add one with ++ or subtract one with --) so the loop moves to the next page in the history array. 4) The body of the for loop has coding that will create a new option tag based upon the value of the history object at the "h"th position in the history array with h being set by the loop, allowing the options to be created over and over through the entire history array and added to the variable each time till the loop conditional is met. Most of the DOM is contained within arrays which we can reference using loops and other methods. A very similar loop could be used to gather all the SRCs of the image on a page: for(i=(images.length-1);i>=0;i--){ something+=document.images[i].src;} Links, forms and their elements, any array or group of logically ordered data can be run through with loops giving you the ability to handle vast amounts of data quickly and easily. Notes- history.back() is the same as pressing the back button on the keyboard history.previous will give you the previous page's url history.go(n) will take you to n pages in the history array (history.go(-1) is the same as back) |