1. INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012

2. Preface Until now, introducing a little change causes the entire page to be reloaded from the server. Submit Response Internet Engineering, Spring 2012 2

3. Preface So we have problems on small and rapid page updates. Solutions? Don’t update frequently!! Introduce a mechanism for client-side updates. For client-side updates we need: A programming language (JavaScript) An API for modifying page contents (DOM) Internet Engineering, Spring 2012 3

4. What is JavaScript? JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is a lightweight programming language. JavaScript is usually embedded directly into HTML pages. JavaScript is an interpreted language (means that scripts execute without preliminary compilation). Everyone can use JavaScript without purchasing a license. Internet Engineering, Spring 2012 4

5. What can JavaScript do? JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer Internet Engineering, Spring 2012 5

6. JavaScript Basics Variables: Dynamically Typed Need not to be declared before use. Can be declared using “var” keyword. Have to scopes Local Global Data Types: Only one number type (Double Precession Floating Point). Strings, but no character type. Boolean Null Undefined (Variables that never get value) Internet Engineering, Spring 2012 6

7. JavaScript Basics Arrays: Ordered Collections Are Objects Integer Indexes Have length method Functions: All functions return a value Can have variable number of arguments Supports Object-Oriented Programming Internet Engineering, Spring 2012 7

8. JavaScript Basics To insert a JavaScript into an HTML page, use the tag. Inside the tag use the type attribute to define the scripting language. The and tells where the JavaScript starts and ends: Internet Engineering, Spring 2012 8

9. JavaScript Basics JavaScript can also be placed in external files. External JavaScript files often contain code to be used on several different web pages. External JavaScript files have the file extension.js. Note: External scripts cannot contain the tags! Internet Engineering, Spring 2012 9

10. Events Events are actions that can be detected by JavaScript. Every element on a web page has certain events which can trigger a JavaScript. Examples of events: A mouse click A web page or an image loading Selecting an input field in an HTML form Submitting an HTML form A keystroke Note: Events are normally used in combination with functions, and the function will not be executed before the event occurs! Internet Engineering, Spring 2012 10

11. Some Useful Events onLoad and onUnload Triggers when the user enters or leaves the page. Often used to check the visitor's browser type and browser version. Also used to deal with cookies that should be set when a user enters or leaves a page. onFocus Triggers when the user moves to an element. onBlur Triggers when the user leaves an element. onChange Triggers when the user changes the value of an element. onSubmit Triggers when the user submits a form. Internet Engineering, Spring 2012 11

12. Document Object Model (DOM) The DOM defines a standard way for accessing and manipulating content, structure, and style of documents. The DOM presents a document as a tree-structure. Internet Engineering, Spring 2012 12

13. HTML DOM The HTML DOM is: A standard object model for HTML A standard programming interface for HTML Platform- and language-independent A W3C standard The HTML DOM defines the objects and properties of all HTML elements, and the methods(interface) to access them. In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements. Internet Engineering, Spring 2012 13

14. HTML DOM Window Object: Represents the opened window in the browser. If a document contains frames ( or tags), the browser creates one window object for the HTML document, and one additional window object for each frame. Document Object: Each HTML document loaded into a browser window becomes a Document object. It provides access to all HTML elements in a page, from within a script. Internet Engineering, Spring 2012 14

15. Window Object window.window.window.x is same as x Internet Engineering, Spring 2012 15

16. DOM Nodes According to the DOM, everything in an HTML document is a node. The DOM says: The entire document is a document node Every HTML element is an element node The text in the HTML elements are text nodes Every HTML attribute is an attribute node Comments are comment nodes Example: Internet Engineering, Spring 2012 16

17. DOM Programming Interface The programming interface of the DOM is defined by standard properties and methods. Some DOM properties: x.innerHTML - the text value of x x.nodeName - the name of x x.nodeValue - the value of x x.parentNode - the parent node of x x.childNodes - the child nodes of x x.attributes - the attributes nodes of x Note: In the list above, x is a node object (HTML element). Some DOM methods: x.getElementById(id) - get the element with a specified id x.getElementsByTagName(name) - get all elements with a specified tag name x.appendChild(node) - insert a child node to x x.removeChild(node) - remove a child node from x Note: In the list above, x is a node object (HTML element). Internet Engineering, Spring 2012 17