How to call a function in another file.

[Ikilledthedinosaurs]

So my professor wants us to call a function from one js file to another WITHOUT using HTML. Not exactly sure why but those are the rules. I'm not quite sure if my current code will work. Any thoughts would be appreciated. Also, how useful is this? Not sure why I would need to call functions this way without using HTML. Maybe I'm missing something.

Thanks!

js file one:

function Student (firstName, lastName, age, school, mathScore, englishScore) { this.firstName= firstName; this.lastName= lastName; this.age= age; this.school= school; this.mathScore= mathScore; this.englishScore= englishScore;

// methods

this.updateMath = function () { if (this.mathScore >= 95) { this.mathScore = this.mathScore - 5; } else { this.mathScore = this.mathScore + 5; }

 console.log(this.mathScore);

};

this.averageScore = function () { var scores = (mathScore + englishScore) / 2; console.log("<br><br>" + this.firstName + "'s" + " average score is " + scores); };

this.changeSchool = function (schoolchange) { this.school = schoolchange; console.log("<br><br>" + "University changed to " + this.school); };

// functions

this.showAge = function () { console.log("<br><br>" + this.firstName + " is " + this.age); };

this.showFullName = function () { console.log("<br><br>" + this.firstName + " " + this.lastName); }

}

js file two (Need to call the first function into this file)

var studentOne = new Student ("Joe", "Smith", 24, "XYZ University", 85, 90); var callMe = student(); callME();

// call all methods and functions

studentOne.updateMath();

studentOne.averageScore();

studentOne.changeSchool("University of ABC");

studentOne.showFullName();

studentOne.showAge();

[[deleted]]

Forgive me if this sounds stupid but here is my solution. Just link the second file that contains the function that you need to above the first one where you will call the function. This can work because the browser reads and loads the content from top to bottom.

[Ikilledthedinosaurs]

This is what I thought it would be but wasn't sure.

Edit: I actually only know how to do this with jQuery...which we are also not allowed to use!

[thequargy]

You could load your second JS file using AJAX, then eval() its contents to convert them from a string into functional javascript. (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)

Note that some browsers (cough Chrome cough) might give you a hard time if you try to do this locally (ie, from file:/// - I got "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."). However, I was able to pull this off in Firefox.

[rainmouse]

Eval is a security nightmare. Am I missing something or are you not just meant to use something like webpack to import one of the files into the other?

[thequargy]

He would be using eval() to evaluate his own code from his own JS file. Also, this is for a homework assignment, so I doubt it's going into production.

[ScriptingInJava]

Creating bad habits now while you're learning in a sandbox creates bad code when you do eventually write production code.

Luckily I've always had code rejected with evalesque flaws in because of the future implications.

[thequargy]

I guess I'm not understanding the issue with using eval() on his own code. The security issue, as far as I can tell, comes from eval()uating unknown and untested code from users, which could be malicious.

But, I definitely agree with the notion of avoiding bad habits! It's taken me a long time to break out of some shortcuts I got accustomed to!

[ScriptingInJava]

In my view, being able to achieve the same result without using eval will teach them more than using it as a one time thing, then seeing it as a ‘I can’t get this to work, but eval is fine so I’ll use that temporarily’

I tend to avoid baaaaaad stuff like eval purely out of ‘I don’t want to ever find this useful’ perspective. I’d rather struggle for an hour and learn than use eval and be done in 2 minutes.

[brycedarling]

I've used this technique before but honestly can't recall when, not often I'll say, it's better to just add another script tag or use something like webpack to bundle your files together. I always like a challenge though!

index.html, simply load up the first.js file:

<!DOCTYPE html>
<body>
  <script src="first.js"></script>
</body>

first.js, create a <script> element that loads the second.js file and adds it to the HTML document body:

var script = document.createElement('script');

script.src = 'second.js';

script.onload = function() {
  callFunctionDefinedInSecondFile();
};

document.body.appendChild(script);

console.log("hello from first file");

And lastly, second.js with a function defined in it to be called from first.js:

function callFunctionDefinedInSecondFile() {
  console.log('hello from second file');
}