Introduction to JavaScript
FREE     Duration: 10:34
Part of Course: Introductory D3 Course


  • JS stands for JavaScript
  • JavaScript controls the interaction with the document.
  • JavaScript can be inserted into an HTML document in four main places:
    1. Inline - within an HTML Element
    2. HTML Body - within the body section of an HTML Document
    3. HTML Head - within the head section of an HTML Document
    4. Linked File - a file that lives elsewhere (on the server or different server)
  • JavaScript variables are case sensitive
  • Semi-colons are important in JavaScript
  • Comments can be written as "//" or "/* .... */"
  • Double equals ("==") does a type conversion when checking for equality
  • Triple equals ("===") checks equality of type and of value (no type conversion)


Introduction to JavaScript

What is JavaScript?

JavaScript is a computer programming Language.

JavaScript was originally implemented as part of web browsers so that client scripts could interact with users.

If you think of HTML as describing the structure of the document and CSS as describing the look of the document, JavaScript controls the interaction with the document.

The most common uses of JavaScript are to write functions embedded in or included in the HTML of a page.

These functions then interact with the Document Object Model (the DOM).

A collection of these functions can be and are distributed as JavaScript Libraries.

jQuery, Prototype, MooTools, and D3 amongst others are example of JavaScript Libraries.

What JavaScript looks like

JavaScript can look like the following:

<script type="text/javascript">
  function showAlert() {
    var msg = 'This is a message';
    alert (msg);

As you can see:

The Script starts with a script tag.

Then a function called showAlert is defined.

Within this function a variable named msg is declared.

This variable is passed to a function named alert.

Then the function ends.

Finally, the function showAlert is called.

Brief History of JavaScript

JavaScript then called LiveScript was first shipped as part of the beta release of the Netscape Web browser called Navigator in September 1995.

Although it shares it's name with Java, the two languages are very different.

In December 1995, the name was changed to JavaScript from LiveScript.

Microsoft introduced JavaScript into it's own web browser, Internet Explorer, in August 1996.

In November 1996, Netscape submitted JavaScript to Ecma International for consideration as an industry standard.

It was accepted and the scripting language became a standard.

JavaScript, JScript and ActionScript are considered dialects of of ECMAScript.

As of today the Oracle Corporation owns the trademark to "JavaScript"

So when we talk about JavaScript 98% of the time we are really talking about ECMAScript.

The Structure of JavaScript Within an HTML Document

JavaScript can be inserted into an HTML document in four main places.

Inline - within an HTML Element

In the HTML Body - within the body section of an HTML Document

In the HTML Head - within the head section of an HTML Document


As a linked file specified in the HTML Head - this linked file can be on the same server or a different server.

Or for this tutorial, the linked files will live in the same folder on the same computer.

Let's take a look at the four ways to write JavaScript within an HTML document.

First do the inline:

<input type="button" value="Inline Hello" onClick="alert('Inline Hello');" />

Then the body element above it:

<script type="text/javascript">
  alert("Body Hello!");      

Then the head element:

<script type="text/javascript">
  alert("Head Hello!");      

Then the other file element:

<script src="otherfile.js" type="text/javascript" ></script>
alert("Other File Hello!");

The Syntax of JavaScript

The most basic JavaScript Syntax to be aware of is:

Case sensitivity:

var apples = 1;
var Apples = 2;
var appleS = 3;
apples === apples;
Apples === Apples;
appleS === appleS;
apples === Apples;
apples === appleS;

Semi colons are very important:

function temp() {
  return 1+2;

// vs

function temp() {

// second is treated as

function temp() {
  return; // <---- Automatic Semi-Colon injection


// is a comment

// This is also a comment:
/* asdf

Double equals vs triple equals.

That is the most basic JavaScript Syntax to be aware of as we get started.

As we go along we'll pick up much more of the JavaScript Syntax.

<< Back To D3 Screencast and Written Tutorials Index