I was trying to create a simple library and ran into problems. This is my html file:
`
<html>
<script src = 'p5.min.js'></script>
<script src = 'mosaic.js'></script>
<script src = 'sketch.js'></script>
<body>
<script>setMosaic(true)</script>
</body>
</html>
`
mosaic.js is the library I am creating.
The content of mosaic.js is :
`
p5.prototype._isMosaic = false;
p5.prototype.setMosaic = function(status){
this._isMosaic = status;
console.log('set worked');
};
`
If I call setMosaic from inside the as shown in the html file, it gives me a function not defined error. But I can call setMosaic() successfully from inside setup() or draw() of sketch.js. Calling setMosaic from outside the sketch works when I define setMosaic in /src/environment/environment.js and build p5.js again.
Is there a way to call setMosaic from outside the sketch?
EDIT (in response to the comment):
1) I'm trying to build a framework that can scale the sketch into multiple screens. So the person who writes the sketch has to do it the normal way, but my tool will be calling some functions that communicates with a server e.t.c. So I need to call these functions outside the sketch, but they should be bound to the p5 object (namespace) because the functions I write in turn will have to call some functions internal to p5js. This is my project.
2) Value is going to be affected per sketch.
The issue was solved by calling setMosaic as p5.prototype.setMosaic().
It was answered here.
Related
I'm doing a javascript course with FCC and use VSCode as my code editor. But to date, all my js code was contained in a single file. Obviously for any meaningful js development I need to create a collection of js files that work as a single unit.
To start exploring this I have a very simple setup of two js files, test-01.js and test-02.js, where test-01.js contains a call to a function which is defined in test-02.js. I first want to do this without any HTML or CSS files. Although that will also be a future requirement.
The first file test-01.js:
//test-01.js
let returnStr = "";
console.log("This is the calling program");
// Now call the function in test-02.js
returnStr = Display(10);
With future project complexity in mind, the second file test-02.js is in a sub-folder from the first file. .\folder-02\test-02.js:
//test-02.js
function Display(param = 0) {
console.log("This is the program called with parameter: ", param);
return "Back from Display";
};
I've unsuccessfully tried importing the function Display() from test-01.js into test-02.js.
I've unsuccessfully tried finding ways to modify files like:
package.json
jsconfig.json
setting.json
launch.json
I've unsuccessfully tried looking for sample projects on github and elsewhere.
I've unsuccessfully looked for answers in StackOverflow.
All to no avail. This should be a no brainer which should have been described in the vscode documentation but I cannot find it there. By now I have tried so many things that I've probably screwed up my development environment. I hope someone can help me out and point me in the right direction to resolve this.
Many thanks, Thomas.
JavaScript modules are the way to go when importing methods from one .js file and calling them in another .js file. There are many different ways to import and use modules in JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Here is an example for your situation:
First, lets import the main JavaScript file into the html document:
<head>
<!-- type="module" is necessary -->
<script type='module' src="test-01.js" defer></script>
</head>
Next, lets define the 'Display' function in folder-02/test-02.js:
function Display(param = 0) {
console.log("This is the program called with parameter: ", param);
return "Back from Display";
};
export default Display //exporting it to be imported into another js file
Lastly, lets set up test-01.js to import and call the previously defined function:
import Display from './folder-02/test-02.js';
let returnStr = "";
console.log("This is the calling program");
// Now call the function in test-02.js
returnStr = Display(10);
Very new to using html, I was wondering if it is possible to link a node file to HTML. I want to have a button which when clicked will run a function defined in the node file. I'm wondering if my node file has node packages if anything will go wrong. Anything helps!
I think you are trying to do something like the following: You have some code that is written to run in Node. Let's assume the code is contained in a file aModule.js. The question is, how do you invoke functions defined in that file from within the browser. And the second question is, will they run?
First, you can certainly import aModule.js into your browser just like any other javascript, using a script tag. Then you might be able to access the functions within the module, and they might run correctly in the browser. It all depends whether they were written with browser support in mind. I give an example below of one way (not the only way) that this can be done.
You will have to look at the particular code you are working with to see how you might be able to access it within the browser. Also, if the code is written to rely on features that are only available within node, you will have to do more work, probably modify the code, to get it to run.
At some point the "import" mechanism will be standardized so this will all get easier, but as of right now its a bit of a mess.
Here is an example of a module that will work in either node or in the browser.
// aModule.js - illustrates modularity that will work in browser or node
"use strict";
var aModule = {}; // In browser, this will put aModule into global context
// "Closure" stops other stuff from being put into global context in browser
(function () {
function getMessage() {
return "Hello";
}
// other internal code not intended to be exposed can go here...
// ...
// and here is how we expose our getMessage function
aModule.getMessage = getMessage;
})();
// If we are in node...
if (typeof module !== 'undefined' && module.exports) {
// Export our module for use in node
module.exports = aModule;
}
Here is how you access the functionality in node.js:
var aModule = require("./aModule.js");
console.log (aModule.getMessage());
And here is how you access it within the browser:
<!DOCTYPE html>
<html>
<head>
<title>Try out modularizing javascript in browser</title>
</head>
<body>
<h2>Try modularization...</h2>
<script src="aModule.js"></script>
<script>
alert(aModule.getMessage());
</script>
</body>
</html>
One more tip - take a look at tools like Browserify. These are designed to convert node code into a form that can run in browser. Your mileage may vary.
I have 2 Javascript files, a main.js which loads first and then a secondary.js which loads afterwards. What I am trying to do is create a global function in main.js which can be utilized on the pages where secondary.js is loaded.
Here's what I have in main.js:
var doSomething;
doSomething = function() {
//things to do
}
And then in my secondary.js:
var result = doSomething();
However, this is returning doSomething is not defined. I searched SO and found similar questions but was not able to find a solution that worked for me.
You are getting doSomething is not defined because doSomething is being created after secondary.js has been loaded, so it's not available and you are getting a reference error.
You need to control the order in which your code is getting executed.
How you accomplish this depends on how you are loading your JavaScript files. For example, let's say you are using script tags in your html file. You can have main.js load after secondary.js like this:
<script src="main.js"></script>
<script src="secondary.js"></script>
Here is my library code:
function simpleEdit(){
var cell = SpreadsheetApp.getActiveSheet().getActiveCell();
cell.setValue('Simple edit made by script');
// Calling a custom script function after doing edit
customfunc();
}
customfunc() is outside the library in other script but in same project.
Here is its code:
function customfunc() {
SpreadsheetApp.getActiveSheet().getRange('F2').setValue('Hi');
}
Script calling library function
function s()
{
Demog.simpleEdit();
}
Demog is the library identifier
Yes this works. If you have a library published with two script files in it. All the methods not marked as private will be accessible to script the is utilizing the library.
But to let you know getActiveSheet() or getActiveSpreadsheet() will not work in a library. Even if the script you published was contained in a spreadsheet. It will always return null.
I am dealing with this problem from quite a while, please suggest me a solution:
For android app development, I am using phonegap framework.
I have a async function readFromFile() which reads the json file (which is updated using a user data everytime) stored in SD card, and stores the text result into the global variable, Next I have a function populatePageContents() which reads the global variable, and populates the page's html from the json data.
I want the populatePageContents() function to be called after readFromFile() function has finished reading the file data into global variable.
I tried using someting like this:
<script type="text/javascript">
globalVariable = '';
readFromFile(); // Uses phonegap's file API to read file and puts result into global variable
setTimeout(function() { populatePageContents(JSON.parse(globalVariable)); } , 500);
</script>
The above method works sometimes, but not always. Please suggest some better use of callback functions. Thanks!
Please use callbacks for making it work everytime
U can use something like this:
readFromFile(function(data){
populatePageContents(JSON.parse(data));
});
And your readFromFile function should look like this :
readFromFile(callback){
/***read file phonegap code***//
callback();
}