Introduction to Javascript for Non-Nerds

How can I use Methods and Functions to manipulate my objects?

How can I use Methods and Functions to manipulate my objects?

Now that we know how to describe and access the properties of an object, we can now look at actually manipulating these objects. To manipulate objects in Javascript, we use Methods and Functions.

First, what is a function? Well, a function is nothing more than a group of statements that work together to perform a certain user-defined task. Basically, functions are used to do things. For example, in our car analogy, the car was our all-encompassing object (like a Document). The various components of the car, like the gas pedal, the gear shift, and the steering wheel, were all objects. Now, we define the processes of pushing the gas pedal, shifting gears, and turning the steering wheel as different functions in the car.

The process of using a function in Javascript involves two different steps. First, the function must be defined within the Javascript code. Second, the function must be properly called within the HTML file. To understand this last statement, let me first explain how the Javascript is actually embedded into the HTML file.

Your Javascript code will always be at the top of your HTML file within the <HEAD></HEAD> section. This is neccesary because your browser should realize as it reads through your HTML file that you are using Javascript, before you actually start using it! Thus, the Javascript code must obviously be before the rest of the HTML.

You tell the browser that you are using Javascript by using the script tag. Thus, every HTML file you create that will use Javascript must look like this: 

<HEAD>
<TITLE>This is My Title</TITLE>
<SCRIPT language="Javascript">
<!--
all my javascript stuff
// -->
</SCRIPT>
</HEAD>
The first and second lines should be familiar to you from HTML programming. The third line tells the browser, "Browser, I've got some code here and I'm using the language Javascript to talk to you. So, be prepared." The fourth line serves an interesting purpose. Let us hypothetically say a user using a really old Web browser (one that doesn't support Javascript) decides to look at your home page. When that browser read the third line and receives the "So, be prepared" message, the broswer will say, "Huh? I don't understand." When it goes on to reading your Javascript code, it will say, "I really don't understand any of this. I think I'll generate an error message!" This is bad. So, the two symbols used on lines 4 and 6 serve this purpose: They tell the browser to ignore everything in between. However, if your browser DOES recognize Javascript, it will ignore the symbols.

To put it in simpler terms, a browser that supports Javascript will go on to read your code. A browser that does not support Javascript will automatically ignore the code without generating error messages.

Now, getting back to functions. As I mentioned above, functions have to be defined within the Javascript code (i.e. between the marks. A function is defined in the following way: (1) the word function followed by (2) the name of the function followed by (3) any values from other variables or properties that will be used in this function followed by (4) a set of braces, {}. The actual code of the function will go in between the two braces. Here is an example of a function: 

function square (x) {
        return x * x
}
The first line defines a function called "square" which takes in a value called "x." The second line instructs the browser to send back to whoever called the function the value of x times x. The third line just tells the browser that the function is done.

Some functions are already available to you by Javascript. These special functions are called Methods. Methods are simply functions that perform simple tasks on your Web page. For example, two of the most common methods are "focus" and "blur." Focus tells the browser to bring the "attention" of the cursor to a particular object. Similarly, blur tells the browser to remove the "attention" of the cursor from a particular object.

Functions and Methods can be used in one of two ways. They can either be explicity told to execute or be executed if a certain event occurs. This leads us into the topic of Events. Events are basically just little guards at many objects that tell the browser to do something if a certain condition is satisfied. For example, lets say you wanted to execute a function whenever someone clicked a button. You could use the "onClick" event to tell the browser, "Browser, I want you to do something whenever the user clicks this button." The HTML code would look something like this: 

<FORM>
<INPUT TYPE="button" NAME="mybutton" onClick="dothis()">
%lt;/FORM>
Thus, the function "dothis" is ONLY executed if the user clicks the button. But, now, lets say you wanted to execute the "dothis" function from within another function. In other words, it wasn't event-driven like above. Then, the function is called differently. Recall earlier, that we talked about the hierachiel way of classifying objects. They always had the form document.objectname.objectname. Well, this "addressing" technique can also be used to call functions and methods. In the case of a method, the method would be specific to a particular object (i.e. the focus of a text box). In such cases, the object name must be included in the address like so: 
document.nameoftextbox.nameofmethod()
In the case of a function, which is not linked to an object, but rather linked to the document itself (at the top of the document to be precise!), the address would simply be (using the example from above): 
document.dothis()
Thus, you should now have a good understanding for what an object is, how we describe it with properties, and how we can manipulate with methods and functions (both regular and event-driven).
HomeGo to Top