JavaScript Базовый. Занятие 07.

Темы лекции: Работа с cookie и графикой.
Практическое задание: Работа с cookie и графикой.
Тренер: Игорь Шкулипа, к.т.н.
JavaScript. Базовый курс
Занятие 7

http://www.slideshare.net/IgorShkulipa 2
Cookies
Cookie - это небольшая порция текстовой информации, которую сервер
передает браузеру. Браузер будет хранить эту информацию и
передавать ее серверу с каждым запросом как часть HTTP заголовка.
Одни значения cookie могут храниться только в течение одной сессии,
они удаляются после закрытия браузера. Другие, установленные на
некоторый период времени, записываются в файл.
Сами по себе cookies не могут делать ничего, это только лишь некоторая
текстовая информация. Однако сервер может считывать
содержащуюся в cookies информацию и на основании ее анализа
совершать те или иные действия.
Например, в случае авторизованного доступа к чему либо через WWW в
cookies сохраняется login и password в течение сессии, что позволяет
пользователю не вводить их снова при запросах каждого документа,
защищенного паролем.
На использовании cookies также часто строят функции оформления
заказов в онлайновых магазинах и т.д.

document.cookie
Для чтения и записи cookie используется свойство document.cookie.
Однако, оно представляет собой не объект, а строку в специальном
формате, для удобной манипуляций с которой нужны дополнительные
функции.
Эта строка состоит из пар ключ=значение, которые перечисляются
через точку с запятой с пробелом “; “.
Значит, чтобы прочитать cookie, достаточно разбить строку по ; , и
затем найти нужный ключ. Это можно делать либо через split и работу
с массивом, либо через регулярное выражение.

Запись в 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.

Полезные функции для работы с cookie
В JavaScript нет способа просто работать с cookie без дополнительных
функций.
Поэтому следующие функции или их аналоги просто необходимы:
• function getCookie(name)
• function setCookie(name, value, expdays)
• function deleteCookie(name)

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);
}
}
}

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;
}

function deleteCookie
// удаляет cookie
function deleteCookie(name) {
setCookie(name, null, -1);
}

Аргументы функций
• name - название cookie
• value - значение cookie (строка)
• expires - количество дней до истечения cookie.

Сторонние cookie
При работе с cookie есть важная тонкость, которая касается внешних
ресурсов.
Теоретически, любой ресурс, который загружает браузер, может
поставить cookie.
Cookie, которые не принадлежат основной странице, называются
«сторонними» (3rd party) cookies. Не все браузеры их разрешают.
Как правило, в настройках браузера можно поставить «Блокировать
данные и файлы cookie сторонних сайтов».
Цель этого запрета — защитить посетителей от слежки со стороны
рекламодателей, которые вместе с картинкой-баннером присылают и
куки, таким образом помечая посетителей.

Ограничения cookie
На Cookie наложены ограничения:
• Имя и значение вместе не должны превышать 4кб.
• Общее количество cookie на домен ограничено 30-50, в
зависимости от браузера.
• Разные домены 2го уровня полностью изолированы. Но в пределах
доменов 3го уровня куки можно ставить свободно с указанием
domain.
• Сервер может поставить cookie с дополнительным флагом
HttpOnly. Cookie с таким параметром передаётся только в
заголовках, оно никак не доступно из JavaScript.
Иногда посетители отключают cookie. Отловить это можно проверкой
свойства navigator.cookieEnabled

Альтернативы cookie
• sessionStorage
• globalStorage
• userData
• Client-side Database
• Local SharedObject

sessionStorage
Этот метод поддерживается Firefox начиная со второй версии. Это
глобальный обьект, который хранится в текущей сессии документа и
хранится пока документ открыт, перегружается или
восстанавливается, но открытие нового окна или вкладки с тем же
адресом породит новую сессию.
Пример:
sessionStorage.text = «Hello, World!»;
alert(sessionStorage.text);
Недостатком такого подхода является то что он не может
распространяться на другие страницы либо окна, а работает
только в пределе своей сессии.

