high level schedule for the next two weeks. 

This week we will be adding a whole bunch of tools to our tool belt.

Next week we will be practicing those tools.

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.)

But how?

Including Scripts on the page

Scripts are lines of code that are run in a 'sequential' order 

What is a line of code?

A line of code is a command that tells the computer to do something.

2 types of code

  • Expression

  • Statement

Examples of lines of code:

- increase the value of a counter (expression)

- change the css class of <p> (statement)

- update the value of the <h1> (expression)

- set the value of a variable (statement)

 

 

Variables

 a variable is a value that can change, depending on conditions or on information passed to the program.

Examples of variables

const x = 5;

const firstName = "Mark";

let dayOfWeek = "Monday";

let numberOfCupsOfCoffee = 1;

var notThis = "hello";

Types (Sorta)

const x = 5; // Number

const lastName = "Dewey"; // String

const whatTypeIsThis = "255"; // ???

there are more, we will add to this list later

Basic Math

const x = 5;

const y = 10;

const z = x + y; // Should be 15

const a = x - y; // -5


const firstName = "Sherlock";

const lastName = "Holmes";

const fullName = firstName + " " + lastName;

Stop. Example time.

Let's run some JavaScript in the terminal.

DOM

Document Object Model

Events

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

Functions

a thing that we can put several lines of code together to execute together.

const sayHello = () => {
    console.log("hello")
}

function sayHello () {
    console.log("hello")
}

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.

Made with Slides.com