Category: JavaScript Answers

Categories
JavaScript Answers

How to return human readable string without time from a JavaScript date object?

Sometimes, we want to return human readable string without time from a JavaScript date object.

In this article, we’ll look at how to return human readable string without time from a JavaScript date object.

How to return human readable string without time from a JavaScript date object?

To return human readable string without time from a JavaScript date object, we can call the toDateString method on the date object.

For instance, we write:

const dateData = "07-21-2022";
const dateObject = new Date(Date.parse(dateData));
const dateReadable = dateObject.toDateString();
console.log(dateReadable)

We write:

const dateObject = new Date(Date.parse(dateData));

to create a new date object.

Then we call toDateString to return the human readable string version of the dateObject.

Conclusion

To return human readable string without time from a JavaScript date object, we can call the toDateString method on the date object.

Categories
JavaScript Answers Vue Vue Answers

How to fix the ‘Vue is not defined’ with JavaScript?

Seal lying on rock covered with snow

Sometimes, we want to fix the ‘Vue is not defined’ with JavaScript.

In this article, we’ll look at how to fix the ‘Vue is not defined’ with JavaScript.

How to fix the ‘Vue is not defined’ with JavaScript?

To fix the ‘Vue is not defined’ with JavaScript, we should make sure the Vue script is added at the top of the page.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the script above the app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `<p>{{exampleContent}}</p>`,
  data: {
    'exampleContent': 'hello'
  },

});

in a script tag below the div to run the code

We set el to an element that’s added above the code.

And we also add a template and some data to render on the template.

Therefore, we should see ‘hello’ displayed.

Conclusion

To fix the ‘Vue is not defined’ with JavaScript, we should make sure the Vue script is added at the top of the page.

Categories
JavaScript Answers

How to call jQuery .html() on all matched elements?

selective focus photography of seal lying on ground

Sometimes, we want to call jQuery .html() on all matched elements.

In this article, we’ll look at how to call jQuery .html() on all matched elements.

How to call jQuery .html() on all matched elements?

To call jQuery .html() on all matched elements, we can use the spread operator and the for-of loop.

For instance, we write:

<p>
  foo
</p>
<p>
  bar
</p>
<p>
  baz
</p>

to add some elements.

Then we write:

for (const el of [...$('p')]) {
  console.log($(el).html());
};

We select the p elements with $('p').

Then we spread the elements into an array.

Next, we loop through them with a for-of loop.

Then we select the el element with $(el) and call html to return the HTML of el.

Conclusion

To call jQuery .html() on all matched elements, we can use the spread operator and the for-of loop.

Categories
JavaScript Answers

How to recursively search all parent nodes with JavaScript?

Seal lying on rock covered with snow

Sometimes, we want to recursively search all parent nodes with JavaScript.

In this article, we’ll look at how to recursively search all parent nodes with JavaScript.

How to recursively search all parent nodes with JavaScript?

To recursively search all parent nodes with JavaScript, we can use the parentNode property.

For instance, we write:

<p>
  hello
</p>

to add a p element.

Then we write:

const findUpTag = (el, tag) => {
  let r = el
  while (r.parentNode) {
    r = r.parentNode;
    if (r.tagName === tag)
      return r;
  }
  return null;
}

const el = document.querySelector("p");
const body = findUpTag(el, "BODY");
console.log(body);

to define the findUpTag function that takes the el and tag parameters to search the parent of el with the given tag.

In the function, we traverse up the DOM tree starting from el by using the parentNode property to get the parent node of r.

Then we check the tag name of r with r.tagName.

If it matches tag then we return it.

And if nothing is found, we return null.

Then we call document.querySelector to select the p element.

And we call findUpTag to use it to find the body element.

Conclusion

To recursively search all parent nodes with JavaScript, we can use the parentNode property.

Categories
JavaScript Answers Vue Vue Answers

How to draw onto a canvas with Vue.js and JavaScript?

Seal lying on rock covered with snow

Sometimes, we want to draw onto a canvas with Vue.js and JavaScript.

In this article, we’ll look at how to draw onto a canvas with Vue.js and JavaScript.

How to draw onto a canvas with Vue.js and JavaScript?

To draw onto a canvas with Vue.js and JavaScript, we can get the canvas with refs and then draw on it with fillText.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `<canvas ref='canvas' style='width: 200px; height: 200px'></canvas>`,
  data: {
    'exampleContent': 'hello'
  },
  methods: {
    updateCanvas() {
      const {
        canvas
      } = this.$refs
      ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      ctx.font = "20px Georgia";
      ctx.fillText(this.exampleContent, 10, 50);
    }
  },
  mounted() {
    this.updateCanvas();
  }
});

We add the canvas element into the template.

Then we set the exampleContent property to 'hello'.

Next, we add the updateCanvas method that gets the canvas from this.$refs.

Then we get the context with getContext.

Next, we call clearReact to clear its contents.

Then we set the fillStyle and font to set the fill and font style of the text.

And then we call fillText with this.exampleContent and coordinates to write text into the canvas.

Finally, we call this.updateCanvas in the mounted to write the text with the canvas is loaded.

Conclusion

To draw onto a canvas with Vue.js and JavaScript, we can get the canvas with refs and then draw on it with fillText.