Client and Server Scripting in Web Pages

Article
07/12/2006

Valerie Whitcomb
Visual InterDev Technical Writer

July 1997

Applies to:** **Version 1.0 of Microsoft® Visual InterDev®

Introduction Considering Your Client and Feature Set Avoiding Common Scripting Errors Incorporating Client and Server Script Sample Code: Client and Server Script in a Single Web Page

Introduction

If you are building a Web application, whether for use on the Internet or an intranet, you need to understand how to effectively use both client and server scripting to make the application both dynamic and interactive.

In this article, you'll read about some typical scenario-based development challenges, and how you can use Active Server Pages (ASP) and server scripting to overcome them. You'll see how to effectively use client scripting to make your pages more interactive and responsive to users. This paper also gives you samples of common scripting tasks in Microsoft® Visual Basic® Scripting Edition (VBScript) and Microsoft Jscript™ for client-side scripting, and VBScript for server scripting.

Considering Your Client and Feature Set

Client scripting and server scripting serve different purposes. Server scripting, via ASP, can be used to create Hypertext Markup Language (HTML) pages on the fly on the Web server that are then sent to the browser. For example, you can use server scripting to query a database and format the results into an HTML page that is then sent to the user as a static page. All server scripting takes place before the page is sent to the browser.

Client scripting, on the other hand, is used to make your pages more interactive after they have been sent to the browser. For example, you might use client scripting to validate data entry fields on an HTML form so the user gets immediate feedback when they make a mistake, or to integrate a control or Java applet with another component on the page so that they interact.

Remember, client scripting depends on the browser that supports it, so you need to be aware of the types of browsers that might access your page. However, you can use server scripting, in ASP pages, to create pages that can reach any browser with just pure HTML.

If you are developing for the Internet, you probably won't know the capabilities of every client your application may reach. On the other hand, if you are developing for an intranet, you might be able to target a single type of Web browser to exploit its particular strengths. Table 1 will help you evaluate your reach considerations when using client scripting. Current statistics indicate that 80% of the Web browsers used today are capable of interpreting frame sets, background colors, and client script.

Table 1.Browser Considerations

To reach	Use client scripting	Use server scripting
100% of an intranet^*	Yes	Yes
80% of the Internet	Yes	Yes
100% of the Internet	No	Yes, exclusively

* Assumes that intranets would be using the most recent versions of a script-enabled browser such as Microsoft Internet Explorer.

While server scripting can be accomplished using Common Gateway Interface (CGI) programs or other techniques, this paper assumes the use of Microsoft Internet Information Server (IIS) 3.0 or above with Active Server Pages to provide server scripting capabilities.

After you determine which browser and client set you would like to target, you can evaluate the feature set for your Web application to determine which features are most efficiently processed on the client and which on the server. Table 2 lists some general guidelines for choosing whether to implement a feature in client or server script.

Table 2. General Guidelines to Implement a Feature in Client or Server Script

For	Use
Pages without conditional text or formatting	Straight HTML in .htm files
Security features	Server script in .asp files
Database updates/inserts/deletes	Server script in .asp files
Database information formatting and display	Client or server script in .htm or .asp files
Broadest reach with greatest Web development flexibility	Server script in .asp files to send straight HTML to client

If you are coming from a client/server environment, you need to be aware of some of the differences when programming a Web-based application. For example, to manage state in a client server application, you could use global variables but in a Web application, which is a series of hyperlinked pages, managing user states between pages is very different. Instead of global variables, you need to use built-in ASP objects to manage user states across pages. In addition, instead of capturing user input using standard window controls, you need to use HTML forms processed using the Request object that is part of ASP. If you want to become familiar with these concepts, you can run through the ASP tutorial included with Microsoft Visual InterDev® version 1.0 and IIS 3.0. On your Web server machine, open the Microsoft Internet Server program group from the Start menu, and then choose Active Server RoadMap.

Avoiding Common Scripting Errors

You can avoid some common scripting errors by practicing these coding conventions:

Tagging script blocks for easy reading and straightforward evaluation
Using values of server variables, not references to server variables in client script
Referencing the appropriate object model for the functionality you want to control

