At the moment, the files setup looks like this:
File Setup
in the merkur.html file I use this to go to the JS files:
<script src="../scripts/ui.js"></script>
<script src="../scripts/index.js"></script>
The JS is only working on the index.html, in the merkur.html I get the error: Error Message
Can somebody help me?
In your index.html file, keep the links to your JavaScript files as bellow.
<script src="scripts/ui.js"></script>
<script src="scripts/index.js"></script>
In your merkur.html file, keep the links to your JavaScript files as bellow.
<script src="../scripts/ui.js"></script>
<script src="../scripts/index.js"></script>
If you are still getting errors, you may have do something wrong in your JavaScript codes. Maybe you are trying to search for an HTML element which doesn't exist in your relevant HTML code.
Thanks and best regards!
You can use js files in any html document. The only one problem here is a path you wrote for merkur.html file.
So just read how to deal with path to files. Especially ../ & ./
Related
Reading answers on this topic, I got confused. (Lots of answers, each one saying the others are outdated, etc.)
Suppose I have words.txt file in the same directory as my index.html and script.js. The contents of the text file are comma separated words: "apple", "hello", ...
What is the modern way of browser-side local-page accessing/reading/parsing that text file?
Javascript runs in the browser on the client machine, and it cannot access the underlying file system. If I understood you correctly, you want to read and parse a file into some kind of an array. That's done on the server. On the server, there exists a file called words.txt, and you can make an API endpoint that will return the contents of a file.
However, you can make another .js for example words.js that will have an array of strings called words.
When loading scripts in html load words.js before myfile.js (myfile.js is your javascript), and you will be able to access words from myfile.js.
Example of how it's done:
index.html
<!DOCTYPE html>
<html>
<head>...</head>
<body>
...
<script src="words.js"></script> <!-- Loading words here -->
<script src="myfile.js"></script> <!-- Loading your script here -->
</body>
</html>
words.js
const words = ["apple", "hello",...];
myfile.js
words.forEach((word) => {/* Do something */});
A project like this becomes very complicated very fast because you need to load javascript files in the right order. Because of this bundlers exist, like webpack that will bundle your code and you won't have to worry about this stuff.
fetch() in combination with d3.js is pretty good at deciphering any csv file:
fetch("https://date.nager.at/PublicHoliday/Country/DE/2022/CSV")
.then(r=>r.text()).then(csv=>console.log(d3.csvParse(csv)));
<script src="https://d3js.org/d3.v7.min.js"></script>
Once the CSV has been parsed you can of course also list the values without the keys:
fetch("https://date.nager.at/PublicHoliday/Country/DE/2022/CSV")
.then(r=>r.text()).then(csv=>console.log(d3.csvParse(csv).map(o=>Object.values(o))));
<script src="https://d3js.org/d3.v7.min.js"></script>
I want to use this library : https://hello-week.vercel.app/
I'm having a hard time to understand how to use it. I know JS and I never used Typescript or Nodejs. I found the .js and .css of this library but it's seems not to work
"calendar.js:1 Uncaught ReferenceError: HelloWeek is not defined"
Can I included like a normal js file ?
Yes the installation guide is not really clear, here is how to get it done:
First of all this line is simply wrong
new Hello Week({
There should not be a space there, do this instead
new HelloWeek({
Also, you will need the language file. Ether host it in its particular directory hierarchy or use the langFolder option to specify where it is.
dist
-- langs
-- -- en.json
Finally, this dose not work when not in a server due to a CORS issue. Serve the files through a server and you will have it working.
You can find the basic usage in the Installation page of the docs. Just ensure to reference hello.week.min.js, hello.week.min.css and hello.week.theme.min.css. Typescript or Node.JS don't seem to be necessary.
Here is a quick HTML + JS example:
<link href="hello.week.min.css" rel="stylesheet" />
<link href="hello.week.theme.min.css" rel="stylesheet" />
<div class="calendar"></div>
<script type="text/javascript" src="hello.week.min.js"></script>
<script>
new HelloWeek({
selector: '.calendar'
});
</script>
I'm trying to access a file that I want to reference relative to a script file while using <script type="module">. Normally, without type="module", people seem to be looking up the script tag and using its src attribute to get the path, but this obviously isn't possible after using imports.
The scenario looks roughly like this:
File structure:
js/
script.js
other/
imported.js
index.html
index.html:
<html><head><script type="module" src="js/script.js"></script></head></html>
script.js
import "other/imported.js";
imported.js
// ??? should with some code magic become "js/other/imported.js" or similar
console.log("The path to this script is: " + "???");
I saw some thread somewhere where it was discussed that the reason document.currentScript is null when using type="module" is because they wanted to figure out a better alternative. I suppose this alternative is not yet available?
So, to recap, with the file structure above, how can one find the path to js/other/imported.js in that script dynamically?
To answer my own question almost 2 years later, there's now a thing called import.meta which is used to provide arbitrary information about the current module. In this case, import.meta.url would be the thing I was looking for.
You can read more on this MDN page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta
I have three js files for all of my webpages, and I have pre-defined sets of functions to call for each web page. Could I move all of these functions to a new js file which would make then calls to other functions in a different js file? I read about rloader at http://code.google.com/p/rloader/, but I am not sure if I could use it.
<script src="js/rootNameSpace.js"></script>
<script src="js/jquery-min.js"></script>
<script src="js/ui.js"></script>
<script src="js/form.js"></script>
<script type="text/javascript">
console.dir(com);
com.rela.form.helloWorld1();
com.rela.form.helloWorld2();
</script>
Yes. If you move the contents of the script tag to a file with the path "js/main.js" and then added a script
<script src="js/main.js"></script>
after the other scripts, it will be able to call the functions. Including an external script is equivalent to having the text from that script inline in the file.
Scripts can read the contents of previous scripts so having multiple scripts on the page is similar to concatenating them all into a single file, which means that if you add a script below the other scripts it will be able to "see" everything in the others
With regard to questions about rloader
rloader does lazy loading to pull in scripts when you need them.
For more on lazy loading
And you can learn about rloader from its site (I'm no expert on that)
For what its worth I would not recommend using rloader if you really only have 4 scripts on one page. Its overkill. If you're planning on having a much bigger project, then you can use it or the more popular requirejs to manage your scripts across pages.
If you have dynamic generated pages you can have different names/actions/controllers whatever.
Then you can
echo '<script type="text/javascript">$(document).ready(function(){'.$page_name.'();});</script>';
Then you can declare global functions in any JS file, yes you can have any number of JS files, and splited in any way you want, they are all global.
function name1(){...};
If you have a big application with many JS files you can split then into more files, in a single folder, then add a minify plugin to "collect" them in a single output file (or a JS builder).
rloader is a dynamic loading script, basically Injects JS files in your document (http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html). I don't recommend using it, except if you have a very big application and use a MVC http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/ that loads only the current module.
It is always better to put code in separate files (as far as they are less in size and count). This will allow to be cached by browser $(document).ready will keep you safe for other dom elements that are not loaded.
Create something like this:
<script src="js/rootNameSpace.js"></script>
<script src="js/jquery-min.js"></script>
<script src="js/ui.js"></script>
<script src="js/form.js"></script>
<script src="js/pages/some-page.js"></script>
some-page.js
$(document).ready(function(){
console.dir(com);
//call to function form.helloWorld1
com.relais.form.helloWorld1();
com.relais.form.helloWorld2();
});
A better option would be combine files (If they are common on each page). rootNameSpace.js, jquery-min.js, ui.js, form.js into a file say common.js. You can use Google Closure to do that.
<script src="js/common.js"></script>
<script src="js/pages/some-page.js"></script>
I am working on a project where I need to include somewhat around 10-15 .js files in the HTML head section directly like
<script type="text/javascript" src="http://localhost:9020/website1/wa/min/soundmanager2.js,vars.js,utils/md5.js,utils/utils.js></script>
what is the way I can give refrences correctly
the files I need to refre are in the same hierarchy like
1.....2,3
2.........4,5
3........6,7
I need to refer 1,4,7 please help.
somewhere I read this method what's it?
<script type="text/javascript" src="http://localhost:9020/wordplus/root/child/?b=scripts&f=soundmanager2.js,vars.js,utils/md5.js,utils/utils.js></script>
The example you posted looks exactly like the query string interface for the minify PHP library: http://github.com/mrclay/minify
Using it you use it in the fashion <script src="min/?b=path&f=script1.js,script2.js,ui/script3.js"></script>.
Where path is the path from your web root that you want it to look for scripts under.
I've used it before and I've found it quite effective. It concatenates, minifies, caches, and serves JS and CSS.
I'm sure there are other libraries to achieve the same effect, alternatively you can create a build script to concatenate and minify all your scripts and then deploy a single JS file to your site, in a single script tag.
It is not possible to load multiple javascript files in a single <script> element.
You have to have to have an individual <script> element for each script you are referencing..
<script type="text/javascript"
src="http://localhost:9020/wordplus/root/child/?b=scripts&f=soundmanager2.js"></script>
<script type="text/javascript"
src="http://localhost:9020/wordplus/root/child/?b=scripts&f=vars.js"></script>
I think you'll get what you need from dynamically loading external javascript files:
http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
The second line you posted requests scripts from the server dynamically. the b parameter of the request tells it you want scripts and the f parameter tells the server which files you want. Then it concatenates these into one file and sends that back to the user agent. You need server-side scripting to handle this; it is not something built into the URL specification.
http://localhost:9020/wordplus/root/child/
b=scripts
f=soundmanager2.js,vars.js,utils/md5.js,utils/utils.js
The simplest solution is just have one script tag per file as it will let you take advantage of caching:
<script src="http://localhost:9020/wordplus/root/child/soundmanager2.js"></script>
<script src="http://localhost:9020/wordplus/root/child/vars.js"></script>
<script src="http://localhost:9020/wordplus/root/child/utils/md5.js"></script>
<script src="http://localhost:9020/wordplus/root/child/utils/utils.js"></script>
Another solution is to use some JavaScript builder to join all your files, generating just one. The pros of this approach is that your result file will be "compressed" (minified). Some builders:
Google Closure Compiler (I like and use this since 2009).
YUI Compressor