review of client server model notes courtesy of deitel, deitel and nieto, (2001) e-business and...
Post on 01-Jan-2016
216 Views
Preview:
TRANSCRIPT
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 <!-- Fig. 9.1: main.html -->
4 <!-- Our first Web page -->
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 <!-- Fig. 9.2: header.html -->4 <!-- HTML headers -->56 <HEAD>7 <TITLE>Internet and WWW How to Program - Headers</TITLE>8 </HEAD>910 <BODY>1112 <!-- Centers everything in the CENTER element -->13 <CENTER>14 <H1>Level 1 Header</H1> <!-- Level 1 header -->15 <H2>Level 2 header</H2> <!-- Level 2 header -->16 <H3>Level 3 header</H3> <!-- Level 3 header -->17 <H4>Level 4 header</H4> <!-- Level 4 header -->18 <H5>Level 5 header</H5> <!-- Level 5 header -->19 <H6>Level 6 header</H6> <!-- Level 6 header -->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 <!-- Fig. 16.2: SquareInt.html -->
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
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3
4 <!-- Fig. 19.1: inline.html -->
5 <!-- Using inline styles -->
6
7 <HEAD><TITLE>Inline Styles</TITLE></HEAD>
8
9 <BODY>
10
11 <P>Here is some text</P>
12
13 <!-- The STYLE attribute allows you to declare inline -->
14 <!-- styles. Separate multiple styles with a semicolon. -->
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
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3
4 <!-- Fig. 19.2: declared.html -->
5 <!-- Declaring a style sheet in the header section. -->
6
7 <HEAD>
8 <TITLE>Style Sheets</TITLE>
9
10 <!-- This begins the style sheet section. -->
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 <!-- This CLASS attribute applies the .blue style -->
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<!-- Fig. 20.1: example1.html -->
5<!-- Object Model Introduction -->
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<!-- Fig 21.1: onclick.html -->
5<!-- Demonstrating the ONCLICK event -->
6
7<HEAD>
8<TITLE>DHTML Event Model - ONCLICK</TITLE>
9
10<!-- The FOR attribute declares the script for a certain -->
11<!-- element, and the EVENT for a certain event. -->
12<SCRIPT LANGUAGE = "JavaScript" FOR = "para" EVENT = "onclick">
13
14 alert( "Hi there" );
15
16</SCRIPT>
17</HEAD>
18
19<BODY>
20
21<!-- The ID attribute gives a unique identifier -->
22<P ID = "para">Click on this text!</P>
23
24<!-- You can specify event handlers inline -->
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<!-- Fig. 21.2: onload.html -->
4<!-- Demonstrating the ONLOAD event -->
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
top related