JAVASCRIPT 2

Terminology & Definitions

Why is it important to write clean code?

Because it will be understandable across the time, by us and others.
What is the difference between good comments and bad comments?

A good comment is a very effective way of code documentation. It’s easy, fast, and very straight-to-the-point.
What is an array?

Arrays are a special type of objects with numbered indexes.
What are arrays useful for?

Storing a list of data items under a single variable name. We could map arrays items and find any of them by index.
How do you change an array element?

Assign a value at array index. Ex: array[2] = "Moon"
What are some useful array properties?

The length property of an array returns the length of an array (the number of array elements).
What are some useful array methods?
- push
- forEach
- map
- filter
- find
- includes
What are loops useful for?

Loops are all about doing the same thing over and over again. Often, the code will be slightly different each time round the loop, or the same code will run but with different variables.
What is the break statement?

A break statement will immediately exit the loop and make the browser move on to any code that follows it.
What is the continue statement?

It skips to the next iteration of the loop.
What is the DOM?

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.

It's a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree.
How do you target the nodes you want to work with?

We can do it using one of the multiple methods the DOM API offers using the dot notation:
- getElementById
- getElementsByClassName
- getElementsByTagName
- getElementsByName
- querySelector
- querySelectorAll

How do you create an element in the DOM?

createElement


        const para = document.createElement("p");
        const node = document.createTextNode("This is new.");
        para.appendChild(node);

        const element = document.getElementById("div1");
        const child = document.getElementById("p1");
        
        // insert para p into element div
        element.appendChild(para);
        
        // insert para p into element div, before child p
        element.insertBefore(para,child);

How do you add an element to the DOM?

To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element using appendChild method.

How do you remove an element from the DOM?

Using the removeChild and remove methods on the parent element.


        const e = document.querySelector('li:last-child');

        // remove the last list item
        e.parentElement.removeChild(e);

        // hide the element
        e.style.display = 'none';

        // remove li e
        e.remove();

How can you alter an element in the DOM?
- document.getElementById(id).innerHTML = new HTML
- document.getElementById(id).attribute = new value
  attribute could be src, value, style.color, style.fontSize, addEventListener('click', myFunction)
- document.getElementById(id).setAttribute("class", "example");
When adding text to a DOM element, should you use textContent or innerHTML?

TextContent gets the content of all elements, including script and style elements. In contrast, innerText only shows "human-readable" elements.

InnerText won't return the text of "hidden" elements.

innerHTML returns HTML. textContent has better performance because its value is not parsed as HTML. Moreover, using textContent can prevent XSS attacks.
Where should you include your JavaScript tag in your HTML file when working with DOM nodes?

At the end of the body tag.
How do “events” and “listeners” work?

An event listener is a function that initiates a predefined process if a specific event occurs. So, an event listener “listens” for an action, then calls a function that performs a related task. This event can take one of many forms. Common examples include mouse events, keyboard events, and window events.
What are three ways to use events in your code?

There are three ways to assign events to elements: inline event handlers, event handler properties, and event listeners.
Why are event listeners the preferred way to handle events?

We can set multiple event listeners on the same element. It is also possible to use the removeEventListener() function to remove one or all events from an element. You can use addEventListener() on the document and window object.
What are the benefits of using named functions in your listeners?

The advantage of using a named function is that it is easier to remove the event listener, as you can simply reference the function name.

How do you attach listeners to groups of nodes?

If you have an array with the elements you could do:


          let elementsArray = document.querySelectorAll("whatever");

          elementsArray.forEach(function(elem) {
              elem.addEventListener("input", function() {
                  //this function does stuff
              });
          });

What is the difference between the return values of querySelector and querySelectorAll?

querySelector returns a single object with the first HTML element that matches the 'selectors', but querySelectorAll() returns an array of objects with all the HTML elements that match the 'selectors'.
What does a “nodelist” contain?

A NodeList is a collection of document nodes (element nodes, attribute nodes, and text nodes). HTMLCollection items can be accessed by their name, id, or index number. NodeList items can only be accessed by their index number.
Explain the difference between “capture” and “bubbling”.

With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements. With capturing, the event is first captured by the outermost element and propagated to the inner elements.
What is the difference between objects and arrays?

Objects represent “things” with characteristics (properties), while arrays create and store lists of data in a single variable.
How do you access object properties?
- Dot property accessor: object. property.
- Square brackets property accessor: object['property']
- Object destructuring: const { property } = object.