16. Advanced JavaScript and DOM Manipulation

BootCamp by Dr.Angela

1. Adding Event Listeners

• ex) document.querySelector("button").addEventListener("click", handleClick);
• Anonymous function
  • ex)
    document.querySelector("button").addEventListener("click", function () {
// what to do when clicked
});
• Apply to multiple elements (using a loop)
  • ex)
    `var numberOfDrumButtons = document.querySelectorAll(“.drum”).length;

for (var i = 0; i < numberOfDrumButtons; i++) {
document.querySelectorAll(“.drum”)[i].addEventListener(“click”, function () {
alert(“I got clicked!”);
});
}`

2. Higher Order Functions

• Functions that take other functions as arguments or return functions

3. Playing Sounds on a Website

• ex)
  var audio = new Audio("audio.mp3");
audio.play();
• this(keyword) : Refers to the element that triggered the event
  • ex)
    document.querySelector(".drum").addEventListener("click", function () {
this.style.color = "white";
});

4. Switch Statements

• Used to compare a single value against multiple cases
• ex)
  `switch (value) {
  case “A”:
  break;

case “B”:
break;

default:
}`

5. JavaScript Objects

• Objects store related data and behavior together
• Constructor Function : Starts with a capital letter
  • ex)
    function BellBoy(name, age, hasWorkPermit, languages) {
this.name = name;
this.age = age;
this.hasWorkPermit = hasWorkPermit;
this.languages = languages;
}
• Create object : ex) var bellBoy1 = new BellBoy("Timmy", 19, true, ["French", "English"]);

6. Object Methods & Dot Notation

• Constructor Function Including Methods : ex)
  function BellBoy(name, age, hasWorkPermit, languages) {
  this.name = name;
  this.age = age;
  this.hasWorkPermit = hasWorkPermit;
  this.languages = languages;
  this.moveSuitcase = function () {
  alert(“May I take your suitcase?”);
  };
  }
• Call method : ex) bellBoy1.moveSuitcase();
• Dot notation (.) : Used to access properties and methods of an object
  • ex) object.property or object.method()

7. Keyboard Event Listeners

• keydown : Fires when a key is pressed (includes all keys)
• keypress : Fires when a character key is pressed (deprecated in modern JS)
• Check pressed key : ex)
  document.addEventListener("keydown", function (event) {
console.log(event.key);
});

8. Callbacks and Events

• Higher-order function: takes a function as an argument
• Callback function: the function passed into another function
• Tip : $0 (DevTools, Refers to the currently selected element in the Elements panel)

9. Adding Animation

• Using classList : ex) document.querySelector("name").classList.add("pressed");
• setTimeout(function, milliseconds) : Used to create temporary visual effects
  • ex)
    setTimeout(function () {
activeButton.classList.remove("pressed");
}, 100);