There are various ways of doing this... and the Drupal API lists the following:

Common problem when trying to get code to validate via W3C, just wrap it in CDATA tags…

<script type="text/javascript">
    /*<![CDATA[*/
          
          // place javascript here i.e.
          function myFunction () {
                 // do something
          }

    /*]]>*/
</script>

One thing you need to be careful of, and has caught me out a few times when jumping from PHP to Javascript, is ‘new lines’….

In JavaScript a new line suggests the end of a statement and the start of a new one… Where in PHP, the line can continue over several lines and doesn’t stop until you add the semi-colon…

So, two statements could be written like this:

Statement one
Statement two

Or they could be written like this:

In the words of Sitepoints Kevin Yank….

Your variable names can comprise almost any combination of letters and numbers, though no spaces are allowed.

Most punctuation and symbols have special meaning inside JavaScript, so the dollar sign ($) and the underscore (_) are the only non-alphanumeric characters allowed in variable names.

To create an array in JavaScript is pretty straight forward, just declare the variable name equal to empty square brackets, like this:

var rack = [];

To add variables, you just specify the index you want to add the data to, like this:

rack[0] = "First";
rack[1] = "Second";
rack[2] = 3;

However, in PHP you can add info to the list without having to declare the ‘index’ number… (that’s the number in the square brackets)… i.e.

The typical format for a ‘for loop’ to run through the list items in an array is as follows…

var myArray = [1, 2, 3, 5, 8, 13, 21, 34];
for (var i = 0;  i < myArray.length;  i++) {
    //myArray[i] becomes the variable run inside the loop
}

But you’ll notice that every time the loop is run, the length of the array is calculated…. Yet the number is always going to be the same… So we’re just wasting time processing for no reason… We could create a variable outside the ‘for loop’ and use that…. Or declare it when we set the loop up…. Like this:

Basic list of example code you can copy & paste…

var myElement = document.getElementById("elementId");

var listItems = document.getElementsByTagName("li");

for (var i = 0, ii = listItems.length; i < ii; i++) {
    alert(listItems[i].nodeName);
}

var lists = document.getElementsByTagName("ul");
var secondList = lists[1];
var secondListItems = secondList.getElementsByTagName("li");

<script src="stripy_tables.js" type="text/javascript"></script>

Quick Reference guide of dot operators:

The getElementsByClassName() is already present in some modern browsers, but this code from Kevin Yank at Sitepoint just adds it for those browsers that don’t already have it….

Ever had it where your stylesheet contains code that doesn’t validate with the W3C standards…. Yet there’s not an easy way round it? For example ‘opacity’…..

This code adds an additional stylesheet after the page has loaded, allowing you to pop the in-valid code whilst achieving a valid mark from W3C…In this example the stylesheet is called 'invalid_styles.css' and it's in the 'css' folder.