Игры воображения с новыми api для javascript
DESCRIPTION
Презентация с HTML5Camp.TRANSCRIPT
#html5camp
Игры воображения с новыми API для JavaScript
Гайдар Магдануров
@gaidar
Руководитель направления веб-технологий, Microsoft
Содержание
Асинхронная загрузка файлов скриптов
Оффлайн работа веб-приложенийМногопоточность JavaScriptИстория навигацииВзаимодействие с серверомРабота с файламиБаза данных в браузере
#html5camp
Асинхронная загрузка скриптов
Async
Аттрибут async
<script async src="someSlowScript.js" onload="myInit()"></script>
Атрибут async— Скрипт загружается асинхронно и
выполняется сразу после загрузки, вне зависимости от порядка на странице
Атрибут defer— Скрипт загружается асинхронно,
однако скрипты выполняются в порядке, указанном на странице
#html5camp
Демонстрация
Async
#html5camp
Оффлайн работа
Application Cache
Оффлайн работа веб-приложений
Манифест:— <html manifest="example.mf">
Важно указать Content-Type— text/cache-manifest
Структура манифеста— CACHE— NETWORK— FALLBACK
Манифест
CACHE MANIFEST CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js
NETWORK:login.aspxhttp://api.twitter.com
FALLBACK:/main.aspx /main.htmlimages/large/ images/offline.jpg*.html /offline.html
Обновление кэша
Пользователь очищает кэшИзменился файл манифеста
— Изменения файлов не вызывают обновление кеша
Программное обновление
Статусы кешаvar appCache = window.applicationCache;
switch (appCache.status) { // ...};
// UNCACHED// IDLE// CHECKING// DOWNLOADING// UPDATEREADY// OBSOLETE
Обновление кэша
var appCache = window.applicationCache;
// Обновление кешаappCache.update();
if (appCache.status == window.applicationCache.UPDATEREADY) { // замена кеша appCache.swapCache();}
Обновление кеша// проверка наличия новых файлов и обновление страницыwindow.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { window.applicationCache.swapCache(); if (confirm('Доступна новая версия. Обновить?')) { window.location.reload(); } } else { // Нет новых данных } }, false);
}, false);
События кэшаfunction handleCacheEvent(e) { //...}
appCache.addEventListener('cached', handleCacheEvent, false);
// cached// downloading// error// noupdate// obsolete// progress// updateready
#html5camp
Демонстрация
App Cache
#html5camp
Многопоточность JavaScript
Web Workers
Web Workers
Фоновое выполнение JavaScript кода
Не задействован UI-поток браузераНет доступа к DOMНет доступа к глобальным
переменнымЧасть свойств объектов доступна
только для чтения— window.location
Работа с Web Workers
var worker = new Worker("worker.js"); // получение сообщений от Workerworker.onmessage = function(e) { alert(e.data); }; // отправка сообещний в Workerworker.postMessage("hello"); // --------------------------------// обработка сообщений в Workerself.onmessage = function(e) { self.postMessage("Hello " + e.data); };
Работа с Web Workers
// обработка ошибокworker.onerror = function(e) { alert("Ошибка в файле: " + e.filename + "\nline: " + e.lineno + "\nDescription: " + e.message); };
// загрузка дополнительных скриптов importScripts("lib1.js", "lib2.js");
// остановка Workerself.onmessage = function(e) { if (e.data == "STOP") self.close(); };
#html5camp
История навигации
History API
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]) -
обновление элемента
#html5camp
Взаимодействие с сервером
Web Sockets
Web Sockets
Клиент-серверПостоянное соединениеСпособ коммуникации клиентов
Сервер – 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("welcome\r\n") })
socket.addListener("data", function (data) { socket.write(data) })
socket.addListener("close", function () { sys.puts("client left") }) })
server.listen(8080)
Клиент <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>
#html5camp
Работа с файлами
File API
Drag & Drop и File API
Взаимодействие с файлами, переданными в браузер, на стороне клиента
До File API браузер не давал возможности получить информацию о пути к файлу или прочитать его содержимое
Использование File API<div id="droppoint"><span id="lbl">Тащи сюда!</span></div><img id="img"/>
// обработчики событий D&Dvar dropbox = document.getElementById("droppoint")// аналогично для dragenter, dragexit, dragoverdropbox.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);}
Использование File APIfunction 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;}
Как выглядит картинка
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Красная точка">
#html5camp
База данных в браузере
IndexedDB
IndexedDB
Объектное хранилище в браузереПоддерживает асинхронный API
для работы с сохраненными объектами
Индексация и быстрый доступ к объектам
Возможность долгосрочного хранения данных
#html5camp
Игры воображения с новыми API для JavaScript
Гайдар Магдануров
@gaidar
Руководитель направления веб-технологий, Microsoft