Code Couch » JavaScript

Speed up your Javascript

Jeff — Mon, 26 Jan 2009 12:31:38 +0000

I came across some very interesting and informative articles on Javascript performance improvement from Nicolas Zakas (the author of the newly released Professional JavaScript, Second Edition book):

This is an ongoing series of articles with specific Javascript examples that make sense.

Replacement for “bind” or “bindAsEventListener” in jQuery

Dan — Mon, 15 Dec 2008 20:21:47 +0000

After working for many years with the Prototype JS framework, I decided it was time to bite the bullet and learn jQuery.

There were 3 reasons, really… 1: I’ve just started a new project and don’t need most of the bloat Prototype comes with; 2: I can now make a judgement call when it comes to choosing a framework; and 3: It’s another skill on my CV )

I’ve just spent the weekend reading jQuery in Action cover-to-cover, and I can highly recommend it for intermediate or advanced developers looking to see what it offers.

The one thing I miss from Prototype however are the “bind” and “bindAsEventListener” commands which can set the context (”this”) of the callback – in my case, the instance of a class.

After a bit of searching, I found this post by Andreas Gohr. It was coderjoe’s comment that set the wheels in motion. He showed that you could rewrite this Prototype code:

initialize: function() {
	Event.observe(someEl, 'click',
		this.doSomething.bindAsEventListener(this)
	);
}

as this jQuery code:

init: function() {
	var self = this;
	$(someEl).bind('click', function(eventData) {
		self.doSomething(eventData, self);
	});
}

The bind (and related) method allows you to pass three parameters, however: the event type, some data, and a callback function. If the data parameter is omitted, the callback can be put as the second parameter.

So, we can re-write that last example using the second data parameter, removing the need to set a scoped variable:

init: function() {
	jQuery(someEl).bind('click', {thisContext:this}, function(eventData) {
		eventData.data.thisContext.doSomething(eventData);
	});
}

How to create rollovers without using Javascript

Jeff — Sun, 19 Oct 2008 13:11:10 +0000

You can make use of the :hover pseudo class on the anchor tag to change the anchor’s style attributes. Typically you see this on sites that underline anchors when you mouse over them (when you hover over them). The CSS code to do this simple underlining can look like this:

a { text-decoration: none; }
a:hover { text-decoration: underline; }

We could extend this to change the background and forground colour of the link to make it appear a little more “box-like” using something like this CSS code:

a {
	display: block;
	padding: 5px 10px;
	background-color: #000000;
	color: #FFFFFF;
}
a:hover {
	background-color: #CCCCCC;
	color: #000000;
}

If you wanted to have a background image on the anchor, then you could change the background-image when you hovered over the anchor. The CSS code might look like this:

a {
	display: block;
	padding: 5px 10px;
	background: #000000 url(img/anchor_off.gif) no-repeat left top;
	color: #FFFFFF;
}
a:hover {
	background: #CCCCCC url(img/anchor_hovered.gif) no-repeat left top;
	color: #000000;
}

This technique does suffer from a flaw, however. You will invariably see a flickering as you roll over the anchor for the first time due to the browser having to request the second image (assuming the file isn’t already in the browser cache).

This problem can be fixed by using the same image for both the normal and hover state of the anchor – just reposition the background image on hover. This is presented very well over at A List Apart where Dave Shea introduces the concept of CSS Sprites. The image below (195px wide, 30px high in size) shows how you might set this up:

The image above shows both states of the anchor… the initial state at the “left top” and the hovered state “100px” from the left of the image. The following CSS code shows how you can reposition the background image to show a different image on hover – without the flicker:

a {
	display: block;
	padding: 5px 10px;
	width: 95px;
	height: 30px;
	overflow: hidden;
	background: #000000 url(img/anchor_background.gif) no-repeat left top;
	color: #FFFFFF;
}
a:hover {
	background-position: 100px top;
	background-color: #CCCCCC;
	color: #000000;
}

You may have to deal with all the anchor pseudo classes to get the effect consistent in all browsers, and be sure to define them in the correct order… :link, :visited, :hover, :active.

