OK Computer

Interacting with the Browser

Garrick Aden-Buie

rstudio::conf(2020, "JavaScript for Shiny Users")

Arrays
& Objects2

👨🏼‍💻
[live coding]

⏭

Meet Object

Objects are like R's lists (except used a whole lot more in JS)
Each entry has a name called a key and a value.
The value is a property if it's a constant or a method if it's a function
Access elements with .dot or [bracket] notation
Undefined properties are ... undefined
const means can't reasign the whole object

const stats = {pkg: 'dplyr', downloads: 893}
stats.pkg
stats['downloads']
const propName = 'downloads'
stats[propName]
stats.rank
stats.downloads = 893
stats

{"pkg":"dplyr","downloads":893}

Creating an object from variables

Turn your variables into objects with this one easy trick

let pkg = 'dplyr'
let downloads = 893
const stats = {pkg: 'dplyr', downloads: 893}
stats = {pkg, downloads}

[TypeError] Assignment to constant variable.

Objects can hold arrays or more objects

Objects, like lists, hold anything: strings, numbers, arrays, other objects
Get the array of object keys with Object.keys()

let stats = {
  pkg: 'dplyr',
  downloads: 893,
  depends: ['glue', 'magrittr', 'rlang']
}
let future = {}
stats.version = {major: 0, minor: 8, patch: 3}
Object.keys(stats)
Object.keys(stats.depends)
Object.keys(future)

[]

Meet Array

Arrays are also collection, but have indices instead of keys
Arrays look a lot like R's vectors but...
...arrays can hold anything
What makes them special: indices, order, length

let pkgs = ['dplyr', 'ggplot2', 'tidyr', 'shiny']
let downloads = [893, 762, 679, 395]

let random = [1, 2, 'three']
let nothingYet = []

pkgs.length

Array Indexing

Arrays are homogeneous and can even include additional arrays
JavaScript is zero indexed
Bracket notation gets you one entry only
Arrays != vectors

let pkgs = [['dplyr', 'tidyr'], 'ggplot2', 'shiny']
pkgs[0]
pkgs[0][1]
pkgs * 1000

NaN

Arrays come with properties & methods

//property
pkgs.length
// some methods don't change the array
pkgs.includes('shiny')
pkgs.slice(1, 4)
// some methods do!
pkgs.push('glue')
pkgs.pop()
// some do not clearly state their intentions
pkgs.sort()

["dplyr","ggplot2","shiny","tidyr"]

Arrays are objects

Arrays are actually objets with special properties
One of those properties is that the keys are indices
What typeof thing is this? But is it an instanceof?

Object.keys(pkgs)
let stats = {pkg: pkgs[0], downloads: 900}
typeof pkgs
typeof stats
stats instanceof Object
pkgs instanceof Object
pkgs instanceof Array

true

Yeah, but is it an array?

More helpfully Array has a method

Array.isArray(pkgs)

true

Prototype & Inheritance12

Prototype & Inheritance13

Prototype & Inheritance14

Prototype & Inheritance15

Prototype & Inheritance16

Prototype & Inheritance17

Prototype & Inheritance18

Prototype & Inheritance19

Array Practice

A common pattern you'll see often is to initialize an empty array [] that is built up over time.

Give yourself an empty pkgs = []
30 seconds to think of your favorite packages using .push() to add each package.
Follow up:
- How many packages did you think of?
- What's the 3rd package your thought of?
- What's the last package you thought of?
- Get the last package but also remove it from your list.
- Alphabetize your packages.

00:30

Functions
21

There are too many ways to write functions
22

The Forms of Functionfunction increment(x, by) {
  return x + by
}

Most popular
Use it before you define it (hoisted)

23

The Forms of Functionfunction increment(x, by) {
  return x + by
}

Most popular
Use it before you define it (hoisted)

const increment = function(x, by) {
  return x + by
}

What is this, R?
Define it first

24

The Forms of Functionfunction increment(x, by) {
  return x + by
}

Most popular
Use it before you define it (hoisted)

const increment = function(x, by) {
  return x + by
}

What is this, R?
Define it first

function(x, by) {
  return x + by
}

🕵🏼 Anonymous
Used in callbacks
or must be called right away (function() {...})()

