| CIS 209 | Web Page Scripting Languages |
In the last chapter, we discussed the fact that Web pages are created using HTML. Related Web pages are grouped together and called a Web application. HTML is used to create static Web pages, which contain fixed content.
Dynamic Web applications enable users to interact with them. Dynamic Web applications include:
|
|
In this chapter, we will learn how to create basic scripts, which are the foundation for creating dynamic Web applications.
Technologies such as cascading style sheets (CSS) and scripts allow Web programmers to create dynamic Web pages. A series of commands that belong to a scripting language, such as JavaScript and VBScript can be assembled into a script and embedded within a Web page. Scripting languages use a program called an interpreter to translate the script code into an executable format. Scripts can be run on a Web server or in the browser on the client's computer.
The World Wide Web Consortium (W3C) is responsible for standardizing HTML, CSS, and other Web technologies.
We can add interactivity to Web pages by using scripts. This interactivity can be simple, as in displaying an alert message, or it can be complex, as in validating and processing a form. By adding scripts to your HTML code, you can establish and store variables that work with data from your Web page.
A scripting engine build into the browser processes client-side scripts. When a browser identifies a client-side script, it passes the script to the scripting engine, which executes the script as the page is being loaded.
The <SCRIPT> tag is a two-sided tag that identifies the beginning and end of a client-side program. The <SCRIPT> tag is used to distinguish JavaScript code from HTML text. The general syntax for this tag is:
<SCRIPT SRC=URL LANGUAGE="language">
Script commands and comments
</SCRIPT>
A web page can have many scripts interspersed within HTML code.
Several scripting languages can be used to create client-side scripts; JavaScript, VBScript, JScript. We use the language attribute to tell the browser what scripting language is being used. If omitted, the default client scripting language is used.
JavaScript is the most commonly used client-side scripting language because it is supported by most all browsers. JScript is a Microsoft modified version of JavaScript. Java is a complete programming language, not a scripting language. Note that neither JScript nor JavaScript is the same as Java. Java is a complete programming language, not a scripting language.
VBScript is a scaled-down version of Microsoft Visual Basic. It was designed to be a fast, portable interpreter for use in Web browsers and applications. To specify VBScript, use:
<script language="VBScript"> or <script language="VBS">
All browsers do not support all scripting languages. Each scripting language must have its own interpreter to translate its commands. IE has a built-in interpreter for VBScript and JScript. NS only has the interpreter for JavaScript built-in - no client-side VBScript in a Netscape browser.
Cross-browser client-side scripting is difficult, time-consuming, and expensive. You can write scripts that detect which browser the client is using.
These issues led to the creation of a new scripting standard known as ECMA-262, which defines the ECMAScript scripting language, a cross-platform programming language supported by both IE and NS. ECMA Standards are created by an independent organization called the European Computer Manufacturers Association.
There is no cross-platform standard for server-side scripting.
Placing scripts in the <HEAD> section of a web page will cause the script engine to interpret the script before it interprets scripts in the <BODY> section. When the script is at the end of a Web page, the Web page loads faster, and users can view the page while the script engine interprets the script.
We can write text to a Web page by using the JavaScript WRITE method of the DOCUMENT object with this example.
NOTE: Although HTML and VBScript are not case sensitive, JavaScript is. Watch for missing semicolons ( ; ) too! When referring to an object in your code, do not capitalize the letter d. Document.Write is not correct and will produce an error message in the browser. The correct syntax is document.write in lower case letters.
You can place client-side scripts in a document separate from the HTML document. This allows you to reuse scripts in several Web pages by placing a pointer to the script source file. For example, the pencil on my Web page appears in many of the Web pages. As an external script, if the pencil ever changes, I simply change this one file (pencil.js), and all the other pages are automatically updated. Click pencil.js and click SAVE, then view the file in notepad.
Creating the Script Source File: Use notepad to create the source file, and
add the .js extension. We can use document.writeln("HTML
codes"); which is the same as the WRITE method, except it appends a
carriage return.
Often, you will need to include quotes in a JavaScript command. If you needed
to place quotes around an attribute, you can substitute the apostrophe as in the
following example. Note the rect attribute, the href= attribute,
the coords= attribute, and the alt= attribute.
document.write("<area shape='rect' href='282.htm' coords='571,0 655,25'
alt='CIS 282 Class Info'>");
Creating the Web Page: Call the script source code with SRC="jsfilename.js" as in THIS example. To make certain that a text file created in NOTEPAD is saved with the correct extension, enclose the name of the file in quotes - then, even if HIDE FILE EXTENSIONS is checked, the file will be saved correctly. (Not as jsfilename.js.txt with the .txt part hidden)
Since HTML ignores tags it does not recognize and since JavaScript ignores HTML tags within a <SCRIPT> and a </SCRIPT> tag, we can hide JavaScript code from older browsers that do not support JavaScript with:
<script language="JavaScript1.3">
<!--
document.write ("HTML code to be sent to browser from
JavaScript");
//-->
</script>
The opening HTML comment tag is <!-- and the JavaScript
single-line comment is // and the closing HTML comment tag is
--> . Multi-line comments can be used to document complex code with the
/* to start a comment section and a */ to end the section.
Server-side scripting is used to add interactivity to a Web page.
Server-side scripts are part of the Web document, but they are executed on the server. A scripting engine, installed on the server, interprets server-side scripts. After the scripting engine runs the script, the scripting engine sends the output of the script back to the browser.
Both server- and client-side scripts can coexist in a Web document. Only HTML code and client-side script code are sent to the browser. Server-side script source code never appears in the browser. The browser only receives the output from a server-side script.
Check out this simple Hello World Example which came
from http://www.asp101.com. Be sure to view
the source when you click the .asp file. Then, take a look at the
actual source of the world.asp file which is in the
world.asp.txt file. Web programmers would not place the
world.asp.txt file in an application - I just put it here to let you see
the code. The world.asp file is being run on the server. We only
see (in the browser) the output of the script that ran on the server.
There is no scripting standard for server-side scripts. Server-side script engines are vendor-specific. Netscape supports JavaScript 1.4 on the Network Enterprise Server. Microsoft supports JScript version 3, and VBScript on the Internet Information Server (and Personal Web Server).
You must view an ASP page on a Web Server running IIS. The Web server permissions for the page must be set to read and script.
Microsoft's implementation of server scripting technology is called Active
Server Pages (ASP). All ASP pages must have an .asp extension. When
the 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 results
to the client. The ASP engine is named asp.dll and can be found in the INETSRV
folder in the WINDOWS SYSTEM folder.
Information on ASP.NET at http://www.asp.net. Download it from http://www.asp.net/download.aspx.
ASP allows you access to all the features of server-side scripting as well as additional built-in objects from the ASP Object Model. The six (seven with ASP5) built-in objects within the ASP Object Model are:
For those anxious to learn more about ASP Objects at this point, check out 282AspObjects.htm.
The server object allows the server-side script to communicate with other programs on the server. This gives the server the ability to interact with databases, send customized email from a web page, read and write to the file system, upload files to the server, etc.
The process of creating new objects on the server is called instantiation.
There are two ways to indicate that a script is to be interpreted on the server:
runat = server attribute to
the beginning <SCRIPT> tag<script language="VBScript" runat = "server"> script commands
</script>
<% . . . %>
Example: <% script commands %>We use response.write to send text to the browser from a VBScript file. For example:
<%
response.write "<h1>This is a big heading</h1>"
%>
We can use the equal sign ( = ) as a shortcut to replace the
keywords response.write as in this example:
<% = "<h1>This is a big heading</h1>" %>
The syntax for VBScript and JavaScript comments is the same regardless of where the script is interpreted. Use the apostrophe ( ' ) to indicate a comment in VBScript and a double forward slash ( // ) for a JavaScript.
We can place server scripts in a separate document as we did with in the client-side JavaScript example. External script files on the server are called server-side include (SSI) files. SSI files allow the programmer to reuse code for multiple Web pages. Database constants and database connection strings are often placed in SSI files since they will be used often.
Use Notepad to create a simple text file that will be saved with an
.inc or .asp extension.
We use the keyword include to call the server-side include file
as you see below:
<!--#include file = "heading.inc"-->
To make long statements more readable, you can break the line into multiple
smaller lines by using the line continuation characters - a space, plus the
underscore character ( _) at the end of a line to be continued. For
those familiar with Visual Basic, this is the same.
Probably both, depending upon the browser the client is expected to use, the type of Web server, and the Web application itself. If you want your application to be accessible by clients using all browsers, you'll want to use JavaScript for client-side scripting. If your Web application will reside on a Microsoft server, you will probably use VBScript with Active Server Pages for server-side processing. If you're using a non-Microsoft Web server, you will likely use server-side JavaScript.
Although client- and server-side scripts can be written in Notepad or any text editor, you may want to use a Web development tool to increase productivity. Some of the major Web page editors that currently support Active Server Pages include Drumbeat, Dreamweaver, FrontPage, Visual InterDev and the Microsoft Script Editor. The Script Editor is available with Visual Studio and FrontPage, or it can be freely downloaded from Microsoft's web site. While the Script Editor allows you to create and edit individual files, FrontPage and Visual InterDev help you maintain entire Web applications.