DYNAMIC WEB PAGES
Overview
A Web application developed solely using HTML tags is static. Today,
most Web applications display dynamic Web pages such as that of an ecommerce system. However, there are two types of dynamic web pages:
client-side and server-side.
Client-Side Dynamic Web Pages
In this model, modules (or plug-ins or an interpreter) attached to the
browser do all the processing in creating dynamic pages. The instructions
for creating dynamic actions are typically intermingled with HTML codes
and are saved in a Web Server. When a browser receives such a Web
page from the Web server, the browser processes the instructions and
displays the result.
Quick
Fact:
 Since the interpreter in Client-Side scripts is built into the
browser, client-side scripts are platform independent.
 The browser translates the script line by line into executable
form for whichever architecture and operating system the
browser is running on.
 The programmer only has to write the script once and it will
run on many different platforms.
 But the client-side script is browser dependent.
Server-Side Dynamic Web Pages
In this model, modules (or plug-ins or an interpreter) attached to the Web
Server do all the processing in creating dynamic pages. The instructions for
creating dynamic actions are typically intermingled with HTML codes and
are saved in a Web Server. When a browser requests such a Web page
from the Web server, the Web Server processes the instructions and
creates a stream of HTML codes and sends it to the browser. The browser
processes the HTML and displays the result.
1
Scripting Languages for Providing Dynamic Content
The most common technology for writing dynamic Web pages is using a
scripting language. A Scripting Language, such as JavaScript or VBScript
combine tools from programming languages to make them more concise
and usable. JavaScript or VBScript, if used correctly, can add interactivity
to Web pages.
Scripting languages use a program called an interpreter to translate the
script code into an executable format. The interpreters can be on the
Client or Server. If the interpreter is on the client, it is usually included in
the browser and the scripts are interpreted when the browser downloads
the Web page.
There are two kinds of scripts: client-side scripts and server-side scripts.
 Client-side scripts are downloaded with a Web page to a client
computer and executed.
 Server-side scripts are executed on a Web server.
