dynamic web pages bert wachsmuth. review internet, ip addresses, ports, client-server, http, smtp ...
Post on 21-Dec-2015
217 views
TRANSCRIPT
Dynamic Web PagesBert 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!