Explain In-line JavaScript and External JavaScript
What is In-line JavaScript?
Everyone wants to know In-line JavaScript and External JavaScript how it works. In-line JavaScript to define a JavaScript block in your web page, simply use the following block of HTML. You can place these script blocks anywhere on the page that you wish, there are some rules and conventions however. If you are generating dynamic content as the page loads you will want the script blocks to appear where you want their output to be. For instance, if I wanted to say “Hello World!” I would want my script block to appear in the <body> area of my web page and not in the <head> section.
Unless your scripts are generating output as the page loads, good practice says that you should place your scripts at the very bottom of your HTML. The reason for this is that each time the browser encounters a <script> tag it has to pause, compile the script, execute the script, then continue on generating the page.
<script type='text/javascript'> // Your script goes here. </script>
This takes time so if you can get away with it, make sure the browser hits your scripts at the end of the page instead of the start.
External JavaScript
External JavaScript is where things get interesting. Any time you have a block of code which you will want to use on several different web pages you should place that block in an external JavaScript file. The clock on the upper right-hand corner of this page is a good example. The clock appears on almost every page on this site and so it is included in my “common.js” file. Every web-page on the site will load this file and so the clock is available to all of my web-pages.
There’s nothing fancy about an external JavaScript file. All it is, is a text file where you’ve put all your JavaScript. Basically everything that would ordinarily go between the <script> tags can go in your external file. Note that between was stressed, you cannot have the <script> </script> tags themselves in your external file or you will get errors. The biggest advantage to having an external JavaScript file is that once the file has been loaded, The script will hang around the browser’s cache which means if the JavaScript is loaded on one page then it’s almost a sure thing that the next page on the site the user visits will be able to load the file from the browser’s cache instead of having to reload it over the Internet (This is an incredibly fast and speedy process).
script type='text/javascript' src='common.js'></script>
Including an external file is basically the same as doing an in-line script, the only difference is that you specify a filename, and there’s no actual code between <script> and </script>.
When the browser encounters this block it will load common.js, evaluate it, and execute it. Like in-line scripts above you can place this block anywhere you need the script to be and like in-line scripts you should place these as close to the bottom of the web-page as you can get away with.
I will be adding more posts in JavaScript, so please bookmark the post for future reference too.