Statements

JavaScript Tutorial 7
Methods

Welcome Back! We are going to discuss Methods in more depth in this tutorial. Methods are functions that belong to or act on Objects. We aren't going to cover all of the methods, there are too many, but after this tutorial you'll be able to look at the Reference and figure the rest of them out.

We are going to cover some of the methods from the following objects:

window
document
string
date

As well as some global methods that BELONG to every object. I'll show you an example, and then I want you to Learn by Doing by including the rest of the JavaScript to make it work in your document. Are you ready? (Say yes).

Smile for goodness sake!! This is FUN!

Some methods of the window object

window.alert()

You've already used this method, but we've never really discussed it in depth. As you know, using this method displays a JavaScript alert box with a message in it and an 'OK' button. Here's an example of the syntax:

window.alert(value);

This is a good one to start with because the syntax is so simple. The first part - in red - tells the browser which object you are using (in this case 'window').

The next part - in purple is the method we are using with or on that object. All method options (parameters)are set within the parentheses that immediately follow the method name.

The part in green is the value that the alert box will display. This value can be assigned in 2 ways.

If the value is entered here in-between quotes, as in "some thing you want it to say ", it is displayed as-is. That is, some value to be displayed is printed in the alert box.
If the value is not entered in-between quotes, it is treated as a variable name. In this case, you either must define the value or retrieve the value from somewhere else. So, if you define value in the alert box, you must have already defined value for the variable, and the alert box will display that value. Here is an examples for you to try:

Type the following into CodeRunner below:

<script>

</script>

Your Job is to make that example more interesting!

window.open()

This one is really cool. We can POP UP new windows with little tid bits of information with this one.

Here is the syntax:

localname = window.open("URL","title","options");

We have several things to talk about here. Of course by now you know that window is the object, and open is the method we're using.

Inside the parentheses ( ) there are three method parameters. The first one "URL" is the address of the page to put in the window once it opens (like "http://www.useractive.com" for instance).

The second one, "title" is the what is going to be put in the title bar of the window. You should note that if the page at the URL that you define has a <title> defined, your title will be replaced.

The third one, "options" is how you control what the new window looks like. The options you can control are height, width, resizable, scrollbars, toolbar, menubar, location, status, menubar. You'll see in the example below how to control these. Also above you see localname =. This defines a local name for our window - really it puts our new window into a variable. We didn't have to have this part. It sometimes makes it convenient (as we'll see when we do some other methods) to give a local name to things.

Here is an example. We'll give the example an event handler and a function (we're going to talk a lot more about functions later) to open the new window :

Type the following into CodeRunner below:

WARNING: DO NOT PUT RETURN CHARACTERS IN BETWEEN THE QUOTES OR IT WON'T WORK. That's why that line up there is so long. Actually put an enter (or return) after location=no, for instance and see for yourself that your script won't work.

You're job now is to make that example much more interesting!!!

window.focus()

If for some reason after the first click the new window you opened in the last example gets BEHIND the original one (i.e. it gets blurred) then the next time you click on the "open a window" button, the window will already be open but behind the first one. For this reason when you open a window it is always a good idea to focus it. Well just add one line to the last example. In the new example below notice the use of the local name to call the new window.

Type the following into CodeRunner below:

Some methods of the document object

document.open()
document.write()
document.close()

Okay, here is the plan....we are going to cover three methods at once here. That's because they don't make much sense apart.

Suppose your mean old boss wants you to open a window, but doesn't want to open a new page from the server. He just wants a quick message put up. Just pretend, okay?!

We are going to write a page from another page. here is the example.

NOTICE that there is no "URL" anymore in the window.open() method.

Type the following into CodeRunner below:

That's it. That's what you do. You can put any HTML between the quotes in the write method. Be careful with return characters however! Right now you should put a return after one of the words in IT WORKS DUDE to see what happens.

Do you understand that we have to open a document before we write to it, and then close it? You do? Could you explain it to me?

Well, this is one of those things that I think is kind of unnecessary, but apparently the good people at Netscape don't agree - and who am I to tell them any different? Here's what we just did. the open() method allows us to start writing to the document. write() is self explanatory (I think). And, close() makes the browser display everything that we have just written to the document. Get It??