Finally, Internet Explorer only supports pseudo classes on the anchor element. All other browsers support pseudo classes on all elements. You could use this technique on non-anchor elements, but would be forced to introduce some javascript to support Internet Explorer. A good working example of this is the popular Suckerfish dropdowns CSS menu solution that uses :hover on the list item element and attaches some javascript for Internet Explorer.

Enabling cross-site scripting XSS via an iframe

Jeff — Sun, 19 Oct 2008 12:24:41 +0000

The scenario is relatively common – you have a page that contains an iframe pointing to some content hosted on another domain. Nothing wrong with this – iframes were designed with this in mind! The following diagram shows the sort of setup we are talking about.

Now you want to click a link within the iframe content and have that perform some action on the parent page (maybe you want to submit a form on the parent page, maybe you want to adjust the height of the iframe on the parent page). And you start getting frustrated because the browser won’t let you access all your javascript functions/properties on another domain.

Communication from an iframe that has content from a domain other than the one the iframe is contained within is a constant source of frustration – as browsers prevent this kind of activity due to built-in security policies. The solution is actually relatively painless requiring the addition of an iframe (see the following diagram).

Real world example

You can see a working example of this over at Sky Movies where the iframe is resized as the content within the iframe changes. This is being controlled from within the iframe.

Why do we need to implement a solution like this in the first place?

Because whilst the main page at movies.sky.com can set the height of the iframe, it cannot get the height of the iframe content… and the iframe document can get it’s height but it can’t set the height of it’s enclosing iframe.

An explaination of each component of the solution

Using the following example pages, we can create a demonstration of this technique. Following is the source of the main page (marked as [1] in the figure above) which contains the iframe and the function that will be used to resize the iframe.



	</span></span>Page hosted on example.com<span class="sc2"><span class="kw2">
	 type="text/javascript">
	function resizeIframeHeight(nHeight) {
		var iframe = document.getElementById('mainIframe');
		iframe.setAttribute('height', nHeight);
	}
	

 

	This page is hosted on the example.com domain
	The iframe below is hosted on the example.org domain
	 id="mainIframe" width="400" height="200" src="http://example.org/iframedDocument.html">Iframes not supported.

Following is the source of the iframe page (marked as [2] in the figure above) which contains the extra iframe and some javascript that allows this technique to work.



	</span></span>Page hosted on example.org<span class="sc2"><span class="kw2">
	 type="text/javascript">
	function updateIframeHeight() {
		var iframe = document.getElementById('hiddenIframe');
		var newHeight = parseInt(document.body.offsetHeight,10) + 10;
		iframe.src = 'http://example.com/xssEnabler.html?height=' + newHeight;
	}
	

 
 onload="updateIframeHeight()">
	This page is hosted on the example.org domain
	The iframe below is hosted on the example.com domain (and be styled to be hidden)
	 id="hiddenIframe" width="100" height="100" src="http://example.com/xssEnabler.html">Iframes not supported.

The final source file resides on the original domain (marked as [3] in the figure above) and contains some javascript to strip out the height parameter and then pass this on to the function on the main page that resizes the iframe. It is referred to in the code above, as the content of the file at http://example.org/xssEnabler.html – and whilst it is saved as a .html file, it contains just the code you see below.

<script type="text/javascript">
	function getFirstParamFromLocation() {
		var pair = window.location.search.substring(1);
		var parts = pair.split('=');
		return parts[1];
	}
	var nHeight = getFirstParamFromLocation();
	try {
		window.top.resizeIframeHeight(height);
	} catch(e) {};
script>

Obviously you would not be using example.com and example.org for your solution, they are used merely to identify the different domains you would use for each file.

ReferenceError: console is not defined

Jeff — Mon, 13 Oct 2008 19:50:30 +0000

If you have recently changed your Firefox configurations (and upgraded to Firebug 1.2) then you may have experienced some difficulties with console.log throwing the following error:

ReferenceError: console is not defined

It turns out that this is by design. If you want to make use of the console object that Firebug offers, you need to do so with a call to window.loadFirebugConsole() first.

