Some principles of javascript
JavaScript is a text based code which can run alongside HTML. It can be used to create rollovers or other animation, validate forms, aid navigation, display conditional text.
Not only can javascript modify the HTML it can also modify CSS styles applied to elements.
Each operation consists of an initiation, some logic and the modification or creation of one or more web page elements. Like HTML, javascript is in a state of transition. The original principles developed by the web browser companies is gradually being superceded by a more powerful set based on the W3C Document Object model (W3C DOM) and which allows anything on a page to be monitored and manipulated.
Initiation Parsing of document containing the code Detection of mouseover, mouseclick, onLoad, onFocus, onBlur, onChange etc. within an HTML element |
Logic fixed, conditional, mathematical, iterative, verification, get date etc. |
Manipulation Change an element'sattributes or styles, Create, remove or move element(s), Change data in forms Alert, prevent or inform user |
As browsers developed, more and more conditions could be detected; the initiation was coded inside the element but latest browsers have the detection built into every element. Good code will take account of browser variations, however one cannot guarantee that javascript will be switched on.
The document object model(DOM)
Not all browsers interpret the model in the same way. However, the intent is that, starting from 'document', all elements are represented on the model as nodes, nested elements being branches from that node. Once you have identified an element you can travel along the branch to get at lower elements, (place a dot between each element in the chain in your code). Each element forms part of an array of elements of that type and will have a position within that array. Elements can have an HTML name and/or ID specified, in which case these can be used for identifying the element directly, although which of these is applicable depends on the browser.
Nodes have IDL definition, attributes/properties and methods, depending on node type. The HTMLDocument node is the top of the hierarchy and has the most attributes and methods assigned to it.
The document object has several useful methods for identifying elements on which you want to work:
var variablename = document.getElementByID('thegivenID'); picks the element with the given ID from all elements in the document. From there you can walk the tree.
var variablename = document.getElementsByTagName('sometagname') [n]; picks the array holding all tags of type sometagname and extracts the specific one at array position n.
Syntax ( bits in square brackets optional, not part of statement)
statement | each statement usually includes an assignment operator and ends in ; |
function | declaration: function fnname([var name, var name]) {statements;
[return var name]} use: functionname([value, value]) if a value is returned it is substituted for the function before continuing |
conditional | if (condition is true) {statements;} [ else { statements;}] |
variable declaration | var anyname or var anyname = value or var anyname = new Array() var anyobject = new Object() or var anydate = new Date() etc. |
Operators
assignment | conditions | ||
= | (x=y make x equal to y) | = = | equals |
+= | (x+=y make x equal x + y) | != | does not equal |
-= | (x-=y make x equal x - y) | > | greater than |
etc. | >= | greater than or equal | |
&& | and | ||
| | | or |
Checking for existence
If you try to act on an object that doesn't exist, or use a method that is not supported by a particular browser then you will cause an error. You can use 'if' to check for existence before you call the item concerned:
if (object== null) {return} to check for an object or if (!document.getElementByID) {return} for a method
Styles
chosentag.style.propertyname = 'propertyvalue' where the property name and value are exactly as CSS except that dashes between property name words are replaced by intercaps, e.g. font-family becomes fontFamily.