Let’s Learn JavaScript • Lesson 5 • Object Primer

📅 July 31, 2017
“An object? What’s that?”

JavaScript uses object-oriented programming concepts (OOP) in order to make programming easier by mirroring real-world ideas.

While it is not necessary to use objects all of the time, it helps to understand what an object is because JavaScript views various parts of a web page and browser as objects.

Object

An object is a code representation of something that exists in the real world or in program space. You cannot touch a program object with your hands. It exists as lines of code that are treated as a single unit.

In the physical world away from computers, a tree is an object, a lorry is an object, a book is an object, a caterpillar is an object, and so on. An object has attributes (properties) that describe things about the object, and it has methods that specify the actions the object can perform. We can represent any of these objects and their attributes and methods using lines of program code. The more lines we write, the more detailed the object.

Suppose we want to represent a real-world object: a game piece.

A plastic game piece the means business. Let’s see how we can represent its greatness in program code.

Let’s give this piece a personality by describing it.

Information (Properties/Attributes)

Name: Boris
Hobby: Butcher
Likes: Meat, Pigs, Abandoned Puppies
Weapon: Bare Hands
Clothing: Apron

What Boris Can Do (Actions/Methods)

Sing
Attack
Chase
Chop
Shuffle

Details about the Boris object.

 

UML

Unified Modeling Language (UML) is a language-neutral set of guidelines used to describe software. In theory, a programmer can take an object template written in UML, and then create that object in C, C++, Java, JavaScript, or whatever his given language might be.

The template, or blueprint, of an object is called a class, and we create an object from a class. We do not use a class directly. Instead, we create an object from a class. To illustrate this concept, compare a blueprint of a house with a real house.

The blueprint is not the actual house. It only describes the house so we can build one. We cannot live in a blueprint. It is a sheet of paper that gives the dimensions and other details needed to construct the house.

The house constructed from the blueprint is the object. It has a foundation, walls, a roof, and we can step inside and live in one.

The blueprint is the class, and the house created from the blueprint is the object.

Program code operates in the same way. A class is the blueprint that JavaScript uses in order to create an object. Creating an object is called instantiation, and the object is said to be an instance of the class.

 

Class Diagram

Back to UML. We represent a class (the blueprint) in UML using a class diagram. This is a drawing that contains generic details. Suppose we want to create a class diagram that describes a general template for our specific butcher game piece. It would look like this:

Class diagram. We create an object from the class.

(Note: There are other ways to describe an array in a class diagram. Array<String> maintains simplicity at this point.)

Notice that there are no details in the class diagram. It has no name. No weapon is listed. We only see generic placeholders telling what data types to use. The values for those data types are not specified in the class. When we instantiate an object, we fill in the blanks with details.

An object is instantiated from a class. The class only says that there is a name and it holds a String data type. The object contains the individual details, such a the name “Boris” and he wears an apron.

Since the class is a faceless template, we can create many, many specific objects from the same generic class. This is one of the core concepts behind object-oriented programming. We can create several objects from the same class.

Three objects created from one class. Each object is given a different name, hobby, likes, weapon, and clothing.

Why Are Objects Important in JavaScript?

Classes and objects can become lengthy topics, so do not be concerned if you do not fully grasp the idea about Strings, data types, classes, and objects at this point. We will learn the code in a later lesson.

For now, it is important to know that objects exist and to have an idea of what they are and how they are created because JavaScript views the web browser and the web page document as objects.

Window and Document Objects

In the past lessons, we have already been using two important objects: the window object and the document object.

Just like Boris, the window and document objects possess attributes and methods that your code can access in order to manipulate the browser and HTML elements on the web page.

The Window Object

The window object represents the active window or tab of the web browser that is displaying the current page. When using tabbed browsing, each tab would be its own window object.

Vivaldi web browser. Each tab in this example is one window object that contains one document object. HTML frames may be represented as additional window objects.

So, what can we do with the window object if it contains its own set of properties and methods? The alert() method is a part of the window object. Each time we call alert to display a modal popup dialog in the browser, we are actually calling window.alert().

alert() and window.alert() produce the same result because alert is a method of the window object. alert() by itself is a shortcut.

Other properties and methods exist. By reading the location property (window.location), JavaScript can access the URL of the current page.

document.write(window.location);

(This example uses the window object to get the location and the document object to write the result to the web page.)

“How can I view all properties in the window object?”

We can use a loop to display each property and method for a given object. Loops are covered later. For now, here is the JavaScript code.

for (var property in window)
{
    if (window.hasOwnProperty(property))
        document.write('<strong>' + property + '</strong><br>');
}

JavaScript code that lists all properties and methods of the window object.

Truncated output. Window properties and methods are in bold due to the strong element.

We can gather a wealth of information about the current window by reading the window object. Screen location, window dimensions in pixels, current URL, and more are a few examples of what is possible.

There is no standard among web browsers, so not all support exactly the same properties and methods. Your code might need to perform a test to determine if a required property or method is supported by a specific browser.

The Document Object

The window object provides information about and access to the display device. The document object represents the current web page.

When the web browser renders a web page from an HTML file, it creates the document object to represent it. JavaScript can then access elements via the document object’s properties and methods.

For example, if we wish to get the text located within the <title></title> HTML tags of the HTML file, we can read document.title.

JavaScript code that outputs the content within the title element to the document and to the console.

Vivaldi output. The document (web page) shows the title text This is text within the title. Boo! to the left, and the console in the developer tools show the same title to the right along with the line number on which the console.log statement was encountered.

When we use document.write, we are calling the write method that is built into the document object. The write() method outputs its given text to the web page where it is encountered.

“Can I view the properties of the document object?”

Yes. Just like we can list the properties and methods of the window object, we can do the same with the document object.

Listing document object properties and methods.

Vivaldi output. Truncated listing. Many document properties and methods exist.

Where Can I Learn More?

There are too many properties and methods available with the window and document objects too describe them all here. For more information regarding details and implementation, have a look at w3schools.com as a beginning.

JavaScript Object

Objects in most languages consist of properties and methods. Client-side JavaScript allows users to interact with web page elements, so a third component exists: events.

JavaScript Object

  • Properties
  • Methods
  • Events

A property is something about the object (title, URL, location).

A method is what the object can do (alert, write, clear).

An event is what happens in response to an action. An event happens when a user clicks a link or clicks the submit button on a form. An event is when a page is finished loading. An event is a key pressed on the keyboard. An event is when the mouse hovers over an image.

Many events exist, and these are a few examples. Since a web page can be thought of as a GUI (graphical user interface) the user interacts with, events can be handled as a response to user activities or other page events.

Conclusion

This lesson covered a number of topics that might sound advanced, but early exposure is okay since we will delve into object construction details and loops later. This important thing to know is that objects exist and that JavaScript interacts with the browser and web page via the window and document objects using their properties, methods, and events.

Advertisements

,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: