Introduction to Javascript

A first look at the world's most popular programming language.

Scroll down...




There will always come a time in the development of a web page when you want to modify the interface. Maybe that's to make a dropdown menu open up, to play a video when the user scrolls down, or to retrieve data asynchronously from a server. All of this is the domain of JavaScript, the most popular programming language in the world.

JavaScript for a long time got treated as the ugly duckling of programming languages — we had to learn it because it was in all the browsers, but everybody thought of it as a toy. Now that browsers have become more powerful and a significant amount of the web application has shifted browser-side, JavaScript has begun its emergence as (something like) a swan.

In this lesson, we'll look at where JavaScript came from and what it can do. You'll also get a whirlwind introduction to the language and a peek at what's coming up in the future.


Where JavaScript Came From

JavaScript comes from humble beginnings. It was originally developed at Netscape (anyone remember that browser?) by Brendan Eich. Back then, while they were fighting with Microsoft in the Browser Wars, they wanted to put together a browser-based scripting environment that could do things like run applets but still appeal to nonprofessional programmers.

The language was developed under the names Mocha and LiveScript, but it shipped with the Netscape Navigator browser in 1995 as "JavaScript" — largely, many believe, to piggyback on the popularity of Java, even though there is no direct link between them.

Regardless of where the name came from, it quickly became popular, and other browsers began to support it by necessity. In 1996, Microsoft's Internet Explorer began to support it, but their implementation differed from Netscape's. As an attempt at standardization, they submitted JavaScript to the ECMA standards organization to create an official standard.

