JavaScript is a very popular programming language or in simpler terms, a means to instruct the computer to do some things. It was introduced in 1995 as a way to add programs and interactivity to web pages in the Netscape Navigator browser. It has been since adopted to all major web browsers and you can use it to do really cool stuff on web pages!

JavaScript is a scripting language. A scripting language is basically a programming language that allows some control of a single or many software applications. In this case the application is the browser.

Most scripting languages allow two ways/modes of execution. Either as a script (code saved in a file that can be run) or on the console (one command at a time, where you can see the result of each command right after you enter it). JavaScript runs on the browser and most modern browsers have a JavaScript console. A console is basically a prompt for you to type in a command and run it.

In this tutorial we’ll show you how to use the JavaScript console of the Google Chrome browser. We recommend using Google Chrome to avoid any confusion later (we have included instructions in this tutorial to install it incase you use other web browsers currently).

Online sites for running JavaScript

Before we start installing chrome, we want to mention that there are a number of online platforms available such as jsconsole, jsbin, JavaScript Tester online, jsfiddle etc. If you don’t want to install things right in the beginning and want to get started right away, you can do that using these free online platforms.

We recommend you do this if you spend a lot of time on your mobile while learning. If you are using a laptop / computer, we recommend using the Google Chrome setup described next.

Installing Chrome

Chrome is available for download on its website Chrome Web Browser. Installation on Windows and OSX systems is pretty straightforward, just double-click the downloaded file to start installation.

For linux systems, you get an option of downloading a .deb or a .rpm package.

Ubuntu or Debian based distributions

Download the .deb package to your Downloads folder. Open up a terminal by pressing Ctrl + Alt + T and enter the following commands.

cd ~/Downloads/
sudo dpkg -i google-chrome-stable_current_*.deb

Fedora, openSUSE or RedHat based distributions

Download the .rpm package to your Downloads folder. Open up a terminal by pressing Ctrl + Alt + T and enter the following commands.

cd ~/Downloads/
sudo yum install ./google-chrome-stable_current_*.rpm

If you are using any other distribution, go to Linux Chromium Packages, to find a suitable package. Once you are done with the installation, it’s time to get started with the console.

Using the Console

JavaScript runs on every browser these days. There’s JavaScript running on this page as well!

To get to the Console, right click anywhere on the screen and click Inspect Element. Element inspector is a powerful tool that allows you to see the source code, CSS, JavaScript, images, icons, fonts used on a site.

Click on the Console tab. You should see a small window like this.

You can also use the Keyboard shortcut Ctrl + Shift + J (Cmd + Shift + J on OSX) to start the console.

Console with lots of error messages

If you see a lot of text in red colour, those are probably error messages from the JavaScript running on this page. Go ahead and right click anywhere on the console and click Clear console.

Cleared console

If it still shows some random error messages then go to a new tab and open the console.

Once you’re ready you’ll see a little arrow (>) with a text field. This is where you type your command. The console also gives suggestions for possible commands and keywords as you are typing. You can press Tab to autocomplete a command.

The console can be used for many purposes. For now, let’s use it as a simple calculator. Try typing 1 + 6 and press Enter and see what you get.

Simple arithmetic on the console

JavaScript knows math!

It turns out that the console can be used for a lot more that just basic calculations. Move on to the next tutorial to learn more!

alert and prompt functions

JavaScript has many built-in functions (we’ll learn about functions later on in this course. For now, think of functions as a set of lines of code which run everytime we use that function). Two of them are the alert and prompt.

You must have seen alert boxes popping up on web pages. Alert creates a pop up with a message and a button which says “Ok”. Prompt is similar to an alert box but it also has a text field where one can enter some text.

Try typing the following on the console and hit enter

alert("Hello World!");
prompt("What is your name??");

Always remember to put a semicolon ; at the end of every statement. It is not necessary but it is a good practice. JavaScript allows you to combine multiple functions together, so you can probably think what we’re going to do next. Combine alert and prompt!

Let’s say you want to welcome a user to your website. Try typing the following on the console and hit enter

alert("Welcome, " + prompt("What is your name?"));

What does this display?

Welcome, <whatever is entered in the prompt text box>

JavaScript decides that the prompt needs to run first. So if you run this line, you will see an alert box asking your name, and then if you enter let’s say, “Popeye”, you’ll see another alert box which says “Hello, Popeye”.