Меню

Контакты

+ 996 312 46 07 70
(прямой)
+ 996 555 55 03 11
Мы рады вашему звонку!

Авторизация




JavaScript

JavaScript - предназначен для написания сценариев для активных Html-страниц. Язык JavaScript не имеет никакого отношения к языку Java. Java разработан фирмой SUN. JavaScript – фирмой Netscape Communication Corporation. Первоначальное название – LiveScript. После завоевания языком Java всемирной известности LiveScript из коммерческих соображений переименовали в JavaScript.

JavaScript не предназначен для создания автономных приложений. Программа на JavaScript встраивается непосредственно в исходный текст HTML-документа и интерпретируется брaузером по мере загрузки этого документа. С помощью JavaScript можно динамически изменять текст загружаемого HTML-документа и реагировать на события, связанные с действиями посетителя или изменениями состоятия документа или окна.

Важная особенность JavaScript – объектная ориентированность. Программисту доступны многочисленные объекты, такие, как документы, гиперссылки, формы, фреймы и т.д. Объекты характеризуются описательной информацией (свойствами) и возможными действиями (методами).
 
Тег < Script>
 
Сценарий JavaScript встраивается в HTML-документ с помощью тега <SCRIPT>.
 
Пример 
<HTML>
<HEAD>
<meta  HTTP-equiv=Content-Type
content="text/html; charset=windows-1251">
</HEAD>
<BODY lang=RU>
<h1<Начнем?</h1<
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Привет!");
//-->
</SCRIPT>
</BODY>
</HTML>

 

Атрибут LANGUAGE указывает язык программирования. Если мы имеем дело с HTML версии 4.0, то вместо LANGUAGE рекомендуется использовать атрибут TYPE в следующем виде:

<SCRIPT TYPE="text/javascript">

 

Текст сценария оформляется как комментарий, чтобы не было проблем у посетителей, брaузеры которых не понимают JavaScript. Кроме того к символам, завершающим комментарий добавляется еще два символа “/”, т.к. некоторые браузеры, например, Netscape Navigator рассматривает строку, состоящую только из символов “-->”, как ошибочную.
В первом примере для объекта с именем document вызывается метод write. В качестве параметра ему передается текстовая строка “Привет!”. Строка закрывается символом “;”, которым отделяются друг от друга все операторы JavaScript.
Объект document – это HTML-документ, загруженный в окно брaузера. Метод write записывает в тело HTML-документа строку “Привет!”. При этом документ будет выгдядеть так, как будто эта строка находится в нем на месте сценария.
Имейте в виду, что JavaScript различает строчные и прописные буквы. Кроме того символ дефиса в JavaScript распознается как минус, т.е. если фон объекта в HTML-документе задается через свойство Background-color, то в JavaScript - через backgroundColor.
 
Пример
 
<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+"&nbsp;- число сто<br>";
Buf+=(parseInt("50")+50)+"&nbsp;-число сто<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

  • getYear. Возвращает год:

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>
 
Поле ввода пароля ( Password)
 
Свойства
  • 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>

 

 

Новости антивируса Dr. Web


Наши партнёры