Subroutines in VBScript Brief Review • VBScript is a scripting language for bring a Web page to “life”. • It is integrated into HTML, especially with the form tag • The Form tag can be used with – Inputboxes – Buttons – Radio buttons – Checkboxes • Syntax for the form tag • <form> • <input type="button" value="Click me" onClick =message> • </form> Create a Web Page Template <html><head> </head> <body> </body> </html> and save it as template.htm. Use it to speed creation of the various Web pages for this class. Subroutines in VBScript • We will use subprograms in almost all of our VBScript programs. • VBScript functions are defined at the beginning of the HTML page and are referred to in the body of the page. • For example, assume you wanted a Web page to display the following text five times. • Welcome to my World! • "How about this VBScript!<br>" • One way to do this is to repeat the following two lines five times… • document.write("Welcome to my World!<br>"); • document.write("How about this VBScript!<br>"); • However, this is inefficent. Instead, we can use a VBscript sub to do the same thing. Welcome Sub Example <html> <script language=“VBScript"> <!-- hide Sub Welcome() document.write("Welcome to my World!<br>") document.write("How about this VBScript!<br>") End Sub Dim Counter For Counter = 1 to 5 Welcome Next --> </script></html> Enter this html and VBScript in Visual Studio, save it as ScriptB.htm, and display in VS or IE.. Defining the Sub In this script we define a function at the beginning of the page. This is done through the lines: Sub Welcome() document.write("Welcome to my World!<br>"); document.write("This about this VBScript!<br>"); End sub The function is called five times to display the message five times. Combining Functions with Event-Handlers Functions can also be used in combination with event-handlers. Consider this example: <html><head> <script language=“VBScript"> <!-- hide Sub AddEm() Dim First, Second, Sum First= 15 Second= 25 Sum = First+Second msgbox(Sum) --> </script></head><body> <form> <input type="button" value="Add Values” onClick= AddEm> </form></body></html> Passing Parameters • It also possible to “pass” values to a sub by including them within the parentheses. • For example, to add 17 and 53 in the function AddEm, we would refer to it as “AddEm 17, 53” and change the function AddEm to be Sub AddEm(First, Second) Dim First, Second, Sum Sum = First+Second Msgbox(Sum) End sub Modify the last file to pass 17 and 53 to AddEm as shown above. Save it as ScriptD.htm and display it. HTML Hierarchy • Hierarchy of the Web Page: everything on Web page is the document object. It may contain multiple form objects which can be named, eg, <form name = “FirstForm”> • To refer to current form, use this.form name • Each form can contain multiple other objects, buttons, textboxes, etc., each named to distinguish it from others. • Note that there are objects and actions or events in VBscript always separated by a period, eg, document.write() where document is the object and write is the action. • Sometimes we have to refer to the entire name of an object, eg, form.name.value, so that a function knows exactly which value is being mentioned. Inputting Data in VBscript • To Input data in VBscript, you must use the text type form, that is., <form> <Input type = “text” name = “Inputbox1”> <form> This will display an Inputbox for a line of input. This input must be referred to as “Inputbox1” NOTE: contents of an input box are alway strings. Anything entered into this Inputbox is referred to as Inputbox1.value For example, lets enter data into an Inputbox and then display with the alert function Displaying Entries in an Inputbox <html><body><head> <Script language = “VBScript”> Sub Message(TheName) msgbox TheName End Sub </head> Please enter your name: <form> <Input type = "text" name = "inputbox1" ><br> <input type="button" value="Display text contents" onClick = “Message 'Your name is ' & inputbox1.value"> </form></body></html> Enter this script, save it as scriptE.htm, and display it. On Double vs Single Quotes • Note that in onClick= “message(„ „) “-we used both double and single quotes. Why? • If we wrote onClick=" message(“ “ )" the computer would get confused as it isn't clear which part belongs to the onClick event-handler and which not. So you have to alternate with the quotes in this case. • It doesn't matter in which order you use the quotes - first double quotes and then single quotes or vice versa. This means you can also write onClick=„message” “ „ Using Forms to Submit Data • To use the Web for electronic commerce, you must be able to send data or information from the Web browser back to the server • For example, if you visited the Jimmy Buffett Margaritaville Web page and wished to purchase Parrothead Paraphenalia, then you need to be able to select items, total the prices, and send this information plus payment information back to Parrothead Central. • This is done through the Submit html command which sends the contents of a form back to the server where it is interpreted by a CGI (Common Gateway Interface), ASP, PHP script or program. The Forms Submission Process Name Form Submitted Email Visa No. User completes Goods sent form using via express Browser on Client CGI script on Computer server computer interprets form and handles transaction Validating and Preprocessing Form Input • On a popular server such as those at Netscape or Microsoft, many forms are received each day • Each form must be interpreted using some type of CGI, ASP, or PHP script before the order can be transacted • To avoid receiving and processing obviously erroneous forms, we can use VBScript to validate or preprocess the form input • For example, VBScript can check to ensure that an e-mail address has an @ symbol in it or that no fields are left blank • Also, VBScript can be used to sum multiple purchases, add the shipping charge and sales tax before submission of the form. Text Entry Validation Example • Assume we want a form that will validate that a non-blank name was entered, that an e-mail address with an @ was entered, and that a valid phone number was entered. • To do this, we need to use IF statements in VBScript to check the contents of inputboxes • We use functions to do this rather than subs since we want to assign a value of “false” to the submit operation of the form if the test fails • Create on function called YourName_onSubmit where YourName is the name of the form with three parts: – Test the name to make sure its not blank – Test the e-mail address to make sure it has an “@” sign in it – Test the telphone number to make sure it has 12 digits Testing for Valid Name and E-mail Address Start by testing the name where txtName is an inputbox in the frmname form <html> <head> <script language = "vbscript"> function YourName_onsubmit Rem Test for a blank name first dim strName, stremail, strphone, frmname set frmname = yourname „create an object strName = frmname.txtname.value if strName = "" or len(strName) < 5 then msgbox "Please input a string that is at least 5 characters long!" frmname.txtname.value = "" frmname.txtname.focus Yourname_onsubmit = false exit function else Msgbox "Hi " & strname & " form input ok!" end if Second and third part of function strEMail = frmname.txtemail.value „New test for e-mail if len(strEMail) = 0 or instr(strEMail,"@") = 0 then msgbox "No Valid E-mail address entered." frmname.txtemail.value = "" frmname.txtemail.focus yourname_onsubmit = false exit function else Msgbox "E-mail address Ok!" end if strPhone = frmname.txtphoneNum.value „New test for phone number if len(strPhone) < 12 then msgbox "Invalid phone number entered." frmname.txtphonenum.value = "" frmname.txtphonenum.focus yourname_onsubmit = false exit function else Msgbox "Phone Number Ok!" end if End Function Now for the Body </script> </head> <body> <form method = "post" action = "mailto:firstname.lastname@example.org" enctype = "text/plain" name="YourName"> Input Your name: <input type = "text" name = "txtname"><br> Input Your E-mail address: <input type = "text" name = "txtemail"><br> Input Your telephone number: <input type = "text" name = "txtphonenum"><br> <input type = "submit" name "cmdsubmit" value = "Send it"> </form> </body> </html> Enter this in Notepad, save it as ScriptF.htm, and display it in IE or VS. Test it with blank names and e-mail addresses as well as e-mail addresses without an @ sign and invalid telephone numbers. Other Operations and Tests for Validity • Note that we use the Len function to test the length of the textbox • We also use the Focus method to set the cursor back to the textbox if fails the test. • We also exit the function after a failed test. • Note that instead of an ASP page as the object of the action command, we have the mailto: operation. This will send the results of the e-mail address listed. The enctype = "text/plain" parameter sends the e-mail as plain text. Class Exercise • Create a Web page that will enable you to input a Social Security number. • Test to ensure the SS Number has 11 characters in it • Test it also to ensure that there is at least one dash in the SS Number • If you get this far, modify the dash test to see if it occurs after three characters and then again after seven characters. • Note that the first argument in the instr function indicates the starting position of the search wherethe first character is numbered at zero (0). If not shown, as in our example, it defaults to the 0 position.
Pages to are hidden for
"Client Brief Template"Please download to view full document