Proficient in javascript--10 mobile device JavaScript development

Listing 10-3 accessing data from a touch sensor

1     //Create a <p> element on the page to display the total number of contacts on the current screen2             varTouchcountelem = document.createelement ("P");3 4             //defines an event handler function. Executes this function when a contact-related event occurs5             functionHandletouchevent (event) {6 7                 //get an array of all the touches on the current screen8                 varAlltouches =Event.touches,9Alltoucheslength =alltouches.length;Ten  One                 //prevents the default action of the browser from occurring when the user touches the finger or presses it on the screen A                 if(Event.type = = = "Touchstart") { - Event.preventdefault (); -                 } the  -                 //Displays the total number of current contacts in the page -touchcountelem.innerhtml = "There is currently" + Alltoucheslength + "touches on the screen." -             } +  -             //add <p> elements to the current page + Document.body.appendChild (Touchcountelem); A  at             //When a finger touches the screen (Touchstart) or moves away (touchend), -             //assigning the appropriate event handler to handle -Window.addeventlistener ("Touchstart", Handletouchevent,false); -Window.addeventlistener ("Touchend", Handletouchevent,false);

Apple iOS devices support some of the more advanced gesture-related JavaScript events. These events occur when the user's fingers of two or two hands are pinched or rotated on the screen, and can return the distance the finger moves on the screen. However, these are only valid on specific devices. If you need to replicate these events to other devices, you will find Hammer.js (https://hammerjs.github.io/) A very useful JavaScript library. It is easy to apply to a variety of devices, in your website is the application of gesture function.

Extended reading:

https://www.html5rocks.com/en/mobile/touch/

10.2.3 Access attitude sensor and direction sensor

With the gesture sensor, you can know that the side of the device is facing up. The attitude sensor can also detect how the device is positioned relative to the 3 axis of rotation (10-3), as if the device has an internal gyroscope in general. Some devices, such as Apple's iphone and ipad, are also equipped with magnetic sensors, which help to establish the precise orientation of the device placement. Around the x-axis, the y-axis and z-axis rotations can represent the roll angle, tilt angle, and yaw angle, or angle beta,gamma, and alpha rotation.

Figure 10-3 Rotation of the x-axis, y-axis, and z-axis of the mobile device

By knowing the positioning of the mobile device, we can adjust some of the interface elements in the page to fit the new layout. If the navigation menu is arranged at the top or side of the main content display area according to the position. The screen Orientation API (JavaScript form) allows us to learn the current posture of the device, whether portrait or landscape mode. We can also learn if the device is in an upside-down posture. It emits a Orientationchange event when the device's posture is changed. We can use this event to write code that executes at the moment the device's placement posture changes. The example in listing 10-4 shows how to use the screen Orientation API to add a CSS class to the <body> tab of the page to indicate whether the current device is vertical or horizontal, and to adapt the application style accordingly.

Code Listing 10-4 Changing a class attribute in an HTML page based on the positioning of the mobile device

Proficient in javascript--10 mobile device JavaScript development