Category: JavaScript Answers

Sometimes, we want to perform a curl request in JavaScript.

In this article, we’ll look at how to perform a curl request in JavaScript.

How to perform a curl request in JavaScript?

To perform a curl request in JavaScript, we can use the fetch function.

For instance, we write:

(async () => {
  const res = await fetch('https://yesno.wtf/api')
  const answer = await res.json()
  console.log(answer)
})()

We call fetch with the URL we want to make the request to to make a GET request.

Then we call res.json to convert the response body object to JSON.

fetch and res.json both return promises so we need to use await to get the resolved value.

And then we log the result.

Conclusion

To perform a curl request in JavaScript, we can use the fetch function.

Sometimes, we want to test if a URL string is absolute or relative with JavaScript.

In this article, we’ll look at how to test if a URL string is absolute or relative with JavaScript.

How to test if a URL string is absolute or relative with JavaScript?

To test if a URL string is absolute or relative with JavaScript, we can use a regex.

For instance, we write:

const r = new RegExp('^(?:[a-z]+:)?//', 'i');
console.log(r.test('http://example.com'));
console.log(r.test('test'));

We create a regex with the RegExp constructor that checks if there’s a protocol before the rest of the URL.

^(?:[a-z]+:)?/ checks for the protocol.

Then we call test on it with some URL strings to test.

Therefore, the console log should return true and false respectively since only absolute URLs have the protocol in front of it.

Conclusion

To test if a URL string is absolute or relative with JavaScript, we can use a regex.

Sometimes, we want to check if keyup is a character key with jQuery.

In this article, we’ll look at how to check if keyup is a character key with jQuery.

How to check if keyup is a character key with jQuery?

To check if keyup is a character key with jQuery, we can check the keypress event.

For instance, we write:

<input>

to add an input.

Then we write:

$("input").keypress((e) => {
  if (e.which !== 0) {
    console.log("Character was typed", String.fromCharCode(e.which));
  }
});

to select the input with $.

Then we call keypress with the event handler that checks the character code of the key that’s pressed with e.which.

If it’s not 0, then we pressed a character key.

And we get the character code with String.fromCharCode with the character code from e.which.

Conclusion

To check if keyup is a character key with jQuery, we can check the keypress event.

Sometimes, we want to dynamically add options to an existing select in JavaScript.

In this article, we’ll look at how to dynamically add options to an existing select in JavaScript.

How to dynamically add options to an existing select in JavaScript?

To dynamically add options to an existing select in JavaScript, we can use a new Option object append it to the select element with the options.add method.

For instance, we write:

<select>

</select>

to add a select element.

Then we write:

const select = document.querySelector('select');
select.options.add(new Option('Text 1', 'Value1'))

to select the select element with document.querySelector.

Then we call select.options.add with the Option instance to add the option.

We pass in the option text and the value of the value attribute respectively to the Option constructor.

Conclusion

To dynamically add options to an existing select in JavaScript, we can use a new Option object append it to the select element with the options.add method.

Sometimes, we want to detect if user changes tab with JavaScript.

In this article, we’ll look at how to detect if user changes tab with JavaScript.

How to detect if user changes tab with JavaScript?

To detect if user changes tab with JavaScript, we can listen to the visibilitychange event on document.

For instance, we write:

document.addEventListener("visibilitychange", event => {
  if (document.visibilityState === "visible") {
    console.log("tab is active")
  } else {
    console.log("tab is inactive")
  }
})

We call document.addEventListener window 'visibilitychange' to listen to the visibilitychange event.

In the event handler, we check if document.visibilityState is 'visible'.

If that’s true, then the tab is active.

Otherwise, it’s not.

Conclusion

To detect if user changes tab with JavaScript, we can listen to the visibilitychange event on document.