1. 7 Chapter Seven Client-side Scripts

2. 7 Chapter Objectives Create HTML forms Learn about client-side scripting languages Create a client-side script using VBScript Validate HTML form inputs using client- side scripts Create cookies using client-side scripts

3. 7 Client-side Scripts Script –File containing source code that is interpreted, or translated into machine language, one line at a time Machine language –Binary language understood by your computer’s processor

4. 7 Client-side Scripts Web applications often use: –Client-side scripts, which run on the user’s workstation –Server-side scripts, which run on Web servers

5. 7 Client-side Scripts Client-side scripts 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

6. 7 HTML Forms –Enhanced HTML documents designed to collect user inputs and send them to a Web server Table 7-1: HTML form interface controls

7. 7 HTML Forms HTML forms have controls and properties that are similar to the ones used in Visual Basic You can create a form anywhere within an HTML document using the form tag – Form element tags are made up of several attributes which specify a characteristic of the form element described by the tag

8. 7 HTML Forms Figure 7-1: HTML form element tags

9. 7 HTML Forms tag is used to create a new input box, check box, radio button, or command button TYPE attribute of the tag, d etermines type of input control being created

10. 7 Values of TYPE attribute of tag TEXT –Specifies that input control is a text box where the user input is displayed as it was entered PASSWORD –Creates an input box where characters that the user types are masked and an asterisk (*) is displayed in place of each typed character

11. 7 Values of TYPE attribute of tag CHECKBOX –Specifies a check box control –If CHECKED keyword is included, then check box is checked when the form is first displayed –The VALUE attribute is associated with the CHECKED keyword and specifies the value of the check box when checked

12. 7 Values of TYPE attribute of tag RADIO –Specifies a radio button control –Buttons with the same NAME value are in same radio button group BUTTON –Specifies a command button –The ONCLICK attribute specifies the name of a program called when user clicks button –The VALUE attribute can specify a different button caption

13. 7 Values of TYPE attribute of tag SUBMIT –Specifies a command button with a “Submit” caption –Submits values of form fields as parameters to the form-processing program in a parameter list –A parameter is a variable value passed from one program to another program

14. 7 Values of TYPE attribute of tag RESET –Specifies a command button with a “Reset” caption –Clears all form control values and returns form to default state

15. 7 HTML Forms HIDDEN tag –INPUT tag type used to create a hidden form field not visible to user, but can be used to submit data to the processing program that the user cannot see –i.e. record the date on which the form HTML code was last modified The TEXTAREA form element tag –Specifies input box that can contain multiple lines of text –ROWS and COLS attributes specify size of text box The SELECT form element tag –Specifies a list box –The SIZE attribute specifies number of list items displayed

16. 7 Creating Web Forms Pg 231-233 Login – Order Tracking HTML code

17. 7 Introduction to Scripts Data validation –Process of making sure users type the correct data in a form input Scripts are desirable because: –In many cases, processing HTML form inputs does not require large applications (applications created with scripts usually have a limited number of code lines – usually fewer than 100) –Creating a script might be faster than creating a complied program –You can quickly and easily modify a script using a text editor

18. 7 Scripting Languages VBScript – this book, client side scripts Active Server Pages (ASPs) – this book, server-side scripts PERL –Used most often for Web server-side HTML form processing –Developed by Larry Wall in 1987 for UNIX, PERL has been expanded to run on Windows NT, 2000, Mac JavaScript –Most commonly used client-side scripting language –Developed in 1995 by Netscape as a server side language that was originally called LiveScript. Shortly thereafter, Netscape and Sun formed an alliance and announced LiveScript would be renamed JavaScript and used in Web browsers as client side script language.

19. 7 PERL Cannot be used for client-side scripts, because it does not run in a Web browser Used only on server-side scripts for processing data submitted from Web forms PERL 5 easily handles binary and text file processing Language is terse and can be cryptic and difficult to understand. (see pg 235 for example)

20. 7 JavaScript 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 Only scripting language capable of running on nearly all of the browsers visiting your website. –http://javascript.internet.comhttp://javascript.internet.com –http://www.wsabstract.comhttp://www.wsabstract.com

21. 7 JavaScript Figure 7-6: JavaScript code example

22. 7 VBScript and Active Server Pages VBScript –Used for creating client- and server-side scripts –Default scripting language used in ASPs –Closely related to the Visual Basic programming language 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

23. 7 Creating Client-side Scripts Using VBScript The code for a VBScript program is embedded within the header section of a Web page [script program lines] 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

