Multiple js files in an html page - javascript

I'm writing some codes in P5JS. And I want to add multiple JS files to my HTML page. But when I do that, only the last one is displayed on the page. How can I show all of them?! And how can I style each one? For example I want to show one of them on top of the page, then have some HTML files or texts or whatever, then another JS file below them. How can style them using CSS? I have already linked the CSS file to the HTML page.
The site didn't allow me to paste the code the way I wanted so I uploaded the picture here
Thanks..

You can put all of the js files either in the head section:
<html>
<head>
<script src=script1.js></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
or you can put it at the bottom of the file:
<html>
<head>
</head>
<body>
</body>
<script src=script1.js></script>
<script src=script2.js></script>
</html>

If you're going to add multiple p5js sketches to one HTML document you could create p5 instances to keep all variables out of the global scope of your page.
Example if the following was saved as 'sketch.js':
var sketch = function( p ) {
var x = 100;
var y = 100;
p.setup = function() {
p.createCanvas(700, 410);
};
p.draw = function() {
p.background(0);
p.fill(255);
p.rect(x,y,50,50);
};
};
var myp5 = new p5(sketch);
and then you would import the sketch and use it in a div in your HTML.
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="libraries/p5.js></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</style>
</head>
<body>
<div id="sketch"></div>
</body>
</html>
You would then repeat for other sketches. You can even have multiple p5js sketches in one js file.
With the code for your sketches and html this would probably be fairly quick to resolve.

Related

Dynamically reading text file into page

I'm trying to load a .txt file into my simple html page. I'm very noobish and all the code i got is stolen from stackoverflow.
The text file is in the same folder as the html file and contains some text that I'd like to have shown in a div and not just loaded in at the start but dynamically updated (in a 1 sec interval).
The Page that results from the code is just empty.
I am using Chrome 73.
I only use the html file and the txt file. No other files are in the folder.
<html>
<head>
<script type="text/javascript">
setInterval(read,1000);
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I don't know what's wrong with this code. Am I missing libraries? If you came up with a completely new code that would be appreciated as well.
Yes, you are missing the jQuery library. Try it like this and let me know:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
setTimeout(function(){read() },1000);
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Reference:
https://stackoverflow.com/a/24320973/1447509
See note in italics at very bottom of this article
what about a simple jQuery Load ?
$("#container").load("file.txt");
http://api.jquery.com/load/

How Should use external javascript library in jquery?

What's wrong in my initialization, when I trying to use external javascript library in jquery
and I want to get a custom value from my pages and then manipulate that value by using external javascript plugin and then return back new value(or replace with old value),
below is my code:
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script src="external-library.js"></script>
<script>
var OldValue;
var NewValue;
OldValue = $(".raw-Data").html();
NewValue = new External-function(OldValue);
$(document).ready(function() {
$(".result").text(NewValue);
});
</script>
</head>
<body>
<div class="raw-Data">1318781876406</div>
<div class="result"></div>
</body>
</html>
When I add my <script> section in my document <head> section like above code all things works correctly and I haven't any problem,
But the problem arise when I want to add <script> section in end of document before closing <body> tag
because Drupal CMS initializing javascript library in bottom of document.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="raw-Data">1318781876406</div>
<div class="result"></div>
<script src="jquery.js"></script>
<script src="External-Library.js"></script>
<script>
var OldValue;
var NewValue;
$(document).ready(function() {
OldValue = $(".raw-Data").html();
NewValue = new ExternalFunction(OldValue);
$(".result").text(NewValue);
});
</script>
</body>
</html>
I want to know what's the correct and compacted method to do this.
Thanks for any help or suggestion.
JS variable names / function cannot contain - sign.
the common naming convention used by javascript is camelCase
so that New-Value should become newValue
and External-Function should change to externalFunction
see javascript variable naming convention on w3schools for more information :
https://www.w3schools.com/js/js_conventions.asp

node-webkit: doesn't show active content?

I have a small nw.js app that alters the div section of the index.html page:
var myDiv = document.getElementById("outputSection");
var myImg = document.createElement("img");
myDiv.appendChild(myImg);
myImg.src = 'http://127.0.0.2:8080/prime_almost_full_00007.0001.png';
myImg.width = '256';
myImg.height = '256';
myImg.class = 'reel';
myImg.id = 'image';
myImg.setAttribute("data-images", 'http://127.0.0.2:8080/prime_almost_full_00007.####.png|0001..0250');
The HTML code I'm trying to mimic in my static example, which works, is:
<img src='http://127.0.0.2:8080/prime_almost_full_00007.0001.png'width='256' height='256' class='reel' id='image' data-images='http://127.0.0.2:8080/prime_almost_full_00007.####.png|0001..0021'>
I'm using the Jquery-reels library. At the top of my page, I include it thusly:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://code.vostrel.cz/jquery.reel.js' type='text/javascript'></script>
For some reason, while the image shows up with the first code snipped, it isn't interactive. My static page, which works is like this:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://code.vostrel.cz/jquery.reel.js' type='text/javascript'></script>
<head>
<title>Hi there</title>
</head>
<body>
<div>
<img src='http://127.0.0.2:8080/prime_almost_full_00007.0001.png'
width='256'
height='256'
class='reel'
id='image'
data-images='http://127.0.0.2:8080/prime_almost_full_00007.####.png|0001..0021'>
</div>
</body>
</html>
It's not clear to me why this is happening. Is it something about node-webkit?
EDIT: re-scanning doesn't seem to work:
myDiv.innerHTML = "<img src='http://127.0.0.2:8080/prime_almost_full_00007.0001.png' width='256' height='256' class='reel' id='image' data-images='http://127.0.0.2:8080/prime_almost_full_00007.####.png|0001..0021'>";
$.reel.scan();
When the page loads, the reel plugin automatically looks for elements with the attribute class="reel". See the annotated source for more info about this.
According to that documentation, since you are adding an element to the page after the page loads, you may need to call the $.reel.scan() function at the end of your javascript.

