Sometimes, we want to make JavaScript execute after page load.

In this article, we’ll look at how to make JavaScript execute after page load.

How to make JavaScript execute after page load?

To make JavaScript execute after page load, we set window.onload to a function that’s called after the page is loaded.

For instance, we write

window.onload = () => {
  //...
};

to set window.onload to a function that’s called when the page is done loading.

The code inside the function will run after the page finishes loading.

Conclusion

To make JavaScript execute after page load, we set window.onload to a function that’s called after the page is loaded.

Sometimes, we want to tell if a DOM element is visible in the current viewport with JavaScript.

In this article, we’ll look at how to tell if a DOM element is visible in the current viewport with JavaScript.

How to tell if a DOM element is visible in the current viewport with JavaScript?

To tell if a DOM element is visible in the current viewport with JavaScript, we use the intersection observer.

For instance, we write

const el = document.querySelector("#el");
const observer = new window.IntersectionObserver(
  ([entry]) => {
    if (entry.isIntersecting) {
      console.log("ENTER");
      return;
    }
    console.log("LEAVE");
  },
  {
    root: null,
    threshold: 0.1,
  }
);

observer.observe(el);

to create an IntersectionObserver object with a callback and an object.

The callback is run wwhen the element we’re oberving enters or leaves the container.

We can check if it’s intersecting with the container with isIntersecting.

The object has the root property that specifies the container to watch for intersection for.

threshold has the threshold of the intersection before the callback is run.

Conclusion

To tell if a DOM element is visible in the current viewport with JavaScript, we use the intersection observer.

Sometimes, we want to move an element into another element with JavaScript.

In this article, we’ll look at how to move an element into another element with JavaScript.

How to move an element into another element with JavaScript?

To move an element into another element with JavaScript, we can use a fragment.

For instance, we write

const fragment = document.createDocumentFragment();
fragment.appendChild(document.getElementById("source"));
document.getElementById("destination").appendChild(fragment);

to call createDocumentFragment to create a document fragment.

Then we call fragment.appendChild to append an element as the last child of the fragment.

Then we use

document.getElementById("destination").appendChild(fragment)

to append the fragment to the element with ID destination.

Conclusion

To move an element into another element with JavaScript, we can use a fragment.

Sometimes, we want to validate an email address in JavaScript.

In this article, we’ll look at how to validate an email address in JavaScript.

How to validate an email address in JavaScript?

To validate an email address in JavaScript, we can use a regex.

For instance, we write

const validateEmail = (email) => {
  const re = /\S+@\S+\.\S+/;
  return re.test(email);
};

console.log(validateEmail("anystring@anystring.anystring"));

to define the validateEmail function that takes the email string.

In it, we define the re regex that matches the segments of the email.

\S+ matches any non space characters.

@ matches @. And “\S+.\S+/` matches the email domain.

Then we call re.test with email to validate that email is an email string.

Conclusion

To validate an email address in JavaScript, we can use a regex.

Sometimes, we want to add event binding on dynamically created elements with JavaScript.

In this article, we’ll look at how to add event binding on dynamically created elements with JavaScript.

How to add event binding on dynamically created elements with JavaScript?

To add event binding on dynamically created elements with JavaScript, we can use event delegation.

For instance, we write

const hasClass = (elem, className) => {
  return elem.classList.contains(className);
};

document.addEventListener(
  "click",
  (e) => {
    if (hasClass(e.target, "foo")) {
      console.log("foo");
    } else if (hasClass(e.target, "bar")) {
      console.log("bar");
    } else if (hasClass(e.target, "baz")) {
      console.log("baz");
    }
  },
  false
);

to call document.addEventListener with 'click' to listen for all clicks events on the page.

In the click event handler, we get the element we clicked on with e.target.

Then we call hasClass to check if the class has the given className.

We use elem.classList.contains to check if the className is included in the class attribute of the element.

Conclusion

To add event binding on dynamically created elements with JavaScript, we can use event delegation.