24. 7 Referencing Form Fields and Button Click Events In VBScript, the HTML documents where the script is located is referenced by the keyword Document Document.[form name] Scripts used within forms to validate user inputs are usually associated with a command button’s Click event Sub [button name]_Click [procedure code] End Sub

25. 7 Creating Functions A function is a set of instructions that perform a task. The function is first defined, then later called up with a function call Code to create a VB function must appear before the program line that contains the function call –Code in another program that calls the function

26. 7 VBScript Variables Variables within VBScript functions and procedures –Declared using Dim keyword –Do not have to be declared unless the Option Explicit command is issued at beginning of script When you do declare a variable in a VBScript program, you do not specify a data type (because all variables have variant data type, - variant data type automatically adapts to the data type of whatever value is assigned)

27. 7 Scope of Variables in VBScript 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

28. 7 Creating a Script to validate HTML forms Pg 241-243

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

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

31. 7 Debugging Client-side Scripts When you are certain that you are viewing the latest source code, and it still isn’t working, find the code line causing the error by displaying the information in the Internet Explorer script error messages dialog box

32. 7 Debugging Client-side Scripts Figure 7-10: Creating an error in the script code

33. 7 Debugging Client-side Scripts Figure 7-11: Internet Explorer script error message Error message dialog box – Tools – Internet Options – Advanced Tab – Disable Script debugging check box should be cleared

34. 7 Debugging Client-side Scripts If a different error message is displayed, you have multiple errors in your script Another technique is to add message boxes that indicate the current line being executed and the current values of specific variables

35. 7 Debugging Client-side Scripts Figure 7-12: Adding message boxes for debugging

36. 7 Using Client-side Scripts to Create Cookies A cookie is a data files written on the user’s workstation by a program within a Web page –Temporary cookies Store information in main memory and are valid during browser session in which they are created –Persistent cookies Store information in text files and are available in subsequent browser sessions

37. 7 Cookies Contains info that is stored by a Web server on a Web site visitors computer: –Pages viewed on a Web site –How many times user has visited a site –What info a user has entered during past visits –Used to create ‘shopping carts’

38. 7 Temporary Cookies Associated with an HTML document Can be referenced using the Cookie property of the document Created within VBScript by assigning a value to the document’s Cookie property Are stored as text strings

39. 7 Cookies A cookie stores information in pairs of variable names and associated values, where each value has an associated value Each cookie name/value pair is separated from the next by a semicolon (;) For example,a cookie that stores UserID and password would be stored as: –Userid=harrispe;password=askfjka A single cookie can store up to a max of 20 name/value pairs

40. 7 Cookies Information in cookies is essentially private. You cannot write a program to search for and read cookies on a users workstation because cookies can only be read by the same web site domain name or IP address that created them Not all browsers support creating and maintaining cookies…..and browsers often will allow user to configure the browser to prevent cookies from being saved.

41. 7 Temporary Cookies Figure 7-13: Creating a temporary cookie

42. 7 Temporary Cookies Figure 7-14: Message box displaying cookie

43. 7 Temporary Cookies You can store multiple values in single cookie Figure 7-15: Creating a cookie with two values

44. 7 Temporary Cookies Figure 7-16: Message box showing two cookie values

45. 7 Persistent Cookies Stores cookie name/value pairs in a text file on the user’s workstation Created by using same syntax used to create temporary cookies, but also adding an expiration date

46. 7 Persistent Cookies Figure 7-17: Creating a persistent cookie

47. 7 Persistent Cookies Figure 7-18: Temporary Internet files

48. 7 Using Scripts to Display Different Web Pages and Share Cookie Values Two ways to display a different Web page using a client-side script: –Start a new browser session and open a new browser window with the new Web page displayed –Display the new Web page in the current browser window

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

50. 7 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 VBScript, use the Open method with the following format Window.Open [URL], [Target], [Option List]

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

52. 7 Displaying a Web Page in a New Browser Window Table 7-2: New window Option List parameters

53. 7 Displaying a Web Page in a New Browser Window Figure 7-19: Opening a new browser window

54. 7 Summary A client-side script is uncompiled code that is interpreted on the user’s workstation Client-side scripts are primarily used to validate user inputs entered on HTML forms, open new browser windows, and create cookies Scripts are small program that can be created more rapidly than compiled programs, and can be easily modified using a text editor

55. 7 Summary A cookie contains information that is stored by a Web server on a Web site visitor’s computer A cookie stores information in ordered pairs of variables and associated values, with each separate name/value pair separated from the next by a semicolon (;) Scripts can also be used to open new browser windows, or to navigate to different Web pages within the current browser window