What is JavaScript, and why is it important?

JavaScript is a programming language used primarily by Web browsers to create a dynamic and interactive experience for the user. Most of the functions and applications that make the Internet indispensable to modern life are coded in some form of JavaScript.

The earliest incarnations of JavaScript were developed in the late 1990s for the Netscape Navigator Web browser. At the time, Web pages were static, offering little user interaction beyond clicking links and loading new pages. For the first time, JavaScript enabled animation, adaptive content and form validation on the page.

For many years, JavaScript only functioned on a limited number of browsers. Microsoft’s Internet Explorer, the largest browser base, did not support JavaScript until much later. Instead, Microsoft created its own proprietary client-side script called JScript. In the early days of Web development, programmers who wished to create dynamic websites were often forced to choose one browser family over the other. This was less than ideal because it made the Internet less universally accessible.

JavaScript did not become standardized and widely adopted until 1999. Even after standardization, browser compatibility remained an issue for over a decade.

How does JavaScipt work?

JavaScript is what is known as a client-side script. Most Web applications, such as a search engine, work because of an interaction between the user’s device (e.g. computer, phone or tablet) and a remote server. The software on the remote server sends information to the client (i.e. the user’s machine) and the software on the client side reads the information and renders a Web page on screen.

A client-side script is a programming language that performs its tasks entirely on the client’s machine and does not need to interact with the server to function. For instance, if you have a Web page loaded on your computer and your Internet service provider goes down, you are still able to interact with the Web pages already loaded on your browser. You will not, however, be able to navigate to new Web pages or access any data located remotely.

Some of the dynamic website enhancements performed by JavaScript are:

  • Autocomplete
  • Loading new content or data onto the page without reloading the page
  • Rollover effects and dropdown menus
  • Animating page elements such as fading, resizing or relocating
  • Playing audio and video
  • Validating input from Web forms
  • Repairing browser compatibility issues

While JavaScript is a client-side language, some of its most powerful features involve asynchronous interaction with a remote server. Asynchronous simply means that JavaScript is able to communicate with the server in the background without interrupting the user interaction taking place in the foreground.

Take a search engine for example. Today, search engines almost all have an autocomplete function. The user begins typing a word into the search box and a list of possible search terms or phrases appears below. The experience is seamless. Suggested search terms appear without reloading the page.

In the background, JavaScript reads the letters as the user types, sends those letters to a remote server and the server sends suggestions back.

The software on the server side analyzes the words and runs algorithms to anticipate the user’s search term. Such programs are diabolically large and complex. The JavaScript on the client’s machine is as simple and small as possible so as not to slow down the user’s interaction. The communication between JavaScript and the server-side program is limited by the user’s bandwidth. This is why developers prioritize efficiency in JavaScript functions and make the amount of data communicated between the programs as small as possible.

Only once the user selects a search term does the entire page reload and produce the search results. Engines such as Google have reduced or eliminated the need to reload, even for that step. They simply produce results using the same asynchronous process.

The future of JavaScript

While JavaScript is not the only client-side scripting language on the Internet, it was one of the first and it is still the most widely used. Many developers believe that JavaScript is inefficient and finicky, so they have made many improvements to the language over the years. Enterprising programmers have created JavaScript libraries – more concise languages constructed from the building blocks of JavaScript that are less complex and can be targeted for specific applications.

For instance, JQuery is a JavaScript library that simplifies and expands many of JavaScript’s animation and interactive functions, while Backbone.js makes responsive design easier.
JavaScript has become integral to the Internet experience as developers build increased interaction and complexity into their applications. Search engines, ecommerce, content management systems, responsive design, social media and phone apps would not be possible without it.

A high-level definition

JavaScript is a programming language that allows you to implement complex things on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, or interactive maps, or animated 2D/3D graphics, or scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area.

  • HTML is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.
  • CSS is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.
  • JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)

The three layers build on top of one another nicely. Let’s take a simple text label as an example. We can mark it up using HTML to give it structure and purpose:

What is JavaScript doing on your page?

Here we’ll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.

Let’s briefly recap the story of what happens when you load a web page in a browser (first talked about in our How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).

The JavaScript is executed by the browser’s JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.

This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS was there to affect, then errors would occur.

Browser security

Each browser tab is its own separate bucket for running code in (these buckets are called “execution environments” in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.

JavaScript running order

When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let’s return to the block of JavaScript we saw in our first example:

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updateName() code block (lines 5–8) is run. The updateName() code block (these types of reusable code block are called “functions”) asks the user for a new name, and then inserts that name into the paragraph to update the display.

If you swapped the order of the first two lines of code, it would no longer work — instead, you’d get an error returned in the browser developer console — TypeError: para is undefined. This means that the para object does not exist yet, so we can’t add an event listener to it.

Note: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.

Interpreted versus compiled code

You might hear the terms interpreted and compiled in the context of programming. JavaScript is an interpreted language — the code is run from top to bottom and the result of running the code is immediately returned. You don’t have to transform the code into a different form before the browser runs it.

Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example C/C++ are compiled into assembly language that is then run by the computer.

Both approaches have different advantages, which we won’t discuss at this point.

Server-side versus client-side code

You might also hear the terms server-side and client-side code, specially in the context of web development. Client-side code is code that is run on the user’s computer — when a web page is viewed, the page’s client-side code is downloaded, then run and displayed by the browser. In this JavaScript module we are explicitly talking about client-side JavaScript.

Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, and ASP.NET. And JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find more out about server-side JavaScript in our Dynamic Websites – Server-side programming topic.

The word dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, inserting data requested from the server into it, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.

A web page with no dynamically updating content is referred to as static — it just shows the same content all the time.