review of client server model notes courtesy of deitel, deitel and nieto, (2001) e-business and...

Review of Client Server ModelNotes 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

• 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 <HTML>…</HTML> 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.1TITLE element

2. BODY section

2.1P element

1 <HTML>

2

3 

4 

5

6 <HEAD>

7 <TITLE>Internet and WWW How to Program - Welcome</TITLE>

8 </HEAD>

9

10 <BODY>

11

12 <P>Welcome to Our Web Site!</P>

13

14 </BODY>

15 </HTML>

Headers

• 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 sizes1.1 Level 1 is the largest, level 6 is the

smallest

1 <HTML>23 4 56 <HEAD>7 <TITLE>Internet and WWW How to Program - Headers</TITLE>8 </HEAD>910 <BODY>1112 13 <CENTER>14 <H1>Level 1 Header</H1> 15 <H2>Level 2 header</H2> 16 <H3>Level 3 header</H3> 17 <H4>Level 4 header</H4> 18 <H5>Level 5 header</H5> 19 <H6>Level 6 header</H6> 20 </CENTER>2122 </BODY>23 </HTML>

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

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2 <HTML>

3 

4

5 <HEAD>

6 <TITLE>A Programmer-Defined square Function</TITLE>

7

8 <SCRIPT LANGUAGE = "JavaScript">

9 document.writeln(

10 "<H1>Square the numbers from 1 to 10</H1>" );

11

12 // square the numbers from 1 to 10

13 for ( var x = 1; x <= 10; ++x )

14 document.writeln( "The square of " + x + " is " +

15 square( x ) + "<BR>" );

16

17 // The following square function's body is executed only

18 // when the function is explicitly called.

19

20 // square function definition

21 function square( y )

22 {

23 return y * y;

24 }

25 </SCRIPT>

26

27 </HEAD><BODY></BODY>

28 </HTML>

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

Constant Description Value Math.E Euler’s constant. Approximately 2.718.

Math.LN2 Natural logarithm of 2. Approximately 0.693. Math.LN10 Natural logarithm of 10. Approximately 2.302. Math.LOG2E Base 2 logarithm of

Euler’s constant. Approximately 1.442.

Math.LOG10E Base 10 logarithm of Euler’s constant.

Approximately 0.434.

Math.PI PI - ratio of circle’s circumference to its diameter.

Approximately 3.141592653589793.

Math.SQRT1_2 Square root of 0.5. Approximately 0.707. Math.SQRT2 Square root of 2.0. Approximately 1.414.

Properties of the Math object

18.3 Math Object

Method Description Example abs( x ) absolute value of x abs( -3.67 ) is 3.67

ceil( x ) rounds x to the next highest integer ceil( 9.2 ) is 10.0

cos( x ) trigonometric cosine of x (x in radians)

cos( 0.0 ) is 1.0

floor( x ) rounds x to the next lowest integer floor( -9.8 ) is -10.0

log( x ) natural logarithm of x (base e) log( 2.718282 ) is 1.0

max( x, y ) larger value of x and y max( 2.3, 12.7 ) is 12.7 max( -2.3, -12.7 ) is -2.3

min( x, y ) smaller value of x and y min( 2.3, 12.7 ) is 2.3 min( -2.3, -12.7 ) is -12.7

pow( x, y ) x raised to power y (xy) pow( 2.0, 7.0 ) is 128.0 pow( 9.0, .5 ) is 3.0

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.1 Separate multiple styles with a semicolon


2 <HTML>

3

4 

5 

6

7 <HEAD><TITLE>Inline Styles</TITLE></HEAD>

8

9 <BODY>

10

11 <P>Here is some text</P>

12

13 

14 

15 <P STYLE = "font-size: 20pt">Here is some more text</P>

16 <P STYLE = "font-size: 20pt; color: #0000FF">Even more text</P>

17

18 </BODY>

19 </HTML>

Inline styles

Creating Style Sheets with the STYLE Element

• Style sheet in header section – Begins with <STYLE TYPE = “text/css”>

• 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.1 CSS rules inside curly braces

1.2 Property name followed by colon and property value

1.3 Properties 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


2 <HTML>

3

4 

5 

6

7 <HEAD>

8 <TITLE>Style Sheets</TITLE>

9

10 

11 <STYLE TYPE = "text/css">

12

13 EM { background-color: #8000FF;

14 color: white }

15

16 H1 { font-family: Arial, sans-serif }

17

18 P { font-size: 18pt }

19

20 .blue { color: blue }

