Introduction to JavaScript

JavaScript Definition

JavaScript is a client side scripting language developed by Netscape or use within HTML web pages. JavaScript is loosely based on Java and it is built into all the major modern browsers like Internet Explorer, Firefox, Chrome, Safari etc.

Features of JavaScript:

  • JavaScript is a lightweight, interpreted scripting language that is directly embedded into web pages.
  • It is used for creating network-centric applications.
  • It is an open and cross-platform scripting language.
  • It adds interactivity to HTML pages.

Capabilities of JavaScript:

  • JavaScript acts as a programming tool for web designers.
  • They can add dynamic features into an HTML page.
  • JavaScript can react to events.
  • JavaScript can read and write HTML elements and validate input data.
  • JavaScript can be used to create cookies and much more.

Placement of JavaScript in a HTML File:

The following are theways to include JavaScript in the HTML file.

  • Script in <head>...</head> section.
  • Script in <body>...</body> section.
  • Script in and external file and then include in <head>...</head> section. Here the javaScript is an external file and the JavaScript file is linked with the HTML file in the header section. This is called external JavaScript.

Inline JavaScript:

In Inline JavaScript, the scripts can be placed anywhere on the page. The output of a page will appear where the script block is in the HTML file. for instance if the JavaScript blocks are blocks are placed in the header region of HTML document, then the dynamic content will appear in the header part of the web page and if the script blocks are at the body region of the HTML document, then the dynamic content will appear in the body part of the web page.

It is a good practice to place the scripts at the bottom of the HTML document, The reason 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. This takes time.

External JavaScript:

External JavaScript allows the reusse of same block of code on several different web pages. The JavaScript code will be written on a separate page and the web pages can make use of this code by including the page in the src attribute of the script tag.

The biggest advantage to have an external JavaScript file is that once the file has been loaded, the script will remain in the the browser's cache area. So the next time the page will be loaded from the browser's cache instead of having to reload it over the Internet. This enables faster execution.

Syntax:

<script type='text/javascript' src='filename.js'>
</script>

When the browser encounters this block it will load filename.js and execute it.

Advantages of external JavaScript:

  • It separates HTML and code.
  • It makes HTML and JavaScript easier to read and maintain.
  • Cached JavaScript files can speed up page loads.

Example: External javaScript

First Let's Create a javascript file and save it with .js file.

	function popup()
	{
		alert("Hello World")
	}

Now : Let's creat a HTML file then save it with .html extension and link the external javascript file(external.js that we have already created.

<html>
 <head> 
  <script src="external.js">
  </script>
 </head>
 <body>
  <input type="button" onclick="popup()" value="Click Me!">
 </body>
</html>