Lesson 19

JavaScript errors

• Since JavaScript is an interpreted language, syntax errors will usually cause the script to fail.

• Both browsers will provide error messages which can be very helpful in debugging JavaScript.

JavaScript errors - Netscape

• Netscape has an excellent debugging tool built included.

• Any JavaScript errors will cause a message to appear in the status bar.

• To run the debugger, type javascript: in the location box (don't forget the colon).

• Even if you normally use IE when coding, it can be worthwhile to switch to Netscape to find JavaScript errors.

Errors

• Three types of errors:– Syntax errors– Run-time errors– Logic errors

Javascript Errors

• Syntax errors: code that the interpreter does not recognize

document.writln(“Hello World”)

Javascript Errors

• Run-time Errors: occur when the interpreter encounters code that it cannot handle.

• For example:

<a href="#" onclick="javascript:GeneralFunction()

Javascript Errors

• Logic Errors: occur when there is a flaw in the logic or design of the code. This logic flaw will result in the program executing incorrectly.

For example:

<script>

var multiplyres = 8 + 2;

Document.write(“Eight divide by two is equal to “

+ multipleres);

</script>

Debugging Javascript

• Another example of a logic error:

 var count = 1;

while (count <= 10) {

alert(“The number is ” + count);

}

• Debugging describes the act of tracing and resolving errors in a program

Javascript Errors

• Do not assume that the line specified by an error message is the actual line problem in the program.

• You should use error messages only to find the general location of an error in a program and not as the exact indicator of an error

• Use Tracing (this is the examination of individual statements in an executing program). The alert() method provides one of the most useful ways to trace JavaScript code. You place an alert() method at different points in your program and use it to display the contents of a variable, an array, or the value returned from a function

DHTML

• To most people DHTML means a combination of HTML 4.0, Style Sheets and JavaScript. Dynamic HTML is really just an idea. It is not any of specific technology (such as JavaScript or Active Server Page).

• It uses a many different technologies such as JavaScript, VBScript, the Document Object Model (DOM), cascading style sheets – to create HTML that can change even after a page has been loaded into a browser.

DHTML

• Web pages created with CSS can have their properties changed on the fly (that is dynamically) through a scripting language such JavaScript.

• Adding DHTML to your Web site means that your pages can act and react to the user without continually returning to the server for more data.

DHTML

• Dynamic HTML is simply HTML that can change even after a page has been loaded into a browser.

example: a paragraph could turn red when the mouse moves over it. In other word anything that can be done in HTML can be redone after the page loads.

• To use dHTML you need to be familiar with three different technologies: HTML/XHTML, style sheets, and JavaScript. With the DOM we got a document content model for HTML documents. Creating dynamic HTML documents would not be possible without the DOM.

DHTML

Have you ever worked with two people who can't agree on anything, so you spend more time patching up their differences than getting real work done? If so, then you have all the experience needed to try to build Web pages using DHTML that work with both Microsoft's and Netscape's visions of the DHTML "standard."

DHTML• NOTE: Netscape's vision of Dynamic HTML is a far cry

from Microsoft's. Dynamic HTML pages built following Microsoft's model won't work in Navigator and vice versa

• Pages built following Microsoft's DHTML model (which uses VBScript) probably will not work in Navigator (which requires JavaScript) and pages built using Netscape's DHMTL model don't work well in IE.

• Both Netscape Navigator 4.0 and Internet Explorer (IE) 4.0 embrace Dynamic HTML.

• Do we have to use DHTML at all? Yes but we need to remember the Cross-Browser Compatibility

DHTML

• You should also note:

• Use lowercase event handler names for compatibility with Internet Explorer

• For example, use (onclick instead of onClick). IE can not handle mixed-case event handlers when they're used as an object property such as

document.forms[0].button1.onclick = function

• Name elements using alphanumeric characters only: Navigator 4.0 occasionally ignores elements with non-alphanumeric characters in their names.