JavaScript Basics

Lesson material made by Jason. Can be found on GitHub.

A beginner lesson companion for writing JavaScript, printing to the console, combining strings, using numbers, and understanding variables.

Today we focus on:
  • Programming as instructions
  • Numbers and strings
  • Variables and expressions

HTML = Content

HTML puts headings, paragraphs, images, and buttons on the page.

CSS = Style

CSS changes colors, fonts, spacing, and sizes.

JavaScript = Functionality

JavaScript makes pages react, calculate, check, and change.

1

What Is Programming?

Programming means giving the computer specific instructions.

Example

  1. Add two numbers.
  2. Show a message.
  3. Change the page after a button click.

Code

// Instruction 1
console.log(2 + 3)

// Instruction 2
console.log("Hello from JavaScript!")

Notes

  • A program is a list of instructions.
  • JavaScript is the programming language of the web.
  • JavaScript powers dynamic behavior on websites.
2

The Console And console.log

The console is a place where we can type JavaScript and inspect results.

Example

console.log(1337) 1337

Code

console.log(1337)

Notes

  • console names the browser console.
  • .log() is an action that prints something.
  • The value inside the parentheses is what gets printed.
3

Numbers And Operations

JavaScript can work with positive numbers, negative numbers, and decimals.

Example

+ add
- subtract
* multiply
/ divide
% remainder
** power

Code

console.log(10 + 5)
console.log(10 - 5)
console.log(10 * 5)
console.log(10 / 5)
console.log(10 % 3)
console.log(2 ** 3)

Notes

  • Numbers do not need quotation marks.
  • * means multiply, not x.
  • ** means power, so 2 ** 3 is 8.
4

Strings And Concatenation

Strings are text. Concatenation means joining strings together.

Example

console.log("Hello " + "World") Hello World

Code

console.log("H" + "i")
console.log("Hello " + "World")
console.log("What " + "a " + "time!")

Notes

  • Strings go inside quotes.
  • + joins strings together.
  • Spaces matter. "Hello" + "World" becomes "HelloWorld".
5

Comments

Comments explain code for humans. JavaScript ignores them when running.

Example

A comment can explain why a calculation exists.

// Calculate circumference console.log(2 * 3.14 * 696340) 4371695.2

Code

// Calculate the circumference of the sun in km
console.log(2 * 3.14 * 696340)

/*
console.log("This line is commented out")
console.log("So is this line")
*/

Notes

  • // starts a one-line comment.
  • /* and */ create a block comment.
  • Comments can also temporarily stop code from running.
6

Variables

Variables give a name to a piece of data.

Example

side10

Think of a variable like a labelled box.

Code

var side = 10

console.log(side)

Notes

  • var tells JavaScript we are making a variable.
  • side is the name we chose.
  • = 10 assigns the value 10 to that name.
7

Changing Variables

A variable can be updated after it is created.

Example

var b = "JavaScript!" b = "Variables!" Woohoo Variables!

Code

var a = "Woohoo "
var b = "JavaScript!"
console.log(a + b)

b = "Variables!"
console.log(a + b)

Notes

  • Use var when creating the variable the first time.
  • To change it later, write the name and a new value.
  • Changing b does not change a.
8

Expressions

An expression is code that resolves to a value.

Example

(10 ** 8) * 3.84 becomes 384000000.

JavaScript calculates the right side first, then stores the result.

Code

var distanceToTheMoonMeters = (10 ** 8) * 3.84
var distanceToTheMoonKm = distanceToTheMoonMeters / 1000

console.log(distanceToTheMoonKm)

Notes

  • The right side of = is evaluated first.
  • A variable can store the result of a calculation.
  • An expression can use other variables.
9

Rectangle Calculator

Variables let us reuse one value in many calculations.

Example

var side = 10 The perimeter is: 40
The area is: 100

Code

var side = 10

console.log("The perimeter is:")
console.log(side * 4)

console.log("The area is:")
console.log(side * side)

Notes

  • If the side changes, update one line: var side = 4.
  • JavaScript substitutes the value wherever side appears.
  • This reduces repeated editing and repeated mistakes.
10

Walking To The Moon

Big problems can be broken into named steps with variables.

Example

Distance to moon, step length, and steps per minute can each be stored in variables.

Steps to the moon: 548571428.57
Years to the moon: 17.39

Code

var distanceToTheMoonMeters = (10 ** 8) * 3.84
var stepDistance = 0.7
var stepsPerMinute = 60

var steps = distanceToTheMoonMeters / stepDistance
console.log("Steps to the moon: " + steps)

var minutes = steps / stepsPerMinute
var years = minutes / 60 / 24 / 365
console.log("Years to the moon: " + years)

Notes

  • Good variable names explain what the values mean.
  • Use comments to explain unusual numbers.
  • Build the calculation one step at a time.

Mini Playground: Change The Side Length

This connects variables and expressions. Change the side length and JavaScript recalculates perimeter and area.

Example

Perimeter: 40. Area: 100.

Code

var side = 10
var perimeter = side * 4
var area = side * side

console.log("Perimeter: " + perimeter)
console.log("Area: " + area)
  • The input gives JavaScript a number.
  • The same variable is reused in two expressions.
  • The result changes when the variable changes.