Access function defined in separate .js file from a .js file

Question

I've seen quite a few questions regarding loading a .js file into an HTML file, and I know how to do that. However, say I have the file "classlist.js." How can I go about using the classes defined in that javascript file in another javascript file? I keep seeing answers that suggest using the

<script type="text/javascript" src="filepath"></script>

syntax. When used in a .js file, though, it throws a syntax error on the "<" so I assume this code is invalid.

So, how would one utilize a function in a .js file that was defined in a separate .js file... that works, and is efficient (If there is one)?

EDIT: I'm going to clarify some thing for the future, since I'm still fairly new to Javascript, and it looks like there were a number of other factors I didn't even know came into play.

I had two .js files, one of which declared classes that were extensions of classes in the other file. I wanted to use the extended classes in a webpage, and I thought I had to load the originial classes into the second .js file, THEN load that .js file into the HTML file. I wasn't programming completely outside of HTML.

Sorry for any misunderstanding, hopefully this thread is helpful to somebody else in the future.

hvgotcodes · Accepted Answer · 2012-11-14 14:55:45Z

3

Assuming you are talking about javascript in a web browser, all js files are loading in an html file, typically index.html. You need to use the script tag to load the javascript in the proper order in that html file, not in the javascript file. So if file B requires the things in file A, you need to load file A first, meaning put the script tag that loads file A before the script tag that loads file B.

answered Nov 14, 2012 at 14:55

hvgotcodes

121k33 gold badges209 silver badges237 bronze badges

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

Comments

T.J. Crowder · Accepted Answer · 2012-11-14 15:00:03Z

3

Two answers:

Non Browser

If you're using JavaScript in a non-browser environment (NodeJS, RingoJS, SilkJS, Rhino, or any of a bunch of others), the answer depends on the environment — but many of these use the CommonJS require mechanism. E.g.:

// Get access to public symbols in foo.js
var foo = require("foo.js");

// Use the `bar` function exported by foo.js
foo.bar();

Browser

If you're using JavaScript in a browser, you put script tags like the one you quoted in the HTML, in the order in which they should be processed (so, scripts relying on things defined in other scripts should be included after the scripts they rely on).

If you want to maximize efficiency in terms of page load time, combine the scripts together on the server (probably also minifying/compressing/packing them) and use just the one script tag.

answered Nov 14, 2012 at 15:00

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

2 Comments

user20416 Over a year ago

The OP refers to an HTML file.

T.J. Crowder Over a year ago

@ZevSpitz: I'm sure that wasn't in the first version of this question, must have been added in the five-minute window. In any case, I answered both, just in case. :)

Ashwini Khare · Accepted Answer · 2012-11-14 15:00:58Z

0

The answers posted above should do the trick however since you mentioned doing it efficiently you can consider taking a look at javascript module based loaders like require js( http://requirejs.org/ ) based on AMD

answered Nov 14, 2012 at 15:00

Ashwini Khare

1,6756 gold badges20 silver badges37 bronze badges

Comments

user20416 · Accepted Answer · 2012-11-14 15:02:52Z

0

You have to put the reference to classlist.js in your HTML file (not your Javascript file), before any other SCRIPT element which requires it. For example, within the 'head' element:

<html>
<head>
  <script src="testclass.js"></script>
  <script src="file_using_testclass.js"></script>
  <script>
    var tc = new TestClass();
  </script>
</head>

edited Nov 14, 2012 at 15:02

user20416

15.5k9 gold badges76 silver badges149 bronze badges

answered Nov 14, 2012 at 14:57

Sajjan Sarkar

4,2576 gold badges42 silver badges54 bronze badges

Collectives™ on Stack Overflow

Access function defined in separate .js file from a .js file

4 Answers 4

Comments

Non Browser

Browser

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Non Browser

Browser

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related