Author: John Au-Yeung

Sometimes, we want to access accelerometer or gyroscope data from JavaScript.

In this article, we’ll look at how to access accelerometer or gyroscope data from JavaScript.

How to access accelerometer or gyroscope data from JavaScript?

To access accelerometer or gyroscope data from JavaScript, we can listen for the deviceorientation event.

For instance, we write

const handleOrientation = (event) => {
  const absolute = event.absolute;
  const alpha = event.alpha;
  const beta = event.beta;
  const gamma = event.gamma;
  //...
};

window.addEventListener("deviceorientation", handleOrientation, true);

to listen for the deviceorientation event on window with window.addEventListener.

Then we get the event data from the handleOrientation.

absolute is a boolean that indicates whetehr the device is providing orientation data absolutely.

alpha is the motion on the device around the z axis between 0 and 360 degrees inclusive.

beta is the motion on the device around the x axis between 0 and 360 degrees inclusive.

gamma is the motion on the device around the y axis between 0 and 360 degrees inclusive.

Conclusion

To access accelerometer or gyroscope data from JavaScript, we can listen for the deviceorientation event.

Sometimes, we want to read file contents on the client-side in JavaScript in various browsers.

In this article, we’ll look at how to read file contents on the client-side in JavaScript in various browsers.

How to read file contents on the client-side in JavaScript in various browsers?

To read file contents on the client-side in JavaScript in various browsers, we add a file input and then read the select files from the input’s value.

For instance, we write

const file = document.getElementById("fileForUpload").files[0];
if (file) {
  const reader = new FileReader();
  reader.readAsText(file, "UTF-8");
  reader.onload = (evt) => {
    document.getElementById("fileContents").innerHTML = evt.target.result;
  };
  reader.onerror = (evt) => {
    document.getElementById("fileContents").innerHTML = "error reading file";
  };
}

to select the file input with getElementById.

We get the first selected file with files[0].

Then we create a FileReader object.

And then we call readAsText to read the file as text.

Then result is available in the reader.onload method.

We get the file’s text from evt.target.result.

Conclusion

To read file contents on the client-side in JavaScript in various browsers, we add a file input and then read the select files from the input’s value.

Sometimes, we want to position a div in a specific coordinates with JavaScript.

In this article, we’ll look at how to position a div in a specific coordinates with JavaScript.

How to position a div in a specific coordinates with JavaScript?

To position a div in a specific coordinates with JavaScript, we can set the position, left and top styles.

For instance, we write

const d = document.getElementById("yourDivId");
d.style.position = "absolute";
d.style.left = xPos + "px";
d.style.top = yPos + "px";

to select the div with getElementById.

Then we set the position CSS property to 'absolute'.

And then we set the left and top styles to xPos and yPos respectively.

They’re both in pixels.

Conclusion

To position a div in a specific coordinates with JavaScript, we can set the position, left and top styles.

Sometimes, we want to hide the cursor in a webpage using JavaScript.

In this article, we’ll look at how to hide the cursor in a webpage using JavaScript.

How to hide the cursor in a webpage using JavaScript?

To hide the cursor in a webpage using JavaScript, we can use the Pointer Lock API.

For instance, we write

document.body.requestPointerLock();

to call document.body.requestPointerLock ask forb permission to remove the pointer from the screen and remove the pointer once permission is granted.

And when we’re done, we write

document.exitPointerLock();

to restore the pointer on the screen.

Conclusion

To hide the cursor in a webpage using JavaScript, we can use the Pointer Lock API.