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

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

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

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

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

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

7. 1. HEAD section 1.1 TITLE element 2. BODY section 2.1 P element 1 2 3 4 5 6 7 Internet and WWW How to Program - Welcome 8 9 10 11 12 Welcome to Our Web Site! 13 14 15

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

9. 1.Varying header sizes 1.1 Level 1 is the largest, level 6 is the smallest 1 2 3 4 5 6 7 Internet and WWW How to Program - Headers 8 9 10 11 12 13 14 Level 1 Header 15 Level 2 header 16 Level 3 header 17 Level 4 header 18 Level 5 header 19 Level 6 header 20 21 22 23

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

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

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

13. 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 );

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

15. 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 2 3 4 5 6 A Programmer-Defined square Function 7 8 9 document.writeln( 10 " Square the numbers from 1 to 10 " ); 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 ) + " " ); 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 26 27 28

16. Script Output

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

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

20. 18.3 Math Object

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

22. 1. STYLE attribute 1.1Separate multiple styles with a semicolon 1 2 3 4 5 6 7 Inline Styles 8 9 10 11 Here is some text 12 13 14 15 Here is some more text 16 Even more text 17 18 19

23. Inline styles

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

25. 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 1 2 3 4 5 6 7 8 Style Sheets 9 10 11 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 23 24 25 26 27 28 A Heading 29 Here is some text. Here is some text. Here is some text. 30 Here is some text. Here is some text.

26. 3.Page rendered by browser 34Here is some more text. Here is some more text. 35 36 37 31 32 Another Heading 33 Here is some more text. Here is some more text.

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

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

29. 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 2 3 4 5 6 7 8 Object Model 9 10 11 function start() 12 { 13 alert( pText.innerText ); 14 pText.innerText = "Thanks for coming."; 15 } 16 17 18 19 20 21 22 Welcome to our Web page! 23 24 25

30. Object referencing with the Dynamic HTML Object Model

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

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

33. 1.Use scripting to respond to ONCLICK event 2.Specify event handlers inline 1 2 3 4 5 6 7 8 DHTML Event Model - ONCLICK 9 10 11 12 13 14 alert( "Hi there" ); 15 16 17 18 19 20 21 22 Click on this text! 23 24 25<INPUT TYPE = "button" VALUE = "Click Me!" 26 ONCLICK = "alert( 'Hi again' )"> 27 28 29

34. Triggering an ONCLICK event Executes because of script lines 11-15 Executes because of event handler on line 25

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

36. 1.1Define function startTimer 2.1 ONLOAD event in BODY triggers startTimer 1 2 3 4 5 6 7 DHTML Event Model - ONLOAD 8 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 23 24 25 26 27 Seconds you have spent viewing this page so far: 28 0 29 30 31

37. Demonstrating the ONLOAD event

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

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

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

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

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

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

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

45. 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 1 2 3 4 5 6 7 8 A Simple ASP Example 9 10 11 12 13 Simple ASP Example 14 15 16 17 18 19 20 21 22 23 24 25

46. Output from a simple Active Server Page

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

48. Some server-side ActiveX components included with IIS and PWS

49. Guest book Active Server Page