Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Веб программирование.Начало пути.doc
Скачиваний:
6
Добавлен:
01.04.2025
Размер:
8 Мб
Скачать
☆

Способы задания значений cookie

Есть несколько способов задания, наиболее часто используются три - через META-теги языка HTML, JavaScript и серверные-скрипты.

1. Задание cookie с помощью META-тегов

В общем случае это выглядит следующим образом:

<META HTTP-EQUIV="Set-Cookie" CONTENT="NAME=value; EX­PIRES=date; DOMAIN=domain_name; PATH=path; SECURE">

2. Задание cookie с помощью JavaScript. Такие примеры можно посмотреть по адресу http://www.citforum.ru/internet/javascript/exorg.shtml

Пример. Функция установки значения cookie

// name - имя cookie

// value - значение cookie

// [expires] - дата окончания действия cookie (по умолчанию - до конца сессии)

// [path] - путь, для которого cookie действительно (по умолчанию - документ, в котором значение было установлено)

// [domain] - домен, для которого cookie действительно (по умолчанию - домен, в котором значение было установлено)

// [secure] - логическое значение, показывающее требуется ли за­щищенная передача значения cookie

function setCookie(name, value, expires, path, domain, secure) {

var curCookie = name + "=" + escape(value) +

((expires) ? "; expires=" + expires.toGMTString() : "") +

((path) ? "; path=" + path : "") +

((domain) ? "; domain=" + domain : "") +

((secure) ? "; secure" : "")

if (!caution || (name + "=" + escape(value)).length <= 4000)

document.cookie = curCookie

else

if (confirm("Cookie превышает 4KB и будет вырезан !"))

document.cookie = curCookie

}

Пример. Функция чтения значения cookie. Возвращает установленное значение или пустую строку, если cookie не существует.

// name - имя считываемого cookie

function getCookie(name) {

var prefix = name + "="

var cookieStartIndex = document.cookie.indexOf(prefix)

if (cookieStartIndex == -1)

return null

var cookieEndIndex = document.cookie.indexOf

(";", cookieStartIndex + prefix.length)

if (cookieEndIndex == -1)

cookieEndIndex = document.cookie.length

return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex))

}

Пример. Функция удаления значения cookie. Принцип работы этой функции заключается в том, что cookie устанавливается с заведомо устаревшим параметром expires, в данном случае 1 января 1970 года.

// name - имя cookie

// [path] - путь, для которого cookie действительно

// [domain] - домен, для которого cookie действительно

