1. 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.umbrella termweb sitesmarkup languageHTMLclient-side scriptingJavaScriptCSSDocument Object Model

3. Client Side Web Page Processing Browser is the “client” that requests via http a file from the server – This is called a “pull” or “get” request – There is also “push” but this is more complicated Let’s see this “raw” without a browser Mac: Spotlight -> Terminal telnet itm-vm.shidler.hawaii.edu 80 GET /itm352student/test.html HTTP/1.1 HOST: itm-vm.shidler.hawaii.edu (Hit Enter 2x) Windows: Start -> CMD Telnet No Telnet? http://www.wikihow.com/Activate-Telnet-in-Windows-7 (Steps 1-4 only) Browser receives file and processes it as it has been configured – E.g. HTML text is “drawn” – Different browsers may process the file differently! E.g. look of buttons, text boxes etc.

4. 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 JavaScript for client side (2) (1)

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