Skip to content

Instantly share code, notes, and snippets.

@rogerwschmidt

rogerwschmidt/Local-storage.md

Created May 31, 2018 16:07
Show Gist options
  • Save rogerwschmidt/31bf63e811b4dca7c0e76cc7ca54d5d5 to your computer and use it in GitHub Desktop.
Save rogerwschmidt/31bf63e811b4dca7c0e76cc7ca54d5d5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Local-storage.md

Local storage instructor notes

Objectives

  • Explain what happens when an HTML, with javascript, page is loaded
  • Explain what local storage is
  • Describe why local storage is useful
  • Use local storage to persist data

What happens when an HTML page with Javascript is loaded by the browswer?

  • In your teams, create a timeline of how the following HTML is loaded into a browswer
<!-- index.html -->
<html>
  <head>
    <script defer src="/main.js"><script/>
  </head>
  <body>
    <h1> Hello World!</h1>
  </body>
</html>

// main.js
const body = document.querySelector('body')
const name = document.createElement('p')
name.innerHTML = 'Roger'

body.appendChild(name)
  • How would the order change if you did not have the defer keyword in the script tag? Would any errors be triggered?

What is local storage?

  • With your teams,
    • Reseach what local storage and summarize it
    • Identify 3 methods that allow you to interact with it
    • Find where to see the contents of local storage in your browswer development console

Why is local storage useful?

  • With your teams, establish why local storage would be useful

How do you use local storage to persist data?

  • Create a Todo application
    • Add items
    • Clear all items
  • Updated the todo application so that list items persist data
Raw
setTimeout-setInterval.md

setTimeout Instructor Notes

Objectives

  • Describe how a simple program is executed in javascript
  • Explain what setTimeout is
  • Describe why setTimeout is useful
  • Use set timeout to create an interactive experience

How does a program run when executed by javascript?

  • What is the output of the following program?
console.log('1')
console.log('2')
console.log('3')
const a = 10 + 10
console.log(a)
  • Does this program run in order?

What is setTimeOut?

  • With your team, create a definition of setTimeout
  • What does the setTimeout take as an argument?

Why is setTimeout useful?

  • With your team, identify a situation where setTimeout is useful?

How do you create an interactive experience using setTimeout?

  • Create a button that displays a message when clicked.
  • Add setTimeout to cleare the message 1 second after being displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment