This is an intense lesson where you can learn how to design menus that utilize JavaScript. You will then learn all about the famous Cookies that you have heard so much about. Here, I have tried to cover these two subjects "step by step" so that you can understand the workings of both.

Menus

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.

Another way to create a menu utilizing JavaScript is to use a drop down list as shown in the simple demo below. I included a few of our lessons in the menu for this demo. Try it if you want, but remember you will need to use the back button on your browser to return to this page. If you decide to use this type of menu, then you will probably want to put a similar menu on all your pages.

The JavaScript code for a menu such as the one above is really quite short but I find it difficult to understand. So, I decided to take the lengthy approach to explaining the code here. If you are interested in just the final code, then feel free to go here to see it.

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:

<FORM NAME="demo">
<SELECT NAME="menu" onChange="loadPage()">
  <OPTION VALUE="lesson11.htm">Lesson 11
  <OPTION VALUE="lesson12.htm">Lesson 12
  <OPTION SELECTED VALUE="lesson13.htm">Lesson 13
  <OPTION VALUE="lesson14.htm">Lesson 14
</SELECT>
</FORM>
 

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.

function loadPage(){
  var sel_idx = document.demo.menu.selectedIndex
  var urlToLoad = document.demo.menu.options[sel_idx].value

  location.href = urlToLoad
  }

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 last line of the function loads the page into the browser utilizing the location object.  

Final Drop Down List Code for our Menu

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:

function loadPage(fInfo){
  location.href = fInfo.options[fInfo.selectedIndex].value
  }

<FORM NAME="demo">
<SELECT NAME="menu" onChange="loadPage(this)">
  <OPTION VALUE="lesson11.htm">Lesson 11
  <OPTION VALUE="lesson12.htm">Lesson 12
  <OPTION SELECTED VALUE="lesson13.htm">Lesson 13
  <OPTION VALUE="lesson14.htm">Lesson 14
</SELECT>
</FORM>
 

The only change in the form is the loadPage() function now contains a parameter and the parameter is the JavaScript keyword this. The this keyword allows all of the information about the SELECT object to be passed to the function. For instance, in the function, fInfo.selectedIndex is the same as document.demo.menu.selectedIndex. Everything that we did in our original version of the loadPage() function is now written on one line. If you study it close, I think you will see that both versions will have the same results.

Some Final Thoughts on our Discussion of Menus

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
location.href = "http://www.crays.com/learn/lesson11.htm"
to load my lesson 11 page. You will need to specify the complete URL for pages that are not on your website.

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
  <SELECT SIZE=3 NAME="menuDemo" onChange="loadPage(this)">
will result in a scrolling list of 3 elements.

Take a look at the first problem Assignment below to see a demonstration of a website utilizing a drop down menu. You can find more Menu examples on my JavaScript Corral Site.

Cookies

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.

Many people are leery of Cookies because of a fear that their privacy is being invaded. In the case of JavaScript, all cookie data remains on the computer that created it. You need a more sophisticated language if you want to send this data back to the server.

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.

Our First Cookie

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.

 document.cookie="nameofCookie=cookieData"

 <FORM name="frm1">
 <INPUT type="text" length=20 name="txt1">
 <P>
 <INPUT type="button" value="Set Cookie" name="set1"
 onClick='document.cookie="no1="+document.frm1.txt1.value'>
 <INPUT type="button" value="Get Cookie String" name="get1"
 onClick='alert(document.cookie)'>
 </FORM>

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.

A Second Cookie

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.

 <FORM name="frm2">
 <INPUT type="text" length=20 name="txt2">
 <P>
 <INPUT type="button" value="Set Cookie" name="set2"
 onClick='document.cookie="no2="+document.frm2.txt2.value'>
 <INPUT type="button" value="Get Cookie String" name="get2"
 onClick='alert(document.cookie)'>
 </FORM>

Our Third Cookie

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.

 document.cookie="nameofCookie=cookieData; expires=time"

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.

function getCookieExpireDate(noDays){
  var today = new Date()
  var expr = new Date(today.getTime()+noDays*24*60*60*1000)
  return  expr.toGMTString()
  }
function makeCookie(name, data, noDays){
  var cookieStr = name + "="+ data
  if (makeCookie.arguments.length > 2){
    cookieStr += "; expires=" + getCookieExpireDate(noDays)
    }
  document.cookie = cookieStr
  }

Let's examine the makeCookie() function. This function can be used to make a temporary cookie like our first two or it can be used to make a cookie that will persist on a hard drive for a given number of days. This works because JavaScript functions can have a variable number of arguments.

The line if (makeCookie.arguments.length > 2){ tests the number of arguments that the function has and if it has 3 or more then the expires argument is set. If there are only two arguments, then the cookie is temporary and the expires attribute is not set. Note that one argument would in this case cause a JavaScript error because the data variable is expected but would not be defined whereas two or more arguments will not cause any errors.

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.

How to Extract the Data from a Particular Cookie

Remember that a cookie is a string. Therefore to get the data from individual cookies, you will need to use some of the string methods (refer to lesson 7 and the Library for more information).

Here is the function that I use to extract data from cookies.

 function readCookie(cookieName){
   var searchName = cookieName + "="
   var cookies = document.cookie
   var start = cookies.indexOf(cookieName)
   if (start == -1){ // cookie not found 
     return ""
     }
   start += searchName.length //start of the cookie data
   var end = cookies.indexOf(";", start)
   if (end == -1){
     end = cookies.length
     }
   return cookies.substring(start, end)
   }

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.

Note that only the name and the data (name-data pair) is available to you using JavaScript. Other data such as the expiration date is not available.

More about the attributes of a Cookie

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.

The last three attributes are beyond the scope of this class. If you want to know more about them, then look in our library or read the technical details of cookies from netscape  

Assignment

1. Develop a simple website that contains a few pages. Use a drop down list menu to navigate between the pages.
   Solution  

2. Show how something similar to problem 2 in lesson 11 and problem 1 in lesson 12 can be accomplished using cookies. Make a form that requests some information and then display a new page containing that information when a button on the form is pressed.
   Solution   Source - Enter Info Results