A little bit of testing, and the following code can be safely put in your javascript source to enable use of the Firebug console object safely (without breaking other browsers).

if (window['loadFirebugConsole']) {
	window.loadFirebugConsole();
} else {
	if (!window['console']) {
		window.console = {};
		window.console.info = alert;
		window.console.log = alert;
		window.console.warn = alert;
		window.console.error = alert;
	}
}

Whilst you are at it, why not check out some of the other nifty commands available on the Firebug console object at the Get Firebug website.

Using AJAX to update the time on a web page from the server

Jeff — Sun, 12 Oct 2008 11:25:19 +0000

Sometimes the easiest way to begin to understand something is through an example. In an attempt to better explain how you can use AJAX to fetch some data from the server and then display it on a web page (without refreshing the page), I constructed the following example PHP page:


if (isset($_GET['xhttp'])) {
	$counter = date("d M Y h:m:s");
	echo $counter;
} else {
?>
<html>
<head>
<title>Test some XHTTPtitle>
<script type="text/javascript">
function getHTTPObject() {
	var xmlhttp;
	/*@cc_on
	@if (@_jscript_version >= 5)
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (E) {
				xmlhttp = false;
			}
		}
	@else
		xmlhttp = false;
	@end @*/
	if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
		try {
			xmlhttp = new XMLHttpRequest();
		} catch (e) {
			xmlhttp = false;
		}
	}
	return xmlhttp;
};
 
function fetchData() {
	http = getHTTPObject();
	http.open('get', "?xhttp=true", true);
	http.onreadystatechange = function() {
		if (http != null && http.readyState == 4) {
			document.getElementById('displayCounter').innerHTML = http.responseText;
		}
	};
	http.send(null);
};
 
function initPage() {
	http = null;
	pageTimerHandle = setInterval('fetchData()', 2000);
};
 
window.onload = initPage;

head>
<body>
	<h1>Test pageh1>
	<p>This page is using AJAX to update the current time every two seconds.p>
	<div id="displayCounter"><?= date("d M Y h:m:s"); ?>div>
body>
html>
 } ?>

This block of code is PHP and basically tests to see whether a (GET) parameter (called xhttp) was passed in to the URL:


