This is the first paragraph
This is testdiv.
This is the last paragraph
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:
window | The window containing the browser |
frame | A frame in a frameset |
history | The list of places we have visited |
location | The URL of the place we are at |
document | The current web page |
link | A link with an href |
form | A 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 style="text-decoration: none; color:black;" 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>