JavaScript

  • a real language!
  • dynamic transformation
  • baby steps!!

Some Big Ideas

  • Abstraction
  • Formalization
  • Repetition
  • Laziness!

Assignment 1 will require

  • Basic Syntax
  • Variable Types
  • Function Definitions
  • Loops and Branches
  • Basic “Objects”

Running Javascript

  • in Browser Console
  • in terminal (with the command node)
  • in VSCode files, with Quokka attached

What is a Variable?

  • name for memory location to be used later, usually in specific ways that depend on type
  • or, box into which you can put information that you will want to get later.
boxes.png

Declaring Variables

Text is Data

Do it w/ your name!

“Dynamic” (or “Weak”) Typing

  • numbers and strings are different
  • but we can convert number → string

Some Variable Types

  • numbers
  • strings
  • boolean (true/false)
  • arrays
  • objects

Making Lists (Arrays)

Working With Arrays

Working with Numbers

Repetition: While Loops

repeat inside the { ... } as long as test is true:

  • initial value: i = 0
  • test (halt condition): i < historians.length
  • change in condition: i += 1

Repetition: For Loops

  • initial value: i = 0
  • test (halt condition): i < historians.length
  • change in condition: i++ (idiomatic)

Repetition: other for loops

  • these also “loop”
  • but the initial value, test, and increment are implicit
  • defined by historians, but in slightly different ways.
  • they are very convenient! read about them.

Conditionals: If

  • execute the { ... } only if the test is true
  • here the test is historians[i] === "Joan Scott"
  • note the many === – different feom just one =

Branching

Parts of things: elements, methods, properties

  • note strange syntax:
    • a[1]: second element of array
    • a.length: a special way of finding the length of any array. Length is a property of a.
  • console.log(a)): log is a part of console. it takes a parameter , in this case a

Doing Stuff: functions

A Function is a variable(!)

  • functions are also a box into which you put stuff
  • but when you look into the box, the “stuff” has changed
  • we use them to change the state: to do things
  • use whenever you’re repeating an action or process

compare:

  • let fruit="orange";
  • eat("orange")

Defining a function

  • we’ll use the first method:
    • keyword function followed by name then (parameters, if, you, need, them), then { , then statements, then }

Remember this

As a function

Finally we can talk about scope!

  • outside the function, a = “just some string”
  • inside, we redeclare it for the function scope and now a has new value
  • anyString is only declared inside the function scope

Advanced scope

  • we can also redeclare let variables in an if/for/while “block”
  • scope scales: global → function → block → nested block → etc etc
  • any time you see { .. } you’re in a new scope context!

Function Hints for Assignments

  • remember the return values!
  • debug by setting a variable to the function output, and using quokka to look at the value:

Objects and Properties

Objects are variables with named parts

  • parts are called properties, but
  • if a part is a function, we call that part a method

let’s eat

  • we can eat any of the foods
  • they’re not related to each other, just floating around

Now let’s make lunch

  • myLunch is an empty object – it has no parts yet

Add some parts

  • added parts in 3 ways: set directly in definition; set by reference in definition; added by reference after definition

Eat the Lunch

  • rewrote eat to take advantage of the structure of lunch

Add Dessert

  • objects can be arbitrarily complex and contain other objects

Eat The Lunch as a Method

Reminder

Writing the Method

  • note the differences between eat() and myLunch.eatMe:
    • the method doesn’t take a parameter!
    • instead, we get to use this, which refers to the current object scope

Finally some History

more objects

Basic Logic with Objects

Branching Logic with Objects