JavaScript is a programming language initially designed to interact with elements of web pages.

In web
browsers, JavaScript consists of three main parts:

 ECMAScript provides the core functionality.

 The Document Object Model (DOM) provides interfaces for interacting with elements on web
pages
 The Browser Object Model (BOM) provides the browser API for interacting with the web browser.

JavaScript allows you to add interactivity to a web page. Typically, you use JavaScript with HTML and CSS
to enhance a web page’s functionality, such as validating forms, creating interactive maps, and displaying
animated charts.

When a web page is loaded, i.e., after HTML and CSS have been downloaded, the JavaScript engine in the
web browser executes the JavaScript code. The JavaScript code then modifies the HTML and CSS to
update the user interface dynamically.

The JavaScript engine is a program that executes JavaScript code. In the beginning, JavaScript engines
were implemented as interpreters.

However, modern JavaScript engines are typically implemented as just-in-time compilers that compile
JavaScript code to bytecode for improved performance.

Client-side vs. Server-side JavaScript

When JavaScript is used on a web page, it is executed in web browsers. In this case, JavaScript works as a
client-side language.

JavaScript can run on both web browsers and servers. A popular JavaScript server-side environment
is Node.js. Unlike client-side JavaScript, server-side JavaScript executes on the server that allows you to
access databases, file systems, etc.

JavaScript History
In 1995, JavaScript was created by a Netscape developer named Brendan Eich. First, its name was Mocha.
And then, its name was changed to LiveScript.

Netscape decided to change LiveScript to JavaScript to leverage Java’s fame, which was popular. The
decision was made just before Netscape released its web browser product Netscape Navigator 2. As a
result, JavaScript entered version 1.0.

Netscape released JavaScript 1.1 in Netscape Navigator 3. In the meantime, Microsoft introduced a web
browser product called the Internet Explorer 3 (IE 3), which competed with Netscape. However, IE came
with its own JavaScript implementation called JScript. Microsoft used the name JScript to avoid possible
license issues with Netscape.

Hence, two different JavaScript versions were in the market:

 JavaScript in Netscape Navigator

 JScript in Internet Explorer.
JavaScript had no standards that governed its syntax and features. And the community decided that it
was time to standardize the language.

In 1997, JavaScript 1.1 was submitted to the European Computer Manufacturers Association (ECMA) as a

proposal. Technical Committee #39 (TC39) was assigned to standardize the language to make it a
general-purpose, cross-platform, and vendor-neutral scripting language.

TC39 came up with ECMA-262, a standard for defining a new scripting language named ECMAScript
(often pronounced Ek-ma-script).

After that, the International Organization for Standardization and International Electrotechnical
Commissions (ISO/IEC) adopted ECMAScript (ISO/IEC-16262).

JavaScript overview
To define a variable in JavaScript, you use var keyword. For example:

var x = 10;var y = 20;

Code language: JavaScript (javascript)

ES6 added a new way to declare a variable with the let keyword:

let x = 10;let y = 20;

There are differences between var and let. And it’s a good practice to use the let keyword to declare
variables.

To declare a function, you use the function keyword. The following example defines a function that
calculates the sum of two arguments:

function add( a, b ) {
return a + b;
}
Code language: JavaScript (javascript)

To call the add() function, you use the following syntax:

let result = add(x, y);

Code language: JavaScript (javascript)

To log the result into the console window of the web browser, you use the console.log() :

console.log(result);
Code language: JavaScript (javascript)

Now, you should see 30 in the console window.

JavaScript provides you with condition statements such as if-else and switch statements. For example:

let a = 20,
b = 30;
function divide(a, b) {
if(b == 0) {
throw 'Division by zero';
}
 return a / b;
}
Code language: JavaScript (javascript)

In the divide() function, we check whether the de-numerator (b) is zero. If yes, we throw an exception.
Otherwise, we return the result of a / b.

To declare an array, you use the following syntax:

let items = [];

Code language: JavaScript (javascript)

To declare an array with some initial elements, you specify the elements in the square brackets:

let items = [1, 2, 3];

Code language: JavaScript (javascript)

You can access the number of elements in the items array through its length property:

console.log(items.length); // 3
Code language: JavaScript (javascript)

To iterate over the elements of the items array, you use the for loop statement as follows:

for(let i = 0; i < items.length; i++) {

console.log(items[i]);
}
Code language: JavaScript (javascript)

Or use the for...of loop in ES6:

for(let item of items) {

console.log(item);
}
Code language: JavaScript (javascript)

JavaScript is an evolving language. It has many other features that you’ll learn in the following tutorials.

In this tutorial, you learned what JavaScript is and the overview of the JavaScript language.

JavaScript Code Editors

Summary: in this tutorial, you will learn about JavaScript code editors and how to install the Visual
Studio Code for coding JavaScript.

Popular JavaScript Code Editors

