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 nuals/communicator/jsref/index.htm nuals/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 Entry of job details. 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(); }

Event Example cont. Company Name: Contact Person: Phone Number: ……

Another Example function obtainthename(a) { alert("Hello, "+ a + " How are you?"); } Please enter your name and click anywhere outside the box:

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 <!-- Self.location.href = “somewhere/mypage.html”; //--> This page requires Javascript Sorry. This page requires Javascript support to run correctly.

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]) <INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!" onClick="window.open ('sesame.html', 'newWin', 'scrollbars=yes,status=yes,width=300,height=300')">

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