Today

- welcome to JavaScript

- using JavaScript

JavaScript

What is it?

JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)

Let's use what we know to learn JavaScript

Examples of variables

const x = 5

const firstName = "Mark"

let dayOfWeek = "Monday"

let numberOfCupsOfCoffee = 1

// do not do this 
var greeting = "hello"

Types

const x = 5;

const lastName = "Dewey"; 

const hasCoffee = true;

const firstLetter = "M";

Types (Sorta)

let name = "Janus"

name = "Jupiter"

name = 435

arrays (no lists)

const myFavoriteThings = []

// add
myFavoriteThings.push('Raindrops on roses')

myFavoriteThings.push('whiskers on kittens')

// add and update
myFavoriteThings[5] = 'Bright copper kettles'

// delete

myFavoriteThings.splice(5,1);

Classes

class Cat {
  speak () {
    if (this.happiness > 5) {
      return 'purrrrr'
    } else if (this.happiness >= 0) {
      return this.name + ' goes meoow'
    } else {
      return 'hiss'
    }
  }

  chase () {
    this.happiness -= 3
  }

  eat () {
    this.happiness++
  }

  pet (location) {
    if (location === 'behind ears') {
      this.happiness += 2
    } else if (location === 'mouth') {
      this.happiness -= 1
    } else if (location === 'butt') {
      this.happiness += 3
    }
  }
}

Functions

Text

// use this
const sayHello = (name) => {
    console.log("hello, " + name)
}

// not this
function sayHello (name) {
    console.log("hello, " + name)
}

Let's run some JavaScript!

But the web!

DOM

Document Object Model

Events

In general, we listen for certain events to fire (click, hover, focus) and we can run chunks of code.

Interaction with the DOM

document.querySelector()

const h1 = document.querySelector("h1")

const nav = document.querySelector("nav")

const profileImage = document.querySelector(".profile-image")

const userName = document.querySelector("#username")

Stop. Example time.

JavaScript in the browser.