• Язык Java script
  • Общие соображения
    • Аттрибут обьекта
  • Объект "Document"
    • Вывод информации в документ
    • Вывод графмческого изображения
    • Изменение цвета текста и фона
    • Вывод заголовка документа
    • Дата последней модификации страницы
  • Обработка событий
    • Получение информации из текстовой строки
    • Получение информации из текстового поля
    • Обработка нажатия кнопок
    • Обработка кнопки отметки
    • Работа с меню
    • Обработка кнопки Radio
    • Сброс значений формы
    • Кнопка ввода данных
  • Обработка Даты
  • Определение Web браузера
  • Операции с мышкой
  • Создание новых окон

Java script

      Язык Java script - это обьектно-ориентированный язык, предназначенный для создания приложений в Интернете. Наиболее типичный пример- обработка Анкеты, заполненной пользователем:

• проверка правильности входных данных,
• выдача на экран сообщений,
• переработка данных,
• запись в файл,
• отправка ответа пользователю,
• и другие необходимые операции.

      Язык JavaScript является системно-независимым и совместим между всеми типами компьютеров, работающими в Интернет. Программы на языке JavaScript включаются в состав HTML документа и, фактически, этот язык может считаться расширением состава команд HTML. Поэтому для создания программ на JavaScript не требуется никаких дополнительных средств, необходим лишь браузер, поддерживающий JavaScript (Браузеры Netscape Navigator 2.0 и выше или Microsoft Internet Explorer).

      Каждая вставка JavaScript в HTML- документе начинается командой <SCRIPT> с необязательным параметром LANGUAGE и заканчивается командой </SCRIPT>.

      Например, следующий фрагмент:

<SCRIPT LANGUAGE="JavaScript">
document.write("Первый пример на JavaScript");
</SCRIPT>

      Выводит на зкран строку: Первый пример на JavaScript

      JavaScript очень удобен для создания и отладки Web-страниц. В данном разделе язык JavaScript будет на простейших примерах мы познакомимся с основами языка.

      Язык JavaScript основан на понятиях: обьект, аттрибут и функция. Обьекты- это, например, текущее окно (Window), текущий документ (document), кнопки (button, checkbox, select и др.), дата (date), обработки данных (number, array, math, string и др.).

Аттрибут обьекта

      Аттрибут обьекта это входное или выходное данное, например:

•       входное - document.lastModified - разработчик получает дату и время последней модификации документа,
•       выходное - document.fgColor - разработчик задает цвет текста документа.

      Функция выполняет определенные действия, например, document.write(parameter) выводит parameter в текущий документ. Каждый обьект имеет свой набор аттрибутов и функций. Внешне функция отличается от обьекта наличием скобок ().

      Кроме функций, принадлежащих обьектам, Вы можете создавать свои функции. Обычно функция создается при необходимости многократного вызова одной и той же последовательности команд. Тогда эта последовательность команд записывается в виде функции, и, вызывая эту функцию, мы тем самым вызываем всю группу команд.

      Например, фрагмент:

<SCRIPT LANGUAGE="JavaScript">
function Write3Lines() {
document.write("Строка 1<BR>");
document.write("Строка 2<BR>");
document.write("Строка 3<BR>");
}
for (var ind=0; ind < 4; ind++) {
Write3Lines();
}
</SCRIPT>

      Выводит на экран:
Строка 1
Строка 2
Строка 3
Строка 1
Строка 2
Строка 3
Строка 1
Строка 2
Строка 3

      Строка for означает следующее:

• Оператор for - оператор цикла, начинающегося символом { и заканчивающегося символом },
• Переменная (var) - счетчик цикла, названная ind,
• При первом выполнении цикла счетчик равен 0 (ind=0),
• Цикл выполняется до тех пор, пока эта переменная не превышает 4 (ind < 4),
• При каждом выполнении цикла его счетчик увеличивается на 1 (ind++).

      Предупреждение. Команды <BR> и <P> не являются командами JavaScript, и их применение возможно только внутри литералов, как в вышеприведенных примерах, иначе возникает чертовщина в виде совершенно непонятных ошибок и появления предупреждающих окон JavaScript.

Объект "Document"

      Обьект описывает HTML- документ, выведенный на экран в данный момент. Включает следующие основные функции:

