04-01: Getting Started With Javascript

Matt Price

JavaScript

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

Some Big Ideas

  • Abstraction
  • Formalization
  • Repetition
  • Laziness!

Assignment 2 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


const neverChange = "Project Key"; // comment
let oftenChanges = 0; // maybe we will change this value later
var oldDeclaration = 0; // we try to avoid using var now; use let instead

Text is Data


let first="Matt";
let last="Price"
console.log(first + last);

Do it w/ your name!

"Dynamic" (or "Weak") Typing

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

let n = 1,
    m=2,
    s="Hello, there! ";

console.log(m+n);
console.log(s+n);

Some Variable Types

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

Making Lists (Arrays)


let historians= ["Edward Gibbon", "Leopold von Ranke", "Edward Said", "Joan Scott"];


undefined

Working With Arrays


a = [];
a.push("Edward Gibbon");
a.push("Edward Said");
a.push("Joan Scott");

console.log(a[1]);

a.pop();
// a

Working with Numbers


wardates=[1776, 1792, 1812, 1861, 1870, 1914, 1939, 1994]
console.log("The time between The First and \
Second World Wars was " + (wardates[6] - wardates[5]) + " years");

Repetition: While Loops


let historians= ["Edward Gibbon", "Leopold von Ranke", "Edward Said", "Joan Scott"];

let i = 0;

while (i < historians.length) {
    console.log(historians[i] + " was a historian.");
    i+=1;
  }

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


let historians= ["Edward Gibbon", "Leopold von Ranke", "Edward Said", "Joan Scott"];

for (let i=0; i < historians.length ; i++){
  console.log(historians[i] + " was a historian.");
  i // this is not required, just here to show you a slight difference
}
  • initial value: i = 0
  • test (halt condition): i < historians.length
  • change in condition: i++ (idiomatic)

Repetition: other for loops


let historians= ["Edward Gibbon", "Leopold von Ranke", "Edward Said", "Joan Scott"];

for (i in historians) {
  console.log(historians[i] + " was a historian.");
}
for (let h of historians) {
  console.log(h + " was a historian.");
}
  • 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


let historians= ["Edward Gibbon", "Leopold von Ranke", "Edward Said", "Joan Scott"];

let i = 0;

while (i < historians.length) {
  if (historians[i] === "Joan Scott") {
    console.log(historians[i] + " is my favourite.");
  }
  i +=1;
};
  • execute the { ... } only if the test is true
  • here the test is historians[i] === "Joan Scott"
  • note the many === ! different from just one =
    • let a = 'some value': set a to 'some value'

Branching


let historians= ["Edward Gibbon", "Leopold von Ranke", "Edward Said", "Joan Scott"];

let i = 0;

while (i < historians.length) {
  if (historians[i] ==="Joan Scott") {
    console.log(historians[i] + " is my favourite.");
  } else {
    console.log(historians[i] + ", meh.");
}
  i +=1;
};