25

👩🏽‍💻

js4shiny::repl_js()

function increment(x, by) {
  return x + by
}
increment(1, 2)

with and without default arguments
can you reference the argument in the function name?
arguments are positional
arguments without defaults and without values?
const name = function()

const increment = (x, by) => {
  return x + by
}
increment(30, 12)

Functional RecommendationsGeneral Functions

Use these just about anywhere
Don't think too hard when you read it later

function increment(x, by) {
  return x + by
}

Anonymous Functions

Use when it fits on one line
Or anywhere you'd use
~ { .x + by }

const inc = (x, by) => x + by

29

Refactor the JavaScript in our first page

Create cities: an array of objects with the city name and age for
- San Francisco — 38.8
- Los Angeles — 35.9
Write a function updateCityAge that takes a city and age and updates the document
In the browser, use the array and function to switch between San Francisco and Los Angeles.

03:00

repl_example("first-page-04")

const cities = [
  {city: 'San Francisco', age: 38.8},
  {city: 'Los Angeles',   age: 35.9}
]
function updateCityAge(city, age) {
  console.log(
  `${city} residents are ~${age} years old`
  )
}
updateCityAge(cities[0].city, cities[0].age)
updateCityAge(cities[1].city, cities[1].age)

Browser Events32

Reactions, not reactivity33

Reactions, not reactivity34

Reactions, not reactivity35

Reactions, not reactivity36

Reactions, not reactivity37

Reactions, not reactivity38

Reactions, not reactivity39

Reactions, not reactivity40

Reactions, not reactivity41

Reactions, not reactivity42

Reactions, not reactivity43

Adding Event Listeners

You need

An event type to listen for
An an element to spy on
A callback (function) to run when the event happens

Adding Event Listeners

You need

An event type to listen for
An an element to spy on
A callback (function) to run when the event happens

element.addEventListener('click', function (event) {
// ... do things ...
// ... possibly info in event
})

👨🏼‍💻
[live coding]

⏭

repl_example("first-page-05")

Add Button

<button id="next-city" value="0">Next City</button>

Use first city on load

updateCityAge(cities[0])

Event listen to console.log()

What function will we use to find the button?

const btn = document.getElementById('next-city')
btn.addEventListener('click', function(event) {
  console.log(event)
})

Find the info we want to get from the event

event.target

btn.addEventListener('click', function(event) {
  console.log(event.target.value)
})

The button's value === current city

btn.addEventListener('click', function(event) {
  let btnValue = event.target.value
  console.log(cities[btnValue])
})

btnValue + 1 and show that city

Note we could have done btn.value to get the value, too What happens if you just do btnValue + 1?

btn.addEventListener('click', function(event) {
  let btnValue = event.target.value
  btnValue = Number(btnValue) + 1
  btn.value = btnValue
  updateCityAge(cities[btnValue])
})

If the counter > length of cities, start over

btn.addEventListener('click', function(event) {
  let btnValue = event.target.value
  btnValue = Number(btnValue) + 1
  if (btnValue >= cities.length) {
    btnValue = 0
  }
  btn.value = btnValue
  updateCityAge(cities[btnValue])
})

[
  {city: 'Fresno', age: 31.8},
  {city: 'Santa Rosa', age: 41.4}
]

JSON, quicklyconst cities = [
  {
    city: 'San Francisco',
    age: 38.8
  },
  {
    city: 'Los Angeles',
    age: 35.9
  }
]

[
  {
    "city": "San Francisco",
    "age": 38.8
  },
  {
    "city": "Los Angeles",
    "age": 35.9
  }
]

52

JSON, quickly

const cities = [
  {
    city: 'San Francisco',
    age: 38.8
  },
  {
    city: 'Los Angeles',
    age: 35.9
  }
]

[
  {
    "city": "San Francisco",
    "age": 38.8
  },
  {
    "city": "Los Angeles",
    "age": 35.9
  }
]

const citiesAsJson = JSON.stringify(cities); citiesAsJson

[{"city":"San Francisco","age":38.8},{"city":"Los Angeles","age":35.9}]

JSON, quickly