• write - вывод информации в документ,
• writeln - то же с переходом на новую строку,

Основные аттрибуты:

• location - адрес документа, ссылающегося на данный,
• title - получение заголовка документа,
• bgСolor - задает цвет фона,
• fgСolor - задает цвет текста документа,
• linkСolor - задает цвет непосещенных ссылок,
• vlinkСolor - задает цвет посещенных ссылок,
• lastModified - дата и время последней корректировки,
• URL - URL документа, содержащего ссылку на данный документ,
• referrer - URL документа, из которого "браузер" лошел до данного,
• images[] - массив ссылок в документе,
• links[] - массив ссылок в документе,
• anchors[] - массив меток (адресов ссылок) в документе,
• forms[] - массив обьектов Form, по одному для каждого Form,
• images.length - количество обьектов images в документе,
• links.length - количество обьектов links в документе,
• anchors.length - количество обьектов anchors в документе,
• forms.length - количество обьектов images в документе, не работает под MS Internet Explorer.

      Выведем на экран простой текст:

<SCRIPT LANGUAGE="JavaScript">
document.write("Текст, выведенный с помощью команды write");
</SCRIPT>

      Результат выполнения этих команд:

      Отметим следующее:

•   Каждая вставка в JavaScript в HTML-документе начинается командой <SCRIPT> и заканчивается командой </SCRIPT>
•   Вывод сообщения осуществляется с помощью команды write обьекта document
•   Для обработки текста можно использовать команды HTML, например, для вывода текста жирным шрифтом задайте:

<SCRIPT LANGUAGE="JavaScript">
document.write("<B>Жирный шрифт</I>");
</SCRIPT>

      И Вы получите: Жирный шрифт

       Аналогично, можно вывести курсивный шрифт и с подчеркиванием, изменить размер и цвет текста.

      Для вывода графмческого изображения picture.gif зададим команду:

<SCRIPT LANGUAGE="JavaScript">
document.write("<B><IMG SRC='picture.gif'></I>");
</SCRIPT>

      Обратите внимание, что имя файла задано в одинарных кавычках - для того, чтобы избежать путаницу, действует правило: Внутри двойных кавычек пишем одинарные, внутри одинарных - соответственно, двойные.

Изменение цвета текста и фона:

<SCRIPT LANGUAGE="JavaScript">
document.bgColor = "#008000",
document.fgColor = "#FFFFFF",
</SCRIPT>

      Устанавливается темно-зеленый цвет фона (008000) и белый цвет текста (FFFFFF).

Вывод заголовка документа:

<SCRIPT LANGUAGE="JavaScript">
document.write(document.title);
</SCRIPT>

Дата последней модификации страницы:

      Без указания даты последней корректировки не обходится ни одна уважающая себя страница. В JavaScript эта дата задается следующим образом:

<SCRIPT LANGUAGE="JavaScript">
document.write(document.lastModified);
</SCRIPT>

      URL документа, ссылающегося на данный:

<SCRIPT LANGUAGE="JavaScript">
document.write(document.URL);
</SCRIPT>

      URL документа, из которого "браузер" дошел до данного:

<SCRIPT LANGUAGE="JavaScript">
document.write(document.referrer);
</SCRIPT>

Массив обьектов Image в данном документе:

      Выведем первый обьект Image в данном документе.

<SCRIPT LANGUAGE="JavaScript">
document.write(document.images[1]);
</SCRIPT>

Обработка событий

      Раздел "Формы" посвящен созданию различных элементов:
      - строки,
      - кнопки,
      - линейки прокрутки, и др.

      Дальнейшая задача состоит в обработке этих элементов:
      - чтение информации из элементов форм,
      - получение информации о нажатии кнопок,
      - обработка полученной информации.

     Рассмотрим примеры работы с различными элементами Форм.

Получение информации из текстовой строки:

       Для определения текстовой строки мы задаем параметр TYPE="TEXT" в операторе INPUT. После заполнения строки пользователь нажимает правой кнокой мыши на какую-либо точку экрана вне поля текста (то есть элемент теряет фокус ввода). При этом управление получает созданная нами функция getname, задаваемая в параметре onBlur. В свою очередь, параметр этой функции this.value содержит значение строки текста. Эту строку в функции getname мы выведем на экран в специальном окне с помощью стандартной функции alert.

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

