Using Multiple Javascript Objects

2012-10-10 Updated all references to "Classes" to "Objects." I was referring the custom objects as classes. Which in Javascript is not the case. Javascript does not use classes, as was pointed out. My mistake! Thanks for the info, <a href="http://coderwall.com/avenger7x">avenger7x</a>

In my <a href="http://coderwall.com/p/le3i-g?i=2&p=1&q=&t%5B%5D=%21%21mine&t%5B%5D=%21%21bookmarks">Simple Javascript Object</a> example, I outlined how to create a simple "Person" object and implemented it with an age calculator function and a simple "Say Hello" function.

With this example, I want to show how to implement an additional object from within that simple Person object. For this, the new object will be called "Language." So now we have a person, and we need to specify what language they are speaking.

The Language object:

function Language(value){

    this.lang = value;
}

Language.prototype.sayGreeting = function(){

    switch (this.lang){

        case "en":

            return "Hello my name is: ";
        break;

        case "es":

            return "Hola mi nombre es: ";
        break;
    }
}

This object creates the Language object which we will initialize and then use the sayGreeting function. The sayGreeting function utilizes the ISO 639-1 language codes.

Now that we have our Language object created, let's use it! We can only use it if we remember to import it into our HTML file.

Updated Person object

function Person(p_name, p_year){

    this.name = p_name;
    this.age = this.getAge(p_year);

    try {

        this.language = new Language("en");
    } catch ( error ) {

        alert("No Language script imported");
    }
}

Person.prototype.sayHello = function(){

    try {

        document.write(this.language.sayGreeting() + this.name);
    } catch (error){

        document.write("I haven't learned any languages yet");
    }
}

Now in our HTML document, let's take a look at how we added a Person

<script type="text/javascript" src="person.js"></script>
<script type="text/javascript" src="language.js"></script>
<script type="text/javascript">

    var personObject = new Person("Patrick", 1986);
    personObject.sayHello();
</script>

So you should see "Hello my name is: Patrick."

That's great if you want to declare the language on create, but what if you need to modify the language after the object is created. So someone learns a new language, they need to set their language to a new language.

The following function is added to Person.js

Person.prototype.setLanguage = function(value){

    try {

        this.language = new Language(value);
    } catch ( error ) {

        // there was a problem setting the language
    }
}

Now, we can set a new language for the Person object to something other than English. I have updated the HTML page with the setLanguage function.

HTML page

<script type="text/javascript">

    var personObject = new Person("Patrick", 1986);
    personObject.sayHello();
    var personObjectNew = new Person("Robert", 1983);
    personObjectNew.setLanguage("es");
    personObjectNew.sayHello();
</script>

Output
Hello my name is: Patrick
Hola mi nombre es: Robert

That's it! We are using our new Language object from within our Person object. Now that we know how to do that, we can do anything! This is just a sample object and you can certainly take it and run with it.