JavaScript in a Web Page
May 3, 2002
First things first: a web browser 'interprets' code by converting it to something
the computer can understand, and then executing it. It won't, however, interpret
and execute JavaScript code unless we tell it what is JavaScript and what is
HTML.
We use the HTML tags <script> and </script>
to tell the interpreter that the lines between the tags should be interpreted
as JavaScript code and not HTML or text. Everything between the tags is considered
JavaScript program code.
We can put the JavaScript code block anywhere in the page, and in more than
one place, as well as have more than one script block:
<head>
<script language="JavaScript">
// The forward slashes denote
commented text that won't be executed
</script>
</head>
<body>
<H1>Test Page</H1>
<script language="JavaScript">
// more commented text or code
</script>
</body>
</html>
This code won't actually do anything, it's just here to demonstrate the language
attribute inside the script
tag, and that you can add JavaScript in more than one place on a page.
Although IE supports VBScript as well as JavaScript, both IE and NN will assume
that you're using JavaScript if you don't specify the language, so you can get
away with leaving the attribute off altogether. However, the attribute can also
be used to specify different versions of JavaScript:
|
Attribute Value
|
Example
|
Effect
|
|
JavaScript1.2
|
<SCRIPT
language="JavaScript1.2">
|
Code will be executed only by IE4+ and NN4+. Browsers
incompatible with this version will ignore it.
|
|
JavaScript1.3
|
<SCRIPT
language="JavaScript1.3">
|
Only Netscape 4.06+ and IE5+ will execute the code.
Incompatible browsers will ignore it.
|
|
JavaScript1.5
|
<SCRIPT
language="JavaScript1.5">
|
Only NN6+ will execute the code. Incompatible browsers
will ignore it.
|
|
JScript
|
<SCRIPT
language="JScript">
|
Only IE4+ will execute the code. Incompatible browsers
will ignore it.
|
Although we'll be specifying the language in the examples in this book, we
won't specify a specific version of JavaScript, but use browser-checking code
in the examples where the Internet Explorer and Netscape code is the same but
for a few subtle differences. You'll find that most examples in the book work
the same on IE4 and Netscape browsers.
JavaScript Syntax
Before we go any further we should discuss some JavaScript syntax essentials:
·
'//' Indicates
that what follows is a comment and not code to be executed, so the interpreter
doesn’t try to convert it to machine code and run it. Comments are a handy way
of putting notes in the code to remind us what the code is intended to do, or
to help anyone else reading the code see what's going on.
·
'/*' Indicates
the beginning of a comment that covers more than one line.
·
'*/' Indicates
the end of a comment that covers more than one line. Multi–line comments are
also useful if you want to stop a certain section of code from being executed
but don’t want to delete it permanently. If you were having problems with a
chunk of code, for example, and you weren't sure which lines were causing the
problem, you could comment a chunk at a time in order to isolate the problem.
·
Curly braces ('{' and '}') are used to indicate
a block of code. They ensure that all the lines inside the braces are treated
as one block.
·
A semicolon defines the end of a statement,
and a statement is a single command. Semicolons are in fact optional, but it's
still a good idea to use them to make clear where statements end, because doing
so makes your code easier to read and debug. (Although you can put many statements
on one line, it's best to put them on separate lines in order to make the code
easier to read.) You don't need to use semicolons after curly braces.
Let's put this syntax into a working block of code:
<html>
<body>
<script Language="JavaScript">
//one-line comments are useful for reminding
us what the code is doing
/* this is a multi–line comment. It's useful for both longer
comments but also blocking out segments of code when you're testing
*/
/*script starts here. We're declaring a variable myName,
and assigning its value to whatever the user puts in the
prompt box (more on that in Chapter 2), finishing the
instruction with a semicolon because it is a statement
*/
var myName = prompt ("Enter your name","");
//If the name the user enters is Paul Wilton
if (myName == "Paul Wilton")
{
//then a new window pops up saying hello
alert("Hello Me");
}
//If the name entered isn't Paul Wilton
else
{
//say hello to someone else
alert("hello someone else");
}
</script>
</body>
</html>
Note:Color coded lines have been split for display purposes
Some of the code may not make sense yet,
depending on your previous JavaScript experience. All that matters for
now is that it's clear how comments are used, what a code block is, and why
there are semicolons at the end of some of the statements. You can run this
script if you like – just copy it into
an HTML page and run it through your browser.
Although statements like if and else span more than one line and contain
other statements, they are considered single statements and don’t need a semicolon
after them. The JavaScript interpreter knows that the lines linked with an if
statement should be treated as one block because of the curly braces. We'll
be looking at variables and conditional statements (if
and else)
in the next chapter.
The Advantages and Disadvantages of JavaScript (Cont.)
Practical JavaScript for the Usable Web
Code Execution
|
