💡 HOMEWORK for next time: https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript2/week2/homework.md

💪 Prep for next session: https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript2/week3/preparation.md

Recap from Week 1

• Browser
  • How do you run JavaScript in the browser?
  • What debugging tools can you use in the browser?
• DOM
  • What is the DOM for?
  • How do we interact with the DOM as web developers?
• Preparation or homework questions? (10 minutes)
• In general: Ask questions! There are NO stupid questions.

Events (from Week 1)

— Key concepts

• What are events for?

  • Synchronizing external things with your website
  • Mostly used for user interaction
  • But also: changes like low battery or other operating system events

• How to use events?

  • JavaScript can attach listeners to events
  • Listeners run code you define every time the event happens

• Common events

  • Click, Mouseover, Mousedown, Mouseup etc.
  • Touchstart, Touchend, Touchmove etc.
  • Drag, Dragstart, Dragenter, Dragleave, Drop etc.
  • Keydown, Keypress, Keyup etc.
  • Change, Input, Copy, Paste etc.

• Resources & exercises

Working with Arrays

— Key concepts

• Array methods are used to manipulate arrays.

• Some most used array methods are:

  • **map:** creates a new array populated with the results of calling a provided function on every element in the calling array.
  • **forEach:** looks a lot like map, but it doesn’t return anything (= the result is always undefined). It only executes a function to each item of the array without creating a new array.
  • filter: creates a new array filled with elements that pass a test provided by a function.
  • sort: sorts the elements of an array.

• Resources & exercises

Arrow Functions

— Key concepts

• Compact alternative to the regular function() {}
  → Mostly “syntactic sugar”

  • Many possible simplifications
  • They are anonymous by default (have no name)
  • But you can assign them to a named variable

• Scopes → this?!

  • Long story short: You can’t really use them with classes (foreshadowing: JS3)
  • This can be an advantage if you want to have access to the parent bindings

• Resources & exercises