Use these to jump around or read it all
The Concept
The Script
The Script’s Effect
Deconstructing the Script
What You’ve Learned
Your Assignment
The Concept
We’re starting to get an understanding of the hierarchy of JavaScript. In fact, hierarchy is quite important in this language, so much so that we’ll devote an entire primer to it.
We know there are objects, like the document, and methods, like “write”, that act upon those objects. In Primer #6 we dealt a bit with creating objects to act upon, or creating variables — very important. Now we’re going to go over the concept of
properties. Properties were touched on briefly before. You may remember that they are a portion or a quality of an object.In Primer #3, we worked with the bgColor property of the document.
It would be difficult, if not totally confusing, to go into all the available properties here. I own three JavaScript books and between them, I found 56 different properties defining multiple
objects. So here, I’ll go into some of the more popular ones and what good they are to you.
The Script
There are actually a few below, but they all follow the
same format: Variable names are created for each “object.property” statement, then each is
placed into a document.write() statement for display. Please understand that the bold titles below are to denote each new script, the text is not part of the scripts.
Properties of the Object “navigator”
<SCRIPT type=”text/javascript”>
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;
document.write(“You are using <B>” +an+
“</B>, version ” +av+ “.<BR>Its code name is ”
+acn+ “, and sends the header ” +ua+ “.” );
</SCRIPT>
The text above within the parentheses should be all on one
line.
Properties of the Object “document”
This code is a little wide. Click here to open it in a new window.
Properties of the Object “history”
<SCRIPT LANGUAGE=”javascript”>
var h = history.length;
document.write(“You have visited ” +h+ ” pages before this one.”)
</SCRIPT>
These Two are Properties of the Object “location”
<SCRIPT LANGUAGE=”javascript”>
var hst = location.host
document.write(“The name of this location is <B>” + hst + “</B>.” )
</SCRIPT>
<SCRIPT type=”text/javascript”>
var hstn = location.hostname
document.write(“The name of this location is <B>” + hstn + “</B>.” )
</SCRIPT>
The Script’s Effect
Here’s a little bit about your computer:
Deconstructing the Script
Let’s take each grouping and talk about it individually…
Hey! The text is bold in some places!
Yup. That’s another extra little trick thrown in for fun. Look at the code for any of the items that appear in bold. All I did was add the <B> and </B> statements on either side of the variable name — inside the double quotes. Since this is a “document.write” statement, the bold commands are written to the page as text and then acted upon like HTML commands. The effect is the item returned from the JavaScript statement turns bold. It’ll work with just about any HTML command that will alter text. Just make sure the commands are inside the double quotes so they are seen as text rather than part of the script commands. If you don’t — error.
Back to the properties…
Properties of the Object “navigator”
<SCRIPT type=”text/javascript”>
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;
document.write(“You are using <B>” +an+ “</B>,
version ” +av+ “.<BR>Its code name is ” +acn+ “,
and sends the header ” +ua+ “.” );
</SCRIPT>
Again, the text above in the parentheses should be all on one line.
People love these properties. The Goodies e-mail always gets questions about how to display browser characteristics. This is it. The object is “navigator” and it has four properties. Watch the capitalization!
|
Knowing the browser’s version is quite important. Later on we’ll get into If statements. Knowing the user’s browser and version number allows you to say “If the browser is this, Then do this.”
Properties of the Object “document”
This code is a big large. Click to open it in a new window.
Again, the text above in the parentheses should be all on one line.
The HTML document properties are very popular in JavaScript. Here I’ve listed nine. There are actually 13 available to you, but examples of the other four would be above your heads at this point. I’ll list them below and what they do after describing these.
|
Again, if you use the If command, you can say “If the time is after 6PM, Then make the text white and the background black to represent night. If the time is before 6PM, Then make the background blue and the text green to represent day.” There are numerous ways to set aside and use the properties of the document.
Properties of the Object “history”
<SCRIPT type=”text/javascript”>
var h = history.length;
document.write(“You have visited ” +h+ ” pages before this one.”)
</SCRIPT>
This is a very popular one. Many readers want to be able to make links that take people back or forward one or more pages. They’re trying to recreate the Back and Forward buttons at the top of the browser window. This is what does it.
The object is “history.” It’s the list of pages the browser has visited while you were surfing. The history list is what allows you to hit the Back button and roll through everything you’ve seen.
The property is “length.” It’s a popular one, too. You’ll see it used with other commands later on. By denoting the length of the history, you are asking the script to simply return the number of pages in the history folder.
Later on, we’ll talk about working with the method “go()” and how it allows you to move through the history.length in specific increments.
These Two are Properties of the Object “location”
<SCRIPT type=”text/javascript”>
var hst = location.host
document.write(“The name of this location is <B>” + hst + “</B>.” )
</SCRIPT>
<SCRIPT type=”text/javascript”>
var hstn = location.hostname
document.write(“The name of this location is <B>” + hstn + “</B>.” )
</SCRIPT>
The object here is “location.” That’s JavaScript for URL, the
address of the page. Above are two properties of the location, “host”, and “hostname.” The commands are equal in that they both do the same thing, return the URL in either IP number of text format depending on what the server is using. But…
|
If you are getting the same result with both commands, then that means your server has not routed you to a specific port. In technical terms, the “port”
property is null.
By the way, these two commands will not work if you are running the page from your hard drive. You need to be running this from a server for there to be
a URL for the script to grab.
There are numerous other properties that you’ll run into as you roll through these primers. Here I just wanted to give you an idea of what they are, how to use them, and what some of the more popular ones do.
What You Have Learned
Your Assignment
Okay, smart person, do this: Using one of the “object.property” statements from above, create a JavaScript that creates a link to a page on your server on the HTML document. An example would be if you’re on www.you.com, the JavaScript will create a link to the page www.you.com/joe.html.
Also, whatever property you use, assign a variable name to it.
(this will open a new window)
The Concept
The Script
The Script’s Effect
Deconstructing the Script
What You’ve Learned
Your Assignment