const cities = [
  {
    city: 'San Francisco',
    age: 38.8
  },
  {
    city: 'Los Angeles',
    age: 35.9
  }
]

[
  {
    "city": "San Francisco",
    "age": 38.8
  },
  {
    "city": "Los Angeles",
    "age": 35.9
  }
]

JSON.parse(citiesAsJson)[0]

{"city":"San Francisco","age":38.8}

Add More Data!

Run repl_example("first-page-07")
I added JSON data inside <script id="data-cities">
Find the element and save its .textContent to a variable
Use JSON.parse() to convert the JSON string to data in place of cities.
Watch out! The data calls age median_age, make sure you update your function.
Bonus: Search MDN for destructuring assignment and use the Object destructuring section to learn how to assign a property to a new variable name
Bonus: Add median_home_price to your page, too.

05:00

Styles and JavaScript in External Files

Our index.html is getting crowded.

Styles: `style.css`

<head>
  <link href="style.css" rel="stylesheet" />
</head>

Script: `script.js`

// last thing in <body>
<script src="script.js"></script>

repl_example("first-page-09")

Can discuss placement of either here

Next: Look Sharp! (Style)

If I have extra time I can demo

repl_example("event-types")

OK Computer

Interacting with the Browser

Garrick Aden-Buie

rstudio::conf(2020, "JavaScript for Shiny Users")

Arrays
& Objects2

👨🏼‍💻
[live coding]

⏭

Meet Object

Objects are like R's lists (except used a whole lot more in JS)
Each entry has a name called a key and a value.
The value is a property if it's a constant or a method if it's a function
Access elements with .dot or [bracket] notation
Undefined properties are ... undefined
const means can't reasign the whole object

const stats = {pkg: 'dplyr', downloads: 893}
stats.pkg
stats['downloads']
const propName = 'downloads'
stats[propName]
stats.rank
stats.downloads = 893
stats

Creating an object from variables

Turn your variables into objects with this one easy trick

let pkg = 'dplyr'
let downloads = 893
const stats = {pkg: 'dplyr', downloads: 893}
stats = {pkg, downloads}

Objects can hold arrays or more objects

Objects, like lists, hold anything: strings, numbers, arrays, other objects
Get the array of object keys with Object.keys()

let stats = {
  pkg: 'dplyr',
  downloads: 893,
  depends: ['glue', 'magrittr', 'rlang']
}
let future = {}
stats.version = {major: 0, minor: 8, patch: 3}
Object.keys(stats)
Object.keys(stats.depends)
Object.keys(future)

Meet Array

Arrays are also collection, but have indices instead of keys
Arrays look a lot like R's vectors but...
...arrays can hold anything
What makes them special: indices, order, length

let pkgs = ['dplyr', 'ggplot2', 'tidyr', 'shiny']
let downloads = [893, 762, 679, 395]

let random = [1, 2, 'three']
let nothingYet = []

pkgs.length

Array Indexing

Arrays are homogeneous and can even include additional arrays
JavaScript is zero indexed
Bracket notation gets you one entry only
Arrays != vectors

let pkgs = [['dplyr', 'tidyr'], 'ggplot2', 'shiny']
pkgs[0]
pkgs[0][1]
pkgs * 1000

Arrays come with properties & methods

//property
pkgs.length
// some methods don't change the array
pkgs.includes('shiny')
pkgs.slice(1, 4)
// some methods do!
pkgs.push('glue')
pkgs.pop()
// some do not clearly state their intentions
pkgs.sort()

Arrays are objects

Arrays are actually objets with special properties
One of those properties is that the keys are indices
What typeof thing is this? But is it an instanceof?

Object.keys(pkgs)
let stats = {pkg: pkgs[0], downloads: 900}
typeof pkgs
typeof stats
stats instanceof Object
pkgs instanceof Object
pkgs instanceof Array

Yeah, but is it an array?

More helpfully Array has a method

Array.isArray(pkgs)

Prototype & Inheritance12

Prototype & Inheritance13

Prototype & Inheritance14

Prototype & Inheritance15

Prototype & Inheritance16

Prototype & Inheritance17

Prototype & Inheritance18

Prototype & Inheritance19

Array Practice

A common pattern you'll see often is to initialize an empty array [] that is built up over time.

