JavaScript Event

Explain In-line JavaScript and External JavaScript

/0 Comments/in /by

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.

Online Training Tutorials

  • JavaScript EventJavaScript EventJavaScript Event : Imagine an interface where the only way to find out whether a key on the keyboard is being pressed is to read the current state of that key. To be able to react to […]
  • JavaScript Node.jsJavaScript Node.jsJavaScript Node.js, a program that allows you to apply your JavaScript skills outside of the browser. With it, you can build anything from small command line tools to HTTP servers that […]
  • JavaScript ScopeJavaScript ScopeJavaScript Scope refers to the variables that are available to a piece of code at a given time. A lack of understanding of scope can lead to frustrating debugging experiences. When a […]
  • JavaScript “this” KeywordJavaScript “this” KeywordIn JavaScript "this" Keyword, as in most object-oriented programming languages, this is a special keyword that is used within methods to refer to the object on which a method is being […]
  • JavaScript FunctionJavaScript FunctionThe definition expression defines a JavaScript function, and the value of such an expression is the newly defined function. In a sense, a function definition expression is a “function […]
  • JavaScript User InputJavaScript User InputJavaScript User Input : Clicks are powerful and easy and you can add an on Click event to pretty much any HTML element, but sometimes you need to be able to ask for input from the user and […]
  • JavaScript BooleanJavaScript BooleanJavaScript Boolean, It is often useful to have a value that distinguishes between only two possibilities, like “yes” and “no” or “on” and “off”. For this purpose, JavaScript has Boolean […]
  • JavaScript Interview Questions and AnswersJavaScript Interview Questions and AnswersJavascript is an interpreted language with a C like syntax. While many people brush the language off as nothing more than a browser scripting language, it actually supports many advanced […]