forked from HackYourFuture/JavaScript3
-
Notifications
You must be signed in to change notification settings - Fork 12
Adding Javascript 3 lecture notes #3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| ## XMLHttpRequests | ||
| - What is an Http request? | ||
| - Life of a request | ||
| - https://dev.to/dangolant/things-i-brushed-up-on-this-week-the-http-request-lifecycle- | ||
| - REST | ||
| - Verbs | ||
| - Headers | ||
| - Status codes | ||
| - Example w/ curl | ||
| - Now how do we send a request with a browser? | ||
| - Websites of the early era required a complete page load upon each request (https://en.wikipedia.org/wiki/Ajax_(programming)) | ||
| - This is inefficient and provides a bad user experience with full reloads on each action. Example: MapQuest in the early days. | ||
| - AJAX | ||
| - Gmail in 2004 and Google Maps in 2005 | ||
| - A way for browsers to send requests asyncronously! 🎉 | ||
| - In 2006, W3C releated XMLHttpRequest specification | ||
| - XMLHttpRequest | ||
| - Guide: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest | ||
|
|
||
| ## API calls | ||
| - Open API's without need for auth tokens (https://github.com/public-apis/public-apis/blob/master/README.md). Use one for example. | ||
| - Create new HTML file | ||
| - Create a button that will have an event listener | ||
| - Retrieve data from api with XMLHttpRequest obj | ||
|
|
||
| - ...but callbacks? [joke](https://www.reddit.com/r/ProgrammerHumor/comments/che938/asynchronous_javascript/) | ||
|
|
||
|
|
||
| ## Structure for a basic SPA |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>TV show search</title> | ||
| <style> | ||
| #actors { | ||
| display: flex; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <input id="query" type="text" /> | ||
| <button id="search">Search Show</button> | ||
| <div id="poster"></div> | ||
| <div id="actors"></div> | ||
|
|
||
| <script> | ||
| document.getElementById('search').addEventListener('click', () => { | ||
| const inputText = document.getElementById('query').value; | ||
| apiShowSearch(inputText); | ||
| }); | ||
|
|
||
| function apiShowSearch(searchQuery) { | ||
| const xmlReq = new XMLHttpRequest(); | ||
|
|
||
| xmlReq.addEventListener('load', event => { | ||
| const response = JSON.parse(event.currentTarget.response); | ||
| displayShowPoster(response); | ||
| getActors(response[0].show.id); | ||
| }); | ||
|
|
||
| xmlReq.open('GET', `http://api.tvmaze.com/search/shows?q=${searchQuery}`, true); | ||
| xmlReq.send(); | ||
| } | ||
|
|
||
| function displayShowPoster(showResultsArr) { | ||
| const topResult = showResultsArr[0].show; | ||
| const posterDiv = document.getElementById('poster'); | ||
| posterDiv.innerHTML = ''; | ||
|
|
||
| const imageEl = document.createElement('img'); | ||
| imageEl.src = topResult.image.original; | ||
| imageEl.width = '200'; | ||
| posterDiv.appendChild(imageEl); | ||
| } | ||
|
|
||
| function getActors(showId) { | ||
| const xmlReq = new XMLHttpRequest(); | ||
|
|
||
| xmlReq.addEventListener('load', event => { | ||
| const response = JSON.parse(event.currentTarget.response); | ||
| displayActorHeadshots(response); | ||
| }); | ||
|
|
||
| xmlReq.open('GET', `http://api.tvmaze.com/shows/${showId}/cast`, true); | ||
| xmlReq.send(); | ||
| } | ||
|
|
||
| function displayActorHeadshots(castData) { | ||
| const actorImagesEl = document.getElementById('actors'); | ||
| actorImagesEl.innerHTML = ''; | ||
|
|
||
| for (let castMember of castData) { | ||
| const imageEl = document.createElement('img'); | ||
| imageEl.src = castMember.person.image.original; | ||
| imageEl.width = '100'; | ||
| actorImagesEl.appendChild(imageEl); | ||
| } | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| ## Event Loop | ||
| _Split class in groups of two or three_ | ||
|
|
||
| 1) How many threads does the browser's Javascript runtime have? | ||
| - *Bonus*: What is a thread? | ||
|
|
||
| 2) In what order will the colors output to the console? | ||
| ``` | ||
| const foo = () => { | ||
| console.log('pink'); | ||
| } | ||
| const bar = () => { | ||
| console.log('black'); | ||
| foo(); | ||
| console.log('blue'); | ||
| } | ||
| bar(); | ||
| ``` | ||
|
|
||
| 3) What is "the stack"? | ||
|
|
||
| 4) For each line of code below, how many frames are on the call stack? | ||
| ``` | ||
| const getDate = () => new Date().toDateString() | ||
|
|
||
| const greet = (name, greeting) => { | ||
| return `${greeting}, ${name}. You arrived on ${getDate()}.` | ||
| } | ||
|
|
||
| greet('mike', 'hello') | ||
| ``` | ||
|
|
||
| 5) What is it called when the javascript engine (node or browser) exceeds the amount of frames it can handle on the stack? | ||
|
|
||
| 6) What is the order of the colors output to the console? | ||
| ``` | ||
| const foo = () => { | ||
| console.log('pink'); | ||
| } | ||
| const bar = () => { | ||
| console.log('black'); | ||
| setTimeout(foo, 0); | ||
| console.log('blue'); | ||
| } | ||
| bar(); | ||
| ``` | ||
|
|
||
| 7) What keeps track of these asynchronous webAPI's? | ||
| - setTimeout | ||
| - addEventListener() | ||
| - fetch() | ||
|
|
||
| a) call stack | ||
| b) callback que | ||
| c) event loop | ||
| d) browser | ||
| e) Javascript runtime | ||
|
|
||
| 8) What is the name of the type of function (called someFunc in the example) that gets called after an asynchronous event? | ||
| ``` | ||
| document.querySelector('button').addEventListener('click', someFunc); | ||
| ``` | ||
|
|
||
| 9) A function you've never seen before... What would you guess this function does? Is it synchronous or asynchronous? | ||
| ``` | ||
| request('http://www.pokemonapi.dev/info/squirtle', function(error, response, body) { | ||
| console.log(body); | ||
| console.log('Done!'); | ||
| }); | ||
| ``` | ||
|
|
||
| 10) In Javascript land, what does it mean for code to be "blocking"? | ||
|
|
||
| 11) Which function, when executed, will not block the UI? | ||
| ``` | ||
| const countToOneBillionv1 = () => { | ||
| for (let i = 0; i < 10; i++) { | ||
| longRunningOperation(i) | ||
| } | ||
| } | ||
|
|
||
| const countToOneBillionv2 = () => { | ||
| for (let i = 0; i < 10; i++) { | ||
| setTimeout(() => longRunningOperation(i), 0) | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 12) What is the order of the colors output to the console? | ||
| ``` | ||
| fetch('http://pokemon.dev/api/id/squirtle') | ||
| .then(result => { | ||
| console.log('blue') | ||
| return fetch('http://pokemon.dev/api/id/charmander') | ||
| }) | ||
| .then(result => { | ||
| console.log('red') | ||
| }) | ||
|
|
||
| console.log('green') | ||
| ``` | ||
|
|
||
| 13) What is the order of the colors output to the console? | ||
| ``` | ||
| const foo = async () => { | ||
| console.log('green') | ||
| const result = await fetch('http://pokemon.dev/api/id/squirtle') | ||
| console.log('blue') | ||
| const result = await fetch('http://pokemon.dev/api/id/charmander') | ||
| console.log('red') | ||
| } | ||
| foo(); | ||
| ``` | ||
|
|
||
| 14) What is the order of the colors output to the console? | ||
| ``` | ||
| const myArray = ['red', 'blue', 'green']; | ||
| myArray.forEach(function(item) { | ||
| console.log(item); | ||
| }); | ||
|
|
||
| setTimeout(function() { | ||
| console.log('orange'); | ||
| }, 50); | ||
|
|
||
| for (let i=0; i < myArray.length; i++) { | ||
| console.log(myArray[i]); | ||
| if (i === (myArray.length - 1)) { | ||
| setTimeout(function() { | ||
| console.log('black'); | ||
| }, 0); | ||
| } | ||
| } | ||
|
|
||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@grod220 was these removed by mistake? Or is there something I miss?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm pretty sure the links didn't work 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
They work assuming you have forked the fundamentals repo (atleast that’s what I found)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added a PR to restore them, #5