Give yourself an empty pkgs = []
30 seconds to think of your favorite packages using .push() to add each package.
Follow up:
- How many packages did you think of?
- What's the 3rd package your thought of?
- What's the last package you thought of?
- Get the last package but also remove it from your list.
- Alphabetize your packages.

00:30

Functions
21

There are too many ways to write functions
22

The Forms of Functionfunction increment(x, by) {
  return x + by
}

Most popular
Use it before you define it (hoisted)

23

The Forms of Functionfunction increment(x, by) {
  return x + by
}

Most popular
Use it before you define it (hoisted)

const increment = function(x, by) {
  return x + by
}

What is this, R?
Define it first

24

The Forms of Functionfunction increment(x, by) {
  return x + by
}

Most popular
Use it before you define it (hoisted)

const increment = function(x, by) {
  return x + by
}

What is this, R?
Define it first

function(x, by) {
  return x + by
}

🕵🏼 Anonymous
Used in callbacks
or must be called right away (function() {...})()

25

👩🏽‍💻

js4shiny::repl_js()

function increment(x, by) {
  return x + by
}
increment(1, 2)

with and without default arguments
can you reference the argument in the function name?
arguments are positional
arguments without defaults and without values?
const name = function()

const increment = (x, by) => {
  return x + by
}
increment(30, 12)

Functional RecommendationsGeneral Functions

Use these just about anywhere
Don't think too hard when you read it later

function increment(x, by) {
  return x + by
}

Anonymous Functions

Use when it fits on one line
Or anywhere you'd use
~ { .x + by }

const inc = (x, by) => x + by

29

Refactor the JavaScript in our first page

Create cities: an array of objects with the city name and age for
- San Francisco — 38.8
- Los Angeles — 35.9
Write a function updateCityAge that takes a city and age and updates the document
In the browser, use the array and function to switch between San Francisco and Los Angeles.

03:00

repl_example("first-page-04")

const cities = [
  {city: 'San Francisco', age: 38.8},
  {city: 'Los Angeles',   age: 35.9}
]
function updateCityAge(city, age) {
  console.log(
  `${city} residents are ~${age} years old`
  )
}
updateCityAge(cities[0].city, cities[0].age)
updateCityAge(cities[1].city, cities[1].age)

Browser Events32

Reactions, not reactivity33

Reactions, not reactivity34

Reactions, not reactivity35

Reactions, not reactivity36

Reactions, not reactivity37

Reactions, not reactivity38

Reactions, not reactivity39

Reactions, not reactivity40

Reactions, not reactivity41

Reactions, not reactivity42

Reactions, not reactivity43

Adding Event Listeners

You need

An event type to listen for
An an element to spy on
A callback (function) to run when the event happens

Adding Event Listeners

You need

An event type to listen for
An an element to spy on
A callback (function) to run when the event happens

element.addEventListener('click', function (event) {
// ... do things ...
// ... possibly info in event
})

👨🏼‍💻
[live coding]

⏭

repl_example("first-page-05")

Add Button

<button id="next-city" value="0">Next City</button>

Use first city on load

updateCityAge(cities[0])

Event listen to console.log()

What function will we use to find the button?

const btn = document.getElementById('next-city')
btn.addEventListener('click', function(event) {
  console.log(event)
})

Find the info we want to get from the event

event.target

btn.addEventListener('click', function(event) {
  console.log(event.target.value)
})

The button's value === current city

btn.addEventListener('click', function(event) {
  let btnValue = event.target.value
  console.log(cities[btnValue])
})

btnValue + 1 and show that city

Note we could have done btn.value to get the value, too What happens if you just do btnValue + 1?

btn.addEventListener('click', function(event) {
  let btnValue = event.target.value
  btnValue = Number(btnValue) + 1
  btn.value = btnValue
  updateCityAge(cities[btnValue])
})

If the counter > length of cities, start over

btn.addEventListener('click', function(event) {
  let btnValue = event.target.value
  btnValue = Number(btnValue) + 1
  if (btnValue >= cities.length) {
    btnValue = 0
  }
  btn.value = btnValue
  updateCityAge(cities[btnValue])
})

