Children, parents and siblings decribe the relationships for the current element in the DOM tree and whether it contains other elements or not. Every node in the document has several properties such as nodeType which describes what the node is and nodeName which is the name of the elementor and finally nodeValue which is the value of the node, null if it is an element.
Every browser offers the document it displays for manipulation via something called the Document Object Model, or DOM for short. Older browsers supported their own DOMs, but there is a standard one, defined by the W3C, that is supported by most browsers these days.
Adobe Dreamweaver includes behaviors which are built-in JavaScript functions (actions) that are triggered by page events. In the Behaviors panel, you add a behavior to a page by specifying an action (Jump Menu, Open Browser Window, Play Sound, Swap Image, Validate Form, Move Layer, etc.) and then specifying the event that triggers that action.
The weakness of behaviors is that they can only be modified within the Dreamweaver environment and are not a good learning tool. The JavaScript that is generated is very cryptic since it is created to be efficient and cross-browser compatible not easily readable. But if you need to quickly create some interactivity with JavaScript, it is a good alternative.
A regular expression (abbreviated as regexp or regex), often called a pattern, is a string that describes or matches a set of strings, according to certain syntax rules. They are usually used to give a concise description of a set, without having to list all elements.
Many text editors and utilities use them to search and manipulate bodies of text based on certain patterns as well as many programming languages for string manipulation.Check out this great article (.pdf) by Tom Dell' Aringa which reviews what we covered today as well as this neat cheat sheet by Dave Child. There are also many books on this topic if you want to learn more.
Other common objects in JavaScript are the String, Math and Date object. These objects are known as native objects as opposed to previously discussed objects (Form, Image, Element) which are host objects. The difference is that host objects are provided by the environment of the web browser and native objects are provided by JavaScript.
The String object provides properties and methods to get or modify information about strings. The Math object is used for mathematical purposes to give you the values of certain mathematical constants (pi, square root, absolute value, random number). The Date object is another predefined object that enables you to get certain time values (day, month, year).
Continuing from last month's presentation on referencing form fields, we talked today about how to validate a form for required fields, empty fields, non-numeric fields, and how the different types of fields (select, check and radio) are validated differently.
The first step to form validation is intercepting the submit event of the form and creating the necessary wrapper function to execute your validation code. Forms can get extensive, so it is always a good idea to build your script as you build your form. Later on we will continue with this topic when we discuss regular expressions.
Learning how to reference a form element (input, select, radio, textarea) and its value on a web page will prepare you for our next months topic of form validation.
You can set an object reference (remember objects?) to your form initially or even pass a form reference to your function to reduce the code you have to write. If you are trying to reference a value in a select box then you'll need to use the selectedIndex property first and if it's a multi-select box, you'll need to loop through the array to get all items selected.
The Image object is one of the more useful objects in JavaScript because it gives you the ability to manipulate any image within your web page. What we covered today in creating dynamic "roll-over" effects are just part of what you can do with image objects.
A difficult topic to understand is the concept and use of objects. Knowing this concept will help you use JavaScript more effectively and any other programming language since almost of them use objects.
We now have gone through the basics of JavaScript in these past 4 meetings and are ready to cover topics that you can readily adapt to your existing web pages. Next meeting we will be covering images using roll-over effects that are used in many websites today.
Here is a video (.zip) giving you some more explanation of what objects are, narrated by Dori Smith.
Have a safe and happy holiday and I'll see ya next year!
