Client Side Scripting BICS546

Client-Side vs Server-Side Scripting Client-side scripting: –The browser requests a page. –The server sends the page to the browser. –The browser sends the page to the script engine. –The script engine executes the script. Server-side scripting: –The browser requests a page. –The server sends the page to the engine. –The script engine executes the script. –The server sends the page to the browser. –The browser renders the page.

HTTP Protocol (.Net p82) HTTP Request –Request line: HTTP method, file name, and HTTP version. –HTTP Header: acceptable file types, browser type, etc. –HTTP Body: data sent to the browser. HTTP Response –Response line: HTTP version, status code. –HTTP header: server info, info about data being sent. –HTTP Body: HTML code

HTML Introduction Heading section –,,,, etc. Body section –,, to,, –Formatting:,,, –Comment: –List –Image –Table:, : a new row in table, : a new cell in a table row. –Form:,,,

Webpage Editor FrontPage demo Microsoft Script Editor

META Tag The meta tag allows you to provide additional information about the page that is not visible in the browser: – Redirection: – “3” is number of seconds. Demo using FrontPage

TABLE Tag

FORM Tag Form attribute: –Action: Specify the URL of a program on a server or an address to which a form’s data will be submitted. –Method: Get: the form’s data is appended to the URL specified by the Action attribute as a QueryString. Post: A preferred method for database processing. Form’s data is sent in the HTTP body. –Name: Form’s name –Target: Specified a window in which results returned from the server appear.

QueryString A QueryString is a set of name=value pairs appended to a target URL. It can be used to pass information from one webpage to another. To create a QueryString: –Add a question mark (?) immediately after a URL. –Followed by name=value pairs separated by ampersands (&). Example:

Creating a QueryString User typed URL As part of a URL specified in an anchor tag. Via a form sent to the server with the GET method.

SCRIPT Tag HTML and Vbscript are not case-sensitive; Javascript is case-sensitive, each statement ends in a semicolon (;).

Script Example <!-- statements -->

Hello World document.write (" Hello world ");

Variable Declaraton JS:var intrate, term, amount; VB:dim intrate, term, amount Data Type: –Variant - a variable’s data type is determined when it is initialized to its first value. Variable scope: –Local: Variables declared in a function or procedure. –Global: Variables declared in the heading section, but not in a function or procedure.

Special Characters in JavaScript Escape characters Special characters: –Carriage return: \r“Welcome “ & “\r” & cName –Backslash: \\ “c:\\Inetpub\\wwwroot\\home.htm” –New line: \n –Double quotation mark: \” –Single quotation mark: \’ –Tab space: \t

Special Characters in VBScript VB uses CHR function to return special characters. CHR(number of ANSI character code) –Carriage return: chr(11) –Backslash: chr(92) –New line: chr(10) –Double quotation: chr(34) –Single quotation: chr(39) –Tab: chr(9)

Arrays JS: var arrayName = new Array(array size); var Pet = new Array(2); Pet[0]=“dog”; Pet[1]=“cat”; Pet[2]=“bird”; VB: dim arrayName(array size) Dim Pet(2) Pet(0)=“dog” Pet(1)=“cat” Pet(2)=“bird”

Comments JS: –Single-line comment: // –Multiple-line comments: /* … */ VB: single quotation mark ‘

Operators Arithmetic operators: –JS: +, -, *, /, Math.pow(x,y), etc. Math is an object with many methods such as round(x), random(), sqrt(x), ceil(x), floor(x), etc. –JS: Prefix operator: ++VarName, --VarName Postfix operator: varName++, varName-- –VB:+. -, *, /, ^ Comparison operators: –JS: = =, !=,, = –VB: =, <>,, = Logical operators: –JS: &&, ||, ! –VB: AND, OR, NOT

IF Then Statements JS:if (condition) { statements; } else { statements; } VB:if (condition) then statements else statements end if

