Editorial: fixup/modernize examples (#157)

index.bs

@@ -69,16 +69,21 @@ The following code extracts illustrate basic use of the events.
 
 <div class="example">
 Registering to receive {{deviceorientation}} events:
-<pre class="lang-js">
-window.addEventListener("deviceorientation", function(event) {
-    // process event.alpha, event.beta and event.gamma
-}, true);
+<pre class="highlight lang-javascript">
+window.addEventListener("deviceorientation", event => {
+  // process event.alpha, event.beta and event.gamma
+});
+
+// Alternatively...
+window.ondeviceorientation = event => {
+  // process event.alpha, event.beta and event.gamma
+};
 </pre>
 </div>
 
 <div class="example">
 A device lying flat on a horizontal surface with the top of the screen pointing West has the following orientation:
-<pre class="lang-js">
+<pre class="highlight lang-javascript">
 {
   alpha: 90,
   beta: 0,
@@ -94,7 +99,7 @@ A user is holding the device in their hand, with the screen in a vertical plane
 
 <div class="example">
 A user facing a compass heading of alpha degrees is holding the device in their hand, with the screen in a vertical plane and the top of the screen pointing to their right. The orientation of the device is:
-<pre class="lang-js">
+<pre class="highlight lang-javascript">
 {
   alpha: 270 - alpha,
   beta: 0,
@@ -105,17 +110,23 @@ A user facing a compass heading of alpha degrees is holding the device in their
 
 <div class="example">
 Registering to receive {{devicemotion}} events:
-<pre class="lang-js">
-window.addEventListener("devicemotion", function(event) {
-    // Process event.acceleration, event.accelerationIncludingGravity,
-    // event.rotationRate and event.interval
-}, true);
+<pre class="highlight lang-javascript">
+window.addEventListener("devicemotion", (event) => {
+  // Process event.acceleration, event.accelerationIncludingGravity,
+  // event.rotationRate and event.interval
+});
+
+// Alternatively...
+window.ondevicemotion = (event) => {
+  // Process event.acceleration, event.accelerationIncludingGravity,
+  // event.rotationRate and event.interval
+};
 </pre>
 </div>
 
 <div class="example">
 A device lying flat on a horizontal surface with the screen upmost has an {{DeviceMotionEvent/acceleration}} of zero and the following value for {{DeviceMotionEvent/accelerationIncludingGravity}}:
-<pre class="lang-js">
+<pre class="highlight lang-javascript">
 {
   x: 0,
   y: 0,
@@ -126,7 +137,7 @@ A device lying flat on a horizontal surface with the screen upmost has an {{Devi
 
 <div class="example">
 A device in free-fall, with the screen horizontal and upmost, has an {{DeviceMotionEvent/accelerationIncludingGravity}} of zero and the following value for acceleration:
-<pre class="lang-js">
+<pre class="highlight lang-javascript">
 {
   x: 0,
   y: 0,
@@ -137,7 +148,7 @@ A device in free-fall, with the screen horizontal and upmost, has an {{DeviceMot
 
 <div class="example">
 A device is mounted in a vehicle, with the screen in a vertical plane, the top uppermost and facing the rear of the vehicle. The vehicle is travelling at speed v around a right-hand bend of radius r. The device records a positive x component for both {{DeviceMotionEvent/acceleration}} and {{DeviceMotionEvent/accelerationIncludingGravity}}. The device also records a negative value for {{DeviceMotionEvent/rotationRate!!attribute}}.{{DeviceMotionEventRotationRate/gamma}}:
-<pre class="lang-js">
+<pre class="highlight lang-javascript">
 {
   acceleration: {x: v^2/r, y: 0, z: 0},
   accelerationIncludingGravity: {x: v^2/r, y: 9.8, z: 0},
@@ -868,7 +879,7 @@ provided that &beta; and &gamma; are not both zero.
 
 The compass heading calculation above can be represented in JavaScript as follows to return the correct compass heading when the provided parameters are defined, not null and represent {{DeviceOrientationEvent/absolute}} values.
 
-<pre class="lang-js">
+<pre class="highlight lang-javascript">
 var degtorad = Math.PI / 180; // Degree-to-Radian conversion
 
 function compassHeading( alpha, beta, gamma ) {
@@ -939,7 +950,7 @@ If R represents the rotation matrix of the device in the earth frame XYZ, then s
 
 <div class="example">
 The above combined rotation matrix can be represented in JavaScript as follows provided passed parameters are defined, not null and represent {{DeviceOrientationEvent/absolute}} values.
-<pre class="lang-js">
+<pre class="highlight lang-javascript">
 var degtorad = Math.PI / 180; // Degree-to-Radian conversion
 
 function getRotationMatrix( alpha, beta, gamma ) {
@@ -991,7 +1002,7 @@ If q represents the unit quaternion of the device in the earth frame XYZ, then s
 
 <div class="example">
 The above quaternion can be represented in JavaScript as follows provided the passed parameters are defined, are {{DeviceOrientationEvent/absolute}} values and those parameters are not null.
-<pre class="lang-js">
+<pre class="highlight lang-javascript">
 var degtorad = Math.PI / 180; // Degree-to-Radian conversion
 
 function getQuaternion( alpha, beta, gamma ) {