Tagging Script Blocks

In your pages for client scripting, you need to tag script blocks and identify the language used within the tags. If you do not specify a language, Internet Explorer assumes you are using JScript. If you are using server scripting, remember to save your file with a .asp extension so IIS knows to process the script before sending the page to the browser. Unlike client scripting, IIS assumes VBScript is the default scripting language, although JScript is fully supported as well. The tags you use to identify blocks of script can help you avoid common scripting errors. Table 3 summarizes the use of the script tags.

Table 3. Script Tags

Task	Client script tag	Server script tag^*
Start script and identify the language	`<SCRIPT LANGUAGE = "MyFavoriteScript">`	`<%@ LANGUAGE = "MyFavoriteScript"%> Used once only at the top of the page`
Start script	`<SCRIPT LANGUAGE = "MyFavoriteScript">`	`<%`
^*Hide script from browsers without script capability	`<!-- Place script here. --->`	Not applicable, server-script is never sent to the client
End script	`</SCRIPT>`	`%>`
Print server script or variables in client script	`Document.write`	`<%= variable name here %>`

*If a user has a browser that is not script-enabled, the comment tags prevent the code from appearing in the page as text. The code for server script is executed and stripped before being sent to the client, so you do not need to hide it.

**Note **Although you can use <SCRIPT LANGUAGE = "MyFavoriteScript" RUNAT = "Server"> to tag server script in place of the <% %> tags, you will make your pages easier to develop and debug by using the shorthand tags <% %> for inline scripts, while using the full <SCRIPT> tag for function/procedure definitions within a page.

Client vs. Server Objects

While scripting, keep in mind that the objects in your script most likely are part of the functionality you are scripting—not necessarily the scripting language. This means that you use a variety of object models within your pages depending on the functionality you want to control, not the language you are using. If you are using Microsoft Internet Information Server, the object models you are likely to use appear in Table 4. For more information about object models, see the topic "Microsoft Visual InterDev Object Models" in the Overview Section of the online User's Guide for Microsoft Visual InterDev.

Table 4. Object Models

To control	Object Model	Sample Objects
The browser and its documents with client script	Internet Explorer (3.0 and higher)	Frame History Navigator Location Script Document
	Netscape Navigator (3.0 and higher)	Location History Document
HTML pages sent to the browser with server scripting	Active Server Objects	Application Request Response Server Session
Database record display, updates, inserts and deletes with server scripting	ActiveX Data Objects (ADO)	Connection Command Recordset Field
Database record display on the browser with client scripting	Data Source Objects (DSO)	Available with Internet Explorer 4.0

Using Server Variables in Client Script

You can never directly reference server variables or objects in client script. Remember that all server scripting is evaluated on the server, and then stripped out of the page so that the script itself is never sent to the browser. A wall exists between server variables and objects and the client script. If you want to pass server variables to the browser as variables for use in client script, you can do so. The sample below shows the results at each stage of the page rendering. (For a more detailed sample of how server and client script is evaluated, see "Sample Code: Client and Server Script in a Single Web Page" at the end of this document.)

**Tip **To make client and server script readily distinguishable in the page, specify server script with the shortcut tags of <% %> and enclose client script in comment tags . The Visual InterDev Source Code editor displays them in two different colors. When you write the client script, you can remember that the server variables colored yellow never reach the client but generate HTML when the page is run; therefore, those references are not available. You can print the variables value to the client by using the <%= %> tag.

The code in the next two samples shows the difference between using the value of a server variable versus referencing a server variable. The equal sign (=) within the server script tag prints the value of the variable.

 <%@ LANGUAGE="VBSCRIPT" %>

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual InterDev 1.0">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>

<% Dim strMyServerVar
strMyServerVar = 42 %>

The following line of HTML was generated on the server using server scripting to print the value of a server variable into the page before the page was sent to the browser:

<br>
<br>
<strong>
The value of the server variable is <%=Session("strMyServerVar")%>.
</strong>
<br>
<br>

