Flatiron’s Module 3 Notes

Javascript and the DOM

Javascript or JS is a text-based programming language, which is used on both the client and server-side allowing its users to created interactive web pages. JS also conforms to ECMAScript specifications (https://www.ecma-international.org/publications-and-standards/standards/ecma-262/).

Document-Object Model Programming (DOM) — the DOM is the object-oriented representation of the web page which can be modified with JS. Simply put DOM is a code-based version of the webpage (i.e. HTML, CSS & Javascript).

https://learn.co/lessons/fewpjs-the-dom-tree

DOM nodes — are HTML components that make up a web page (see below)

<p id="p1">This is a DOM node.</p>

Node Search Tools

document.getElementById('p1') //returns the first node within the document that matches the HTML id tag ('p1'). If nothing is found null is returned.
document.querySelector('#p1') //returns the first node within the document that matches the first selector can be '.class', '#id', or 'HTML tag'. If nothing is found null is returned. 
document.querySelectorAll('p') // returns a node collection within the document of all the matching nodes with the specified selector ('p')

Javascript Events

Events are work that is happening in response to an event being triggered, browsers listen for events like mouse clicks, keypress, and form submissions.

function eventListener() {
  const input = document.getElementById('input');
  input.addEventListener('click', function(event) {
    alert('I was clicked');
  })
}

In the code snippet above the function is selecting an node with the Id of input and adding an event listener that takes two arguments, the first is the name of the event in this case the ‘click’, and the second is the call back function

Fetch()

Fetch() is a global method, which takes a minimum of one argument a URL as a string, fetch() defaults to a ‘GET’ request

fetch('URL', optional) 
  .then((response) => response.json())
  // information about the response object is returned
  // after the 2nd .then users have access to the actual json data
  .then(responseObject => {
  // use this data inside of `json` to do DOM manipulation
  // iterate over the json object returned
})
const reqObj = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(object)
}