1 / 15

Dynamic Web Pages

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.

norman
Download Presentation

Dynamic Web Pages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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: asynchronousJavaScript and XML (see http://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 <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>

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

  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!

More Related