Syntax

Object Property Accessors

const person1 = {};
person1['firstname'] = 'Mario';
person1['lastname'] = 'Rossi';

console.log(person1.firstname);
// expected output: "Mario"

const person2 = {
  firstname: 'John',
  lastname: 'Doe'
};

console.log(person2['lastname']);
// expected output: "Doe"

Iteration

You can use the for ... of statement to iterate over an iterable object.

By default, if your iterator variable's mutability is not assigned with the const/let keywords, it is assumed to be a mutable variable.

• Loop over each element of the array:

  const list = ['a', 'b', 'c'];
  
  for (element of list) {
    console.log(element)
  }
  

  Output

  a
  b
  c
  

• Loop over each element of the set:

  const set = new Set([1, 1, 2, 2, 3, 3]);
  
  for (item of set) {
    console.log(item)
  }
  

  Output

  1
  2
  3
  

String Manipulation

The substring() method returns the part of the string between the start and end indexes, or to the end of the string. Following is a simple example demonstrating usage of substring() to get last n characters from the string.

Date & Time

• Construct a date from a string

moment = new Date('2020-01-01')

• Construct a timestamp from a string

// ISO 8601 format
moment = new Date('2020-01-01T04:05:06')

// RFC 3339 format
moment = new Date('2020-01-01 04:05:06')

// (year, month, day, hour, minute, seconds)
moment = new Date(2020, 1, 1, 4, 5, 6)

// UNIX Epoch
moment = new Date(1580544000000)

• Format a timestamp for a given region

moment = new Date('2020-01-01')
formatter = new Intl.DateTimeFormat('en-US')
output = formatter.format(moment)
console.log(output)

Output

1/1/20

Modifying the Document

• Modify the document to have an element placed at the top of the body

  // Capture the 'target' element in a variable
  let target = document.getElementById("move-me")
  
  // Move it to the top of the document
  document.body.prepend(target)
  

• Remove an element from the document by id:

  document.getElementById('pt-notifications-alert').remove()
  

• Remove all elements from the document of a certain class:

  document.querySelectorAll('.portal').forEach(e => e.remove());
  

• Remove specific child of a certain element

  document.querySelectorAll('#mw-navigation h2').forEach(e => e.remove());
  

• Append an element to a list

  let node = document.createElement("li");                 // Create a <li> node
  let textnode = document.createTextNode("water");         // Create a text node
  node.appendChild(textnode);                              // Append the text to <li>
  document.getElementById("myList").appendChild(node);     // Append <li> to <ul> with id="myList"
  

Event Listeners

An important concept in JavaScript is the ability to listen for and handle events. When we register an event listener, we give the browser an instruction to wait for a particular action to occur in the browser, and the the event handler contains the actual lines of code that will run when the event fires

(Aside: Web events are not part of the core JavaScript language, they are defined as part of the APIs built into the browser.)

The document readyState property

There are three values for document.readyState

• loading: The document is still loading
• interactive: The document has finished loading everything except images, stylesheets, and frames
• complete: The document has finished loading everything including images, stylesheets, and frames

When the value of this property changes, a readystatechange event fires on the document object.

The document DOMContentLoaded event

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

• Call the function initialize() when the document has finished loading:

  const initialize = () => {
    window.alert('DOM content has loaded')
  }
  
  /* If the document is not finished loading */
  if (document.readyState === 'loading') {
    /* Call initialize() as soon as the document has finished loading */
    document.addEventListener('DOMContentLoaded', initialize)
  }
  /* If the document has already finished loading */
  else {
    initalize()
  }
  

The window load event

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

• Log a message after the window finishing loading the page

  window.addEventListener('load', (event) => {
    console.log('The page has loaded');
  })
  

The <script> tag's defer attribute

Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.

It's also worth noting that scripts with the defer attribute will execute in the order in which they appear in the document.

• If you're importing a module script, you don't need to include the defer attribute, a module script will defer by default.

Forms

• Access elements in a form that was just submitted

form.addEventListener('submit', (event) => {
  let data = event.target.elements
  contacts.push({
    firstName: data['fname'].value,
    lastName: data['lname'].value,
    email: data['email'].value
  })
  event.preventDefault()
  return false
})

The URL API

• Getting the pathname of the URL

  let url = new URL('https://api.example.com/path')
  console.log(url)
  

  Output

  /path
  

• Setting the pathname

  let url = new URL('https://api.example.com')
  url.pathname = '/details'
  
  console.log(url.href)
  

  Output

  https://api.example.com/details
  

