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!

Answer 1

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...