WELCOME MAT

Most sites make no distinction between new visitors and long-time regulars, but wouldn't it be nice to take new visitors by the hand and show them around the site, and get them orientated? That's a perfect job for cookies. In this script, we're going to automatically determine if someone has visited the site before and create a special welcome message for new visitors.

This script makes use of only one cookie, which we'll call welcome cookie. There are three possible values for this cookie: Null means the cookie does not exist and the visitor has never been to the site (at least the browser has not). Welcome means the visitor has been to the site before but wants to be welcomed. Nowelcome means the visitor has been to the site before and does not want to be welcomed.

Lets begin by creating a new page and inserting the code below into it:


<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
<!-- 

// Use this function to retrieve a cookie.
function getCookie(name){
var cname = name + "=";               
var dc = document.cookie;             
    if (dc.length > 0) {              
    begin = dc.indexOf(cname);       
        if (begin != -1) {           
        begin += cname.length;       
        end = dc.indexOf(";", begin);
            if (end == -1) end = dc.length;
            return unescape(dc.substring(begin, end));
        } 
    }
return null;
}

// Use this function to save a cookie.
function setCookie(name, value, expires) {
document.cookie = name + "=" + escape(value) + "; path=/" +
((expires == null) ? "" : "; expires=" + expires.toGMTString());
}

// Use this function to delete a cookie.
function delCookie(name) {
document.cookie = name + "=; expires=Thu, 01-Jan-70 00:00:01 GMT" +  "; path=/";
}

//-->
</SCRIPT>

</HEAD>

Now the code that is in the HEAD area is the basic code for storing, calling and deleting cookies. Lets deconstruct the code above. The setCookie() function is used to create a cookie and then save the value to that cookie. Lets take a look at the code for this function:

// Use this function to save a cookie.
function setCookie(name, value, expires) {
document.cookie = name + "=" + escape(value) + "; path=/" +
((expires == null) ? "" : "; expires=" + expires.toGMTString());
}

To use this function properly you need to pass it three things, a name, a value, and an expiration date. The name and values are easy; the expiration date takes a little more work. First, a new Date object, exp, is created. Then we take the current time in milliseconds, found with exp.getTime(), and add the equivalent of 31 more days.
Once you have the cookie saved, you need a way to retrieve it. The getCookie() function scans through document.cookie until it finds the cookie in question and then returns the cookies value. Lets take a look at the wholegetCookie() function:

// Use this function to retrieve a cookie.
function getCookie(name){
var cname = name + "=";               
var dc = document.cookie;             
    if (dc.length > 0) {              
    begin = dc.indexOf(cname);       
        if (begin != -1) {           
        begin += cname.length;       
        end = dc.indexOf(";", begin);
            if (end == -1) end = dc.length;
            return unescape(dc.substring(begin, end));
        } 
    }
return null;
}

Though the getCookie() function is clearly more complex than setCookie(), its easier to use. To retrieve the value of the cookie named myname just pass getCookie() the cookies name, like so:

getCookie("myname");

If the cookie exists, the value will be returned. If it doesn't exist null will be returned. You can treat getCookie() like a variable: passing it, displaying it, etc. To display the value of the cookie on the page, for example, combine it with document.write() like so:

document.write(getCookie("myname"));

This displays the value of the myname cookie. Now lets focus on deleting a cookie, the delCookie() function is used to delete a cookie from a cookie file. Just pass delCookie() the name of the cookie you want deleted and the function takes care of it for you. The function simply sets the doomed cookie's value to nothing and expiration to a past date, thus deleting the cookie. Here's the code to delete the myname cookie:

delCookie("myname");

Now that we understand the cookie functions for storing, retrieving and deleting we can focus the welcome mat coding.

Lets begin by configuring some variables like the expiration date of the cookie, the name of the welcome cookie and the welcome message itself. Lets edit the code below, note that we aren't creating code in the order it will appear in the page itself, we are doing it from the easiest and basic steps to the more advanced.

var exp = new Date();
exp.setTime(exp.getTime() +  (24 * 60 * 60 * 1000 * 365));

// This sets the exipration date to 1 year

var cookieName = '_welcome';

// This sets the cookies name, no need to change it unless you feel like re-writing the code later on // Your welcome message:

var theMessage = 'Since this this is your first time here...';

Now we need to create a function that determines wether or not the visitor is new and, if so, displays the welcome message. This function, called showWelc(), is show below:
// Function to display welcome message if new visitor.


function showWelc() {

if (getCookie(cookieName) == null ||
// Is the cookie value null
getCookie(cookieName) == "welcome") {
// or "welcome"?
setCookie(cookieName, "welcome", exp);
// If so, set the welcome cookie
document.write(theMessage); // and display the greeting } else {

setCookie(cookieName, "nowelcome", exp);
// Otherwise set to "nowelcome" } }
If a visitor has never been to your site before then the welcome cookie will be null because it doesn't exist. If the cookie value is null or welcome, the welcome message is displayed using document.write() and the welcome cookie is reset to welcome so it doesn't expire (at least not for 365 days). If the welcome cookie is set to nowelcome, then the cookie is reset to that same value to keep it fresh.
No we need to create a function that toggles the value of the welcome cookie between welcome and nowelcome. This function, toggleWelc(), is show below:
// Function to toggle welcome message.
function toggleWelc() { if (getCookie(cookieName) == "welcome") setCookie(cookieName, "nowelcome", exp); else setCookie(cookieName, "welcome", exp); }

Whenever this function runs it toggles the value of the welcome cookie between welcome and nowelcome using an if statement. In other words it turns the display of the welcome message on and off.
Now we need to create a form that will let the user choose if they wish to be welcomed or not. This function, called showForm(), is shown below:
// Function to display a form that allows welcome message to be toggled.
function showForm() { if (getCookie(cookieName) == null || getCookie(cookieName) == "welcome") { document.write('<FORM></INPUT TYPE = "CHECKBOX" onClick = "toggleWelc()">'); document.write('Don\'t show this welcome message again. '); } } The form is simply a single checkbox that runs toggleWelc() via the onClick even handler.

Now you can put the whole script together as shown below:

<HTML> <HEAD> <SCRIPT LANGUAGE= "JavaScript">  </SCRIPT> </HEAD> <BODY BGCOLOR = "#FFFFFF"> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </html>

Good Luck! Hoped You Have Enjoyed And Learned Something From This Tutorial.

Hosted by www.Geocities.ws