Javascript - The Basics

Leon Noel

"She miss that throwback Kodak wave
Was just a lil' shooter, ain't have no future
But I can't go back to them days
Versatile three, wait 'til you hear eight
'Rari paper plates, told my dawg we gon' be straight"



  • Questions? 

  • Let's Talk -  Baby Learns To Walk?

  • Learn - What is programming?

  • Build - Youtube Background Picker

  • Learn - JS Variables && Types

  • Build - Not so great calculator

  • Learn - JS Arithmetic && Conditionals

  • Build - Angry Parent Simulator 

  • Build - Temperature Converter 

  • Homework - Repetition 


About last class or life

Checking In

Like and Retweet the Tweet


Submitting Work

 Layouts Homework in

Submit URLs here:


Baby Learns To Walk?

Half Hard Work and Half Believing You Can Do It

*thanks Vonds

The Golden Rule


  • HTML = Content / Structure

  • CSS = Style

  • JS = Behavior / Interaction

IDs & Classes


#zebra {
  color: red;

IDs are used for selecting distinct elements

Only one id with the same value per document


  <p>Hello, Twitch!</p>
  <p id="zebra">Hello, Youtube!</p>


.bob {
  color: red;

Classes are for selecting multiple elements

Multiple with same value allowed per document


  <p class="robot">Hello, Twitch!</p>
  <p id="zebra" class="bob">Hello, Youtube!</p>
  <p class="bob">Goodbye, Mixer!</p>


A computer will do what you tell it to do.

What is a program?

A program is a set of instructions that you write to tell a computer what to do

What is a programming?

Programming is the task of writing those instructions in a language that the computer can understand.

Simple Circut

True Story


Has a specific 'Syntax'

Syntax: "Spelling and grammar" rules of a programming language.

JS Syntax 

  • Semicolon

  • Brackets

  • Parentheses

  • Quotation Marks

  • Other Unique characters?

Let's Code

A Youtube Background Picker


What are variables?


  • We can tell our program to remember values for us to use later on
  • The entity we use to store the value is called a variable


Declaration: let age


Assignment: age = 25


Both at the same time:

let age = 25

Variable Conventions


let numberOfApples = 9




& Data Types

What can you store in variables?


  • Stores text

  • String is surrounded by quotes

"How is the weather today?"



Double vs Single Quoted Strings:

'They "purchased" it'
"It's a beautiful day"


New Line + Tabs:

"1. Preheat over to 350\n2. Grease the pan"

'\tBeginning of paragraph'




Represent Numerical Data

int: 29

float: 5.14876



int: +4

float: -10.375

Arithmetic In Javascript

Let's Code

A not so great calculator

Making Decisions


It's either TRUE or FALSE 

If you are greater than 18 you are an adult

if (age > 18){
  console.log("You are an adult")




Are two things equal?

9 === 9 //true
7 === 3 //false
"Hello" === "Hello" //true

Logical Operators

Conditional Syntax

if(condition is true) {
  //Do cool stuff

Conditional Syntax

if(condition is true) {
  //Do this cool stuff
}else if(condition is true){
  //Do this other cool stuff
  //Default cool stuff

Conditional Syntax

const pizza = "Dominos"

if (pizza === "Papa Johns") {
} else if(pizza === "Dominos") {
  console.log("All aboard the train to flavor town")
} else {
  console.log("What are you even doing with your life?")


Assignment vs. Comparison

Multiple Conditions

if (name === "Bruce" && parents === "Dead"){
 //Turn off the bat signal

Multiple Conditions

if (day === "Saturday" || day === "Sunday"){
  //It is the weekend

Let's Code

Class, Weekend, or Boring Day?

Let's Code

Angry Parent Simulator

Pseudo Code

Let's Code

A Temperature Converter


Do: Plan out your networking!

Read: + Tasks

Read: + Tasks

Do: Delete the JS and do it again for all assignments  

Do: Something special for yourself this weekend

100Devs - Javascript Basics (cohort 2)

By Leon Noel

100Devs - Javascript Basics (cohort 2)

Class 12 of our Free Web Dev Bootcamp for folx affected by the pandemic. Join live T/Th 6:30pm ET and ask questions here:

  • 5,765