Hour 11. Advanced Programming

For just about the first half of this book, you’ve learned the methodology and mindset of effective programmers. While all the examples and discussion have covered JavaScript code, most of these concepts are fairly universal. Even better, the syntax of loops and conditional expressions that you learned are directly applicable to other languages like C, C++, and Java. If you want to move to Visual Basic, you just need to tweak your syntax a bit, but by learning the concepts, you’re already most of the way there.

The last hour was not general programming, but more specific to what JavaScript can do to improve your website. This hour will cover more of the same, specifically adding improving the user’s experience with cookies. After this hour, you will jump into object-oriented programming (OOP), as covered in Java.

The highlights of this hour include:

Defining cookies

Writing cookies

Reading cookies

Deleting cookies

This is not the case with JavaScript. There are severe limitations to the language’s ability to create files on the computer’s disk system. If you think about the general purpose of JavaScript, this limitation makes sense. If you are browsing the web, you don’t want to give any site you visit the ability to start placing files on your hard drive. In the best-case scenario, your hard drive would start to fill with junk you probably don’t want. In the worst-case scenario, unscrupulous and malicious hackers could wreak havoc on your machine. So some security is in order, otherwise people would probably turn off JavaScript in their browsers.

There is an exception to this rule. If you have websites you visit regularly, you often want them to remember vital information, including shopping history, preference, and in many cases usernames and passwords if you visit sites that restrict access to registered users. JavaScript can accommodate these needs thanks to cookies.

It you’d like to see how many cookies you have, they are generally located in your Temporary Internet Files. You will probably be a bit surprised with just how many are there. I don’t like messing with files in that folder, so I made a copy of one and pasted it into my documents folder. Opening it with my text editor, here’s what the file looks like:

B
8q7et8l8ihvh5&b=3&s=d6
yahoo.com/
2147484672
2019565568
30429292
1498382404
30282220
*

Fairly unreadable to you and me, right? The only thing that’s clear from this jumbled collection of letters and digits is the website that placed this cookie on my hard drive, yahoo.com. But yahoo can take this cookie the next time I visit it, parse the information contained within it, and know certain information about my most recent visit. This knowledge will make for a smoother return trip for me, and you should want that for your web visitors as well.

So if you’ve created a commerce site, you need to add the capabilities for cookies into your web pages in order to maximize the value and interest in your site. Cookies are small files that your JavaScript program can leave on a user’s computer, containing information that your web page can read and use the next time the user visits.

In addition to not saving cookies in the first place, sometimes users delete cookie files when cleaning up their computers. So if you plan on integrating cookies into your website, you will have to write code that can work either with or without cookies—sounds like a job for our favorite conditional statement, if!

username=Rebecca

Cookies can store multiple pieces of information, allowing you to keep additional data. For example, you can store the last time the user visited your site, or if you had three stores, you can remember which store location is the closest to your visitor. Then when they return to your site, you can use this data to make their web experience more personalized. Think of it as similar to patronizing a restaurant repeatedly and the feeling you get when they greet you by name and know your favorite dish.

Cookies do have some limitations. Spaces are not allowed in them and many of the punctuation characters, including parentheses, exclamation points, the number sign, and the dollar sign, are not allowed. Before you think no characters other than digits and letters are allowed, it’s not that simple (is it ever?)—you can use the at symbol (@) as well as +, -, and /, as well as a few others. Don’t worry about memorizing which symbols can and cannot be used in a cookie; JavaScript has built-in methods that replace the not-allowed characters with their hexadecimal equivalent as well as a second method that will convert a cookie with hexadecimal characters back to their original values. For example, if you ask a user for their first name, and they enter “Mary Lou”, setting the string through the escape method will turn the string into “Mary%20Lou”. The % symbol is a clue that the next two digits represent a converted character—in this case, 20 is a space. You may be able to guess from this that the percent symbol (%) is also a not-allowed character in cookies, and % is changed to %25.

Just as escape(string) will turn a specific string into an acceptable format to be stored in a cookie, unescape(string) will take a converted string and turn it back to normal. This will become more clear when you see the code example later in this hour.

TABLE 11.1 The properties of a cookie

Click here to view code image

function writeCookie()
{
       var custName = prompt("What is your name?");
       //Now make sure all characters in the name are cookie legal!
       cookieName = escape(custName);
       //Will now set a cookie with a cookieName of name
       // and a cookieValue of the cookieName string post escape method
       document.cookie = "name=" + cookieName;
       alert("We've created the cookie name="+cookieName);
}

If you put that function in the header of an HTML file and then call it from the body of your HTML file, you will be prompted to enter a name. If you enter a standard first name, you’ll see that name. So I’m going to enter my stage name, D!J Skribble23(), a combination of letters, numbers, and a few odd punctuation marks. JavaScript will tell me it is setting the cookie name=D%21J%20Skribble23%28%29.

