Author: John Au-Yeung

Sometimes, we want to check for Canadian postal code strings with JavaScript.

In this article, we’ll look at how to check for Canadian postal code strings with JavaScript.

Check for Canadian Postal Code Strings with JavaScript

To check for Canadian postal code strings with JavaScript, we can create our own regex and use it.

For instance, we can write:

const regex = /^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$/;

console.log(regex.test('45464'))
console.log(regex.test('A1A 1A1'))

to create the regex where we check for 2 groups of 3 characters where we have 1 digit in between 2 letters in the first group, and a letter is in between 2 betters in the 2nd group.

And each group of characters is separated by a space, dash, or nothing.

^ indicates the beginning of the string.

[A-Za-z] matches upper and lower case letters.

d matches digits.

[ -]? optionally matches a space or dash.

$ indicates the end of the string.

Therefore, the first console log logs false and the 2nd one logs true .

Conclusion

To check for Canadian postal code strings with JavaScript, we can create our own regex and use it.

Sometimes, we want to disable all mouse clicks on a page with JavaScript.

In this article, we’ll look at how to disable all mouse clicks on a page with JavaScript.

Disable All Mouse Clicks on a Page with JavaScript

To disable all mouse clicks on a page with JavaScript, we can call stopPropagation , stopImmediatePropagation and preventDefault in the event handler for the click and contextmenu events to disable left and right-click events respectively.

For instance, we can write:

$(document).click((e) => {
  e.stopPropagation();
  e.preventDefault();
  e.stopImmediatePropagation();
  return false;
});

$(document).bind('contextmenu', (e) => {
  e.stopPropagation();
  e.preventDefault();
  e.stopImmediatePropagation();
  return false;
});

We call $(document).click to add a click event handler.

And we call $(document).bind to add an event handler for the contextmenu event.

stopPropagation stops the propagation of the event to the top of the DOM tree.

preventDefault prevents the default action of the events.

And stopImmediatePropagation prevents other listeners of the same event from being called.

Conclusion

To disable all mouse clicks on a page with JavaScript, we can call stopPropagation , stopImmediatePropagation and preventDefault in the event handler for the click and contextmenu events to disable left and right-click events respectively.

Sometimes, we want to get information on a single YouTube video via JSON in JavaScript.

In this article, we’ll look at how to get information on a single YouTube video via JSON in JavaScript.

Get Information on a Single YouTube Video via JSON in JavaScript

To get information on a single YouTube video via JSON in JavaScript, we can use fetch to fetch the data from YouTube’s JSON API.

For instance, we can write:

const videoId = 'VA770wpLX-Q';

(async () => {
  const res = await fetch(`https://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=${videoId}&format=json
`)
  const data = await res.json()
  console.log(data)
})()

to fetch the JSON data with fetch from YouTube’s JSON API.

We just call res.json to convert the JSON data to an object.

Conclusion

To get information on a single YouTube video via JSON in JavaScript, we can use fetch to fetch the data from YouTube’s JSON API.

Sometimes, we want to select all checkboxes using jQuery

In this article, we’ll look at how to select all checkboxes using jQuery.

Select All Checkboxes Using jQuery

To select all checkboxes using jQuery, we can select all the checkbox input elements.

Then we call prop to set the checked attribute of each checkbox to a given value.

For instance, we write:

<p id="checkBoxes">  
  <input type="checkbox" class="checkBoxClass" id="Checkbox1" />  
  <br />  
  <input type="checkbox" class="checkBoxClass" id="Checkbox2" />  
  <br />  
  <input type="checkbox" class="checkBoxClass" id="Checkbox3" />  
  <br />  
  <input type="checkbox" class="checkBoxClass" id="Checkbox4" />  
  <br />  
  <input type="checkbox" class="checkBoxClass" id="Checkbox5" />  
  <br />  
</p>

to add the checkboxes.

Then we write:

$(".checkBoxClass").prop('checked', true);

to call the prop method on all the checkboxes with class checkBoxClass and set their checked attributes to true .

Therefore, all the checkboxes will be checked.

Conclusion

To select all checkboxes using jQuery, we can select all the checkbox input elements.

Then we call prop to set the checked attribute of each checkbox to a given value.

Sometimes, we want to get the width and height of an image with file reader.

In this article, we’ll look at how to get the width and height of an image with file reader.

Get the Width and Height of an Image with File Reader

To get the width and height of an image with file reader, we can create a new img element object with the Image constructor.

For instance, we can write:

<input type='file'>

to add the file input.

Then we write:

const reader = new FileReader();
reader.onload = (theFile) => {
  const image = new Image();
  image.src = theFile.target.result;
  image.onload = () => {
    console.log(image.width, image.height);
  };
};

const input = document.querySelector('input')
input.addEventListener('change', e => {
  const [file] = e.target.files
  reader.readAsDataURL(file);
})

We create a new FileReader instance and assign it to reader .

Then we set reader.onload to a function that creates a new Image instance.

Next, we set the src property of the Image instance to theFile.target.result , which has the result that’s read from the readAsDataURL method.

Then we set the image.onload property to a function that gets the width and height of the image.

After that, we get the input with document.querySelector .

And then we call addEventListener on it to add a change event listener.

In the event handler, we get the file object from e.target.files via destructuring.

Finally, we call reader.readAsDataURL with file to read the selected file to get the size.

Conclusion

To get the width and height of an image with file reader, we can create a new img element object with the Image constructor.