CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional...
Transcript of CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional...
![Page 2: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/2.jpg)
Schedule
![Page 3: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/3.jpg)
Prereq: Command line
![Page 4: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/4.jpg)
Practical Functional JavaScript
![Page 5: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/5.jpg)
Example: findIndex
.findIndex( , ):
findIndex
this
![Page 6: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/6.jpg)
findIndex
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
findIndex
'strawberry' flavors
![Page 7: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/7.jpg)
findIndex
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
true
function isStrawberry(element) {
return element === 'strawberry';
}
element index array
element
![Page 8: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/8.jpg)
findIndex
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
findIndex
function isStrawberry(element) {
return element === 'strawberry';
}
const indexOfStrawberry = flavors.findIndex(isStrawberry);
![Page 9: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/9.jpg)
findIndex
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
isStrawberry
function isStrawberry(element) {
return element === 'strawberry';
}
const indexOfStrawberry = flavors.findIndex(isStrawberry);
![Page 10: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/10.jpg)
findIndex
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
function isStrawberry(element) {
return element === 'strawberry';
}
const indexOfStrawberry = flavors.findIndex(isStrawberry);
![Page 11: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/11.jpg)
findIndex
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
function isStrawberry(element) {
return element === 'strawberry';
}
const indexOfStrawberry = flavors.findIndex(isStrawberry);
![Page 12: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/12.jpg)
findIndex
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
function isStrawberry(element) {
return element === 'strawberry';
}
const indexOfStrawberry = flavors.findIndex(isStrawberry);
![Page 13: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/13.jpg)
findIndex
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
function isStrawberry(element) {
return element === 'strawberry';
}
const indexOfStrawberry = flavors.findIndex(isStrawberry);
![Page 14: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/14.jpg)
findIndex
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
function isStrawberry(element) {
return element === 'strawberry';
}
const indexOfStrawberry = flavors.findIndex(isStrawberry);
![Page 15: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/15.jpg)
findIndex
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
function isStrawberry(element) {
return element === 'strawberry';
}
const indexOfStrawberry = flavors.findIndex(isStrawberry);
![Page 16: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/16.jpg)
findIndex
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
function isStrawberry(element) {
return element === 'strawberry';
}
const indexOfStrawberry = flavors.findIndex(isStrawberry);
findIndex
![Page 17: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/17.jpg)
findIndex
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
function isStrawberry(element) {
return element === 'strawberry';
}
const indexOfStrawberry = flavors.findIndex(isStrawberry);
![Page 18: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/18.jpg)
Anonymous functions
![Page 19: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/19.jpg)
Anonymous functions
function isStrawberry(element) {
return element === 'strawberry';
}
const index = flavors.findIndex(isStrawberry);
findIndex:
![Page 20: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/20.jpg)
Anonymous functions
const index = flavors.findIndex(
function(element) { return element === 'strawberry'; });
findIndex:
![Page 21: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/21.jpg)
Arrow functions
const index = flavors.findIndex(
function(element) { return element === 'strawberry'; });
![Page 22: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/22.jpg)
Arrow functions
const index = flavors.findIndex(
(element) => { return element === 'strawberry'; });
![Page 23: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/23.jpg)
Concise arrow functions
const index = flavors.findIndex(
(element) => { return element === 'strawberry'; });
![Page 24: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/24.jpg)
Concise arrow functions
const index = flavors.findIndex(
element => element === 'strawberry');
![Page 25: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/25.jpg)
Case-insensitive search
const index = flavors.findIndex(
element => element.toLowerCase() === 'strawberry');
![Page 26: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/26.jpg)
Case-insensitive search
const index = flavors.findIndex(
element => element.toLowerCase() === 'strawberry');
for (let i = 0; i < flavors.length; i++) {
if (flavors[i].toLowerCase() === 'strawberry') {
break;
}
}
const index = i;
![Page 27: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/27.jpg)
Currying
![Page 28: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/28.jpg)
isFlavor
strawberry
function isStrawberry(element) {
return element === 'strawberry';
}
![Page 29: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/29.jpg)
isFlavor
isFlavor
function isFlavor(flavor, element) {
return element === flavor;
}
![Page 30: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/30.jpg)
isFlavor
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
flavor
findIndex
function isFlavor(element) {
// ERROR: flavor is undefined!
return element === flavor;
}
const indexOfFlavor = flavors.findIndex(isFlavor);
![Page 31: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/31.jpg)
Currying
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
function createFlavorTest(flavor) {
function isFlavor(element) {
return element === flavor;
}
return isFlavor;
}
const isStrawberry = createFlavorTest('strawberry');
const indexOfFlavor = flavors.findIndex(isStrawberry);
flavor
![Page 32: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/32.jpg)
Aside: closure
const flavors =
['vanilla', 'chocolate', 'strawberry', 'green tea'];
function createFlavorTest(flavor) {
function isFlavor(element) {
return element === flavor;
}
return isFlavor;
}
const isStrawberry = createFlavorTest('strawberry');
const indexOfFlavor = flavors.findIndex(isStrawberry);
flavor
![Page 33: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/33.jpg)
Currying
function isFlavor(flavor, element) {
return element === flavor;
}
function createFlavorTest(flavor) {
function isFlavor(element) {
return element === flavor;
}
return isFlavor;
}
flavors.findIndex(isFlavor);
![Page 34: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/34.jpg)
Review: ES6 classes
this
this
this
this
bind: this
![Page 35: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/35.jpg)
Review: Functional JavaScript
![Page 36: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/36.jpg)
More Array functions
.forEach( )
.filter( )
.every( )
![Page 37: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/37.jpg)
Loading data from files
![Page 38: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/38.jpg)
Loading data from a file
![Page 39: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/39.jpg)
Intuition: loadFromFile
// FAKE HYPOTHETICAL API.
// This is not real a JavaScript function!
const contents = loadFromFile('images.txt');
![Page 40: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/40.jpg)
Intuition: loadFromFile
// FAKE HYPOTHETICAL API.
// This is not real a JavaScript function!
const contents = loadFromFile('images.txt');
![Page 41: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/41.jpg)
Intuition: loadFromFile
// FAKE HYPOTHETICAL API.
// This is not real a JavaScript function!
function onSuccess(response) {
const body = response.text;
...
}
loadFromFile('images.txt', onSuccess, onFail);
onSuccess onFail
![Page 42: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/42.jpg)
Fetch API
![Page 43: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/43.jpg)
Fetch API: fetch()
fetch('images.txt');
XMLHttpRequest
![Page 44: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/44.jpg)
Fetch API: fetch()
fetch('images.txt');
fetch()
Promise
![Page 45: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/45.jpg)
Fetch API: fetch()
fetch('images.txt');
fetch()
Promise
- Promise
![Page 46: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/46.jpg)
Promises:Another conceptual odyssey
![Page 47: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/47.jpg)
Promises and .then()
Promise
then()
Promise
![Page 48: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/48.jpg)
Simple example: getUserMedia
getUserMedia
navigator.getUserMedia
navigator.mediaDevices.getUserMedia
Promise
![Page 49: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/49.jpg)
getUserMedia with callbacks
const video = document.querySelector('video');
function onCameraOpen(stream) {
video.srcObject = stream;
}
function onError(error) {
console.log(error);
}
navigator.getUserMedia({ video: true },
onCameraOpen, onError);
CodePen
![Page 50: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/50.jpg)
getUserMedia with Promise
const video = document.querySelector('video');
function onCameraOpen(stream) {
video.srcObject = stream;
}
function onError(error) {
console.log(error);
}
navigator.mediaDevices.getUserMedia({ video: true })
.then(onCameraOpen, onError);
CodePen
![Page 51: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/51.jpg)
Hypothetical Fetch API
// FAKE HYPOTHETICAL API.
// This is not how fetch is called!
function onSuccess(response) {
...
}
function onFail(response) {
...
}
fetch('images.txt', onSuccess, onFail);
![Page 52: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/52.jpg)
Real Fetch API
function onSuccess(response) {
...
}
function onFail(response) {
...
}
fetch('images.txt').then(onSuccess, onFail);
![Page 53: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/53.jpg)
Promise syntax
fetch('images.txt').then(onSuccess, onFail);
![Page 54: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/54.jpg)
Promise syntax
fetch('images.txt').then(onSuccess, onFail);
const promise = fetch('images.txt');
promise.then(onSuccess, onFail);
![Page 55: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/55.jpg)
Promise syntax
const promise = fetch('images.txt');
promise.then(onSuccess, onFail);
fetch Promise
.then()
![Page 56: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/56.jpg)
Promise syntax
const promise = fetch('images.txt');
promise.then(onSuccess, onFail);
fetch Promise
.then()
![Page 57: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/57.jpg)
Using Fetch
function onSuccess(response) {
console.log(response.status);
}
fetch('images.txt').then(onSuccess);
response.status
![Page 58: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/58.jpg)
Fetch attempt
function onSuccess(response) {
console.log(response.status);
}
function onError(error) {
console.log('Error: ' + error);
}
fetch('images.txt')
.then(onSuccess, onError);
![Page 59: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/59.jpg)
Fetch error
![Page 60: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/60.jpg)
Local files
file://
file://
![Page 61: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/61.jpg)
Serve over HTTP
$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...
http://localhost:8000/
![Page 62: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/62.jpg)
$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...
![Page 64: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/64.jpg)
fetch()
![Page 65: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/65.jpg)
Using Fetch
function onSuccess(response) {
..
}
fetch('images.txt').then(onSuccess);
response.status
- response.text()
Promise
![Page 66: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/66.jpg)
function onSuccess(response) {
console.log(response.status);
}
function onError(error) {
console.log('Error: ' + error);
}
fetch('images.txt')
.then(onSuccess, onError);
text() Promise
![Page 67: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/67.jpg)
function onStreamProcessed(text) {
console.log(text);
}
function onResponse(response) {
console.log(response.status);
response.text().then(onStreamProcessed);
}
function onError(error) {
console.log('Error: ' + error);
}
fetch('images.txt').then(onResponse, onError);
![Page 68: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/68.jpg)
Chaining Promises
fetch onResponse
response.text()
onStreamProcessed
function onStreamProcessed(text) { … }
function onResponse(response) {
response.text().then(onStreamProcessed);
}
fetch('images.txt').then(onResponse, onError);
![Page 69: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/69.jpg)
function onStreamProcessed(text) {
console.log(text);
}
function onResponse(response) {
response.text().then(onStreamProcessed);
}
function onError(error) {
console.log('Error: ' + error);
}
fetch('images.txt').then(onResponse, onError);
![Page 70: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/70.jpg)
function onStreamProcessed(text) {
console.log(text);
}
function onResponse(response) {
return response.text();
}
function onError(error) {
console.log('Error: ' + error);
}
fetch('images.txt')
.then(onResponse, onError)
.then(onStreamProcessed);
![Page 71: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/71.jpg)
Chaining Promises
function onStreamProcessed(text) {
console.log(text);
}
function onResponse(response) {
return response.text();
}
fetch('images.txt')
.then(onResponse, onError)
.then(onStreamProcessed);
![Page 72: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/72.jpg)
Chaining Promises
function onStreamProcessed(text) {
console.log(text);
}
function onResponse(response) {
return response.text();
}
const responsePromise = fetch('images.txt')
.then(onResponse, onError)
responsePromise.then(onStreamProcessed);
onResponse
fetch
![Page 73: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/73.jpg)
Chaining Promises
function onStreamProcessed(text) {
console.log(text);
}
function onResponse(response) {
return response.text();
}
fetch('images.txt')
.then(onResponse, onError)
.then(onStreamProcessed);
![Page 74: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/74.jpg)
Completed example
function onStreamProcessed(text) { const urls = text.split('\n'); for (const url of urls) { const image = document.createElement('img'); image.src = url; document.body.append(image); }}function onSuccess(response) { response.text().then(onStreamProcessed)}function onError(error) { console.log('Error: ' + error);}
fetch('images.txt').then(onSuccess, onError);
![Page 75: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/75.jpg)
JSON
![Page 76: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/76.jpg)
JavaScript Object Notation
JSON.stringify( )
JSON.parse( )
![Page 77: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/77.jpg)
JSON.stringify()
JSON.stringify()
const bear = {
name: 'Ice Bear',
hobbies: ['knitting', 'cooking', 'dancing']
};
const serializedBear = JSON.stringify(bear);
console.log(serializedBear);
CodePen
![Page 78: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/78.jpg)
JSON.parse()
JSON.parse()
const bearString = '{"name":"Ice
Bear","hobbies":["knitting","cooking","danci
ng"]}';
const bear = JSON.parse(bearString);
console.log(bear);
CodePen
![Page 79: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/79.jpg)
Why JSON?
![Page 80: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/80.jpg)
JSON
![Page 81: CS193X: Web Programming Fundamentals Victoria Kirst Spring … · 2017-06-10 · Review: Functional JavaScript. More Array functions.forEach( ).filter( ).every( ) Loading data from](https://reader034.fdocuments.net/reader034/viewer/2022050123/5f53096366868f0325094ff3/html5/thumbnails/81.jpg)
Fetch API and JSON
function onStreamProcessed(json) {
console.log(json);
}
function onResponse(response) {
return response.json();
}
fetch('songs.json')
.then(onResponse, onError)
.then(onStreamProcessed);