External Javascript calling functions from another external javascript file

Question

So, I've looked at other questions like this and they haven't really answered the questions.

In short: I've worked with HTML, Java, VB, and whatever language MIRC uses(it's been a little under 10 years).

I'm new to javascript, but because of my other computer language know-how's... I know that using Java, I can create class's and class-like functions.

But, with html/javascript, I'm not sure how to call a function from one external .js file to another.

Let's say: I want to make a player class that I can call functions from anytime and use it in the 'main' .js file that uses those functions from that class inside another function. For example.

If I had

function isDead() {
if (health < 10 || energy < 10)
{
return dead = 'true';
    }
    else { return dead; }
}

in Player .js file, and in the main one, I had.

function fight() {
if (isDead() == 'true')
{
    energy -= 10;
     health -= 10;
    Swords();
}


document.getElementById("energy").innerHTML = energy;
document.getElementById("health").innerHTML = health;
document.getElementById("sword").innerHTML=sword;

}

In the item.js I had

var swordDamage = 0;

function Swords(){
if (swordDamage < 3)
swordDamage +=1;
else
return sword -=1;
}

(Mind you this actually worked (I haven't tested the swords() yet as I just made it for this question.)

Is there any particular way I need to call upon the functions from other .js files into the main.js file.

example: main.function();

or am I better off saving them as an html document and writing nothing but script to get around this?

Thanks for answering!

Perhaps learn some fundamentals of using javascript objects. There are no classes in javascript, there are objects with properties and prototype inheritance that can be used like classes. You are much better to make global variables such as health, energy, dead etc. properties of instances, then use getters and setters to adjust the values. As for putting code in separate files, you can do that in the development environment but it is more efficient to have all code in one file than spread across mulitple files. If it's in multiple files, they must be loaded in the right order. — RobG
– RobG, Commented Sep 2, 2013 at 23:58

Claudio Santos · Accepted Answer · 2013-09-03 01:23:37Z

6

I come from the same environment that you came. I did the javascript course that helped me a lot, codeacademy.com.

Well I should implement your sample like this:

fighter.js

function Fighter(){
    this.health = 100;
    this.energy = 100;

    this.isDead = function() {

        if (health < 10 || energy < 10)
        {
            return dead = 'true';
        }
        else { 
            return dead; 
        }
    }

    this.Punch = function(otherFighter){
        otherFighter.energy -= 10;
        otherFighter.health -= 10;

    }

    this.AtackWithItem(item, fighter){
        otherFighter.energy -= item.damage;
        otherFighter.health -= item.damage;
    }
}

main.js

function initFight() {

    var fighterA = new Fighter();
    var fighterB = new Fighter();

    document.getElementById("energy").innerHTML = energy;
    document.getElementById("health").innerHTML = health;
    document.getElementById("sword").innerHTML=sword;

    fighterB.punch(fighterA);
    document.getElementById("energy").innerHTML = energy;
    document.getElementById("health").innerHTML = health;
    document.getElementById("sword").innerHTML=sword;

    var sword = new item();
    fighterA.AtackWithItem(sword,fighterB);
    document.getElementById("energy").innerHTML = energy;
    document.getElementById("health").innerHTML = health;
    document.getElementById("sword").innerHTML=sword;


}

item.js

function item(){
    this.type = "Swords"
    this.damage = 20;
}

All files fighter.js, main.js and item.js will be refer with the tag:

<script src="../item.js"></script> 
<script src="../fighter.js"></script> 
<script src="../main.js"></script>

in the index.html.

Hope this help you...

answered Sep 3, 2013 at 1:23

Claudio Santos

1,31713 silver badges22 bronze badges

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

2 Comments

ProgrammingFreak Over a year ago

Thanks for answering so quickly, this gives me a better look at the direction I need to go with my programming! I should add that I am doing this all in notepad, as opposed to a program such as netbeans, or visual web development. I wanted to try something that was completely from scratch.

Claudio Santos Over a year ago

I recommend two IDEs WebStorm-JetBrains and Sublime Text 2. If my answer was useful please, mark as a valid anwser.

Collectives™ on Stack Overflow

External Javascript calling functions from another external javascript file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related