Client Brief Template by ebc11140

VIEWS: 300 PAGES: 21

Client Brief Template document sample

More Info
									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:pmckeown@terry.uga.edu" 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.

								
To top