MCCC CIS 177 - Markup Languages

Programming with JavaScript

Introduction to JavaScript

Unlike server-side CGI scripts that are commonly used for form processing, JavaScript runs on the client. The script is either embedded in an HTML document or called as an external process.

JavaScript is a subset of the more complex Java language. To create Java applications, you need the Java Developer's Kit (JDK) to compile the text into an executable Applet and an interpreter to run the Applet on the client machine. Today's browsers have the Java interpreter built in, however, Java is a complex language to learn.

Though JavaScript originated from Java, it has gone through many revisions. It is much easier to learn and use and no developer kit is required. When planning a JavaScript program, it's a good idea to outline what you want the program to do.

Running JavaScript

<script> tag

Use the <script> tag to insert a JavaScript program into an HTML document. You can reference an external script or embed the program code within the <script> container. Proper syntax is:

<script src="URL" language="language">

script commands and comments

</script>

Hiding the script from old browsers

While this is becoming less of a problem as browser technology advances, old browsers may not be able to run JavaScript and may display the code as well. For this reason, it is good practice to hide the script from these browers. You can do so with the comment tag as follows:

<script language="JavaScript">
<!-- Hide from non-JavaScript browsers
Commands
// Stop hiding from older browsers -->
</script>

Browsers will ignore any tags they don't recognize. So an older browser that can't run the script will encounter the HTML comment tag <!-- -->, which causes it to not display anything it contains. The // is the JavaScript comment symbols. It's a good idea to get into the habit of adding comments to your code so you can easily understand what your intentions were.

Send Output to a Web Page

Write a basic script

You'll begin by writing a simple script that outputs a text string. There are two methods to display text:

document.write("text"); or

document.witeln("text");

Think of document as an object and write or writeln as a method, or action, applied to the object. You'll typically use the write method for outputting. The writeln method is applicable when using the <pre> tag, which causes the browser to insert a carriage return or new line after applying the method. Note that the command ends with a semi-colon. You may optionally insert HTML code within the output string as follows:

document.write("<h3>Text</h3>"); or

document.write('<td class="calendar">');

Notice the use of single and double quotes. JavaScript commands are also typically case sensitive.

Download the HTML page.

Open npntxt.htm and edit it as follows:

Delete the following:

Today is 6/27/2003<br>
Only 181 days until Christmas

Insert:

<script language="JavaScript">
<!-- Hide from old browsers
document.write("Today is 11/3/2003<br>");
document.write("Only 52 days until Christmas");

Save the file and view it in the browser.