9  JavaScript basics

While JavaScript was developed for web browsers, it’s a full-blown big-boy programming language that can do lots of things. As such, we’ll be doing some basic programming things, but using our browser console to view them.

9.1 The console

Let’s log some text to the Console so you can see it work.

  1. In your HTML file between the script tags, on a line by itself, add this:
console.log("Let's do math:");
  1. Save your js-practice.html file.
  2. Go back to your browser where you should already have the Inspector up and the Console tab chosen.

js-console-log

Note we used double-quotes to signify our string. Just so you know, we could use single quotation marks if we are consistent, but then we would’ve needed to escape the single quote in the text as Let\'s.

9.2 Writing to the console

  1. Under your first console.log, use let to create a new variable x and set it to 5. Log x’s value to the console. (We’ll talk about let and what a variable is below.)
let x = 5;
console.log(x);
  1. Save your html page, then refresh your browser and you should see your console update to include the “5” in the log.

The browser will act on all our code written in JavaScript, in the order that we write it. You don’t actually see it happen, unless there is some result for you to see. We are using console.log to see that result.

We could actually type those commands into the browser Console, but anything we do would not be saved when the browser is refreshed.

9.2.1 var vs. let vs. const

Think of variables as containers that hold information. Their purpose is to label and store data that can then be used in your program. By providing a variable with a descriptive name, our programs can be understood more clearly by others and our future selves.

Until recently, the way to create (or declare) a variable in JavaScript was to use var variableName. In 2015 with the update to ES6, let and const were introduced as better ways of declaring variables. While the old term var still workds, we should use these new terms.

Here are the very simplified differences between these three ways of declaring a variable:

  • If you declare a variable with var, you can re-declare it later and in doing so you will change its value.
  • If you declare a variable with let, you can change its value later, but you can’t re-declare it. If you try, you will get an error. This is usually good, because it tells you the variable was already in use.
  • If you declare a variable with const, you can’t change its value or re-declare it later.

Note that you can also declare a variable without using any of those by just assigning a value to term. x = 5. DON’T DO IT. It is not good practice, as you can overwrite global variables already in play, no matter where it is called. You can read more about calling variables in scope, but I don’t want to get bogged down with it here.

In our example above, we used let to declare a variable that we called “x”, and then we assigned that variable to the value “5”.

When we used console.log to print log our variable “x” to the screen, it returned our value: 5.

9.3 Let’s do some math

  1. Use let to create a new variable y and set it to 3. Log y’s value to the console.
let y = 3;
console.log(y);
  1. Save your file and refresh your browser to make sure it worked.
  2. Create a new variable z and set it to x multiplied y, using the x and y variables (don’t just use the numbers 3 and 5). Log z’s value to the Console. The character * is our your multiplication tool.
let z = x * y;
console.log(z);

9.3.1 Math on your own

  1. Add a JavaScript comment called “Math on my own”.
  2. Repeat those last steps, but demonstrate addition (+), subtraction (-) and division (/) using new variable names (not z) and values. These are three different new things, each logged to the Console.
  3. Make sure they worked in your browser.
  4. Commit your changes to git. (You don’t have to push yet … just add and commit. I want a history.)

9.4 Working with strings

  1. Add a new console log with the text “Working with strings:”.
  2. Create separate variables for your first, middle and last name. Log each of them to the console.

(While any combination of letters could be used to create a variable name, note that convention is to use camelCase if your variable has more than one word, meaning the first letter of the variable name is lowercase, but you would uppercase the first character of other words in the variable name.)

console.log("Working with strings:");

let firstName = 'Christian';
let middleName = 'Clay';
let lastName = 'McDonald';
  1. Use string concatenation (+) to join the variables you just created into a new variable called name. Make sure to include spaces in quotation marks between each name part. Log it to the console.
let name = firstName + " " + middleName + " " + lastName;
console.log(name)

OK, we now have created a variable that has your entire name, built from other variables. Holler if you see that it doesn’t work in your browser.

9.4.1 Strings on your own

  1. Add a JavaScript comment with the text “Strings on my own”.
  2. Create a new variable, greeting, and in it, join the string 'My name is' together with name so its new value is My name is YOUR NAME. Log that new value to the console.
  3. Commit your changes to git so we have a record.