• Setting a search parameter in the query string

  let url = new URL('https://api.example.com/path?key=old')
  url.searchParams.set('key','new')
  console.log(url.search) // Line #1 of output
  console.log(url.searchParams.toString()) // Line #2 of output
  

  Output

  ?key=new
  key=new
  

• Appending a search parameter to the query string

  let url = new URL('https://api.example.com/search')
  url.searchParams.append('query', 'hello world')
  
  console.log(url.href)
  

  Output

  https://api.example.com/search?query=hello+world
  

• Assigning a set of search parameters to the query string

  let url = new URL('https://api.example.com/v2')
  url.pathname = '/list'
  url.search = new URLSearchParams({
    topic: 'coffee',
    limit: 20
  })
  
  console.log(url.href)
  

  Output

  https://api.example.com/list?topic=coffee&limit=20
  

• Creating a map object out of the key-value pairs in the query string

  let params = new URL(window.location.href).searchParams
  let newform = new Map()
  for (let [key, value] of params.entries()) {
    newform[key] = value;
  }
  

The Fetch API

There's a great example posted on Mozilla MDN, I'd consider checking it out.

• Example of a POST request using fetch

  const data = { username: 'ttrojan' }
  
  fetch('https://example.com/profile', {
    method: 'POST', // or 'PUT'
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  })
  

WebKit

• Notes from WebKit's article "Console Command Line API"

  • $_ stores the result of the last Console evaluation
  • $0 equals the value of the currently selected DOM node in the Elements tab.
  • $(#content) is equivalent to document.querySelector('#content')

Objects and Properties

I was reading Mozilla's article "Objects and properties" and wanted to take notes on the content I found interesting.

To create an object, use an object initializer, a list of properties, separated by commas, enclosed in curly braces

Events

One of the hot methodologies in the JavaScript world is event delegation, and for good reason. Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements. The base concept is fairly simple but many people don't understand just how event delegation works. Let me explain the how event delegation works and provide pure JavaScript example of basic event delegation.

Let's also say that something needs to happen when the user clicks each child element. You could add a separate event listener to each individual <li> element, but what if <li> elements are frequently added and removed from the list? Adding and removing event listeners would be a nightmare, especially if addition and removal code is in different places within your app. The better solution is to add an event listener to the parent <ul> element. But if you add the event listener to the parent, how will you know which element was clicked?

Simple: when the event bubbles up to the <ul> element, you check the event object's target property to gain a reference to the actual clicked node. Here's a very basic JavaScript snippet which illustrates event delegation:Start by adding a click event listener to the parent element. When the event listener is triggered, check the event element to ensure it's the type of element to react to. If it is an <li> element, boom: we have what we need! If it's not an element that we want, the event can be ignored. This example is pretty simple -- <ul> and <li> is a straight-forward comparison. Let's try something more difficult. Let's have a parent <div> with many children but all we care about is an A tag with the classA CSS class:

Start by adding a click event listener to the parent element. When the event listener is triggered, check the event element to ensure it's the type of element to react to. If it is an <li> element, boom: we have what we need! If it's not an element that we want, the event can be ignored. This example is pretty simple -- <ul> and <li> is a straight-forward comparison. Let's try something more difficult. Let's have a parent <div> with many children but all we care about is an A tag with the classA CSS class:

Using the Element.matches API, we can see if the element matches our desired target.

Triggering Events

• Simulate a click on the browser with a function call:

  function simulateClick() {
      const event = new MouseEvent('click', {
          view: window,
          bubbles: true,
          cancelable: true
      })
      // Evaluates to true if none of the handlers called preventDefault
      const dispatched = document.querySelector('#checkbox').dispatchEvent(event)
      if (dispatched) {
          alert("Event was not cancelled")
      }
      else {
          // None of the handlers called preventDefault.
          alert("Event was cancelled")
      }
  }
  

The Clipboard API

The use of the clipboard requires permission, which you can get using the Permissions API.

Reading

Use the Clipboard object's readText() and read() methods.

• Read from the user's clipboard

  let element = document.getElementById('p#contents')
  
  // Reveals the content of the user's clipboard
  async function reveal() {
      let text = await navigator.clipboard.readText()
      let 
  }
  
  
  
  let element = document.getElementById('p#result')
  navigator.clipboard.readText().then((pasteboard) => {
  element.innerText = pasteboard
  })
  

Writing

TypeScript

The best open source resource to learn TypeScript is TypeScript Deep Dive

To compile TypeScript into JavaScript, use tsm, a command you can install from NPM

npm install --global typescript

• Creating a TypeScript project

mkdir project
cd project

npm init

npm install --save-dev typescript

tsc --init

The last command creates tsconfig.json, the TypeScript configuration file

Docs just now