About the examples
Varous Javascript pages include a spy glass icon around code examples. Clicking on this will display a new window, So you are not confused by all the stuff normally associated with a Drupal page. You can then run/modify and experiment with the basic example, and when finished save the example page locally, as part of your Javascript kit.
To start to build your own personal javascript kit, open the template page as save it in a folder called (say) JavascriptKit to your local machine. Create the stylesheet shown on the template page, and also save that as, allStyles.css in the same folder as your template. As you work through the various examples add them to your Javascript kit for future reference.
All the examples are built on the Template.htm (or Template2.htm) page, both of which are bare bones HTML. The two templates are virtually the same intentionally. The second one is for XHTML where XML and HTML may get mixed together. Initially you can ignore the second one.
The aim is keep as much of the code the same as is possible, so it becomes familiar, and minimises changes. You then only need focus on the particular code that's been changed/added for any particular example, and not get distracted by other spurious changes which are not directly relevant.
The templates include a pair of DIV tags with an id = "output". Most the examples will place any output here, so don't delete them! Occasionally other DIV tags may get added as required. Any variations to the basic template should be referenced in the text.
The tutorials may ask/indicate modifications you can make, to the basic example, or guide you through the steps to build up to the final example. The code may be split between HTML and Javascript. but as a general rule, the main focus will be on the Javascript.
If you are following a How to then during the course of development the text, may refer to the core reference material, where you will find related examples. You should try these as well, since they may provide an additional insight into the code. Inevitably How to's may be (graded) easy, intermediate or difficult, and in the latter two cases, at the start indicate prerequisite material you should have covered first. If you are a novice, don't simply jump in at the deep end, as you'll quickly find your out of your depth. There many different ways to learn any programming language. Once you have a grasp of basic mechanics of Javascript, the How to's are intended to provide alternate paths through the material,depending on where your interests lie. Some bits of javascript you may never need to know.
It is assumed you have a good working knowledge of HTML and an appreciation at least of CSS.
Its a good idea to save any variants as separate examples. e.g. HelloWorld.htm, HelloWorld-1.htm, etc. The example, has some brief introductory text. Your are encouraged to add to, or alter this, so it's in your own words. You should do this anyway, to explain the differences between any variants you create.
Likewise the examples are almost devoid of comments and just focus on the bare code. You must however get into the habit of annotating your code. You can't have to few comments, especially when learning and in development! In live versions of your scripts the comments can subsequently be stripped out.
Double slashes, // denote single line Javascript comments. They can only go at the end of any line of script, or on a line on their own. Any code after the double slashes is ignored. Commenting out script is a good way to isolate bugs. the multi line /* ... */ Javascript comments are especially useful for this purpose.
The example page you open will mostly have the example pre-loaded, clicking on the button(s) in the new window to run the particular example code. Its often easier to understand the code, if you can see what is going on.
You have a choice, make a copy the Template.htm page and give it a suitable name. I suggest you avoid numbering them, as you may wish to change the order at some future point. Add the copy to your javascript kit, then type in the current example yourself. Run, and if necessary debug the code you have typed. While the examples are relatively short, I strongly recommend you do this, to get experience of debugging.
Of course you can cheat, but only yourself. Run the code example, add it to your Javascript kit and tick off another one as done. But what have you learnt?
If after trying to debug the code yourself and get your version working, only then refer to the code in the example window. Compare them to see what the problem is. At least 80% of the time, the problems will be typo's. There is of course the possibility the program in the notes themselves contain a typo, or two in which case we'd appreciate it if you flagged them up.
Typos include capitalisation, e.g. getElementById('output'), this is very important. Javascript more or less follows the conventions for camel back notation. Also note the extra 's' in getElementsByTagName('h3'). Its not unusual to find this added to getElementsById('output'). They also include mismatched quotes.
An essential debugging skill is the ability to read what you actually typed, not what you think, or intended, to type
Why put Javascript inside the head tags?
The <script> ... </script> tags are in the <head> ... </head> tags to keep the javascript away from the content. Anything in the head portion of a web page, including the <style> ... <style> tags will not be displayed. The script tags can be put into the body, and there are occasions when you might want to do this, but you need to be a little careful about this.
The main reason for not doing this is, you are mixing content and program. It is the same reason CSS rules separate format from content. By collecting all your Javascript functions together in one place, you could (if you wish) remove them from the page altogether, and attach them as links to any page that needs to use them.
The form button is typically called run code You can change this to something which more accurately describes the example if you wish. Likewise in many of the examples, the function being tested is called test. Again you can change this to something more appropriate if you wish.
If you decide to combine several functions onto a single page,
