Client Side scripting

1. Client Side scripting JavaScript

2. 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 eg. document.cookie …

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

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

5. JavaScript code example

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

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

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

9. Javascript Object Model

10. EG – javascript object model • http://developer.netscape.com/docs/examples/index.html?content=javascript.html • http://archive.devx.com/projectcool/developer/reference/jscript_obj.html

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

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

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

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

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

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

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

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

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

20. Handling non javascript browsers • Write a file (html) for those 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 there, otherwise it won’t.

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

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

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

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

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

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

27. Displaying a Web Page in a New Browser Window New window Option List parameters