Archive | January, 2002

Setting Cookies

14 Jan

Setting a basic cookie is very easy. All you have to do is create a string in the form of cookie_name=value and then set the document.cookie property to that. The only trick: cookie values must never have spaces, commas, or semicolons. Happily, you don’t really have to worry about this because a pair of functions will code and decode your properties: they are escape() and unescape().
Our simple example, which stored your name as a cookie, looks like this:
function setCookie()
var the_name = prompt(“What’s your name?”,””);
var the_cookie = “wm_javascript=username:” + escape(the_name);
document.cookie = the_cookie;
alert(“Thanks, now go to the next page.”);
The middle two lines of this function are the critical ones:
var the_cookie = “wm_javascript=username:” + escape(the_name);
If I entered “dave thau” at the prompt, this line would create a string that looks like wm_javascript=username:dave%20thau.
This means that I’m going to save a cookie named wm_javascript to the hard drive. That cookie is going to have the value username:dave%20thau – the escape() function replaced the space between “dave” and “thau” with a %20.
When we read the cookie, we’re going to look for the cookie named wm_javascript, then grab the username:dave%20thau, unescape() it, and chop off the username:.
document.cookie = the_cookie;
Reading Cookies
Once you save a cookie to someone’s hard disk, it’s easy to read. Here’s the code that reads the example cookie:
function readCookie()
var the_cookie = document.cookie;
var broken_cookie = the_cookie.split(“:”);
//Split the cookie into two parts at the colon.
var the_name = broken_cookie[1];
//Grab the part after the colon
var the_name = unescape(the_name);
/*Undo the stuff that the escape() function created. In this case, it pulled out the space and dropped in %20. Swap the space back in with unescape().*/
alert(“Your name is: ” + the_name);
If you want your cookie to contain more than just one piece of information, you can make the value of the cookie as long as you want. Say you’re looking to store a person’s name, age, and phone number. You do something like this:
var the_cookie = “username:thau/age:older than the hills/phone:411″;

document.cookie=”my_happy_cookie=” + escape(the_cookie);
As with our simple example, the easy part is setting the cookie. Things get a little sticky, however, when it comes to pulling the information out of the cookie when you need it. I suggest using associative arrays to store all the information. For example, let’s say you saved this to someone’s hard drive:
my_happy_cookie=username:thau/age:older than the hills/phone:411

You could put the information into a handy associative array like this:
function readTheCookie(the_info)


// load the cookie into a variable and unescape it

var the_cookie = document.cookie;

var the_cookie = unescape(the_cookie);

// separate the values from the cookie name

var broken_cookie = the_cookie.split(“=”);

var the_values = broken_cookie[1];

// break each name:value pair into an array

var separated_values = the_values.split(“/”);

// loop through the list of name:values and load
// up the associate array

var property_value = “”;

for (loop = 0; loop

Associative arrays

14 Jan

Associative arrays are just like the array above, except rather than using numbers to index elements in the array, you use words.

var phone_book = new Array();
phone_book[“sleepy”] = “(203) 555-1234”;
phone_book[“happy”] =”(203) 555-2345″;

Split Method

14 Jan

When you have a list of things separated by a delimiter, you generally use split. Say you have a list of names separated by commas – split takes that list and puts each of the names into an array. For example:

var my_friends = “trixie,moxie,sven,guido,hermes”;
var friend_array = my_friends.split(“,”);

for (loop=0; loop “);

This breaks the string my_friends into an array of five elements. (Happily, JavaScript creates the array for you automatically, so you don’t have to use new Array() to create it yourself).

After breaking the string into an array, we loop through it, writing out each friend’s name.


14 Jan

The substring is just like charAt except it can grab entire substrings from a word, not just letters. Here’s the format:

var the_substring = the_string.substring(from, to);
“From” refers to the position of the first character of the substring, and “to” is, strangely enough, one greater than the last position of the substring. Using this weird method to mark the beginning and end of the substring makes it so that subtracting “to” minus “from” gives you the length of the substring:


14 Jan

The charAt finds out what letter is at a certain position inside a string. Here it is in action:

var the_word = “monkey”;

var the_first_letter = the_word.charAt(0);

var the_second_letter = the_word.charAt(1);

var the_last_letter = the_word.charAt(the_word.length-1);

After this, the_first_letter is “m,” the_second_letter is “o,” and the_last_letter is “y.”

determine whether the last letter of a word is a vowel or a consonant.

function vowel_or_what()
var vowels = “aeiou”;

var the_word =prompt(“what’s the word?”,””);

var last_letter =the_word.charAt(the_word.length-1);

if (vowels.indexOf(last_letter) == -1)
alert(the_word + ” ends in a consonant!”);
else {
alert(the_word + ” ends in a vowel!”);


14 Jan

The indexOf finds the location of a set of characters inside a string and tells you where the substring starts.

var the_word = “monkey”; //Let’s start with the word “monkey.”

var location_of_m = the_word.indexOf(“m”); // The location_of_m will be “0,”

var location_of_key = the_word.indexOf(“key”); // The location_of_key is “3”

var cheeky = the_word.indexOf(“q”); // The cheeky is “-1” coz there’s no letter “q” in “monkey.”

A more realistic use of indexOf is:

var the_email = prompt(“What’s your email address?”, “”);

var the_at_is_at = the_email.indexOf(“@”);

if (the_at_is_at == -1)
alert(“You loser, email addresses must have @ signs in them.”);

Variable Var

14 Jan

function fahrenToCelsius(faren)
var temp = (faren – 32) * 5/9;
return temp;

function convertTemp()
var temp = prompt(“what temperature fahrenheit? “,”50″);
var celsius = fahrenToCelsius(temp);
alert(temp + ” degrees Fahrenheit is ” + celsius + ” degrees Celsius.”);

To keep JavaScript from mixing up same-name variables, put var in front of your variables as you declare them. A variable inside a function that’s declared with var is called a local variable, and it only exists inside that function.