2
Client-Side Technologies
JavaScript: JavaScript is the most commonly used client-side scripting
language, because it is supported by most browsers. It should not be
confused with Java, which is a complete application programming
language. Netscape and Sun Microsystems jointly developed the
JavaScript, while Sun Microsystems developed the Java language.
JavaScript is designed to create small, efficient applications that can do
many things, from performing repetitive tasks to handling events generated
by users such as mouse clicks, keyboard responses and so on. However,
some of the functionality of JavaScript such as file handling is restricted for
security reasons.
Microsoft introduced its own version of JavaScript that is termed as
JScript.
VBScript: VBScript is a scaled down version of the Microsoft
programming language Visual Basic. It is intended to be a competitor of
JavaScript however, it is not browser independent – it works well only with
the Microsoft browser such as the Internet Explorer.
Java Applets: Java applets are small Java programs that are embedded
in the Web pages by using the <applet> tag. Java applets can provide
better graphic functionality. It also provide file handling capability, but
without compromising the security. This is performed by running applets in
a sandbox – which prevents malicious programs downloaded from the
Web to damage the system.
Flash: Flash from Macromedia is a Web motion tool that allows users to
create animations, interactive graphics, and user interfaces. It is popular
for developers who want to include graphics and sound in the Web pages.
A plug-in to view Flash objects are already included with popular browsers
such as Internet Explorer and Nescape Navigator. Flash also provides its
own scripting language ActionScript which is very similar tot JavaScript.
3
Server-Side Technologies
As it was said, like client-side scripts, server-side scripts are part of a Web
document, but they are executed on the server rather than in the client’s
browser. A scripting engine installed on the server interprets the serverside scripts. After the scripting engine runs the script, it sends the output
back to the browser.
Although the server-side and client-side scripts can coexist in a Web
document, the server-side script source code never appears in the
browser; only the HTML and client-side scripts appear.
There is no scripting standard available for server-side scripts. That is,
server-side scripting depends on the Web server. Netscape supports
JavaScript on the Netscape Enterprise Server. Microsoft Internet
Information Server supports VBScript and JScript.
Common Gateway Interface (CGI): CGI is a server-side technology that
allows a Web user to invoke a program written in a scripting language such
as Pearl. Thus a user can provide inputs from a browser and gets results
back to the browser after processing files or a database in a different
computer. CGI is the oldest technology that is used to create dynamic
server-side Web pages.
However, CGI has several shortcomings. It is not easy to learn - especially
for a beginning programmer. It requires a lot of server resources, that is,
each user request requires a new process to run on the Web server. For
these reasons, CGI
Active Server Pages (ASP): Microsoft’s original implementation of serverside scripting technology is referred to as Active Server Pages or ASP. An
ASP module attached to the Web server does all the processing of the
scripts embedded in a Web page.
Active server pages use VBScript and JavaScript codes to create dynamic
pages. ASP allows any of the functionality provided by Windows such as
read from a file or write to a file, database access, e-mailing, graphics,
networking, and system functions, all from a browser.
4
All active server pages must have an .asp file extension. When a client
requests a file with an .asp extension, the Web server knows to process
the server-side scripts on the Web server and send the result to the client
(browser).
Java Server Pages (JSP): JSP allows users to combine HTML or XML
with Java codes to dynamically generate web pages like ASP. JSP
requires a plug-in to be installed in the Web server and it is implemented
by several Web servers.
One of the advantages of JSP is that it is platform independent – codes
written in JSP should work in all Web servers. JSP is also faster than ASP.
ColdFusion: ColdFusion allows creation of dynamic Web pages by using
a set of HTML-like tags. In order to process these tags, it requires a
ColdFusion Server to be installed to the Web server. The ColdFusion
server can run on multiple platforms such as IIS, Netscape Enterprise
Server and Apache.
PHP: PHP Hypertext Preprocessor is another server-side scripting
technology whose language syntax is similar to C and Perl. It is a opensource and run on many platforms such as IIS and Apache; however, it
requires a complex set of installing and configuring the software.
ASP.NET: ASP.NET is similar to ASP in terms of functionality; however,
Microsoft introduced two major changes in order to develop and run
ASP.NET pages as compared to ASP pages.
First, the language used in the ASP.NET pages is Visual Basic – not
VBScript or JavaScript. Second, in addition to requiring an ASP.NET
module or plug-in to the Web Server, it requires a .NET Framework to be
installed in the Web Server computer.
As a matter of fact, Microsoft has changed all it’s programming
environment around the .NET Framework. Thus ASP.NET pages can be
developed by using any of the languages supported by .NET Framework
such as VB.NET, C# (C Sharp).
We will mainly sue ASP.NET technology to develop dynamic Web pages.
5
Writing Client-side Scripts
As it was said, client-side scripts are downloaded with a Web page and the
browser interpret the HTML tags and scripts. A scripting engine, which is
built into the browser, processes the client-side scripts.
A pair of script tags allows the browser to distinguish between the HTML
tags and the script, <script>…..script code…..</script>.
A Web page can have many scripts interspersed within HTML codes as
long as script tags delimit each script.
The most common client script languages are JavaScript, Jscript, and
VBScript. The default client-side script is JavaScript.
Because the end user can change the default settings for client-side
scripting, one should always use the following syntax with the language
attribute:
<script language=”language name”>
e.g. <script language = “JavaScript”>
6
An Example of a Client-side Script
Scripts can be located in the head or body sections of a Web page.
But if the script is at the end of the Web page, the Web page loads faster,
users can view the Web page while the script engine interprets the script.
Example:
The following is a simple example of JavaScript that writes Hello World 1
using the HTML tags, and Hello World 2 using script tags.
Save this program as an HTML document and use a browser to view the
result. View Script result
<html>
<head><title>Client Side Script Example </title></head>
<body>
<h1> Hello World 1 </h1>
<script language = “JavaScript1.3”>
//This
line initializes the script
document.write("<h1> Hello World 2</h1>"); //This line is the actual
script execution
</script>
//This line ends the script
</body>
</html>
Here, the write method of the document object of the browser is used to
write the string. We will discuss the browser objects in an upcoming
chapter.
document.write(“<h1>Hello World</h1>”);
Text can also be written with a document.writeln(“…..”)
Quick
Fact:
The writeln performs the same function as the write method, but
also appends a carriage return after the line of text.
It should also be noted that JavaScript is case sensitive.
7
Example in VBScript using msgbox:
The following script writes a string to the browser screen.
<html>
<head><title>Client Side Script Example in VBScript</title></head>
<body>
<h1> Hello World 1 </h1>
<script language = VBScript>
<!—
‘Comment to ignore the script if not supported
by the browser
msgbox (“Hello, World!”)
//
</script>
</body>
</html>
Example in JavaScript:
The following script writes a string to the browser screen.
<html>
<head><title>Client Side Script Example in VBScript</title></head>
<body>
<h1> Hello World 1 </h1>
<script language = JavaScript>
<!—
‘Comment to ignore the script if not supported
by the browser
alert (“Hello, World!”)
//
</script>
</body>
</html>
8
External Client-Side Scripts
Client-side scripts can be placed in a document separate from the HTML
document.
It allows a programmer to reuse scripts across multiple Web pages by
simply including a pointer to the script source file.
The external source code must be saved in a file with the file extension .js.
The following example shows how an external file, javasource.js, is called
from an HTML file, JavaWebPage.htm:
Javasource.js
document.writeln("<h2 align='center'>");
document.writeln("<font color='#800000'>");
document.writeln("Office Supply Store");
document.writeln("</font>");
document.writeln("<p><font color='#800000'>");
document.writeln("Today is");
d = new Date();
document.writeln(d);
document.writeln("</font></p></h2>");
JavaWebPage.htm
<html>
<head>
<title>Client Side example</title>
<script language="javascript1.3" src="javaSource.js"> //This is the
call to the source file, javaSource.js
</script>
</head>
<body>
..........
</body>
</html>
View this file
9
Inserting Comments into Client-side Scripts
Comments can be used to support older browsers that cannot recognize
client-side script.
Programmers should always use comments to help explain their code.
Language
HTML
Example
The opening comment tag, <!-- , and the closing
<!-tag, -->, all the comments between the opening
Comment tags and ending tags are ignored by the
->
browsers.
//
Comment
JavaScript
Explanation
To add a single line comment start the comment
line with a double slash.
/*
You can start a multiple line comment with /* and
Comments
then finish the comment with the closing tag */.
Comments
The comment can be as many lines as you wish.
*/
VBScript
‘
To add a single line comment start the comment
Comments line with a single quote, ‘.
Perl
#
To add a single line comment start the comment
Comments line with a pound sign, #.
C/C++
and Java
// or /*
…*/
C/C++ and Java all use the same comment
formatting as JavaScript.
10
Writing Server-Side Scripts using ASP
There are some similarities between writing scripts for client-side and
server-side pages. A user can see the client-side script but not the serverside scripts. There are more than one ways to write a server-side scripts.
The ASP Object Model
ASP allows to access all the features of server-side scripting as well as
additional built-in objects from the ASP Object Model.
There are six built-in ASP objects:
 Request
 Response
 Application
 Session
 Server
 ObjectContext.