However, this cookie will expire as soon as the browser closes. That’s not a valuable cookie. Let’s say you want to keep the cookie for about three months after it’s created. To do that, you need to add the following code lines to your function above (after the alert line, but before the closing brace):

Click here to view code image

      var expDate = new Date();
      expDate.setTime(expDate.getTime() + (90*24*3600*1000));
      var expireDate = expDate.toUTCString();
      document.cookie += "; expires="+expireDate;

Hopefully these lines aren’t too confusing. The first line creates a variable named expDate and populates it with today’s date using the new Date() method, which automatically sets your variable to the current day and time. However, we don’t want that to be the expiration date—we want the cookie to not expire until 90 days in the future. So we will use the setTime method to set a new time on our expDate variable by using the getTime method to get the current time and then add enough to move the time 90 days in the future. That’s what that string of numbers does. It takes the number of days (90) times the number of hours in a day (24) times the number of seconds in an hour (3,600) times the number of milliseconds in a second (1,000). Thankfully, JavaScript will do all that multiplying for you. Now expDate has the time 90 days in the future, but as mentioned in Table 11.1, the time must be in UTC format. Luckily, JavaScript has a method that will do that conversion for you, toUTCString. Now you can use the concatenation operator (+=) to add an "expires=" and your expiration date to your cookie, which has a name and an expiration date.

Great, so we can easily set a cookie name with little work. But how valuable is that if we cannot read the cookie’s value and do something with it. The next section discusses how to read cookies.

How will you know if you have multiple attributes in your cookie string? Each is separated with the semicolon. JavaScript has a method that splits a larger string into an array of smaller strings, using a character you specify. For example, say you have the following cookie string:

Click here to view code image

cookieString="name=Sandy;domain=www.jamemc.com;path=/documents";

If you use the split method and assign it to an array as follows:

Click here to view code image

var cookieArray = cookieString.split(";");

you would create a 3-item array with the following elements:

Click here to view code image

cookieArray[0] = "name=Sandy";
cookieArray[1] = "domain=www.jamemc.com";
cookieArray[2] = "path=/documents";

You are now in a position to look for a specific name=value pair within your array of cookie values. You just need to loop though the elements of the array and check whether the beginning of a specific element matches the name you are looking for. The following readCookie function will loop through the exploded out array created from document.cookie and check whether the name= exists within the code

Click here to view code image

function readCookie()
{

        // Get all the cookies pairs in an array
       var cookarray  = document.cookie.split(';'),

        // Now set up the element we want to find
       cooksearch = "name=";
       //Loop through the array elements
       for(var i=0; i<cookarray.length; i++) {
              var startcook = cookarray[i];
              if (startcook.indexOf(cooksearch) == 0) {
                      var aa = cooksearch.length;
                     var bb = startcook.length;
                     Cname = unescape(startcook.substring(aa, bb));
                     alert("Found cookie! " + Cname );
              }
       }

}

This code will loop through each of the pieces of your document.cookie and search for a substring that matches the one you are looking to find. Using a for loop that goes from 0 to the number of elements in the array, each element is checked whether they’re a match. If there is, a new variable, Cname, is set to the string (after you’ve run the unescape() method on the substring to ensure there weren’t any character conversions when the cookie was initially saved). This code then generates an alert box to tell the user the name was found, but that’s a poor use of the information. It would be far better to return Cname to the point in the code.

For example, to change the date to 90 days before, you can use the same code as last time, but subtract our mathematical formula instead of adding it:

Click here to view code image

function deleteCookie() {
       var expDate = new Date();
       expDate.setTime(expDate.getTime() - (90*24*3600*1000));
       var expireDate = expDate.toUTCString();
       cookieString += "; expires="+expireDate;
}

---

Try it Yourself

Let’s put this all together in an example that takes a user’s name and saves it in a cookie. The code will check to see whether the cookie already exists, and if it does, it will parse out the name and use it in a “welcome back” greeting. Rather than just do that, the cookie functions are integrated into the Fran’s Place website from the previous hour, so now this page has a scrolling text box, interactive photos, and cookies:

Click here to view code image

<!DOCTYPE html>
<html>
<head>
<script>
// Set the scrolling message, and you can add as many pieces
// as you want
var scrollMsg = "We are open Daily from 9AM to 10PM...";
scrollMsg += "We've got the largest variety of products";
scrollMsg += " in the tri-state area...";
scrollMsg += "Our prices will not be beat!...";

//Our three product information functions
function Product1Info() {
       alert("Summer product! On sale until Labor Day for $9.99.");
       }
       function Product2Info() {
       alert("One of our bestsellers! A bargain at $19.50.");
       }
       function Product3Info() {
       alert("Everyone could use one of these at $1.99!");
       }

//The scrolling function
var beginPos = 0;
function scrollingMsg() {
document.msgForm.scrollingMsgBox.value =
scrollMsg.substring(beginPos,scrollMsg.length)+scrollMsg.substring(0,beginPos);
beginPos = beginPos + 1;
if (beginPos > scrollMsg.length) {
beginPos = 0
}
window.setTimeout("scrollingMsg()",100)
}