<SCRIPT LANGUAGE="JavaScript">
function getname(str) { alert(str); }
</SCRIPT>
Введите текст:
<FORM>
<INPUT TYPE="TEXT" NAME="name" onBlur="getname(this.value)" VALUE="Введите текст">
</FORM>

Этот фрагмент выполняется следующим образом:

      Боюсь, что программистам все ясно и беэ комментариев, а остальные возможно окончательно запутались. Но советую разбирать этот пример, пока Вы не поймете, тогда будет легко понять дальнейшее. Данный пример можно упростить, удалив функцию getname, и записав: onBlur="alert(this.value)". Проверьте.

      Кроме уже рассмотренного обработчика событий onBlur(), который вызывается, когда TEXT утрачивает фокус ввода, существуют еще два обработчика событий:

• onchange() - вызывается, когда пользователь изменяет значение в элементе TEXT и этот обьект утрачивает фокус ввода,
• onfocus() - вызывается, когда пользователь перемещает фокус ввода с клавиатуры в обьект TEXT.

      Вставьте каждый из этих обработчиков событий в вышеприведенный пример вместо onBlur() и проверьте действие программы.

Получение информации из текстового поля

      Этот пример строится на тех же принципах, что и предыдущий.

<SCRIPT LANGUAGE="JavaScript">
function getname(str) {
alert(str);
}
</SCRIPT>
Введите все, что Вы хотите:
<FORM>
<TEXTAREA NAME="name" COLS=30 ROWS=5 WARP=VIRTUAL onBlur="getname(this.value)">
Введите любой текст
</TEXTAREA>
</FORM>

      Посмотрите, как он выполняется:

Обработка нажатия кнопок

      Стандартная кнопка задается параметром TYPE="BUTTON" в операторе INPUT. При нажатии кнопки выполняется созданная нами функция, заданная в параметре onclick, то есть onPush().Эта функция выводит текст "HELLO" в новое окно.

      Ниже приведен этот пример:

<SCRIPT LANGUAGE="JavaScript">
function onPush() {
alert("HELLO");
}
</SCRIPT>
<FORM>
<INPUT TYPE="BUTTON" NAME="Button1" VALUE="Нажмите" onclick="onPush()">
</FORM>

Выбор кнопки

      В первом примере данного раздела для указания значения текстового поля мы пользовались аттрибутом this.value, что означает "значение данного элемента". Но мы можем захотеть работать с полем другого элемента. Тогда применим полное имя, имеющее следующий формат: document...value, где:

      В данном примере мы обрабатываем форму myForm1, содержащую одно текстовое поле, названное myText и 2 кнопки: Button1 Button2. Для каждой из этих кнопок создана функция, записывающая в текстовое поле сообщение о нажатии "своей" кнопки.

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

<SCRIPT LANGUAGE="JavaScript">
function FirstFunction() {
document.myForm1.myText.value="Вы нажали первую кнопку";
}
function SecondFunction() {
document.myForm1.myText.value="Вы нажали вторую кнопку";
}
</SCRIPT>
<FORM NAME="myForm1">
<INPUT TYPE="TEXT" NAME="myText" SIZE=30 VALUE="Нажмите одну из кнопок">
<INPUT TYPE="BUTTON" NAME="Button1" VALUE="Первая кнопка" onclick="FirstFunction()">
<INPUT TYPE="BUTTON" NAME="Button2" VALUE="Вторая кнопка" onclick="SecondFunction()">
</FORM>

      Посмотрите, как она выполняется:

Обработка кнопки отметки

      В форме, названной myForm2, вводим 2 элемента: - текстовую строку myText, служащую для вывода текстовой информации,