[
  {city: 'Fresno', age: 31.8},
  {city: 'Santa Rosa', age: 41.4}
]

JSON, quicklyconst cities = [
  {
    city: 'San Francisco',
    age: 38.8
  },
  {
    city: 'Los Angeles',
    age: 35.9
  }
]

[
  {
    "city": "San Francisco",
    "age": 38.8
  },
  {
    "city": "Los Angeles",
    "age": 35.9
  }
]

52

JSON, quickly

const cities = [
  {
    city: 'San Francisco',
    age: 38.8
  },
  {
    city: 'Los Angeles',
    age: 35.9
  }
]

[
  {
    "city": "San Francisco",
    "age": 38.8
  },
  {
    "city": "Los Angeles",
    "age": 35.9
  }
]

const citiesAsJson = JSON.stringify(cities); citiesAsJson

JSON, quickly

const cities = [
  {
    city: 'San Francisco',
    age: 38.8
  },
  {
    city: 'Los Angeles',
    age: 35.9
  }
]

[
  {
    "city": "San Francisco",
    "age": 38.8
  },
  {
    "city": "Los Angeles",
    "age": 35.9
  }
]

JSON.parse(citiesAsJson)[0]

Add More Data!

Run repl_example("first-page-07")
I added JSON data inside <script id="data-cities">
Find the element and save its .textContent to a variable
Use JSON.parse() to convert the JSON string to data in place of cities.
Watch out! The data calls age median_age, make sure you update your function.
Bonus: Search MDN for destructuring assignment and use the Object destructuring section to learn how to assign a property to a new variable name
Bonus: Add median_home_price to your page, too.

05:00

Styles and JavaScript in External Files

Our index.html is getting crowded.

Styles: `style.css`

<head>
  <link href="style.css" rel="stylesheet" />
</head>

Script: `script.js`

// last thing in <body>
<script src="script.js"></script>

repl_example("first-page-09")

Can discuss placement of either here

Next: Look Sharp! (Style)

If I have extra time I can demo

repl_example("event-types")

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
Number + Return	Go to specific slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help
o	Tile View: Overview of Slides

OK Computer

Interacting with the Browser

Arrays& Objects

Meet Object

Creating an object from variables

Objects can hold arrays or more objects

Meet Array

Array Indexing

Arrays come with properties & methods

Arrays are objects

Yeah, but is it an array?

Prototype & Inheritance

Prototype & Inheritance

Prototype & Inheritance

Prototype & Inheritance

Prototype & Inheritance

Prototype & Inheritance

Prototype & Inheritance

Prototype & Inheritance

Array Practice

Functions

The Forms of Function

The Forms of Function

The Forms of Function

Functional Recommendations

General Functions

Anonymous Functions

Refactor the JavaScript in our first page

Browser Events

Reactions, not reactivity

Reactions, not reactivity

Reactions, not reactivity

Reactions, not reactivity

Reactions, not reactivity

Reactions, not reactivity

Reactions, not reactivity

Reactions, not reactivity

Reactions, not reactivity

Reactions, not reactivity

Reactions, not reactivity

Adding Event Listeners

Adding Event Listeners

Add Button

Use first city on load

Event listen to console.log()

Find the info we want to get from the event

The button's value === current city

btnValue + 1 and show that city

If the counter > length of cities, start over

JSON, quickly

JSON, quickly

JSON, quickly

Add More Data!

Styles and JavaScript in External Files

Styles: style.css

Script: script.js

Next: Look Sharp! (Style)

Arrays& Objects

Help

Interactivty

OK Computer

Interacting with the Browser

Arrays& Objects

Meet Object

Creating an object from variables

Objects can hold arrays or more objects

Meet Array

Array Indexing

Arrays come with properties & methods

Arrays are objects

Yeah, but is it an array?

Prototype & Inheritance

Prototype & Inheritance

Prototype & Inheritance

Prototype & Inheritance

Prototype & Inheritance

Prototype & Inheritance

Prototype & Inheritance

Prototype & Inheritance

Array Practice

Arrays
& Objects

Styles: `style.css`

Script: `script.js`

Arrays
& Objects

Arrays
& Objects

Styles: `style.css`

Script: `script.js`