What Is JavaScript?

JavaScript is a programming language for the web. It is supported by most web browsers including Chrome, Firefox, Safari, internet Explorer, Edge, Opera, etc. Most mobile browsers for smart phones support JavaScript too.

It is primarily used to enhance web pages to provide for a more user friendly experience. These include dynamically updating web pages, user interface enhancements such as menus and dialog boxes, animations, 2D and 3D graphics, interactive maps, video players, and more. This mode of JavaScript usage in the web browser is also referred to as client-side javascript.

The Web Page Triad

When you consider the components that make up a web page, JavaScript forms the third component of the triad, HTML and CSS being the other two. HTML describes the page, including the text, graphics, etc. CSS is used to control and customize the look of the web page, including the colors, fonts, etc. JavaScript is used to add a dynamic component to the web page and make most elements on the page programmable.

History of JavaScript

The development of JavaScript began in 1995 at Netscape Communications, the makers of the Netscape browser. They realized that adding a “glue language” to enhance the web user experience would increase the user uptake. So they brought in Brendan Eich to embed the Scheme Programming language. However, since Java was, at the time, the hot new language of the web, they decided to make the language closer in syntax to Java. The result was JavaScript, with features of Scheme, the object orientation of SmallTalk and the syntax of Java. The first version of this language was actually named Mocha in May 1995, renamed to LiveScript in September 1995, and again renamed to JavaScript in December 1995.

In 1996, JavaScript was submitted to ECMA International for finalizing as a standard specification. In June 1997, the first official specification for the language was released as ECMA-262. The latest version of the language is ECMAScript 2017 which was released in June 2017.

What Can I Do With JavaScript?

JavaScript is a full-fledged programming language interpreter embedded inside your web browser. You can do anything in JavaScript that a regular language like Java allows. These include:

• Declare variables
• Store and retrieve values
• Define and invoke functions
• Define your own classes
• Load and use external modules
• Write event handlers that respond to user and other events
• And much more

The web browser loads a web page, parses the HTML and creates what is known as a Document Object Model (DOM) from the contents. The DOM presents a live view of the web page to your JavaScript code. Your code can then make updates to the DOM and have it presented instantly to the user. The browser also allows you to register your code to be notified on user interface events such as mouse movement, button click, etc. Using all these facilities, you can build cool little (and not so little) applications to serve whatever purpose you may choose.

How Does JavaScript Work?

When the web browser loads a web page, the HTML parser begins parsing the HTML code and creating the DOM. Whenever the parser encounters a CSS or JavaScript directive (inline or externally loaded), it gets handed over to the CSS parser or the JavaScript engine as required. The JavaScript engine loads external JavaScript files and inline code, but does not run the code immediately. It waits for the HTML and CSS parsing to complete. Once this is done, the JavaScript is executed in the order they were found on the web page: variables and functions are defined, function invocations are executed, event handlers are triggered, etc. These activities result in the DOM being updated by the JavaScript and is rendered instantly by the browser.

Loading JavaScript in a Webpage

The most common way to load JavaScript in a web page is to use the script HTML tag. Depending on your requirements, you can use one of the following methods.

• Load an external javascript file into a web page as follows:
• <script type="text/javascript" src="/path/to/javascript"></script>
• You can specify the complete URL if the javascript is from a different domain from the web page as follows:
• <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
• JavaScript can be directly embedded in the HTML. The following causes the web page to popup an alert box when it is loaded.
• <script type="text/javascript">
• alert("Page is loaded");
• </script>

Other than these methods there are ways of loading JavaScript code dynamically on demand. In fact, there are whole frameworks dedicated to loading and running JavaScript modules with proper dependencies resolved at run time. Discussion of these techniques must be deferred to an advanced article.

Some Sample JavaScript Code Snippets

Here are some simple JavaScript code samples to illustrate how easy it is to use on your web page.

• The following selects all bold elements in the document and sets the color of the first one to red.
• var elems = document.getElementsByTagName('b');
• elems[0].style.color = 'red';
• Want to change the image in an img tag? The following associates an event handler for the click event of a button.
• <img id="myImg" src="prev-image.png">
• <button onclick="document.getElementById('myImg').src='new-image.png'">Change Image</button>
• Update the text content of a paragraph (p) element? Set the innerHTML property of the element as shown:
• <p id="first-para">Hello World</p>
• <button onclick="document.getElementById('first-para').innerHTML = "Welcome to JavaScript!"'>Click me</button>

These code samples offer just a glimpse into what you can do using JavaScript on your web page. There are plenty of tutorials on the web to get you started.