7.2.3. Настроювання параметрів документа html

Третій приклад демонструє, як можна використовувати cookie для настроювання користувачем параметрів документа HTML із двома кнопками і перемикачем, що має залежну фіксацію.

Якщо натиснути верхню кнопку, то у вікні браузера з'явиться документ HTML, створений динамічно сценарієм JavaScript.

За допомогою перемикачів можна вибрати один із чотирьох цвітів фона документа. Обране значення запам'ятовується в cookie. Для того щоб повернутися до цвіту, прийнятому по умовчанню, у документі HTML потрібно натиснути нижню кнопку.

При наступних провідинах зовнішній вигляд документа зміниться. Його фон будет мати такий цвіт, який був обраний за допомогою перемикачів.

Вихідний текст документа HTML приведений у листинге 7.3.

Листинг 7.3. Файл chapter7/CustomPage/CustomPage. html

<HTML>

<HEAD>

<ПОЗНАЧКА 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.cookies;

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 szVaiue = findCookie(szName);

document.cookie = szName + "=" + szValue + "; expires=" + dtExpires.toGMTString();

}

function btnGo()

{

if(findCookie("Count") == "")

{

addCookie("Count","0",10);

addCookie("bgColor",szColor,10);

document.write("<Н2>Ласкаво просимо!</Н2>");

document.write("<Р>Ви можете настроїти цвіт фона цей");

document.write("сторінки за допомогою перемикачів,");

document.write("розташованих на головній сторінці.");

document.write("<Р>Настроювання будуть використані, коли ви");

document.write ("відвідайте цю сторінку наступного разу.");

}

else

{

var szCnt = findCookie("Count");

var i= 0;

if(szCnt != "")

{

i = szCnt;

i++;

szCnt = i.toString();

addCookie("Count", szCnt, 10);

}

document.write("<Н2>Ради бачити вас знову!</Н2>");

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>

<Н1>Відвідайте вашу персональну сторінку</Н1>

<FORM NAME="TestForm">

<P>

<INPUT TYPE="button" VАLUЕ="Перехід на сторінку" onClick="btnGo();">

<P>

<HR>

<Р>Настроювання параметрів персональної сторінки

<Р><У>Цвіт фона:</У>

<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, fmdCookie і removeCookie, призначених для роботи з cookie, у сценарії визначена перемінна szColor. призначена для збереження обраного користувачем цвіту фона, a також функції 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("<Н2>Ради бачити вас знову! </Н2>");

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 установлює всі органи керування форми у вихідний стан.