Author: Daniel Puiatti

One of the most useful capabilities of JavaScript is that it lets you manipulate almost anything on a webpage, even if you don’t have access to the HTML or CSS.

What’s the use of manipulating something on a webpage? Well, if you can manipulate something on a webpage you can change the webpage. 

Need to build an email form to collect emails for your event? Create an image gallery that allows people to share your pictures? Make the page dance, sing, and be merry?

Whatever you need to do, you can almost always do it with JavaScript. This is why it’s one of the most popular programming languages today, its versatility and flexibility allow you countless opportunities to change a website as you desire.

When programming with JavaScript you will inevitably be interacting with data, usually, but not always, you’ll be trying to change this data somehow.

Here’s an example of a data interaction with JavaScript: think of a news website that publishes stories about apartments. Perhaps they have a style guide that says every time the words “tenant association” appears they should be capitalized.

Let’s say the news website also works with hundreds of writers and not all of these writers remember to capitalize tenant association.

In this instance, as a savvy JavaScript programmer, you’d want to use JavaScript to automatically capitalize tenant association every time it appears on your webpage, regardless of if the writer remembers to or not.

In this example the words “tenant association” are data (text data is called a string in JavaScript) and uppercasing the words is a form of interacting with the data, specifically changing it. 

Before you can interact with data in JavaScript you’ll need to store it somewhere and provide a reference to it. To store data and reference it you’ll use something called a variable.

Variables are one of the most frequent tools you’ll be using as a JavaScript programmer and they allow you to store data and reference it. While there are many reasons why you must do this, for the sake of keeping things simple you’ll have to take my word for it.

Storing data and creating a reference to it in JavaScript is called declaring a variable and variables are, as mentioned, one of the core building blocks of JavaScript programming.

There are three parts to creating a variable in JavaScript: creating and naming the variable, assigning some data to the variable, and referencing the variable.

Creating and naming the variable

To create and name a variable in JavaScript you use the following syntax.

var nameOfVariable;

1. var tells JavaScript that you want it to create a new variable.
2. nameOfVariable tells JavaScript the name you want it to assign to the new variable.

All JavaScript variables must be given a unique name, and generally, the rules for constructing names for variables (unique identifiers) are:

• Names can contain letters, digits, underscores, and dollar signs
• Names must begin with a letter
• Names can also begin with $ and _ (this is not recommended)
• Names are case sensitive (y and Y are different variables)
• Reserved words (like JavaScript keywords) cannot be used as names
• camelCase is preferred
• Try to be descriptive when naming your variables. This makes your code easier to read. 

Try following the steps below to create a variable named myVariable in your browser console now. If you need some help accessing your browser console this guide will show you how.

1. Navigate to your browser’s JavaScript console
2. Type var myVariable in the console window
3. Press enter

You should see something similar to this:

Congratulations, you’ve just created your very first JavaScript variable.

This may seem trivial, but it’s one of the most important steps in JavaScript programming, and now that you’ve created your variable it’s time to assign some data to it.

Assigning data to the variable

To assign data to the variable you just created using the following syntax:

var nameOfVariable = data;

1. var tells JavaScript the name you want it to assign to the new variable.
2. nameOfVariable tells JavaScript the name you want it to assign to the new variable.
3. = tells JavaScript to assign everything to the right of the = to the variable. This is called an assignment operator.
4. data tells JavaScript the specific data you want to assign to the variable.

Try following the steps below to assign the word "Hello" to the variable you created called myVariable.

1. Navigate to your browser’s JavaScript console
2. Type var myVariable = "Hello" in the console window
3. Press enter
4. Type myVariable (without the var this time)
5. Press enter

You should see something similar to this:

Congratulations again, you’ve just assigned data to your very first JavaScript variable.

In this case, you’ve assigned a string to myVariable.

You are now well on your way to using JavaScript to do some incredible things. And just so you know, you can assign more than strings to variables. Data types can also be numbers, boolean, null, undefined, and symbol.

This guide from W3C provides an overview of datatypes in JavaScript.

Referencing the variable

When you named your variable a few moments ago you created a way to reference it, and referencing it makes changing the data stored within it much easier.

Referencing your data in JavaScript is pretty straightforward, you just use its name. Try the following example in your browser console to reference your variable:

1. Navigate to your browser’s JavaScript console
2. Type var myVariable = "Hello" in the console window
3. Press enter
4. Type myVariable (without the var this time)
5. Press enter
6. Type alert(myVariable)

You should see something similar to the screenshot from the previous step with one difference: a popup should appear that says "Hello".

What happened here? Magic!

When you typed alert(myVariable) you told JavaScript you wanted it to create a popup with the text "Hello", but instead of writing "Hello" you referenced the variable you created with the name myVariable.  In essence, the name you give to a variable with data is the data, and using named variables helps you add meaning to your code, and keeps it cleaner and easier to manage. 

Here’s another example, imagine you wanted to calculate the age of someone born in 1950. Without a named variable you’d do the following:

2020 - 1950 = 70;

Now imagine you had ten different age calculations. You’d have to write something like this:

2020 - 1950 = 70;
2020 - 1954 = 66;
2020 - 1990 = 30;
2020 - 1967 = 53;
2020 - 1989 = 31;
2020 - 1988 = 32;
2020 - 2001 = 19;
2020 - 2004 = 16;
2020 - 1963 = 57;
2020 - 1999 = 21;

As you can see, there’s lots of repetition and by using a named variable you can greatly simplify this process. Here’s what the above looks like using a variable named currentYear.

var currentYear = 2020;
currentYear - 1950 = 70;
currentYear - 1954 = 66;
currentYear - 1990 = 30;
currentYear - 1967 = 53;
currentYear - 1989 = 31;
currentYear - 1988 = 32;
currentYear - 2001 = 19;
currentYear - 2004 = 16;
currentYear - 1963 = 57;
currentYear - 1999 = 21;

At first, it may seem odd to subtract a word from a number, but remember, you are actually subtracting data, the words are simply the reference you gave to the data through a variable. 

Don’t get caught up on the example above which is very simple and not a great use case for variables, it’s only an example. The real magic of named variables becomes evident when you are dealing with thousands of lines of code. 

Go ahead and try subtracting two named variables in your console.

1. type var currentYear = 2020;
2. press enter
3. type var yearOfBirth = 1950;
4. press enter
5. type currentYear - yearOfBirth;
6. press enter

You should see something similar to this:

Pretty cool, right?

Alright, so now you know how to create, name, and reference variables. Here’s a recap to help you solidify your understanding of JavaScript variables.

Recap

• When programming with JavaScript you will often be interacting with data
• Before you can interact with data in JavaScript you’ll need to store it somewhere and provide a reference to it
• To store data and reference it you’ll use a variable.
• Variables allow you to store data and reference it
• To create and name a variable in JavaScript you use the following syntax.
  • var myVariable
• To assign data to the variable use the following syntax
  • var myVariable = “Hello”

Now let’s learn how to start applying what we’ve learned so far. Let’s write and execute some code in our JavaScript console!

Learning to program in JavaScript has been one of the most interesting decisions of my life.

Almost every day I find something that can be improved with a few lines of code, and the more I learn how to code, the more I realize how many things I have been doing inefficiently. 

If you are considering a career in digital media, web development, online marketing or are just interested in learning something — learning to program will change your life. Not only will you uncover how to leverage the power of computing to become more efficient, accurate and useful at work, but along your coding journey you’ll also unlock new ways of thinking that will help you solve problems, learn faster, meet new people and contribute to world-changing open-source projects.

Sounds great, right? Well, it is pretty great! Except…

Programming is not something you can pick-up in a few days with a crash course (trust me, I have tried plenty of crash courses). It takes commitment — and the learning curve can be unforgiving.

So, to ensure the best use of your time you’ll want to start with a programming language that is:

• Well documented: meaning lots has been written about how to use it to solve problems.
  
• Widely used: meaning many websites use the programming language and it’s likely to be around for a long time.
  
• Easy to apply: meaning you don’t need any fancy or expensive software to get started.

JavaScript is well documented

One of the challenges of learning something new is figuring out the stuff that your guide or tutorial didn’t tell you.

Classes and textbooks are wonderful, but none are complete on their own, so having access to extensive collections of writing, tutorials, and guides that cover everything from practical application to theoretical concepts is extremely helpful.

The JavaScript category on Stack Overflow — the most widely used user-generated programming reference in existence — has over a million questions and answers.

If you are ever struggling to solve a JavaScript programming problem you can bet someone has probably already documented and solved the exact same issue. It’s so likely that I now make it a habit to search Stack Overflow for the problem before I try anything else. Ninety percent of the time I’m able to find a solution in under 15 minutes.

Well documented? Check.

JavaScript is Widely Used

According to w3techs.com approximately 95% of all websites use JavaScript.

If we estimate that there are more than 1 billion websites (there are probably more) that gives us around 950,000,000 websites using JavaScript. 

950,000,000 is a lot, so — widely used? Check.

JavaScrip is easy to apply

JavaScript doesn’t need any fancy programs or expensive software to run — you can run it in your browser, any browser. You don’t need to spend money on development environments to get started.

Here, let me show you how easy it is to get started.

Please select your internet browser below and follow the instructions.

Step 1: Activate your browser’s console

Step 2: Type the following in your browser console

alert("Hello World")

After you’ve typed the above in your console press enter. You should get a little message box that pops up and says "Hello World".

Pretty neat huh?

I think so!

At this point, if I have done a good job of writing this post then you’ll be thinking to yourself: yeah Dan! I wanna learn JavaScript!

Alright then, I’m here to help.

Every week I’ll provide an overview of some core concepts in JavaScript and progressively I’ll show you how can use it to not only do some cool stuff but also how to build tools that can help you leverage the power of your computer to automate, enhance and improve many aspects of your personal and professional life.

I hope you are as excited about this learning opportunity as I am, and I hope you’ll join me as I develop this guide to programming in JavaScript for non-technical types — like you.

Oh, by the way, my name is Daniel Puiatti, you can call me Dan.

I have over a decade of experience in digital media. From responsive website design to search engine optimization, social media marketing to accessibility. My experience has allowed me to build, grow and optimize many digital campaigns and products. And like you, I don’t have a technical background.

Now let’s get learning. The next guide to read is my introduction to how a web browser builds a website.