Learn How To Code Part I: Variables And Basic Data Types

Want to learn how to code but don't know where to start? We've got you covered. We'll be teaching you the basics all week, and here's your first lesson.

Previously we've provided you with some resources for learning to code and given you a broad overview of the process, but now it's time to get down to business: We're offering a short 101 course, step by step. You can't learn to code overnight (or in a week), but we've broken up the basics into a few lessons that will be released as the first four parts in our brand new Lifehacker Night School series.

Each lesson will be video-based (as you can see above), but we'll also provide you with text notes and files that you can refer to as well. Each lesson is designed to be a manageable chunk of information that you can digest in under 15 minutes (and often much less). Be sure to come back and visit us throughout the week to finish learning the basic.

Our first lesson is going to be very simple and consist of learning about basic variables and data types. For the lessons in this series, we're going to use JavaScript as a model because it's a syntax that's pretty easy to understand and it's something that anyone with a text editor and a web browser can use. Because it's an ECMA-based language, it makes understanding other ECMA-based languages (like ActionScript) much easier to learn. Even better, you'll find that knowing how to write JavaScript will make the transition to other object-oriented programming languages much easier. Basically, JavaScript is readily available to practically anyone with a computer and a browser, so we think it's a really good starting point. Once you have the basics down it should be easy to begin learning other languages.

Let's get started!

What Are Variables?

You can think of variables as labelled jars that store different types of data. While there are several kinds of variables, today we're only going to look at three:

String - A string variable is a string of alphanumeric characters and allowed symbols that are contained within quotation marks. For example, "Hello world, I'm 102 years old today!" is an example of a string. Strings can also be contained within single quotes, which is useful if you want to have a string with a quotation like this: '"I hate the snow," Laurel said.' Strings are basically used for storing text.

Number - A number variable couldn't be more straightforward because all number variables store are numbers. You don't store them within quotes like strings. Instead, numbers can just be written as they are. If you want to store the number 9 in a variable, you just write 9.

Boolean - A boolean variable is one of two things: true or false. This data type is kind of like an on and off switch, so you can ask true or false questions in your code. For example, you might ask "is the video currently playing?" The response you'd get would be a boolean variable. True would mean the video is currently playing and false would mean it is not.

So how do you putt a variable to your code (or declare a variable, as it's more traditionally called)? In JavaScript, all you need to do is this:

myVariable = "Hello world!";

To Var or Not to Var

In JavaScript, you can define a variable as myVariable = "something"; or var myVariable = "something";, the difference being the word var preceding the statement. When you're declaring variables in a script outside of a function, this distinction is pretty much irrelevant. When you're declaring a variable inside a function and do not use var this creates a global variable. Global variables can be accessed from anywhere in your code, whereas local variables (such as the ones defined in functions) can only be accessed within their own scope (e.g. if a variable is local to a function, only that function can use it). This is not an important distinction right this minute, but when we learn about functions later it'll be good to know.

There are a couple of things to notice here. First, the name myVariable. All programming languages have something called reserved words, which means you can't use them as variable names. What they varies, but if the name is sufficiently generic, there's a chance it could be a reserved word. To avoid using reserved words and screwing up your code, just decide on a naming scheme for your variables. I've put "my" in front of my example variable, but you'll probably want to come up with something else. Second, you'll notice a semicolon at the end of the line. A semicolon is like a period at the end of a sentence in many programming languages, and that is definitely the case in JavaScript. In nearly every situation, you need to end your code sentences with a semicolon so your computer doesn't get confused when reading it. The semicolon tells the computer, "OK I'm all done with this statement." (Note: JavaScript is forgiving, and sometimes you can get away without the semicolon, but it's good practice.)

One more thing to note is that JavaScript is a loosely typed language. There are (basically) two kinds of languages: loosely typed and strictly typed. An example of a strictly typed language is ActionScript (the language Flash apps are written in), and the same variable declaration we just wrote would look like this in ActionScript 3:

var myVariable:String = "Hello world!";

The additions you're seeing are the word var and the word String (with a colon in front of it). The word var tells the computer we're about to declare a variable. The :String attached to the variable's name tells the computer what type of variable it is and to not accept any other type. This is the reason for the term strictly typed. A loosely typed language like JavaScript is more flexible and doesn't require any of that. This makes your code more flexible, but some will argue it will also make it more error-prone. We're not going to get into the pros and cons of strictly and loosely typed languages here, but it's good to be aware of the basic differences now as you will most likely encounter them in your programming endeavours.

Now that you understand what variables are and how they work, we can try using them in some actual JavaScript code.

Creating Variables and Using the JavaScript Alert() Function

Let's create a simple HTML document that we can use to test our variables:

(Right click this link and choose to save the document to download a copy of this skeleton HTML file.)

You're going to want to have a better-defined HTML document when you're actually writing code, but for our purposes this will work just fine. Save the code above as a file called myscript.html (or anything you want that ends in .html and doesn't contain spaces or special characters) and open it up in your web browser. You'll see absolutely nothing other than "My Script" in the title bar. We still have more work to do. First, let's declare a variable inside of the script tag:

myVariable = 5;

Here we've just declared a number. Let's look at other variable types we can declare

myNumber = 5;

myString = "Hello world!";

myBoolean = true;

That gives us a number, a string, and a boolean. Now let's take that myString variable and actually do something with it:

myNumber = 5;

myString = "Hello world!";

myBoolean = true;

alert(myString);

You'll notice I've added the line alert(myString);. This calls a built-in JavaScript function (we'll learn more about these later) called alert() which creates a pop-up dialogue box for users to interact with.

What is "Hello world!" all about?
Writing a simple program that says "Hello world!" is generally the first thing every programmer does when they're learning how to code. It's not necessary, but it's sort of a tradition and an initiation into the club.

You never really want to use these in practice because — as any internet user likely knows — alert boxes are very annoying, but they make for a good way to test your code, to make sure it works, while you're writing. The parenthesis following alert allow you to provide alert with data it might need. Not all functions will require that you give it information, but alert needs to know what to alert the user. In this case, we gave it myString, so the user will receive a popup notification that says "Hello world!" Try this with your other variables to get popups with a number and a boolean value.

Why give alert() a variable and and not just give it the contents of the variable? Well, if you said alert("Hello world!") you'd get the same result in this example, but variables are called variables because they vary. The idea is that the contents, or values, of these variables will change as users interact with the programs you write. In our next lesson, we'll be looking at working with variables and the neat things they can do. Tune in tomorrow for the next instalment.

I like Java - it is essential when you are modifying code on your Android based phone. I like to do this regularly and it's important to have a Java base so that when you take it back to Telstra after you have bricked it you can understand where you went wrong.

So the skeleton HTML file can no longer be found, could you post that or include that as part of your tutorial please. I've done a bit of a search but to be honest, I'm not yet sure what I'm looking for.

Only logged in users may vote for comments!

Get Permalink

Trending Stories Right Now

We're constantly being reminded to reduce, reuse and recycle for good reason, but by chucking the wrong items in the recycling bin, your solid intentions are all but having a negative impact. We appreciate the 'to toss or recycle' question isn't always clear so we're going do your wrongs a right and breakdown all the things you thought you could recycle but actually can't.

While used PS4s and Xboxes may not make up a significant portion of e-waste, that doesn’t mean they aren’t contributing to the problem. If you have any used gaming consoles, don’t trash them — you can likely re-sell them at any electronics store or recycle them at the very least.