unique visitors counter

JavaScript Cookies

In JavaScript, we set and remove cookies with the document.cookie object. What is a cookie?

[Wikipedia] HTTP cookies, sometimes known as web cookies or just cookies, are parcels of text sent by a server to a web browser and then sent back unchanged by the browser each time it accesses that server. HTTP cookies are used for authenticating, tracking, and maintaining specific information about users, such as site preferences and the contents of their electronic shopping carts. The term “cookie” is derived from “magic cookie,” a well-known concept in unix computing which inspired both the idea and the name of HTTP cookies.

In the example that follows, we’ll look at using cookies in the context of an HTML form. When the user fills it out and opts to have the web page “remember” him the next time he visits, a cookie will be set containing his username.

To set a cookie, we simply insert a name-value pair into the document.cookie object. Example:

document.cookie = ‘username=johnbrown’

Spaces, semi-colons, equal signs are not permitted. In fact, the value part must be specially encoded with the escape() function. Spaces will turn into the familiar %20 and so on. To decode it, we use the unescape() function.

There is a special name that we can include in our cookie called expires which is a date in GMT format.

document.cookie = ‘username=johnbrown;expires=Wed, 31 Oct 2007 18:32:47 GMT’

This instructs the cookie that we would like it to expire on the date above. Please do not try to create a cookie that will last indefinitely. Users have the freedom to delete cookies at will. They often do and the browsers often remove cookies that haven’t been touched for a while.

Here’s how we read the current date and time into a variable

var myDate = new Date()

Here’s the current date and time in GMT format

alert(myDate.toGMTString())

Have no fear. By assigning a value to document.cookie we are not overwriting its contents. Only the name-value pair you are trying to add will be overwritten.

So, this will produce the cookie “username=joebloke;gender=male” without the double quotes of course:

document.cookie = ‘username=joebloke’
document.cookie = ‘gender=male’

Let us say that we no longer need the gender information, how do we delete a name-value pair from the cookie?

We’ll have to assign a null value to the name.

document.cookie = ‘gender=’

That takes care of that.

Now, what if we no longer need our cookie, how do we get rid of it. We’d have to set an expiry date some time in the past.

Take a look at the example that follows:
To download the .ZIP compressed example, click here

Posted in JavaScript, AJAX on October 29th, 2007 by me | | 0 Comments

Web safe colours and the safe palette

Now, in my HTML/JavaScript course that I teach, I suggested to my students how they could quickly and effectively determine if a colour is in the safe palette. Admittedly, the safe palette is not so important in this day and age where few devices connect to the internet with a display showing 256 colours or less.

Background:
6-digit hex codes are used in HTML and CSS
3-digit hex codes are used in CSS

a 6 digit hex code is of the form : #RRGGBB (where R=red digit, G=green digit and B=blue digit)
a 3 digit hex code is of the form : #RGB

what is a safe palette? the safe palette is the set of colours which are guaranteed to display correctly on ALL browsers viewing your page without dithering. there are 216 of them. yes, very limited.

First, the key thing to remember is “666.” 6×6x6 = 216 colours in the safe palette. 256 colours - 40 windows system reserved colours = 216 colours.

a 6 digit hex code can be represented in 3 digit hex code (used in CSS) if the R digits are pairs, the G digits are pairs and the B digits are pairs.

so:
#AA7733 = #A73
#CC00FF = #C0F
#DD9933 = #D93

now,
#AEAEAE has no 3 digit representation for obvious reasons. those pairs aren’t there.

here’s how we determine just by looking at a number if it is in the safe palette or not.

0
0 + 3 = 3
3 + 3 = 6
6 + 3 = 9
9 + 3 = C
C + 3 = F

the safe digits are 0 3 6 9 C and F

so:
#36A is not safe because A is not among the safe digits
#990 is definitely safe
#CCC is definitely safe

and so on…

here’s how we approximate the safe colour from any given 6 digit hex code

given #B71369, how do we find the nearest safe colour?

first.. double up based on the first digit of the R, G, and B pairs.
doubling up would give us:

#BB1166

next step is to write the 3 digit hex code

#B16

next step is to check each digit and see which one of the safe digits it’s closest to:

B is closer to C than to 9
1 is closer to 0 than to 3
6 is safe

our nearest safe colour is #B16

now, have fun with this code. it will dynamically generate the safe palette using javascript.This example uses JavaScript to construct a 216
cell table which shows all the colours of the
safe palette. The example incorporates:

  • DIV containers
  • Functions with return values
  • The IF conditional
  • The SWITCH block
  • document.write, document.writeln
  • Escape codes (\n \’ \”)
  • Error trapping (try-catch blocks)
  • The FOR loop
  • .innerHTML
  • onMouseOver and onMouseOut
  • String concatenation

Download the ZIPped example


See the code in action

Posted in HTML and CSS, JavaScript on October 28th, 2007 by me | | 0 Comments