To edit JavaScript source code, you need a plain text editor such as Notepad on Windows. However, to
simplify and speed up typing of JavaScript code, you need a JavaScript code editor.

Besides basic editing features, a JavaScript code editor provides you with syntax highlighting, indentation,
autocomplete, and brace matching functionality. Some editors also allow you to debug JavaScript.

The following are some popular JavaScript code editors:

 Visual Studio Code

  Atom
 Notepad++
 Vim
 GNU Emacs

Note that all these JavaScript editors are free. As a matter of choice, we will use the Visual Studio Code.

Visual Studio Code

Visual Studio Code is a free and open-source code editor developed by Microsoft. Visual Studio Code is
often called VS Code.

VS Code works across platforms including Windows, Linux, and macOS.

VS Code is highly customizable. It allows you to change the theme, keyboard shortcuts, preferences. It has
lots of useful extensions that add extra functionality to the editor.

VS Code includes built-in support for JavaScript, which includes IntelliSense, debugging, formatting, code
navigation, refactoring, and many other advanced language features.

To learn all the features supported by VS code, you check it out the JavaScript in Visual Studio Code.

Download Visual Studio Code

To download the Visual Studio Code, you go to the following download link:

Download Visual Studio Code

Installing Visual Studio Code

Setting up the Visual Studio Code is easy and quick. It is a small download so that you can install it in a
few minutes.

A) Windows

To install the VS Code on Windows, you follow these steps:

 First, execute the installer from the downloaded file.

 Then, open the Visual Studio code.

Note that the installer will add the Visual Studio Code to your %PATH%. It will allow you to type the
command code . to launch the VS Code on that folder.

B) macOS

You follow these steps to install the VS Code on macOS:

 First, double-click on the downloaded archive to expands the contents.

 Then, drag Visual Studio Code.app to the Applications to make it available in the launchpad.

Installing the Live Server extension

The live server extension allows you to launch a development local server with the hot reload feature for
static pages. Once you change the JavaScript code, you don’t need to refresh the page to see the
changes.

To install the Live Server extension, you follow these steps:

 First, click the Extensions.

 Second, search for the Live Server and select the Live Server extension on the list.
 Finally, click the Install button.

In this tutorial, you have learned about the JavaScript code editor and how to install the Visual Studio
Code for editing JavaScript source code.
Web Development Tools
Summary: in this tutorial, you will learn how to open the Console tab of web development tools to view
the messages.

Web development tools allow you to test and debug the JavaScript code. Web development tools are
often called devtools.

Modern web browsers such as Google Chrome, Firefox, Edge, Safari, and Opera provide the devtools as
built-in features.

Generally, devtools allow you to work with a variety of web technologies such as HTML, CSS, DOM, and
JavaScript.

In this tutorial, you will learn how to open the Console tab of the devtools to view messages output by
JavaScript.

Google Chrome
First, open the devtools.html file.

The devtools.html file has the following JavaScript code:

<script>
console.log('Hello, devtools!');

// the following code causes an error

let greeting = msg;</script>
Code language: HTML, XML (xml)

Second, press F12 on Windows or Cmd+Opt+J if you are on Mac.

The devtools will open the Console tab by default. It will look like this:

The first message is 'Hello, DevTools!' which is the output of the following command:

console.log('Hello, DevTools!');
Code language: JavaScript (javascript)

To output the value of the variable, you use the following console.log() method. For example:
let message = 'Good Morning!';console.log(message);
Code language: JavaScript (javascript)

The second message that appears on the Console tab is an error.

Uncaught ReferenceError: msg is not defined

Code language: JavaScript (javascript)

This is because the variable msg has not been defined in the code but was referenced in the assignment.

Now, you can see both normal messages issued by the console.log() and the error messages. It’s enough
to start. We’ll dive into the devtools in the later tutorial.

Firefox and Edge

Typically, you open the Console tab of the devtools in Firefox and Edge using F12. They have similar user
interfaces.

Safari
If you are using Safari browser on Mac, you need to enable the Developer Menu first:
And then press Cmd+Opt+C to toggle the Console window:
In this tutorial, you have learned how to open the Console tab of the devtools for checking messages
issued by JavaScript code.

JavaScript Hello World Example

Summary: This tutorial helps you get started with JavaScript by showing you how to embed JavaScript
code into an HTML page.

To insert JavaScript into an HTML page, you use the <script> element. There are two ways to use the
<script> element in an HTML page:

 Embed JavaScript code directly into the HTML page.

 Reference an external JavaScript code file.

Embed JavaScript code in an HTML page

Placing JavaScript code inside the <script> element directly is not recommended and should be used only
for proof of concept or testing purposes.

The JavaScript code in the <script> element is interpreted from top to bottom. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
<script>
alert('Hello, World!');
</script>
</head>
<body>
</body>
</html>