Skip to Content

Advertisement

You (Level 0)
0% Complete
Last Badge Earned
None

I am going to clarify some things I said earlier about objects because it is such an important concept in JavaScript. Objects are created from functions inside of JavaScript. Technically, when you create a string variable you are writing var example = new String("Welcome"); An this new String() is a function that creates the string object.

When objects are called, they are usually followed by a . that tells us a property or a method is about to be called. Let's hope this analogy works. Think of yourself as an object called you.

Properties

Now, you have properties about yourself. So, if I typed you.hairColor , I would expect the results to be whatever hair color you had. That is an object property in a nutshell.

Example var example = "Welcome";
document.write(example.length);
Result
7

The variable example is a string and one of its main properties is length. We get 7 because "Welcome" has 7 characters.

Methods

Methods are actions of or on the object. Again using you as an object, you.standUp() would make you stand up.

Example var example = "Welcome";
document.write(example.strike());
Result
Welcome

While the strike() method seems vicious, it simply just puts a line through the object string. Notice how the methods have () after them. Sometimes, they require arguments very much similar to functions. Our last example didn't require one, but now I'll show you what it looks like if they do.

Example var example = "Welcome";
document.write(example.charAt(3));
Result
c

The method charAt has an argument of 3, which is why it is shown above as charAt(3). The charAt goes through a string and finds which character is at a position in the string. Since, we used 3 as the argument, it returns "c" because c is the 4th character from the left. Remember that most methods start from 0. So, charAt(0) would return "W".

Referencing JavaScript Objects

As I said earlier, JavaScript supports Object Oriented Programming. It follows a concept of Inheritance, which is a whole complicated idea in itself. Inheritance summarized, simply means that anything that is created by an object takes on its properties and methods. So if you create a string, it will inherit of the properties already preset by the string object.

JavaScript can reference in object in a few ways, but we will only discuss the main ones.

Example <html>
<body>
<div id="example"></div>
<script type="text/javascript">
document.getElementById("example").innerHTML="Changed Text";
</script>
</body>
</html>
Result
Changed Text

In the above example, we invoke the "document.getElementById()" method. Here, the method takes one argument of "example", which grabs the div object with the id of "example". Now we use the property "innerHTML" that references the contents between the "<div id="example">" tag and the "</div>". In the case we are setting the property's value equal to "Changed Text" (Quick note: Strings in JavaScript are in quotes). Also, the reason "example" is in quotes is because, if it wasn't in quotes, it would be referencing a variable.

As you can see reference an object's id is very common, but sometimes it is better to reference an object's name.

Example <html>
<body>
<div name="example2"></div>
<script type="text/javascript">
document.getElementsByName("example2").innerHTML="Changed Text";
</script>
</body>
</html>

I've attached my favorite JavaScript and jQuery book. I would encourage you to read it as well.

Your code will execute in this window.



Let's explore some more tutorials or topics!

Next Tutorial Previous Tutorial

Advertisement

If you enjoyed this resource, support me by sharing this page with others.

Comment on

Show Comments
  • User

    Edward April 13, 2015, 3:28 a.m.

    Referencing the last example, the document.getElementsByName method returns an array of objects. The syntax should be: document.getElementsByName("example2")[0].innerHTML = "Changed Text";

  • User

    Charlie April 29, 2014, 3:22 p.m.

    The last example, document.getElementsByName() doesn't work. Please have a check. Thanks, Charlie

  • User

    kurama3 Feb. 17, 2014, 1:18 a.m.

    I like the use of the reference 'you' when describing objects. If only there was a you.goToSleep()

  • User

    Monster June 8, 2013, 8:07 a.m.

    Learning a new computer language is hard enough without the explanations belonging to things that are not even in the code that is being referenced. There have been a number of spots where you reference things that are not in the code... such as in 'Javascript Objects' where you show some code and then explain the code using 'In the above example, we invoke the &quot;document.getElementById()&quot; method. Here, the method takes one argument of &quot;test&quot;, which grabs the div object with the id of &quot;test&quot;'. The problem is that &quot;test&quot; appears no where in the example code. I am thinking that you are probably referring to the keyword &quot;example&quot; as opposed to &quot;test&quot;, but following this is extremely difficult, if not impossible, if you can't be more accurate in your explanations.



Advertisement