background
|
|
Hosting
My-Hosts.com
Cheap Hosting, domain registration and design. Check this out for more details.
More icon

RiscOS
Risc OS Info
All you need to know about Risc OS and more.
More icon
|
|
Up Image
Navigation
Search this Site
Enter your search terms

Site Breadcrumb - You are here
|
Thau's JavaScript Tutorial
Lesson 5

by Thau!

Page 11 — 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.

Obviously this is a plug for the next set of lessons. So after you give yourself a minute to catch your breath, dive right into my Advanced JavaScript Tutorial.