Markup Client-Side Server-Side

Transcription

1 Markup and Scripting for Web Applications Markup Client-Side Server-Side Markup XHTML XML XHTML vs. HTML XHTML MathML WML (Wireless Markup Language) Others? 100s of markup applications based on XML (Extensible ML) Purpose of XHTML Create document structure What about format (how it looks when rendered)? 1

2 Format for Web Applications Cascading Style Sheets (CSS) Try it! Create a Simple Web Page Include: An image, some text, and a link to an external page Use Notepad Name it home.html Structure (Markup) + Format (CSS) = non-interactive, static web pages 2

3 Solution:Scripting Client-Side Web server delivers the scripts to the browser Scripts are run through an interpreter that is part of the browser Server-Side Web server runs the scripts and delivers the results to the browser Why Scripting? Otherwise, the web page will just sit there, unresponsive to user actions Deliver custom or dynamic content (done server-side) Manipulate and display the content returned from the server (done client-side) Send information from the web page by (done clientside) Send information from the web page to a database server (done server-side) Respond to user events by hiding or showing elements on the page, moving elements, or changing colors and fonts (done client-side) Data validation (done client-side and server-side) Client-Side Scripting JavaScript -- most widely used client-side scripting language Invented by Netscape Communications and introduced with Netscape Navigator 2.0 Cut-and-paste JavaScript Web sites allow Web designers to incorporate JavaScript functions without in-depth knowledge of how they work Try it! Many development tools create JavaScript for you 3

4 Try It! Create the page free.html by finding free Javascript on the web and implementing it JavaScript Review Info Object-oriented Runs inside a Web browser Each browser contains an interpreter Manipulates elements on a Web page by means of the Document Object Model or DOM DOM Review DOM is an API for interacting with a Web page DOM is separate from the programming language itself; different languages can implement the same DOM Elements in XHTML documents are hierarchical and are represented in the DOM as a tree structure Each element in the tree is an object with properties p and methods that are defined by the DOM A Web page is represented by a document object Property (example): title property (document.title), gives the title for the page Method (example): write method (document.write), lets you output text DOM provides an interface for user events such as mouse movement or key clicks Javascript is used to access the DOM 4

5 Server-Side Side Scripting Environments PHP Perl Java Servlets ASP.NET Server-Side Side Scripting User's request is fulfilled by running a script directly on the web server to generate dynamic XHTML pages XHTML is returned from the server (and also Javascript and sometimes XML as well) Web server has compiler/interpreter to run scripts before sending pages back ASP (Prior to.net) Microsoft s Active Server Pages Existed prior to.net 7 objects in the object model for the original ASP + a number of server components built on these 7 objects No IDE originally, just type asp code in Notepad and upload to a web server that could run it 5

6 Example of ASP Prior to.net Let s look at server-side scripting prior to.net Download asp.zip 1. Download asp.zip from Blackboard Vista 2. Unzip asp.zip and put its contents somewhere you have access locally Open the File SimpleTime.asp in Notepad Identify the old ASP script by its <% %> tag Everything else is XHTML (basically, or HTML), or javascript 6

7 Open the File SimpleDate.asp in Notepad Identify the old ASP script by its <% %> tag Everything else is XHTML (basically, or HTML), or javascript Upload Files to Web Server Transfer these two files to the class web server Use Visual Studio Demo Open each.asp Page once You Upload the Pages Etc. 7

8 SimpleDate.asp From the browser where you are viewing the contents of the file, choose View Source Compare the result of View Source to the file contents as you view them in Notepad Exactly the same? Differences? Learning Assignment Asks you to do several things 2. Some are based on the ASP code provided in asp.zip Markup and Scripting for Web Applications Markup Client-Side Server-Side 8

9 9