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
<html>
<head>
<title>Manipulating the DOM</title>
</head>
<body>
<h1>Manipulating the DOM</h1>
<p>This is some text inside a paragraph.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</body>
</html>
DOM – Magic Trick
<html>
<head>
<title>Magic</title>
</head>
<body>
<h1>A Magic Trick</h1>
<p>
<img src="topHat.gif"/>
</p>
<p>Click for the Trick</p>
</body>
</html>
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!
Descargar

Science Fair Project - Seton Hall University