What Is JavaScript?
JavaScript is an application control or scripting language that permits designers to incorporate dynamic behaviors and interactive features in otherwise static HTML (Web) pages.
Originally developed as a proprietary language by Netscape and first released in Navigator 2.0, JavaScript has been adopted in one form or another for use as the primary scripting language in virtually all widely distributed Web browsers.
Although incompatibilities exist in certain advanced methods, the core language features described in this note are supported on NN4+, IE4+ and all contemporary JavaScript enabled browsers.
One note, although both can be used to build dynamic behaviors in web browsers, JavaScript is in fact unrelated to Sun Microsystem's Java programming language. Netscape simply licensed and appended the name "Java" because it was a hot technology at the time of Navigator 2's release.
Why Use JavaScript?
JavaScript allows designers to create interactive page and site features. As a result content can be customized in response to user actions and preferences,
and complex information and behaviors can be included within clear, simple design features.
JavaScript allows designers to automatically insert, format and update routine elements occurring within a single page or across multiple site pages. Like CSS, JavaScript permits updates and revisions to be propagated from a single line of code in a single file, and when combined with CSS provides a powerful site management tool.
JavaScript allows designers to embed fully featured applications within Web sites and pages. These client applications can duplicate complex but needlessly latent server side behaviors as well as provide CGI-like capabilities for resource challenged developers.
JavaScript has lifted wholesale concepts and features from many other languages. C, C++ and Perl programmers will recognize and be able to quickly adapt client side language features.
Conversely, JavaScript can demonstrate a number of basic programming and generic language features (not to mention innumerable bad habits) to novice programmers within the familiar context of their Internet Web Browser.
Saving, Editing and Running Your Code
JavaScript code is created and edited and stored as plaintext source using a basic text editor (e.g. Windows Notepad, Apple Simplext, BBEdit, Textpad ...)
JavaScript can be included in an HTML document along with the HTML source code (enclosed within <script> tags):
Listing A.1 JavaScript Goes Here
<html>
<head>
<script type='text/javascript'>
<!--
// JavaScript Can Go In The Head
// -->
</script>
</head>
<body>
<script type='text/javascript'>
<!--
// JavaScript Can Go In The Body
// -->
</script>
<!--
JavaScript Can Go Inside Links & Form Controls
-->
<a href="javascript:[statements]">Link Text</a>
<a href="#" onclick="[statements]">Link Text</a>
<form>
<button onclick="[statements]">Button Text</button>
</form>
</body>
</html>
As with any HTML source file, An HTML document that includes JavaScript statements is saved in a file ending in the suffix .html (.htm on Win 9x systems) (example.html)
JavaScript can also be saved in a separate source file ending in the suffix .js (example.js) The contents of the source file can be accessed from one or more remote HTML files or applications using the src attribute of a standard <script> tag:
<script src='filename.js' type='text/javascript'></script>
<script src='example.js' type='text/javascript'></script>
The best part about JavaScript is that it can be previewed right in your desktop Web browser!
The plaintext source will execute along with the inline HTML document contents without any further steps. To check edits and updates to your code, just hit reload.
A.2 Hello World: Input/Output
The classic example for demonstrating a computer language is a short program that outputs (or prints) the phrase: "Hello World".
JavaScript has several ways of saying Hello, a few of which we will run through here.
A.2.1 Document.Write()
The first, and most basic is the document.write() method which takes the basic syntax:
document.write([contents]);
document.write() prints the value of [contents] among the displayed the inline contents when the document is loaded in the browser, or in this case:
Listing A.2 Document.Write()
<script type="text/javascript">
document.write('Hello World');
</script>
Hello World
Note that the value of the [contents] printed by the document.write() method can include virtually any legal HTML content: plaintext, inline formatting, images, tables, form objects, CSS and even additional embedded scripts.
Here is the same statement this time with the addition of some HTML bolding included within the document.write() method:
Listing A.3 Document.Write()
<script type='text/javascript'>
document.write("<b>Hello World</b>");
</script>
</font>
A.2.2 Alert()
JavaScript's second, and most annoying, way of outputing information is the alert() method which takes the basic syntax:
alert([contents]);
When called alert() sounds an alert, opens a popup dialog box and prints the value of [contents] in the dialog:
Listing A.4 Alert()
<a href="#"
onclick="alert('Hello World');">
Say Hello
</a>
A.2.3 Confirm()
A third way of outputing (and inputing) information is the confirm() method which takes the basic syntax:
confirm([contents]);
When called confirm() opens a popup dialog box including a pair of [cancel] and [ok] buttons, and prints the value of [contents] in the dialog:
Listing A.5 Confirm()
<a href="#"
onclick="confirm('Hello World');">
Say Hello
</a>
Note that confirm() has another feature not on display here, a result value (true | false). This is the input. If the user selects the [OK] button in the dialog box, the results are true. If the user selects [Cancel], the results are false.
A.2.4 Prompt()
A third way of outputing (and inputing) information is the confirm() method which takes the basic syntax:
prompt([contents]);
When called prompt() opens a popup dialog box including a single line text input, and a set of [Cancel] and [OK] buttons, and prints the value of [contents] in the dialog:
Listing A.6 Prompt()
<a href="#"
onclick="alert('Hello '+ prompt('who'));">
Say Hello
</a>
The prompt() method also has a result or return value based on the user's actions. If the user clicks [OK] the result is the value of the text entered in the input (or ""). If the user clicks [Cancel] the result is null.
This is a variable value (and one assigned by the user not the programmer).
In the examples up to this point the values passed to output methods have all been "literals", that is the values have been the literal contents to be printed by the script.
This is different but hardly useful, and it would in fact be much easier to have simply included the literal values as fixed inline content.
In order to take advantage of JavaScript's dynamic output, designers need to incorporate variable data into the values passed to the scripts.
Or, to put the horse before the cart: JavaScript's dynamic rendering features become useful when the designer needs to incorporate variable content in the page.
Part A of 9 | Next Part 1: JavaScript Variables >