ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
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>
<SCRIPT LANGUAGE="JavaScript">
document.write("Привет!");
</SCRIPT>
</BODY>
</HTML>
В первом примере для объекта с именем document вызывается
метод write.
В качестве параметра ему передается текстовая строка “Привет!”.
Строка закрывается символом “;”, которым отделяются друг от друга все
операторы JavaScript.
Объект document – это HTML-документ, загруженный в окно
брaузера.
Метод write записывает в тело HTML-документа строку “Привет!”.
При этом документ будет выгдядеть так, как будто эта строка находится в нем
на месте сценария.
Имейте в виду, что JavaScript различает строчные и прописные буквы.
Кроме того символ дефиса в JavaScript распознается как минус, т.е. если фон
объекта в HTML-документе задается через свойство background-color, то
в JavaScript - через backgroundColor.
Пример
<img src="ba.gif" 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] ) |
( ) |
Изменение порядка вычислений или передача параметров функции |
, |
Разделение выражений в многократном вычислении |
Пример оператора “запятая”
Встроенные функции 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 - массив, заданный списком своих элементов.
Число элементов в массиве можно изменить, просто задав значение
соответствующего элемента:
Типы данных элементов массива в 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
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.
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( ). Прекращает загрузку документа в окно браузера.
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>
частичное использование текста - Kolesnikov D.G.
-------------------------------------------------------------------------------------------------------------------------------------------------------
Открываем
ссылку в новом окне, не используя атрибут target в коде страницы
Рекомендации W3C для HTML 4.01 Strict и XHTML 1.0 Strict более не включают атрибут
target для тега .
Переходные (Transitional) версии спецификаций допускают его применение, но стандарты
для того и разработаны, чтобы ими пользоваться.
Ссылки в новом окне, не используя при этом устаревший атрибут target в (X)HTML-коде
документа можно открыть
согласно спецификаци HTML 4.01 добавлением атрибута: rel.
Этот атрибут создан для того, чтобы установить взаимоотношения между документом,
содержащим ссылку и целью этой ссылки.
Скрипт запускается один раз при загрузке страницы и находит все ссылки, которым
мы ранее установили атрибут rel="external", чтобы затем сделать их
открываемыми в новом окне.
В спецификации определены несколько стандартных значений этого атрибута (next,
previous, chapter, section), большая часть которых обозначает отношения между
отдельными секциями большого документа.
Однако, спецификация допускает и нестандартные, определяемые автором документа
значения атрибута rel.
Поэтому со спокойной совестью для всех ссылок, которые будут открываться в новом
окне, определим значение атрибуту rel к примеру: external.
Пример:
в новое окно
Код
HEAD
<script type="text/javascript" charset="windows-1251">
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i < anchors.length; i++) {
if (anchors[i].getAttribute("href") &&
anchors[i].getAttribute("rel") == "external") {
anchors[i].target = "_blank";
}}}
window.onload = externalLinks;
</script>
BODY;
<a href="http://www.03www.su/" rel="external">в новое
окно</a> <br/>
Еще один способ
< а onclick="return !window.open(this.href)" hrеf="http://www.имя.домен">линк
в новое окно</a>
Преимущества этого способа перед обычным open.window(url) в том, что если javascript
отключен, то ссылка все равно сработает.
Кроме того, ссылка будет проиндексирована поисковиками.
Проверено в FF2, IE6/7, Opera 9.20, Safari/Win.
Поведение браузеров при нажатии Ctrl+Click / Shift+Click:
В IE6 - в обоих случаях новое окно.
В IE7 - в обоих случаях новый таб (подозреваю что зависит от настроек браузера)
В FF2 - неадекват. ctrl+click открывает две вкладки, shift+click вкладку и окно
Opera - в обоих случаях новый таб
Safari/Win - в обоих случаях новое окно
При нажатии колесиком мышки ссылка срабатывает как обычно везде,
кроме IE6, естественно.
-------------------------------------------------------------------------------------------------------------------------------------------------------------
Оформление
линков
Как правило, достаточно двух эффектов, но одного точно будет мало.
Многие дизайнеры полагают, что всего лишь поменяв цвет текста у ссылок, они
дадут понять людям, что на странице является ссылками.
Часто они надеются на то, что при подводе мышки к ссылке, курсор поменяет форму.
Этого явно недостаточно.
Выделение ссылок
Ссылки необходимо четко выделять в тексте.
Пожалуй, это самое важное правило.
Обычными способами выделения ссылок являются:
изменение цвета
подчеркивание
полужирное начертание
изменение цвета фона
Выделение лишь цветом не позволяет мгновенно отделять ссылки от окружающего
текста при быстром сканировании текста. Я даже не говорю про людей с дальтонизмом,
а также людей с нормальным зрением, но пользующихся дешевыми ЖК-мониторами,
которые все цвета сводят к грязно-серому — им придется рыскать мышкой по всему
тексту даже если вы выберете очень контрастный цвет для ссылок
Правильном порядок описания типов ссылок
a:link {...}
a:visited {...}
a:hover {...}
a:active {...}
Для внешних ссыолк используем выборку по атрибутам из CSS3, срабатывающую для
всех ссылок, атрибут href у которых начинается с абсолютного пути http://. Теперь
не нужно проставлять специальные классы — достаточно все локальные ссылки указывать
относительно корня сайта, а внешние будут автоматически помечены.
a[href^="http://"] {
background: url(/i/out-link.gif) no-repeat 100% 6px;
padding-right: 12px;
}
Ссылки на файлы
Иногда нам требуется дать ссылку не на страницу, а на файл. Это
могут быть файлы PDF, Word или MP3. Такие ссылки в обязательном порядке следует
помечать, показывая, что их поведение отличается от всех остальных ссылок на
сайте.
a[href$=".zip"] {
background: url(image/zip.gif) no-repeat 100% 6px;
padding-right: 12px;
}
Динамические ссылки
Последний тип ссылки, который мне хотелось бы упомянуть — динамические
ссылки. Эти ссылки часто можно встретить на современных динамичных сайтах, связаны
они с использованием JavaScript. Клик по таким ссылкам не приводит к переходу
на другую страницу — событие перехватывает скрипт и производит какое-то действие.
Часто так скрываются формы для входа или выпадающие меню.
Во-первых, эти ссылки необходимо делать правильно. Если, к примеру,
ссылка показывает скрытую форму для входа, то нужно учитывать, что JavaScript
может быть отключен (или фильтроваться на прокси-сервере) — на этот случай необходимо
сделать саму ссылку рабочей:
<a href="/login" onclick="open_form(); return false;">Вход</a>
В этом случае, клик по ссылке не будет приводить к перезагрузке страницы (из-за
return false), а форма откроется. Если же у пользователя отключен JavaScript,
то его без проблем перекинет на страницу с формой входа.