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.
Related
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.
Note: I have never used PHP in my life.
I have come to the point in my mobile web application that I need to find out of a file exists in a structure like:
-Folder
-SubFolder
-file.html
-SubFolder
-file.html
...
-Folder
-Subfolder
-file.html
...
I care to see if this html file exists for a certain subfolder so that if it does I can display its html contents.
I have written the rest of my mobile web application using solely html and javascript but from what I've read it seems this is not doable with javascript alone. ( :( )
So I have a few questions as I sit here looking up everything I need to implement this in PHP (since this is the most common thing I am seeing when looking up how to do this).
Currently all I have been using in this application (simple application) is
index.html
style.css
code.js
any image files I use or text files I read from using javascript
Would the PHP code go in the HTML file? Currently the way I have it set up is my index.html file calls a initialization() function that is called when the page loads, and the rest of the application is run from the code.js file that just updates the elements of the html file. How can I add this PHP to the HTML file to be run when I need it to? Can PHP go into a javascript file? Pretty much after a bunch of logic in the JS file I get to a point where I decide if I need to or not need to search the file structure for a file.
So now on the actual code on how to do it in PHP, from what I've found..
<?php
$filename = '/path/to/foo.txt';
if (file_exists($filename)) {
echo "The file $filename exists";
} else {
echo "The file $filename does not exist";
}
?>
I pulled that from php.net. One thing about my folder structure is I will know the paths of the files ahead of time. So I feel like it may be easy to follow that format and see if file_exists($filename). My question is instead of echoing a string like in the example can I echo the actual path to the html file? Where does "echo" return the value?
Again this is all new to me, and if this is doable in any easier way (jquery?) I would love to know. My main concern is where to put this php code or how to call it when I want to and have it return something that I can use in my javascript code.
Thanks
I am currently working on cleaning up a little web app I've written in Mojolicious. As part of that cleanup I am separating out my javascript into the public directory from my html.ep files.
The problem I have though is I don't seem to be able to reference tag helpers any more, like 'url_for' or even referencing values in the stash such as '<% $stashvalue %>'.
Any idea's on how or if I can do this is very much appreciated.
cheers.
The stuff in the public directory is served statically, optimally by your webserver, not by Mojolicious or Plack, so that file does not get processed by Mojolicious, thus <% $stashvalue %> not meaning anything.
A solution would be to embed those parts of javascript that need to access server side variables in the mojo templates - rather ugly, but less code to be written.
Another one would be to make an ajax call from your javascript files, when they are loaded, and get the values sent by the server - more elegant, but more code to be written.
Another one that I can think of, would be to move those javascript files under a folder that gets processed by Mojolicious and include them parameterized - in your html.ep file that needs that js file, do :
<script type="text/javascript" src="http://example.com/url/served/by/mojo/?param1=<% $stashvalue %>¶m2=<% $stashvalue2 %>"></script>
And, in the controller that responds to /url/served/by/mojo/, render that js file, with the params replaced by the ones from the query. As an alternative, you could store/receive those params also on the session
As usually in Perl, there is more than one way to do it.
What I typically do is encapsulate most of my javascript in function calls or objects in pure javascript files. Then in my templates I include those pure javascript files and use the api that I built in those files from the template, interpolating the server-side variables into the arguments of the functions. You can peruse the code for Galileo to see several examples.
For example, see how this template passes stash values to this pure javascript file's functionality.
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.
There are essentially 2 places to define JavaScript functions in Grails, directly in a element on the GSP, and within a separate javascript source file under /web-app/js (for example, application.js). We have defined a commonly reused javascript function within application.js, but we also need to be able to generate parts of the function dynamically using groovy code. Unfortunately, ${some groovy code} does not appear to be processed within separate javascript source files.
Is the only way to do this by defining the javascript function within a script tag on a GSP page, or is there a more general solution? Obviously we could define the javascript function in a script tag within a template GSP file which would be reused, but there is a lot of push to keep our javascript functions defined all together in one place (i.e. the external javascript source file). This has performance benefits as well (the javascript source files are usually just downloaded once by each client's browser, instead of reloading the same javascript functions within the source of every html page they visit). I have toyed around with the idea of breaking the function up into static and dynamic pieces, putting the static ones in the external source and putting the dynamic ones in the template GSP, then gluing them together, but this seems like an unnecessary hack.
Any ideas?
(edit: It may sound like the idea of dynamically generating parts of a JavaScript function, which is then downloaded once and used over and over again by the client, would be a bad idea. However, the piece which is "dynamic" only changes perhaps once a week or month, and then only very slightly. Mostly we just want this piece generated off the database, even if only once, instead of hard coded.)
An easy solution to keep your JavaScript unobtrusive is to create a JavaScriptController and map its actions "/js/*" by adding this to your UrlMappings.groovy file:
"/js/$action"{
controller = "javascript"
}
then just create an action for each dynamic JS file you want, include in in your layout <HEAD>, and presto, you've got a JS file that you can insert Grails snippets into! :)
Note: I've found that there's currently a bug in Grails that doesn't map file extensions to content-types properly, so you'll need to include <%# page contentType="text/javascript; UTF-8" %> at the top of your view files.
This is a great solution. I would like to offer a suggestion to use somthing other then a mapping of "/js/$action" because this is no longer going to allow you to access you javascript files in /web-app/js/. All your javascript files would have to be moved to a the directory your controller would point to.
I would use something like
"/dynjs/$action"
This way you still can point to files in the /web-app/js/ files with out conflict and enjoy the benifits of gsp tags in javascript files
Please correct me if I'm wrong.
Or this... have a tag/service/dynamic method that lets tags write out their JS+CSS+whatever else, to a "cache" which is used to build the JS+CSS resources by a different controller.
Full concept here: [http://www.anyware.co.uk/2005/2009/01/19/an-idea-to-give-grails-tags-esp/][1]
If you want to use models created by the controller (that rendered HTML page which reference the Javascript in which you intend to use groovy code) in the Javascript code, then you can use this technique:
This technique does not need to change URL mappings and does not require you to create extra controller.
In your view GSP add javascript as follows:
<script type="text/javascript">
<g:render template="/javascript/yourJavascriptFile"/>
</script>
In views folder create a "javascript" folder. And create a file named:
_yourJavascriptFile.gsp
You can not only use all the GSP code in your _yourJavascriptFile.gsp file, but you can also use all the models created in your controller (that is rendering the view).
NOTE: There is nothing special about javascript folder. You can name it anything you want OR use an existing view folder. This is just a matter of organizing and identifying your HTML spitting GSP from Javascript spitting GSPs. Alternatively, you can use some naming conventions like: _something.js.gsp etc.
Name your scripts like this
/wherever/the/js/files/are/thescript.js.gsp
The gsp code inside will be rendered correctly by grails. This works, but I have no idea if it's considered a Good Idea or not.
There is another way - pass in the generated code into a function that expects closures. Those closures is generated by the program of course. The generated code is of course inlined/script-tagged in the gsp page.
it may or may not work depending on the nature of the code being generated. But i suspect it will work, and if it doesnt, minor tweaking to the coding style of your javascript will definitely make it work. Though, if these 'generated' code doesnt change much, this quite overkill imo.