The following line of HTML was generated on the client to print the value of a client variable into the page after the page was sent to the browser. The value of the client variable has been set equal to the value of the server variable printed above.

<BR>
<BR>
<SCRIPT LANGUAGE = "JavaScript">
<!---
var x ;
x = <%= strMyServerVar %> ;
if (x == <%= strMyServerVar%>) {
   document.write ("<STRONG>The value of the client variable is " + x + ".</STRONG>")
   }
//
--->
</SCRIPT>

</BODY>
</HTML>

While the script sample above shows a correct approach to passing variables between server and client scripts, the following sample shows two common mistakes made when using server variables in client script. In line 4, the variable does not have server tags identifying it. Line 5 is missing the equal sign indicating that the value should be printed. These mistakes would generate errors when the page is viewed in the browser. The exact errors depend on the scripting language you are using.

1  <% strMyServerVar = 42 %>
2  <SCRIPT LANGUAGE = "jscript">
3  <!---
4  var x ;
5  x = strMyServerVar ;
6  if (x == <%= strMyServerVar %>) {
7     document.write ("<STRONG>The value of the client variable is" + x + 
   "</STRONG>")
8     }
9  //
10 --->
11 </SCRIPT>

Incorporating Client and Server Script

After you have identified your target client and know the three basic scripting mistakes to avoid, you can start incorporating HTML, client, and server script into your pages. You can choose from a variety of ways to accomplish a particular task such as evaluating browser capabilities, accepting user preferences, and responding to various conditions. Here are some common ways you can script your pages to evaluate and respond to your user's browser, input, or other variables. You can use the tasks and samples below to help you get results on your Web pages.

Comparing Basic Syntax and Object Models
Redirecting to Another URL
Changing Content Based on a Condition
Displaying Messages
Evaluating Browser Capabilities
Publishing Database Information

Comparing Basic Syntax and Object Models

You probably already know how to use straight HTML to display static information in your page. In selecting a scripting language, for compatibility across both Microsoft and Netscape browsers, use JScript. If you are familiar with Visual Basic, and you know your target browser will always be Internet Explorer, then you might want to choose VBScript. For server scripting, your choices are not limited by the capabilities of the browser. If you have Visual Basic experience, then you will likely find VBScript the easiest to use on the server, although you can also use JScript if desired.

As a quick comparison of scripting syntax for each language and object model, the following code samples show how to accomplish the simple task of displaying and formatting the word "Hello." These samples illustrate the differences in object models and syntax. You probably won't be using script to enter the majority of your text strings.

HTML

<P><B>Hello</B></P>

ActiveX server response object in server script

<% response.write "<P><B>Hello</B></P>" %>

Browser document object in client JScript

<SCRIPT LANGUAGE="jscript">
<!--
document.write ("<P><B>Hello</B></P>");
//
--->
</SCRIPT>

In the following example, the server script in an .asp performs a simple calculation and then shows only the text and the result on the page. Text outside script delimiters appears as text in the page.

Server script calculation

<%@ LANGUAGE="MyFavoriteLanguage"%>
<%
x = 2
y = 6
z = x * y
%>
The result is: &nbsp<%=z%>

The following client script samples accomplish the same calculation and text display.

Client JScript calculation

<SCRIPT LANGUAGE="jscript">
<!--
var x, y, z ;
set x = 2 ;
set y = 6 ;
set z = x * y ;
document.write ("<P>The result is:&nbsp" + z + "</P>");
//
--->
</SCRIPT>

Client VBScript Calculation

<SCRIPT LANGUAGE="vbscript">
<!--
dim x, y, z
x = 2
y = 6
z = x * y
document.write "<P>The result is:&nbsp" + z + "</P>"
--->
</SCRIPT>

Redirecting to Another URL

If you move or replace a file, you can ensure that links to that page from other sites still work by using a redirect. By placing code in the previous file, you reroute them from the old file to the new one. Here are some ways you can accomplish this.

HTML

Typically you want the user to go to the next page without interruption. However, if you want the browser to pause for some time to display some announcement text, you can specify a number of seconds after the CONTENT element.

<META HTTP-EQUIV="refresh" CONTENT="0; URL=MyOtherPage.asp">