External JavaScript Not Running, does not write to document

I'm trying to use an external JavaScript file in order to write "Hello World" into a HTML page.
However for some reason it does not work, I tried the same function and commands inline and it worked, but not when it's using an external JavaScript file. The part I commented out in the JS file was the previous method I was trying to use. Those lines of could worked when I ran the script from the header, and inline. Thanks
Html file:
<html>
<head>
</head>
<body>
<p id="external">
<script type="text/javascript" src="hello.js">
externalFunction();
</script>
</p>
<script type="txt/javascript" src="hello.js"></script>
</body>
</html>
JavaScript file
function externalFunction()
{
var t2 = document.getElementById("external");
t2.innerHTML = "Hello World!!!"
/*document.getElementById("external").innerHTML =
"Hello World!!!";*/
}
In general, you want to place your JavaScript at the bottom of the page because it will normally reduce the display time of your page. You can find libraries imported in the header sometimes, but either way you need to declare your functions before you use them.
http://www.w3schools.com/js/js_whereto.asp
index.html
<!DOCTYPE html>
<html>
<head>
<!-- You could put this here and it would still work -->
<!-- But it is good practice to put it at the bottom -->
<!--<script src="hello.js"></script>-->
</head>
<body>
<p id="external">Hi</p>
<!-- This first -->
<script src="hello.js"></script>
<!-- Then you can call it -->
<script type="text/javascript">
externalFunction();
</script>
</body>
</html>
hello.js
function externalFunction() {
document.getElementById("external").innerHTML = "Hello World!!!";
}
Plunker here.
Hope this helps.
Script tags with SRC values do not run the contents. Split it to two script tags. One for the include, one for the function call. And make sure the include is before the call.
use onload eventListener to make it simple
<script>
window.onload = function() {
externalFunction();
}
</script>
You're trying to call the function before it has been loaded.
Place the load script above the declaration:
<html>
<head>
<script type="txt/javascript" src="hello.js"></script>
</head>
<body>
<p id="external">
<script type="text/javascript">
externalFunction();
</script>
</p>
</body>
</html>
Also you have a typo:
<script type="txt/javascript" src="hello.js"></script>
Should be:
<script type="text/javascript" src="hello.js"></script>
The script type needs to be "text/javascript" not "txt/javascript".

passing a variable (id) from html to external js file with functions

I'm novel with javascript, and I trying to develop a webpage with dynamics graphs using for that canvas, html 5 and javascript. I wouldn't like to mix html "code" with javascript code, so I decided to keep it separated and call from html the javascript functions. The fact is that when I try to pass my canvas Id to javascript function I'm making a mistake and I have no idea how to fix it. This is my html code:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Funciones.js">
window.onload = drawRectangulo('myCanvas');
</script>
</head>
<body>
<h1>Canvas Example:</h1>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
And my JavaScript file is like this:
function drawRectangulo(idCanvas)
{
var Canvas = document.getElementById('idCanvas');
var context = Canvas.getContext('2d');
context.fillRect(50,0,10,150);
}
I don't know if the call to drawRectangulo function on javascript file is right, and if I'm passing the canvas's id right: window.onload = drawRectangulo('myCanvas'); ¿How should I pass the Id from the html file to the js function?. Should I use: ('', "",) or should I create a new variable, initiate it with the canvas's id and pass it to the function? Am I processing good the variable id inside JavaScript function?
You need to do this:
window.onload = function () {
drawRectangulo('myCanvas');
}
Your code is calling drawRectangulo as soon as it runs, and assigning the result of the call (which is undefined) to window.onload.
Edit based on Dan's comment: you also need to change this:
document.getElementById('idCanvas');
to this:
document.getElementById(idCanvas);
Edit 2: You also need to separate your imported script from your inline script, like this:
<script type="text/javascript" language="javascript" src="Funciones.js"></script>
<script type="text/javascript">
window.onload = drawRectangulo('myCanvas');
</script>
A single <script> element can either import a script from another file, or define an inline script, or both. (That explains why moving your inline script elsewhere in your HTML made it work.)
I think this
var Canvas = document.getElementById('idCanvas');
should be
var Canvas = document.getElementById(idCanvas);
With those apostrophes there, you're not referencing the parameter.
I think I know why it doesn't work. I have made this change on html and now is working right:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Funciones.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
window.onload = function (){
drawRectangulo('myCanvas');
}
</script>
<h1>Canvas Example:</h1>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
I took out the window.onload from the header to the body and it worked. Thanks for your help anyway.

Categories

Resources