HTML AND SCRIPTING LANGUAGES
Here is the JavaScript used in the Lesson 3 example of responding to an event:
function doReverse() {
var s = ctrl.msg.value ;
ctrl.msg.value = "" ; // erase input
for( i = s.length + 5 ; i >= 0 ; i-- ){
ctrl.msg.value += s.charAt( i );
}
}
The notation that this code uses to address the value that is
attached to the form field named msg in the form named
ctrl is using the DOM. The DOM enables JavaScript to address
many elements and properties of an HTML page.
You may see the term DHTML (Dynamic HTML) applied to pages that use JavaScript to change the appearance of a Web page on the fly.
JavaScript can also be used to add content to an HTML page as it's being
loaded. The following is an example in which the browser executes the script
in the <body> element, and the script writes the entire
contents of the body. This results in the display shown in Figure 5-1.
<html>
<head><title>Weekly Planner</title>
<script language="javascript">
dayName = new Array ("Sunday","Monday","Tuesday",
"Wednesday", "Thursday", "Friday","Saturday");
today = new Date ;
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write("<h2>Today is " +
dayName[ today.getDay() ] + "</h2>" );
if( today.getDay() == 0 || today.getDay() == 6 ){
document.write("<p>Goof off all day</p>");
} else {
document.write("<p>Look busy!</p>");
}
</script>
</body>
</html>
Note that in this example, the JavaScript code is in two pieces -- one in the
<head> element of the page, and one in the
<body> . The code in the head defines two variables -- an
array of day names, and the today variable. The
today variable is interesting because it's an object that
contains complete information about the instant the object was created. A
Date object has functions that can interpret that time instant
as various parts of a calendar date.
The code in the body of the page uses the getDay function to get
the day of the week and then uses that to compose the text that gets written
to the body of the HTML page. The if statement checks to see if
the day of the week is 0 (Sunday) or 6 (Saturday), the || symbol
is what JavaScript uses for the Boolean logic OR .
In the document.write statements, the document is
the way the DOM refers to the object that contains the entire page, and the
function call write says to output this text at the current
writing point of the page. The document object has ways of
addressing all parts of the page, whether they are named or not.
It's important to make a distinction between code that executes in the Web browser or client environment and that which operates on the Web server. On the client side, a scripting language is limited to what it can do by browser security settings. A program on the server side doesn't have these limitations.
HTML and Server-Side Scripting
When HTML was first developed, people immediately figured out that it would be cool to combine the static content of a page with dynamic data created on the fly. As is typical in technological revolutions, many different approaches were tried. All of these different schemes were based on some kind of markup language mixing special tags with the HTML tags and using special processing programs on the Web server.
Essentially, these special tags form a kind of scripting language. Some of these developments survived; some have been replaced. But you may recognize one or more in this list: server-side JavaScript, Cold Fusion, PHP (Hypertext Preprocessor), iHTML (inline HTML), ASP (Active Server Pages), and JSP (Java Server Pages).
The basic idea of server-side scripting languages is that when the server is
called upon to send a file, it looks at the file type to see if that file
gets special processing. Typically, a marked up file will have plain HTML
with special tags that produce output from the scripting language. The
following is a simple example marked up with JSP tags that start with
<% and end with %> .
<html> <head><title>Dynamic Page Content Example</title> </head> <body> <h2>The time now: <%@ page language="java" import="java.util.Date"%> <%= new Date() %></h2> <hr/> </body> </html>
When a JSP-capable Web server sees a request for that page, it actually creates a small Java program that outputs the HTML and adds in the current date, resulting in the page shown in Figure 5-2.
Viw a larger version of this image
Scripting languages using specialized markup on the server side are an essential part of the modern Web. With simple markup tags, you can access databases or draw on resources distributed all over the Internet to create a custom page for your customer.
