1. JavaScript & DOM Client-side scripting

2. JavaScript JavaScript is a tool to automate client side (which is implemented using HTML so far) JavaSript syntax is the simple and as reduntant as PHP (even simplier), so programming is not a problem JavaScript is first of all for on events JavaScript is able to read and write HTML (especially if DOM [html as xml] is used to position output) It is used to validate data

3. Adding JS to html....... sometimes or.... or external...

4. Functions function functionname(var1,var2,...,varX) { some code [return..] } function prod(a,b) { x=a*b; return x; } function prod() { alert(“Alert x”); }

5. Program structure Variables: same as PHP (var x or just use it [x=5]) Conditional: if (condition) {... } else if (condition2) {... } else {... } Switches, operations, loops – the same as we seen in PHP lectures Difference: for (variable in object) { code to be executed } var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW" for (x in mycars) { document.write(mycars[x] + " ") }

6. Alerts ( message boxes ) etc alert("sometext") NB: no debugging in JavaScript therefore alerts are used sometimes by developers to show the debug info Comment: '\n‘ is used as a line break alert(‘Line1’ + ‘\n’ + ‘Line2’); confirm(“sometext”) var r=confirm("Do you want to submit?") if (r==true) { document.write("You pressed OK!") } else { document.write("You pressed Cancel!") } prompt var name=prompt("Please enter your name","Shrek senior")

7. Reacting on event There are different events –http://w3schools.com/jsref/jsref_events.asphttp://w3schools.com/jsref/jsref_events.asp For example: onblur - An element loses its focus onchange - The content of a field was changed onclick – An object was clicked Invoking – ; – Accessing the element from which a function was called –IE: event.srcElement (exist automatically inside) –Firefox: oEvent.target (you have to give the ref on event [oEvent]in Firefox into the function as a parameter using event calling the function) ;... Function Validate(oEvent)

8. Error Try-catch try { if(x>10) throw "Err1" } catch(err) { txt=“Error.\n\n" txt+=“Description: " + err.description + "\n\n“ alert(txt) }

9. Accessing objects methods and properties var txt=“some text" document.write(txt.length) alert(txt.toUpperCase()) Usefull functions isNaN() - Checks if a value is not a number parseFloat() - Parses a string and returns a floating point number parseInt() - Parses a string and returns an integer

10. DOM The HTML DOM is a W3C standard (an abbreviation for – “Document Object Model”). The HTML DOM defines how HTML can be described in a way, that is similar to XML including standard objects, accessing those and manipulating producing/modifying behaviour or the entire HTML document on client.... Or we can say that it represents a well-formed html as a tree So HTML elements, including their text and attributes, can be accessed using DOM and changed

11. DOM objects Window - The top level object that represents a browser window. Navigator – Client browser information History - Visited URLs in the browser Document - Represents the entire HTML document and can be used to access all elements in a page document.body.innerHTML – access to html under body A special object for many different tags Anchor Table - var xCell=document.getElementById('myTable').rows[0].cells[0]; TableRow Form... A standard way of getting a reference to an object using its ID For example in html we had...

12. DOM objects document head forms form elements method links link hrefid body

13. Document object Majour Members –anchors[] - returns a reference to all Anchor objects in the document Like –forms[] - returns a reference to all Form objects in the document document.forms[0].name –Images[] - returns a reference to all Image objects in the document –links[] - returns a reference to all Area and Link objects in the document Like, Majour Functions –getElementById() - returns a reference to the first object with the specified id –getElementByName() - returns a collection of objects with the specified name –getElementsByTagName() - returns a collection of objects with the specified tagname –write() - writes HTML expressions or JavaScript code to a document

14. Table Majour Memebrs & Properties –cells[] - an array containing each cell in a table –rows[] - an array containing each row in a table –border – table border width –width – allows reading/defining the width of a table –className – allows reading/defining the class attribute Majour Methods –deleteRow() - deletes a row from a table –insertRow() - inserts a new row in a table var tbl=document.getElementById('myTable') tbl.insertRow(); tbl.insertRow(0); //inserts as the first row

15. Form Majour Members & Properties –elements[] - an array of each element (control etc) in the form –action – provides access to the action attribute –length - the number of elements in a form –method - provides access to the method attribute Majour Methods –reset() - resets values of all form elements (controls) –submit() - submits a form

16. Moving inside DOM I Access the element to start from via Document object –getElementById() –getElementByName() –getElementsByTagName() var x=document.getElementsByTagName("p"); for (var i=0;i<x.length;i++) { var pp=x[i];.... } Access the element to start from - use root –document.documentElement - returns the root node of the document to browse tags –document.body - is a special addition for HTML pages, and gives direct access to the tag.

17. Moving inside DOM II Move up or down –parentNode –firstChild –lastChild –nextSibling –previousSibling Here you get either somekind node you know exactly where you are and use the node as usually (for examply if you know that it is a table then you use table object properties and methods) A HH1 Hello world! alert( document.body.firstChild.innerHTML) gives HH1 alert( document.body.firstChild.nextSibling.innerHTML) gives “Hello world!”

18. Moving inside DOM II Node info –nodeName If is an element node then it is the tag name If is an attribute node then it is the attribute name If is a text node then it is always “#text“ If is the document node then it is always “#document” –nodeValue If is an element node or the document then it is not available If is an attribute node then it is the attribute value If is a text node then it contains the text –nodeType If is an element then it is equal to 1 If is an attribute then it is equal to 2 If is a text then it is equal to3 If is a comment then it is equal to8 If is a document then it is equal to9 Methods –appendChild() – for example add another “ sajdhasjdh ” into body –removeChild() –replaceChild() –....

19. Other usefull functions and methods Attributes –getAttribute() –setAttribute() tagName Looking at a HTML part –innerHTML –outerHTML – includes the element (and its attributes)

20. Some IE/Firefox differences http://developer.mozilla.org/en/docs/Migrate_apps_from_Internet_Explorer_to_Mozilla Iterating nodes: IE will skip empty spaces, while Mozilla will report those (use nodeType to avoid processing those) Accessing the element from which a function was called –IE: event.srcElement (exist automatically inside) –Firefox: oEvent.target (you have to give the ref on event [oEvent] into the function as a parameter using event calling the function) Accessing the element by name –IE: document.elementName() –Firefox: document.all() Mozilla: no xml tag CSS and postioning and many others