javascript - notes

JS notes

Unit Testing JS
============
Selenium plugin for FireFox:

Debugging using browsers:
=========================
-Chrome 3.0.195.27 good at viewing structure. OK at debugging.

-FireFox3.5 with FireBug AddOn - ok at debugging. Possibly better than Chrome, it has a watch facility ?

-IE8 good at catching syntax errors, as it tells you correct line + file


Javascript - by Browser
=======================
-IE7 + IE8 prefer direct use of attributes.
For example:

elem.readonly = true;

NOT:
elem.setAttribute('readonly', true);

OR: JQuery way:
$(elem).attr('readonly', 'true');

IE and Checkboxes:

IE7: -for readonly checkboxes, it is good to use a combination of .readonly, and .disabled, to make sure that the checkbox is actually readonly

-use elem.checked = true; rather than elem.setAttribute('checked','True');

-only call elem.checked AFTER the elem HTML has been assigned (see below)

var fieldDiv = '#' + 'div1';
var fieldInputId = 'CB01';
var tooltip = 'MyCheckbox';
var isWritable = true;
var displayValue = 'True';

var elem = document.createElement("input");
elem.setAttribute("id", fieldInputId);
elem.setAttribute("title", tooltip);
elem.setAttribute("type", "checkbox");
elem.setAttribute("style", "width:145px;");

if (isWritable == true) {
elem.setAttribute("onchange", 'javascript:onChangeCheckbox("' + fieldInputId + '")');
elem.disabled = false;
elem.readonly = false;
}
else {
elem.setAttribute("onchange", 'javascript:void()');
elem.disabled = true;
elem.readonly = true;
}

$fieldDiv.html(elem); //assign the checkbox HTML to the div
if (displayValue == "True") {
elem.checked = true; //IE7 - must be after setting .html()
}

IE and onchange() event
-IE7 can have trouble with the onchange() event, where it seemingly refuses to fire the event,
even when the user moves the focus out of an input control.
-In theory the onchange() event should NOT get fired, when a field is programatically changed.
However, I have seen IE7 do the opposite of what is expected (i.e. fire onchange() for a programitic change, and NOT fire the event, for a user changing focus!)

there are some workarounds to try:
  • try using the onblur() event instead
  • try explicitly invoking onchange() in your own code, when for example to user has selected an 'ok' button
  • OR the JQuery way:
$('inputName').bind('onchange', 'javascript:onChangeName()');

A general discussion on IE7 and the onchange() event:

Browser Tolerance of JS
=======================
-IE7 is probably the worst, and the most popular, browser !
-IE8 is a bit better, but prefers direct attribute use
-other browsers seem to be extremely tolerant (FF3.5, Chrome, Safari)

Javascript - general notes
==================
-using addClass() and removeClass() seems to work just fine on all the browsers mentioned here.

Have heard that .class and .className() have different uses with IE than with other browsers.

-better to use single quotes than double quotes (not sure why?)

-with JQuery plugin - use a callback, rather than an onchange() event.
this is because JQuery is already internally using the onchange() event.

Debugging using VS2008!
=======================
-use VS2008 to debug JS, by creating an empty WebSite project, debugging, and changing browser to whatever URL

-VS provides a really good JS debugger, with most of the features you get when debugging good ol' C++. It is so good, that it almost, almost, makes IE7 a useful browser :)

-VS - can debug on localhost only.
- to debug by IP address, need to deploy to IIS, using Project -> Publish
- you can then run a browser on a remote m/c if necessary - for example, in order to test
different versions of IE ...

For a step by step guide to debugging Javascript in IE7 via VS2008, see this site:

Here is a more general discussion on debugging JS in IE7:

Comments

Post a Comment