Friday , 17 November 2017
Home / Programming / JavaScript / Device Events – Advanced JavaScript Tutorial
Device Events
Device Events

Device Events – Advanced JavaScript Tutorial

Smartphones and tablets are devices that are frequently used to browse websites. JavaScript now has a couple of events for hand held devices.  For this tutorial, you’ll need to have a mobile phone. I’ll be using the Iphone for this tutorial. Feel free to skip this tutorial if you don’t have a device handy.

Orientation

The orientationchange event fires when the user changes the device from portrait to landscape mode and vice versa. Clear your script and add this bit of code.

The event object doesn’t have any properties that can help you with an orientation change, but there is a property in the window object that can help you. The orientation property can have 1 of 3 values. 0 is for when the device is in portrait mode. 90 and -90 are the 2 other values which represent landscape mode. The difference between them is the rotation of the device. If 90 is returned, then the user rotated the device to the left. If -90 is returned, then the user rotated the device to the right.

Another event is the deviceorientation event. Yes, the words are flipped, but they’re 2 totally different things. Update your script to this.

When the deviceorientation fires, you get access to 5 properties. We use 3 of them in this example. Here is what they are and what they do

  1. alpha – This property represent the difference between the original y axis and the new y axis. This property can have the values of 0 to 360.
  2. beta – This property represents the difference between the original z axis and the new z axis. This property can have the values of -180 to 180.
  3. gamma –  This property represents the difference between the original z axis and the new z axis. This property can have the values of -180 to 180.
  4. absolute – Returns a boolean value if the values are absolute.
  5. compassCalibrated – Returns a boolean value if the device’s compass is calibrated.

The difference between the beta and gamma values is the rotation. If the device was rotated on the x axis( back and forth),  then the beta value will be updated. If the device was rotated on the y axis (twisting) , then the gamma value will be updated.

Motion

You can also detect if the device is in motion. This is not the orientation, but if the device is actually moving forward, backward, up and down. Great for detecting if the user is walking or if the phone falls.

The devicemotion event fires when this happens. You gain access to 4 properties when this event fires. Update your script to this.

Here’s what each property contains

  1. acceleration – An object with the x, y and z values that give you an idea of the acceleration of the device.
  2. accelerationIncludingGravitiy – Same as the acceleration property, but with gravity affecting the values.
  3. interval – This value contains the amount of milliseconds each time this event will fire. This value will always be consistent.
  4. rotationRate – This property contains alpha, beta and gamma properties of the device orientation.

In order to use this event, you must be in movement.

Conclusion

Device events are pretty new to the JavaScript scene. So, only few devices support these events. Not only that, their browsers must also be up-to-date and support these events. For more information on device events, then go here.

https://developer.mozilla.org/en-US/docs/WebAPI/Detecting_device_orientation

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link