Note that the quotation marks after CONTENT enclose both the pause value and the new URL.

Client JScript using a browser object

<SCRIPT LANGUAGE="jscript">

<!---

   Location.HRef = ("//MyServer/MySiteProject/MyOtherPage.asp");
   --->
</SCRIPT>

Client VBScript using a browser object

<SCRIPT LANGUAGE="vbscript">
   <!---
   Location.HRef = ("//MyServer/MySiteProject/MyOtherPage.asp")
   --->
</SCRIPT>

Server VBScript using an ActiveX server object

To use the server method, you need to place this code before the open HTML tag so that the redirect is evaluated before the page's header information is read.

<%
Response.Redirect "./MyOtherPage.asp"
%>
<HTML>

Changing Content Based on a Condition

If you want to display a certain page based on some condition such as a user preference or browser capability, you can change the page presented to the user. Here are several ways using either client scripting or server scripting.

META tag using JScript writing HTML code

If you want to provide a pause before the switch to another URL without scripting a pause, you can use script to modify the <META> tag based on a condition.

<HEAD>
<SCRIPT LANGUAGE = "jscript">
<!-- 
var somevalue
somevalue = y
if (x == "somevalue") {
   document.write ("<META HTTP-EQUIV='refresh' CONTENT='5 URL=./myotherpage.asp'>");
   }
//
--->
</SCRIPT>
</HEAD>

ActiveX server Redirect() method

You can use server side script to evaluate conditions and redirect the browser to another page using the Redirect() method of the Response object. The Redirect() method needs to be evaluated before the start of the <HTML> tag portion of the page.

<%
If x = "somevalue" Then
   Response.Redirect "./myotherpage.asp"
End If
%>
<HTML>

ActiveX server Include design time control

If you want to display a page based on a condition but you want to combine a couple of pages into one display page, you can use the Include design time control. The design time controls are available from the Visual InterDev Insert menu. If you do not want to modify the control through the user interface, you can leave out the metadata and use just the INCLUDE statements as shown in this sample.

<% If x = "somevalue" Then %>
      <!--#INCLUDE FILE="../myotherpage.asp"-->
   <% Else %>
      <!--#INCLUDE FILE="../someotherpage.asp"-->
      <!--#INCLUDE FILE="../anotherpage.asp"-->
   <% End If %>
<%

Client JScript and a browser object

<SCRIPT LANGUAGE="JScript">
<!---
if (x=="somevalue") {
   location.href = "./myotherpage.asp";
   }
else {
   }
//
--->
</SCRIPT>

Client VBScript and a browser object

<SCRIPT LANGUAGE="VBScript">
<!---
If x = "somevalue" then
   location.href = "./myotherpage.asp"
Else
End If
--->
</SCRIPT>

Validating Input and Displaying Messages

In client code, you can use the Alert and Prompt methods of the browser to display a message or accept input. Remember, displaying popup browser messages in server script is not possible as the server script only runs on the server.

**Note **VBScript offers the MsgBox() function so that you can extend easily the number and type of buttons your message box displays. See the VBScript Reference for more information.

You can make sure users enter values into your form and provide prompts to gather missing values. The following examples in JScript and VBScript verify that a value was entered into the text box of a form. If the text box is empty, a prompt appears requesting a value.

<FORM METHOD="post" NAME="frmPrompts">
<P>Your Answer Here&nbsp&nbsp<INPUT TYPE="text" NAME="txtPrompts"></P>
<P><INPUT TYPE="button" NAME="btnOK" VALUE="OK" onclick="checkforvalue()"></P>
</FORM>

Client JScript using the Prompt and Alert methods

<SCRIPT LANGUAGE="jscript">
<!---
function checkforvalue() {
   if (frmPrompts.txtPrompts.value == "") {
      Alert ('Please provide an answer.');
      }
   else {
      frmPrompts.submit();
      }
}
//
--->
</SCRIPT>

Client VBScript using the Prompt and Alert methods

