JavaScript with Sean Doyle

Lesson 1: Variables, Data Types & Operators

Variables

The Big 5 Concepts

  1. Variables act like storage boxes for values that will change or that we may not know yet.
  2. We give a variable a name (like a label on a box) so that we can retrieve our data from the correct box by using its name.
  3. In JavaScript, variable names must start with a letter or underscore, have no spaces in them, and must not be a reserved JavaScript word (like var or alert).
  4. JavaScript is case-sensitive, so if your variable is firstName, you will get an error if you try to call firstname.
  5. We can store a value when we declare a variable by using an equal sign (the "assignment" operator).

Code Samples

//"Declaring" a variable with the keyword, 'var'...
var xyz;

//Assigning a value to a variable when we declare it...
var xyz = "Hello world!";

//We could name our variable 'xyz', but we should give it a name that describes the value that it is storing...
var userGreeting = "Hello world!";

//We retrieve a value from storage by calling the variable name (the label on the box)...
alert( userGreeting );

For More Information

A Deeper Dive

Data Types

The Big 5 Concepts

JavaScript treats different types of data in different ways. The main JavaScript data types are: String, Number, Boolean, Null, and Undefined. There are others, but these are the main ones.

  1. Text, or any string of characters, is a String data type. It will always be in quotes.
  2. In JavaScript, the Number data type includes all kinds of numbers: integers, floats, decimals… they are all Number data types.
  3. A Boolean is the logical true or false – not the word "true" or "false". Think: "on" or "off".
  4. null (lowercase) is nothing. Not 0 (the number zero) or “” (an empty string), it is nothing.
  5. When we declare a variable but do not assign it a value, it is an example of the Undefined data type. It is not nothing (null), but we don't know what it is yet.

Code Samples

//"Declaring" a variable with a String value...
var myJob = "Web Developer";

var yearsExperience = 12; //Number data type - no quotes.
var salesTax = 0.13; //Number data type includes decimals.

var loggedIn = false; //Boolean. Only other possible value is true.

var customerObject = null; //Null data type.

var userInput; //Undefined data type. We have created a box with a label but its contents are undefined.

For More Information

A Deeper Dive

Operators

The Big 4 Concepts

  1. Operators let us modify values – just like the buttons on a calculator.
  2. The main operators are + (add), - (subtract), * (multiply), and / (divide).
  3. We can use + with strings to add (“concatenate”) them together.
  4. In JavaScript, if we try to concatenate a String data type with a Number data type it will work, however, the Number gets converted to a String data type.

Code Samples

var myTotal = 12 + 8; //myTotal is 20
var newDebt = 400 - 150; //newDebt is 250

var totalBill = subTotal * salesTax; //Using variables. This is the power of variables!!

//Adding (concatenating) strings of text...
var myMessage = "Hello" + "world!";//This gives Helloworld with no space.

var userName = "Sam";
var userGreeting = "Hello" + " " + userName;//This adds a variable to static text. Note the empty space that solves the problem of the previous example.

//We have to be careful when concatenating strings with numbers because JavaScript will convert the Number into a String character.
var x = 8 + 8; //x is 16
var y = 8 + "8"; //y is 88. Specifically, the character eight beside the character 8, not the number 88.

For More Information