function readCookie(c_name)
{
       var c_value = document.cookie;
       var c_start = c_value.indexOf(" " + c_name + "=");
       if (c_start == -1)
        {
              c_start = c_value.indexOf(c_name + "=");
        }
       if (c_start == -1)
       {
              c_value = null;
       }
       else
        {
              c_start = c_value.indexOf("=", c_start) + 1;
              var c_end = c_value.indexOf(";", c_start);
              if (c_end == -1)
               {
                     c_end = c_value.length;
              }
              c_value = unescape(c_value.substring(c_start,c_end));
        }
       return c_value;
}

function writeCookie(c_name,value,exdays)
{
       var exdate=new Date();
       exdate.setDate(exdate.getDate() + exdays);
       var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
       document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
       var username=readCookie("username");
       if (username!=null && username!="")
       {
              alert("Welcome again " + username);
       }
       else
       {
              username=prompt("Please enter your username:","");
              if (username!=null && username!="")
               {
                     writeCookie("username",username,365);
              }
        }
}
function loadfunctions()
{
       scrollingMsg();
       checkCookie();
}
</script>
</head>
<body BGCOLOR="WHITE" onload="loadfunctions()">

<h1>Fran's Place<br>Shop our inventory!</h1>
We've got everything you need!<br>

<img src ="product1.jpg" height="300px" width="200px"
border="5" style="border-color:blue;" onmouseover="Product1Info()" /></div>
<img src ="product2.jpg" height="300px" width="200px"
border="5" style="border-color:red;" onmouseover="Product2Info()" /></div>
<img src ="product3.jpg" height="300px" width="200px"
border="5" style="border-color:black;" onmouseover="Product3Info()" /></div>
<form name="msgForm">
<input type="text" name="scrollingMsgBox" size="88">
</form>

<p>&nbsp;</p>
<p><b>Thanks for Shopping at Fran's Place</b>.</p>
</body>
</html>

The first time a user visits the site, they see the dialog box in Figure 11.1.

FIGURE 11.1 Cookies can become part of any of your websites.

However, with subsequent visits, they are greeted with a personalized dialog-box greeting instead of the prompt as seen in Figure 11.2.

FIGURE 11.2 Who doesn’t like being remembered?

---

One additional code note here. Again this program uses the onload() function during the body declaration. However, I wanted to load two distinct methods—both the scrolling message box method scrollingMsg() and the new method to check for a cookie checkCookie(). So I created a new holding method loadfunctions(), which is called when the page loads and it in turn, calls my two methods. You can put several functions in such a holding function, but don’t overdo it as it can slow the loading time of your page.

As mentioned at the beginning of the hour, this is almost your last foray into JavaScript. You will now jump to a section on OOP using Java before then surveying some additional programming languages and Internet-development tools—if you are missing JavaScript by then, you will be reunited for one last lesson. You can also go in other directions with JavaScript by picking up a tutorial like Sams Teach Yourself JavaScript in 24 Hours, which will teach you how to use JavaScript libraries, as well as how to add animation and multimedia files to your web pages using JavaScript.

A. The fears about the security of cookies are largely overblown. Cookies will share aspects of your browsing history with web developers, but they will not share secure information like passwords and account numbers.

Q. How many cookies can I create on my website?

A. While you can create multiple cookies on a website, there is a limit of 20 cookies and 4 kilobytes of cookie data. For most small websites, this is more than enough cookies and storage space. If you find a need to go over the former, you can use some clever methods to store multiple pieces of information in a single cookie, but that is a bit beyond the scope of this book. The information, if you need it, is easy to find in other JavaScript tutorials, and involves combining information into a single cookie and then breaking it back up when you read the cookie.

2. True or false: The following line of code would set a cookie for a visitor’s name:

Click here to view code image

cookie.document(visitorname==bob);

3. What punctuation character separates different cookies and cookie attributes?

4. What attributes must be in all cookies?

5. If you use the expires attribute, what format must the date be in?

6. How do you delete a cookie?

7. Why do you need to use the escape() and unescape() methods when reading and writing cookies?

8. True or false: All cookies must have the secure attribute set.

2. False. The cookie property belongs to the document type, not the other way around. Second, you need to use the assignment operator (=) instead of the equality operator (==). The correct format is

Click here to view code image

document.cookie = "name=bob;";

3. You use the semicolon (;) to separate different cookies or cookie properties.

4. The cookieName and cookieValue attributes must be in all cookies.

5. For all cookies, the expiration date must be set in Universal Coordinated Time (UTC).

6. Set the expiration date for the cookie to a time that has already passed.

7. Certain characters are not allowed in a cookie, so the escape() method converts those characters to hexadecimal format. When reading a cookie, the unescape method will turn those hexadecimal-formatted characters back to their original format.

8. False. The secure attribute is optional.