<SCRIPT LANGUAGE="vbscript">
<!---
Sub checkforvalue()
   If frmPrompts.txtPrompts.value = "" Then 
      Alert ("Please provide an answer.")
      
   Else 
      frmPrompts.submit()
   End If
End Sub
--->
</SCRIPT>

Evaluating Browser Capabilities

If you are targeting the Internet, you might want to evaluate the user's browser and process the pages based on the browser's capabilities. For example, the following server script sample uses the type of browser to determine what is sent to the browser.

If you want to change the text or formatting based on the type of browser, you can use server side scripting to determine the browser's capabilities and provide HTML code based those capabilities. If you want more information about the capabilities that you can evaluate, search for "Browser Capabilities Component" in the Visual Studio documentation set. Although you can use client script to evaluate the browser's navigation object, server script is the more efficient method and the only one shown here.

In this example, if the browser can interpret tables, then HTML table tags are provided to the browser; otherwise, the text is formatted using the PRE tag to preserve the white space between text strings.

 <% Set bc = Server.CreateObject("MSWC.BrowserType")
    If bc.Tables = True Then %>
<TABLE BORDER=1>
  <TR><TH>Food</TH><TH>Category</TH></TR>
  <TR><TD>Banana</TD><TD>Fruit</TD></TR>
  <TR><TD>Carrot</TD><TD>Vegetable</TD></TR>
  <TR><TD>Salmon</TD><TD>Seafood</TD></TR>
</TABLE>
<% Else %>
<PRE>
Food       Category
----       --------
Banana     Fruit
Carrot     Vegetable
Salmon     Seafood
</PRE>
<% End If %>

Publishing Database Information

You can create a record set from your database, files, or SQL queries to merge with HTML and display in a Web page. Although you could write CGI script, Visual InterDev and .asp files make server data publishing easy through IIS and its Active Data Objects (ADO). With ADO, all processing is typically done on the server so just broad-reach HTML is sent to the browser. Also, you can use the Advanced Data Connector to bring database information to the browser for client manipulation. Beginning with Internet Explorer 4.0 and the introduction of Dynamic HTML, the browser will also provide client controls, such as Data Source Objects (DSOs), that can perform data-binding functions. You will find a sample of a new control for use with Internet Explorer 4.0 in the following samples. For more information, visit the Microsoft Internet Explorer Web site (www.microsoft.com/windows/ie/default.htm). For the purposes of this document, we will limit our discussion to the use of server data binding using ASP and ADO.

Server VBScript with ADO Objects

You can create a connection and populate a record set using ADO. Here's a sample of code that uses an Open Database Connectivity (ODBC) connection to connect to a database, and populate a variable named rsMyRecordSet. The following code can be included in one set of server script tags, <% %>.

Specify an ODBC connection and connect to your database.

<% Set MyConnection = Server.CreateObject("ADODB.Connection")
MyConnection.Open Session("MyConnection_ConnectionString"), Session("MyConnection_RuntimeUserName"), Session("MyConnection_RuntimePassword")%>

Create and populate a record set.

<%
  Set cmdTemp = Server.CreateObject("ADODB.Command")
  Set rsMyRecordSet = Server.CreateObject("ADODB.Recordset")
  cmdTemp.CommandText = "SELECT Field1, Field2, FROM MyTable"
  cmdTemp.CommandType = 1
  Set cmdTemp.ActiveConnection = MyConnection
 rsMyRecordSet.Open cmdTemp, , 1, 3 %>

Format and display the field values. Here's a sample of a loop that displays all the fields from a single record. Of course, you can combine HTML codes and your scripting to create the display you want.
```
If Not rsMyRecordSet.EOF Then
   dim FldTemp
   For Each fldTemp in rsMyRecordSet.fields
      Response.Write fldTemp.Value
   Next
Else
      Response.Write "It's the end of the file!"
End If
```

Design-Time Controls

If you want to quickly generate script for connecting, displaying, and navigating your records, you can do so with little manual coding using Visual InterDev. All of the database connection and record set navigation in Figure 1 was generated using the Data Range Header and Footer controls. Only a few lines of code were added for formatting the fields.

Figure 1. Connecting, displaying, and navigating with design-time controls