if (isset($_GET['xhttp'])) {
	$counter = date("d M Y h:m:s");
	echo $counter;
} else {
?>

If the xhttp GET parameter was present in the URL, then the server time is sent back, otherwise the whole HTML page is delivered. This allows us to deliver two very different “pages” of data back to the browser using the same single PHP file.

The following block of code is used to output the full name of the PHP page being run (the file name) and merely removes the need to specify the file name in the code itself:

= $_SERVER['SCRIPT_NAME']; ?>

The final block of PHP that is prominent in the page is:

= date("d M Y h:m:s"); ?>

This writes out the current date and time to the page (and mimics the same date and time format that will be returned if the PHP file is requested with the GET parameter of xhttp added to it).

Everything else is just HTML and Javascript.

How to prevent page reloading with a non-submitted form

Jeff — Tue, 07 Aug 2007 11:12:03 +0000

The following example page shows how you can test whether a form has been changed, and inform the user if they navigate away from the page without submitting the form (whilst letting them change their mind and remain on the page).

This technique is suitable for IE6, IE7 and Firefox and relies on the onbeforeunload event to allow the user to change their minds and remain on the page (therefore allowing them to submit the form and not lose data).

Note the onsubmit event being added to the form during the initialisation process – this is to disable the onbeforeunload event from running the preUnload() method when the form is actually submitted.



</span></span>Prevent accidental page reload<span class="sc2"><span class="kw2">
 type="text/javascript">
/* check to see if form field values have changed */
function checkForFormChanges()
{
  var l_oForm = document.getElementById('mainForm');
  var l_pInputs = l_oForm.getElementsByTagName('INPUT');
  for (var loop=0, max=l_pInputs.length; loop)
  {
    if (l_pInputs[loop].defaultValue != l_pInputs[loop].value)
    {
      g_bPreventUnload = true;
      break;
    }
  }
}
 
/* method to run as the page is about to unload */
function preUnload()
{
  checkForFormChanges();
  if (g_bPreventUnload)
  {
    var l_sMessage = "You made changes to the form. ";
    l_sMessage += "If you continue, they will be lost.";
    try
    {
      window.event.returnValue = l_sMessage;
    }
    catch(e)
    {
      // swallow firefox error
    }
    return l_sMessage;
  }
}
 
/* clear onbeforeunload event when the form is sent */
function clearUnload()
{
  if (window.detachEvent)
  {
    window.detachEvent("onbeforeunload", preUnload);
  }
  else
  {
    window.onbeforeunload = null;    
  }
}
 
/* initialise the page, attaching the DOM events */
function init()
{
  window['g_bPreventUnload'] = false;
  if (window.attachEvent)
  {
    window.attachEvent("onbeforeunload", preUnload);
  }
  else
  {
    window.onbeforeunload = preUnload;
  }
  document.getElementById('mainForm').onsubmit = clearUnload;
}
 
window.onload = init;



 action="" method="get" id="mainForm">
  
     type="text" name="reason" value="initial"/>
     type="submit" name="submit" value="Send Form"/>

If the contents of the form field in the example above is changed and the page is reloaded (or the user tries to visit another URL), a message will show that allows the user to cancel the page being reloaded etc. This will not happen if the form field contents are not changed (nor when the form is submitted).

Tips on converting strings into numbers

Jeff — Mon, 06 Aug 2007 09:26:41 +0000

When you are reading a value from a text input, the value is returned as a string. This is not really a problem for Javascript in that it’s loosely typed and converting the string into a number is really straightforward.

As with most things, there are several ways to do this conversion. I’ve used parseInt() a lot in the past to convert a string into a number (although strictly speaking I am converting to an Integer rather than just a Number when using parseInt()), but recently ran into some strange behaviour that I wanted to understand.

var l_sValue = "07";
alert(parseInt(l_sValue)); // alerts 7

This seems to work fine, the string represents the number 7, and the parseInt() correctly parses it into the integer 7. Now we change the string value and something strange occurs:

var l_sValue = "08";
alert(parseInt(l_sValue)); // alerts 0

This is obviously not the expected result! The solution is to use parseInt() correctly, and pass through both parameters (the second parameter is the number base to use).

If you do not pass in the second parameter (the base, or radix) then Javascript will default to base 10, unless:

the string starts with ‘0′, then it will default to base 8 (octal)
the string starts with ‘0x’, then it will default to base 16 (hexadecimal)

Because the string we used above started with ‘0′, Javascript defaulted to use base 8. The reason we see 0 being returned from parseInt(’08′) is because 8 is not a valid number in octal (we would count in octal 0, 1, 2, … 6, 7, 10, 11, 12, … 17, 20, 21, …).

Now look what happens when we pass in the second parameter and use (the more familiar) base 10:

var l_sValue = "08";
alert(parseInt(l_sValue, 10)); // alerts 8

Lesson for the day: always pass in the base when using parseInt() to parse a string into an integer.

Creating a coloured gradient background without images

Dan — Wed, 03 May 2006 10:33:23 +0000

Here’s some code to dynamically create a gradient background without using images. The width and/or height of each colour band, as well as the total number of colour bands can be easily changed.

You can use “createGradientV” to create a vertical gradient (North to South), or “createGradientH” to create a horizontal gradient (West to East). Each of the functions takes one or more sets of 4 parameters, documented in the code.

To add more colour bands, simply add more sets of parameters to the relevant “createGradient” method calls.

This code has been tested working on IE/Win 6, NN/Win 7, Opera/Win 7, FF/Win, FF/Mac, and Safari/Mac. It does NOT work on IE/Mac (tested on version 5.22).

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="content-language" content="en" />
    <title>Gradient Backgroundtitle>
 
    <style type="text/css">
        body {
            padding: 0px;
            margin: 20px;
            background-color: #00CCFF;
        }
 
        #fadeBandsV {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 80px;
            z-index: 1;
        }
 
        #fadeBandsH {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            z-index: 1;
        }
 
        #fadeBandsV div {
            overflow: hidden;
            position: absolute;
            width: 100%;
        }
 
        #fadeBandsH div {
            overflow: hidden;
            position: absolute;
            height: 200px;
        }
 
        #pageContent {
            position: relative;
            z-index: 2;
        }
    style>
 
    <script type="text/javascript">
    
    script>
