Category: JavaScript Answers

Sometimes, we want to add weeks to a date using JavaScript.

In this article, we’ll look at how to add weeks to a date using JavaScript.

Add Weeks to a Date Using JavaScript

To add weeks to a date using JavaScript, we can use the getDate method to get the date of the month.

Then we can add the number of weeks multiplied by 7 and pass that to setDate .

For instance, we write:

const numWeeks = 2;
const dt = new Date(2021, 1, 1);
dt.setDate(dt.getDate() + numWeeks * 7);
console.log(dt);

to add 2 weeks to Feb 1, 2021.

We call setDate with dt.getDate() + numWeeks * 7 add 14 days to the date returned by dt.getDate .

setDate will automatically calculate the correct date no matter how the dates are added.

Therefore dt is:

Mon Feb 15 2021 00:00:00 GMT-0800 (Pacific Standard Time)

according to the console log.

Conclusion

To add weeks to a date using JavaScript, we can use the getDate method to get the date of the month.

Then we can add the number of weeks multiplied by 7 and pass that to setDate .

Sometimes, we want to get a high-resolution timestamp with JavaScript.

In this article, we’ll look at how to get a high-resolution timestamp with JavaScript.

Get a High-Resolution Timestamp with JavaScript

To get a high-resolution timestamp with JavaScript, we can use the window.performance.now or window.performance.webkitNow methods.

For instance, we write:

let getTimestamp;
if (window.performance.now) {
  getTimestamp = () => {
    return window.performance.now();
  };
} else {
  if (window.performance.webkitNow) {
    getTimestamp = () => {
      return window.performance.webkitNow();
    };
  } else {
    getTimestamp = () => {
      return new Date().getTime();
    };
  }
}

console.log(getTimestamp());

We can use window.performance.now if it’s available with:

if (window.performance.now) {
  getTimestamp = () => {
    return window.performance.now();
  };
}

We set getTimestamp to a function that returns the timestamp from window.performance.now .

Otherwise, we set getTimestamp to a function that returns the timestamp from window.performance.webkitNow .

And if that’s not available, we set getTimestamp to a function that returns the timestamp from the getTime method.

Conclusion

To get a high-resolution timestamp with JavaScript, we can use the window.performance.now or window.performance.webkitNow methods.

Sometimes, we want to determine scroll direction without actually scrolling in our JavaScript app.

In this article, we’ll look at how to determine scroll direction without actually scrolling in our JavaScript app.

Determine Scroll Direction without Actually Scrolling in JavaScript

To determine scroll direction without actually scrolling in our JavaScript app, we can listen to the wheel event to see which direction the mouse wheel is moving.

For instance, we write:

window.addEventListener('wheel', (event) => {  
  if (event.deltaY < 0) {  
    console.log('scrolling up');  
  } else if (event.deltaY > 0) {  
    console.log('scrolling down');  
  }  
});

to add the wheel event listener to window with window.addEventListener .

In the event handler callback, we check if event.deltaY is less than 0.

If it is, we know we’re scrolling up with the mouse wheel.

And if event.deltaY is bigger than 0, then we know we’re scrolling down with the mouse wheel.

Conclusion

To determine scroll direction without actually scrolling in our JavaScript app, we can listen to the wheel event to see which direction the mouse wheel is moving.

Sometimes, we want to disable text selection while pressing shift with JavaScript.

In this article, we’ll look at how to disable text selection while pressing shift with JavaScript.

Disable Text Selection While Pressing Shift with JavaScript

To disable text selection while pressing shift with JavaScript, we can set the document.onselectstart property to a function that returns false.

To do this, we write:

window.onload = () => {  
  document.onselectstart = () => {  
    return false;  
  }  
}

to set the document.onselectstart property to a function that returns false .

Now the user won’t be able to select anything on the screen.

We put the code in the window.onload method to make sure that the DOM is loading before we set onselectstart .

Conclusion

To disable text selection while pressing shift with JavaScript, we can set the document.onselectstart property to a function that returns false.

Sometimes, we want to draw a dotted line in the HTML Canvas with JavaScript.

In this article, we’ll look at how to draw a dotted line in the HTML Canvas with JavaScript.

Draw a Dotted Line in the HTML Canvas with JavaScript

To draw a dotted line in the HTML Canvas with JavaScript, we can use the setLineDash or mozDash method.

For instance, we write:

<canvas width='200' height='200'></canvas>

to create the canvas.

Then we write:

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
if (ctx.setLineDash !== undefined) {
  ctx.setLineDash([5, 10]);
}
if (ctx.mozDash !== undefined) {
  ctx.mozDash = [5, 10];
}
ctx.beginPath();
ctx.lineWidth = "2";
ctx.strokeStyle = "green";
ctx.moveTo(0, 75);
ctx.lineTo(250, 75);
ctx.stroke();

to get the canvas and its 2d context with:

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

Then we call setLineDash or mozDash to set the line style to a dashed line.

Next, we call beginPath to start drawing.

Then we set the width and stroke styles with:

ctx.lineWidth = "2";
ctx.strokeStyle = "green";

Then we use moveTo to move to the point where the line starts.

Then we use lineTo to set the point where the line ends.

And finally, we call stroke to draw the line into the canvas.

Conclusion

To draw a dotted line in the HTML Canvas with JavaScript, we can use the setLineDash or mozDash method.