To get similar results, you need to have a data connection in your Web project that can be used to build the ADO connection string information automatically. Next, insert Data Range Header and Footer controls into the page. You will need to add HTML code and server script for displaying the records. For complete information about the design-time controls, look under "Design Time ActiveX Controls" in the Visual InterDev Developer's Reference.

The Data Range Header control automatically provides the following functionality:

Specifies the control's meta-data based on the choices made when the control was created or edited
Initializes the navigation bar that is specified in the Data Range Footer control
Checks for a RecordSet object and then creates one if needed
Sets a filter, checks for an empty record set, and then specifies values for variables for the navigation bar
Opens the Do loop statement used along with the Data Range Footer control to navigate, read, and display the records in the record set

To actually display the record set, you need to add the formatting code and specify the fields to show. Here's an example of the HTML code and server-script used in Figure 1.

HTML code and server script inserted outside script delimiters before the Do Loop provided by the Data Range Header control

%>
<H3>Number of Customer Claims</H3>
<TABLE WIDTH=100% BGCOLOR=#D4EBF9 >
<TR><TD><B>No.</B></TD><TD><B>ID</B></TD><TD><B>Name</B></TD><TD><B>City</B></TD><TD><B>State</B></TD>
<%

HTML code and server script inserted outside script delimiters before the Do Loop provided by the Data Range Header control.

%>
<TR>
  <TD><%= DataRangeHdr1("Claims") %></TD>
  <TD><%= DataRangeHdr1("Customer_ID") %></TD>
  <TD><%= DataRangeHdr1("First_Name") %><%= DataRangeHdr1("Last_Name") %></TD>
  <TD><%= DataRangeHdr1("City") %></TD>
  <TD><%= DataRangeHdr1("State") %></TD>
</TR>
%>

HTML code and server script inserted outside script delimiters after the Do Loop completed by the Data Range Footer control.
```
%>
</TABLE>
<%
```

The Data Range Footer control automatically provides the following functionality:

Specifies the control's meta-data based on choices made when the control was created or edited
Completes the Do Loop statement for moving through the record set and formatting the data with HTML code
Specifies the navigation bar for moving through the record set

Client JScript or VBScript and DSO in Internet Explorer 4.0

At the time of this writing, most Web applications publish data by merging data with HTML formatting in a page on the server and sending straight HTML to the client. Soon the DSOs available with Internet Explorer 4.0 will give the client a way to read and manipulate stored information. Here is a sample of the Tabular Data Control on the client side.

Specify the data bound object.

<SCRIPT>
<!--
<OBJECT ID=MyDataControl CLASSID="clsid:333C7BC4-450F-11DO-BC04-0080C7055A83" WIDTH=0 HEIGHT=0>
  <PARAM NAME=DataURL VALUE="MyDataFile.txt"
  <PARAM NAME=TextQualifier VALUE="."
  <PARAM NAME=UseHeader VALUE=True
</OBJECT>
--->
</SCRIPT>

If appropriate, specify HTML form elements to get values from the user and button to modify the display of the data.

<FORM>
<INPUT TYPE = "textbox" NAME="txtfield2">
<INPUT TYPE = "button" NAME="butFilter VALUE="Filter Records" onClick="field2_filter()">
</FORM>

Write a filter function that specifies the three parts of the filter expression, the field to evaluate, the comparison operator, and the value.

