December 1, 1999 - Creating Message Loops

December 1, 1999 Creating Message Loops Tips: December 1999 Yehuda Shiran, Ph.D. Doc JavaScript

If you reload this page, you will see a different message. The script on this page holds five different messages. One possibility is to display a random message from the list. However, the user will most likely see some of the messages more than once before seeing them all. Thus, the best solution is to keep track of the last message via cookies. We'll use two standard functions to set and retrieve cookies:

function setCookie(name, value, expires, path, domain, secure) {
  var curCookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
  document.cookie = curCookie;
}
function getCookie(name) {
  var dc = document.cookie;
  var prefix = name + "=";
  var begin = dc.indexOf("; " + prefix);
  if (begin == -1) {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
  } else {
    begin += 2;
  }
  var end = document.cookie.indexOf(";", begin);
  if (end == -1) end = dc.length;
  return unescape(dc.substring(begin + prefix.length, end));
}

Let's define a global array to hold the desired messages:

var ar = new Array();
ar[0] = "Nothing is as easy as it looks.";
ar[1] = "Everything takes longer than you think.";
ar[2] = "Anything that can go wrong will go wrong.";
ar[3] = "Left to themselves, things tend to go from bad to worse.";
ar[4] = "Two wrongs are only the beginning.";

Finally, we need a function and a statement to put everything together:

function getMessage() {
  var now = new Date();
  now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
  var message = getCookie("message");
  if (!message) {
    message = 0;
  } else {
    message = parseInt(message) + 1;
    if (message >= ar.length) message = 0;
  }
  setCookie("message", message, now);
  return ar[message];
}
document.write('<B>Murphy:</B> ', getMessage());

As you can see, our cookie is named message. It expires after one year (365 days), but a new expiration date is set each time the user loads the page. If the cookie isn't found, we initialize the variable message by assigning it 0. Otherwise, we increment the variable, and then initialize it only if it exceeds the last message in the array (ar.length is the length of the array). Note that the parseInt() function converts the value of the cookie (a string) to an integer (a number) so we can use arithmetic operators (parseInt(message) + 1 and message >= ar.length). After updating the cookie, the function returns the value of the current message so it can be written to the document via the document.write() statement. The alert() method can also be used to display the message in an alert dialog box.

The script simply loops through the array of messages by keeping track of the last message's index. The script works flawlessly even if the length of the array is changed (by adding new messages or deleting old ones). For more information about cookies, refer to Column 8, Crispy JavaScript Cookies. For your reference, here's the entire script (which is supported by all JavaScript-enabled browsers):

<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.Array) {
  var ar = new Array();
  ar[0] = "Nothing is as easy as it looks.";
  ar[1] = "Everything takes longer than you think.";
  ar[2] = "Anything that can go wrong will go wrong.";
  ar[3] = "Left to themselves, things tend to go from bad to worse.";
  ar[4] = "Two wrongs are only the beginning.";
}
function setCookie(name, value, expires, path, domain, secure) {
  var curCookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
  document.cookie = curCookie;
}
function getCookie(name) {
  var dc = document.cookie;
  var prefix = name + "=";
  var begin = dc.indexOf("; " + prefix);
  if (begin == -1) {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
  } else {
    begin += 2;
  }
  var end = document.cookie.indexOf(";", begin);
  if (end == -1) end = dc.length;
  return unescape(dc.substring(begin + prefix.length, end));
}
function getMessage() {
  var now = new Date();
  now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
  var message = getCookie("message");
  if (!message) {
    message = 0;
  } else {
    message = parseInt(message) + 1;
    if (message >= ar.length) message = 0;
  }
  setCookie("message", message, now);
  return ar[message];
}
if (window.Array)
  document.write('<B>Murphy:</B> ', getMessage());
// -->
</SCRIPT>