Before I get started I would like to say that this isn't a tutorial for beginners but to explain how everything in Java Script is just an object.

With that being said lets get started! The first thing to understand is an Object. What is an Object? You may say. Well the best way would be to show an example.

var ex1 = "I'm an Object!";

You might be telling me, but Wayne, that's an variable. Well yes it is but it's also an Object. Java Script was very nice and made it so we didn't have to type sonething like this in each time

var ex2 = new String();
string = "I'm an Object!";

Defines a new object

Defines the type of object

There is no difference between each example and we can check this way. As you might have figured out by now is that each Java Script object has it's own methods and properties. A method acts like a function while properties are like variables within an Object. In the example below I'll show how both of the examples above are the same object type.

var length1=ex1.length;//14
var length2=ex2.length;//14

A property of String Objects

So now you know how strings are an object but what about functions? Well lucky you because functions are also objects.

var ex3=new Function(){alert("Hello World!";};
ex3();//Alerts Hello World

As we learned from the second example that the new keyword defines a new object while Function() defines the type of object.

Now you understand how everything can, and is an object. Next to explain the this keyword in javascript. Now this refers to the current Object that the code is running under. The global object is the window object. Window is basically the browser window. Anyways, this is used when adding a new method or properties to a *existing or new object*. It is also useful when dealing with multiple HTML divs or images with all different names and classes. So instead of using document.getElementById or getElementsByClassName you can do something like this.

function change(obj){
obj.style.display = "none";//Makes the object hidden
}

<image src="randomwebsite.net/image.jpg" onclick="change(this)" />
<div onclick="change(this)">Hello World!</div>

this refers to the image

this refers to the div

So since neither one of these HTML elements has an id or class. So we input this as the obj. So without doing more work we have successfully make the image and div hidden.

Hopefully you enjoyed this blog and has learned a thing or two today.

*I might do a blog about how to create a new object and change/add new methods and properties to a existing object*