head>
 
<body onload="drawGradient();">
    <div id="fadeBandsV">div>
    <div id="fadeBandsH">div>
    <div id="pageContent">
        <h1>A test headingh1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lorem. Proin laoreet fringilla sem. Pellentesque malesuada, urna tristique ornare feugiat, turpis wisi ultrices nisl, ac vulputate dolor justo non sapien. Sed fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at nulla. Maecenas tortor nulla, adipiscing eget, auctor sed, cursus id, quam. Suspendisse at sem nonummy orci lobortis ultrices. Proin odio est, dictum id, dictum nec, ullamcorper sit amet, sem. Proin ullamcorper lacus vitae risus. Nulla feugiat posuere erat. In nec est ac eros lacinia congue. Suspendisse potenti. In a ipsum rhoncus ipsum volutpat consectetuer.p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lorem. Proin laoreet fringilla sem. Pellentesque malesuada, urna tristique ornare feugiat, turpis wisi ultrices nisl, ac vulputate dolor justo non sapien. Sed fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at nulla. Maecenas tortor nulla, adipiscing eget, auctor sed, cursus id, quam. Suspendisse at sem nonummy orci lobortis ultrices. Proin odio est, dictum id, dictum nec, ullamcorper sit amet, sem. Proin ullamcorper lacus vitae risus. Nulla feugiat posuere erat. In nec est ac eros lacinia congue. Suspendisse potenti. In a ipsum rhoncus ipsum volutpat consectetuer.p>
    div>
body>
html>

How do I use the tag?

Jeff — Fri, 23 Dec 2005 14:20:26 +0000

I use Javascript every day in my web projects – and have often been asked for details on how to use the script tag correctly. The W3C have a formal description of the script tag which includes a summary of the required (and optional) attributes.

In the past, browsers have used various techniques to handle the script contents… and this has had a long lasting effect on the way we use this tag in our current projects. The most abused attribute remains in common use today (even though has been deprecated in HTML 4.01 and XHTML 1.0 Strict) – the language attribute. Instead of specifying the language, it is now standard to specify the MIME type through use of the type attribute – and it is important to note that this is the only required attribute for the script tag.

Inline Javascript

If you are including some Javascript in the document itself, then you would use a construct similar to this:

<script type="text/javascript">
alert("Hello world!");
script>

If you are delivering this content in a document that is using an XHTML doctype, then you should comment the data between the script tags (if you are unable to include it as an external Javascript file – see below) so that it is not parsed client-side. In the past you would often see a similar technique in use to “hide the code from older browsers” (note that the following example shows the correct way to use comments in an XHTML document using CDATA):

<script type="text/javascript">
//
alert("Hello world!");
//]]>
script>

There is no point using the CDATA comments above in a non-XHTML page at all. Nor is there any value in using the following kind of comments (whether you are working on an HTML or an XHTML document). This commenting was widely used to prevent “old browsers” seeing the Javascript. Nobody uses these “old browsers” for regular web use (and if they did, most web sites that use Javascript would break anyway)… so there is absolutely no point in including the comments:

<script type="text/javascript">
//
script>

Linked Javascript

If you are including an external Javascript file in the document, then you would use a construct similar to this:

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

The only difference between inline and linked Javascript is that the latter uses the src attribute to specify where the linked Javascript file resides.

Setting a default scripting language

When writing well formed documents, you should include information about the default scripting language. This can be done using a meta tag in the document:

 http-equiv="Content-Script-Type" content="text/javascript">

This is good practice, but is not required – especially if the server is already serving linked Javascript files as “text/javascript” (or more correctly: “text/x-javascript”).