Introduction to Web-Based Systems HTML, XML, and JavaScript

2 © UW Business School, University of Washington 2004 Outline Client/Server Systems HTML XML JavaScript

3 © UW Business School, University of Washington 2004 Client/Server Model Based on the distribution of the three components, N-tier client/server models have been developed Presentation Logic Business Logic DBMS

4 © UW Business School, University of Washington 2004 Two-Tier Client/Server Architecture

5 © UW Business School, University of Washington 2004 Three-Tier Client/Server Architecture Application Server NT/Unix Presentation PC/Workstation Database Server

6 © UW Business School, University of Washington 2004 Client-Server Characteristics Strong emphasis on bringing user- friendliness –Familiar applications and interface to the user Applications are distributed –Different software component on different machines Data are usually centralized –Usually on a relational database platform

7 © UW Business School, University of Washington 2004 Client-Server Challenges Advantages –Scalability –Flexibility –User interface Challenges –Heterogeneous system components Many platforms, versions Quality: difficult to predict –Vendor independence Any choice will limit future options

8 © UW Business School, University of Washington 2004 Web-Based System Architecture SOURCE: INTERSHOP

9 © UW Business School, University of Washington 2004 Traditional vs. Web-based Clint/Server Model User interface –Traditional: platform dependent –Web-based: universal Server –Traditional: server has to communicate with different programs on different platforms –Web-based: only need to generate HTML files

10 © UW Business School, University of Washington 2004 Edit Your HTML File PC –using Notepad –If you have ProntPage, use HTML editor UNIX –Use Pico or vi

11 © UW Business School, University of Washington 2004 HTML A type of SGML (standard generalized markup language) HTML uses paired tags to markup different elements of a page Tags are not case sensitive

12 © UW Business School, University of Washington 2004 A Simple HTML File A Simple HTML Example HTML is Easy To Learn Welcome to the world of HTML. This is the first paragraph. And this is the second paragraph.

13 © UW Business School, University of Washington 2004 Paragraphs in HTML  Carriage return in an HTML file is not interpreted –Use to change line –Use to start a new paragraph  Any number of white-spaces are compressed into a single one

14 © UW Business School, University of Washington 2004 Lists Unnumbered Lists: apples bananas grapefruit Numbered Lists: oranges peaches grapes

15 © UW Business School, University of Washington 2004 Inline Image Syntax: Attributes: SRC="image_url" ALIGN="bottom", "middle", "top" –ALIGN tells the browser how to align the image with the neighboring text. HEIGHT="n", WIDTH="n" –HEIGHT and WIDTH specify the display height and width (in pixels) for the image.

16 © UW Business School, University of Washington 2004 Hyperlinks  The most important capability of HTML  Both text and image can serve as anchors for the link University of Washington

17 © UW Business School, University of Washington 2004 Control the Font Text resize the text text define the font size define the fond face browser will try arial first, then elvetica of arial is not present Bold Italic center line break

18 © UW Business School, University of Washington 2004 Table Basic tags defines a table in HTML the title of the table a row within a table a table header cell a table data cell with the text aligned left and centered vertically Attributes BORDER - appearing in the TABLE tag ALIGN - can appear in CAPTION, TR, TH, or TD - values: left, center, and right, e.g. align=center. VALIGN - can appear inside a TR, TH, or TD - values: top, middle, bottom. WIDTH=

19 © UW Business School, University of Washington 2004 A Table Template Table Name first header cell contents last header cell contents first row, first cell contents first row, last cell contents last row, first cell contents last row, last cell contents

20 © UW Business School, University of Washington 2004 XML eXtensible Markup Language Derived from SGML – Standard Generalized Markup Language HTML is also a special SGML

21 © UW Business School, University of Washington 2004 What’s Wrong with HTML Presentation-oriented publishing Lack of structure HTML does not allow you to define your own tags Functions of XML –Enable structured data interchange –Distributed processing

22 © UW Business School, University of Washington 2004 An Example XML Sean McGrath XML, Internet

23 © UW Business School, University of Washington 2004 JavaScript Scripting language JavaScript has nothing to do with Java. JavaScript runs on the web browser - client- side.

24 © UW Business School, University of Washington 2004 JavaScript: What It Can and Cannot Do Control document appearance and content –Generate documents from scratch Control the browser –Window object has methods to pop up dialog boxes & get inputs –Create & open new windows –Control over which Web pages are displayed Interact with document content –Form verification

25 © UW Business School, University of Washington 2004 Objects JavaScript is object-oriented Two basic objects –window: browser windows –document: HTML documents Objects have properties –object_name.property_name – e.g. image.width, image.height Methods Even handlers

26 © UW Business School, University of Washington 2004 JavaScript Example 1 Example 4 document.write("Hello World!")

27 © UW Business School, University of Washington 2004 JavaScript Example 2: Open a New Window Example 5 function new_window() { win2 = window.open("ex1.html", "", "resizable=yes,height=60,width=60"); } Open a new window.

28 © UW Business School, University of Washington 2004 JavaScript Example 3: Alert Window Example 6 function sayHi() { win2 = window.alert("Hi there"); } An alert window will show up when you load this page.

29 © UW Business School, University of Washington 2004 Additional Resources for JavaScript