I have recently got a chance to explore one famous JavaScript library; In that library, I have found one strange way of referring JavaScript library from HTML page.
The application folder structure looks like this,
index.html contains the reference of subroot.js;
index.html
<head>
<title>Index</title>
<script src="js/subroot.js"></script>
</head>
subroot.js only contains the following code (i.e.,the relative path of root.js)
subroot.js
../../js/root.js
When I try to run the index.html, i get syntax error in the first line of subroot.js
Questions:
Is it right way to refer another javascript library by its relative path?
If yes, Why I get error message on the web page?
JavaScript by itself doesn't support loading files or referring paths. You need a module loader of some kind to achieve what you want. With the new version of the standard (ECMAScript 6) there is something called "imports" which you might find useful. I have experience using JSPM and the SystemJS module loader, which makes it pretty easy to connect the dots.
However, without using any additional tools you should just inject another script tag in your HTML.
Just reference root.js in the HTMl file not in the Subroot.js file, you can't reference another .js file from a .js file as far as I know.
<script src="../js/root.js"></script>
See Link
write this in subroot.js file
var x = document.createElement('script');
x.src = '../../js/root.js';
document.getElementsByTagName("head")[0].appendChild(x);
Related
I'm programming a project using HTML and JavaScript. I access my js code with the following script tags:
<script src="js/monthChanger.js"></script>
However, when running my program in Edge & Google Chrame, I keep getting
this error.
Why is this happening? Looking at my file directories there doesn't seem to be anything wrong with the way I declared the function.
check out this article on absolute and relative paths
you probably want this:
<script src="./js/monthChanger.js"></script>
The ./ makes it relative to the current folder.
Alright, so it turns out my issue had nothing to do with HTML.
I didn't specify this in the OP, but I was also using a Django's framework in my project. I had mistakenly assumed that static fields such as css, js, and images would be called the same way they are called in normal html files. However, after reading django's documentation on managing static files, I realize that this is not the case. I follow django's instructions and was able to get my code working.
I have 3 files, style.css, logic.js and container.html, while developing I need this files to exist separate, but when I am done, I'm searching for a tool that merges referenced css and js files into the HTML file:
<script src="./script/main.js"></script>
will turn into:
<script> ...code... </script>
and the same with CSS.
Is this possible? I first though this would be able with webpack, but the idea from webpack is not directly copying the content from the referenced files into the HTML file. Don't know if relevant, but I save my project on git and would like to run this build on bamboo, result of building my whole project should be one html file where all the code is inside, not being referenced, I could not find something that would do that?
Well a quick Google search gives me:
html-inline
web-combiner
I have a web applictaion which use has the following folder structure
application_root
js
in the html, I refer the js like
<script src="../js/****"></script>
everything is file if I start the html page using file:///protocol, but when I use the web server, like http://loclahost:6000/application_root, I found the js cannot be loaded correctly.
How to solve this issue?
You need to start your path with /: <script src="/js/some.js"></script>
Anyway, this can be problematic because if you use a virtual directory, / won't work since it's the root path.
For example: /js/some.js is http://localhost/js/some.js, and if your web site is hosted in a virtual directory like http://localhost/myapp/js/some.js this approach won't work.
If you find above case part of your issue, you might need to use server-side code to get your application root (i.e. /myapp/) so you can concatenate /myapp/ to js/some.js and get the right URI.
Is there anyway of importing multiple javascript files in HTML without having to specify each file?
<script src="js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>
ie. can I specify something like js/toolkit/* ?
I have 50+ javascript files that i have to import, and to specify each file seems very time consuming.
Including a JavaScript file in another JavaScript file is common in web development.
Because many times we include the JavaScript file at run time on the behalf of some conditions.
So, we can achieve this using JavaScript as well as using jQuery.
Method 1: Use JavaScript to include another JavaScript file
Add the following function in your web page.
function loadScript(url)
{
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
head.appendChild(script);
}
just call the below loadScript function, where you want to include the js file.
loadScript('/js/jquery-1.7.min.js');
Method 2: Use jQuery to include another JavaScript file.
Add jQuery File in your webpage.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
Just call the getScript function functions.
jQuery(document).ready(function(){
$.getScript('/js/jquery-1.7.min.js');
});
How to include a JavaScript file in another JavaScript File
There's a way:
You can create a javascript function that takes the path as a parameter and creates these HTML lines:
<script src="js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>
And you'll just have to call this:
loadLib("toolkit/Toolkit");
loadLib("toolkit/Viewable");
loadLib("toolkit/Overlay");
But this is not recommended because the load time will be increased due to the number of HTTP requests.
You should better use something in the server side to put everything in the same file.
No you can't do it. And by the way this is not good idea to load all 50 separate files. Consider compressing them in one single script to improve performance and decrease page load time.
You can setup grunt to watch the folder of the scripts and concat/minify them into a single file, then you just have to include that in your HTML file.
You will need to specify each file for the browser to know what to retrieve, but depending on the IDE you are using, there may be shortcuts for doing this, (Visual Studios allows you to drag and drop script files into the html to add references).
During development, you want to do just as your doing by keeping the files separate for troubleshooting, but in production, as others have commented, its very good practice to minify your code and combine them into one file. That makes it only one call, and can reduce your overhead significantly.
I recommend you to use JSCompress. It will compress all your javascript code into one single javascript file.
import "./angular.min.js"
import "./jquery-3.6.0.min.js"
import "./app.js"
<script type="module" src="js/importJS.js"></script>
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.
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.
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.
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
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>