Deconstructing the Scripts
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 LANGUAGE="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 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"
<SCRIPT LANGUAGE="javascript">
var bgc = document.bgColor;
var fgc = document.fgColor;
var lc = document.linkColor;
var al = document.alinkColor;
var vlc = document.vlinkColor;
var url = document.location;
var ref = document.referrer;
var t = document.title;
var lm = document.lastModified;
document.write
("The background color of this page is <B>" +bgc+ "</B>.")
document.write
("<BR>The foreground (or text) color of this page is <B>" +fgc+ "</B>.")
document.write
("<BR>The link color of this page is <B>" +lc+ "</B>.")
document.write
("<BR>The active link color of this page is <B>" +al+ "</B>.")
document.write
("<BR>The visited link color of this page is <B>" +vlc+ "</B>.")
document.write
("<BR>The URL of this page is <B>" +url+ "</B>.")
document.write
("<BR>The page you were at before this page was <B>" +ref+ "</B>.")
document.write
("<BR>Here's what's written in the TITLE of this page is <B>" +t+ "</B>.")
document.write
("<BR>The document was last modified: <B>" +lm+ "</B>.")
</SCRIPT>
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 LANGUAGE="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 LANGUAGE="javascript">
var hst = location.host
document.write("The name of this location is <B>" + hst + "</B>." )
</SCRIPT>
<SCRIPT LANGUAGE="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)