For example, the Request object allows one to use ASP to obtain results
from a form.
The results of the form can be displayed back to the browser using the
write method of the Response object.
The Server object allows the server-side script to communicate with other
programs on the server, for example, interact with databases and send
customized e-mail from a Web page.
There are two ways to indicate that a script is to be interpreted on the
server:
 Block scripting
 Inline scripting
11
Block Scripting:
The first way is to add the runat = ‘server” attribute within the beginning
<script> tag.
<script language = “VBScript” runat = “server”>
response.write “<h1>Hello World</h1>”
</script>
Inline Scripting:
The second method you can use to identify server scripts is inline
scripting.
Inline scripting uses the tags <%….%>. All codes within the inline script
tags are interpreted on the server.
<% response.write “<h1>Hello World</h1>” %>
In the above examples, the Response object on the server is used.
The Response object has a method called write, which is similar to the
document object on the browser.
Note:
If a page contains a mixture of block scripting and inline scripting,
the inline scripts are performed first before the block scripts.
Note:
Commenting is done the same with server-side scripting as was
explained earlier with client-side scripting.
12
Server-Side Include Files
As with client-side scripts, sometimes it’s convenient to place server scripts
in a separate document. Server-side include files (SSI) allow the
programmer to reuse code for multiple Web pages.
The server-side include files contain a mixture of scripts, text, and HTML,
and is usually saved with an .inc or .asp file extension and stored in an /inc,
/scripts, or /asp-bin directory.
The ASP page calls the server-side include file using the keyword include.
The sample, javaqwebpage.asp, below includes a SSI file called head.inc
that is located in a subfolder (of sample.asp folder) called scripts.
head.inc
<body bgcolor="#FFCC99">
<h1 align="center">
<font color="#800000">
<b>Office Supply Store</b>
</font></h1>
<h2 align="center">
<font color="#800000">
<b>Today is : <% = Date() %></b>
</font></h2>
javaqwebpage.asp
<html>
<head>
<title>Client-side script sample</title>
</head>
<!--#include file=”\scripts\head.inc”-->
<p><b>Welcome to our Store</b></p>
</body>
</html>
View this file : javawebpage.asp
13
Examples of Client-Side Script
Project 2-1: Officedept.htm
<html>
<head>
<title>Office Supply Store</title>
</head>
<body bgColor="#FFCC99">
<h2 align="center"><b>Welcome to our Office Supply Store</c2> </h2>
<h3>Here is a list of our departments:</c3> <script language="JavaScript1.3">
document.write("Pens and Pencils");
document.write("<br>");
document.write("Paper");
document.write("<br>");
document.write("Stationery");
document.write("<br>");
document.write("School Supplies");
document.write("<br>");
document.write("Stamps");
document.write("<br>");
document.write("Notebooks");
document.write("<br>");
document.write("Markers & Highlighters");
document.write("<br>");
document.write("Tacks & Paperclips");
document.write("<br>");
</script> </h3>
</b>
</body>
</html>
View this file
14
Project 2-2: sportsstore.htm
Include File: Sportsdept.js
document.write("Golf");
document.write("<br>");
document.write("Baseball");
document.write("<br>");
document.write("Tennis");
document.write("<br>");
document.write("Swimming");
document.write("<br>");
document.write("Football");
document.write("<br>");
document.write("Hockey");
document.write("<br>");
document.write("Gymnasics");
document.write("<br>");
document.write("Fishing");
document.write("<br>");
/*
document.write("Weight Lifting");
document.write("<br>");
document.write("Volleyball");
document.write("<br>");
*/
Sportsstore.htm
<html>
<head>
<title>Online Sports Store</title>
</head>
<body bgcolor="#FFCC99">
<h1 align="center"><b>Welcome to Sports Store Unlimited</h1>
<h3>Here is a list of our main sports departments:</h3>
<script language="JavaScript1.3" src="sportsdept.js">
</script>
</b>
</body>
</html>
View this file
15
Examples of ASP
Project 2-3:Online Search Engines
<html>
<head>
<title>Online Search Engines</title>
</head>
<body bgcolor="#CCFF99">
<h2 align="center">Major Search Engines</h2>
<h3>Here is a list of our recommended search engines:</h3>
<script language="vbscript" runat="server">
response.write("<ul>")
response.write("<li><a href='http://www.altavista.digital.com/'>Alta Vista</a>")
response.write("<li><a href='http://www.excite.com'>Exite</a>")
response.write("<li><a href='http://www.goto.com'>GoTo </a>")
response.write("<li><a href='http://webcrawler.com'>WebCrawler </a>")
response.write("<li><a href='http://www.yahoo.com'>Yahoo</a>")
' response.write("<li><a href='http://infoseek.go.com'>Infoseek</a>")
' response.write("<li><a href='http://www.lycos.com'>Lycos</a>")
' response.write("<li><a href='http://www.snap.com'>Snap</a>")
' response.write("<li><a href='http://search.netscape.com'>Netscape Search</a>")
response.write("</ul>")
</script>
</body>
</html>
View this file
16
Example of ASP: Using Forms
Book.htm is an HTML form that uses ACTION = response.asp attribute of the FORM tag.
Books.htm
<HTML>
<HEAD>
<TITLE>Book Form</TITLE>
</HEAD>
<BODY>
<!--------------------------------------------------------->
<!-- This is HTML form that uses response.asp file to collect information from the screen
<!--------------------------------------------------------->
<CENTER>
<H3>
Enter Book Information:
</H3>
<FORM NAME="frmRequestData" METHOD="post" ACTION="response.asp">
<B>Title: </B><INPUT TYPE="text" NAME="txtTitle" SIZE="20" MAXLENGTH="40"><BR>
<B>Author: </B><INPUT TYPE="text" NAME="txtAuthor" SIZE="20" MAXLENGTH="40"><BR>
<B>ISBN: </B><INPUT TYPE="text" NAME="txtISBN" SIZE="15" MAXLENGTH="15"><BR>
<BR>
<INPUT TYPE="submit" VALUE="Submit"><BR>
<INPUT TYPE="reset">
</FORM>
</CENTER>
</BODY>
</HTML>
View this file
response.asp
<%@ LANGUAGE="VBScript" %>
<%
'----------------------------------------------------------'This is ASP code works with books.htm file
'----------------------------------------------------------Option Explicit
Response.Buffer = TRUE
%>
<html>
<head>
<title>Chapter 1: Project # 4</title>
</head>
<body>
<h3 align="center">This is what you entered: </h3>
<b>
<p align="center">Title: </b><%= Request.Form("txtTitle") %><br>
<b>Author: </b><%= Request.Form("txtAuthor") %><br>
<b>ISBN: </b><%= Request.Form("txtISBN") %> </p>
</body>
</html>
17
WHICH DO YOU USE: CLIENT- or SERVER-SIDE SCRIPTS?
Today most Web applications use a combination of client-side scripts and
server-side scripts.
Many factors such as the type of Web browser the client uses, the type of
Web server, and the Web application itself will determine which scripting
techniques you should use.
If a company uses Internet Explorer as a browser, then VBScript should be
used; although JavaScript and Jscript can be used.
If the Web application is accessed by both Internet Explorer and Netscape
Navigator, the JavaScript must be used.
If a Web application is located on a Microsoft Internet Information Server,
one should use VBScript with Active Server Pages for server-side
processing; although Jscript can also be used.
For non-Microsoft Web server, one is likely to use server-side JavaScript.
Security (SSL, SET) and speed can also be factors that should be
considered when deciding which technique to use.
Moving from ASP to ASP.NET
There are some commonalities between scripts written in ASP and
ASP.NET. These include the ways the scripts are written, the Web pages
are saved, and the forms are processed. Both ASP and ASP.NET pages
can be processed in the same Web server as long as the appropriate plugin or interpreter is installed in the Web server.
18