Review of Client Server Model Notes courtesy of Deitel, Deitel and Nieto, (2001) e-Business and e-Commerce: How to Program, PrenticeHall. Dr. Kleist

Client Side HTML (header, body) Scripting Control structures JavaScript Java applets CSS DHTML (events allow objects to become dynamic content; recursions)

Server Side Server Side Scripting Active Server Pages (ASP) GET and POST SSI Java Servlets ActiveX

HTML –HyperText Markup Language –Not a procedural programming language like C, Fortran, Cobol or Pascal –Markup language Identify elements of a page so that a browser can render that page on your computer screen Presentation of a document vs. structure

Markup Languages Markup language –Used to format text and information HTML –Marked up with elements, delineated by tags –Tags: keywords contained in pairs of angle brackets HTML tags –Not case sensitive –Good practice to keep all the letters in one case Forgetting to close tags is a syntax error XML is a mark up language, too

Common Tags Always include the … tags Comments placed inside tags HTML documents –HEAD section Info about the document Info in header not generally rendered in display window TITLE element names your Web page –BODY section Page content Includes text, images, links, forms, etc. Elements include backgrounds, link colors and font faces P element forms a paragraph, blank line before and after

1. HEAD section 1.1 TITLE element 2. BODY section 2.1 P element Internet and WWW How to Program - Welcome Welcome to Our Web Site!

Headers –Simple form of text formatting –Vary text size based on the header’s “level” –Actual size of text of header element is selected by browser –Can vary significantly between browsers CENTER element –Centers material horizontally –Most elements are left adjusted by default

1.Varying header sizes 1.1 Level 1 is the largest, level 6 is the smallest Internet and WWW How to Program - Headers Level 1 Header 15 Level 2 header 16 Level 3 header 17 Level 4 header 18 Level 5 header 19 Level 6 header

Scripting on Client or Server Side Before programming a script have a –Thorough understanding of problem –Carefully planned approach to solve it When writing a script, important to –Understand types of building blocks and tools available –Employ proven program construction principles

Sequential execution –Execution of statements one after the other in order written –Normal programming employs sequential execution –Various JavaScript statements enable out of order statement execution Transfer of control Programming in 1960’s utilized the goto statement –Structured programming –Root of most programming difficulties in 60’s –Does not exist in JavaScript Control Structures

Program Modules in JavaScript functions – JavaScript modules JavaScript programs written by combining –Functions programmer writes –“prepackaged” functions and objects in JavaScript These functions often called methods Implies function belongs to particular object JavaScript provides several rich objects for performing –Common mathematical operations –String manipulation –Date and time manipulation –Manipulations of arrays

Program Modules in JavaScript Programmer-defined functions –Written by programmer to define specific tasks –Statements defining functions written once –Statements are hidden from other functions Function is invoked by a function call –Specifies function name –Provides information (or arguments) function needs for execution Function call syntax: functionName( argument );

Programmer-Defined Functions Motives for modularizing a program with functions 1.Makes program development more manageable 2.Allows software reusability Programs can be created from standard functions instead of being built from customized code Example: parseInt(), parseFloat Functions should be limited to performing a single, well- defined task 3.Avoid repeating code in program Do not re-invent the wheel Save time

1.1 Output HTML 2.1 Open for control structure 2.2 Call square user- defined function 3.1 Define square function 3.2 Return result A Programmer-Defined square Function document.writeln( 10 " Square the numbers from 1 to 10 " ); // square the numbers from 1 to for ( var x = 1; x <= 10; ++x ) 14 document.writeln( "The square of " + x + " is " + 15 square( x ) + " " ); // The following square function's body is executed only 18 // when the function is explicitly called // square function definition 21 function square( y ) 22 { 23 return y * y; 24 }

Script Output

Thinking About Objects JavaScript - object-based programming language Objects –Two categories Animate Inanimate –Attributes –Behaviors –Encapsulate data and methods –Property: Information hiding –Communicate with programs through interfaces Most future software will be built by combining objects

Thinking About Objects JavaScript uses objects to –Interact with elements (or objects) of an HTML document window object –Enables script to manipulate browser window –window.status –window.alert document object –Provides access to every element of an HTML document –Encapsulate various capabilities in a script array object Enables script to manipulate a collection of data

18.3 Math Object Math object’s methods –Allow programmer to perform many common mathematical calculations Properties of the Math object

18.3 Math Object

CSS Cascading Style Sheets (CSS) –Specify the style of your page elements –Spacing, margins, etc. Separate from the structure of your document –Section headers, body text, links, etc. Separation of structure from content –Greater manageability –Easier to change style of document

1. STYLE attribute 1.1Separate multiple styles with a semicolon Inline Styles Here is some text Here is some more text 16 Even more text

Inline styles

Creating Style Sheets with the STYLE Element Style sheet in header section –Begins with Styles placed here apply to the whole document TYPE attribute specifies the MIME type –MIME is a standard for specifying the format of content »Other MIME types include text/html, image/gif and text/javascript Without style sheets –Browser completely controls the look and feel of Web pages With style sheets –Designer can specify the look and feel of Web pages

