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
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>
Is there a decent way with static HTML/XHTML to create common header/footer files to be displayed on each page of a site? I know you can obviously do this with PHP or server side directives, but is there any way of doing this with absolutely no dependencies on the server stitching everything together for you?
Edit: All very good answers and was what I expected. HTML is static, period. No real way to change that without something running server side or client side. I've found that Server Side Includes seem to be my best option as they are very simple and don't require scripting.
There are three ways to do what you want
Server Script
This includes something like php, asp, jsp.... But you said no to that
Server Side Includes
Your server is serving up the pages so why not take advantage of the built in server side includes? Each server has its own way to do this, take advantage of it.
Client Side Include
This solutions has you calling back to the server after page has already been loaded on the client.
JQuery load() function can use for including common header and footer. Code should be like
<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>
You can find demo here
Since HTML does not have an "include" directive, I can think only of three workarounds
Frames
Javascript
CSS
A little comment on each of the methods.
Frames can be either standard frames or iFrames. Either way, you will have to specify a fixed height for them, so this might not be the solution you are looking for.
Javascript is a pretty broad subject and there probably exist many ways how one might use it to achieve the desired effect. Off the top of my head however I can think of two ways:
Full-blown AJAX request, which requests the header/footer and then places them in the right place of the page;
<script type="text/javascript" src="header.js"> which has something like this in it: document.write('My header goes here');
Doing it via CSS would be really an abuse. CSS has the content property which allows you to insert some HTML content, although it's not really intended to be used like this. Also I'm not sure about browser support for this construct.
The simplest way to do that is using plain HTML.
You can use one of these ways:
<embed type="text/html" src="header.html">
or:
<object name="foo" type="text/html" data="header.html"></object>
You can do it with javascript, and I don't think it needs to be that fancy.
If you have a header.js file and a footer.js.
Then the contents of header.js could be something like
document.write("<div class='header'>header content</div> etc...")
Remember to escape any nested quote characters in the string you are writing.
You could then call that from your static templates with
<script type="text/javascript" src="header.js"></script>
and similarly for the footer.js.
Note: I am not recommending this solution - it's a hack and has a number of drawbacks (poor for SEO and usability just for starters) - but it does meet the requirements of the questioner.
you can do this easily using jquery. no need of php for such a simple task.
just include this once in your webpage.
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
now use data-load on any element to call its contents from external html file
you just have to add line to your html code where you want the content to be placed.
example
<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>
The best solution is using a static site generator which has templating/includes support. I use Hammer for Mac, it is great. There's also Guard, a ruby gem that monitors file changes, compile sass, concatenate any files and probably does includes.
The most practical way is to use Server Side Include. It's very easy to implement and saves tons of work when you have more than a couple pages.
HTML frames, but it is not an ideal solution. You would essentially be accessing 3 separate HTML pages at once.
Your other option is to use AJAX I think.
You could use a task runner such as gulp or grunt.
There is an NPM gulp package that does file including on the fly and compiles the result into an output HTML file. You can even pass values through to your partials.
https://www.npmjs.com/package/gulp-file-include
<!DOCTYPE html>
<html>
<body>
##include('./header.html')
##include('./main.html')
</body>
</html>
an example of a gulp task:
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('html', function() {
return gulp.src(['./src/html/views/*.html'])
.pipe(fileInclude({
prefix: '##',
basepath: 'src/html'
}))
.pipe(gulp.dest('./build'));
});
You can try loading them via the client-side, like this:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="headerID"> <!-- your header --> </div>
<div id="pageID"> <!-- your header --> </div>
<div id="footerID"> <!-- your header --> </div>
<script>
$("#headerID").load("header.html");
$("#pageID").load("page.html");
$("#footerID").load("footer.html");
</script>
</body>
</html>
NOTE: the content will load from top to bottom and replace the content of the container you load it into.
No. Static HTML files don't change. You could potentially do this with some fancy Javascript AJAXy solution but that would be bad.
Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server, no, you'd need at least SSI.
The only way to include another file with just static HTML is an iframe. I wouldn't consider it a very good solution for headers and footers. If your server doesn't support PHP or SSI for some bizarre reason, you could use PHP and preprocess it locally before upload. I would consider that a better solution than iframes.
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>
Im new to Jquery but it turns out I used it quite a bit in my last application. My problem now is that its reloaded every single time one of my pages is loaded/reloaded. Is there an efficient way to reference it like we do a css or javascript file? for example:
<script type="text/javascript" language="javascript" src="js/behavior.js"></script>
I would really like to be able to do this with the jquery...because its quite a mess when you look at the source code. To avoid confusion: I already have jquery loaded. For example...this is already in my html:
<script src="js/jquery.min.js" type="text/javascript"></script>
What Im trying to cache is all of the code I've built off Jquery. For example:
$('#needDelete').slideDown('slow');
I have a bunch of these that need to be put into a file if that's even possible! Thanks!
jQuery is a JavaScript library. It consists of a single JavaScript file. All the documentation for it says to use <script src="..." to load it.
Update in response to edit:
The JavaScript you write that calls jQuery functions is still JavaScript and can be referenced from an external file just like any other JavaScript.
Yes, of course you can save your JavaScript code in a separate file (whether based on jQuery or not). Just keep your code separated and put it eg. in main.js file, then put a tag after jQuery script tag:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
Just for consistency and improved maintainability, it is easier if all the code is in one place than when it is often referenced within HTML like that:
show popup
Instead of the above you could do this in a separate JS file:
$('#a1').click(function(event){
event.preventDefault();
$('#popup').show();
}):
(of course the above code should be enclosed within onload or ondomready handler, so the code searches for elements after they become accessible - in case of jQuery and ondomready you can simply use: jQuery(function(){/* your code executed when DOM is ready */});)
I would refer jQuery from a CDN. This will allow the browser to do parallel download along with other resources from my domain, thus save some load time.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
The cdn version will be usually cached in your browser.
I don't get this question. What do you want?
I tried opening a file called custom.js. I dumped all of the jQuery
code into it and then referenced it. Nothing worked. Does there need
to be something additional in the reference page itself?
Why would you do that? You save some loading by decrease the number of different files, but the difference between one and two files is minimal.
Instead, do as Frederik Creemers suggested. Juse the jQuery-library at googleapis.com. The file is cached, meaning it will not load every single time a user visits your page. Only when the cache expires (not 100% sure how long this is). In addition, this library is used by many other sites, so you might be lucky and the user downloads it somewhere else and has it ready for use when going to your page.
Again, what you are asking (if I understood correctly) is pointless.
download jquery, and reference it like this:
<script src='jquery.js'></script>
Or, for an even better option, you can use google's cdn. This means that if a user comes to your site, and has already visited a site which uses the cdn, it will already have jquery cached.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
and for the best option, to protect against the possibility of downtime of the cdn, combine the local copy and the cdn like this:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
if(!window.jQuery){
script = document.createElement('script');
script.src='js/jquery.js';
document.head.appendChild(script)
}
</script>
I have a javascript source code file which is about 32kb, and has javascript code arranged in modules.
I was wondering if it would increase page load time if i put each module into a separate file as managing the current code of over 2000 lines is quite tedious and some times confusing
Short answer, yes and no. If you have a <script> tag pointing to each module file, then yes it will slow down the page due to the increased number of network calls to those files. The real answer is that's the way you should CODE it, but that's not the way you should serve it up to your user.
I recommend a tool called Minify, which will combine and minify all your JS files so you only need one <script src="/min/f=mod1.js,mod2.js,mod3.js" type="text/javascript"></script> tag
You can also manage "groups" of files, which are simply PHP arrays with an associative key you reference in the script src. For example:
'module_js' => array(
'//js/module1.js',
'//js/module2.js',
'//js/module3.js'
)
Then your script tag would look like:
<script src="/min/g=module_js" type="text/javascript"></script>
After Minify comines and minifies your code, it will cache it on your server so subsequent requests will hit the cache file so the PHP won't need to process.
http://code.google.com/p/minify/