JavaScript не предназначен для создания автономных приложений. Программа на JavaScript встраивается непосредственно в исходный текст HTML-документа и интерпретируется брaузером по мере загрузки этого документа. С помощью JavaScript можно динамически изменять текст загружаемого HTML-документа и реагировать на события, связанные с действиями посетителя или изменениями состоятия документа или окна.
Пример
<img src="sidney1. JPG" border=0
OnMouseOver="this.style.backgroundColor='red';"
OnMouseOut="this.style.backgroundColor='white';">
Здесь цвет фона объекта будет меняться с белого на красный при наведении на объект мыши:
Переменные в JavaScript
Имя переменной не должно совпадать с зарезервированными ключевыми словами JavaScript.
Все переменные в JavaScript объявляются с помощью ключевого слова var. При объявлении тип переменной не указывается. Этот тип присваивается переменной только тогда, когда ей присваивается какое-либо значение.
Числа в строки интерпретатор JavaScript преобразует автоматически. Для преобразования строк в числа используют специальные функции parseInt и parseFloat.
Пример
<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
</HEAD>
<BODY lang=RU>
<H1>Пример преобразования типов</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
var Buf="";
Buf=100+" - число сто<br>";
Buf+=(parseInt("50")+50)+" -число сто<br>";
document.write(Buf);
//-->
</SCRIPT>
</BODY>
</HTML>
Операторы языка JavaScript
Операторы JavaScript напоминают общеизвестные операторы языка С++.
Унарные операторы
| - |
Изменение знака на противоположный |
| ! |
Дополнение. Используется для реверсирования значения логических переменных |
| ++ |
Увеличение значения переменной. Может применяться и как префикс, и как суффикс |
| -- |
Уменьшение значения переменной. Может применяться и как префикс, и как суффикс
|
Бинарные операторы
| - |
Вычитание |
| + |
Сложение |
| * |
Умножение |
| / |
Деление |
| % |
Остаток от деления |
Операторы для работы с отдельными битами
| & |
И |
| | |
ИЛИ |
| ^ |
ИСКЛЮЧАЮЩЕЕ ИЛИ |
| ~ |
НЕ |
Операторы сдвига
| >> |
Сдвиг вправо |
| << |
Сдвиг влево |
| >>> |
Сдвиг вправо с заполнением освобождаемых разрядов нулями |
Операторы отношения
| > |
Больше |
| >= |
Больше или равно |
| < |
Меньше |
| <= |
Меньше или равно |
| == |
Равно |
| != |
Не равно |
В условных операторах также применяются логические операторы: || (ИЛИ) и && (И).
Оператор присваивания и его комбинации
Допускается комбинирование оператора присваивания с другими, как и в языке С.
| = |
Присваивание |
| += |
Сложение или слияние строк (n=n+7; аналог. n+=7;) |
| –= |
Вычитание (n=n-7; аналог. n-=7;) |
| *= |
Умножение |
| /= |
Деление |
| >>= |
Сдвиг вправо |
| <<= |
Сдвиг влево |
| >>>= |
Сдвиг вправо с заполнением освобождаемых разрядов нулями |
| &= |
И |
| |= |
ИЛИ |
| ^= |
ИСКЛЮЧАЮЩЕЕ ИЛИ |
Условные операторы
В языке JavaScript два условных оператора: if-else и ?:.
Пример оператора IF-ELSE
if(Vol<2)
{
b=true;
ss="w002.htm";
}
else if(Vol>100)
{
b=true;
ss="w100.htm";
}
Пример оператора ?:
b = (Vol<2 || Vol>100) ? true:false;
Операторы цикла
В языке JavaScript три оператора цикла: for, for-in, while.
Пример оператора FOR
for(i=0; i<n; i++)
{
text+=" ";
}
Пример оператора FOR-IN
var sprops="<H2>Свойства объекта window</H2>"
for(props in window)
sprops+="<b>"+props+"</b><xmp>"+(":"+window[props]).substr(0,90)+"</xmp><br>";
document.write(sprops);
Пример оператора WHILE
i=0;
while(i<n)
{
text+=" ";
i++;
}
Кроме этих операторов в организации цикла могут участвовать еще два оператора: break (выход из цикла) и continue (переход на следующий шаг).
Прочие операторы
| . |
Доступ к полю объекта. ( document.write(Buf); ) |
| [ ] |
Индексирование массива ( dim[i] ) |
| ( ) |
Изменение порядка вычислений или передача параметров функции |
| , |
Разделение выражений в многократном вычислении |
Пример оператора “запятая”
for(i=0; i<n; i++, j++)
Встроенные функции JavaScript
Функции JavaScript
Все функции JavaScript рекомендуется помещать в контейнер <HEAD>...</HEAD>. Тем самым вы обеспечите их гарантированную доступность при обработке HTML-документа.
Пример
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<script language="Javascript">
<!--
function ItR(a)
{
var o = eval(a);
o.style.backgroundColor="red";
}
function ItW(a)
{
var o = eval(a);
o.style.backgroundColor="white";
}
//-->
</script>
</head>
<body lang=RU>
<H2>Изменение
фона при наведении </H2>
<img ID=Ba src="ba. GIF" border=0 OnMouseOver="ItR(Ba)" OnMouseOut="ItW(Ba)">
<img id=Ba src="be.gif" border=0 OnMouseOver="ItR(Be)" OnMouseOut="ItW(Be)">
</body>
</html>
Объекты JavaScript
Язык JavaScript является объектно-ориентированным. Объекты JavaScript представляют собой наборы свойств и методов. Можно сказать, что свойства объектов - это данные, связанные с объектом, а методы - функции для обработки данных объекта.
В языке JavaScript имеется три вида объектов: встроенные объекты, объекты брaузера и объекты, создаваемые программистом.
JavaScript поддерживает следующий набор встроенных объектов: Array, Boolean, Date, Global, Function, Math, Number, String.
Встроенный объект Array. Массивы в JavaScript
Массив в JavaScript является экземпляром встроенного объекта Array. Нумерация элементов в массиве начинается с нуля. Создать массив можно тремя способами:
var a1 = new Array();
var a2 = new Array(3);
var a3 = new Array('раз','два','три');
a1 - массив, в котором нет ни одного элемента.
a2 - массив из трех элементов с неопределенным (undefined) значением.
a3 - массив, заданный списком своих элементов.
Число элементов в массиве можно изменить, просто задав значение соответствующего элемента:
a3[5]='шесть';
Типы данных элементов массива в JavaScript могут быть различными:
a3[3]=4; a3[4]=5; a3[7]=false;
Разумеется, необходимо предусмотреть корректную работу с массивом, содержащим элементы с разными типами данных.
Для создания многомерного массива каждому элементу массива нужно присвоить другой массив:
var myArray = new Array(2);
for (i=0; i<3; i++){myArray[i] = new Array(2);}
Так можно создать массив, состоящий из трех строк и трех столбцов.
Свойство объекта Array
- length. Число элементов массива.
Методы объекта Array
- concat( ). Слияние двух массивов. Через параметр передается имя второго массива: C++=a.concat(b);
Здесь элементы массива b добавляются к элементам массива a.
- join( ). Слияние элементов массива в строку. Через параметр передается разделитель элементов. По умолчанию разделителем служит запятая. s=c.join('; ');
- reverse( ). Меняет порядок элементов массива на обратный.
- slice( ). Выделяет часть из массива. В качестве параметров передаются значения начального и конечного индексов, между которыми происходит выделение. При этом элемент массива с конечным индексом в результат не войдет. Следует помнить, что индексы отсчитываются от нуля.
Встроенный объект Date
С помощью методов встроенного объекта Date можно выполнять различные действия с часами компьютера. Для использования большинства методов объекта Date необходимо создать экземпляр этого объекта:
var today = new Date();
Методы объекта Date
var nYear = today.getYear();
- getMonth. Возвращает номер месяца:
var nMonth = today.getMonth(); Имейте в виду, что январь - это 0, февраль - 1 и т.д.
- getDate.Возвращает значение календарной даты в диапазоне от 1 до 31:
var nDate = today.getDate();
- getDay. Возвращает номер дня недели (для воскресенья - 0, для понедельника - 1 и т.д.):
var nDay = today.getDay();
- getHours. Возвращает количество часов, прошедших после полуночи:
var nHours = today.getHours();
- getMinutes. Возвращает количество минут, прошедших с начала часа:
var nMinutes = today.getMinutes();
- getSeconds. Возвращает количество секунд, прошедших с начала минуты:
var nSeconds = today.getSeconds();
- getTime. Возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года:
var nMillisec = today.getTime();
- getTimeZoneOffset. Возвращает смещение локального времени относительно времени по Гринвичу в миллисекундах:
var nOffsetMillisec = today.getTimeZoneOffset();
- parse. Возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года по время, указанное в параметре функции. Для вызова этого метода можно просто сослаться на имя класса Date, а создавать объект класса Date не надо:
var nMS = Date.parse(prm);
Параметр prm может принимать значения: локальные дата и время ("21 Apr 2001 18:00:00"); дата и время по Гринвичу
("21 Apr 2001 14:00:00 GMT"); дата и время по Гринвичу cо смещением ("21 Apr 2001 18:00:00 GMT+0400").
- UTC. Преобразовывает дату, заданную параметрами метода, в количество миллисекунд, прошедших с 00 часов 00 минут 1
- января 1970 года. Для вызова этого метода, так же как и метода parse можно просто сослаться на имя класса Date:
var nMSec = Date.UTC(year, month, date, hours, min, sec, ms);
Имейте в виду, что январь - это 0, февраль - 1 и т.д.
- setYear. Устанавливает год в объекте класса Date:
today.setYear(nYear);
- setMonth. Устанавливает номер месяца:
today.setMonth(nMonth);
- setDate. Устанавливает значение календарной даты в диапазоне от 1 до 31:
today.setDate(nDate);
- setDay. Устанавливает номер дня недели (для воскресенья - 0, для понедельника - 1 и т.д.):
today.setDay(nDay);
- setHours. Устанавливает количество часов, прошедших после полуночи:
today.setHours(nHours);
- setMinutes. Устанавливает количество минут, прошедших с начала часа:
today.setMinutes(nMinutes);
- setSeconds. Устанавливает количество секунд, прошедших с начала минуты:
today.setSeconds(nSeconds);
- setTime. Устанавливает дату, соответствующую количеству миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года:
var nMillisec = today.setTime();
- toGMTString. Преобразует дату в строку, записанную в стандартном формате времени по Гринвичу:
"Sat, 21 Apr 2001 14:00:00 GMT"
- toLocaleString. Преобразует дату в строку, записанную в стандартном формате локального времени:
"04/16/2001 18:00:00".
Объекты брaузера
Объекты брaузера являются тем интерфейсом, с помощью которого сценарий JavaScript взаимодействует с посетителем и HTML-документом, загруженным в окно брaузера, а также с самим брaузером. Обращаясь к свойствам и методам этих объектов, можно выполнять различные операции над окном брaузера, загруженным в это окно HTML-документом, а также над отдельными объектами, размещенными в HTML-документе.
Практически в любом сценарии JavaScript необходимы такие объекты, как окно -
window и документ -
document.
Свойства объекта window
- name. Имя окна, указанное при его открытии методом open, а также в атрибуте TARGET тега <A> или в атрибуте NAME тега <FORM>.
- self, window. Синонимы имени окна. Относятся к текущему окну.
- top. Синоним имени окна. Относится к окну верхнего уровня.
- parent. Синоним имени окна. Относится к окну, содержащему набор фреймов.
- frames. Массив всех фреймов данного окна.
- length. Количество фреймов в родительском окне.
- status. Текущее сообщение, отображаемое в строке состояния окна брaузера.
Методы объекта window
- alert. Отображение диалоговой панели Alert с сообщением и кнопкой OK. Через параметр передается сообщение, отображаемое в диалоговой панели. После вызова этого метода выполнение сценария задерживается до тех пор, пока посетитель не нажмет кнопку OK, расположенную в диалоговой панели.
Пример
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<script language="JavaScript">
<!--
alert("Рад видеть Вас на моем сайте! Пошли дальше?");
//-->
</script>
</body>
</html>
ПОСМОТРИ РЕЗУЛЬТАТ
- confirm. Отображение диалоговой панели Confirm с кнопками OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвращает соответственно значение true или false.
Пример
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<script language="JavaScript">
<!--
if(confirm("Рад видеть Вас на моем сайте! Пошли
дальше?"))
{document.write("Пошли!");}
else
{document.write("Не хочешь - не надо... ");}
//-->
</script>
</body>
</html>
ПОСМОТРИ РЕЗУЛЬТАТ
- prompt. Отображение диалоговой панели Prompt с полем ввода и кнопками OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвращает соответственно введенную строку или значение null. Метод имеет два параметра. Первый - сообщение над полем ввода. Второй (необязательный) - начальное значение строки ввода.
Пример
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<script language="JavaScript">
<!--
var yourName=prompt("Как Вас зовут?", "Маша"))
if(yourName=="Маша")
{document.write("Угадал!");}
else
{document.write("Не угадал. Вас зовут " + yourName);}
//-->
</script>
</body>
</html>
ПОСМОТРИ РЕЗУЛЬТАТ
- open. Открытие окна. Метод имеет три параметра. Первый задает URL HTML-документа, предназначенного для загрузки в новое окно. Второй определяет имя окна для использования в атрибуте TARGET тега <A> или в атрибуте NAME тега <FORM>. Третий (необязательный) задает в виде текстовой строки параметры, определяющие внешний вид открываемого окна.
| Toolbar |
Отображение стандартной инструментальной линейки
[=yes|no] | [=1|0] |
| location |
Отображение поля ввода адреса документа
[=yes|no] | [=1|0] |
| status |
Отображение строки состояния
[=yes|no] | [=1|0] |
| menubar |
Отображение линейки меню
[=yes|no] | [=1|0] |
| scrollbars |
Отображение полос прокрутки
[=yes|no] | [=1|0] |
| resizable |
Изменение размеров нового окна
[=yes|no] | [=1|0] |
| width |
Ширина окна в пикселах |
| height |
Высота окна в пикселах |
| fullscreen |
Полноэкранный режим |
| copyhistory |
Сохранение истории загрузки документов в данное окно
[=yes|no] | [=1|0] |
| directories |
Наличие в данном окне кнопок групп новостей
[=yes|no] | [=1|0] |
Пример
<html>
<head>
<meta
http-equiv=Content-Type content="text/html; charset=windows-1251">
</head>
<body
lang=RU>
<script
language="JavaScript">
<!--
var
newWindow=open("ann.htm","","toolbar=no,menubar=no,width=300,height=200")
//-->
</script>
</body>
</html>
ПОСМОТРИ РЕЗУЛЬТАТ
- close. Закрытие созданного или основного окна:
newWindow.close();
Текущее окно брaузера можно закрыть одним из следующих способов:
window.close(); self.close();
- setTimeout. Установка таймера. Применяется для ограничения времени ввода пароля, создания бегущих строк и всевозможных анимационных эффектов. Метод имеет два параметра. Первый задает выражение JavaScript, которое запускается по прошествии времени, указанного вторым параметром в миллисекундах. Заданное выражение запускается один раз.
Пример
<html>
<head>
<meta
http-equiv=Content-Type content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<H3>Через
2 секунды Иоганн Себастьян Бах сменит Людвига ван Бетховена.</H3>
<img id=B_B src="be.gif">
<script language="JavaScript">
<!--
function change()
{document.getElementById("B_B").src="ba.gif";}
setTimeout("change()", 2000);
//-->
</script>
</body>
</html>
ПОСМОТРИ РЕЗУЛЬТАТ
- clearTimeout. Сброс таймера. Для останова таймера метод setTimeout нужно вызвать с возвратом идентификатора, т.е.
idTimer=setTimeout("change()", 2000);
а затем этот идентификатор передать методу clearTimeout в качестве параметра:
clearTimeout(idTimer);
- blur( ). При вызове метода окно теряет фокус.
- focus( ). При вызове метода окно получает фокус.
- MoveTo(x,y). Перемещает окно в точку с координатами.
- MoveBy(x,y). Перемещает окно на x пикселей по горизонтали вправо и на y пикселей вниз.
- ResizeTo(x,y). Изменяет размер окна на указанные.
- ResizeBy(x,y). Увеличивает или уменьшает размер окна на заданное количество пикселей.
- Print( ). Печать документа.(не работает в IE 4)
- scroll(x,y), ScrollTo(x,y). Прокручивает окно так, что точка с кординатами x,y становится левой верхней точкой окна.
- ScrollBy(x,y). Прокручивает окно на x,y пикселей.
- stop( ). Прекращает загрузку документа в окно браузера.
Свойства объекта document
- URL. Полный URL документа.
- location. Полный URL документа.
- referrer. URL вызывающего документа.
- title. Заголовок документа, определенный тегом <TITLE>.
- bgColor. Цвет фона документа.
- fgColor. Цвет текста.
- linkColor. Цвет cсылок.
- alinkColor. Цвет выбранных cсылок.
- vlinkColor. Цвет посещенных cсылок.
- links. Массив всех cсылок в документе.
- anchors. Массив локальных меток. Применяется для организации ссылок внутри документа.
- applets. Массив аплетов Java.
- forms. Массив форм в виде объектов.
- images. Массив растровых изображений.
- embeds. Массив объектов Plug-in.
- lastModified. Дата последнего изменения документа.
- Cookie. Значение cookie для текущего документа.
Пример
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
document.bgColor="FFFF00";
document.fgColor="800080";
document.linkColor="000000";
document.alinkColor="FF0000";
document.vlinkColor="0000FF";
//-->
</SCRIPT>
</head>
<body lang=RU>
<H2>Изменение
цвета фона, текста и ссылок</H2>
<a href="be.htm"><img
src="be.gif" align="bottom">Кто это?</a><br>
<a href="ba.htm"><img
src="ba.gif" align="bottom">Кто это?</a>
</body>
</html>
ПОСМОТРИ РЕЗУЛЬТАТ
Объект document может содержать в себе другие объекты, доступные как свойства:
- anchor. Локальная метка, определенная тегом <A>.
- form. Форма, определенная тегом <FORM>.
- history. Список посещенных URL.
- link. Текст или изображение, играющие роль гипертекстовой ссылки, созданной тегом <A>, в котором дополнительно заданы обработчики событий onClick и onMouseOver.
Методы объекта document
- сlear. Удаление содержимого документа из окна просмотра.
- write. Запись в документ произвольной HTML-конструкции.
- writeln. Аналогичен write, но с добавлением символа перевода строки в конец строки.
- open. Открытие выходного потока для записи в HTML-документ данных типа MIME при помощи методов write и writeln.
- close. Закрытие потока данных, открытого методом open. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока.
Ссылки в документе
Для каждой ссылки, размещенной в HTML-документе, создается отдельный объект. Все такие объекты находятся в объекте document как элементы массива links. Анализируя эти элементы, сценарий JavaScript может определить свойства каждой ссылки в HTML-документе:
- length. Количество ссылок в HTML-документе, т.е. количество элементов в массиве links.
- hash. Имя локальной ссылки, если она определена в URL.
- host. Имя узла и порт, указанные в URL.
- hostname. Имя узла и доменное имя узла сети. Если доменное имя недоступно, вместо него указывается адрес IP.
- href. Полный URL.
- pathname. Путь к объекту, указанный в URL.
- port. Номер порта, использумого для передачи данных с сервером, указанным в ссылке.
- protocol. Строка названия протокола передачи данных (включающая символ "двоеточие"), указанного в ссылке.
- search. Строка запроса, указанная в URL после символа "?".
- target. Имя окна, куда будет загружен документ при выполнении ссылки. Это может быть имя существующего окна фрейма, определенного тегом <FRAMESET>, или одно из зарезервированных имен - _top, _parent, _self, _blank.
Пример
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<P><A HREF="http://kdg.HtmlWeb.ru/"
TARGET="_top">Моя страница</A>
<P><A HREF="http://www.dstu.edu.ru/">Здесь учился</A>
<P><A HREF="http://www.tnk-ug.ru/">Здесь работаю</A>
<HR>
<H1>Свойства ссылок</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Цикл по всем ссылкам
for(i=0; i<document.links.length; i++)
{
// Разделительная линия
document.write("<HR>");
// Текст ссылки, выделенный жирным шрифтом
var Txt=document.links[i] + "<br>";
document.write(Txt.bold());
// Все свойства ссылки
document.write("host: ".italics() + document.links[i].host +
"<br>");
document.write("hostname: ".italics() +
document.links[i].hostname + "<br>");
document.write("href: ".italics() + document.links[i].href +
"<br>");
document.write("pathname: ".italics() +
document.links[i].pathname + "<br>");
document.write("port: ".italics() + document.links[i].port +
"<br>");
document.write("search: ".italics() + document.links[i].search
+ "<br>");
document.write("target: ".italics() + document.links[i].target
+ "<br>");
}
//-->
</SCRIPT>
</body>
</html>
ПОСМОТРИ РЕЗУЛЬТАТ
Работа с формами
Сейчас мы поговорим о различных приемах работы сценариев JavaScript с HTML-формами.
Если в HTML-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом NAME тега FORM.
Свойства форм
Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.
Свойства первого набора
- action. Значение атрибута ACTION тега FORM.
- encoding. Значение атрибута ENCTYPE тега FORM.
- method. Значение атрибута METHOD тега FORM.
- target. Значение атрибута TARGET тега FORM.
- elements. Массив всех элементов формы.
- length. Размер массива elements.
Большинство свойств первого набора просто отражает значение соответствующих атрибутов тега FORM. Что же касается массива elements, то в нем находятся объекты, соответствующие элементам, определенным в форме. Эти объекты образуют второй набор свойств формы. Адресоваться к этим объектам можно как к элементам массива elements, причем первому элементу формы будет соответствовать элемент с индексом 0, второму - с индексом 1 и т.д. Однако удобнее обращаться к элементам формы по их именам, заданным атрибутом NAME.
Элементы форм
Кнопки (BUTTON, RESET, SUBMIT)
Свойства
- name. Имя объекта.
- value. Надпись на кнопке.
Метод
- click( ). Вызов этого метода тождественен щелчку мышкой по кнопке.
Пример
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
function btnClick()
{
var Txt1 = "";
var Txt2 = "";
Txt1 = document.Test.bt.value;
Txt2 = document.Test.bt.name;
document.write("<HR>");
document.write("Вы нажали
кнопку: " + Txt1.bold() +
" с именем: "
+ Txt2.bold());
document.write("<HR>");
}
//-->
</SCRIPT>
</head>
<body lang=RU>
<H1>Нажатие кнопки</H1>
<FORM NAME="Test">
<INPUT
TYPE="button" NAME="bt" VALUE="Щелкни здесь!"
onClick="btnClick();">
</FORM>
</body>
</html>
Флажок (CHECKBOX)
Свойства
- name. Имя объекта.
- value. Надпись на кнопке.
- checked. Состояние флажка: true - флажок установлен, false - флажок не установлен.
- defaultChecked. Отражает наличие атрибута CHECKED: true - есть, false - нет.
Метод
- click( ). Вызов этого метода меняет состояние флажка.
Пример
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
</head>
<body lang=RU>
<H1>Метод click флажка</H1>
<FORM NAME="Test">
Флажок <INPUT TYPE="checkbox" NAME="ch">
<BR>Состояние флажка можно изменить и этой кнопкой
<INPUT TYPE="button" VALUE="Смена состояния"
onClick="document.Test.ch.click();">
</FORM>
</body>
</html>
Переключатель (RADIO)
Свойства
- name. Имя объекта.
- value. Надпись на кнопке.
- length. Количество переключателей в группе.
- checked. Состояние переключателя: true - переключатель включен, false - выключен.
- defaultChecked. Отражает наличие атрибута CHECKED: true - есть, false - нет.
Метод
- click( ). Вызов этого метода включает переключатель.
Так как группа переключателей имеет одно имя NAME, то к переключателям надо адресоваться как к элементам массива.
Пример
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
function btnClick()
{
if(document.Test.Sex[0].checked)
{
document.Test.Sex[1].click();
}
else
{
document.Test.Sex[0].click();
}
}
//-->
</SCRIPT>
</head>
<body lang=RU>
<H1>Метод
click группы переключателей</H1>
<FORM NAME="Test">
<INPUT TYPE="RADIO"
NAME="Sex" VALUE ="Man" CHECKED>Мужской
<INPUT TYPE="RADIO"
NAME="Sex" VALUE ="Woman">Женский
<BR>Состояние
переключателей можно изменить и этой кнопкой
<INPUT TYPE="button" VALUE="Смена состояния" onClick="btnClick();">
</FORM>
</body>
</html>
Список (SELECT)
Свойства
- name. Имя объекта.
- selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE).
- length. Количество элементов (строк) в списке.
- options. Массив элементов списка, заданных тегами OPTION.
Каждый элемент массива options является объектом со следующими свойствами:
- value. Значение атрибута VALUE.
- text. Текст, указанный после тега OPTION.
- index. Индекс элемента списка.
- selected. Присвоив этому свойству значение true, можно выбрать данный элемент.
- defaultSelected. Отражает наличие атрибута SELECTED: true - есть, false - нет.
Методы
- focus( ). Передает списку фокус ввода.
- blur( ). Отбирает у списка фокус ввода.
Пример
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
function btnClick()
{
sI=Test.Item.selectedIndex;
Txt="";
Txt="Предложено
"+Test.Item.length+" напитков"+
"\nВыбран "+Test.Item.options[sI].text+
" (value= "+Test.Item.options[sI].value+
", index= "+Test.Item.options[sI].index+")";
if(Test.Item.options[sI].defaultSelected)
{Txt+="\nЭтот напиток выбирается по
умолчанию"}
alert(Txt);
}
//-->
</SCRIPT>
</head>
<body lang=RU>
<H1>Работа с готовым списком</H1>
<FORM NAME="Test">
<SELECT NAME="Item" SIZE=5>
<OPTION VALUE="tea" SELECTED>Чай
<OPTION VALUE ="coffee">Кофе
<OPTION VALUE ="milk">Молоко
<OPTION VALUE ="cocoa">Какао
<OPTION VALUE ="juice">Сок
</SELECT>
<INPUT TYPE="button" VALUE="Пусть кофе"
onClick="Test.Item.options[1].selected=true;">
<INPUT TYPE="button" VALUE="Посмотрим"
onClick="btnClick();">
</FORM>
</body>
</html>
Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй - значение элемента списка, соответствующее значению атрибута VALUE, третий соответствует свойству defaultSelected, четвертый - свойству selected.
Пример
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
</head>
<body lang=RU>
<H1>Динамическое заполнение списка</H1>
<FORM NAME="Sel">
<!-- Пустой список ссылок-->
<SELECT NAME="ListOfLinks">
</SELECT>
<!-- Кнопка активизации выбранной ссылки-->
<INPUT TYPE="button" VALUE="Переход"
onClick="window.location.href =
document.links[Sel.ListOfLinks.selectedIndex];">
</FORM>
<A HREF="http://tnk-ug.ru/kdg/"></A>
<A HREF="http://www.dstu.edu.ru/"></A>
<A HREF="http://www.tnk-ug.ru/"></A>
<A HREF="http://www.dmm.ru/"></A>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Цикл по всем ссылкам
for(i=0; i<document.links.length; i++)
{
// Создание i-элемента списка и запись в него ссылки
document.Sel.ListOfLinks.options[i] = new Option(document.links[i], i, false,
false);
}
// Выделение первого элемента в списке
document.Sel.ListOfLinks.selectedIndex = 0;
//-->
</SCRIPT>
</body>
</html>
Поле ввода (TEXT)
Свойства
- name. Имя объекта.
- defaultValue. Начальное содержимое поля.
- value. Текущее содержимое поля.
Методы
- focus( ). Передает полю фокус ввода.
- blur( ). Отбирает у поля фокус ввода.
- select( ). Выделяет содержимое поля.
Пример
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
Elem="Фамилия: " + Sel.Family.value +
"\nИмя: " + Sel.Name.value +
"\nВозраст: " + Sel.Age.value +
"\nТелефон: " + Sel.Phone.value;
alert(Elem);
}
function CheckAge(age)
{
if(age<18)
return "18";
else
return
age;
}
//-->
</SCRIPT>
</head>
<body lang=RU>
<H1>Заполните анкету</H1>
<FORM NAME="Sel">
<!-- Анкета -->
<TABLE>
<TR><TD><B>Фамилия:<B></TD><TD><INPUT NAME="Family" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B>Имя:<B></TD><TD><INPUT
NAME="Name" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B>Возраст:<B></TD><TD><INPUT NAME="Age" SIZE=3
VALUE="18"
onBlur="this.value=CheckAge(this.value)"
onFocus="this.select()"></TD></TR>
<TR><TD><B>Телефон:<B></TD><TD><INPUT NAME="Phone"
SIZE=10></TD></TR>
</TABLE>
<!-- Кнопки готовности и сброса -->
<INPUT TYPE="button" VALUE="Готово" onClick="Complete();">
<INPUT TYPE="reset" VALUE="Сброс">
</FORM>
</body>
</html>
Обратите внимание на то, что символы фамилии и имени при потере фокуса соответствующими полями преобразуются в прописные. Для этого используется метод toUpperCase, определенный во встроенном классе строк.
Текстовая область (TEXTAREA)
Свойства
- name. Имя объекта.
- defaultValue. Начальное содержимое области.
- value. Текущее содержимое области.
Методы
- focus( ). Передает области фокус ввода.
- blur( ). Отбирает у области фокус ввода.
- select( ). Выделяет содержимое области.
Пример
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
OK="Тетя Эльза чувствует себя хорошо.\n
Юстас.";
Problem="Тетя Эльза заболела.\n
Юстас.";
function getDate()
{
today=new Date();
return
today.toLocaleString()+"\n";
}
function CheckRadio(form,value)
{
if(value=="Good")
form.Letter.value=getDate()+OK;
else
form.Letter.value=getDate()+Problem;
}
//-->
</SCRIPT>
</head>
<body lang=RU>
<H1>Отправьте телеграмму</H1>
<FORM NAME="Sel">
<P><INPUT TYPE="radio" NAME="Code" VALUE="Good"
onClick="if(this.checked) CheckRadio(this.form,this.value);">
Явка в норме
<BR><INPUT TYPE="radio" NAME="Code" VALUE="Bad"
onClick="if(this.checked) CheckRadio(this.form,this.value);">
Явка провалена
<P>
<TEXTAREA NAME="Letter" ROWS=3 COLS=35>
</TEXTAREA>
<INPUT TYPE="button" VALUE="Готово" onClick="alert(Sel.Letter.value);">
<INPUT TYPE="reset" VALUE="Сброс">
</FORM>
</body>
</html>
Свойства
- name. Имя объекта.
- defaultValue. Начальное содержимое поля.
- value. Текущее содержимое поля.
Методы
- focus( ). Передает полю фокус ввода.
- blur( ). Отбирает у поля фокус ввода.
- select( ). Выделяет содержимое поля.
Пример
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
if(Sel.Pwd.value==Sel.Pwd1.value)
alert("Вас зарегистрировали\nID="+Sel.Id.value+"\nPassword="+Sel.Pwd.value);
else
alert("Ошибка при вводе
пароля\nПопробуйте еще раз");
}
//-->
</SCRIPT>
</head>
<body lang=RU>
<H1> Регистрация</H1>
<FORM NAME="Sel">
<TABLE>
<TR><TD><B>Идентификатор:<B></TD><TD><INPUT NAME="Id" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B> Пароль:<B></TD>
<TD><INPUT TYPE="password"
NAME="Pwd" SIZE=20
onFocus="this.select();"></TD></TR>
<TR><TD><B>Проверка пароля:<B></TD>
<TD><INPUT TYPE="password"
NAME="Pwd1" SIZE=20
onFocus="this.select();"></TD></TR>
</TABLE>
<INPUT TYPE="button" VALUE="Готово" onClick="Complete();">
<INPUT TYPE="reset" VALUE="Сброс">
</FORM>
</body>
</html>
Cookie
Cookie - это свойство HTML-документа. Представляет собой набор строковых параметров, каждый из которых имеет имя и значение. Сценарий JavaScript может создавать cookie для HTML-документа, определяя в нем произвольное количество параметров и задавая для них произвольные значения. После создания такой набор параметров становится принадлежностью данного конкретного HTML-документа и может быть проанализирован, изменен или удален сценарием JavaScript.
Создание cookie
В сценарии JavaScript cookie создается с помощью свойства document.cookie. Пары имя-значение не могут содержать пробелов, запятых и точек с запятыми. Поэтому все эти символы должны быть заменены на соответствующие escape-последовательности. JavaScript имеет две функции, обрабатывающие escape-последовательности: escape и unescape.
Пара имя-значение является единственным необходимым параметром при создании cookie. Указание только пары имя-значение создает cookie, который сохраняется только на протяжении текущего сеанса брaузера. При создании cookie можно задать дату его автоматического удаления. В этой паре надо указать имя
expires и значение в стандартном формате времени по Гринвичу (GMT). Простейшим способом преобразования в формат GMT является использование одного из методов встроенного класса Date:
toGMTString. Кроме этого, создавая cookie, можно указать также путь (
Path), домен (
Domain) и информацию безопасности. Извлечь эту информацию нельзя.
Удаление cookie
Самый простой способ удаления cookie - установить для него такое время автоматического удаления, которое уже прошло.
Практическое применение cookie
- Индивидуальная настройки параметров Web-страниц.
- Хранение товара, выбранного посетителем виртуального магазина. Можно выбрать товары на разных страницах, а потом сделать общий заказ.
- Хранение текущего состояния сетевой игры.
Пример
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<script language="JavaScript">
<!--
function parseCookie() {
// Разделение cookie.
var cookieList = document.cookie.split("; ");
// Массив для каждого cookie в cookieList.
var cookieArray = new Array();
for (var i = 0; i < cookieList.length; i++) {
// Разделение пар имя-значение.
var name = cookieList[i].split("=");
// Декодирование и добавление в cookie-массив.
cookieArray[unescape(name[0])] = unescape(name[1]);
}
return cookieArray;
}
function setCookie(visits) {
/* Счетчик числа посещений и
определение срока хранения в 1 год. */
var expireDate = new Date();
// Установка даты автоматического удаления.
expireDate.setYear(expireDate.getYear() + 1);
// Сохранение числа посещений.
document.cookie = "Visits=" + visits +
"; expires=" + expireDate.toGMTString() + ";";
}
if ("" == document.cookie) {
// Инициализация cookie.
setCookie(1);
document.write("<H3>Поздравляю Вас с первым посещением моего сайта.</H3>");
}
else {
// Анализ cookie.
var cookies = parseCookie();
// Вывод приветствия, числа посещений и увеличение числа посещений на 1.
document.write("<H3>Рад снова видеть Вас на моем сайте! Число Ваших посещений - " +
cookies.Visits++ + " !</H3>");
// Обновление cookie.
setCookie(cookies.Visits);
}
//-->
</script>
</body>
</html>