1.Begin style sheet section 1.1CSS rules inside curly braces 1.2Property name followed by colon and property value 1.3Properties separated by semicolon 1.4 background- color specifies the background color of the element 1.5 font-family property: Arial specifies the name of the font sans-serif is a generic font family 2.Applying styles 2.1 CLASS attribute Style Sheets EM { background-color: #8000FF; 14 color: white } H1 { font-family: Arial, sans-serif } P { font-size: 18pt } blue { color: blue } A Heading 29 Here is some text. Here is some text. Here is some text. 30 Here is some text. Here is some text.

3.Page rendered by browser 34Here is some more text. Here is some more text Another Heading 33 Here is some more text. Here is some more text.

DHTML with Objects Dynamic HTML object model –Great control over presentation of pages Access to all elements on the page –Whole web page (elements, forms, frames, tables, etc.) represented in an object hierarchy HTML elements treated as objects –Attributes of these elements treated as properties of those objects Objects identified with an ID attribute can be scripted with languages like JavaScript, JScript and VBScript

Object Referencing Simplest way to reference an element is by its ID attribute Changing the text displayed on screen –Example of a Dynamic HTML ability called dynamic content

1.1 innerText property Object pText refers to the P element whose ID is set to pText (line 22) innertext property refers to text contained in element Object Model function start() 12 { 13 alert( pText.innerText ); 14 pText.innerText = "Thanks for coming."; 15 } Welcome to our Web page!

Object referencing with the Dynamic HTML Object Model

DHTML with Events Event model –Scripts respond to user actions and change page accordingly Moving mouse Scrolling screen Entering keystrokes –Content more dynamic –Interfaces more intuitive

Event ONCLICK ONCLICK event –Fires when user clicks mouse ID attribute –Specifies unique identifier for HTML element

1.Use scripting to respond to ONCLICK event 2.Specify event handlers inline DHTML Event Model - ONCLICK alert( "Hi there" ); Click on this text! <INPUT TYPE = "button" VALUE = "Click Me!" 26 ONCLICK = "alert( 'Hi again' )">

Triggering an ONCLICK event Executes because of script lines Executes because of event handler on line 25

Event ONLOAD ONLOAD event –Fires when element finishes loading successfully –Often used in BODY tag Initiate scripts as soon as page loads

1.1Define function startTimer 2.1 ONLOAD event in BODY triggers startTimer DHTML Event Model - ONLOAD var seconds = 0; 11 12function startTimer(){ 13 // 1000 milliseconds = 1 second 14 window.setInterval( "updateTime()", 1000 ); 15} 16 17function updateTime(){ 18 seconds++; 19 soFar.innerText = seconds; 20} Seconds you have spent viewing this page so far:

Demonstrating the ONLOAD event

ASP Active Server Pages (ASP) –Processed in response to client request –ASP file contains HTML and scripting code –VBScript de facto language for ASP scripting Other languages can be used –JavaScript –.asp file extension –Microsoft-developed technology –Send dynamic Web content HTML DHTML ActiveX controls Client-side scripts Java applets

How Active Server Pages Work Client sends request –Server receives request and directs it to ASP –ASP processes, then returns result to client HTTP request types –Request methods GET –Gets (retrieves) information from server –Retrieve HTML document or image POST –Posts (sends) data to server –Send info from HTML form

How Active Server Pages Work Browsers often cache Web pages –Cache: save on disk –Typically do not cache POST response Next POST request may not return same result Client requests ASP file –Parsed (top to bottom) by ActiveX component asp.dll –Parsed each time requested –Web server must support ASP by providing component such as asp.dll

Client-side Scripting versus Server-side Scripting Client-side scripting –Commonly used –Browser-dependent Scripting language must be supported by browser or scripting host –Viewable on client Protecting source code difficult –Reduces the number of requests the server receives –Enhance a Web page’s content Richer functionality than HTMl

Client-side Scripting versus Server-side Scripting Server-side scripting –Reside on server –Greater flexibility – database access –Usually generate custom response for client –Access to ActiveX server components Extend scripting language functionality –Run exclusively on server  cross-platform issues not a concern –Not visible to client Only HTML + client-side scripts sent to client

Active Server Page Objects ASP has several built-in objects –Request object Access information passed by GET or POST Used to access cookies –Response object Sends information such as HTML or text to client –Server object Provides access to server methods and properties Provides method CreateObject –Used to instantiate other objects

A Simple ASP Example Scripting delimiters – –Indicate code is to be executed on server, not –Specify scripting language (default VBScript) – Each time page refreshed, server loads and interprets ASP

1.1Specify VBScript as scripting language 1.2Use Option Explicit to indicate variables be explicitly declared by programmer 1.3Use META tag to set refresh interval Time gets current time on server (hh:mm:ss) Short for A Simple ASP Example Simple ASP Example

Output from a simple Active Server Page

Server-side ActiveX Components Server-side ActiveX components –Typically do not have GUI –If scripting language for ASP not support certain feature, create ActiveX Server component Visual C++, Visual Basic, Delphi, etc. –Usually execute faster than scripting language equivalents –Executed on server Client does not need to support ActiveX technologies

Some server-side ActiveX components included with IIS and PWS

Guest book Active Server Page