JavaScript in the next generation

Slide 1

Slide 1 text

JAVASCRIPT IN THE JAVASCRIPT IN THE NEXT GENERATION NEXT GENERATION

Slide 2

Slide 2 text

HELLO! HELLO! PHIL NASH PHIL NASH MINT MINTDIGITAL DIGITAL

Slide 3

Slide 3 text

http://stickygram.com http://stickygram.com

Slide 4

Slide 4 text

http://foldable.me http://foldable.me

Slide 5

Slide 5 text

WARNING WARNING

Slide 6

Slide 6 text

JAVASCRIPT IN THE JAVASCRIPT IN THE NEXT GENERATION NEXT GENERATION

Slide 7

Slide 7 text

JARRRRVASCRIPT JARRRRVASCRIPT

Slide 8

Slide 8 text

R R

Slide 9

Slide 9 text

(ARRR)R (ARRR)R

Slide 10

Slide 10 text

JAVASCRIPT KEEPS JAVASCRIPT KEEPS GETTING BETTER GETTING BETTER

Slide 11

Slide 11 text

BROWSERS KEEP BROWSERS KEEP GETTING BETTER GETTING BETTER

Slide 12

Slide 12 text

DEVICE APIS DEVICE APIS

Slide 13

Slide 13 text

WEB VS NATIVE WEB VS NATIVE

Slide 14

Slide 14 text

DEVICE APIS DEVICE APIS GEOLOCATION GEOLOCATION DEVICEORIENTATION AND DEVICEMOTION DEVICEORIENTATION AND DEVICEMOTION BATTERY API BATTERY API VIBRATION VIBRATION CAMERAS AND MICROPHONES CAMERAS AND MICROPHONES MORE! MORE! ☠ ☠ ☠ ☠ ☠ ☠ ☠ ☠ ☠ ☠ ☠ ☠

Slide 15

Slide 15 text

GEOLOCATION GEOLOCATION

Slide 16

Slide 16 text

GEOLOCATION if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(p){ console.log(p.coords.latitude); console.log(p.coords.longitude); }); } 01. 02. 03. 04. 05. 06.

Slide 17

Slide 17 text

USES FOR GEOLOCATION USES FOR GEOLOCATION TREASURE MAPS AND DIRECTIONS TREASURE MAPS AND DIRECTIONS REPLACEMENT FOR APPLE MAPS REPLACEMENT FOR APPLE MAPS ☠ ☠ ☠ ☠

Slide 18

Slide 18 text

DEVICEORIENTATION DEVICEORIENTATION AND DEVICEMOTION AND DEVICEMOTION

Slide 19

Slide 19 text

DEVICEORIENTATION DEVICEORIENTATION

Slide 20

Slide 20 text

DEVICEORIENTATION if ('ondeviceorientation' in window){ window.addEventListener('deviceorientation', function(e){ console.log("Alpha: " + e.alpha); console.log("Beta: " + e.beta); console.log("Gamma: " + e.gamma); }, false); } 01. 02. 03. 04. 05. 06. 07.

Slide 21

Slide 21 text

DEVICEMOTION DEVICEMOTION

Slide 22

Slide 22 text

DEVICEMOTION if ('ondevicemotion' in window){ window.addEventListener('devicemotion', function(e){ console.log(e.acceleration.x); console.log(e.acceleration.y); console.log(e.acceleration.z); }, false); } 01. 02. 03. 04. 05. 06. 07.

Slide 23

Slide 23 text

DEMO DEMO

Slide 24

Slide 24 text

USES FOR DEVICEORIENTATION USES FOR DEVICEORIENTATION AND DEVICEMOTION AND DEVICEMOTION SHIP'S COMPASS AND SPEEDOMETER SHIP'S COMPASS AND SPEEDOMETER GAMES - WII CONTROLLER STYLE CONTROL GAMES - WII CONTROLLER STYLE CONTROL ☠ ☠ ☠ ☠

Slide 25

Slide 25 text

BATTERY API BATTERY API

Slide 26

Slide 26 text

BROWSER OS BROWSER OS

Slide 27

Slide 27 text

BATTERY API battery = navigator.battery battery.addEventListener("chargingchange", function(e) { console.log("Battery charging?: ", battery.charging); }, false); 01. 02. 03. 04.

Slide 28

Slide 28 text

USES FOR THE BATTERY API USES FOR THE BATTERY API RESTRICTING FEATURES AND PROCESSOR USAGE WHEN RESTRICTING FEATURES AND PROCESSOR USAGE WHEN BATTERY LEVELS ARE LOW. BATTERY LEVELS ARE LOW. ☠ ☠

Slide 29

Slide 29 text

VIBRATION API VIBRATION API

Slide 30

Slide 30 text

Our temporary implementation Our temporary implementation name was Vibrator API, but since it name was Vibrator API, but since it gave the wrong impression, we now gave the wrong impression, we now call it Vibration API call it Vibration API “ “

Slide 31

Slide 31 text

VIBRATION API navigator.mozVibrate(1000); navigator.mozVibrate([200, 100, 200, 100]); 01. 02.

Slide 32

Slide 32 text

CAMERAS AND CAMERAS AND MICROPHONES MICROPHONES

Slide 33

Slide 33 text

CAMERAS AND MICROPHONES if(navigator.getUserMedia){ navigator.getUserMedia( {video: true}, function(stream){ // do something... }, function(){ alert("Error"); } ) } 01. 02. 03. 04. 05. 06. 07. 08. 09.

Slide 34

Slide 34 text

CAMERAS AND MICROPHONES function streamSuccess(stream){ var video = document.getElementsByTagName('video')[0]; source = window.URL.createObjectURL(stream); video.src = stream; } 01. 02. 03. 04. 05.