1. Dynamic Web Pages Bert Wachsmuth

2. Review  Internet, IP addresses, ports, client-server, http, smtp  HTML, XHTML, XML  Style Sheets, external, internal, inline, selector, properties, ids, classes, elements  MS Expression Web, local and remote web site, synchronization, Dynamic Web Template

3. Homework Visit our homepage http://pirate.shu.edu/ ~wachsmut/  Check the bold sites  Visit my “demo” site Exercise:  Activate the ‘home’ link and change the link colors to yellow. Define styles for a blog entry, which has three components: the date, a title, and the content.

4. Dynamic Web Pages  Static web pages are pages that remain the same when you view their URL (unless they were edited by the page creator).  Everything we created so far via HTML and XHTML were static pages.  Dynamic web pages are pages where some or all of the content is dependent on some conditions or user interaction.  Google’s search results are dynamic, as an example, since their content depends on the user search query and on the current state of the Google database(s).

5. Dynamic Web Pages: Dynamic web pages are created using:  Client-side scripts embedded in an HTML page for processing on the client (your computer)  Server-side programs that are processed on a server computer  A mix of client-side scripts and server-side processing

6. Server Side Scripts  Server-side dynamic pages are generated at request-time by a program running on a server.  response to a user inputting data on a form  web page generated on the fly from data in a database  Server-side programs can be written in many languages:  JSP (Java Server Pages) or ASP (Active Server Pages)  scripting languages such as PHP or Perl  C, C++  anything else that adheres to a protocol called Common Gateway Interface (CGI) Server-side programming requires special access to the web servers and is therefore not suitable for “simple” users.

7. Client-Side Programming:  Client-side programs are embedded inside a web pages and execute on the client  Rely on the assumption that the client (Firefox, IE, Safari, Opera) can understand and process the instructions properly.  The language most commonly used is JavaScript  drop-down menus, form data validation, simple simulations/games, event-based changes

8. Mixed Server/Client:  (Pre-)processing happens on the client to avoid the delay in passing data back and forth to the server  Server processes more complex requests, usually utilizing other resources such as a database.  Google Maps is such a complex, dual purpose “application”.  The hot topic these days: AJAX: asynchronous JavaScript and XML (see http://en.wikipedia.org/wiki/Ajax_(programming)).asynchronousJavaScript XMLhttp://en.wikipedia.org/wiki/Ajax_(programming))

9. Intro to JavaScript  JavaScript is a scripting language used to enable programmatic access to objects within other applications, such as a web browser  JavaScript is easy to learn, weakly typed, object-oriented language with C/C++/Java – like syntax  JavaScript interpreter build-in to all web browsers  Unrelated to the Java programming language  Named as a result of a co-marketing deal between Netscape and Sun, in exchange for Netscape bundling Sun's Java runtime with their then-dominant browser. […]

10. JavaScript Examples  Adding text to a web page (ex1.html)  Add the current date (ex2.html)  Data Types and basic operators  Referencing classes such as Date and Math  Events, buttons, and Dialog Boxes (ex3.html)  Functions (ex4.html)  Input parameters and conditionals (ex5.html)  External scripts  Loops (ex7.html)

11. The DOM  When a web browser reads a proper XHTML document, it constructs a ‘tree’ representation of the data.  That structure is called the Document Object Model, or DOM.  DOM can be manipulated using JavaScript:  the correct way to achieve changes in the layout of a web page  Nicest feature of the DOM  a page is refreshed without reloading when the DOM changes

12. DOM – Expand/Collapse Manipulating the DOM Manipulating the DOM This is some text inside a paragraph. List item 1 List item 2

13. DOM – Magic Trick Magic A Magic Trick Click for the Trick

14. Extended Example  Imagine a cannon that shoots a ball into a square with corners (1,1), (-1,1), (-1,-1), (1,-1).  Assume that the ball always lands inside that square, but at completely random locations  sometimes the balls falls inside a circle of radius 1  other times it falls outside that circle

15. Extended Example  Let:  T be the total number of shots  I be the number of shots inside unit circle  Compute:  4 * I / T  Explain!