Category: JavaScript Answers

Sometimes, we want to list all cookies for the current page with JavaScript.

In this article, we’ll look at how to list all cookies for the current page with JavaScript.

How to list all cookies for the current page with JavaScript?

To list all cookies for the current page with JavaScript, we can get them from the document.cookies string.

For instance, we write

const cookiesObj = document.cookie.split(";").reduce((cookies, cookie) => {
  const [name, value] = cookie.split("=").map((c) => c.trim());
  cookies[name] = value;
  return cookies;
}, {});

to call document.cookies.split to split the string by the semicolon and return the array of cookie strings.

Then we call reduce with a callback that splits each string by the '=' string and then call map with a callback to trim the start and end of the strings.

We then get the name and value from the returned array.

Next, we add the name property to cookies and set it to value.

And then we return cookies.

The final cookies object returned by reduce is assigned to cookiesObj.

Conclusion

To list all cookies for the current page with JavaScript, we can get them from the document.cookies string.

Sometimes, we want to fix Uncaught SyntaxError: Unexpected token import error when importing JavaScript modules in the browser.

In this article, we’ll look at how to fix Uncaught SyntaxError: Unexpected token import error when importing JavaScript modules in the browser.

How to fix Uncaught SyntaxError: Unexpected token import error when importing JavaScript modules in the browser?

To fix Uncaught SyntaxError: Unexpected token import error when importing JavaScript modules in the browser, we can set the script element’s type attribute to module.

For instance, we write

calc.js

const sum = (a, b) => {
  return a + b;
};

export { sum };

to create the calc.js module.

Then we write

<script type="module">
  import { sum } from "./calc.js";

  console.log(sum(2, 3));
</script>

to import the sum function we exported from calc.js in the script tag.

We set the type attribute to module to let the browser know that we can import and export values in the script element.

Conclusion

To fix Uncaught SyntaxError: Unexpected token import error when importing JavaScript modules in the browser, we can set the script element’s type attribute to module.

Sometimes, we want to get the beginning and end of the day with moment and JavaScript.

In this article, we’ll look at how to get the beginning and end of the day with moment and JavaScript.

How to get the beginning and end of the day with moment and JavaScript?

To get the beginning and end of the day with moment and JavaScript, we can use the startOf and endOf methods.

For instance, we write

const now = moment();
console.log("start", now.startOf("day").toString());
console.log("end", now.endOf("day").toString());

to create a moment object with the current date time with moment().

Then we call now.startOf with 'day' to return a moment object with the start of the current day.

We call now.endOf with 'day' to return a moment object with the start of the current day.

Conclusion

To get the beginning and end of the day with moment and JavaScript, we can use the startOf and endOf methods.

Sometimes, we want to capture key press without placing an input element on the page with JavaScript.

In this article, we’ll look at how to capture key press without placing an input element on the page with JavaScript.

How to capture key press without placing an input element on the page with JavaScript?

To capture key press without placing an input element on the page with JavaScript, we can listen for keyboard events in the document.

For instance, we write

document.onkeydown = (evt) => {
  if (evt.ctrlKey && evt.keyCode === 90) {
    console.log("Ctrl-Z");
  }
};

to set the document.onkeydown property to a function that checks if ctrl+z is pressed.

We check for ctrl key press with evt.ctrlKey and we check for the z key press by checking if keyCode is 90.

Conclusion

To capture key press without placing an input element on the page with JavaScript, we can listen for keyboard events in the document.

Sometimes, we want to add method to object with JavaScript.

In this article, we’ll look at how to add method to object with JavaScript.

How to add method to object with JavaScript?

To add method to object with JavaScript, we can add it to the prototype of the constructor.

For instance, we write

function Foo() {}
Foo.prototype.bar = function () {};

const x = new Foo();
x.bar();

to create the Foo constructor with

function Foo() {}

Then we add the bar instance method to its prototype with

Foo.prototype.bar = function () {};

Then we instantiate a Foo object and called the Foo instance’s bar method with

const x = new Foo();
x.bar();

Conclusion

To add method to object with JavaScript, we can add it to the prototype of the constructor.