HTML Goodies: Script Tip: Week 60

 

Barney Tip…

     Ever since HTML Goodies was created, the cookie has been the one thing that people hated or that people couldn’t wait to get on their Web pages. I have a tutorial on what a cookie actually is right here. Basically it’s a text file, less than 4K, that a server places on your computer to track, or “remember” things for you.

     Whatever you think about cookies, there’s no denying they’re popular. In this series of Script Tips we’ll get into how you can set, and retrieve, cookies for your visitors.

     The script was originally sent to be posted on JavaGoodies by Giedrius. Usually I alter the scripts for these tips a bit. Not this one. I like it just how the author put it together. I also made a point of keeping his name in the code as author. I would ask you do the same.

     We’ll first get into how this specific script works, and then talk about how we can use the format to create larger, more useful effects. For instance, I altered the script to show two separate messages depending on if this is the user’s first time receiving a cookie or not. One reads “Nice to meet you”. The other reads, “Welcome back”. I’ll show you how to do that after we get through the script it its current state.

     Just to be fair, I should say that this page does set a cookie because of the banner ad above. The cookie this tutorial is going to set will not be placed until you click the link below that shows you the script’s effect.

---

Try out the Script

Note that if you’ve tried the script before,
it won’t give you the prompt – it’ll just say hello.

---

Here’s the Code

---

     The script, actually scripts, aren’t very threatening in the present form. The code first checks to see if it has set a cookie already. If not, it sets one. It then checks to see if the person put in their name the last time. If not, it requests the name again. If a cookie has already been set…it simply displays the name. All these checks means we’re bound to have a whole lot of If statements checking things for us.

     There’s no simple way to attack this script, so let’s just get started from the top down. First, we set a couple of variables and check to see if a cookie exists.

cookie_name = “NameCookie2010”;

var GuestName;



function putCookie()
{

if(document.cookie)
{
index = document.cookie.indexOf(cookie_name);
}

else { index = -1;}

     The first line sets a text string value to the variable name “cookie_name”. Usually I go in and put in “var” before each of these kind of statements, but not now. I left it out to be able to make the point that when setting variable names, the command “var” isn’t needed because the single equal sign implies that that one item is to be representative of the other.

     Yes, you could write this as:

var cookie_name = “NameCookie2010”;

     …but you don’t have to. As the author wrote it, is sufficient.

     The next line does use the “var” command because in this case, the variable name is only being brought into play for later, but as of yet does not have a value assigned to it. We just want to have it in the JavaScript’s memory when we need it later.

     The function putCookie() is actually a little mis-named. This function does not put any cookie. It checks to see if a cookie already exists.

if(document.cookie)

     The If statement asks if document.cookie. Although the text is confusing, remember that “cookie” is actually a property of document. Yes, I know that the cookie does not reside in the document, but rather in a file in another part of the hard drive. That doesn’t matter to JavaScript. Cookie is a property and simply saying document.cookie fires up the process of looking for one. For once, something that should be difficult is easy. Go figure. So…is there a cookie? We need to find out.

     Now the rest of the If statement:

{
index = document.cookie.indexOf(cookie_name);
}

else { index = -1;}

     It attempts to set “index” (a property, the index of something) to equal document.cookie.indexOf(cookie_name). Remember that “cookie_name” is “NameCookie2010”. We set that first thing in the script, remember?

     Notice how we grabbed the cookie. We know that cookie is a property of document just as any form elements would be. That’s why we get to use a hierarchy statement format when going after the cookie.

     The command “indexOf()” is a method that returns the location of a text string.
Basically, the line looks to see if a text string named “NameCookie2010” appears on this computer. If it does appear, then the statement is already true, nothing needs to be set. “index” is already equal to “NameCookie2010”. We have to move on to what follows in the “else” statement.

     The else statement says to set the index to -1 if the other cannot be found. You might remember that -1 is equal to JavaScript’s zero since JavaScript counts zero as a viable number. This command sets the cookie index to null.

     But why? Why not set the cookie right then and there?

     Because it’s not that easy. Besides, the author is not really going to set the index to -1. He only set it there for a moment in order to trigger the next bit of code that actually will set the cookie. That’s next week.

Next Week: Set the Cookie

---

Learn to write your own JavaScripts with the