Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
Vue Answers

How to get an element within a component with Vue.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to get an element within a component with Vue.js.

In this article, we’ll look at how to get an element within a component with Vue.js.

How to get an element within a component with Vue.js?

To get an element within a component with Vue.js, we can assign a ref to the element we want to get.

For instance, we write

<template>
  <div id="app">
    Parent.
    <span ref="someName" class="abc">Child Span</span>
  </div>
</template>

<script>
//...
export default {
  //...
  mounted() {
    const childSpanClassAttr = this.$refs.someName.getAttribute("class");
    console.log(childSpanClassAttr);
  },
  //...
};
</script>

to assign the someName ref to the span in the template.

Then we get the span in the mounted hook with

this.$refs.someName

And we can use any element method like getAttribute on the element returned by the ref.

Conclusion

To get an element within a component with Vue.js, we can assign a ref to the element we want to get.

Categories
JavaScript Answers

How to check if image exists on server using JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to check if image exists on server using JavaScript.

In this article, we’ll look at how to check if image exists on server using JavaScript.

How to check if image exists on server using JavaScript?

To check if image exists on server using JavaScript, we can use the Fetch API.

For instance, we write

const res = await fetch("https://via.placeholder.com/150", { method: "HEAD" });
if (res.ok) {
  console.log("Image exists.");
} else {
  console.log("Image does not exist.");
}

to see if the image at https://via.placeholder.com/150 can be loaded by calling fetch with the URL and an object that specify that we make a HEAD request.

If res.ok if true, the image is loaded successfully.

Otherwise, the image failed to load.

Conclusion

To check if image exists on server using JavaScript, we can use the Fetch API.

Categories
JavaScript Answers

How to take a screenshot of a webpage with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to take a screenshot of a webpage with JavaScript.

In this article, we’ll look at how to take a screenshot of a webpage with JavaScript.

How to take a screenshot of a webpage with JavaScript?

To take a screenshot of a webpage with JavaScript, we can use Puppeteer.

To install it, we run

npm i puppeteer

Then we use it by writing

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://example.com");
  await page.screenshot({ path: "example.png" });

  await browser.close();
})();

to call browser.newPage to open a new page.

Then we go to https://example.com with page.goto.

Then we take a screenshot and save it to example.png with page.screenshot.

Finally, we close the browser with browser.close.

Conclusion

To take a screenshot of a webpage with JavaScript, we can use Puppeteer.

Categories
JavaScript Answers

How to remove the first element from array and return the array minus the first element with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to remove the first element from array and return the array minus the first element with JavaScript.

In this article, we’ll look at how to remove the first element from array and return the array minus the first element with JavaScript.

How to remove the first element from array and return the array minus the first element with JavaScript?

To remove the first element from array and return the array minus the first element with JavaScript, we can use the array slice method.

For instance, we write

const myArray = ["item 1", "item 2", "item 3", "item 4"];
const sliced = myArray.slice(1);

to call myArray.slice with 1 to return an array with all the myArray items except the first one.

Conclusion

To remove first element from array and return the array minus the first element with JavaScript, we can use the array slice method.

Categories
JavaScript Answers

How to get date of the next day with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get date of the next day with JavaScript.

In this article, we’ll look at how to get date of the next day with JavaScript.

How to get date of the next day with JavaScript?

To get date of the next day with JavaScript, we use the getDate and setDate methods.

For instance, we write

const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);

to create the tomorrow Date object with the current date and time.

Then we call getDate to get the current date.

And then we add 1 to it and use the sum as the argument for setDate to change tomorrow to tomorrow’s date.

Conclusion

To get date of the next day with JavaScript, we use the getDate and setDate methods.