JavaScript

Client Side scripting

Client-side Scripts Client-side scripts, which run on the

user’s workstation can be used to: Validate user inputs entered on HTML forms Create advanced Web page features,

including: Opening a new browser window to display an

alternate Web page Creating “cookies” that store data on user’s

computer about his or her actions while browsing a Web page

Scripting Languages VBScript (IE only) Active Server Pages (ASPs) (Server side) PERL (Server side)

Used most often for Web server-side HTML form processing

JavaScript Most commonly used client-side scripting

language because it is supported by IE and Netscape

JavaScript Server-side scripting language Can be added to standard HTML

Web pages using special HTML tags Used in Web pages for data

validation Used to create pop-up browser

windows

JavaScript code example

VBScript and Active Server Pages VBScript

Used for creating client- and server-side scripts Default scripting language used in ASPs

Active Server Pages (ASPs) Contains script-processing and HTML

commands Processed on a Microsoft Web server Output is a dynamic Web page forwarded to

user’s browser and then displayed ASP.NET can use VB.NET plus others C#

Creating Client-side Scripts Using VBScript The code for a VBScript program is

embedded within the header section of a Web page

User’s browser, which must be Microsoft Internet Explorer, is signaled to interpret the code as a VBScript program by the two-sided SCRIPT tag

Referencing Form Fields and Button Click Events In Javascript and VBScript, the

HTML documents where the script is located is referenced by the keyword Document

Scripts used within forms to validate user inputs are usually associated with a command button’s Click event

http://developer.netscape.com/docs/manuals/communicator/jsref/index.htm

Javascript Object Model

Scope of Variables in Javascript

Determines what program components can access a variable or assign values to it

Determined by location where variable declared If declared outside procedure or function, it is

a global variable visible to all procedure and functions

If declared within procedure or function, it is a local variable only visible within procedure or function

Javascript Variables The scope of a variable is the current

function or, for variables declared outside a function, the current application.

Using var outside a function is optional; you can declare a variable by simply assigning it a value. However, it is good style to use var, and it is necessary in functions if a global variable of the same name exists.

Examples var num_hits = 0, cust_no = 0

Creating Functions function name([param] [, param] [...,

param]) { statements} To return a value, the function must have

a return statement that specifies the value to return. You cannot nest a function statement in another statement or in itself.

All parameters are passed to functions, by value. In other words, the value is passed to the function, but if the function changes the value of the parameter, this change is not reflected globally or in the calling function.function calc_sales(units_a, units_b, units_c) { return units_a*79 + units_b*129 + units_c*699}

Events and Event Handlers Event Event handler Event occurs

when... abort onAbort The user aborts the loading of an image

(for example by clicking a link or clicking the Stop button). blur onBlur A form element loses focus or when a

window or frame loses focus. change onChange A select, text, or textarea field loses

focus and its value has been modified. click onClick An object on a form is clicked. dblclick onDblClick The user double-clicks a form element

or a link. dragdrop onDragDrop The user drops an object onto the

browser window, such as dropping a file on the browser window. error onError The loading of a document or image causes

an error.

Events cont. focus onFocus A window, frame, or frameset receives

focus or when a form element receives input focus. keydown onKeyDown The user depresses a key. keypress onKeyPress The user presses or holds down a key. keyup onKeyUp The user releases a key. load onLoad The browser finishes loading a window

or all of the frames within a FRAMESET tag. mousedown onMouseDown The user depresses a mouse

button. mousemove onMouseMove The user moves the cursor. mouseout onMouseOut The cursor leaves an area (client-side

image map) or link from inside that area or link. mouseover onMouseOver The cursor moves over an object or

area from outside that object or area.

Events cont. mouseup onMouseUp The user releases a mouse button. move onMove The user or script moves a window or

frame. reset onReset The user resets a form (clicks a Reset

button). resize onResize The user or script resizes a window or

frame. select onSelect The user selects some of the text

within a text or textarea field. submit onSubmit The user submits a form. unload onUnload The user exits a document.

Event Example<HTML><TITLE>Entry of job details.</TITLE><script LANGUAGE="JavaScript">function Valid_Company(company){ if (company == "") { alert("You must enter a Company Name"); document.JobDetails.AACompanyName.focus(); }}function Valid_Person(person){ if (person == "") { alert("You must enter a Contact Person"); document.JobDetails.AAContactPerson.focus(); }}</script>

Event Example cont.<BODY BACKGROUND="backgrd.gif"><CENTER><IMG SRC="entry.gif" ALT="Entry Of Job Details"><HR WIDTH="75%" SIZE=1></CENTER><BR><BR><FORM NAME="JobDetails" METHOD="GET" ACTION="--SOMEscript--"><CENTER><TABLE CELLSPACING=15><TR><TD><P ALIGN=RIGHT><B>Company Name: </TD><TD><INPUT

NAME=AACompanyName size=40 OnBlur="Valid_Company(this.value)"></TD><TR><TD><P ALIGN=RIGHT><B>Contact Person: </TD><TD><INPUT

OnBlur="Valid_Person(this.value)" NAME=AAContactPerson size=40 value = "AA"></TD></TR>

<TR><TD><P ALIGN=RIGHT><B>Phone Number: </TD><TD><INPUT NAME=AAPhoneNumber size=20></TD></TR>

……<TR><TD></TD><TD><INPUT TYPE=SUBMIT VALUE="Process Form"><INPUT TYPE=RESET VALUE="Clear Form"></TD></TR>

<html><head><title>Another Example</title><script> function obtainthename(a) { alert("Hello, "+ a + " How are you?"); }</script></head><body><STRONG>Please enter your name and click anywhere outside the box:</STRONG><form> <input type="text" name="myname" value="Vivian"

onChange="obtainthename(this.value)"></form></body></html>

Handling non javascript browsers

Write a file (html) for thse browsers that DO NOT support javascript with a message “Sorry you can’t run this …”.

At the top of the file include a script to goto a new location. If the browser supports JS, it will go therewise it won’t.

Handling non javascript browsers

<HEAD><SCRIPT LANGUAGE=“Javascript”><!--Self.location.href = “somewhere/mypage.html”;//--></SCRIPT><TITLE> This page requires Javascript </TITLE> </HEAD><BODY>Sorry. This page requires Javascript support to run correctly.</BODY>

Debugging Client-side Scripts One error programmers commonly

make is to modify a file, and then forget to save the modified file When you refresh the display in

Internet Explorer, the Web page displayed was generated using the last saved version of the HTML source code file

Debugging Client-side Scripts To determine if unsaved changes are

causing an error: View Web page HTML source code and

confirm that the source code is your most recent version

If you are sure that you saved the modified HTML source code, but the Web browser still displays an older version of the source code file: The problem might be that the Web browser is

displaying a cached version of the Web page

Displaying a Web Page in a New Browser Window Usually done when the new Web

page is unrelated to the current page or does not have to share data with the current Web page

Allows user to have multiple browser windows open at the same time and to view multiple Web pages simultaneously

Displaying a Web Page in a New Browser Window Keyword Window is used to reference

the browser windows To open a new browser window using

Javascript, use the Open method with the following format

Window.Open([URL], [Target], [Option List])<FORM NAME="myform"><INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!" onClick="window.open ('sesame.html', 'newWin', 'scrollbars=yes,status=yes,width=300,height=300')"></FORM>

Displaying a Web Page in a New Browser Window URL parameter

Address of document you want to display in the window

Target parameter Name given to the new window

Option List parameter Allows you to specify the properties of

the new browser window

Displaying a Web Page in a New Browser Window

New window Option List parameters