Client-Side Scripting

1
Client-Side Scripting
2
Review of Client-Side Scripting

• Client-side scripting occurs on the HTML page
  sent by server to browser
• Script is interpreted by browser and action
  occurs on browser
• Types of client-side scripting include
• VBScript runs only on IE
• Javascript runs on Netscape or IE

3
Applications of Client-Side Scripting

• Web page responds to or reacts directly with user
  interaction through HTML Form elements, eg, input
  fields, text areas, buttons, radio buttons, etc.
• Distributing a small amount of database
  information directly from the Web page
• You need to control the Web page appearance based
  on user selections
• You want to preprocess data before submission to
  the server.

4
Client-side Script cant ...

• Set or retrieve browser preferences
• launch an application on client computer
• read or write files on client computer
• Extract text content from HTML page
• Do much of anything on server computer including
  accessing a database

5
A VBScript Example

• Open Notepad or Visual Studio and enter the
  following HTML
• lthtmlgt
• ltbodygt
• ltbrgtThis is a normal HTML document.ltbrgt
• ltscript languageVBScript"gt
• lt!-- hide from old browsers and Netscape
• document.write("This is VBScript!")
• --gt
• lt/scriptgtltbrgt
• Back in HTML again.
• lt/bodygt
• lt/htmlgt
• Save it as ScriptA.htm
• Now switch back to IE and use File Open to
  retrieve Script1.htm

6
The Result.
This is a normal HTML document. This is
VBScript! Back in HTML again. Not too
exciting, but its a start!
7
VBscript and Events

• Events and event handlers are very important for
  Client side programming. Events are mostly caused
  by user actions.
• If the user clicks on a button a Click-event
  occurs. If the mouse pointer moves across a link,
  a MouseOver-event occurs.
• We want our VBScript program to react to certain
  events. This can be done with the help of
  event-handlers.
• A button might create a popup window when
  clicked. This means the window should pop up as a
  reaction to a Click-event.
• The event-handler we need to use is called
  onClick. This tells the computer what to do if
  this event occurs.
• To work with events, we must first know a little
  about forms...

8
A Few Words on Forms...

• Forms are used to prompt the web surfer for
  information and enable them enter the information
  into the web page. The information is then
  processed by JavaScript or sent to the server
• Types of forms include
• a simple text entry field
• radio buttons which are a group of options from
  which the user selects
• Text Area fields provide for multiple lines of
  text entry.
• Combo Boxes present a list of valid values that
  can be chosen by the Web Surfer from a pull-down
  list.
• Checkboxes are similar to radio buttons, except
  checkboxes are not party of a group, and either a
  box is checked, or not!
• All forms start with ltformgt and end with lt/formgt

9
Combining Forms and Event Handlers

• The following code shows an easy example of the
  event-handler onClick and the button form
• ltformgt
• ltinput type"button" value"Click me" onClick
  alert(Yo)gt
• lt/formgt

Indicates this is an Input form
Indicate this is of type button
The caption for the button
The action to be taken when clicked--Alert is a
pop-up messagebox
Note Alert is a Javascript command but you dont
need to enclose it in ltScript brackets. Add
these three lines to ScriptA.htm right after
Back in HTML again and have IE display
it. Click the button. What Happens?
10
IE and Javascript

• Unless told otherwise, both IE and Netscape
  assume all client-side script is Javascript
• This is why we use the Javascript Alert function
  instead of the Vbscript Msgbox subroutine
• If you change Alert to Msgbox, the button wont
  respond
• To make it recognize the Msgbox sub, we need to
  create own event-handler sub as shown on the next
  page

11
VBScript Event-handler Sub
ltHTMLgt ltHEADgt ltscript language "vbscript"gt sub
message() msgbox("Yo") end sub lt/scriptgtlt/HEADgtltB
ODYgtltformgt ltINPUT idbutton1 namebutton1
typebutton value"Click me" onclick
messagegt lt/formgtlt/BODYgtlt/HTMLgt
12
VBScript Event Handler

• Use Visual Studio to add this code to a new html
  page
• Click on Quick View and notice that you can
  test the code without saving it and switching to
  IEonly works on client-side scripting
• Notice that the button now works