JavaScript Primer

Learning Competencies

By the end of this primer you should be familiar with:

Defining different JavaScript data types: numbers, strings, and booleans
How variables are used

Summary

JavaScript is known as the "language of the web". If you think of HTML as the structure, and CSS as the design, then JavaScript is the action. There are many ways it can be used, but a basic overview is: it allows for content on a webpage to change without reloading (or loading a new page), which can be quite slow. It stores and uses data in unique ways that are useful to get familiar with now before putting it into practice.

Important note:

JavaScript is not the same as Java. They are two separate programming languages that are used in quite different ways (and Java is not an abbreviation for JavaScript!). So when you're googling concepts or syntax, make sure to specify 'JavaScript' rather than 'Java' to get you the correct information.

For now, we want to introduce you to some basics before the next tech exercise which is more of a deep dive.

In this primer we’ll introduce you to three data types commonly used in JavaScript, as well as variables which are used to store data. Each section has a small amount of reading followed by a multi-choice quiz to help you get familiar with the content.

Time Box

Activity	Time
JavaScript Primer & Quiz	1 hour

Numbers

In JavaScript we use numbers when we want to talk about quantities and amounts.

A number can be an integer (e.g. a whole number, -4, 20, 33) or a decimal (e.g. 2.6, 15.554).

JavaScript has all the basic math operations you might expect, for example:

Adding: 4.2 + 5
Subtracting: 100 - 6
Multiplying: 2 * 3
Dividing: 8 / 2

And some more which you'll learn about later on.

Strings

In JavaScript to represent text we use a string.

We write strings inside of single or double quotes:"Like this" or 'Like this'. JavaScript needs strings stored inside of these quotes so that it knows to treat the data as a string, and not another data type.

Strings can include includes letters ("P"), words ("coffee"), punctuation (","), characters including spaces (" "), and numbers ("250").

If we need to store someone's name, email address or a URL to some website we will store it as a string. For example:

Name: "Ahmad"
Email: "ahmad_47@testemail.com"
URL: "https://www.ahmad-47-site.com/profile/bio"

You can also join strings together using the + symbol. For example, "Hello" + " " + "World!" is equal to "Hello World!".

Booleans (true and false)

boolean is another data type in JavaScript, it is named after the Mathematician George Boole.

It only has two values: true and false. Note that these are different from strings, they are not written within quotation marks. We can write them in JavaScript just like that: true and false.

In everyday life we might use a yes or no question:

Question: Is New Zealand in the Pacific Ocean?
Answer: Yes

Question: Is France in the Pacific Ocean?
Answer: No

In programming, we use expressions with boolean values:

Expression: New Zealand is in the Pacific Ocean.
Value: true

Expression: France is in the Pacific Ocean.
Value: false

We use booleans to make a decision between two options. For example:

If a user is not logged in (false), we take them to a log in page. If a user is logged in (true), then they can access their profile page.

Variables

Variables are one of the main building blocks of JavaScript. They are like containers for you to store information which you can then reuse later. The data types you have learnt so far, number, string, and boolean, can all be stored in variables.

Creating variables

First we have to declare the variable. This creates an empty container. To do this we use the keyword let followed by the name of the variable. We can name our variable anything. For example:

let bananas
let cat

let yellow

This creates three empty containers. One named bananas, one named cat, and another named yellow.

Filling the variables

Once we have created an empty variable container we usually want to put something inside of it. This is known as assigning a value to the variable. To do this we use the = symbol. For example:

bananas = 5
cat = "Leo"

yellow = true

Now the value of the variable we declared earlier named bananas is 5, the value of cat is "Leo", and the value of yellow is true

Both at once?

Often we want to assign a value to a variable at the same time as declaring it. We can just combine these two steps into one line like this:

let apples = 3
let dog = "Pickle"

let green = false

Now we have created 3 variables. One named apples which has been assigned the value of 3, dog which has been assigned "Pickle", and green which has been assigned false.

Quiz

Now you've read through the basics, have a go at our JavaScript Primer Quiz!

Technical Blog - CSS Concepts

Human Skills