javascript client side scripting. client-side scripts client-side scripts, which run on the user’s...
Post on 22-Dec-2015
282 views
TRANSCRIPT
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
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
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