javascript Базовый. Занятие 07
TRANSCRIPT
Темы лекции: Работа с cookie и графикой.
Практическое задание: Работа с cookie и графикой.
Тренер: Игорь Шкулипа, к.т.н.
JavaScript. Базовый курс
Занятие 7
http://www.slideshare.net/IgorShkulipa 2
Cookies
Cookie - это небольшая порция текстовой информации, которую серверпередает браузеру. Браузер будет хранить эту информацию ипередавать ее серверу с каждым запросом как часть HTTP заголовка.Одни значения cookie могут храниться только в течение одной сессии,они удаляются после закрытия браузера. Другие, установленные нанекоторый период времени, записываются в файл.
Сами по себе cookies не могут делать ничего, это только лишь некотораятекстовая информация. Однако сервер может считыватьсодержащуюся в cookies информацию и на основании ее анализасовершать те или иные действия.
Например, в случае авторизованного доступа к чему либо через WWW вcookies сохраняется login и password в течение сессии, что позволяетпользователю не вводить их снова при запросах каждого документа,защищенного паролем.
На использовании cookies также часто строят функции оформлениязаказов в онлайновых магазинах и т.д.
http://www.slideshare.net/IgorShkulipa 3
document.cookie
Для чтения и записи cookie используется свойство document.cookie.Однако, оно представляет собой не объект, а строку в специальномформате, для удобной манипуляций с которой нужны дополнительныефункции.
Эта строка состоит из пар ключ=значение, которые перечисляютсячерез точку с запятой с пробелом “; “.
Значит, чтобы прочитать cookie, достаточно разбить строку по ; , изатем найти нужный ключ. Это можно делать либо через split и работус массивом, либо через регулярное выражение.
http://www.slideshare.net/IgorShkulipa 4
Запись в document.cookie
В document.cookie можно писать. При этом запись не перезаписываетсуществующие cookie, а дополняет к ним.
У cookie также есть ряд важных настроек, которые желательно указать, так какзначения по умолчанию у них неудобны.
Эти настройки указываются после пары ключ=значение, каждое — после точки сзапятой:
• path=/ - путь, внутри которого будет доступ к cookie. Если не указать, тоимеется в виду текущий путь и все пути ниже него. Как правило,используется path=/, то есть cookie доступно со всех страниц сайта.
• domain=site.com - домен, на котором доступно cookie. Если не указать, тотекущий домен. Допустимо указывать текущий домен site.com и егоподдомены, например forum.site.com.
• expires=Tue, 19 Jan 2038 03:14:07 GMT - дата истечения куки в форматеGMT. Получить нужную дату можно, используя объект Date. Его можноустановить в любое время, а потом вызвать toUTCString(). Если дату неуказать, то cookie будет считаться «сессионным». Такое cookie удаляетсяпри закрытии браузера. Если дата в прошлом, то cookie будет удален.
• secure - cookie можно передавать только по HTTPS.
http://www.slideshare.net/IgorShkulipa 5
Полезные функции для работы с cookie
В JavaScript нет способа просто работать с cookie без дополнительныхфункций.
Поэтому следующие функции или их аналоги просто необходимы:
• function getCookie(name)
• function setCookie(name, value, expdays)
• function deleteCookie(name)
http://www.slideshare.net/IgorShkulipa 6
function getCookie
// возвращает cookie
function getCookie(name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == name) {
return unescape(y);
}
}
}
http://www.slideshare.net/IgorShkulipa 7
function setCookie
// уcтанавливает cookie
function setCookie(name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" :
"; expires=" + exdate.toUTCString());
document.cookie = name + "=" + c_value;
}
http://www.slideshare.net/IgorShkulipa 8
function deleteCookie
// удаляет cookie
function deleteCookie(name) {
setCookie(name, null, -1);
}
http://www.slideshare.net/IgorShkulipa 9
Аргументы функций
• name - название cookie• value - значение cookie (строка)• expires - количество дней до истечения cookie.
http://www.slideshare.net/IgorShkulipa 10
Сторонние cookie
При работе с cookie есть важная тонкость, которая касается внешнихресурсов.
Теоретически, любой ресурс, который загружает браузер, можетпоставить cookie.
Cookie, которые не принадлежат основной странице, называются«сторонними» (3rd party) cookies. Не все браузеры их разрешают.
Как правило, в настройках браузера можно поставить «Блокироватьданные и файлы cookie сторонних сайтов».
Цель этого запрета — защитить посетителей от слежки со сторонырекламодателей, которые вместе с картинкой-баннером присылают икуки, таким образом помечая посетителей.
http://www.slideshare.net/IgorShkulipa 11
Ограничения cookie
На Cookie наложены ограничения:
• Имя и значение вместе не должны превышать 4кб.
• Общее количество cookie на домен ограничено 30-50, взависимости от браузера.
• Разные домены 2го уровня полностью изолированы. Но в пределахдоменов 3го уровня куки можно ставить свободно с указаниемdomain.
• Сервер может поставить cookie с дополнительным флагомHttpOnly. Cookie с таким параметром передаётся только взаголовках, оно никак не доступно из JavaScript.
Иногда посетители отключают cookie. Отловить это можно проверкойсвойства navigator.cookieEnabled
http://www.slideshare.net/IgorShkulipa 12
Альтернативы cookie
• sessionStorage
• globalStorage
• userData
• Client-side Database
• Local SharedObject
http://www.slideshare.net/IgorShkulipa 13
sessionStorage
Этот метод поддерживается Firefox начиная со второй версии. Этоглобальный обьект, который хранится в текущей сессии документа ихранится пока документ открыт, перегружается иливосстанавливается, но открытие нового окна или вкладки с тем жеадресом породит новую сессию.
Пример:
sessionStorage.text = «Hello, World!»;
alert(sessionStorage.text);
Недостатком такого подхода является то что он не можетраспространяться на другие страницы либо окна, а работаеттолько в пределе своей сессии.
http://www.slideshare.net/IgorShkulipa 14
globalStorage
В связи с тем что HTML5 пока еще развивается, в Firefox присутствуетглобальный объект globalStorage, который позволяет хранитьданные в браузере в течении долгого промежутка времени непривязываясь к сессии, что позволяет пользоваться и манипулироватьсохраненными данными при открытия нового окна, вкладки,закрытия/открытия браузера. Привязка хранилища такого родаосуществляется по домену.
Пример:
// Инициализируем хранилище
storage = globalStorage[“somedomain.com”];
// Записываем значение
storage[“hello”] = “Hello, World!”;
// Выводим значение
alert(storage[“hello”]);
// При необходимости удаляем
delete storage[“hello”];
Такой подход дает возможность сохранить до 5 мегабайт информации наклиенте в определенном домене, и использовать хранилище впределах домена и его субдоменов.
http://www.slideshare.net/IgorShkulipa 15
Client-side Database
Разработчики WebKit (Safari) вплотную приблизились к рекомендациямHTML5 и дали возможность создавать на клиенте базу данных.
http://www.slideshare.net/IgorShkulipa 16
Работа с графикой
Тег canvas - это элемент HTML 5, который предназначен для созданиярастрового изображения при помощи JavaScript.
<canvas height=‘250' width=‘250' id='example'></canvas>
http://www.slideshare.net/IgorShkulipa 17
Элементы работы с canvas
• Прямоугольники. Самой элементарной фигурой которую можно рисоватьявляется прямоугольник. Предусмотрено три функции для отрисовкипрямоугольников.
• strokeRect(x, y, ширина, высота) - рисует прямоугольник• fillRect(x, y, ширина, высота) - рисует закрашенный прямоугольник• clearRect(x, y, ширина, высота) - очищает область размером с
прямоугольник заданного размера
• Линии и дуги. Рисование фигур составленных из линий выполняетсяпоследовательно в несколько шагов: beginPath(); closePath(); stroke();
fill();
• beginPath используется что бы начать серию действий описывающих
отрисовку фигуры. Каждый новый вызов этого метода сбрасывает вседействия предыдущего и начинает рисовать заново.
• closePath является не обязательным действием и по сути оно пытается
завершить рисование проведя линию от текущей позиции к позиции скоторой начали рисовать.
• Завершающий шаг это вызовом метода stroke или fill. Первый обводит
фигуру линиями, а второй заливает фигуру сплошным цветом.
http://www.slideshare.net/IgorShkulipa 18
Элементы работы с canvas
• Кривые Бернштейна-Безье
quadraticCurveTo(Px, Py, x, y)
bezierCurveTo(P1x, P1y, P2x, P2y, x, y)
x и y это точки в которые необходимо перейти, а координаты P(Px,Py) в квадратичной кривой это дополнительные точки которыеиспользуются для построения кривой. В кубической кривойсоответственно две дополнительные точки.
http://www.slideshare.net/IgorShkulipa 19
Ссылки
http://xiper.net/manuals/canvas/
http://www.html5canvas.ru/
http://www.slideshare.net/IgorShkulipa 20
SVG.js
SVG (от англ. Scalable Vector Graphics — масштабируемая векторнаяграфика) — язык разметки масштабируемой векторной графики,созданный Консорциумом Всемирной паутины (W3C) и входящий вподмножество расширяемого языка разметки XML, предназначен дляописания двумерной векторной и смешанной векторно-растровойграфики в формате XML.
SVG.js - легковесная библиотека для управления и анимации SVG.
• Анимация размеров, позиции, трансформации (translation, rotation,skew, scale, matrix), цвета
• Masking и Clipping элементов• Модульная структура, простота написания расширений• Text paths (с поддержкой анимации)• Группировка элементов• Динамичные градиенты• События• Понятная документация
https://github.com/wout/svg.js
http://www.slideshare.net/IgorShkulipa 21
Пример. HTML
<!DOCTYPE html> <html> <head>
<title>JavaScript Canvas and Cookie Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/site.css" type="text/css" />
<script type="text/javascript" src="js/functions.js"> </script>
<script type="text/javascript" src="js/secundomer.js"> </script>
<body>
<div id="page">
<div id="head">
<div id="logo">
<img src="img/logo.png" height="94" width="100" alt="logo">
</div>
<div id="title">JavaScript Canvas and Cookie Example</div>
</div>
<div class="main">
<div class="innermain">
<div id="menu" class="menu">
<a href="#" id="mi1" class="menuitem">Secundomer</a>
</div>
<div id="content" class="content">
<canvas height="250" width="250" id="maincanvas"></canvas>
</div> </div> </div>
<div id="foot">
<p onmouseover="this.className = 'pmouseover'"
onmouseout="this.className = 'pmouseout'">
Move Closer to Change the Style</p>
</div> </div>
http://www.slideshare.net/IgorShkulipa 22
Пример. HTML
<script type="text/javascript">
var mi1 = document.getElementById("mi1");
var canv = document.getElementById("maincanvas");
mi1.addEventListener("click", StartSecundomer, false);
canv.addEventListener("click", CanvasClicker, false);
</script>
</body>
</html>
http://www.slideshare.net/IgorShkulipa 23
Пример. functions.js
Добавлены функции для работы с cookie:
• function getCookie(name)
• function setCookie(name, value, expdays)
• function deleteCookie(name)
http://www.slideshare.net/IgorShkulipa 24
Пример. secundomer.js
var Canvas;
var Interval = new Object();
Secundomer = {
//Initial State
secondSize: 1000,
slowness: 10,
zeroAngle: Math.PI,
xCenter: 0,
yCenter: 0,
radius: 80,
backColor: "rgb(255,255,255)",
arrowColor: "rgb(255,0,0)",
currentColor: "",
ciferbladPath: "./img/ciferblat.png",
canvas: Object(),
//Cookies
currentAngle: Math.PI,
currentSecond: 0
}
http://www.slideshare.net/IgorShkulipa 25
Пример. Рисуем циферблат
Secundomer.DrawInitial = function () {
var img = new Image();
img.src = Secundomer.ciferbladPath;
var context = Canvas.getContext("2d");
context.width = Canvas.clientWidth;
context.height = Canvas.clientHeight;
Secundomer.xCenter = Math.floor(context.width / 2);
Secundomer.yCenter = Math.floor(context.height / 2);
Secundomer.radius = Math.floor(context.width * 0.25);
context.drawImage(img, 0, 0, context.width, context.height);
context.stroke();
}
http://www.slideshare.net/IgorShkulipa 26
Пример. Рисуем стрелку
Secundomer.DrawArrow = function (canvas) {
Secundomer.currentAngle -=
Math.PI / (60 * Secundomer.slowness);
Secundomer.ChangeColor();
var x = Math.floor(Secundomer.xCenter +
Secundomer.radius * Math.sin(Secundomer.currentAngle));
var y = Math.floor(Secundomer.yCenter +
Secundomer.radius * Math.cos(Secundomer.currentAngle));
//Drawing on Canvas
var context = Canvas.getContext("2d");
context.strokeStyle = Secundomer.currentColor;
context.beginPath();
context.moveTo(Secundomer.xCenter, Secundomer.yCenter);
context.lineTo(x, y);
context.stroke();
}
http://www.slideshare.net/IgorShkulipa 27
Пример. Смена цвета стрелки
Secundomer.ChangeColor = function () {
if (Secundomer.currentAngle <=
(Secundomer.zeroAngle - 2 * Math.PI)) {
Secundomer.currentAngle = Secundomer.zeroAngle;
Secundomer.currentSecond = 1 - Secundomer.currentSecond;
if (Secundomer.currentSecond == 0) {
Secundomer.currentColor = Secundomer.arrowColor;
} else {
Secundomer.currentColor = Secundomer.backColor;
}
}
}
http://www.slideshare.net/IgorShkulipa 28
Пример. Инициализация на основе cookie
Secundomer.InitializeSecundomer = function () {
var cs = getCookie("currentSecond");
var ca = getCookie("currentAngle");
if (cs != undefined) {
Secundomer.currentSecond = +cs;
} else Secundomer.currentSecond = 0;
if (ca != undefined) {
Secundomer.currentAngle = +ca;
} else Secundomer.currentAngle = Secundomer.zeroAngle;
Canvas = document.getElementById("maincanvas");
}
http://www.slideshare.net/IgorShkulipa 29
Пример. Сохранение состояния в cookie
Secundomer.SaveSecundomer = function () {
setCookie("currentAngle", Secundomer.currentAngle, 1);
setCookie("currentSecond", Secundomer.currentSecond, 1);
}
http://www.slideshare.net/IgorShkulipa 30
Пример. Обнуление параметров
Secundomer.ResetSecundomer = function () {
Secundomer.currentColor = Secundomer.arrowColor;
Secundomer.currentSecond = 0;
Secundomer.currentAngle = Secundomer.zeroAngle;
Canvas = document.getElementById("maincanvas");
}
http://www.slideshare.net/IgorShkulipa 31
Пример. Запуск, остановка, возобновление таймера
function StartSecundomer() {
Secundomer.ResetSecundomer();
Secundomer.DrawInitial();
Interval =
window.setInterval(Secundomer.DrawArrow,
Secundomer.secondSize / Secundomer.slowness);
}
function ResumeSecundomer() {
Secundomer.InitializeSecundomer();
Interval =
window.setInterval(Secundomer.DrawArrow,
Secundomer.secondSize / Secundomer.slowness);
}
function StopSecundomer() {
Secundomer.SaveSecundomer();
window.clearInterval(Interval);
}
http://www.slideshare.net/IgorShkulipa 32
Пример. Обработчики меню и клика по canvas
function SecundomerMenuClick() {
StartSecundomer();
}
var stop = true;
function CanvasClicker() {
if (stop) {
StopSecundomer();
stop = false;
}
else {
ResumeSecundomer();
stop = true;
}
}
http://www.slideshare.net/IgorShkulipa 34
Лабораторная работа №4.
Нарисовать игру из Лабораторной работы №3 на canvas с возможностьюсохранения текущего состояния игры в cookie.