Fyrirlestur – JavaScript API í vafra

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Vafra API

• Vafrar hafa mörg JavaScript API
• Leyfa okkur að gera áhugaverða hluti
• Höfum séð nokkur, lítum á nokkur í viðbót, enn fleiri til

---

localStorage & sessionStorage

• Vistum strengi í vafra með window.localStorage
  • setItem(key, value) vistar value undir key
  • removeItem(key) fjarlægir gögn undir key
  • getItem(key) sækir gögn undir key

---

• Notum JSON ef við þurfum að vista flóknari gagnategundir, þurfum að sjá um að þýða á milli
• sessionStorage virkar aðeins í þessu „session“, gögn þurrkast út þegar glugga/tab er lokað

localStorage Dæmi

---

Multimedia

• Getum unnið með vídeó og hljóð í gegnum <video> og <audio>
• Brugðist við atburðum, breytt stöðu o.s.fr.

video dæmi

---

Workers

• JavaScript keyrir í sama þræði og vafri/tab
• Keyrslur sem taka langan tíma læsa vafra
• Vinnuþjarkar leysa vandamálið með að taka vinna í nýjum þráð

workers dæmi

---

getUserMedia

• Getum einfaldlega beðið um aðgang að myndavél og hljóðnema
• navigator.mediaDevices.getUserMedia() biður um aðgang að því sem við viljum
• Promise API

camera dæmi

---

getCurrentPosition

• Getum beðið um staðsetningu notanda, notar WiFi, sim kort, eða GPS
• navigator.geolocation.getCurrentPosition biður um aðgang að staðsetningu
• Callback API

getCurrentPosition dæmi

---

PWA’s

• Progressive web application
• Vefir sem eru á HTTPS, hafa service worker og web manifest
• Virka „offline“, geta sent push notification, stungið upp á að bæta við á „home screen“

---

Canvas

• Með Canvas getum við teiknað grafík gegnum JavaScript API
• Bæði í 2D og 3D

const ctx = document
  .querySelector('canvas')
  .getContext('2d');

ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);

---

einfalt canvas dæmi

greinar með canvas

canvas kökurit

kall að hlaupa með canvas

---

• Heill kafli í Eloquent JavaScript um Canvas og 2D
• Endar á að búa til einfaldan 2D platformer

---

WebGL

• Með Canvas er líka hægt að búa til 3D umhverfi gegnum WebGL
• Notar OpenGL API
• three.js er einfaldara API ofan á OpenGL

---

webgl dæmi

threejs dæmi