Make one all.js from various js files - javascript

I am making a website using PHP. I have various Javascript snippets in various pages and various Javascript files. I want to put them all in one .js file. How can I do that?

Copy them all into one file, in the order they were included within document.
If they were written correctly, there should be no problems. But there may be problems regarding some conflicts (like names of the variables) or cases, when the script was not meant to be executed on all pages (eg. assumes some container exists within HTML, but this container is only on some pages - thus on other pages the script may throw some errors or behave inappropriately).

With PHP you could just make a faux-javascript file, e.g. js.php and then include all the js files like:
<?php
include('foo.js');
include('bar.js');
Then reference this file from the main php page's html:
<script type="text/javascript" src="js.php"></script>

Another way is by inline js as
<script type="text/javascript">
<?php
include "one.js";
include "two.js";
?>
</script>
I also try to reduce js, css and use image sprite for background to reduce browser header requests.

Related

How to manage JavaScript(.js) files in web page if js files are bigger in numbers?

I have more that 15 (.js) files in my web page. I need to know is there any other and efficient way to manage java script(.js) files in an HTML or jsp page other than putting all .js files in script tag ?
There are a few different ways to do this, First one as mentioned is to combine them.. Another way is to user server side code to combine them during execution time.
SIMPLE PHP EXAMPLE: myscripts.php
<?php
header('Content-Type: application/javascript');
echo file_get_contents("scripts/script1.js");
echo file_get_contents("scripts/script2.js");
echo file_get_contents("scripts/script3.js");
echo file_get_contents("scripts/script4.js");
?>
By using the above method, you can still manage your scripts easily and have them appear as only one script in your site / page.. Simple use the above with something like
<script src="myscripts.php"></script>
If you do not have a server side language (which generally would mean this is not a hosted page), then you are very limited with options. So that would be the first one i would suggest.
Also,, forgot the one that google use.. Use a single script that includes the others by adding a script tag to the body of your page..
There are a few ways to optimize your website if you have too many js files.
Combining scripts into a single file
Minify scripts: this helps reducing file size
Using a script loader like Headjs
Ofcourse there are other approaches to solving this issue based on the specific scenario. I've just named a few which are common.

Minimize javascript code

I am only new to javascript. I am using minify to minimize load time of CSS and JS files. I also compress the javascript in my HTML document (functions) using jscompress I am wondering if it was possible to even minimize the functions? I am running ajax updates so in my HTML document I don't want my linked PHP files listed.
Is there a way to minimize the function codes found in the HTML using minify or another alternative method to do this? Thanks.
Yes, you can extract the javascript code found in your html pages into a separate file.
Wherever you are referencing php code like this <?php echo var_name ?> or something of that sort, send that as parameters into the appropriate "functions" in the new js file.
Now, process this newly created js file through the compression library.

How to add javascript to php page

I see a lot of script adding Javascript to their webpages in different ways and am trying to figure out the correct way to do it. For example, in the header of one of the php scripts I use it has this:
<script type="text/javascript" src="/javascriptfile.js"></script>
<script type="text/javascript">
var stuff = "file.php";
var ip_add = '32.42.42.442';
</script>
What I don't understand is why would you ever put the full javascript code in the header instead of just including it within a file. For example, why not move the javascript mentioned about into it's own file and just just use this in your header:
<script type="text/javascript" src="/javascriptfile.js"></script>
<script type="text/javascript" src="/javascriptfile2.js"></script>
Are there certain times you should have the full javascript displayed in the page source instead of just linking to it in its own javascript file?
What I don't understand is why would you ever put the full javascript code in the header instead of just including it within a file.
It costs you caching. This is a long term penalty. The impact of that depends on how often the script will be used by the browser
It saves you an HTTP request. This is a short term bonus. It saves you a bit of time when loading the script in the first place.
This has nothing to do with PHP though. It applies to any HTML document.
Some of this is "legacy". At one point, you HAD to put <script> tags in the <head> portion of your markup, and so this is where most examples put it.
If you add a src reference to an external file, you can reuse the script as a resource on other pages that call for this. If you are using the same script all over the place, put it in a "js" directory and the browser won't fetch a new copy each time. This helps with bandwidth.
If, however, you add the raw script to your page, the whole page (minus images and other "embedded" content) will arrive in one thread. This helps with load times.
Unless you're expecting 10,000+ pageviews in a short space of time, I wouldn't worry too much either way.
Oh, and one other thing to consider: http://developer.yahoo.com/performance/rules.html#js_bottom -- why you should put your scripts at the bottom of your document.
I totally agree with #Quentin. Additionally I would suggest putting your scripts in seperate .js files and include them - for reasons of structuring - not only in large projects.
One thing that could lead you to put the JS code into a .php file however could be if you need to generate code using PHP or if you want to use information that is e.g. pulled from a database directly like this:
<?php
$foo = getSomeInformation();
?>
<script type="text/javascript">
var someVar = <?=$foo?>;
</script>

Access function defined in separate .js file from a .js file

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>

Can a single javascript file be used by multiple html files?

I have a javascript file main.js and five html files 1.html,2.html,3.html,4.html,5.html
I want to access the javascript file main.as in all files .
I have used in all of the five but I'm not able to access it . Is it possible to share the .js file among the html files.
Plz reply,
Thanks in advance
Prashant Dubey
Yes, it is entirely possible. That's the point of being able to have a JS file instead of having to embed all the code in the HTML.
yes this is well possible. You merely have to include
<script type="text/javascript" src="main.js"></script>
in your HTML files, preferably near the bottom (for faster rendering). What have you done so far?
Yes. Totally possible.
Just reference it in all of the files e.g. by
<script type="text/javascript" src="Scripts/main.js"></script>
Yes, it is possible.
Probably there is something wrong with the way you access the javascript from your html. Show us the <script ...>...</script> part of your html.
Yes. Are you using the correct path to the main.js file in your html files?
Create separate javascript file with .js extension with all your function in it and
just include this javascript file in the head tag of all the html scripts u wanna use that in.
Like::
<html>
<head>
<script type="text/javascript" src="JavaScriptFilePath.js"></script>
</head>
<body>
<!-- use javascript -->
It can happen both ways..
a single html file can use multiple javascript file
2.a javascript file can be used in several html files.
In first case javascript file load can be conditional based on location, user preferences, time, age group, content restriction.
You can see good example when facebook loads its page. I loads number of javascritps.

Categories