Portlet Factory, Version 6.1.2

 

JavaScript guidelines: coding defensively

Coding your model defensively prevents script errors. Coding defensively involves always checking for the existence of an element before scripting it. For example, events and code can start executing before the page is fully loaded. This means that the script may attempt to access an element before it exists.

Before accessing the element, check whether it exists in the document. Do this by testing whether or not the element is null. If the element is null, it does not yet exist in the object model.

To implement this fix, create a simple function that takes and tests an object. If the test fails, the user receives an error message, and if the test succeeds the code continues to execute as expected. For example: 

function isTheObjectAroundYet(object) { 
  var passed = (object!=null) 
  if (!passed) 
  alert("The page is not completely loaded. 
  Please wait a moment and try again.") 
  return passed  function exampleFunction() { 
  var theformneededtobeprocessed = document.forms["myForm"] 
  if (isTheObjectAroundYet(theformneededtobeprocessed)) {
  // it's okay to script to the form 
  } 
}

This test is appropriate for small, localized tests. However, it may be easier just to test whether the page is loaded. Remember that the onload event does not fire until after the content and all the images on your page have been downloaded. If a user has a slow connection, this means the event may not fire for quite some time. The onload event is necessary in some cases (for example, you want the images to be loaded or you are doing dynamic content in Internet Explorer). However, many times only knowing whether the elements are ready for scripting is required (images that are not yet loaded can still be scripted).

Rather than use the onload event, make the script the last item on your page. For example: 

<SCRIPT> 
  function doLoad() { 
  // This is the script that will 
  // execute when the page content is 
  // loaded 
  } 
</SCRIPT> 
<BODY> 
  ...body content... 
  <SCRIPT> 
  // The last element in your document 
  // is a script calling the doLoad() 
  // function 
  doLoad() 
  </SCRIPT> 
</BODY>
</HTML>

You can create a flag variable for tracking whether the page content is available. This approach can be used instead of testing each individual element. 

<SCRIPT> 
  var isLoaded = false 
  function doSomething() { 
  if (isLoaded) { 
  // run script 
  } 
  } 
</SCRIPT> 
<BODY> 
  ...body content... 
  <SCRIPT> 
  // The last element in your document 
  // is a script that sets the isLoaded 
  // flag 
  isLoaded = true 
  </SCRIPT> 
</BODY>

In summary, script defensively. Do not discount how different timing can affect your scripts since events and scripts can start executing before a page is completely loaded. Test for the existence of objects, and be careful with the onload event and images.

Parent topic: Overview: creating pages Parent topic: Overview: creating pages and forms

Library | Support |