<SCRIPT>
<!--
function Field2_Filter() {
   MyDataControl.FilterColumn="Field2"
   MyDataControl.FilterCriterion="="
   MyDataControl.FilterValue=txtfield2.value
--->
</SCRIPT>

Sample Code: Client and Server Script in a Single Web Page

You can take advantage of the strengths of your server and your client by scripting both in a single page. The following sample code, although not a practical example of accomplishing a task, gives you an idea of how HTML, client script, and server script can be written into one page and how they are processed at each step.

The code includes a server variable, MyServerVar, and a client variable, MyClientVar. It also prints simple text strings to identify each value. To better show the difference between the client script and the HTML the client displays, the code includes a client IF statement.

Here are the three different views of the sample provided in this paper.

Source Code in Your Source Code Editor
HTML and Client Script in View Source Code
HTML Code Displayed in the Client Browser

Source Code in Your Source Code Editor

After you finish coding your page, it might look similar to this sample. You can see the server code marked with the server script tags, <% %> and the client script shown with <SCRIPT> tags.

<%@ LANGUAGE="VBSCRIPT" %> <HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual InterDev 1.0">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Sample Script Evaluation</TITLE>
</HEAD>
<BODY>
<-- *** Server Script *** --->
<% MyServerVar = 6 %>
<P>This value was evaluated on the server  " <% MyServerVar %>"</P>

<-- *** Client Script with a Server Script Variable *** --->
<SCRIPT LANGUAGE="jscript">
<!---
var MyClientVar ;
MyClientVar = (<%= MyServerVar %> + 1) ;
document.write ('<P>This value is a client value  ' + MyClientVar + '</P>');

if(MyClientVar == 42) {
    document.write ('<P>The server and client values are equal ' + MyClientVar + '</P>');
    } 
else { 
    document.write ("<P>The server and client value are not equal because our script told the client to add 1.</P>");
}
//
--->
</SCRIPT>

</BODY>
</HTML>

HTML and Client Script in View Source Code

When you test the page in your browser, the server reads your code and processes only the code within server script tags, <% %>. After processing the server script, the rest is passed to the client as straight HTML with embedded client script. The code below is what the browser interprets and also what the user would see if using View Source Code. In this sample, you will notice that the server script is stripped out and the literal value of the server variable, "6," appears within the embedded client script.

<HTML>
<HEAD><META NAME="GENERATOR" Content="Microsoft Visual InterDev 1.0">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Sample Script Evaluation</TITLE>
</HEAD>
<BODY>
<-- *** Server Script was here *** --->
<P>This value was evaluated on the server 6</P>
<-- *** Client Script is here with the Value from the Server Variable *** --->
<SCRIPT LANGUAGE="jscript">
<!---
var MyClientVar ;
MyClientVar = (6 + 1) ;
document.write ('<P>This value is a client value  ' + MyClientVar + '</P>');

if(MyClientVar == 42) { 
    document.write ('<P>The server and client values are equal: ' + MyClientVar + '</P>');
    } 
else { 
    document.write ("<P>The server and client value are not equal because our script told the client to add 1.</P>");
}
//
--->
</SCRIPT>

</BODY>
</HTML>

HTML Code Displayed in the Client Browser

The client script interpreter executes the code within the client script tags, <SCRIPT>.

 <P>This value was evaluated on the server 6</P>
<P>This value is a client value 7</P>
<P>The server and client value are not equal because our script told the client to add 1.</P>

The browser interprets and displays these HTML codes as shown in Figure 2.

Figure 2. The results of HTML code displayed in the client browser.

Client and Server Scripting in Web Pages

Contents

Introduction

Considering Your Client and Feature Set

Avoiding Common Scripting Errors

Tagging Script Blocks

Client vs. Server Objects

Using Server Variables in Client Script

Incorporating Client and Server Script

Comparing Basic Syntax and Object Models

HTML

ActiveX server response object in server script

Browser document object in client JScript

Server script calculation

Client JScript calculation

Redirecting to Another URL

HTML

Client JScript using a browser object

Client VBScript using a browser object

Server VBScript using an ActiveX server object

Changing Content Based on a Condition

META tag using JScript writing HTML code

ActiveX server Redirect() method

ActiveX server Include design time control

Client JScript and a browser object

Client VBScript and a browser object

Validating Input and Displaying Messages

Client JScript using the Prompt and Alert methods

Client VBScript using the Prompt and Alert methods

Evaluating Browser Capabilities

Publishing Database Information

Server VBScript with ADO Objects

Design-Time Controls

Client JScript or VBScript and DSO in Internet Explorer 4.0

Sample Code: Client and Server Script in a Single Web Page

Source Code in Your Source Code Editor

HTML and Client Script in View Source Code

HTML Code Displayed in the Client Browser

Additional resources