The Object

text zoom

Previous: Introduction to JavaScript Intro to Variables :Next

Lesson 1, The Object:

As I previously mentioned, JavaScript is an object oriented programming language and therefore is based around the object. The object in JavaScript can be very confusing to the beginner. It is nothing to be frightened of. For the time being it will do you good to look at the JavaScript object simply as a noun. Objects are the nouns of JavaScript. Each object has properties and methods associated with it.

What often makes it confusing for the beginner is that an object can take many different forms and can be very simple or very complicated. For that reason, I think it best that you learn more about the object as we go along with this guide. We will introduce many different instances of the JavaScript object throughout the entire guide. Here We will simply present you with a short piece of JavaScript code entwined in HTML and discuss some of the objects that are involved.

(Green text is HTML code and red text is JavaScript.)

<html>

<head>

<title>JavaScript Objects</title>

<script type="text/JavaScript">

function intro(output_name) {

alert("Hello " + output_name + "! Did you learn anything?");

}

</script>

</head>

<body>

<form name="my_form" method="post" action="#">

Enter your name:

<input type="text" name="users_name" size="12">

<input type="button" name="the_button" value=" --GO!-- " onClick="intro

(window.document.my_form.users_name.value);">

</form>

</body>

</html>

An object in JavaScript is similar to an object in real life. In real life, an object is pretty much any noun. In life, a truck is an object, so is a TV, a microwave or a glass. In life, as in JavaScript, objects may be embedded in one another. A truck contains many other objects like the tires and the seats. On the other hand, a glass does not contain any other objects as long as it is empty. Now think about how objects are in life while considering the above code example. Also, like in life, you can create objects in JavaScript and even in HTML to an extent. There are actually several objects working together to produce the outcome of the above script. First, there is the window, which is the top level object in JavaScript. All other objects fall within the window object. Secondly, there is the document object, which is referred to in JavaScript as the DOM or the Document Object Model. The document is basically the content of the window. Third comes the form object. We have named the form object "my_form" in the above example. Inside the form object, are even smaller objects. They include the text input object named "users_name" and the button input object named "the_button". Then, to interact with our objects, we have inserted a function, named "intro()", that greets the user with an alert box when clicked upon. In this case I have colored the onClick text red because it actually is JavaScript even though it has become part of the HTML 4.0 standard as well, so is now considered HTML too. More about all that later. We are showing you the above code sample to demonstrate how many objects are involved in just a simple script. Objects are the backbone of JavaScript. Learning objects takes time and will become easy as you learn more. You will see as we go further that objects can be as simple or as complex as you need them to be.

Here is the outcome of the above code snippet (inside the page breaks):

Enter your name: