Javascript Programming: Part 6
Object Oriented Programming – continued
An example of a built-in method/function
One function (technically, a method) of the window object is ‘alert’. Here is a simple example of how to actually use the alert function:
window.alert("This is an alert box!"); |
This simple line has a lot of stuff going on. Once you understand what this line is actually doing, you will be well on your way to becoming a JavaScript programmer.
Since we are programming for use in the web browser (like Internet Explorer, for example) all of our programming code is being written to ‘talk’ to the browser and tell it what to do.
The first line of code is telling the browser that we want to use the built-in window object. We do this by starting with the keyword ‘window’. Ok, fine! the browser knows now that we are using its built-in object ‘window’. Like most objects, the window object has built-in functions/methods. So to tell the browser what method we want to use (that the window object has), we do this by naming it. In this cas, we want to use the ‘alert’ method so we type in a period after the keyword ‘window’ and then the name of the method that we want to use, in this case it is ‘alert’:
window.alert |
The period in-between the words ‘window’ and ‘alert’ acts like a pointer for the browser to use and understand. Essentially by inserted the period between the words, the browser knows that the second word (in this case ‘alert’) is a method inside of the window object. If you were to do this:
window alert |
The browser would have no idea what ‘alert’ was about. So in other words the period (.) in-between the words joins them together. This is called dot notation and is used a lot.
Next part of this line of code is much easier to understand:
("This is an alert box!"); |
Taken from this:
window.alert("This is an alert box!"); |
All methods can be fed information that the method can do something with it; hold on to that thought. You feed the method this information by placing it inside the brackets () that sit in front of the method name. In the above example we are feeding the alert method the text: “This is an alert box!” The browser knows it is text because the text: ‘This is an alert box!’ is sitting in-between quotes (“”). In programming, anything in-between quotes tells the computer that it is plain text and that there are no special key words telling it to do something. When you are feeding a method/function information this way, it is called ‘passing arguments’. In this example the ‘argument’ is the text “This is an alert box!” and you are ‘passing’ it by placing it in-between the double brackets at the end of the method name:
window.alert("This is an alert box!"); |
More details about the double brackets
At the end of every method/function in JavaScript you need to put 2 round brackets that face each other like so:
() |
So with the alert method we do this:
alert() |
By having the two facing brackets at the end of a method/function, we are telling the browser that this is a function/method. It is also a good way for you to recognize functions when you see them; they always have a couple of brackets () at the end. So for example, the following are all methods of the window object or in other words, they are methods contained in the window object. Some programmers will say the same thing by saying: ‘alert () belongs to the window object.’:
Open() Close() Focus() |
There are several other methods that I have not listed. I want you tounderstand that objects can have several built-in methods, and that methods are identified by placing a couple of round brackets ‘()’ in front of them.
We are just about finished except for one little thing!
In JavaScript and several other languages, we need to tell the computer that we have reached the end of the line of programming code. To do this we use the semi-colon:
; |
So in our example we have this completed line:
window.alert("This is an alert box!"); |
So when the computer is reading this line it knows we are done when it finds the semi-colon. Ok, that is enough theory for now. Copy this code template into a blank HTML page and practice by changing the arguments passed to the alert method:
<script type="text/javascript" language="javaScript">// <![CDATA[ function callAlert() { window.alert("This is an alert box!"); } // ]]></script> |
Our first function
Click here to call the function
There are other things happening in this page that I haven’t spoken about yet, but do it anyway. The more you look at programming code and the more you write it the easier it becomes, so I would strongly suggest that you type it out by hand and get it to work then change things and see how it breaks.
