HTML Goodies: Script Tip: Week 61

 

Big Bird Tip…

     Let’s continue moving down the script. We already know that if there has already been a cookie set, then everything we talk about today has already occurred. But what if this is the person’s first time to get the cookie? Then we need to set up code that places it and writes what we want to it. Let’s do it.

---

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

---

     OK, this is a little backwards so I’m going to describe how it runs. Lat week we basically set up a test that looked for a cookie named “NameCookie2010”. If the cookie was found then the variable “index” was given the value of the location of the cookie. If there was no cookie, “index” was given the value of -1. So what happens if “index” is -1? Well, this:

if (index == -1)

{

GuestName=window.prompt(“Hello! What’s your name?”,”Nobody”);

if (GuestName==null) GuestName=”Nobody”;

document.cookie=cookie_name+”=”+GuestName+”; expires=Tuesday, 05-Apr-2010 05:00:00 GMT”;

}

else

{

namestart = (document.cookie.indexOf(“=”, index) + 1);

nameend = document.cookie.indexOf(“;”, index);

if (nameend == -1) { nameend = document.cookie.length;}

GuestName = document.cookie.substring(namestart, nameend);



{

     It’s yet another If statement, but look at how it’s constructed. If there is not a cookie, then the first part is enacted and a cookie is set. If there is, then the cookie is read and a certain part of is assigned to the variable “GuestName”.

     It’s backwards from the first If statement that check first and then set to place a cookie. This If statement places first and if it doesn’t need to place, reads the cookie. Let’s place it first:

if (index == -1)

{

GuestName=window.prompt(“Hello! What’s your name?”,”Nobody”);

if (GuestName==null) GuestName=”Nobody”;

document.cookie=cookie_name+”=”+GuestName+”; expires=Tuesday, 05-Apr-2010 05:00:00 GMT”;

}

     Let’s say index is equal to -1. First off, the variable “GuestName” is given the value of a prompt. As you can see the prompt pops up and asks for a name. In the text box though is the text “Nobody”. See that above? It’s important.

     The next line checks the variable value. If GuestName equals (double equal sign) null, meaning nothing, then set Guestname to “Nobody”. Now we have a safety net in case the user just simply hit return, thus entering “Nobody”. We also have it set up so that if the user blanked the text box and hit return, then the variable will be set to “Nobody” anyway.

     Finally, we actually set the cookie. The hierarchy statement document.cookie followed by an equal sign sets it for us. We have the text of the cookie to be set first with the name of the cookie itself, then the text the user put in, then an expiration date. Notice the format for the date. You must follow that just as you see it.

     Here’s the text as it appears in the cookie set on my system:

NameCookie2010

Joe

~~local~~/E:HTML GoodiesScripttips

0

3625486336

30069884

1906963680

29301170

*

     First is the name of the cookie, then the word I put in, “Joe”. Next is the location. Notice it’s local. Finally the expiration date in milliseconds because JavaScript counts time in milliseconds.

     So the cookie is set. But what if there already is a cookie? Well, we need to grab what the user wrote. We already know by looking that the text the user wrote is second in the run of text. So we need to grab just that. Here’s the code that does it.

}

namestart = (document.cookie.indexOf(“=”, index) + 1);

nameend = document.cookie.indexOf(“;”, index);

if (nameend == -1) { nameend = document.cookie.length;}

GuestName = document.cookie.substring(namestart, nameend);



{

     As you can see the document.cookie is acted upon using the method “indexOf”. That command returns a location of a string depending on two arguments within the instance (parentheses). In this case, we are interested in the text string set by the cookie.

     First the variable “namestart” is assigned the index of an equal sign and the text of the string. Remember that in this case a text string’s first character is always given the value of zero and the last character is given the value of -1. If you think about it for a moment you’ll realize that that’s JavaScript for beginning and end and JavaScript sees zero as a viable number.

     So we have a method of grabbing the beginning of the string plus one (see the +1)
The equal sign is not shown in the string, but implied as the name jumped to the next line so we’re looking for something that starts with an equal sign in the length of the text string. That’s the word “Joe” above.

     Next, in the script, “nameend” is given the index of a semicolon and the length of the text string. Remember that a semicolon is seen as the end of a line in JavaScript. This denotes the end of the line after the word “Joe”.

     The next line states that if the end of the text is the end of the line of text (nameend = -1) then make “nameend” equal to the entire remainder of the text string. This would come into play if no expiration date were in place and “Joe” ended the line of text.

     Finally, the variable “GuestName” is given the value of what is contained between
“namestart” and “nameend”. That’s the text entered by the user. Now that text is assigned as a text string
to a variable and can be used and posted anywhere on the page…or any other page for that matter since the cookie never goes away.

     Next week we’ll look into what happens if GuestName actually represents the default “Nobody”. We can’t just let that lie now can we?

Next Week: What of “Nobody”?

---

Learn to write your own JavaScripts with the