Javascript
Javascript & Objects
Javascript & Objects |
OnLoad & OnUnLoad |
OnMouseOver |
Math & Forms |
The Date Object |
Opening New Browser Windows |
Javascript Caveats
The concept of program objects is important in both Javascript
and Java. Objects are self-contained independent sections
of code that can be made to work together. Programs written
in languages that use these constructs should be designed
in terms of how the objects relate to each other, not merely
as long strings of sequential instructions. (Objects are
now even an integral part of Perl 5, that language's latest
release; earlier versions of Perl did not employ objects.)
Java and Perl 5 are object-oriented languages,
but Javascript is an object-based language. A difference
in the two types of languages is the fact that the former
lets you define new objects as you see fit, but the latter
primarily lets you use a set of predefined objects.
Javascript has a set of objects that it associates with
the browser, its various windows, and many HTML tags. Furthermore,
some of these Javascript objects have either methods
or properties (or both) that allow one to refer
to parts of a web page by referring to the objects. (A method
is a function that acts on a specific object, and a property
is an aspect or piece of data that characterizes an object.)
One consequence of this is that it is sometimes possible
to change portions of a web page dynamically with Javascript,
without having to invoke a server script or reload the entire
page.
The Navigator Object
Javascript has a navigator
object that the language associates with the browser itself.
This object has four properties that tell you things about
the browser you are using (like its name, version number,
the operating system it runs on, etc.) These properties
are called: appName, appVersion, appCodeName,
and userAgent.
In an object-oriented or object-based language one generally
refers to a property of an object with a "dot" notation:
object.property
For instance, the navigator object's appName
can be accessed via navigator.appName.
We now use a short bit of Javascript code to find that
the four properties of the navigator object have the following
values for the browser you are currently using:
(Try to view this page with at least two different browsers
to see that different results are being shown.)
The Javascript code that produces the above information
is:
|
<script language="Javascript">
<!-- hide script from old browsers
document.writeln("navigator.appName = " +
navigator.appName + "<br>");
document.writeln("navigator.appVersion = " +
navigator.appVersion + "<br>");
document.writeln("navigator.appCodeName = " +
navigator.appCodeName + "<br>");
document.writeln("navigator.userAgent = " +
navigator.userAgent + "<br>");
// done hiding-->
</script>
|
Some things to note about this code section:
- The entire section is set
off in a <script>
... </script>
tag. You can have any number of these on a page.
- This tag has the attribute
language="Javascript"
to distinguish the language in this code section from
other scripting languages that can be used in browsers
(e.g., Microsoft's VBScript).
- The code is also inside
an HTML comment (the section between the lines marked
"hide script from old browsers" and "done hiding"). If
this were not done, browsers that can't handle Javascript
would simply print the code section verbatim. But by placing
the code inside an HTML comment these Javascript challenged
browsers will not show anything at this point.
- The Javascript command
for printing a line of text is document.writeln();
the argument between the parentheses is what gets printed.
- In the argument of document.writeln()
variable names, like navigator.appName,
appear literally when placed inside doubles quotes but
their value is substituted if the quotes are omitted.
WebTeacher uses Javascript's logic commands and
the values of navigator.appName
and navigator.appVersion
to determine the default customized version of this tutorial
for each reader's browser and operating system.
|