Digital Garden

JavaScript FAQ

2 min read

How to use template literals?

const firstName = 'John';
const lastName = 'Doe';
const fullName = `${firstName} ${lastName}`; // John Doe
 
// The same code using string concatenation
const fullName = firstName + ' ' + lastName; // John Doe

When to use?

When you need to concatenate strings.

How to inject JavaScript into HTML?

<html>
  <body>
    <script type="module">
      console.log("Hello World!")
    </script>
  </body>
</html>
  • paste the JavaScript code inside the <script> tag.
  • use type="module" to indicate that the script should be treated as a JavaScript module.

DOM API

// create an element
document.createElement('div');
// set element's text
element.textContent = 'Hello, world!';
// append element to the body
document.body.append(element);
// get element by ID
document.getElementById('myElement');
// specify the element's class
element.className = 'my-class';

How to track user presence on the page?

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    // action on user leaves the page
  } else {
    // action on user returns to the page
  }
});

How to scroll element to user’s view?

const element = document.getElementById("box");
element.scrollIntoView();

How to count using console object?

console.count("label");

How to execute some action after animation is finished?

Promise.all(
  elem.getAnimations({ subtree: true }).map((animation) => animation.finished),
).then(() => elem.remove());

How to set the focus on the element?

document.getElementById("myTextField").focus();

Graph View