globalStorage
В связи с тем что HTML5 пока еще развивается, в Firefox присутствует
глобальный объект globalStorage, который позволяет хранить
данные в браузере в течении долгого промежутка времени не
привязываясь к сессии, что позволяет пользоваться и манипулировать
сохраненными данными при открытия нового окна, вкладки,
закрытия/открытия браузера. Привязка хранилища такого рода
осуществляется по домену.
Пример:
// Инициализируем хранилище
storage = globalStorage[“somedomain.com”];
// Записываем значение
storage[“hello”] = “Hello, World!”;
// Выводим значение
alert(storage[“hello”]);
// При необходимости удаляем
delete storage[“hello”];
Такой подход дает возможность сохранить до 5 мегабайт информации на
клиенте в определенном домене, и использовать хранилище в
пределах домена и его субдоменов.

Client-side Database
Разработчики WebKit (Safari) вплотную приблизились к рекомендациям
HTML5 и дали возможность создавать на клиенте базу данных.

Работа с графикой
Тег canvas - это элемент HTML 5, который предназначен для создания
растрового изображения при помощи JavaScript.
<canvas height=‘250' width=‘250' id='example'></canvas>

Элементы работы с canvas
• Прямоугольники. Самой элементарной фигурой которую можно рисовать
является прямоугольник. Предусмотрено три функции для отрисовки
прямоугольников.
• strokeRect(x, y, ширина, высота) - рисует прямоугольник
• fillRect(x, y, ширина, высота) - рисует закрашенный прямоугольник
• clearRect(x, y, ширина, высота) - очищает область размером с
прямоугольник заданного размера
• Линии и дуги. Рисование фигур составленных из линий выполняется
последовательно в несколько шагов: beginPath(); closePath(); stroke();
fill();
• beginPath используется что бы начать серию действий описывающих
отрисовку фигуры. Каждый новый вызов этого метода сбрасывает все
действия предыдущего и начинает рисовать заново.
• closePath является не обязательным действием и по сути оно пытается
завершить рисование проведя линию от текущей позиции к позиции с
которой начали рисовать.
• Завершающий шаг это вызовом метода stroke или fill. Первый обводит
фигуру линиями, а второй заливает фигуру сплошным цветом.

Элементы работы с canvas
• Кривые Бернштейна-Безье
quadraticCurveTo(Px, Py, x, y)
bezierCurveTo(P1x, P1y, P2x, P2y, x, y)
x и y это точки в которые необходимо перейти, а координаты P(Px,
Py) в квадратичной кривой это дополнительные точки которые
используются для построения кривой. В кубической кривой
соответственно две дополнительные точки.

Ссылки
http://xiper.net/manuals/canvas/
http://www.html5canvas.ru/

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

Пример. 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>

Пример. 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>

Пример. functions.js
Добавлены функции для работы с cookie:
• function getCookie(name)
• function setCookie(name, value, expdays)
• function deleteCookie(name)

Пример. 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
}

Пример. Рисуем циферблат
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();
}

Пример. Рисуем стрелку
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();
}

Пример. Смена цвета стрелки
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;
}
}
}

Пример. Инициализация на основе 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");
}

Пример. Сохранение состояния в cookie
Secundomer.SaveSecundomer = function () {
setCookie("currentAngle", Secundomer.currentAngle, 1);
setCookie("currentSecond", Secundomer.currentSecond, 1);
}

Пример. Обнуление параметров
Secundomer.ResetSecundomer = function () {
Secundomer.currentColor = Secundomer.arrowColor;
Secundomer.currentSecond = 0;
Secundomer.currentAngle = Secundomer.zeroAngle;
Canvas = document.getElementById("maincanvas");
}

Пример. Запуск, остановка, возобновление таймера
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);
}

Пример. Обработчики меню и клика по canvas
function SecundomerMenuClick() {
StartSecundomer();
}
var stop = true;
function CanvasClicker() {
if (stop) {
StopSecundomer();
stop = false;
}
else {
ResumeSecundomer();
stop = true;
}
}

Пример. Результат

Лабораторная работа №4.
Нарисовать игру из Лабораторной работы №3 на canvas с возможностью
сохранения текущего состояния игры в cookie.

JavaScript Базовый. Занятие 07.

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to JavaScript Базовый. Занятие 07.

Similar to JavaScript Базовый. Занятие 07. (20)

More from Igor Shkulipa

More from Igor Shkulipa (20)

JavaScript Базовый. Занятие 07.