javascript
News
FarewellAfter seven years of writing content for this site I have decided that it is time to move on.
about.com | 04-Sep-2011 06:38
Analog Clocks
Old JavaScript never die, they just get rewritten. In between writing new scripts and tutorials, I occasionally revisit old scripts and look into what needs to be done to update them. Some time after first writing them I revisited both my original analog clock script and also the more recently written multi-clock version to see what needed to be done to modernise them. In the case of the multi-clock version it already has most of the code enclosed within objects to minimise interference from other scripts and completely unobtrusive and so I made just a few minor tweaks to the code to make it slightly shorter without changing the way it works at all. The original script underwent somewhat bigger changes as I reworked the code based on some of what is in the multi-clock version to remove the need for the body script and to make it unobtrusive. There is no point in my also amending it to enclose the code in an object because that would just make it the same as the multi-clock version. If you write your own scripts you will need to revisit them occasionally to bring the code more up to date. The biggest problem when you have lots of scripts is to prioritise which ones to update first.
about.com | 03-Sep-2011 07:41
Slide Show
Let your visitors step through a selection of images one after the other with a JavaScript slideshow. A variation on the mouseover script that will load a succession of images in a "slide show" as your visitor selects the "next" link. They can even go back to the previous image and the entire slideshow wraps around to the first image when they reach the end.
about.com | 02-Sep-2011 13:15
Cycling Banner
Animate your images with JavaScript. You can use JavaScript to replace images on your page at regular intervals. This is useful for when you want to use photos or other images that can't be incorporated into animated gifs.
about.com | 01-Sep-2011 14:30
Tbodies and Rows
The only difference between referencing rows in the thead or tfoot of a table and referencing them in a tbody is that a table can have more than one tbody. In this example we look at how to build two nested loops that will reference every row within each tbody in order to apply a class to every even row in each tbody.
about.com | 31-Aug-2011 10:10
Table Footer
The footer of a table is as easy toreference in JavaScript as the table heading is. We could insert a row the same way as we did with the head except referencing tfoot instead of thead or we can simply call deleteRow to delete a specified row (which would also work for deleting heading rows).
about.com | 30-Aug-2011 11:08
Table Heading
Adding a heading row to a table is as simple as
about.com | 29-Aug-2011 13:07
Table Caption
The DOM call to update a table caption is very straightforward as you can access it directly once you reference the table rather than having to hunt within the table for it.
about.com | 28-Aug-2011 22:03
Switch Fallthrough
In a JavaScript switch statement when a particular case is run it processes all of the code through to the next break statement. This means that the code may fall through past other case statements. This can lead to complications when you are trying to debug the code and you can't tell whether there is a break statement missing before a case statement. By not allowing cases to fall through and run the code of subsequent cases (except where the cases share all identical code) you can remove this problem without having to make significant changes to the code.
about.com | 27-Aug-2011 09:37
Optional Function Arguments
JavaScript functions can accept a variable number of arguments. JavaScript provides a completely different way of making function arguments optional from the way that most programming languages do it. JavaScript's way gives you the maximum possible flexibility.
about.com | 26-Aug-2011 13:05
Unnecessary Wrappers
Some JavaScript statements are unnecessary and confusing. Why would you want to write var num = new Number(6); when writing var num = 6; is not only shorter but also behaves more like you'd expect a number to behave. So which of these wrappers for setting the values of fields in JavaScript are useful and which should you avoid using?
about.com | 25-Aug-2011 09:19
Restrictions With innerHTML
Continuing with our "JavaScript By Example" looking at the Document Object Model we get to to the first of a series dealing specifically with how you can interact with tabular data. The innerHTML attribute first made available in Internet Explorer and now available in all of the common browsers has some restrictions on how it can be used with tables in Internet Explorer (I wonder why the other browsers didn't also implement this sensible restriction?)
about.com | 24-Aug-2011 11:57
Simplifying Creates
Having looked at all the different add, replace, delete etc commands for updating the Document Object Model, it is obvious that actually creating new nodes for our web page is the most complicated in terms of the number of statements we might need. Given that some tags have mandatory attributes that we will need to always apply values to, it makes sense to create functions that will do the creates for us where we can simply pass in values for all the mandatory attributes and get back a new node of the required type with all those attributes already attached.
about.com | 23-Aug-2011 09:51
Replace A Node
Updating the web page by deleting an old node and adding a new node or adding a new node and then deleting the old one doesn't lead to the best experience for our visitors. Fortunately we can combine the two into one step and simply replace a node within the page instead.
about.com | 22-Aug-2011 11:48
Add Before The Current Node
As well as the ability to add a node as the last child node within a specified node, the JavaScript DOM also provides us with a way to add a node before any specified node. Between these two options we can add nodes anywhere at all within the web page.
Add Before The Current Nodeabout.com | 21-Aug-2011 18:44
Ignore Case Sort
The upper and lower case characters have their own separate place in the ASCII sequence that JavaScript defaults to using when you sort an array. We can tell the sort to ignore the case of the letters when comparing them during the sort if we convert them all to the same case during the compare process. While this will add an overhead to the sort as the same entry gets converted to lowercase multiple times, it can be done with relatively little code.
about.com | 20-Aug-2011 18:29
Date Array Sort
JavaScript is flexible in the ways that you can sort arrays. Sorting an array of dates in yyyy/mm/dd order is simple. That doesn't mean that sorting an array of dates in mm/dd/yyyy or dd/mm/yyyy order is hard. You just need to set up the right compare routine for your JavaScript array sort.
about.com | 19-Aug-2011 15:20
Numeric Array Sort
The array sort method normally sorts JavaScript arrays in dictionary order. If your array contains numbers then you will want to override the way the sort compares two values so that you can sort numerically instead.
about.com | 18-Aug-2011 12:00
Add A Child Node
The same appendChild method we have previously used to join two nodes together outside of the web page can also be used to attach a node into the web page. The only difference is that the parent node you are attaching the child node to is already in the web page.
Add A Child Node
about.com | 17-Aug-2011 08:20
Create A Document Fragment
Attaching nodes together using appendChild requires that we are inserting one node as a child of the other. This means that we can't use it if we want to have two or more sibling nodes at the top level of what we are intending to insert into the web page. To resolve this JavaScript allows us to create a special node called a document fragment and attach the nodes to that. When we actually insert a document fragment into a web page the nodes under it will all be inserted without adding the fragment node itself.
about.com | 16-Aug-2011 08:15
Combining Nodes
In the 19th DOM "JavaScript By Example" we look at how to combine two nodes that we have created together before we add them to the web page. By attaching all of the new nodes together first and then inserting it into the page we will have everything appear at once instead of one node at a time.
about.com | 15-Aug-2011 08:10
JavaScript Form Processing - A Complete Example
To finish off the series of tutorials on modern unobtrusive form field validation, I have put together all of the HTML and JavaScript code mentioned in the various examples so as to show you what a completely unobtrusiive JavaScript to validate a form actually looks like.
JavaScript Form Processing - A Complete Example
about.com | 14-Aug-2011 20:17
Modern Combo Box
One of the new form field types that is proposed to be added in HTML 5 is the combo box. We don't need to wait until then to use combo boxes in our forms though because we can use JavaScript to create our own combo box right now. For those of you who don't know what a combo box is, it not only allows you to select an entry from the list, it also allows you to type your own response if the one you want isn't in the list. We can't expand the functionality of a select list to make it into a combo box but we can extend the functionality of a text input field to add the select list functionality to it.
about.com | 13-Aug-2011 08:58
Shuffle
JavaScript can implement PHP like functionality. One thing that PHP makes really easy to do is to shuffle the content of an array into a random order. This is extremely useful when you want to place more than one randomly selected item on the page without duplication. JavaScript doesn't have a shuffle command as such but we can easily add one. We can either have the code look similar to the way the JavaScript array sort method looks by creating a shuffle method or we can make it look exactly like the PHP function.
about.com | 12-Aug-2011 07:10
Unobtrusive Random Images
One of the first things most old books on JavaScript used to teach was selecting a random image to display in a set spot in your web page. Such scripts are easy to write, easy to explain in a book or tutorial, and very hard to alter when you want to make changes to the way it works.
An unobtrusive script to do the same thing is slightly harder to write since you need to understand how the DOM works so as to update the page with your randomly selected image. The script is much easier to update when you want to add additional functionality since the JavaScript is already completely separate from the HTML and it is already using the DOM to add the image. My unobtrusive random image script not only allows you to add one or more random images to your web page by just adding one line of JavaScript for each additional image to be displayed, it also allows you to have the images automatically replaced every so many seconds with just one additional line of code.
about.com | 11-Aug-2011 10:09
Create A Text Node
Adding text into the DOM isn't quite as straightforward as you might expect. Everything in the DOM is a node and so before we can add text to the DOM we must first convert that text into a text node.
about.com | 10-Aug-2011 08:35
Create An Element
The opposite of removing a tag from your web page is to add one. Before we can add a tag though we first need to create it. In this 17th DOM "JavaScript by Example" we look at how to create HTML elements from JavaScript. One thing to note is that an element or node in the DOM consists of both the open tag and its matching close tag (where there is one). If you want to generate invalid HTML from JavaScript you would need to use innerHTML to add it into the web page without updating the DOM.
about.com | 09-Aug-2011 08:29
Remove A Node
In this 16th of the DOM "JavaScript By Example", we look at the easiest of the updates that you can do to the HTML itself - to actually remove a tag from the web page.
about.com | 08-Aug-2011 08:26
Pattern Matching
Continuing on with writing unobtrusive code to do our form validations we come to the new "pattern" attribute that HTML5 adds to the input tag. Here we will consider the code we'd need to add to our unobtrusive form validation script in order to be able to recognise that attribute and apply the validation without relying on our visitors using a browser that actually knows how to apply the validation directly from the HTML.
about.com | 07-Aug-2011 19:05
Concentration/Memory Game
Today's JavaScript game tests your visitors memory. In the card game upon which this script is based two cards are flipped over looking for matching pairs. If the two cards match then the person that flipped them over keeps them. If they don't match then they are turned back and everyone needs to try to remember what they were. At the end the person with the most pairs wins. As the JavaScript version only allows one player at a time we can't really work out who wins by seeing who gets the most matches. Instead of counting the number of successful matches the script times how long it takes to find all of them instead. You can therefore compare how you did between attempts or compared to other people by seeing which is the best time.
about.com | 06-Aug-2011 14:41
Cryptograms
Shake the cobwebs off of those code breaking skills you learned back at school and see if you can work out the substitution cipher my JavaScript generated cryptogram uses. Once you have done that you can then get busy encrypting all of your own favourite phrases using the JavaScript cryptogram generator on the following page and then add the cryptogram JavaScript code to a page on your own site so that your visitors can have some fun trying to break your codes. You never know they might learn something at the same time.
about.com | 05-Aug-2011 09:21
Hangman
Add a fun game to your page or learn more about how JavaScript string objects work. Do you remember playing this simple game when you were younger? Well now thanks to JavaScript you can add the game to your site to allow your visitors to play. The hangman script allows you to create up to 50 or so words or short phrases and one will be randomly selected as the answer to the game. Whenever your visitor makes a wrong guess a further body part is added to the stick figure hanging from the gallows. Ten wrong guesses and the stick figure has been hanged.
You can even use the hangman game for educational purposes by using a theme for your selection of possible answers. For example, how well do you know the built-in objects in the JavaScript language? Find out and have some fun at the same time by playing my example Hangman Game. It doesn't matter if you don't know what a JavaScript object is, you can still have some fun playing the game and visitors to your site will too./p>
about.com | 04-Aug-2011 14:33
innerHTML
While not necessarily the best way to update the content of your web page (since it doesn't update the DOM and so makes it more difficult to apply further updates) the innerHTML property is the quickest way to replace a part of your web page.
about.com | 03-Aug-2011 10:48
Set Styles
You can easily change the way that your web page looks by using JavaScript to dynamically change the styles that are applied to the various parts of your web page. /p>
about.com | 02-Aug-2011 10:44
Preloading Images
Where we have a JavaScript that will be changing the images displayed in the web page we ought to pre-load those images before they are needed in order that the script doesn't have to wait for the images to load. This thirteenth DOM "JavaScript By Example" demonstrates how.
about.com | 01-Aug-2011 10:41
Required Fields
HTML5 defines a "required" attribute that can be added to form fields where we want to require that something be entered. We don't have to wait for browsers to implement this new attribute before we can use it though. If you have been following the series of articles on how to unobtrusively validate form fields using JavaScript then you only need a couple of lines of extra code in order to test for this attribute and apply the appropriate validation.
about.com | 31-Jul-2011 20:59
Semicolons and JavaScript
The semicolons on the end of each statement are optional in JavaScript provided that they would be the last character on a line. Unfortunately, since JavaScript allows statements to be split over multiple lines this leads to ambiguity as to just how some code will be interpreted.
about.com | 30-Jul-2011 09:08
Getting Rid of document.write
The document.write statement was a big part of being able to use JavaScript to update web pages back when JavaScript was first created. Modern web browsers provide much better less obtrusive ways of doing the same updates. Here are some instructions on how you can update your web pages to replace the document.write statements with innerHTML calls instead which will allow you to consolidate all your scripts to the bottom of the page instead of having scripts scattered throughout the HTML.
about.com | 29-Jul-2011 07:41
The Bad Parts of JavaScript
JavaScript includes a number of constructs that have either been superseded by something better or which seemed like a good idea to those who created JavaScript in the first place but which have turned out to be more trouble than they are worth. Here are some of the JavaScript constructs you should avoid as well as some that can be problematic if not used properly (so you should avoid them where possible as well).
about.com | 28-Jul-2011 10:06
Set Attributes
Our next DOM "JavaScript By Example" shows that we can not only read from the DOM but can also update the DOM from within JavaScript. We'll start with the simplest of the updates and progress toward the more complicated ones.
about.com | 27-Jul-2011 09:57
Get Styles
In this eleventh DOM "JavaScript By Example" we look at how we can get more from the current element than just its attributes. We can also get the styles associated with the element (although not necessarily all of them and not necessarily presented in the same way in different browsers.
Get Styles
about.com | 26-Jul-2011 10:49
Get Attributes
Now that we have gone through nine examples of how to access the DOM, we need to next move on to how we can actually access the information associated with those DOM elements. In this example we look at how to get attributes.
about.com | 25-Jul-2011 10:43
Unobtrusive Error Handling
When we validate our form using JavaScript we ideally want an unobtrusive way of displaying error messages (in that we don't want to break the page for those without JavaScript). Unfortunately using alert() is not really suitable as some browsers provide an option in it for turning off JavaScript - as they consider it is for debugging purposes only). In this tutorial we build on the prior unobtrusive form validation tutorials to add the code we need to handle unobtrusive updates to the web page itself to display error messages.
about.com | 24-Jul-2011 23:33
Plain Text Please
One problem that a lot of people who are new to JavaScript have when following the instructions on how to copy someone's script onto their site is that they use the wrong editor (or rather save the output in the wrong format). JavaScript files need to be plain text if you want them to work - saving as rich text or as a Word document are amongst the easiest ways for a newcomer to JavaScript to set up the script so that everything looks right and which then leaves them wondering why the code doesn't work.
about.com | 23-Jul-2011 12:42
The Three Parts of JavaScript
JavaScript can be divided into three parts. Different sets of standards apply to each of the three parts of JavaScript and support for the given standards for each part can vary between browsers.
about.com | 22-Jul-2011 12:07
What Does JavaScript Look Like?
JavaScript is a regular part of web pages. In addition it is an interpreted language. What does this all mean? Well what it means is that you can see for yourself what the JavaScript code used by any web page looks like simply by viewing the source code for the page. Of course there is still the matter of identifying what parts of the source are JavaScript.
What Does JavaScript Look Like?
about.com | 21-Jul-2011 08:22