Настройка параметров документа HTML
Третий пример демонстрирует, как можно использовать cookie для настройки пользователем параметров документа HTML.
На рис. 7.5 показан документ HTML с двумя кнопками и переключателем, имеющим зависимую фиксацию.
Рис. 7.5. Главный документ HTML, при помощи которого можно выполнить настройку
Если нажать верхнюю кнопку, то в окне браузера появится документ HTML, созданный динамически сценарием JavaScript. В первый раз этот документ будет таким, как показано на рис. 7.6.
Рис. 7.6. Внешний вид документа при первом посещении
При помощи переключателей вы можете выбрать один из четырех цветов фона документа. Выбранное значение запоминается в cookie. Для того чтобы вернуться к цвету, принятому по умолчанию, в документе HTML, показанному на рис. 7.5, нужно нажать нижнюю кнопку.
При последующих посещениях внешний вид документа изменится (рис.7.7).
Рис. 7.7. Внешний вид документа при третьем посещении
Его фон будет иметь такой цвет, какой был выбран при помощи переключателей.
Исходный текст документа HTML приведен в листинге 7.3.
Листинг 7.3. Файл chapter7/CustomPage/CustomPage.html
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=windows-1251">
<TITLE>Customize your page</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var szColor="White";
function addCookie(szName,szValue,dtDaysExpires)
{
var dtExpires = new Date();
var dtExpiryDate = "";
dtExpires.setTime(dtExpires.getTime() + dtDaysExpires * 24 * 60 * 60 * 1000);
dtExpiryDate = dtExpires.toGMTString();
document.cookie = szName + "=" + szValue + "; expires=" + dtExpiryDate;
}
function findCookie(szName)
{
var i = 0;
var nStartPosition = 0;
var nEndPosition = 0;
var szCookieString = document.cookie;
while (i <= szCookieString.length)
{
nStartPosition = i;
nEndPosition = nStartPosition + szName.length;
if(szCookieString.substring(nStartPosition, nEndPosition) == szName)
{
nStartPosition = nEndPosition + 1;
nEndPosition = document.cookie.indexOf(";",nStartPosition);
if(nEndPosition < nStartPosition)
nEndPosition = document.cookie.length;
return document.cookie.substring(nStartPosition, nEndPosition);
break;
}
i++;
}
return "";
}
function removeCookie(szName)
{
var dtExpires = new Date();
dtExpires.setTime(dtExpires.getTime() - 1);
var szValue = findCookie(szName);
document.cookie = szName + "=" + szValue +
"; expires=" + dtExpires.toGMTString();
}
function btnGo()
{
if(findCookie("Count") == "")
{
addCookie("Count","0",10);
addCookie("bgColor",szColor,10);
document.write("<H2>Добро пожаловать!</H2>");
document.write("<P> Вы можете настроить цвет фона этой");
document.write(" страницы при помощи переключателей,");
document.write(" расположенных на главной странице.");
document.write("<P>Настройки будут использованы, когда вы");
document.write(" посетите эту страницу в следующий раз.");
}
else
{
var szCnt = findCookie("Count");
var i=0;
if(szCnt != "")
{
i = szCnt;
i++;
szCnt = i.toString();
addCookie("Count",szCnt,10);
}
document.write("<H2>Рады видеть вас снова!</H2>");
document.write("Вы посетили эту страницу в " + szCnt.bold() + " раз.");
document.bgColor=findCookie("bgColor");
}
}
function chkRadio(form,value)
{
szColor = value;
addCookie("bgColor",szColor,10);
}
function setDefault(form)
{
removeCookie('Count');
szColor="White";
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Посетите вашу персональную страницу</H1>
<FORM NAME="TestForm">
<P>
<INPUT TYPE="button" VALUE="Переход на страницу"
onClick="btnGo();">
<P><HR>
<P>Настройка параметров персональной страницы
<P><B>Цвет фона:</B>
<P><INPUT TYPE="radio" NAME="Color" CHECKED VALUE="White"
onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Белый
<BR><INPUT TYPE="radio" NAME="Color" VALUE="Yellow"
onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Желтый
<BR><INPUT TYPE="radio" NAME="Color" VALUE="Lime"
onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Зеленый
<BR><INPUT TYPE="radio" NAME="Color" VALUE="Fuchsia"
onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Малиновый
<P>
<INPUT TYPE="reset" VALUE="Параметры по умолчанию"
onClick="setDefault(this.form);">
</FORM>
</BODY>
</HTML>
Помимо функций addCookie, findCookie и removeCookie, предназначенных для работы с cookie, в сценарии определена переменная szColor, предназначенная для хранения выбранного пользователем цвета фона, а также функции btnGo, chkRadio и setDefault.
Функция btnGo прежде всего проверяет наличие параметра cookie с именем Count. Если такого параметра нет, сценарий считает, что пользователь просматривает этот документ в первый раз. В этом случае функция btnGo добавляет два параметра cookie с именами Count и bgColor:
addCookie("Count","0",10);
addCookie("bgColor",szColor,10);
Первый из них предназначен для хранения счетчика посещений, а второй - для хранения цвета фона.
Далее функция btnGo формирует документ HTML с приглашением для пользователя, просматривающего документ в первый раз, и завершает свою работу.
В том случае, когда сразу после вызова функция btnGo нашла параметр cookie с именем Count и получила его значение, это значение увеличивается на единицу и записывается обратно. Кроме того, оно отображается в тексте документа:
document.write("<H2>Рады видеть вас снова!</H2>");
document.write("Вы посетили эту страницу в " +
szCnt.bold()+" раз.");
Затем функция btnGo устанавливает цвет фона сформированного документа HTML в соответствии со значением, извлеченным из параметра cookie с именем bgColor:
document.bgColor=findCookie("bgColor");
Функция chkRadio вызывается, когда пользователь включает один из переключателей выбора цвета:
function chkRadio(form,value)
{
szColor = value;
addCookie("bgColor",szColor,10);
}
Эта функция записывает значение выбранного цвета в переменную szColor, а также в параметр cookie с именем bgColor.
И, наконец, функция setDefault удаляет параметр cookie с именем Count и устанавливает в переменной szColor белый цвет фона, принятый по умолчанию:
function setDefault(form)
{
removeCookie('Count');
szColor="White";
}
Эта функция вызывается, когда пользователь нажимает кнопку с надписью "Параметры по умолчанию":
<INPUT TYPE="reset" VALUE="Параметры по умолчанию"
onClick="setDefault(this.form);">
Обратите внимание, что данная кнопка имеет тип reset. Когда пользователь нажимает на нее, в форме включается переключатель, задающий белый цвет фона. Это происходит потому, что указанный переключатель определен с параметром CHECKED, а кнопка типа reset устанавливает все органы управления формы в исходное состояние.
