Author: Emmanuel KARTMANN

Date: June 5th, 2003

Environment: ASP (classical), Javascript, IIS

Keywords: Javascript, JScript, ASP, IIS, Client, Server, Browser, script, src, runat

Client-Side and Server-Side Javascript

This article presents a trick to reuse the same source code (Javascript) in client-side (inside a browser) and server-side (inside IIS/ASP).

Javascript is an amazing language which can be executed in two very different environments; it can run within a browser (client-side) as well as within a Microsoft IIS web server (server-side). Running on client-side, Javascript is a good workaround for HTML limitations and helps building user-friendly Web applications (it's also called Dynamic HTML). Running on server-side, Javascript enables building dynamic Web pages (for example reading data from a database and presenting it in a Web browser).

Client-Side Javascript

In order to use Javascript in client-side context (within a browser like Internet Explorer or Netscape), you have to use the script tag:

<script language="javascript">
alert("This is a client-side message");
</script>

Alternatively, you can put your Javascript code in an external file using attribute src of the script tag:

<script language="javascript" src="client_script.js">
</script>

File "client_script.js":

    alert("This is a client-side message");

Server-Side Javascript

To use Javascrit in a server-side context (within Microsoft IIS's ASP engine), you have to use the <%@ %> and <% %> tags:

<%@ language="javascript" %>
<%
  Response.Write("This is a server-side message");
%>

Alternatively, you can use the script tag, with the attribute runat set to "server":

<%@ language="javascript" %>
<script language="javascript" runat="server">
  Response.Write("This is a server-side message");
</script>

And as for a client-side script, you can add the src attribute:

<%@ language="javascript" %>
<script language="javascript" runat="server" src="server_script.js">
</script>

File "server_script.js":

    Response.Write("This is a server-side message");

Shared-Sides Javascript

In order to share the same source code between client-side and server-side context, you have to use an external source file (via the src attribute):

FICHIER "client_server_script.asp":

<%@ language="javascript" %>
<!-- This will load the JAVASCRIPT code into SERVER-SIDE context (no output in browser) -->
< script language ="javascript" src ="client_server_script.js" runat ="server"></ script >

<!-- This will call the JAVASCRIPT code from SERVER-SIDE context -->
<p>
Server:
<%
Response.Write(client_server_function("TEST FROM SERVER"));
%>
</p>

<!-- This will include the JAVASCRIPT code into CLIENT-SIDE context -->
<script language="javascript" src="client_server_script.js"></script>

<!-- This will call the JAVASCRIPT code from CLIENT-SIDE context when you click on the button -->
<p>
Client:
<input type="submit" onclick="alert(client_server_function('TEST FROM CLIENT'));">
</p>

FICHIER "client_server_script.js"

 function client_server_function(strText)
 {
   // Just insert a string before the passed string and return it
   return("client_server_function: "+strText);
 }

When run, this page will output the following:

WARNINGS: Restrictions on a Shared-Sides Javascript file

You can use only basic javascript object, types, functions and methods in a shared Javascript file, i.e:

• You must not put any prefix/declaration tags in the shared source file: no script, <%@ %> or <% %> tags
• You can't use any object, function or method specific to the client-side context (the Browser's object model):
  do not call "document", "body", "frame", "alert"...
• You can't use any object, function or method specific to the server-side context (the ASP object model):
  do not call "Request", "Response", "Server"...

References

• Javascript Language Reference 1.5
  http://developer.netscape.com/docs/manuals/js/core/jsref15/contents.html
• JScript .NET Language Reference
  http://msdn.microsoft.com/library/en-us/jscript7/html/jsoriProgrammingWithJScriptNET.asp
• DHTML SCRIPT Element | script Object
  http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/script.asp
• DHTML SRC Attribute | src Property
  http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/src_1.asp
• Code Declaration Blocks
  http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconcodedeclarationblocks.asp

Downloads

Download article and source code - 22 Kb

History

Date Posted: June 5th, 2003