Introduction to JavaScript and dom

1. Introduction to JavaScript and dom Internet Engineering Spring 2012

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

3. Internet Engineering, Spring 2012 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)

4. Internet Engineering, Spring 2012 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.

5. Internet Engineering, Spring 2012 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

6. Internet Engineering, Spring 2012 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)

7. Internet Engineering, Spring 2012 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

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

9. Internet Engineering, Spring 2012 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 <script></script> tags!

10. Internet Engineering, Spring 2012 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!

11. Internet Engineering, Spring 2012 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.

12. Internet Engineering, Spring 2012 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.

13. Internet Engineering, Spring 2012 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.

14. Internet Engineering, Spring 2012 HTML DOM • Window Object: • Represents the opened window in the browser. • If a document contains frames (<frame> or <iframe> 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.

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

16. Internet Engineering, Spring 2012 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:

17. Internet Engineering, Spring 2012 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).