21

22 </STYLE>

23 </HEAD>

24

25 <BODY>

26

27 

28 <H1 CLASS = "blue">A Heading</H1>

29 <P>Here is some text. Here is some text. Here is some text.

30 Here is some text. Here is some text.</P>

3. Page rendered by browser

34 Here is some <EM>more</EM> text. Here is some more text.</P>3536 </BODY>37 </HTML>

3132 <H1>Another Heading</H1>33 <P CLASS = "blue">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

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2<HTML>

3

4

5

6

7<HEAD>

8<TITLE>Object Model</TITLE>

9

10<SCRIPT LANGUAGE = "JavaScript">

11 function start()

12 {

13 alert( pText.innerText );

14 pText.innerText = "Thanks for coming.";

15 }

16</SCRIPT>

17

18</HEAD>

19

20<BODY ONLOAD = "start()">

21

22<P ID = "pText">Welcome to our Web page!</P>

23

24</BODY>

25</HTML>

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

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2<HTML>

3

4

5

6

7<HEAD>

8<TITLE>DHTML Event Model - ONCLICK</TITLE>

9

10

11

12<SCRIPT LANGUAGE = "JavaScript" FOR = "para" EVENT = "onclick">

13

14 alert( "Hi there" );

15

16</SCRIPT>

17</HEAD>

18

19<BODY>

20

21

22<P ID = "para">Click on this text!</P>

23

24

25<INPUT TYPE = "button" VALUE = "Click Me!"

26 ONCLICK = "alert( 'Hi again' )">

27

28</BODY>

29</HTML>

Triggering an ONCLICK event

Executes because of script lines 11-15

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

1<HTML>

2

3

4

5

6<HEAD>

7<TITLE>DHTML Event Model - ONLOAD</TITLE>

8<SCRIPT LANGUAGE = "JavaScript">

9

10var 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}

21

22</SCRIPT>

23</HEAD>

24

25<BODY ONLOAD = "startTimer()">

26

27<P>Seconds you have spent viewing this page so far:

28<A ID = "soFar" STYLE = "font-weight: bold">0</A></P>

29

30</BODY>

31</HTML>

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 versusServer-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 versusServer-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– <% and %>– Indicate code is to be executed on server, not client

• @LANGUAGE– Specify scripting language (default VBScript)– <% @LANGUAGE = “VBScript” %>

• Each time page refreshed, server loads and interprets ASP

1.1 Specify VBScript as

scripting language

1.2 Use Option Explicit to

indicate variables be

explicitly declared by programmer

1.3 Use META tag to set refresh

interval

Time gets current time on server

(hh:mm:ss)

Short for <% Call Response.Write( Time()

) %>

1<% @LANGUAGE = VBScript %>

2<% Option Explicit %>

3<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

4<% ' Fig. 25.2 : clock.asp %>

5

6<HTML>

7<HEAD>

8<TITLE>A Simple ASP Example</TITLE>

9<META HTTP-EQUIV = "REFRESH" CONTENT = "60; URL = CLOCK.ASP">

10</HEAD>

11<BODY>

12

13<FONT FACE = ARIAL SIZE = 4><STRONG>Simple ASP Example</STRONG>

14</FONT><P>

15 <TABLE BORDER = "6">

16 <TR>

17 <TD BGCOLOR = "#000000">

18 <FONT FACE = Arial COLOR = "#00FF00" SIZE = 4>

19 <% =Time() %>

20 </FONT>

21 </TD>

22 </TR>

23 </TABLE>

24</BODY>

25</HTML>

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

Component Name Description

MSWC.BrowserType ActiveX component for gathering information (e.g., type, version, etc.) about the client’s browser.

MSWC.AdRotator ActiveX component for rotating advertisements on a Web Page.

MSWC.NextLink ActiveX component for linking together Web pages.

MSWC.ContentRotator ActiveX component for rotating HTML content on a Web page.

MSWC.PageCounter ActiveX component for storing the number of times a Web page has been requested.

MSWC.Counters ActiveX components that provides general-purpose persistent counters.

MSWC.MyInfo ActiveX component that provides information (e.g., owner name, owner address, etc.) about a Web site.

Scripting.FileSystemObject ActiveX component that provide an object library for accessing files on the server or on the server’s network.

ActiveX Data Objects (ADO) Data Access Components

ActiveX components that provide an object library for accessing databases.

Guest book Active Server Page

review of client server model notes courtesy of deitel, deitel and nieto, (2001) e-business and...

Documents