Saturday, June 27, 2009

Javascript in external file

Javascript can placed in external files. Of course JavaScript can be added to HTML files too, but in some situations it is better to include Javascript in external files. In this article you will find why to include Javascript in external files, how to put JavaScript in external file, one simple example and instructions for blogger users to use external Javascript.

Why people place Javascript in external files

    Computers & Programming > Programming
  • to use the same Javascript on many pages and don't want to rewrite Javascript code on every page, it is simpler to have one Javascript function code in one place (one .js file) then in many HTML files

  • to get more organized and easiest to maintain code

  • HTML page is smaller in size, making it load faster

  • separates the JavaScript from the HTML to get better Search Engine Optimization (SEO), Javascript will not get higher PageRank

  • they are forced to move js off the page (for example blogger users have problem to use javascript in blogger editor, or some similar restrictions)

How to add Javascript in external file

  • First, you must make .js file. File must have extension .js

  • write Javascript function (or functions) in file and save file

    Sample TestJs.js

    function Hello()
    {
    alert("Hello");
    }

  • now we can make a call to javascript function from HTML file, let's assume that the .js file is in the same directory as the HTML file in which we are going to call javascript function

    Sample HTML file : TestCall.html

    <html>
    <head>
    <script src="TestJs.js" type="text/javascript">
    </script>
    </head>
    <body>
    <input type="button" onclick="Hello()" value="Hello!">
    </body>
    </html>

  • that is it, if those two file are in same directory when user click on Hello button javascript Hello function (which is in js file) will be called from HTML file and will be executed


External Javascript in blogger post


Demonstration:



To use javascript inside blogger post you have follow next steps:

  • save javascript function in js file (like described in previous chapter)

    Sample TestJs.js

    function Hello()
    {
    alert("Hello");
    }

  • on blogspot (blogger) there is no option to upload js file (or file of any other type) so you need to find where to upload javascript file

  • you can find instructions how to upload javascript file by following this link, take a look at Google Groups chapter

  • in blogger post add code to use remote javascript

    Use this:
    <script src="[URL OF AN EXTERNAL SCRIPT]" type="text/javascript"></script>

    Example for uploaded javascript file on Google Groups:
    <script src="http://everything-about-blogging.googlegroups.com/web/TestJs.js?hl=en&gda=bUe-djsAAAATLYFRxG7MFqGWBWh2VvtrqIEbF7jzfKsOTBbDD3S6g8oRXZrtFiBTuJ69H91AzQAGRdr3QrylPkw2aRbXD_gF&gsc=CJY8-AsAAABni9lzDVHuoDw_bqXODZJz" type="text/javascript"></script>


  • add code in blogger post that call JavaScript function
    <input type="button" onclick="Hello()" value="Hello!">


  • now you have blogger post which call javascript function from external file


9 comments:

Neelan said...

Hi. Really helpful blog.
I found a jquery script for image preview. Can you help me how to implement this code in blogspot?

http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/

http://james.padolsey.com/demos/imgPreview/full/

Mark said...

Here is simple code example which use imgpreview plugin. You can copy and make simple htm file from this code and you will have effect. If it help you, could you link my blog from your blog? You can also follow my interesting webs blog if you are interested.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js.txt" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
$('ul#first a').imgPreview();
});

</script>
</head>
<body>


<ul id="first">
<li><a href="http://tbn3.google.com/images?q=tbn:ISUn9YRVlrUVMM:http://www3.waterstones.com/wat/images/special/mag/help_intro.jpg">The Sun</a></li>
</li>
</ul>

</body>
</html>

Neelan said...

http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js.txt

i re- uploaded this file and change the path. but not working :(

any suggestions?

Mark said...

You need to copy given code in notepad, save this as a file with .htm extension (for example TestImg.htm). If you a connected to a internet when you open TestImg.htm file with IE you will see that image effect is working.
After that I believe that you can make modifications to this code to work in blogger.

You don't need to upload file http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js.txt,
why not use this path?


For help about using jQuery in blogger visit:
jQuery on blogspot (blogger) post

Neelan said...

Hi Mark.
Yes i can use this path, but that file is not properly named as a javascript extension. Thats a text file. Look at the last word. that is
jquery.js.txt


http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js.txt

Neelan said...

Mark. Thank You very much. Its working now.

but i didnt understand how that .txt file extension. is that a javascript file or a text file?

Mark said...

Excellent :)

It is a javascript file but with a bad txt extension.

Extension is not relevant in this case. You can use any extension you want as long you have a good path to file in src attribute.
But convention is to use .js extension. One of the reasons for this convention is to human visitors could know that it is javascript file.

Anonymous said...

Hellow everybody, i have a question:
Recently, I made a slideshow to my blog by following a tutorial, slideshow requires javascript-code something like < script type="text/javascript" src="url" > I put the code into a Gadget but I have a question, it's better to put javascript-code in gadget or in source-blog: design -> edit html ?
Thank you !!!

Mark said...

To Ali:
My opinion it is better to put a code in gadget because it is easier to maintain (less work for you if one you decide to change something in code) then to put in desig --> edit HTML.