JavaScript Tutorial

User Interface Events

User interface events are those events that are not related to user actions.

  • onload is fired on a window when the page has been completely loaded, on a frameset when all frames have been completely loaded, on an <img> element when it has been completely loaded, or on an <object> element when it has been completely loaded.
  • onunload is fired on a window when the page has been completely unloaded, on a frameset when all frames have been completely unloaded, or on an <object> element when it has been completely unloaded.
  • onerror is fired on a window when a JavaScript error occurs, on an <img> element if the image specified cannot be loaded, on an <object> element if it cannot be loaded, or on a frameset if one or more frames cannot be loaded.
  • onselect is fired when the user selects one or more characters in a <input type="text"> or <textarea>
  • onresize is fired on a window or frame when it is resized.
  • onscrollis fired on any element with a scrollbar when the user scrolls it. The <body> element contains the scrollbar for a loaded page.

The contextmenu Event

A context menu is the one that pops up when someone right clicks an object. The event is oncontextmenu.

Scripting with Forms

Originally, JavaScript was used for processing forms client-side thereby freeing up server resources.

Form Basics

Web forms are HTML <form> elements. The <form> element has all of the same default properties as other HTML elements plus some special extra ones. These are:

  • acceptCharset: The character sets that the server can process. It is equivalent to the HTML accept-charset attribute.
  • action: This is the URI to send the request to. It is equivalent to the HTML action attribute.
  • elements: This is a collection of all controls in the form.
  • enctype: This is the encoding type of the request. It is equivalent to the HTML enctype attribute.
  • length: This is the number of controls in the <form>.
  • method: This is he type of HTTP request to send typically GET or POST. It is equivalent to the HTML method attribute.
  • name: This is the name of the form. It is equivalent to the HTML name attribute.
  • reset(): This method resets all form fields to their default values.
  • submit(): This method submits the form.
  • target: The name of the window to use for sending the request and receiving the response. It is equivalent to the HTML target attribute.

All forms on the page can be found in the document.forms collection. Each form can be accessed in this collection by numeric index or by name attribute. Example:

var firstForm = document.forms[0];
var form1 = document.forms["form1"]

Fields of the Form

The form elements can be accessed through the elements property of a form object (<form>). Elements include <input>, <textarea>, <button>, <select> and <fieldset>. Consider the following:

var form = document.getElementById("someForm");
var field = form.elements[0];

//change the value
field.value = "Another value";

//check the value of form
alert(field.form === form); //true

//set focus to the field
field.focus();

//disable the field
field.disabled = true;

Every form field has a focus() and blur() methods. focus() is used to set the focus on a certain field. To remove focus from a field invoke blur().

Selecting Text in Text Boxes

To select all the text in a <input type="text"> or <textarea> element, invoke the select() method.

When text is selected by the user, a onselect event is fired.

To get the selected text use the selectionStart and selectionEnd

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

Use the setSelectionRange() method to set the selected text programmatically.

textbox.value = "just a test!"
//select all the text
textbox.setSelectionRange(0, textbox.value.length);

Dealing with the Clipboard

These six events are related to the clipboard:

  • onbeforecopy: Fires just before the copy operation takes place.
  • oncopy: Fires when the copy operation takes place.
  • onbeforecut: Fires just before the cut operation takes place.
  • oncut: Fires when the cut operation takes place.
  • onbeforepaste: Fires just before the paste operation takes place.
  • onpaste: Fires when the paste operation takes place.
<< < [Page 18 of 22] > >>