JavaScript Primers #7

By Joe Burns

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!

  • appName returns the name of the browser, i.e., Netscape or Explorer.
  • appVersion returns the version number of the browser and the platform it is created for.
  • appCodeName returns the code name given to the browser, i.e., Netscape calls their browser Mozilla.
  • userAgent returns the hypertext transfer protocol header used by the browser when working with servers so the server knows what it is dealing with.

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.

  • bgColor returns the background color in hex code.
  • fgColor returns the foreground color in hex code.
  • linkColor returns the link color in hex code.
  • alinkColor returns the active link color in hex code.
  • vlinkColor returns the visited link color in hex code.
  • location returns the URL of the page.
  • referrer returns the page the user came from before the current page. If no page is available, it returns a blank space.
  • title returns the text between the HTML document's TITLE commands.
  • lastModified returns to date the page was last modified (actually the date the page was uploaded to the server, or last saved on hard disc).
  • cookie (not shown) returns the user's cookie text file.
  • anchors (not shown) returns the number of HREF anchors on the page.
  • forms (not shown) returns an array (listing) of form items on a page.
  • links (not shown) returns a number for each individual link.

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...

  • location.host returns the URL plus the "port" the user is attached to.
  • location.hostname returns only the URL.

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.

Click here for a possible answer
(this will open a new window)


The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date