Dynamic Web Pages

Bert Wachsmuth

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

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.

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

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

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.

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

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

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. […]

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)

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

DOM – Expand/Collapse

Manipulating the DOM

This is some text inside a paragraph.

• List item 1
• List item 2

DOM – Magic Trick

A Magic Trick

Click for the Trick

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

Extended Example

  

Let:

 T be the total number of shots  I be the number of shots inside unit circle

Compute:

 4 * I / T

Explain!