tonero

"hobbies and interests"
other>computing>javascript

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.

Some javascript snippets

 

next

home   •   me   •   walks   •   history   •   photographs   •   other   •   top