- кнопка отметки - при включении (отключении) символа отметки управление передается пользовательской функции myFunction2.

      В этой функции вводится текстовая переменная myString, в которую вначале записывается текст "кнопка". Если кнопка отмечена (то есть в ней присутствует символ "птичка" , то к тексту дописывается слово "отмечена" , иначе - "не отмечена". Полученный текст передается в текстовый элемент формы.

<SCRIPT LANGUAGE="JavaScript">
function myFunction2() {
var myString="Кнопка";
if (document.myForm2.myCheckBox.checked)
myString+=" отмечена";
else
myString+=" не отмечена";
document.myForm2.myText.value = myString;
}
</SCRIPT>
<FORM NAME="myForm2">
<INPUT TYPE="TEXT" NAME="myText" SIZE=30 VALUE="Нажмите кнопку">
<INPUT TYPE="CHECKBOX" NAME="myCheckBox" VALUE="Кнопка отметки" onclick="myFunction2()">
</FORM>

      Нажмите несколько раз на кнопку отметки и посмотрите на изменения в текстовой строке.

Работа с меню

      Cписок в форме задается с помощью обьекта SELECT, обработка событий выполняется с помощью следующих параметров:

• onChange - вызывается при изменении выбора,
• onBlur - вызывается при снятии фокуса с обьекта,
• onFocus - вызывается при перемещении фокуса на обьект

      Рассмотрите следующий пример и проверьте его выполнение:

&tlSCRIPT LANGUAGE="JavaScript">
function SelectBlur() {
document.myForm7.myText.value="Вы нажали поле вне списка ";
}
function SelectFocus() {
document.myForm7.myText.value="Вы нажали ту же кнопку ";
}
function SelectChange() {
document.myForm7.myText.value="Вы нажали другую кнопку ";
}
&tl/SCRIPT>
&tlFORM NAME="myForm7">
&tlINPUT TYPE="TEXT" NAME="myText" SIZE=20 VALUE="Сюда будем писать доносы">
&tlSELECT NAME="script" MULTIPLE onBlur="SelectBlur()" onFocus="SelectFocus()" onChange="SelectChange()">
&tlOPTION VALUE="town1" SELECTED>Париж
&tlOPTION VALUE="town2">Лондон
&tlOPTION VALUE="town3">Колыма
&tlOPTION VALUE="town4">Хеврон
&tlOPTION VALUE="town5">Марс
&tlOPTION VALUE="town6">Шушенское
&tl/SELECT>
&tl/FORM>

Обработка кнопки Radio

      Для анализа нажатия на кнопку используется функция onClick, как в кнопке Botton. Думаю, Вам будет несложно самим придумать пример работы с кнопкой Radio.

Сброс значений формы

      Обьект Reset обрабатывается аналогично обьекту Button, но используется только для сброса значений формы. Это означает для каждого поля формы сброс в значение, заданное параметром VALUE, или "очистка" поля при отсутствии этого параметра. Проследить нажатие на кнопку Reset можно с помощью параметра onClick(), значение которого инициируется при нажатии кнопки.

Кнопка ввода данных

      Обьект Submit обрабатывается аналогично обьекту Button. При нажатии на кнопку Submit данные формы, содержащей зту кнопку, передаются на сервер. Проследить нажатие на кнопку Submit можно с помощью параметра onClick().

Обработка Даты

      Для получения текущей даты выполните следущую команду:

current_date = new Date();

      Например, для вывода текущей даты в документе задайте:

<SCRIPT LANGUAGE="JavaScript">
current_date = new Date();
document.write("Текуща\я дата: " + current_date + ".");
</SCRIPT>

      На экране этот блок отображается следующим образом:

Важное замечание. "я" следует записывать с обратной косой чертой, т.е. "\я".

      В предыдущем примере мы задавали текущую дату. Когда мы задаем конкретную, заранее известную дату, то ее надо указать как параметры в Date. Например, для задания 25 февраля 2009 года выполните следующее:

<SCRIPT LANGUAGE="JavaScript">
current_date = new Date(09,1,25);
document.write("Дата: "+current_date+".");
</SCRIPT>

      Получили следующую строку: Дата: Tue Feb 25 00:00:00 2009.

      (Обратите внимание, что месяц нумеруется с 0).

      Если Вы хотите задать еще часы, минуты и секунды, то следует добавить соответствующие параметры:

<SCRIPT LANGUAGE="JavaScript">
current_date=new Date(09,1,25,06,25,45);
document.write("Дата: "+current_date+".");
<SCRIPT>

      Формируется строка: Дата: Tue Nov 17 17:15:45 2009.

      Теперь возникает желание перейти на свои форматы. Для этого надо выделить отдельные составляющие и сгруппировать их так, как нам хочется. Приведем список функций обьекта Date(), позволяющих получить отдельные составляющие:

      Ниже приведем примеры примеры

      Узнаем текущую дату

<SCRIPT LANGUAGE="JavaScript">
temp_date=new Date();
day=temp_date.getDate();
month=temp_date.getMonth()+1;
year=temp_date.getYear();
if (day<10) day="0"+day;
if (month<10) month="0"+month;
document.write("Сейчас на календаре " + day + "/" + month + "/" + year + ".");
</SCRIPT>

      Получаем на экране:

      Теперь посмотрим время

<SCRIPT LANGUAGE="JavaScript">
temp_date = new Date();
hours = temp_date.getHours();
if (hours > 12) {
hours = hours - 12;
am_pm = "после обеда";
}
else {
am_pm = "до обеда";
}
minutes = temp_date.getMinutes();
if (minutes < 10) {
minutes = "0" + minutes;
}
seconds = temp_date.getSeconds();
if (seconds < 10) {
seconds = "0" + seconds;
}
document.write("Сейчас " + hours + " часов " + minutes +
" минут " + seconds + " секунд " + am_pm);
</SCRIPT>

Получаем на экране:

Определение Web браузера

      При разработке WEB - страницы с использованием JavaScript следует выполнять следующие правила:

1.  Проверьте, правильно ли отображает Ваша страница на Netscape 3 и 4, на Еxplorer 3 и 4. Если работает во всех вышеприведенных браузерах, то проверка закончена, если нет, то:
   
2.   Определите, с каким браузером работает пользователь.
3.   Заблокируйте с необходимыми извинениями и пояснениями выполнение блоков, не работающих с определенными браузерами.

      Ниже мы рассмотрим как определить, с каким браузером работает пользователь. В следующем разделе мы будем пользоваться этой информацией. Обьект Navigator содержит свойства, описывающие используемый Web-браузер. Ниже приводятся основные свойства:

• appCodeName задает кодовое название браузера
• appName задает имя браузера
• appVersion задает полную информацию о версии браузера

      Функции:
• javaEnabled() проверяет, поддерживает ли текущий браузер язык Java и включен ли этот язык.
• parseInt(navigator.appVersion) определет номер версии браузера.

      Рассмотрим это на примере:

<SCRIPT LANGUAGE="JavaScript">
document.write("Данные Вашего браузера<BR>");
document.write("Кодовое название браузера- "+navigator.appCodeName+"<BR>");
document.write("Браузер- "+navigator.appName+"<BR>");
document.write("Номер версии браузера- "+navigator.appVersion+"<BR>");
if (navigator.javaEnabled()==1) document.write("Браузер поддерживает JavaScript<BR>");
else
document.write("Браузер не поддерживает JavaScript<BR>");
</SCRIPT>

      Данный пример выполняется со следующими результатами:

      Надеюсь, понятно, что информация о Вашем браузере формируется только в вашем компьютере. От меня идет в Ваш компьютер только команда выяснить сведения о Вашем браузере и отобразить их на экране.

Операции с мышкой

      В центре экрана Вы видите число 1. Подведите к нему мышку - Вы видите число 2. Уберите мышку - появляется число 1.

      Изменять можно не только текущую картинку, но и любую другую. Можно выводить любой текст. Можно вообще выполнять любые действия на экране. При соответствующей фантазии можно творить чудеса. Но... Данный раздел работает только под Netscape Navigator 3.x и Netscape Navigator 4.x, так как Microsoft Internet Explorer не поддерживает функции onMouseOver и onMouseOut.

<SCRIPT LANGUAGE="JavaScript">
netscape=0;
if (navigator.appName=="Netscape" && parseInt(navigator.appVersion)>= 3) {
netscape=1;
change=new Image();
change.src="img/2.gif";
normal=new Image();
normal.src="img/1.gif";
}
function change_image() {
if (netscape==1) document.images[1].src=change.src;
}
function normal_image() {
if (netscape==1) document.images[1].src=normal.src;
}
</SCRIPT>
<A HREF="Home.htm" onMouseOver="change_image();window.status='мышка в картинке';return true" onMouseOut="normal_image();window.status='мышка вне картинки';return true">
<CENTER><IMG SRC="../img/new.gif" BORDER=0 ALT="Кликни здесь!"></A></CENTER>

Работа выполняется следующим образом:
1. Прежде всего проверяется, что мы работаем в Netscape версии не ниже 3.0.
2. Определяем 2 обьекта: change и normal и присваиваем им, соответственно, image - файлы 1.GIF и 1.GIF.
3. Определяем функции:
   • change_image (Она изменяет image[0], то есть первую картинку раздела на 1.GIF
   • normal_image (Она изменяет image[0] на 2.GIF
4. Определяем картинку 2.GIF. Это и есть наша image[0]. Определяем файл home.html (имя в данном случае не играет роли, если не вызывать этот файл, но так как всегда найдутся желающие вызвать, то лучше указать имя текущего HTML- файла.
   
   Здесь определены 2 функции:
   • onMouseOver (когда мышка выходит из картинки),
   • onMouseOut (когда мышка входит в картинку).

      Когда мышка входит в картинку , вызывается функция change_image.

      Она изменяет image[0], и появляется число 1, когда мышка выходит из картинки, вызывается функция normal_image, которая вызывает соответствующий рисунок числа 2.

Создание новых окон

     Подведите мышку к тексту под этим предложением, подождите несколько секунд и Вы получите новое окно размером 200 х 130. (Если Вы используете Netscape 3, окно закроется автоматически, иначе позаботьтесь об его закрытии).

      Приведем текст этой программы. Обратите внимание на несколько иную запись javascript:

<A HREF="javascript:" onMouseOver="win1=window.open('primer.html','w1','width=200,height=130');return true;" onMouseOut="win1.window.close();return true;">
Подведите мышку сюда!</A>

      Функции onMouseOver и onMouseOut мы рассматривали в прошлом параграфе. Рассмотрим открытие нового окна - функцию window.open.

      Первый параметр (в нашем случае, это primer.html)- URL, то есть адрес документа, который должен быть помещен в новое окно. Если url - пустая строка, то открывается пустое окно. Второй параметр ( в нашем случае это w1 ) - имя нового окна. Используя имя в качестве значения атрибута TARGET команды <A> или <FORM>, можно вывести документы в это окно. Но, в принципе, в большинстве случаев в новом окне командовать парадом будет заданный в нем URL. Третий параметр состоит из следующих возможных числовых значений или флажков:

• width=NNN - ширина окна,
• height=NNN - высота окна,
• toolbar={no,yes} - Панель инструментов браузера,
• location={no,yes} - Поле для ввода URL в браузер,
• directories={no,yes} - Кнопки каталогов,
• status={no,yes} - Строка состояния,
• menubar={no,yes} - Линейка меню браузера,
• scrollbars={no,yes} - Линейки прокрутки.

      В строке, содержащей третий параметр, не должно быть пробелов

      Рассмотрим аналогичный пример со всеми "накрутками":

<A HREF="javascript:" onMouseOver="win1=window.open ('primer.htm','w1','width=500,height=300,toolbar=yes,location=yes, directories=yes,status=yes,menubar=yes,scrollbars=yes');return true;" onMouseOut="win1.window.close ();return true;">
Подведите мышку сюда!</A>

Для его выполнения подведите мышку под следующий текст:

      Аналогично создается окно с использованием картинок, можно использовать для этой цели и формы, здесь программа еще проще.

Мы рассмотрели функции open и close.

      Рассмотрим другие функции обьекта window:

• alert()- Вводит в диалоговое окно простое сообщение. В окне есть кнопка OK.
• confirm()- Отображает в диалоговом окне запрос, требующий ответа "Да" или "Нет". При нажатии кнопки "Да" функция возвращает true, иначе - false.
• prompt(сообщение,[стандартное])- выводит заданное сообщение в диалоговом окне, содержащем также поле ввода текста и три кнопки: OK, Clear и Cancel.

      В этом сообщении содержится адресованное пользователю предложение ввести необходимую информацию. Необязательный аргумент [стандартное] представляет собой строку, которая изначально будет отображаться в поле ввода.