Javascript and Dynamic Web Pages: Client Side Processing ITM352 Javascript and Dynamic Web Pages: Client Side Processing

DHTML Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model.

Dynamic Web Pages Basic web pages are “static” They are set in advance, not created or modified at request time Dynamic web pages are processed (at least partially) at request time by scripting code to create the output Allows changes at request time There are two opportunities for this (1) on the server after request (2) on the client after the file received Though a “gateway” (CGI) or internal to Browser (API, plugin, etc.) There are many scripting languages PHP is most popular for sever side  processes web page file before browser gets it JavaScript for client side  processes web page file after browser gets it (2) (1)

DOM The Document Object Model (DOM) is the way things in markup (HTML, XML, etc.) documents are represented within a (standards compliant) browser Objects are organized in a tree Logically and for a page Let’s use Chrome tools to look Internal scripting languages such as JavaScript can access and manipulate the DOM

Javascript, HTML, DOM A Javascript “object” is a data structure that is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function, in which case the property is known as a method. An HTML tag is is also a kind of ”object” on a page that has data (usually the stuff between the open/close tags) and attributes which are properties of the HTML element The DOM has a Javascript object representation that is a standard for getting, changing, adding, or deleting HTML elements on a page Access an object through its references to use its properties.methods using the dot “.” <p id="demo">Hello World!</p> console.log( document.getElementById("demo").innerHTML ) You can find the properties and methods for DOM objects in a reference such as http://www.w3schools.com/jsref/ Tip: Netbeans and Chrome developer tools will show available properties/methods when you try to access an object

Using Javascript You can use Javascript Between <script></script> <script>alert("Hello!")</script> As values for an HTML element event attribute <input type="button" value="Press Me" onclick="alert('Hello!');> **TIP** You can use different quotes to separate HTML and Javascript quotes <input type="button" value="Press Me" onclick="alert(this.value + ' says hello!');"> **TIP** The keyword “this” in Javascript will always reference the HTML element you are in In the developer tools console inside a browser alert('Hello!'); Remember Javascript is run by the client e.g. a browser You have no control on if the Javascript will actually execute e.g. user denies scripts You do not know what version of Javascript is available. Different browsers may have different versions or may run the script differently You cannot access much of anything outside the users browser e.g. you cannot load files from a users directory