JavaScript.org

JavaScript

Web Dev

querySelector

create a variable for fields in the html

input type="submit" value="Submit guess" class="guessSubmit" />

const guessSubmit = document.querySelector(".guessSubmit");

Event Listeners

guessSubmit.addEventListener("click", checkGuess);

Updating Text

const output = document.querySelector('.output');
const para = document.createElement('p');
para.textContent = "Paragraph";

Objects

bird = {species: 'Bird'}

Lambdas

const filtered = cats.filter((cat) => cat.startsWith("L"));

Local Storage

localStorage.setItem("name", myName);
const name = localStorage.getItem("name");
localStorage.removeItem("name");

// clear all
localStorage.clear()

Javascript vs. React

Data Storage

• Javascript stores variables in the DOM - the representation of HTML nodes.
• React stores variables in Javascript objects, which can be updated as they change on the page

so React will be better for pages with constantly changing user inputs

Promises

doSomething()
  .then((result) => doSomethingElse(result))
  .then((newResult) => doThirdThing(newResult)) // newResult is the result of doSomethingElse
  .then((finalResult) => {
    console.log(`Got the final result: ${finalResult}`);
  })
  .catch(failureCallback);

as a good general rule of thumb, always return the contents of a promise

preventDefault

preventDefault is an event listener stops default behaviors of events. Ex: page reload on form submit