function deleteCookie(name, path, domain) {

if (getCookie(name)) {

document.cookie = name + "=" +

((path) ? "; path=" + path : "") +

((domain) ? "; domain=" + domain : "") +

"; expires=Thu, 01-Jan-70 00:00:01 GMT"

}

Примеры на JavaScript

Приветствие в зависимости от времени суток

<html>

<head>

<title>Привет</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="JavaScript">

day = new Date();

hour = day.getHours();

if (hour>=5 && hour<12) greeting = "Доброе утро";

else

if (hour>=12 && hour<18) greeting = "Добрый день";

else

if (hour>=18 && hour<24) greeting = "Добрый вечер";

else

if (hour>=0 && hour<5) greeting = "Доброй ночи";

document.write(greeting); </script>

</head>

<body>

</body>

</html>

<!-- пример 32: создание динамического меню после загрузки страницы -->

<html><head>

<style>

.menuContainer {

border: 1px solid #123456;

}

.menuContainer .menuItem {

float: left;

margin: 2px;

padding: 10px;

}

.menuContainer .menuOver {

background-color: #808080;

}

.menuContainer .menuOver a {

color: #800000;

font-weight: bold;

}

.menuContainer .clear {

clear: left;

}

</style>

<script type="text/javascript">

function processMenu() {

var allDiv = document.getElementsByTagName("DIV");

for (var i = 0; i < allDiv.length; i++) {

if (allDiv[i].className == "menuContainer")

processMenuItem(allDiv[i]);

}

}

function processMenuItem(_obj) {

var allChilds = _obj.childNodes;

for (var i = 0; i < allChilds.length; i++) {

if (allChilds[i].className == "menuItem") {

allChilds[i].onmouseover = function() {

this.className += " menuOver";

}

allChilds[i].onmouseout = function() {

this.className =

this.className.replace(" menuOver","");

}

}

}

}

</script>

</head>

<body onload="processMenu();">

<div class="menuContainer">

<div class="menuItem"><a href="#">first</a></div>

<div class="menuItem"><a href="#">second</a></div>

<div class="menuItem"><a href="#">third</a></div>

<div class="menuItem"><a href="#">fourth</a></div>

<div class="clear"></div>

</div>

</body></html>

<!-- пример pr33: валидация формы -->

<script type="text/javascript">

function submitForm(_form) {debugger;

markErrorField(false);

var errMess = "";

if (!_form.elements["login"].value) {

errMess += "Your Login is empty.\n";

markErrorField(_form.elements["login"]);

}

if (!_form.elements["mail"].value) {

errMess += "Your Email is empty\n";

markErrorField(_form.elements["mail"]);

}

if (!_form.elements["pass"].value) {

errMess += "Your Password is empty.\n";

markErrorField(_form.elements["pass"]);

} else if (!_form.elements["confpass"].value) {

errMess +=

"Your Password confirmation is empty.\n";

markErrorField(_form.elements["confpass"]);

} else if

(_form.elements["pass"].value !=

_form.elements["confpass"].value) {

errMess +=

"Your Password confirmation does not equal to your Password.\n";

markErrorField(_form.elements["pass"]);

markErrorField(_form.elements["confpass"]);

}

if (errMess) {

alert(errMess + "");

return false;

}

}

function markErrorField(_element) {

var allLabels =

document.getElementsByTagName("LABEL");

if (_element) {

for (var i = 0; i < allLabels.length; i++) {

if (allLabels[i].htmlFor == _element.id)

allLabels[i].style.color = "red"; }

} else {

for (var i = 0; i < allLabels.length; i++) {

allLabels[i].style.color = "black";

}

}

}

</script>

<form onsubmit="return submitForm(this);">

<table>

<tr>

<td><label for="login">Your Login</label></td>

<td><input type="text" name="login" id="login" /></td>

</tr>

<tr>

<td><label for="mail">Your Email</label></td>

<td><input type="text" name="mail" id="mail" /></td>

</tr>

<tr>

<td><label for="pass">Your Password</label></td>

<td><input type="password" name="pass" id="pass" /></td>

</tr>

<tr>

<td><label for="confpass">

Confirm Your Password</label></td>

<td><input type="password" name="confpass"

id="confpass" /></td>

</tr>

<tr>

<td colspan="2"><input type="submit"

name="Register" /></td>

</tr>

</table>

</form>

//pr34-Выделение всех чекбоксов (checkbox) в группе

<html>

<head>

<script type="text/javascript">

function checkAll(oForm, cbName, checked)

{

for (var i=0; i < oForm[cbName].length; i++) oForm[cbName][i].checked = checked;

}

</script>

</head>

<body>

<form name="form1" method="post" action="">

<input type="checkbox" name="total" value="checkbox" on­Click="checkAll(this.form,'checkbox[]',this.checked)">Отметить все

<br>

<input type="checkbox" name="checkbox[]" value="checkbox">1

<br>

<input type="checkbox" name="checkbox[]" value="checkbox">2

<br>

<input type="checkbox" name="checkbox[]" value="checkbox">3

</form>

</body>

</html>

//pr35- Проверка информации, введенной в форму

<html><head>

<script language="JavaScript">

<!--

var ok1=false

function test(form)

{

if (form.text1.value == "")

{

ok1=false

alert("Введите имя!")

}

else

if ((form.text2.value.indexOf('@', 0)<1) ||(form.text2.value.indexOf('@', 0)==

form.text2.value.length-1))

{

ok1=false

alert("Неправильно введён адрес e-mail")

}

else ok1=true

if(ok1)

{

//..............

alert("Форма заполнена!")

}

}

// -->

</script>

</head>

<body>

<form>

Введите Ваше имя:<br>

<input type="text" name="text1">

<br>

Введите Ваш адрес e-mail:<br>

<input type="text" name="text2">

<br><br>

<input type="button" name="button1" value="Проверка" on­Click="test(this.form)">

</form>

</body></html>

//pr36- Анимация элементов страницы – по диагонали.

<html>

<head>

<script>

var dx=1;

var dy=-2;

var timer;

function preloadTime() {

timer=window.setInterval("preloadImg()", 100);

}

function preloadImg() {

animImg.style.pixelTop+=dy;

animImg.style.pixelLeft-= dx;

if (animImg.style.pixelTop + animImg.style.pixelHeight +1 >= docu­ment.body.clientHeight) dy=-dy;

if (animImg.style.pixelTop <=0) dy=-dy;

if (animImg.style.pixelLeft + animImg.style.pixelWidth +2 >= docu­ment.body.clientWidth) dx=-dx;

if (animImg.style.pixelLeft <=0) dx=-dx;

}

</script>

</head>

<body onLoad="preloadTime()">

<img src="2.gif" id="animImg" style="top:80; left:80; position:absolute; width: 196px; height: 183px;">

</body>

</html>

//pr37- Тип браузера.

<html>

<head>

<script type="text/javascript">

function determineIt() {

if (navigator.appName.indexOf ("Avant")!= -1)

location.href="анимация.html";

else

location.href="inner.html";

}

</script>

</head>

<body onLoad="determineIt()">

</body>

</html>

<html>

<head>

<title>Задание №15</title>

<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>

<script type="text/javascript">

function main(){

window.status = decodeURI(window.location.href);

alert("Текущий адрес: " + decodeURI(window.location.href));

}

</script>

</head>

<body>

<button onclick="main()">Получить URL</button>

</body>

</html>

Цифры не врут…

Неизвестный мудрец