Lesson 05 - Review

Review of Lesson 5

Today we focused on forms and what you can do with them. We learned:

Forms and their elements can be named

You can refer to a form element like this:window.document.form_name.element_name

Text field and textarea form elements have value properties

Refer to the value property like this:window.document.form_name.element_name.value; you can set the value by equating it to something, or get the value

Text field and textarea elements understand focus(), blur(), and change() event handlers

When you click on a text field or textarea, the focus event handler triggers; clicking out of one of these elements triggers the blur event handler; if you hit Tab or Return after changing an element, onChange()gets triggered

Forms have an onSubmit() event handler

To stop a form from reloading the page when you click on a Submit button, put onSubmit="return false;" in the <form> tag

Checkboxes and radio buttons have a checked property

You can check and uncheck checkboxes and radio buttons by changing their checked property

Checkboxes and radio buttons have an onClick event handler

Just like links, you can trigger functions when a user clicks on a checkbox or radio button

Selects have an options property that is an array of that select’s options

Just like any array, you can find the length of the options array by typing window.document.form_name.select_name.options.length

You can change the text of an option by messing with its text property

To change the text of the first element of a select you’d type window.document.form_name.select_name.options[0].text='new text';

You can find out which option was selected using the selectedIndex property of the select element

window.document.form_name.select_name.selectedIndex returns the array number, you can then type window.document.form_name.select_name.options[that_number].text to find out what was actually selected

Selects have onChange event handlers

If someone changes the thing highlighted in a select, the onChange handler gets triggered

You can change the URL of a window using window.location.replace('new url');

This was in the homework

You can create a new option for a select element using new Option

Since each option in the options array of a select is an object, you can use new to create a new Option; then you can stick this option into the options array

Today was packed, and it concludes this set of five lessons. We covered a lot of territory, from the basics of computer programming to a major portion of the JavaScript DOM. Not surprising, there’s still much more to learn. We only covered part of the DOM, and there are more than a few interesting JavaScript objects to study. We also didn’t talk too much about making our own objects, nor did we cover all the interesting properties of the Windows object.