Category: JavaScript Answers

Sometimes, we want to verify that an URL is an image URL with JavaScript.

In this article, we’ll look at how to verify that an URL is an image URL with JavaScript.

Verify that an URL is an Image URL with JavaScript

To verify that an URL is an image URL with JavaScript, we can create our own function and that checks the URL we want to verify against our own regex.

For instance, we can write:

const isImgLink = (url) => {
  if (typeof url !== 'string') {
    return false;
  }
  return (url.match(/^http[^\?]*.(jpg|jpeg|gif|png|tiff|bmp)(\?(.*))?$/gmi) !== null);
}

console.log(isImgLink('https://example.com/img.jpg'));
console.log(isImgLink('https://example.com/any-route?param=not-img-file.jpg'));
console.log(isImgLink('https://example.com/img.jpg?param=123'));

to create the isImgLink function that takes the url we want to check.

Then in the function, we check if url isn’t a string with the typeof operator.

If it’s not, we return false .

Otherwise, we call url.match to check against the pattern that matches image URLs.

We check for common image file extensions like jpg , jpeg , gif , png , tiff , and bmp .

The g flag checks the whole string.

We also check that there’re no dots after the extension with (?(.*)) .

Conclusion

To verify that an URL is an image URL with JavaScript, we can create our own function and that checks the URL we want to verify against our own regex.

Sometimes, we want to get the selected value from jQuery UI slider.

In this article, we’ll look at how to get the selected value from jQuery UI slider.

Get the Selected Value from jQuery UI Slider

To get the selected value from jQuery UI slider, we can call the slider method with an object that has the change method that takes the slider value as a parameter.

For instance, we can write:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">

<div id="slider"></div>

to add the script tags for jQuery and jQuery UI and the link tag for jQuery UI.

Then we add a div which we can turn into a slider.

Next, we write:

$('#slider').slider({
  change(event, ui) {
    console.log(ui.value);
  }
});

to select the div with:

$('#slider')

Then we call slider with an object with the change method.

And we get the slider value with the ui.value property.

Now when we finished sliding, we see the selected value logged.

Conclusion

To get the selected value from jQuery UI slider, we can call the slider method with an object that has the change method that takes the slider value as a parameter.

Sometimes, we want to count text area characters with JavaScript.

In this article, we’ll look at how to count text area characters with JavaScript.

Count Text Area Characters with JavaScript

To count text area characters with JavaScript, we can listen to the keyup event on the text area.

Then in the event handler, we can get the length of the value of the text area input string value.

For instance, we can write:

<textarea></textarea>
<div id='count'>

</div>

to add the textarea element and the div to show the character count.

Then we write:

const textarea = document.querySelector('textarea')
const count = document.getElementById('count')
textarea.onkeyup = (e) => {
  count.innerHTML = "Characters left: " + (500 - e.target.value.length);
};

to get the textarea and div elements with document.querySelector and document.getElementById .

Then we set the textarea.onkeyup property to a function that takes the e event object as a parameter.

Then we get the input value with e.target.value which is a string.

The length property gets the character count.

We set count.innerHTML to some text that shows the character left count.

Now when we type something into the textarea , we see the character count.

Count

To count text area characters with JavaScript, we can listen to the keyup event on the text area.

Then in the event handler, we can get the length of the value of the text area input string value.

Sometimes, we want to add a month picker with JavaScript.

In this article, we’ll look at how to add a month picker with JavaScript.

Add a Month Picker with JavaScript

To add a month picker with JavaScript, we can use the jQuery UI date picker library.

For instance, we can write:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">

<input name="startDate" id="startDate" class="date-picker" />

to add the script and link tags for jQuery and jQuery UI.

And we also add the input element for the date picker.

Then we write:

$('.date-picker').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy',
  onClose(dateText, inst) {
    const month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
    const year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(year, month, 1));
  }
});

to select the input with:

$('.date-picker')

And we call datepicker with an object to turn the input into a date picker.

changeMonth lets us change the month if it’s true .

changeYear lets us change the year if it’s true .

showButtonPanel shows the bottom button panel if it’s true .

dateFormat lets us set the date that’s returned by the dateText parameter.

onClose is run when we close the date picker.

In the method, we get the month and year from the top dropdowns, and we call datepicker with 'setDate' to set the date.

Conclusion

To add a month picker with JavaScript, we can use the jQuery UI date picker library.

Sometimes, we want to listen to the mouseup event outside of an HTML element.

In this article, we’ll look at how to listen to the mouseup event outside of an HTML element.

Listen to the mouseup Event Outside of an HTML Element

To listen to the mouseup event outside of an HTML element, we can call window.addEventListener method to listen to the mouseup event on the whole browser tab or window.

For instance, we can write:

window.addEventListener('mouseup', (event) => {  
  console.log('mouse up')  
})

We call window.addEventListener with 'mouseup' to listen to the mouseup event on the whole browser window.

Now when we lift the mouse button anywhere in the browser window, we see 'mouse up' logged.

Conclusion

To listen to the mouseup event outside of an HTML element, we can call window.addEventListener method to listen to the mouseup event on the whole browser tab or window.