Home Icon

Week 4 Exercises - JS Part 2

  1. Why is it important to write clean code?
  2. Wrtitting clean code facilitates working and making changes for you and others, improves readability and also makes the code reusable.

  3. What is the difference between good comments and bad comments?
  4. Good comments provides clear insights about the code and it's a great way of code documentation.
    Bad Comments, on the other hand, are not meaningful, confuses other programmers and don't provide the expected informatiom about the code.

  5. What is an array?
  6. An array is a special variable, which can hold more than one value and can be defined as a list of values.

  7. What are arrays useful for?
  8. Arrays are uselful to store large quantities of single values like names, numbers or items.

  9. How do you access an array element?
  10. arrayName[indexOfElement]

  11. How do you change an array element?
  12. arrayName[indexOfElement] = "New Value";

  13. What are some useful array properties?
  14. arrayName.length, arrayName[index]

  15. What are some useful array methods?
  16. arrayName.push("newElement"), arrayName.sort(), arrayName.slice()

  17. What are loops useful for?
  18. Loops are useful for iterating over elements to display of transform the information.

  19. What is the break statement?
  20. The break statement is used to exit a loop.

  21. What is the continue statement?
  22. The continue statement will skpi to the next iteration of the loop.

  23. What is the DOM?
  24. The DOM, or Document Object Model, is the structure generated by the browser of an HTML Page.

  25. How do you target the nodes you want to work with?
  26. document.querySelector, document.getElementsByClassName, document.getElementById

  27. How do you create an element in the DOM?
  28. let newElement = document.createElement("div")

  29. How do you add an element to the DOM?
  30. body.appendChild(newElement)

  31. How do you remove an element from the DOM?
  32. element.remove()

  33. How can you alter an element in the DOM?
  34. element.innerHTML or element.textContent

  35. .When adding text to a DOM element, should you use textContent or innerHTML?
  36. Depends on the case, but if the text is written by the user textContent should be used for safety.

  37. Where should you include your JavaScript tag in your HTML file when working with DOM nodes?
  38. The script tag should be included in the head of the page with the async attribute.

  39. How do “events” and “listeners” work?
  40. Listeners are methods that wait for Events, that are expected actions from the user or browser, to render the code inside the eventListener.

  41. What are three ways to use events in your code?
  42. Events can be used inline on HTML elements, with addEventListener or within functions.

  43. Why are event listeners the preferred way to handle events?
  44. They provide a more complete way to dealing with events and because it contains the property event that allows the developer to get information about the node where the event occoured

  45. What are the benefits of using named functions in your listeners?
  46. Named Functions provides a more organized way to repeat actions on several event listeners and you can remove the event listener.

  47. How do you attach listeners to groups of nodes?
  48. Use nodeGroup.forEach(node){node.addEventListener('click', function(){ //DO SOMETHING})

  49. What is the difference between the return values of querySelector and querySelectorAll?
  50. The querySelector returns a single HTML element, while the querySelectorAll returns a node list of all elements with a determined class.

  51. Explain the difference between “capture” and “bubbling”
  52. Bubbling is the process of propagation from the closest element to the farthest away element, while "capture" is the process of propagation from the farthest away element to the closest.

  53. What is the difference between objects and arrays?
  54. Objects are unordered collections of key-value pairs, while arrays are variables that can hold more than one value.

  55. How do you access object properties?
  56. object.prop