In C I'm accustomed to do something like:
//MyHeaderFile.h
#define MY_CONSTANT 34
//MyMainFile.c
#include MyHeaderFile.h
int num = MY_CONSTANT;
I want do something in an html document like:
//MyJS.js
#define MY_SCRIPT <script>some javascript stuff </script>
//MyHTML.html
<html>
MY_SCRIPT
</html>
This html would execute whatever script code was defined as MY_SCRIPT. Basically What I want is to have multiple .html files reference the javascript code, all of them executing the same code defined in the .js file. It would just be nice to be able to change the code in the .js file once and have it affect all of the html files at once.
Any ideas?
Reference your JS file in a script element as such
<script src="(LOCATION OF JS FILE)"></script>
This will cause the Javascript code to execute when the element loads.
Check out this tutorial for more info
http://www.w3schools.com/tags/tag_script.asp
You can have many files as you want. For example in a file called "header.js" you can put this:
var MY_CONSTANT = 34;
And in your html file simply put the reference to that file:
<script type="text/javascript" src="header.js>
<script type="text/javascript">
//You can use MY_CONSTANT here
var myNumber = MY_CONSTANT;
</script>
You can have many files as you want, but be sure to put the header.js before another scripts
Related
I the defer attribute of the script tag in the <head> section of HTML files. This almost always means that I cannot run js functions in the HTML since the js file is only loaded after the HTML file has been loaded..
I have run into a situation where I needed to run a js function in my HTML file, but would not want to remove the defer attribute from the script tag because of other functions in the js file. I looked at the possibility of using async, but it also was not helpful.
Any idea on how this could be done... other than using defer? I would still like to keep the script tag in the head, but going that way would mean that I have no open (non-function based) instructions in the linked js file... which is not always ideal.
Here is a sample of the HTML file
temp.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="temp.js" defer></script>
<title>Defer et al</title>
</head>
<body>
<script>
runThisFunction('Home');
</script>
</body>
</html>
And here is a sample of the js file
temp.js
function runThisFunction(varin) {
console.log(varin);
}
If I remove the defer from the js file, the function will run; if I leave it there, or use async instead, the function will not run because it has not loaded yet.
Any assistance in this small issue will be appreciated.
The best way to do this would be to refactor your script to contain an entry point in a function, and run that function once the DOM loads. Instead of, for example
// temp.js
function runThisFunction(varin) {
console.log(varin);
}
document.querySelector('.foo').textContent = 'doing stuff';
// other code here
put all of the functionality that depends on the page being loaded into its own function:
// temp.js
function runThisFunction(varin) {
console.log(varin);
}
function init() {
document.querySelector('.foo').textContent = 'doing stuff';
// other code here
}
window.addEventListener('DOMContentLoaded', init);
This way, if you also remove the defer attribute, runThisFunction will be available immediately, but the other parts of your code won't run until the page is loaded.
What will happen if I click a XXX?
It seems I will be redirect to somewhere, but how does it determine where?
Somewhere in your JavaScript code, you should have a function that looks like this :
function handle_redirect() {
...
}
To find your JavaScript code, look for script tags, like this ...
<!-- INLINE JavaScript -->
<script type="text/javascript">
console.log("Inline JavaScript");
</script>
... or like this ...
<!-- an EXTERNAL external JavaScript file -->
<script type="text/javascript" src="assets/js/myscripts.js"></script>
If your handle_redirect function is defined inline, you should be able to find it just by searching for handle_redirect in the code of your webpage.
Usually, however, your JavaScript will be found in external JavaScript files. In that case, you need to search in the code of files that are linked to. So, if you see a script tag with a src eg. equal to assets/js/myscripts.js, just open the file assets/js/myscripts.js with your text editor OR your browser and look for a function that looks like function handle_redirect() { ... } there.
I have to use a plugin which bundles js files inside html files (gadgets). For one use case I need to drop and re-instantiate a gadget to run updated code.
So say I have foo.html:
<html>
<head>
<script src="foo.js"></script>
</head>
<body>...</body>
</html>
and foo.js which is the file being injected into my actual document's head:
alert("hello");
Problem is I can only cachebust the html file dynamically and declare my gadget as foo.html?x=123, but the JS file I'm after will still be foo.js so the browser will not re-run it.
Question:
Once a <script> tag is inserted into the document and run, is there any way to run it again without using a module-loader or eval?
Thanks!
You could wrap your code in your <script> tags in a function then call your function. This will allow you to call your code to be called multiple times. Like this:
<script>
function loaded(){
// JavaScript here
}
loaded();
</script>
</body>
For some reason the external .js file I am linking to isn't working. I am linking to it like so:
<script src="jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
I have tested jquery using a simple inline script to hide a paragraph of text when it is clicked on so the jquery library is present and working.
The jquery.js file is in the same folder as the index.php file that is calling it.
What am I doing wrong?
This is the code I have in the external .js file currently just to test it is working(it isn't):
$("document").ready(function(){
$("p").click(function(){
$("p").css("color", "red");
});
});
Problem 1
It looks like jquery.js contains the code you wrote that depends on jQuery.
You need to load jQuery before you try to use it.
Swap the order of the <script> elements.
Problem 2
$("document") will wait for <document> elements to be ready. HTML doesn't have such a thing. Lose the quotes to pass in the document object directly.
Better yet, forget about the explicit call to ready and just
jQuery(function () { /* your function */ });
This is a newbie question. I have two javascript and one html files. When I click on an image it goes to the first .js file and when it finnish to run all that code should go to the second .js file. But how can I connect the two functions that are in different files.
thanks
you need just to define the 2 js files in the HTML header page :
<script type="text/javascript" src="one.js"></script>
<script type="text/javascript" src="second.js"></script>
It doesn't matter what files the functions are in, you can call the second function from the first one.
You should also consider why you are separateing your functions into seperate files - in general, they should all be in as few files as possible.
Like so:
In file1.js:
var foo = function(){
bar();
};
In file2.js:
var bar = function(){
alert('hello');
};
You will have something like this,
in the html file:
<input type="button" name="" onclick="random1();" />
in the first js file:
function random1(){
// your code here
random2();
}
in the second js file:
function random2(){
//your code here
}