Creating javascript objects from different files

Question

I've been trying to do javascript for sometime now, but i want it to be "object-orientated" so I'm trying to create different javascript classes in different files and try to create an object and call it's methods in a different file function, but it doesn't seem to work.

This is what I have so far:

person.js

function Person(name, age, gender)
{
    this.age = age;
    this.name = name;
    this.gender = gender;

    this.job;

    this.setJob = function(job)
    {
        this.job = job;
    }

    this.getAge = function()
    {
        return this.age;
    }

    this.getName = function()
    {
        return this.name;
    }

    this.getGender = function()
    {
        return this.gender;
    }
}

Job.js

function Job(title)
{
    this.title = title;
    this.description;

    this.setDescription = function(description)
    {
        this.description = description;
    }
}

main.js

function  main()
{
    var employee = new Person("Richard", 23, male);
    document.getElementById("mainBody").innerHTML = employee.getName();
}

index.html

<!DOCTYPE HTML>
<HTML>
<head>
    <title>javascript test</title>
    <script src="main.js" type="javascript"></script>
</head>
<body>
    <p id="mainBody"></p>
</body>
</HTML>

any help or advice would be greatly appreciated.

Many thanks

EDIT: Many thanks for all the answers and suggestions, however, I've included all my javascript files and still it doesn't work...

You should define your methods on the prototype Person.prototype.setJob = ... and not on init — Andreas Louv
– Andreas Louv, Commented Jan 15, 2013 at 10:21
Doing OOP in a prototype based language does'nt really make it easier or better for you. — adeneo
– adeneo, Commented Jan 15, 2013 at 10:22
@adeneo so is what i've done at the moment is better for OOP?? — Danny
– Danny, Commented Jan 15, 2013 at 10:24

Minko Gechev · Accepted Answer · 2013-01-15 10:28:11Z

18

Currently JavaScript is not clever enough to find your dependencies without help.

You need:

<!DOCTYPE HTML>
<HTML>
<head>
    <title>javascript test</title>
    <script src="person.js" type="javascript"></script>
    <script src="Job.js" type="javascript"></script>
    <script src="main.js" type="javascript"></script>
</head>
<body>
    <p id="mainBody"></p>
</body>
</HTML>

Note:

If you want on-demand load of the dependencies then you can use AMD (Asynchronous Module Definition) with requirejs or something else.

Using AMD you can define something like:

define(['Job', 'person'], function (job, person) {
    //Define the module value by returning a value.
    return function () {};
});

The define method accepts two arguments: dependencies and function which defines the module. When all dependencies are loaded they are passed as arguments to the function where is the module definition.

One more thing to notice is that Person and Job are not classes. They are just functions (constructor functions) which produces objects based on rules in their definitions.

edited Jan 15, 2013 at 10:28

answered Jan 15, 2013 at 10:22

Minko Gechev

25.8k9 gold badges64 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

guest Over a year ago

This is interesting. I'll have to try using AMD. How can you call it when I'm using ['Job', 'person']?

BGerrissen · Accepted Answer · 2013-01-15 10:21:51Z

4

Files aren't automatically loaded, you need to add each .js file to the document with script tags and in the right order as well, otherwise you will get errors.

You might want to look into requirejs.org for dependency management, it's the hawtest thing lately untill ES6 becomes mainstream anyways.

answered Jan 15, 2013 at 10:21

BGerrissen

21.7k4 gold badges41 silver badges40 bronze badges

Comments

VB9-UANIC · Accepted Answer · 2013-01-15 10:25:49Z

3

class methods should be defined via prototype so they receive 'this' reference, like that:

Person.prototype.getGender = function()
{
  return this.gender;
};

answered Jan 15, 2013 at 10:25

VB9-UANIC

3311 silver badge5 bronze badges

Comments

twksos · Accepted Answer · 2013-01-15 10:23:30Z

2

you can try to include the 1st and 2nd javascript files first. like:

<!DOCTYPE HTML>
<HTML>
<head>
    <title>javascript test</title>
    <script src="person.js" type="javascript"></script>
    <script src="Job.js" type="javascript"></script>
    <script src="main.js" type="javascript"></script>
</head>
<body>
    <p id="mainBody"></p>
</body>
</HTML>

answered Jan 15, 2013 at 10:23

twksos

1415 bronze badges

Comments

Mihai Stancu · Accepted Answer · 2013-01-15 10:21:47Z

0

You need to return the object created by Person in order for it to constitute a new instance of the Person prototype.

return(this);

answered Jan 15, 2013 at 10:21

Mihai Stancu

16.2k2 gold badges35 silver badges51 bronze badges

Comments

mattsbox · Accepted Answer · 2013-01-15 10:26:48Z

0

This isn't working because, according to your HTML code, the browser is only loading main.js

<script src="main.js" type="javascript"></script>

Since Javascript runs in the browser, not on the server where the other files are, the browser will try to execute main.js and fail, since it doesn't have access to the classes in the other files. If you include each one of the files (making sure that every file is included after the one it requires), you should have more success.

For example:

<script src="Job.js" type="javascript"></script>
<script src="person.js" type="javascript"></script>
<script src="main.js" type="javascript"></script>

answered Jan 15, 2013 at 10:26

mattsbox

911 silver badge5 bronze badges

Comments

Kevin Bowersox · Accepted Answer · 2013-01-15 10:29:39Z

I see three issues with the code.

The page does not import the proper external Javascript files

<head>
    <title>javascript test</title>
    <script src="job.js" type="javascript"></script>
    <script src="person.js" type="javascript"></script>
    <script src="main.js" type="javascript"></script>
</head>

Male needs to be a String literal

When the interpreter encounters male within the Person constructor it looks for a variable, which it cannot find.

function  main()
{
    var employee = new Person("Richard", 23, "male");
    document.getElementById("mainBody").innerHTML = employee.getName();
}

The code should call the main function.

Without a call to the main function the code is never kicked off.

function  main()
{
    var employee = new Person("Richard", 23, "male");
    document.getElementById("mainBody").innerHTML = employee.getName();
}

main();

Working Example: http://jsfiddle.net/R7Ybn/

Josh · Accepted Answer · 2017-08-11 22:57:16Z

0

ES6: https://www.sitepoint.com/understanding-es6-modules/

Supported in Safari as of Summer of 2017, but no support in other browsers. In a year or so, it seems like it'll be supported by Edge, Firefox, Chrome, Opera, and safari. So keep it in mind?

https://caniuse.com/#feat=es6-module

answered Aug 11, 2017 at 22:57

Josh

72510 silver badges25 bronze badges

Comments

Frazer Flanagan · Accepted Answer · 2017-10-05 15:28:49Z

0

I was having a similar issue and the problem for me stemmed from writing

"script src="Person.js" type="javascript"

instead of

"script src="Person.js" type="text/javascript" in my index.html file

Hope this Helps,

answered Oct 5, 2017 at 15:28

Frazer Flanagan

1

Collectives™ on Stack Overflow

Creating javascript objects from different files

person.js

Job.js

main.js

index.html

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

person.js

Job.js

main.js

index.html

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related