I have 3 files, an index.html, a Learner.js, and a bot.js. Right now, the bot.js is a regular js file that I load in the html file with <script> tags, and the Learner.js is a NodeJS file. The only reason I have this file is because I want to use a Neural Net library but it only works with NodeJS, not regular javascript, so how exactly would I reference any functions, varibles, etc. in my bot.js that exist in Learner.js, should I load the file using <script> tags, or what's the best way to go about this?
The answer is that its (potentially) complicated.
There are things that node.js can do that browser JavaScript cannot do (like have filesystem access), and things that the browser doesn't do (e.g. Buffer API, module system). Obviously the later can be brought to the browser by libraries, but on the former you're out of luck.
So the question is, what node-specific stuff does that library use? If its just require use webpack/browserify or a babel/rollup plugin. But you're going to have to comb through that library to see what its actually using and whether or not that would be present in the browser.
You can add it simply:
<script type="text/javascript" src="Learner.js"></script>
<script type="text/javascript" src="bot.js"></script>
But, if your Learner.js javascript file use some native node.js engine functions or simply require() calls, it wont work.
In this case, consider to try to use Browserify or similar tools, to allow run nodejs specific stuff into the browser.
All these tools have limitations, not all code can be executed browser side.
When it is not possible you have to implement a web service server in nodejs (for example using a REST api, JSON over RPC pattern, ...) to allow execute the code and get the result in the browser.
As long as both are JavaScript and have variables that have global scope, a variable from Learner.js can be used in bot.js is Learner.js is loaded before bot.js
<script type="text/javascript" src="Learner.js"></script>
<script type="text/javascript" src="bot.js"></script>
You could also use a property of window or (in the global scope) this to get the same effect.
But
When you are using node you'll have to make sure you are also running the node server and best way to get outputs are by sending json object by use of some API, and get that json response in bot.js
Related
I have developed a very simple Thunderbird extension. There is one simple .xul file which refers via script-tag to a .js file. In that javascript-file I am implementing an event listener on the compose-send-message event. When the send-button is clicked, I want to encrypt the message in the mail-body and replace it with that newly encrypted text before sending. Replacing text in the body-part of Thunderbird worked well, but I am not able to refer to another javascript file with a simple function call like
var encryptedData = encryption.encrypt(data);
for the file encryption.js, which exclusively handles the encryption of said email-text before sending. Both files are in the same directory, so normally they should be able to refer to each other, shouldn't they? But for me that reference never seems to work. Would you know what I can do to make it work as intended? I don't seem to be able to figure that one out by myself. Thanks in advance.
I don't have experience with add-ons for Thunderbird, but do with add-ons for Firefox. However, I believe the same mechanisms apply to Thunderbird.
You have two options (or perhaps more, that I am unaware of):
Include the needed extra javascript file in the xul file, before the main javascript file (or did you try this already?):
<script type="application/javascript" src="chrome://path/to/extra.js"/>
<script type="application/javascript" src="chrome://path/to/main.js"/>
Load the needed extra javascript file from inside the main javascript file, as a subscript, with the subscript loader service, through loadSubScript():
var mozIJSSubScriptLoader = Components.classes["#mozilla.org/moz/jssubscript-loader;1"]
.getService(Components.interfaces.mozIJSSubScriptLoader);
mozIJSSubScriptLoader.loadSubScript( 'chrome://path/to/extra.js', optionalScope, 'UTF-8' );
The optionalScope lets you load the scripts variables into a designated object. If omitted, the scripts variables will be loaded into the current scope of the loadSubScript() caller.
The charset argument is optional as well, by the way.
I'm struggling to get requireJS to work properly. Page is running fine, but I think I'm doing things in an oh-so wrong way.
For example, on page xzy I'm adding the following JavaScript at the end of the page (the JS must stay on the page for now, so no external js-files possible)
<script type="text/javascript" language="javascript">
//<![CDATA[
(function () {
require([
'async!http://maps.google.com/maps/api/js?v=3&sensor=false',
'maps/jquery.ui.map.full.min.js',
'maps/jquery.ui.map.extensions.min'
], function() {
// ... do stuff with Google Maps
}
);
}());
//]]>
</script>
Doing this makes google.map and the $.().gmap method globally available, which probably shouldn't be available globally.
Questions:
Should I convert this into a requireJS module? Why?
If so, will the module be available on other pages as well or do I just "re-define" on page 123 and the dependency files will already have been cached?
And finally - will I have to convert the code inside my require call into module.methods, which I then call via module_name.method_name(pass_some_parameters)?
Just looking at the JS:
http://maps.google.com/maps/api/js?v=3&sensor=false
You can see that window.google is a global. There's not much you can do about that without Google releasing an AMD version.
Your decision regarding should you create a module should firstly be a question of readability/maintainability of the JS code. Modules are (should be), readable, reusable chunks of code/reusable abstractions that the rest of your code can consume. You should also derive testing benefits from this - each module should be easier to test in isolation.
You can end up with many more JS files if you choose a modular approach, and you might think this leads to performance issues - i.e. multiple HTTP requests. But this is mitigated by using the RequireJS Optimiser to optimise your modules to a single file.
If you convert to a module, yes you can require it from other pages, and if your HTTP caching headers are set up, then the browser may choose to use a cached version, thus saving you a HTTP request (same caching heuristics apply if you've optimised every module into a single file).
If you re-define (I assume you mean copy and paste the code block), then those dependencies listed in the call to require should all be cached by the browser, and therefore instantly available (depending on your web server and its HTTP caching headers).
Finally, yes you may have to refactor the code a bit to expose the new module's API. If that means exposing a single object with methods, then that's what you should do. This process almost inevitably leads to better code though in my experience. As you've had to think more about what the module's purpose is, and this often leads to your breaking the coupling between pieces of code.
I have a basic webpage set up and I would like to use jQuery to send a single variable (user-generated) to a javascript script (external -- well not really, still on the server, just not embedded in the webpage). This script will do a bunch of stuff with the variable and spit out a large array of results. I then need to update my page with the results.
I've done something similar using AJAX to POST stuff to a PHP script, but how can this be done with a JS script?
well ... including your script using the following (as opposed to embedding it) will keep your source neat and clean:
<script src="yourscript.js" type="text/javascript"></script>
The file could contain a function which you then call from outside (ie, the actual page source). As JavaScript is executed on the client-side (ie, the browser), downloading the file is unavoidable (unless you take extreme measures like an apache::mod_js, or rewrite the function in PHP). Best to keep things simple and use the above.
<script type="text/javascript" src="path/javascript_file.js"></script>
I think this is more what Kaustubh means. You do not have to put the actual code blocks into the page, just reference it this way.
When the page loads it will also load the javascript file (clean)
you can then call the functions seamlessly.
I have defined the following module in MyModule.js:
MyModule.js:
MyModule = {
controller: {
paintCar: function(color){
//PAINTING PROCESS
}
},
tester: {
...
},
};
Then, I have another javascript file, other.js:
other.js:
MyModule.controller.paintCar('red');
My index.html
<body>
<script scr="MyModule.js"></script>
<script src="other.js"></script>
</body>
All these files are put under WebContent directory of Eclipse Dynamic Web Project.
In other.js when I try to run the above code, I got error "MyModule is not defined". Why?
You misspelt src here: <script scr="MyModule.js">. This would have been picked up by basic automated QA testing.
(Original answer before the theory was confirmed) Presumably, because you aren't loading the script files properly. Since you haven't shown us the code that does that (or even told us what environment you are using) it is hard to say exactly how you went wrong.
Assuming you are using client side JS in a webpage, your code should look something like:
<script src="MyModule.js"></script>
<script src="other.js"></script>
Order is significant. End tags are mandatory. Self-closing tag syntax is unacceptable (unless the document is served as application/xhtml+xml)
(This uses HTML 5 syntax. For HTML 4 / XHTML 1, add a type attribute. For HTML 3.2, add a language attribute)
You haven't mentioned your environment, but generally you have to ensure that the JavaScript in MyModule.js is executed before the JavaScript in other.js, because you need MyModule.js to set up the MyModule variable.
How you do it will vary by environment. In a web browser, you'd do that by putting in two script tags, first one for MyModule.js then the one for other.js (although frequently, for use on websites, you want to have a build process that combines your scripts into a single file to minimize HTTP requests). In NodeJS, there's the whole require mechanism.
Update based on your edit:
Looks like a typo:
<body>
<script scr="MyModule.js"></script>
^^-- here, they're transposed
<script src="other.js"></script>
</body>
If that typo isn't really in your file, then look to see that the files are where the web server expects, that the web server isn't being thrown by capitalisation, that sort of thing. Fundamentally, that's correct.
First, a caveat. The main script is not run in a webpage. I will be running the .js file in Windows using Windows Script Host.
The problem:
I would like to create a javascript "library" containing a number of objects, each with a number of functions. I expect this library will get rather large with time and would like to keep it in a separate javascript file (let's call it Library.js). I would like to access the objects from Library.js from another script (let's call this one User.js).
In essence, I am looking for something similar to the C/C++ "include" paradigm.
Is there anyway to implement this in javascript? (Remember, this is not web-based)
This page right here is the closest I could find. It talks about .wsf files which let you combine multiple scripts (that may be written in different languages) in one file.
For your question it should be something like:
user.wsf
<job id="IncludeExample">
<script language="JScript" src="library.js"/>
<script language="JScript">
<![CDATA[
// use your library functions here
]]>
</script>
</job>
There may be better ways, but I'm not a WSH expert.
I know this is an old question and it has been answered and accepted.
I know about .WSF files and how they work; they serve the purpose.
However, I've also found it handy to do the "inclusion" from within a pure .js file that runs in WSH. Here's my solution for that.
function includeFile (filename) {
var fso = new ActiveXObject ("Scripting.FileSystemObject");
var fileStream = fso.openTextFile (filename);
var fileData = fileStream.readAll();
fileStream.Close();
eval(fileData);
}
With that utility function defined, I can do this from within a javascript module:
includeFile("externalFile1.js");
includeFile("externalFile2.js");
includeFile("etc.js");
...and then I can invoke any of the functions or tickle any of the variables defined in those modules.
A similar technique works with .vbs files:
How do I include a common file in VBScript (similar to C #include)?
You can achieve your goal by using the Windows Scripting Host instead of a specific .js or .vbs file. More information can be found at the MSDN site.
From the link:
Windows script (*.wsf) file is a text
document containing Extensible Markup
Language (XML) code. It incorporates
several features that offer you
increased scripting flexibility.
Because Windows script files are not
engine-specific, they can contain
script from any Windows Script
compatible scripting engine. They act
as a container.
You would cal lthe file using the same syntax as a .js and .vbs file:
wscript.exe myScriptFile.wsf
UPDATED: Correction noted...