1 / 66

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

fritz-gaines
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Review of Client Server Model Notes from Deitel, Deitel and Nieto, 2002 Dr. Kleist

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

  3. Server Side • Server Side Scripting • Active Server Pages • GET and POST • SSI • Java Servlets • ActiveX

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

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

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

  8. 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> 1. HEAD section 1.1 TITLE element 2. BODY section 2.1 P element

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

  10. 1 <HTML> 2 3 <!-- Fig. 9.2: header.html --> 4 <!-- HTML headers --> 5 6 <HEAD> 7 <TITLE>Internet and WWW How to Program - Headers</TITLE> 8 </HEAD> 9 10 <BODY> 11 12 <!-- 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> 21 22 </BODY> 23 </HTML> Varying header sizes 1.1 Level 1 is the largest, level 6 is the smallest

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

  12. Algorithms • Algorithm: Procedure for solving problem 1. Actions to be executed 2. Order in which actions are executed • Order of elements of algorithm very important • Even if order appears insignificant, errors can have far-reaching results

  13. Pseudocode • 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)

  14. Control Structures • 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

  15. Control Structures • Research of Bohm and Jacopini • All programs can be written in terms of three control structures 1. Sequence structure • Built into JavaScript • Method of default 2. Selection structure 3. Repetition structure

  16. Sample Flowchart – Sequence Structure add 1 to counter total = total + grade; add grade to total counter = counter + 1; 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

  17. Control Structures • 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

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

  19. 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 • JavaScriptprovides several rich objects for performing • Common mathematical operations • String manipulation • Date and time manipulation • Manipulations of arrays

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

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

  22. 16.3 Programmer-Defined Functions • Motives for modularizing a program with functions • Makes program development more manageable • 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 • Avoid repeating code in program • Do not re-invent the wheel • Save time

  23. 16.3 Programmer-Defined Functions • Naming functions • Choose concise names which describe what function does • If not possible to describe briefly, your function is too complex

  24. 16.4 Function Definitions • Function-definition format functionfunction-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

  25. 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 • When right-brace is reached return statement is executed • If function returns a result • When return expression; is executed • Returns value of expressions to caller • One argument in function call for each parameter in function definition

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

  27. Script Output

  28. Chapter 18 JavaScript • Up till now • JavaScript used to illustrate basic programming concepts • JavaScript can also • ManipulateeveryelementofanHTMLdocumentfromascript • 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

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

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

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

  32. 18.3 Math Object

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

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

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

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

  37. Inline styles

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

  39. 19.3 Creating Style Sheets with the STYLE Element • 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

  40. 19.3 Creating Style Sheets with the STYLE Element • 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)

  41. 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 13EM { background-color:#8000FF; 14color:white } 15 16H1 { font-family:Arial, sans-serif } 17 18P { 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> 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 Applying styles 2.1 CLASS attribute

  42. 34 Here is some <EM>more</EM> text. Here is some more text.</P> 35 36 </BODY> 37 </HTML> 31 32 <H1>Another Heading</H1> 33 <P CLASS = "blue">Here is some more text. Here is some more text. 3. Page rendered by browser

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

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

  45. 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"> 11function 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> 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

  46. Object referencing with the Dynamic HTML Object Model

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

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

  49. 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!" 26ONCLICK ="alert( 'Hi again' )"> 27 28</BODY> 29</HTML> Use scripting to respond to ONCLICK event Specify event handlers inline

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

More Related