JavaScript By Example

DOM Tables

Tables have properties and methods not available with other elements that can make accessing and modifying tables easier.

1. innerHTML Restriction - All of the code in the prior DOM examples will also work with tables with one exception.
2. Table Caption - A table can have only one caption and so the specific table properties and methods that reference it make for shorter easier to read code than using the more general DOM calls.
3. Table Heading - As a table can have only one thead element, the table property mytable.tHead is far more effective than using mytable.getElementsByTagName('thead')[0] when you want to reference it.
4. Table Footer - When your table has a footer, the table properties and methods also make it easier to reference.
5. Tbodies And Rows - the table properties that reference these are faster in almost all browsers than using getElementsByTagName.
6. Deleting A Row - is as simple as identifying which row it is you want to delete.
7. Table Cells - As with tbodies and rows there is also a nodelist available within each row that provides access to the individual table cells.
8. Deleting A Column - we also need to delete the specific cells in that column.
9. Adding A Row - means we need to also add all the cells within the new row.
10. Adding A Column - uses similar code to adding a row.

DOM Forms

As with tables, there are additional properties and methods that are specific to form fields. It isn't always better to use those extra properties though.

1. Access Form Fields - From JavaScript it is better to access most form fields by their id rather than their name.
2. Access The Form Itself - The form tag can easily be accessed starting from any field within the form.
3. Accessing Radio Buttons - These are one type form field you can't always access using the id. To access all of the associated radio buttons in a group you need to reference them by name.
4. Changing Values in Forms - As you might expect the value attribute of input fields can be updated via the value property of the corresponding node.
5. Updating Textareas - Possibly not what you would expect from looking at the HTML but a textarea also has a value property even though there is no value attribute.
6. Creating Input Fields - Special coding is required to be able to associate a name with an input field in Internet Explorer.
7. Creating Labelled Input Fields - Generally input fields need to be labelled so our visitor knows what we expect them to enter into each.
8. Changing Type - not needed very often but when it is we need to work around the fact that Internet Explorer will not allow the type to be changed once it is set.
9. Add an Option to a Select - There's a simple way to do this.
10. Getting The Selected Option - There is always an option that is selected within a select list.
11. Submit A Form - Most processing related to submitting the form works with the entire form and not the submit button.

Cookies

The only way to keep information relating to a site without passing it from page to page to page is to use a cookie. A cookie is also the only way to keep information between browser sessions.

1. Write A Session Cookie - A session cookie keeps data until the browser is closed.
2. Write A First Party Cookie - First party cookies are kept until the expiry date/time is reached.
3. Domain Level Cookies - Specifying a domain allows a cookie to be shared with all the sub-domains of that domain.
4. Folder Specific Cookies - Cookies that are specific to a folder cannot be accessed from outside that folder.
5. Flexible Cookie Writing - We can combine the various cookie writing options together to create a single function that can handle alternatives for writing cookies.
6. Replacing A Cookie - You can replace a cookie simply by writing another cookie with the same name.
7. Deleting A Cookie - The same code we use to write cookies can also be used to delete them.
8. Read A Cookie - All the cookies are supplied to the page when it first loads. All we need to do is to extract the individual cookies.
9. Updating A Cookie - The difference between replacing and updating a cookie is that in updating a cookie we first need to read the current value stored there.

Error Handling

We don't have to let JavaScript crash when it finds an error, we can trap and process the errors ourselves. Conversely we can also generate our own error messages when appropriate.

1. Try/Catch - using try and catch blocks we can prevent JavaScript crashing when an error occurs.
2. Finally - this is actually the third part of a try/catch and defines code that is always to be run after the try or catch block finishes running.
3. Throw - allows you to generate your own errors with your own error messages from within JavaScript. This can make debugging scripts much easier.
4. Error Objects - There are a number of different error objects that relate to different types of error in JavaScript. When we throw our own errors we can use the most appropriate predefined error object.
5. Catching Thrown Errors - Combining throw with try/catch allows us to provide our own handling for the errors we throw rather than leaving them for JavaScript to handle.
6. Catching Specific Errors - While a catch block catches all errors we can set it up just to process specific errors by testing whether the error is an instanceof a specific error object. Any errors we don't want to process can be thrown to JavaScript.

• 1
• 2
• 3
• 4