JavaScript: Objects

There are many predefined objects in JavaScript. Most form elements, the screen, the window, the browser. We can make objects of tags by giving them an ID. Some examples of predefined objects are:
windowThe window containing the browser
frameA frame in a frameset
historyThe list of places we have visited
locationThe URL of the place we are at
documentThe current web page
linkA link with an href
formA form on the page with all its elements
Objects are nested like the boxes we learned about in CSS. The full name of an object is the path through the tree. So a form named 'form1' would be

window.document.form1
You can usually leave off the window part if there is only one. Objects have a variety of properties. Most of the CSS properties are there. You set the property by using its name like this:
document.form1.action="new_url";
You can access the properties in this way:
var oldaction = document.form1.action;

Variables can hold objects. You can use this as a kind of shorthand for the object.

var myform = document.form1;
var oldaction = myform.action;
The variable then acts just like the object. If you have several references to an object, doing something like this is better because there is less typing and less chance of typos.

Here are some details on the nesting I mentioned above. If we are dealing with frames, they are inside a frameset, which is inside a document which is in a window.
     
window/    
  frameset/  
    frame1
    frame2
  frameset/  
    frame3
    frame4
There is a shorthand, like the relative pathnames we used in the URLs that we can use if code in frame3 wants to talk to frame4. The frameset is above both frames and is called the parent. So you can refer to frame4 from frame3 as

parent.frame4
parent is kind of like using '..' in pathnames. Frames have a document object in them. They are like small windows and have most of the properties of the window.

Location object

Each document has a location object. You can get at the URL for this page using that. You can retrieve pieces of the URL like the domain, filename or even the part after the pound sign (#). The href property contains the whole URL and if you set it, the browser window or frame you are in will change to the new page. Like this. And here is the code

<a style="text-decoration: none; color:black;" href="#" onClick="location.href='../asgs/index.html';">Like this</a>.

Date object

This object can be used to manipulate dates. One common use is to find the time between two dates. You can get the current date like this.

<a style="text-decoration: none; color:black;" href="#" onClick="var d=new Date();alert('Today is ' + d.toLocaleString()); return false;">like this<a>.
Notice the return false statement; This tells the anchor object not to do the jump. We can do this without using an anchor tag. Most objects can be clicked on, so we could use a <span> tag to mark the text we want to click on like this.
<span onClick="var d=new Date();alert('Today is ' + d.toLocaleString()); return false;">like this<span>.
Also notice that there is no hand cursor when we put the mouse over the trigger words. The hand cursor only appears for anchor tags.

On form objects, you can change the onClick property.

<form name="form1">
<input name="button1" type="button" value="Click me" onClick="return pressme();"></input>
<span id="mesg"></span>
</form>