You can use the Rollovers that we talked about in Lesson 12 to create some cool menus if you want. That is what I did for the menu on the left side of each of these pages.
The drop down list is one of the elements that is available in a Form. We discussed the basics of the Form in Lesson 6. You may want to take a look at that now to refresh your memory. I also strongly recommend that you visit our Library and study the section on Forms at "Sizzling HTML Jalfrezi".
Here is the HTML code I used to create the drop down list for our demo:
As shown in the above HTML code, the <SELECT> tag is used to create a drop down list.
Nested between the <SELECT> and </SELECT> tags are <OPTION> tags.
Note that there is one <OPTION> tag for each menu entry. The VALUE property of the <OPTION> tag contains the URL of a page and the text following the tag appears in the drop down menu list.
Note that our third <OPTION> tag in the list has SELECTED in it. This identifies the selection that will be the default when the page loads.
The onChange method of the <SELECT> tag calls a function that is used to load the specified URL. Here is the code for that function.
It is important to understand that the option object that is defined by the <OPTION> tags is an Array. In the function above, the variable sel_idx is set equal to the value of the selectedIndex. The selectedIndex is the number of the selected element of the array (remember that the number of the first element in an Array is 0). The urlToLoad variable is the value of the option element that has been selected, which is the URL of the page we wish to load.
Click here if you would like to test our drop down list menu and see the values of sel_idx and urlToLoad that result when you select each of the possible options.
The code we did above will work just fine. However, most of the time you will see the loadPage() function and Form code written as shown below:
The this keyword has always been confusing to me but I will try to explain its meaning as best I understand it. The this keyword always refers to the object where it is used. For instance, when you pass it as a parameter to a function, the this keyword refers to the object that was used to call the function.
In our example menu, we passed the this keyword to a function from the SELECT object. Therefore, in the function the variable fInfo refers to the SELECT object or more specifically will be the same as using document.demo.menu.
In our example menu, fInfo.selectedIndex is the same as document.demo.menu.selectedIndex and fInfo.options is the same as document.demo.menu.options.
The location object is used to load a specific URL into your
browser. Just make location.href equal to the URL that you want to load.
In our menu script above I used a relative URL since the page was on my
website. You can specify the complete URL if you want. For instance, I
could have used
The location object can be used to load pages into a different Frame if your site is using Frames or into a different browser window. Visit our Library to learn how to do this if you are interested.
By default the <SELECT> tag results in a drop down box like we
demonstrated above. Using the SIZE property, you can make the <SELECT> tag
result in a scrolling list. For example
A Cookie is a small piece of data that is stored in memory or on your hard drive. These cookies are used to give your web browser memory to be used from one web page to the other or from one visit to the other.
If you look back at the Property Summary of the document Object in lesson 12, you will see that a cookie is a string value. This string contains information in a special format that we can read and write to the hard drive.
Cookies are stored in a file named cookies.txt if you are using Netscape Navigator on a PC and in a file named MagicCookie on the Mac. Internet Explorer saves each individual cookie as a file in a directory named Cookies. I recommend that you make a second copy and use that if you want to look at a cookie file in a editor since any changes will probably make the file useless.
We will be making a total of 3 cookies in this lesson. Two of them will be temporary and the final one will persist on your hard drive for one day.
Let's take a look a simple cookie using the form below.
First, press the Get Cookie String button. An alert box is displayed with nothing in it.
Enter something into the text box and press Set Cookie. Now when you press the Get Cookie String button, the alert box displays no1=text you entered (no1 is the name that I gave the cookie).
Try typing some different information in the text box and pressing the Set Cookie button and then the Get Cookie String button.
Here is the syntax that you use to set this simple cookie.
Realize that most of the code shown above was used for this demo and does not represent a practical way to set or display a cookie. The code that was used to set the cookie was made bold so that it can easily be identified. The cookie data was shown by displaying it in a simple alert box using the onClick event of the second button.
Here is a form that will make a second cookie for us named no2.
When you enter something into the text box, press Set Cookie and then press Get Cookie String, the alert box displays a string that contains the name and data for both cookies. Note that the two cookies are separated by a semicolon (;).
Here is the code that I used for our second form.
All cookies we have done so far are temporary. When you close your browser and reopen it, the cookie will no longer exist. In fact these cookies only remain in memory and are never written to the hard drive.
If you want a cookie to be written to a person's hard drive so that it will be available for future visits, then you need to set the expires attribute of the cookie. Here is the syntax for setting a cookie that has an expiration date.
The time must be passed as a Greenwich Mean Time string.
Lets create a third cookie and save it this time.
Here are the functions that I used to make this third cookie.
The getCookieExpireDate() function adds the supplied number of days to today's date and then returns the results as a GMT string.
I used 1 day as the time that the cookie will remain on your hard drive in our example above. So you might want to confirm this by checking later on today or tomorrow. Remember that cookies remain in memory until you close your browser.
I think that you will find that the above function and the one in the next paragraph will work for most simple cookie situations that you will be doing.
There might be a time when you want to delete a cookie from a hard drive. In that case just set the expires argument to a value prior to the current date. Calling the makeCookie() function with a negative argument for the number of days should work just fine.
Here is the function that I use to extract data from cookies.
You pass it the name of a cookie and it returns the data that is contained in the cookie. Hopefully, by now you can look at the function and analyze what is happening for yourself. Therefore, I don't plan on discussing it any further here.
You can prove that this function does indeed work by clicking on each of the buttons below to extract the data from each cookie you created above.
A cookie has one required attribute, name. It has four optional attributes, expires, path, domain, and security.
We have learned about two of the cookie attributes, the required name attribute and the optional expires attribute.
By default, a cookie is assessable to the web page that created it and any other web pages that are contained in its same directory including the sub directories. The path and domain attributes allow you to specify additional directories and servers that can access your cookies.
The security attribute determines how a cookie is transmitted over a network. This is set to insecure by default.
[ Top of Page | Contents ]