An Introduction to JavaScript -
Part II
by OutFront moderator JohnT
As we learned in Lesson 1, the
document.write statement will write text to a web page.
The script using document.write is written as below.
The script writes the sentence Learning JavaScript with
John T is easy and interesting.
<script
language="JavaScript">
document.write("Learning JavaScript with John T is
easy and interesting");
</script>
You need to remember that the document.write statement
must be written on one line. Otherwise the browser will
give an error interpreting the document.write
statement. JavaScript has restrictions with regard to
line breaks within one line of code. Only in certain
instances, and not often, can you break a line of
JavaScript code. Also remember that we end each line of
JavaScript code with a semicolon.
The text that is included in quotations within the
parentheses is written to the page. The real power of
JavaScript is it's ability to write information about
the user's browser type, the date, the time, the last
page (URL) that the user visited, and so on. Let's look
at another script that actually does some work for us.
Let's say we would like to display on our web page the
type of browser and version that the visitor is using.
We would do that by using the script given below.
<script
language="JavaScript">
document.write("Your browser is " +navigator.appName+
".");
document.write("version number " +navigator.appVersion+
".");
</script>
Let's examine our script in detail. We are using two
document.write statements, just as we learned in Lesson
1. Remember that the document.write statement is an
object.method, where our document is the object, and we
are writing something to the object, so write is our
method. Now, we are introducing navigator.appName and
navigator.appVersion. The appName and appVersion are
referred to as properties, and navigator is an object,
just like document is an object. It is important to
note the use of lower and upper case. Please follow
that carefully, since JavaScript is case sensitive.
JavaScript allows us to display the user's browser type
through the use of appName and the browser version
through the use of appVersion. In order to return these
properties and write them to the web page, the
navigator.appName and navigator.appVersion must be
surrounded by a plus sign on either side. That tells
the browser that something will be returned and written
to the web page itself. The "." simply writes
a period at the end of the sentence.
Try the script out yourself. One thing that you will
find in using the script is that even though our two
document.write statements are on two separate lines,
the text that is written to the web page is on one
line. That is because we have to tell JavaScript when
to add a line break. Of course, we do that by using the
HTML line break command <br>. In our next lesson
we will include further discussion on the use of the
<br> command in JavaScript.
Since we know that document is an object also, then
document also has properties associated with it. For
example, location is a property of document. If we have
+document.location+ in the above JavaScript in place of
+navigator.appName+ , we may display the URL of the
page being viewed by the user.
As mentioned in Lesson 1, there are comment tags that
may be used to surround our entire JavaScript. If we
were to use these comment tags, then the script would
be written as follows:
<script
language="JavaScript">
<!-- Hide this script from browsers that are not
JavaScript enabled
document.write("Your browser is " +navigator.appName+
".");
document.write("version number " +navigator.appVersion+
".");
// end of our second lesson -->
</script>
We start the comment by using <!-- on the line after
the opening script tag. Then on that one line you may
enter any comment text that you like. Some older
browsers are not capable of interpreting JavaScript, so
the comment tags actually assist greatly in this
respect. They not only allow us to add comments, but
prevent older browsers that do not understand
JavaScript from writing the entire script to the web
page. We close our comment with the --> tag, which
must be started with a double slash. The closing
comment tag is placed on the line above the closing
script </script> tag.
Well, that is all for our second lesson. I look forward
to our next lesson.
For those of you that are awaiting the JavaScript
lesson that teaches how to create your own image flips
(upon mouse-over), that lesson will be forthcoming very
soon. Image flips are done with a part of JavaScript
called event handlers, and we will devote a lot of time
in discussing that topic.
