This section discusses ways programmers can write, run, and
debug their JavaScript programs.
- JavaScript is most commonly used by web browsers to dynamically create
and modify web pages.
- Web pages are formatted using the HyperText Markup Language
(HTML, which we describe later).
- When an HTML page is rendered by a browser, an object-oriented model of
the page, called a Document Object Model (DOM), is maintained
behind the scenes.
- If JavaScript code is embedded in a web page, it has access to the DOM
and can manipulate it.
- We can exploit this to set up a simple JavaScript testing environment
using any modern web browser and file editor.
The Document Object Model (DOM) is a tree data structure maintained by
the browser to represent displayed documents.
This section describes the minimum you need to know about HTML and the
DOM to test JavaScript code. We will treat these topics in greater
detail later.
Note that we will refer to two aspects of the JavaScript language
—
objects and
methods — that we will
officially introduce later. For now, your familiarity with these
concepts from Java will suffice to understand this introduction to the
DOM.
The DOM has access to individual parts of documents represented by HTML
elements.
One such element, a "
div", is used as a container for a
document's content.
Here is a document with a single
div with a simple body:
When you run this file in NetBeans, the following is displayed in the
browser:
Here is a document with a single, empty-bodied
div that is given
an
id attribute:
When you run this file in NetBeans, the browser displays an empty page,
because the
div has no content.
However, any JavaScript loaded by this page has access to
the
div through the id "
myDiv".
We can add a
script element to this page that accesses
the
div like this:
This code makes use of the built-in JavaScript object
document
that represents the browser's currently rendered document. (More about
JavaScript objects and methods later.)
The
document object has a method
getElementById that
returns the page element associated with the given ID. (Note the
similarity of the DOM's
getElementById method to Android's
findViewById.)
The rendering of this page is still blank, but now we can add content
under program control.
HTML DOM elements (such as
div) have a property
called
innerHTML that accesses the element's body, that is, the
HTML code between the element's opening and closing tags.
Here we have given the
div's body some text:
Rendering this page gives:
Now we have another way to test our factorial function:
which gives:
Note that we have made use of the fact that JavaScript's "
+"
operator, if given a string as an operand, will convert the other
operands to strings before concatenating them.
It is possible to execute Javascript code directly in the browser.
In Firefox and Chrome/Chromium,
Ctl-Shift-I will bring up a panel of
tools, one of which is a Javascript
Console.
The console implements a
Read-Eval-Print Loop (REPL):
- The user types a Javascript expression into the console and
presses Enter
- The expression is read and evaluated
- The expression's value is displayed to the console
- The console waits for another expression
Below is a screenshot of the Firefox tools console showing that the
user has defined and tested the function for computing factorial.
Below is a screenshot of the Chrome/Chromium tools console showing that the
user has defined and tested the function for computing factorial.
NetBeans makes a convenient environment for developing and testing
JavaScript code.
- Click File and then New Project...
- In the dialog, under Categories choose HTML5/JavaScript and
under Projects choose HTML5/JS Application (might
require activation of the HTML5 plugin)
- Give your project a name and location, then click through the
remaining defaults
An HTML file called
index.html will be created under
Site Root.
You can observe how HTML files are rendered in your browser.
First choose your browser by clicking on the browser icon on the
NetBeans toolbar. Do not choose a browser "With NetBeans Connector":
To observe how an HTML file is rendered in your browser, right-click
the file and select
Run File.
A new tab will be opened in your browser and the file will be
displayed.
Note that your browser indicates a local URL
("
localhost:port/location"). If you want your content to be
available on the WWW, you must host your files on a web server such
as
www.d.umn.edu.
To create a new HTML or JavaScript file in your NetBeans project:
- Right-click Site Root
and choose New -> HTML File... or JavaScript
File... to get a file creation dialog
HTML pages are made up of
elements.
A typical element has the form:
<element> ... </element>
where
element is one of a number of pre-defined HTML
"
tags" that describe the structure of a web page.
<element> is called the "
open" tag for the element;
</element> is called the "
close" tag.
Anything between an element's open tag and close tag ("
..."
above) is part of the element's
body.
A special HTML element is
script, which allows web pages to have
JavaScript code.
For the purposes of testing simple JavaScript, an HTML page need only
have a
script element with code in its body. Suppose you have
created the file
fact1.html in NetBeans with these contents:
When a browser renders this page, it will execute the JavaScript code.
You can view the browser's rendering of this page by giving the file
URL to your browser.
However, nothing is done with the value of the "
fact(5)"
expression and so the page will be blank.
A simple way to output data from a JavaScript program is through
the built-in
log.console function:
log.console(expression);
The value of
expression will be sent to the browser's console. Example:
The rendered page is still blank, but the (Firefox) console looks like this:
Another way to output data from a JavaScript program is through
the built-in
alert function:
alert(message);
where
message is any object with a string representation.
alert pops up a message dialog that waits to be dismissed:
Here is how a browser renders this page (in another window):
fact3.html.