Between 1997-1999, ECMA released three standards for JavaScript. The latest, version 5.1, was released in 2011. (You'll also hear people talk about ECMAScript 6, or ES6, which is the next standard on the horizon. People are very excited about it, because it adds a number of things they think will make their lives easier, and we’re going to cover it in this course!)

"JavaScript" is sometimes called "ECMAScript" because of its roots in their standardization and a small problem with licensing. More specifically, the term "JavaScript" is technically trademarked by the Oracle corporation and only licensed to Netscape and the Mozilla Foundation (which officially maintains the language). We'll just call it "JavaScript" like everyone else.

JavaScript had widespread adoption in browsers but wasn't particularly appreciated until the introduction of AJAX burst onto the scene around 2004. AJAX allows web pages to retrieve additional data without making full page refreshes. Imagine if you had to wait for the entire page to reload whenever you liked something on Facebook. Thanks to AJAX, we're spared from that nightmare universe.

The Browser Wars... Never again.

The Browser Wars

What Is JavaScript?

It can be difficult to describe a language in isolation, without contrasting it against another. Thus, we are somewhat forced to assail you with a modest volley of terminology. Don’t fear, we’ll keep it brief, and the deeper meaning of these terms will be revealed in time. For now, however, you must play the part of a colorblind person who is being told to remember that the sky is blue (of course, in our case, JavaScript is yellow, as I’m sure you already know). Terminology Ho!

JavaScript is a dynamic computer programming language with a monopoly on the web. It's called a "Prototype-based scripting language with dynamic typing and first-class functions." That basically means it can straddle the line between the object-oriented, functional, and imperative programming styles.

JavaScript has traditionally run in the browsers as an interpreted language, though these days it is often compiled "just in time" for performance reasons.

To understand the difference between an interpreted and a compiled language, imagine two stage actors. The first actor, the compiled actor, she sits down and reads her script over many times, committing it perfectly to memory. She makes sure that there are no typos, she checks that all the pages are there and in order, and she probably also refuses to speak out-of-character for an entire year. The interpreted actor, on the other hand, he doesn’t so much as glance at the script until opening night, and even then, he brings it out on stage with him. If one of the pages happens to be missing, he would run off of the stage, weeping uncontrollably.

So a compiled program is verified before it is run, shaking out all the errors ahead of time. Whereas an interpreted language just sorts of does it live.

Do It Live

What JavaScript Can Do

The most common use for JavaScript is to make a web page dynamic. This means embedding the script in the HTML document and allowing it to access the DOM—which stands for Document Object Model and is a programming-language-friendly representation of the web page. This means you can animate sections of the page (by changing their CSS properties), send HTTP data requests to the server (AJAX), validate form inputs (and prevent their submission), build interactive games, and track what the user is doing on the page.

Because JavaScript runs locally in the browser, it is quite fast. It lets you build almost seamlessly responsive web pages which interact smoothly with the user. Because it's embedded with the DOM, it gives you access to all of the events that the browser receives. In this way, it's almost like running desktop software -- you can follow scrolling, capture keystrokes, and respond to mouse clicks.

As you can probably tell, JavaScript gives you a lot of power to customize the user's experience with a web page. It unlocks a Pandora's Box of features that you will continue to discover long after you've become familiar with the basics of its use.

Although JavaScript was initially developed as a scripting language for the browser, it has since evolved dramatically. In 2009, Ryan Dahl created Node.js, which allows JavaScript to be run outside of the browser. The language could now be run on servers, serving the data to a browser also running JavaScript. The Yin and the Yang are both now JavaScript. All is JavaScript. Rejoice!

Being John JavaScript

Developers could now learn a single language to use for both front end and back end programming. This also allows for code to be shared across environments, all that hard work you did on your server doesn't have to be reimplemented from scratch in the browser.

The State of JavaScript

Coding JavaScript used to be a messy affair. It was very easy to devolve into spaghetti code and the asynchronous structure of the language made it easy to write code that was difficult to read. That lack of structure made it quite a pain.

In the last several years, the lessons learned from building server-side frameworks have been ported to the browser. Now we've got access to everything from light templates for structuring code to full-featured frameworks for generating the whole page. These frameworks help you organize your code and build single-page web apps which never have to retrieve a full HTML page from the server after the initial page load.

Much of the current momentum in JavaScript stems from frameworks like Angular.js, Ember.js, React.js, and so on. Because they don't rely on making multiple full-page refreshes (and instead update with tactical AJAX requests), the user experience is much snappier than with a traditional web app. They do, however, run into issues of speed on slower computers (because it's the computer's processor that runs all the code) and keeping data synchronized with the database.

As these issues are ironed out, JavaScript and its derivative frameworks will continue to see greater usage.

Final note: JavaScript is an ever evolving language. It now embraces a clear set of standards (thanks to the work put up by the TC39 committee) and is set to become a better language with each passing year. Take a look at the additional features that JavaScript now support under the standard ES6 or as, it's officially called, ES2015. You can start by skimming through resources here.

Where JavaScript Goes

JavaScript is similar to CSS in that you can either write it inline on the web page directly by putting it between <script> tags:

  alert( "Hello World!" );

...or import an external JavaScript file. To import an external file, add the src option to a <script> tag. It's most common to put this into the <head> tag of the HTML document:

<script src="/path/to/example.js"></script>

Unfortunately, this will run the script before the page is fully loaded. If you need to rely on the DOM being constructed, you can either use some special functions we'll talk about later (like $(document).ready()) or just put it right before the closing <body> tag, which accomplishes the same thing:

      // The DOM will be loaded by now
      alert("Hello, World!")

Playing with JavaScript

To actually run or play with JavaScript outside of the actual HTML page, you can either open up your browser's developer tools and march over to the "Console tab":

Developer tools Console tab

...or you can work with an online editor like JS Bin:

JS Bin

The Documentation

The Mozilla Developer Network (MDN) Reference guide provides a comprehensive documentation for the JavaScript language. You'll find yourself linking back here frequently.

Wrapping Up

JavaScript is essential when building any kind of interactive in-browser experience. Historically, that led to it being under-appreciated but we're currently amidst a JavaScript renaissance and there's no better time to get good at it.

The next several lessons will dive into the syntax so you can see what exactly this new beast is made of. Once you get up to speed on the basics, you'll get a chance to start using it to solve problems and messing with the DOM to your heart's content.

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Falling in Love with JavaScript