Why people place Javascript in external files
- 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.jsfunction 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.jsfunction 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
Posts
9 comments:
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/
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>
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?
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
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
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?
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.
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 !!!
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.
Post a Comment