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

2. 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.

3. 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)

4. 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

5. 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
Tip: Netbeans and Chrome developer tools will show available properties/methods when you try to access an object

6. 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