Case Statements JS: Switch Case Statement switch(varable name) { case value1: statements; break; case value2: statements; break; … default: statements; break; } VB: Select Case statement

Loop Structures JS: 1.while (condition) { statements; } 2. do{ statements; } while (condition) 3.for (var I = 0; I<5;I=I+1){ statements; }

JavaScript Build-In Objects and Methods Math object String object: In JS, a string variable is an object and can be created by: –varName = “Smith” –varName = new String(“Smith”) String object methods: – bold, fontcolor, fontsize, toLowerCase, toUpperCase – anchor (create a bookmark), link (create a link) –Substring, split (split a string into an array)

Examples of Using String’s Methods var test = “Click Here”; var website = test.link(website); var test = “one, two, three”; var newArray = test.split(“,”); Note: split is useful in parsing a queryString.

JavaScript’s Conversion Functions toString() example: Price=5; Qty=10; Amount=Price*Qty; Document.write (Amount.toString()); Eval strVar = “5”; numVar = eval(strVar)

JavaScript Functions Defining functions – function functionName(arg1,..,argN){ Statements; return return value; –} Note: 1. The arguments are optional. 2. The return statement is optional. A function is not required to return a value.

VBScript Functions Defining functions: –Function functionName(arg1,..,argN) Statements functionName=returnValue –End Function –Note: Unlike VB, a function is not required to return a value.

Document Object Model

Window Object The Window object represents a Web browser window. We use the properties and methods of a Window object to control browser window.

Window Object Properties: –window.status, window.defaultstatus –window.document, window.history, window.location. –Window.name Methods: –window.open (“url”, “name”, Options) Options: menubar=no, status=no, toolbar=no, etc. –window.close –window.alert(“string”) –window.prompt(“string”) –Window.confirm() –window.prompt(“string”, “default string”) –window.focus(), window.blur() :set/remove focus –Window.setTimeout(“statements”, milliseconds)

Document Object The document object represents the actual web page within the window. Properties: –background, bgColor, fgColor, title, url, lastModified, domain, referrer, cookie, linkColor, etc. Ex. document.bgColor=“silver”; Methods: –Document.write (“string”) –Document.open, close Demo (docProp.htm, testDoc.htm)

Navigator Object The navigator object provides information about the browser. Properties: –Navigator.appName:browser name –Navigator.appCodeName: browser code name –Navigator.appVersion –Navigator.platform: the operating system in use.

Location Object Allows you to change to a new web page from within a script code. Properties: –Host, hostname, pathname –Href: full URL address –Search: A URL’s queryString Methods: – location.reload() – location.replace(); replace current page and old page’s entry in the history. To open a page:location.href = “URL”

History Object Maintain a history list of all the documents that have been opened during current session. Methods: – history.back() – history.forward() – history.go(): ex. History.go(-2)

HTML Tags and Events Link : click, mouseOver, mouseOut Image : abort(loading is interrupted), error, load. Area : mouseOver, mouseOut Body : blur, error, focus, load, unload Frameset: blur, error, focus, load, unload Frame: blur, focus Form: submit, reset Textbox, Text area: blur, focus, change, select Button, Radio button, check box: click List: blur, focus, change

Event Handler Event handler name: on + event name –Ex. onClick Three ways of writing handler: –1. Within the tag –2. Event function: onCLick=“clickHandler()” –3. Event procedure as in VB. Sub button1_onCLick()

Form Object Form Input/Select object: –Textbox, radio button, check box, drop-down list box, text area, push button, submit button, reset button. Event-Handler: –onBlur (lose focus), onCHange, onClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onLoad (when a document is loaded), onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onReset(when click the reset button), onResize(when window is resized), onSubmit. Refer an input object in a form: – document.formname.inputobjName.Value Demo: showFormData.htm

Forms Collection The forms collection is a collection of form objects within the document object. To retrieve a form’s`property: –document.form[index].property Base 0 index –Document. formname.property