Monday , 20 November 2017
Home / Programming / JavaScript / Objects – JavaScript Tutorial
Objects
Objects

Objects – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

Object oriented programming is a topic for intermediate programmers. It can be a very confusing and discouraging topic. JavaScript utilizes objects often so learning about OOP (object oriented programming) early is important. I won’t be going in depth in OOP until later tutorials, but for now, I’ll be covering the basics and what you need to know.

What are Objects?

Essentially everything in JavaScript is considered an object. Let’s look at a real world example.  Your computer is an object. An object has properties and methods. A property would be the size, weight, color, etc. Properties are characteristics of an object. A method is  the functionality of the object. It’s the actions that the object can perform. Back to our computer example, you can turn on your computer. Your computer process information and display data to you. In the programming world, this is what you would call methods.

Objects can be anything you want. Objects are just pieces of data for you to use. JavaScript allows you to access a bunch of objects. You can even create your own objects. You’ve already been using objects since the start of this tutorial series. All the variables you created are considered objects.

Let”s take a look at a predefined object.  Clear out your script and add this bit of code.

In order to start using an object’s properties and methods, you first must type the name of the object you want to use. In our case, we want to use the document object. The document object is an object created by JavaScript for you. This is the part of your browser where your site loads.

Once we define the object  we want, then you type in a dot to tell JavaScript you want to access something inside this object. This is called dot notation. If were to omit the dot, then JavaScript will assume we’re trying to access some object called documentwrite. The write() method is specific to the document object. There are many objects with special methods that we can use.

Lastly, you type the name of the property or method you want to use. In our case,  we want to access the write() method. You’ll notice it’s in the same fashion as a function.

This is because methods are functions. So, what’s the difference? The term method is the technical term for when you’re talking about functions inside an object. If a function has no relation to an object, then it’s just considered a function.

Same thing goes for properties. Properties are variables. Properties is the technical term for when you’re talking about variables inside an object. If a variable is created inside an object, then you would call it a property and not a variable. They’re both the same thing, but different concepts.

If we were to do something like this.

We would get an error because we haven’t defined a function named write(). However, the object document contains a method named write().  If you refresh your page, you should see your message appear in the document of your browser.

Let’s go over how to access a property really quick. Clear out your script and add this bit of code.

We have a variable named text.  We then alert out it’s length. A string is considered an object. You can access different properties and methods of the String object. In our case, we want to access the property length. The length is basically how many characters are inside the string. You should get alerted 12.

Conclusion

Object oriented programming is a hard subject. We’ll be practicing with more objects defined in JavaScript so you can get use to it. If you would like to learn more about the document object, then go here.

https://developer.mozilla.org/en-US/docs/Web/API/document

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link