JavaScript Notes

Syntax Example for Inserting JavaScript

   <script type="text/javascript">
     <!--
       ...;
     //-->
   </script>
   <noscript>
       ...
   </noscript>

Events

Note: If you attach code to the onclick event, in theory it should be attached to the onkeypress event as well. However, in practice most browsers trigger the onclick event by a key press as well as a click. Firefox calls the handler twice if it is attached to both events.

The onkeydown and onkeyup events should fire for any key. In IE the onkeypress event only fires if a character is added or deleted (ie it doesn't fire for keys such as the cursor keys) but in Firefox it fires for all keys. The onkeydown and onkeypress events both repeat if the key is held down. See Quirksmode.org.

onload - occurs when the user agent finishes loading a window or all frames within a FRAMESET. This attribute may be used with BODY and FRAMESET elements.

onunload - occurs when the user agent removes a document from a window or frame. This attribute may be used with BODY and FRAMESET elements.

onclick - occurs when the pointing device button is clicked over an element. This attribute may be used with most elements.

ondblclick - occurs when the pointing device button is double clicked over an element. This attribute may be used with most elements.

onmousedown - occurs when the pointing device button is pressed over an element. This attribute may be used with most elements.

onmouseup - occurs when the pointing device button is released over an element. This attribute may be used with most elements.

onmouseover - occurs when the pointing device is moved onto an element. This attribute may be used with most elements.

onmousemove - occurs when the pointing device is moved while it is over an element. This attribute may be used with most elements.

onmouseout - occurs when the pointing device is moved away from an element. This attribute may be used with most elements.

onfocus - occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.

onblur - occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus.

onkeypress - occurs when a key is pressed and released over an element. This attribute may be used with most elements.

onkeydown - occurs when a key is pressed down over an element. This attribute may be used with most elements.

onkeyup - occurs when a key is released over an element. This attribute may be used with most elements.

onsubmit - occurs when a form is submitted. It only applies to the FORM element.

onreset - occurs when a form is reset. It only applies to the FORM element.

onselect - occurs when a user selects some text in a text field. This attribute may be used with the INPUT and TEXTAREA elements.

onchange - occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.

Adding Elements Using the DOM

Create a new element:

newDiv = document.createElement("DIV");

Create a new text string:

newText = document.createTextNode("");

Add the text string as the last child of the new <div>:

newDiv.appendChild(newText);

Add the text string as a child of the new <div>, positioned before anotherChild:

newDiv.insertBefore(newText, anotherChild);

Input Elements

type is officially a read-only property of the input and button objects. IE5 Mac does not allow it to be set, so input and button elements cannot be created using DOM scripting. I use these functions:

function appendChildInput(parent, type) { 
        var string = '<INPUT type="' + type + '">'; 
        parent.innerHTML = parent.innerHTML + string; 
        return (parent.lastChild);
}

// Note: Some browsers need the type to be set to button
//   even though this is not required
function appendChildButton(parent, type) { 
        var string = '<BUTTON'
        if (type != "") { string = string + ' type="' + type + '"'; }
        string = string + '></BUTTON>'; 
        parent.innerHTML = parent.innerHTML + string; 
        return (parent.lastChild);
}

Home