Introduction to Javascript

In this article we will look at introduction to JavaScript which covers its history, how to add JavaScript to web pages and more.

 

Introduction

 

The World Wide Web (WWW) was introduced in the early 1990s. It was followed by the development of HTML which was used to create web pages. As HTML is only used to describe the content in a web page, developers were only able to create static web pages.

 

Users were not able to interact with the web pages. So, a programming language was necessary. Scripting languages were developed to create dynamic web pages that can respond to user events on a web page. Such a scripting language is JavaScript.

 

History of JavaScript

 

The first scripting language was introduced by Brendan Eich, a member of Netscape 2 group, in early 1996. It was introduced to provide dynamism and interactivity with the web pages. Its codename was Mocha, also called as LiveWire and even later called as LiveScript as the browser could interpret the code on the fly rather than compiling the code and then execute it.

 

When LiveScript was officially released, it was renamed to JavaScript due to the tremendous popularity of Sun Microsystem’s Java programming language. Although Java and JavaScript may appear to be similar both are very different. The way JavaScript used to refer the elements in a document became to be known as DOM level 0.

 

In the same year (1996), ECMA (European Computer Manufacturers Association) released a standard version of the JavaScript known as ECMAScript. Later in the same year (1996), Netscape 3 released JavaScript 1.1 following the ECMA standard.

 

In 1997, the ECMAScript standard was updated and Netscape 4 released a modified version, JavaScript 1.2. It was adopted in CSS 2 specification by W3C. Due to its popularity, in the same year (1997), Microsoft developed its own proprietary language, called JScript as a part of Internet Explorer 4.

 

Netscape in mid 1998, released a new version, JavaScript 1.3, based on their layered DOM. Netscape joined hands with a open source community to develop JavaScript 1.5, according to W3C specifications. JavaScript 1.4 was a server-side JavaScript.

 

In 1999, Microsoft introduced an updated version of JScript (equivalent to JavaScript 1.5) with more functionality, as part of Internet Explorer 5. The current version of ECMAScript standard is 5.1, released in 2011.

 

Inserting JavaScript Code

 

JavaScript code is executed within the web pages. So, your web page contains not only HTML tags but also statements (scripts) written using a scripting language like JavaScript.

 

There are two ways to include JavaScript in our web pages. One way is to include the JavaScript statements inside <script> and </script> tags. Below is the syntax for including JavaScript in <script> tags:

<script type="text/javascript">
    JavaScript code…
</script>

 

In the above code, the attribute type is used to specify which scripting language we are using to write the statements embedded within the <script> tags. There are many scripting languages among which JavaScript and VBScript are the popular ones. If no language is specified, by default the browser assumes JavaScript.

 

The <script> tags can be either included in the head section of the web page or in the body section of the web page. It is valid to specify multiple <script> blocks in a single web page. When there are multiple scripts, they are executed from top to bottom.

 

The second way to specify JavaScript in a web page is by writing the JavaScript statements in an external file and referencing them in a web page. The external file is a JavaScript source file which must end with .js extension. The syntax for referencing an external JavaScript source file is as follows:

<script type="text/javascript" src=”script.js”>
    JavaScript code...
</script>

 

In the above code, src attribute specifies the path to the external JavaScript source file. The path can be relative or absolute. Take care that no JavaScript statements should be written in between the <script> and </script> tags. If written, they will be ignored. Multiple <script> tags can be written to refer multiple external source files.

 

Which method to use for incorporating JavaScript code in a web page?

When the JavaScript code is less, embed the code inside <script> tags within a web page. Changes made to embedded JavaScript code are visible immediately as opposed to changes made to external JavaScript source file may not be visible immediately because sometimes the browser may cache the external JavaScript source file.

 

Maintaining JavaScript code in an external file has the following advantages:

• Makes HTML file cleaner and easy to understand.
• Same JavaScript file can be reused in many HTML files.
• JavaScript code remains hidden if it is not supported by the browser. 

 

Adding Comments

 

Comments are used for documenting purpose. Using comments is considered a good practice. The interpreter ignores comments when they are encountered. There are two types of comments available in JavaScript. They are line comments and block comments.

 

The syntax for line comment is as shown below:

// This is a line comment. This is used for writing single line comments.

 

The syntax for block comment is as shown below:

/*

This is block comment.

This is used to write multi-line comments.

*/

 

Browser Incompatibility

 

If JavaScript code is not supported by the browser, everything written in between the <script> and </script> tags is considered as plain text and is displayed in the browser. This type of behavior is undesirable. To overcome this, we can write the JavaScript code inside HTML comments as shown below:

<script type=”text/javascript”>
    <!--
        JavaScript code…
    -->
</script>

 

Another way to solve the problem is to include the JavaScript statements in an external file and add a reference to it using the src attribute of the <script> tag.

 

Instead of not doing anything, it will be more informative if the browser displays some sort of warning or error message. This can be achieved by using the <noscript> tag provided by HTML. Below example demonstrates the use of <noscript> tag:

<script type="text/javascript>
   <!--
      JavaScript code…
   -->
</script>
<noscript>
   Internet Explorer 4.0 or higher is required to view the web page. Upgrade your browser and try again.
</noscript>

 

The message in between the <noscript> and </noscript> tags is displayed only when the browser does not support JavaScript.

 

JavaScript Keywords

 

abstract	boolean	break	byte	case	catch
char	class	const	continue	debugger	default
delete	do	double	else	enum	export
extends	false	final	finally	float	for
function	goto	if	implements	import	in
instanceof	int	interface	long	native	new
null	package	private	protected	public	return
short	static	super	switch	synchronized	this
throw	throws	transient	true	try	typeof
var	void	volatile	while	with

 

 

Java Vs JavaScript

 

Although JavaScript was named after Java, the popular programming language in 90’s, it is quite different from Java. Java and JavaScript are similar regarding syntax and object-orientation concepts.

 

Below are few popular difference between Java and JavaScript:

1. Java is a pure object-oriented language while JavaScript is not.
2. Objects in Java are static i.e., members of an object cannot be changed at runtime. Objects in JavaScript are dynamic.
3. Java is strongly typed whereas JavaScript is loosely typed.
4. Java is loaded from compiled byte code whereas JavaScript is loaded as human-readable source code.
5. Java supports block based scoping whereas JavaScript supports function based scoping.
6. Objects in Java are class based whereas objects in JavaScript are prototype based.

 

Uses of JavaScript

 

JavaScript as a programming language has many uses. A non-exhaustive list of its uses is given below:

1. JavaScript is used for validating user input on client-side.
2. JavaScript is used for file handling and database connectivity on the server-side.
3. JavaScript can be used as an alternative to applets.
4. JavaScript is used to implement programming on client-side web documents.
5. JavaScript can be used to implement event driven programming.
6. Along with DOM, JavaScript can be used to develop DHTML (Dynamic HTML).