Игры воображения с новыми API для JavaScript

1,762 views

Published on

Презентация с HTML5Camp.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,762
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Игры воображения с новыми API для JavaScript

  1. 1. Игры воображения сновыми API дляJavaScriptГайдар МагдануровРуководитель направления веб-технологий, Microsoft @gaidar #html5camp
  2. 2. Содержание Асинхронная загрузка файлов скриптов Оффлайн работа веб-приложений Многопоточность JavaScript История навигации Взаимодействие с сервером Работа с файлами База данных в браузере
  3. 3. Асинхронная загрузкаскриптовAsync #html5camp
  4. 4. Аттрибут async <script async src="someSlowScript.js" onload="myInit()"></script> Атрибут async — Скрипт загружается асинхронно и выполняется сразу после загрузки, вне зависимости от порядка на странице Атрибут defer — Скрипт загружается асинхронно, однако скрипты выполняются в порядке, указанном на странице
  5. 5. ДемонстрацияAsync #html5camp
  6. 6. Оффлайн работаApplication Cache #html5camp
  7. 7. Оффлайн работа веб-приложений Манифест: — <html manifest="example.mf"> Важно указать Content-Type — text/cache-manifest Структура манифеста — CACHE — NETWORK — FALLBACK
  8. 8. Манифест CACHE MANIFEST CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js NETWORK: login.aspx http://api.twitter.com FALLBACK: /main.aspx /main.html images/large/ images/offline.jpg *.html /offline.html
  9. 9. Обновление кэша Пользователь очищает кэш Изменился файл манифеста — Изменения файлов не вызывают обновление кеша Программное обновление
  10. 10. Статусы кеша var appCache = window.applicationCache; switch (appCache.status) { // ... }; // UNCACHED // IDLE // CHECKING // DOWNLOADING // UPDATEREADY // OBSOLETE
  11. 11. Обновление кэша var appCache = window.applicationCache; // Обновление кеша appCache.update(); if (appCache.status == window.applicationCache.UPDATEREADY) { // замена кеша appCache.swapCache(); }
  12. 12. Обновление кеша // проверка наличия новых файлов и обновление страницы window.addEventListener(load, function(e) { window.applicationCache.addEventListener(updateready, funct ion(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { window.applicationCache.swapCache(); if (confirm(Доступна новая версия. Обновить?)) { window.location.reload(); } } else { // Нет новых данных } }, false); }, false);
  13. 13. События кэша function handleCacheEvent(e) { //... } appCache.addEventListener(cached, handleCacheEvent, false); // cached // downloading // error // noupdate // obsolete // progress // updateready
  14. 14. ДемонстрацияApp Cache #html5camp
  15. 15. Многопоточность JavaScriptWeb Workers #html5camp
  16. 16. Web Workers Фоновое выполнение JavaScript кода Не задействован UI-поток браузера Нет доступа к DOM Нет доступа к глобальным переменным Часть свойств объектов доступна только для чтения — window.location
  17. 17. Работа с Web Workers var worker = new Worker("worker.js"); // получение сообщений от Worker worker.onmessage = function(e) { alert(e.data); }; // отправка сообещний в Worker worker.postMessage("hello"); // -------------------------------- // обработка сообщений в Worker self.onmessage = function(e) { self.postMessage("Hello " + e.data); };
  18. 18. Работа с Web Workers // обработка ошибок worker.onerror = function(e) { alert("Ошибка в файле: " + e.filename + "nline: " + e.lineno + "nDescription: " + e.message); }; // загрузка дополнительных скриптов importScripts("lib1.js", "lib2.js"); // остановка Worker self.onmessage = function(e) { if (e.data == "STOP") self.close(); };
  19. 19. История навигацииHistory API #html5camp
  20. 20. History API Объект windows.history — window.history.length – количестве объектов — window.history.state - получение объекта из истории — window.history.go(n) – переходы между сохраненными состояниями — window.history.back() - алиас go(-1) — window.history.forward() – алиас go(1) — window.history.pushState(data, title [, url]) - добавление элемента — window.history.replaceState(data, title [, url]) - обновление элемента
  21. 21. Взаимодействие с серверомWeb Sockets #html5camp
  22. 22. Web Sockets Клиент-сервер Постоянное соединение Способ коммуникации клиентов
  23. 23. Сервер – node.js var util = require(util), ws = require(ws); var server = ws.createServer(function (socket) { socket.addListener("connect", function (resource) { sys.puts("client connected from " + resource) socket.write("welcomern") }) socket.addListener("data", function (data) { socket.write(data) }) socket.addListener("close", function () { sys.puts("client left") }) }) server.listen(8080)
  24. 24. Клиент <script type="text/javascript" src="jquery.js"></script> <!– плагин jQuery ws --> <script type="text/javascript" src="jquery.ws.js"></script> <script type="text/javascript"> $(document).ready(function () { var ws = $.ws.conn({ url : ws://localhost:8080, onopen : function () { console.log(connected); }, onmessage : function (data) { console.log("received: " + data) }, onclose : function (event) { console.log(disconnected); } }); }); </script>
  25. 25. Работа с файламиFile API #html5camp
  26. 26. Drag & Drop и File API Взаимодействие с файлами, переданными в браузер, на стороне клиента До File API браузер не давал возможности получить информацию о пути к файлу или прочитать его содержимое
  27. 27. Использование File API <div id="droppoint"><span id="lbl">Тащи сюда!</span></div> <img id="img"/> // обработчики событий D&D var dropbox = document.getElementById("droppoint") // аналогично для dragenter, dragexit, dragover dropbox.addEventListener("dragenter", noopHandler, false); dropbox.addEventListener("drop", dropHandler, false); function noopHandler(evt) { evt.stopPropagation(); evt.preventDefault(); } function dropHandler(evt) { evt.stopPropagation(); evt.preventDefault(); var files = evt.dataTransfer.files; // Только при наличии файлов обрабатываем if (files.length > 0) handleFiles(files); }
  28. 28. Использование File API function handleFiles(files) { var file = files[0]; document.getElementById("lbl").innerHTML = "Открываю " + file.name; var reader = new FileReader(); // обработка события завершения чтения reader.onloadend = handleReaderLoadEnd; // начинаем операцию чтения reader.readAsDataURL(file); } function handleReaderLoadEnd(evt) { var img = document.getElementById("img"); img.src = evt.target.result; }
  29. 29. Как выглядит картинка <img src="data:image/png;base64,iVBORw0KGgoA AAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38 GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Красная точка">
  30. 30. База данных в браузереIndexedDB #html5camp
  31. 31. IndexedDB Объектное хранилище в браузере Поддерживает асинхронный API для работы с сохраненными объектами Индексация и быстрый доступ к объектам Возможность долгосрочного хранения данных
  32. 32. Игры воображения сновыми API дляJavaScriptГайдар МагдануровРуководитель направления веб-технологий, Microsoft @gaidar #html5camp

×