Review of Client Server Model Notes from Deitel, Deitel and Nieto, 2002

Review of Client Server Model Notes from Deitel, Deitel and

Nieto, 2002

Dr. Kleist

Client Side

• HTML (header, body)• CSS • DHTML (events allow objects to become dynamic

content; recursions)• Scripting• Control structures• JavaScript• Java applets

Server Side

• Server Side Scripting

• Active Server Pages

• GET and POST

• SSI

• Java Servlets

• ActiveX

Chapter 9- HTML Review

• 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

Editing HTML

• HTML files or documents – Written in source-code form using text editor– Notepad: Start-Programs-Accessories– HTML-Kit: http://www.chami.com/html-kit

• HTML files – .htm or .html extensions– Name your files to describe their functionality– File name of your home page should be index.html

• Errors in HTML – Usually not fatal

http://www.chami.com/html-kit

Common Tags

• Always include the <HTML>…</HTML> tags• Comments placed inside 

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>

Chapter 14 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

• Algorithm: Procedure for solving problem1. Actions to be executed2. Order in which actions are executed

• Order of elements of algorithm very important– Even if order appears insignificant, errors can

have far-reaching results

Algorithms

• Pseudocode– Artificial and informal language similar to everyday English– Helps programmers develop algorithms

• Forces programmer to “think-out” algorithm before composition

– Not actual computer programming language– Easily converted to JavaScript– Describes only executable statements (not declarations)

Pseudocode

• 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

• Research of Bohm and Jacopini– All programs can be written in terms of three control

structures1. Sequence structure

– Built into JavaScript

– Method of default

2. Selection structure

3. Repetition structure

Control Structures

Control Structures

• Flowchart

– Graphical representation of algorithm or portion of algorithm

– Uses symbols to indicate types decisions of actions

• Symbols connected by flowlines

– Rectangle: any action

– Oval: start/end of algorithm

– Diamond: decision

Sample Flowchart – Sequence Structure

add 1 to counter

add grade to total

total = total + grade;

counter = counter + 1;

• 3 Types of selection structures– if

• Single-selection structure

– Selects or ignores a single action or group of actions

– if/else• Double-selection structure

– Selects between two actions or groups of actions

– switch• Multiple-selection structure

– Selects among many actions or groups of actions

Control Structures

16.1 Introduction

• Programs that solve real-world programs – More complex than programs from previous chapters

• Best way to develop & maintain large program:– Construct from small, simple pieces called modules

– Technique called divide and conquer

16.2 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

16.2 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 );

16.3 Programmer-Defined Functions

• Functions allow program modularization• Variables declared in function are local variables

– Only known inside function in which defined

• Most functions have list of parameters– Means for communicating info between functions &

function calls

– Local variables

– When function called, arguments assigned to parameters in function definition


• 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


• Naming functions– Choose concise names which describe what

function does– If not possible to describe briefly, your function is

too complex

16.4 Function Definitions

• Function-definition formatfunction function-name ( parameter-list ){

Declarations and Statements}– Function name - any valid identifier– Parameter list - comma-separated list containing names

of parameters received by the function when it is called– If function does not receive values, parameter-list is left

empty

16.4 Function Definitions

• Function body or block: – declarations and statements within braces

• Control – Returned to the point at which function was called– If function does not return a result

1. When right-brace is reached return statement is executed

– If function returns a result3. When return expression; is executed

• Returns value of expressions to caller

• One argument in function call for each parameter in function definition

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

Chapter 18 JavaScript

• Up till now – JavaScript used to illustrate basic programming concepts

• JavaScript can also – Manipulate every element of an HTML document from a

script

• In this chapter– Provide more formal treatment of objects– Overview and serve as reference for

• Several of JavaScript’s built-in objects• Demonstrates their capabilities

18.2 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

18.2 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

18.4 String Object

• String Object– JavaScript’s string and character processing capabilities

• Appropriate for developing– Text editors

– Word processors

– Page layout software

– Computerized typesetting systems

– Other kinds of text-processing software

Chapter 19, 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

CSS with Inline Styles

• Inline styles – Individual element’s style declared using the STYLE attribute

– Each CSS property followed by a colon and the value of that attribute

– Multiple properties separated by semicolons<P STYLE = “font-size: 20 pt; color: #0000FF”>

– Inline styles override any other styles

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

19.3 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


• Declare CSS rules within STYLE element– Each rule body begins and ends with a curly

brace ({ and })– Class declarations are preceded with a period

and applied to elements only of that specific class

– Each property is followed by a colon and the value of the property

– Multiple properties are separated by semicolons


• Generic font families – Allow you to specify a type of font instead of a specific

font

• Font-size property– Relative sizes: xx-small, x-small, small, smaller, medium, large, larger, x-large and xx-large

• Styles applied to an element (the parent element)– Also apply to the elements inside that element (child

elements)

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.

Chapter 20 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

Chapter 21 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

25.1 Introduction• 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

25.2 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

25.2 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

25.3 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

25.3 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

25.4 Using Personal Web Server or Internet Information Server

• ASP requires– Web server

• Personal Web Server (PWS) 4.0• Internet Information Server (IIS) 4.0

– Database – .mdb files– Configuration for examples in this book can be

found on page 778• May have to change paths in .asp files to reflect

your directory structure

25.5 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

25.6 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

25.7 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

Date post:	01-Jan-2016
Category:	Documents
Upload:	fritz-gaines
View:	27 times
Download:	2 times

Review of Client Server Model Notes from Deitel, Deitel and Nieto, 2002

Documents