Getting Started with JavaScript

JavaScript is a fascinating programming language used all over the place. The browser you're using to read this article is certainly using it. It's used server-side in Node.js applications, and even used in embedded devices. As much as people try to run from it JavaScript just keeps on showing up.

Why is this the case? I have no evidence to back up this claim. But if I had to guess it's mostly because of how lightweight it is and just how easy it is to learn. You don't need to compile it (unless it's TypeScript — more on that in a later post), it now runs basically everywhere. It's free to use. The list goes on and on. In fact you don't need any special tools to use it except for a browser. If you're reading this article, then you already have everything you need to get started right this second!

Let's get started!

Right click anywhere in the browser. Otherwise you can hit the "F12" key and it should work as well. You should see a window come up either at the bottom of the browser or in it's own window. It should look something like the following image.

Click to the right of the blue caret and type the following code into what's called the Console:

var message = "Hello world!";

Hit the "Enter" key and you should see...drumroll, please...the word undefined! Okay, not all that exciting. So, what all is in this little line of code? The keyword "var" tells the JavaScript interpreter that this is a variable. A variable is simply a named piece of data that allows us to reference it again later on whenever we may need it. The type of data we are using here is called a string. Next, simply enter in the variable you just set but without the keyword var. Like this:

message;

Now you should see your custom message show up in the Console output like the following image. What you just accomplished in this example was setting a variable (storing a value in memory) and then called to it later on in your code. It's a very basic example of reusability - a core tenet in programming . You could easily just keep putting in "Hello world!" all over the place where you need it, but why do that when you can store it in a variable?

Congratulations! You've officially written your first program. Next, let's make it a bit more robust. You can do simple calculations with JavaScript as well. Programming languages are particularly well suited for doing math for us. Write the following code in your console and see what happens. If you want to get rid of your previous code you can clear the console by clicking on the little circle with a line through it in the dev tools window.

Clear the console:

Type the following into your newly cleared console. We're going to both set the variable and then show the output right after that. To get dev tools to allow you to write more than one line of code at a time hold down the "Shift Key" and then hit "Enter" and it will go to the next line without submitting your code. Simply type in the variable name again along with the call to that variable, then hit "Enter", like this:

var sum = 1 + 2;
sum;

You should see the following output:

We're going to wrap this lesson up with an example that will probably make you feel like you're actually doing more than just basic tasks in JavaScript. We're going to take what we've covered today with variables and make it more interactive. In this example we'll use the built-in JavaScript function (don't get hung up on the word function, I'll cover this in much greater detail later on) called "prompt()" to actually allow us to input our own value to use. Remember to hit the "Shift Key + Enter" to keep working in one line of code. It's not a necessity but it makes our console code look cleaner.

Type the following lines into your console and hit the "Enter" key:

var userName = prompt("What is your name?");
if (userName != "")
{
    alert("Hello, " + userName);
}
else
{
    alert("Oops! You must enter your name.");
}

You should see a box pop up in the browser that looks like this:

Enter your name and the computer should respond:

Let's pick this apart piece by piece. You're already familiar with the "var" keyword, but the "prompt()" function in this example is new. What this is doing, as you could see when you hit Enter, is showing the user a pop up dialog that allows them to enter a value. This can be any value, a string, a boolean or a number value. A boolean simply means "true" or "false." We're using a string value here and when you entered your name you set your "userName" variable equal to the value you entered. This is a powerful concept because you just made your code interactive. You can build small games or do advanced calculations simply by changing this up to handle multiple inputs if you feel like it.

Summary

I hope this gives you a good start to your JavaScript learning journey. Keep in mind a few of the main things we've learned in this tutorial:

• How to use the browser Console

• The "var" keyword and setting variables

• Code reusability

• The "string" data type