Информационная модель документа. Общие сведения о языке JavaScript Все браузеры реализуют две функции: визуальную и моделирующую. Визуальная функция проявляется как только мы загружаем гипертекстовую страницу, которую браузер рисует на экране по описанным в документе тэгам. Но, кроме этого, браузер строит в памяти компьютера информационную модель документа, в которой каждому тэгу из HTML-файла соответствует отдельный объект. Построение объекта браузер начинает с объекта window, в котором описываются свойства окна документа. В состав объекта window входит объект document, который соответствует контейнеру <HTML>…</HTML>. Объект document включает в себя массивы других объектов. Например, объект-массив images, который содержит сведения о всех графических изображениях, объект-массив forms, содержащий сведения об используемых формах и т.д. Документ становится динамическим, если в код страницы включить не только описание тэгов, но и описать воздействие на информационную модель при возникновении того или иного события. Например, при наступлении события "курсор мыши над картинкой номер 2" изменить во втором элементе массива объектов images свойство src c одного графического файла на другой. Тогда при наведении указателя мыши на картинку мы увидим её изменение. Воздействие на информационную модель документа осуществляется с помощью специальных языков программирования, таких как JavaScript и VBScript. Таким образом, поле окна браузера можно изменить двумя способами: 1) написать HTML-тэги и загрузить файл в браузер (построение статичного документа), 2) воздействовать на информационную модель документа (построение динамического документа). В полной мере, воздействие на информационную модель можно реализовать лишь используя CSS. Каскадные таблицы стилей позволяют задать для каждого объекта большое количество различных свойств, а JavaScript даёт доступ к этим свойствам. Язык JavaScript – это язык программирования, который разработан специально для работы совместно с HTML и дополняет его. Его можно рассматривать как упрощённую версию языка Java. JavaScript – интерпретационный язык. Исходный код программы на JavaScript встраивается в HTML-код или хранится в отдельном файле с расширением .js (подобно таблице стилей) и интерепретируется браузером. Для добавления к документу JavaScript-сценария используется тэг: <SCRIPT> ….. </SCRIPT> Сценарий может быть описан в любом месте страницы. Чтобы сценарий был доступен всей странице, его необходимо разместить в заголовок документа. В одном документе может быть любое количество сценариев. В дескрипторе <SCRIPT> можно использовать атрибут language=язык. По умолчанию берётся значение "JavaScript". Возможно использование языка VBScript (но он не воспринимается браузером Netscape). Для того, чтобы со страницей могли корректно работать все браузеры, то его лучше оформить как комментарий: <SCRIPT> <!-Текст сценария //--> </SCRIPT> Браузеры, не поддерживающие скрипты пропустят эту часть страницы. Для них можно создать альтернативный вариант без использования скриптов. Он размещается между тэгами <NOSCRIPT> …. </NOSCRIPT> Чтобы код сценария не выполнялся сразу при загрузке страницы, а начинал работу после возникновения того или иного события, его оформляют как функцию, которая вызывается при наступлении данного события. Общий вид функции: function имя() {текст сценария ……………. ……………..} Вызов функции может быть описан либо внутри сценария, либо внутри атрибута. В конце каждой команды ставится точка с запятой. Для создания комментариев можно использовать символы: // Строковый комментарий /* Блоковый комментарий */ Переменные, константы, выражения Ввод и вывод информации. Для образования имён переменных, как и во всех языках программирования, используются идентификаторы. Регистр букв в имени имеет значение. Counter и counter – это две разные переменные. В JavaScript типы переменных не объявляются. Тип переменной определяется по содержимому. В одном и том же скрипте одна и та же переменная может получать значения разных типов. x = "3"; x = 3; x = "Оценка="+3; Целые числа: - десятичные записываются в обычном виде: 255, - восьмеричные начинаются с символа "0": 043, - шестнадцатеричные начинаются с символов "0х": 0хFF. Дробные числа: 3.14 или .314E1 Строковые значения записываются в одинарных или двойных кавычках. Если внутри строки необходимо вывести кавычку или апостроф, то перед ними ставится обратный слэш: 'It\'s OK!' "\"ВАЗ 2109\"" Внутри одинарных кавычек можно использовать без слэша двойные и наоборот: 'Кинотеатр "Кристалл"' Каждая переменная должна быть описана до своего использования. Для описания переменных используется ключевое слово var. В описании переменной допускается присваивание ей начального значения: var x; var x=5; var mes='январь'; JavaScript позволяет описывать переменные в любом месте, но нужно стараться собирать их в одном месте (в начале скрипта или начале функции). Для того чтобы переменная была видна из всех скриптов (глобальная переменная), её необходимо описать в скрипте, расположенном между тэгами <HEAD> и </HEAD> до описания функций. Для создания локальных переменных, их описывают внутри функций. Арифметические операции: - , + , *, / , % (остаток от деления): y = 2*x; z = y %3; name="Крокодил "+"Гена" Для вывода различных сообщений на экран используется функция alert, которая создаёт информационную панель с одной единственной кнопкой "OK". Пользовтель читает сообщение, нажимает кнопку и панель убирается с экрана. Общий вид функции: alert(выражение); Например: alert("Привет"); Знак "+" (операция конкатенации или соединения) нужно использовать и в том случае, если текст сообщения очень длинный и его требуется записать в нескольких строках: alert('Язык JavaScript был разработан в 1995 году '+ фирмой Netscape для второй версии'+ ' своего браузера'); Но знак соединения не означает, что в этом месте произойдёт разрыв строки на экране. Он используется лишь для перехода на новую строку в тексте исходного кода документа. Для принудительного разрыва строки необходимо использовать "\n": alert('Первая строка. \nВторая строка.'); Браузер Netscape Navigator третьей версии некорректно выводит русские буквы "я" и "С". Поэтому перед ними рекомендуется ставить слэш: alert('Перва\я строка. \nВтора\я строка.'); Примеры: 1) var x=48; var ex="попугаев"; alert(x+" "+ex); 2) var x=2; var y=3; alert("Результат="+x*y); Для передачи информации в документ используется функция prompt: prompt("надпись","значение по умолчанию"); На экран выводится панель с двумя кнопками (ОК и Отмена). Пользователь записывает текст в специальном окне ввода и ввода и при нажатии кнопки "ОК" введённый текст становится значением функции prompt. Если будет нажата кнопка "Отмена", то функция prompt возвращает значение null: x=prompt("Сколько будет 2х2?","5"); Так как prompt – это функция, то её результат обязательно должен быть присвоен какой-либо переменной. Функции Когда одну и ту же группу команд необходимо повторить несколько раз в разных местах программы, используются функции. Описание функции на языке JavaScript выглядит следующим образом: function имя_функции(формальные параметры) { ……. return значение; } Команда return может быть не одна, а может вообще отсутствовать. В последнем случае функция не возвращает никакого значения и рассматривается как процедура. Описание функции может располагаться в любом месте скрипта (до и после основной программы). Команда вызова функции имеет вид: имя_функции(фактические параметры); При вызове функции формальные параметры получают значения фактических. Параметры всегда передаются по значению, то есть всё, что происходит внутри функции с формальными параметрами, не оказывает никакого влияния на фактические. Для того, чтобы вернуть в основную программу значение из функции, необходимо использовать команду возврата return. Все переменные, которые используются в функции, должны быть либо описаны внутри функции, либо описаны в основной программе и переданы в функцию в качестве параметров. <HTML> <BODY> <SCRIPT language=JavaScript> <!-var x=5; var y=10; alert(sum(x,y)); alert(x); alert(y); function sum(a,b) { a=3; b=5; sum=a*b; return sum; } //--> </SCRIPT> </HTML> Будут выведены значения 15, 5, 10. Задача. Ввести три целых положительных числа и вычислить общее количество их цифр. //num – целое положительное число function SumOfNumber(num) { var len=0; if (num<10) len=1; else while (num) { num=(num-num%10)/10; len++; } return len; } var sum=0; var num1,num2,num3; num1=prompt(“Введите первое число”,””); sum+=SumOfNumber(num1); num2=prompt(“Введите второе число”,””); sum+=SumOfNumber(num2); num3=prompt(“Введите третье число”,””); sum+=SumOfNumber(num3); alert(“Общее число цифр в числах:”+sum); Команда return прерывает выполнения кода функции в том месте, где она стоит. Например, для вычисления модуля числа a, можно записать следующую функцию: function abs(a) { if (a<0) return –a; else return a; } Но по возможности нужно стараться делать один выход из функции. Если функция не возвращает никакого значения, то она должна вызываться как процедура: function f(x) { alert(x); } var str=”Это процедура’; f(x); При написании программ необходимо осуществлять проверку правильности ввода значений, иначе результат работы может получиться самый неожиданный. Для этого иногда удобно использовать функцию parseInt(num,X), где num – это значение произвольного типа. а X – основание системы счисления (2,8,10,16). Функция преобразует значение переменной num в число в заданной системе счисления. Если она сталкивается с неверным символом, то преобразуется часть строки до этого символа (“48 попугаев” будет преобразовано в 48), а если будет неверной вся строка, то возвращается служебное значение NaN Обработка полей формы Работая с гипертекстовыми документами, пользователь имеет возможность вводить текст в поле, выбирать альтернативу, отмечать флажком правильный ответ, нажимать кнопки и т.д. Всё это реализуется с помощью форм. Использование скриптов даёт возможность анализировать каждое введённое или выбранное значение и реагировать на них определённым образом. Для этого необходимо самой форме и каждому элементу формы присвоить имя с помощью атрибута name, что даёт возможность обращения к ним из скрипта. Рассмотрим работу с текстовыми полями (text и password) Пусть задана форма: <FORM name=anketa> <INPUT type=text value=”Зима” name=obj> </FORM> В программе на JavaScript можно использовать конструкцию document.anketa.obj.value для доступа к элементу value соответствующего тэга <INPUT>: var str=document.anketa.obj.value; document.anketa.obj.value=”Лето”; Последнее присваивание приведёт к мгновенной перерисовке части экрана, в котором хранится значение “Зима”. Параметр value определяет текущее состояние текстового поля. Для доступа к значению атрибута value, установленного по умолчанию, используется свойство defaultValue. Например, для предыдущего примера значение value будет равным “Лето”, а значени defaultValue – “Зима”. Кроме этих атрибутов, текстовое поле ввода может содержать атрибуты maxlength – максимальная длина строки и size – размер поля. Доступ к ним осуществляется так же, как и для атрибута value. Атрибут readonly позволяет сделать поле доступным только для чтения. В форме можно использовать три типа кнопок: reset – автоматическое возвращение формы в исходное состояние (поля принимают значения по умолчанию), submit – отправка формы по указанному адресу, button – обычная кнопка, не выполняющая какого-либо действия. Для всех типов кнопок параметр value задаёт надпись на кнопке. <BODY> <SCRIPT language=JavaScript> <!— var num=0; var name0=”число нажатий: 0”; //--> </SCRIPT> <H2>Умная кнопка</H2> <HR> <FORM name=count> <INPUT type=button value=”сброс” onclick=”document.count.key.value=name0; num=0;”> <INPUT type=button value=”число нажатий: 0” name=key onclick= ”document.count.key.value=’число нажатий:’+(++num);”> </FORM> </BODY> Данный скрипт при каждом нажатии на вторую кнопку будет выводит количество нажатий. При нажатии кнопки «сброс» счётчик обнуляется. Обработчики событий для элементов формы: OnBlur – наступает, когда элемент формы теряет фокус, OnChange – наступает, когда поля Select, Text или Textarea теряют фокус, а их значения были изменены. onFocus - наступает, когда элемент формы получает фокус, onSubmit – наступает, когда пользователь нажимает кнопку «Отправить», onClick -наступает, когда пользователь щелкает по объекту Метод: focus() – устанавливает фокус на объект. Флажки, радиокнопки, меню, многострочное поле Флажки в форме задаются тэгом: <INPUT type=checkbox name=имя checked> Атрибут checked означает, что флажок установлен по умолчанию. Флажки не зависят друг от друга. Их можно устанавливать и сбрасывать в любой комбинации. У объекта INPUT при работе с флажками есть свойства checked и defaultChecked. Свойство checked принимает значение true, когда флажок установлен и false в противном случае. Свойство defaultChecked принимает значение true, если флажок был установлен по умолчанию, независимо от его текущего состояния. <FORM> <INPUT name=flag type=checkbox checked> <INPUT type=button value=”checked” onClick=”alert(this.form.flag.checked);”> <INPUT type=button value=”defaultChecked” onClick=”alert(this.form.flag.DefaultChecked);”> </FORM> С помощью этого кода можно выводить на экран текущее состояние флажка и состояние, установленное по умолчанию. В качестве атрибута name в тэгах-флажках можно устанавливать одно и то же имя для флажков, входящих в группу. В этом случае доступ к отдельному флажку осуществляется как к элементу массива по номеру: <FORM> <INPUT type=reset value=”Сброс”> Отметьте выражения со значением true: <BR> <INPUT type=checkbox name=task> !0&&!””<BR> <INPUT type=checkbox name=task> !0 | | !”” <BR> <INPUT type=checkbox name=task> 0&&!””<BR> <INPUT type=checkbox name=task> 0 | | !”” <BR> <INPUT type=button value=”Проверить” onClick=”var ans=’неверно’; if (this.form.task[0].checked&& this.form.task[1].checked&& !this.form.task[2].checked&& this.form.task[3].checked) ans=’верно’; this.form.result.value=ans;”> <INPUT type=text size=15 name=result value=””> </FORM> Радиокнопки предназначены для выбора одного альтернативных. Для задания радиокнопки используется тэг: варианта из нескольких <INPUT type=radio name=имя checked> У объекта INPUT при работе с радиокнопками есть свойства checked и defaultChecked. Они работают аналогично этим же атрибутам при работе с флажками. Рассмотрим программу «Умножатель», которая позволяет выбрать два числа из предложенных списков (по 4 значения в каждом) и получить результат их умножения друг на друга. <FORM> <TABLE border=0> <TR> <TD colspan=3> <INPUT type=reset value=”Сброс”> </TD> <TR> <TD> <INPUT type=radio name=op1 checked>10 </TD> <TD>&nbsp;</TD> <TD> <INPUT type=radio name=op2 checked>2 </TD> </TR> <TR> <TD> <INPUT type=radio name=op1 checked>20 </TD> <TD>&nbsp;* &nbsp;</TD> <TD> <INPUT type=radio name=op2 checked>3 </TD> </TR> <TR> <TD> <INPUT type=radio name=op1 checked>30 </TD> <TD>&nbsp;</TD> <TD> <INPUT type=radio name=op2 checked>4 </TD> </TR> <TR> <TD> <INPUT type=radio name=op1 checked>40 </TD> <TD>&nbsp;</TD> <TD> <INPUT type=radio name=op2 checked>5 </TD> </TR> <TR> <TD colspan=3> <INPUT type=button value=”Ответ” onClick=”var op1=new Array(10,20,30,40); var op2=new Array(2,3,4,5); var len=4; var ind1; var ind2; for (var i=len; --i>=0;) { if (this.form.op1[i].checked) ind1=i; if (this.form.op2[i].checked) ind2=i; } this.form.result.value=op1[ind1]*op2[ind2];”> <INPUT type=text size=10 name-result value=””> </TD> </TR> </TABLE> </FORM> Блок <SELECT>…</SELECT> вставляет в форму меню или разворачивающийся список. Обычно меню используют в режиме, когда из нескольких предлагаемых вариантов можно выбрать только один. В этом случае меню напоминает переключатель с радиокнопками. Формат команды: <SELECT атрибуты> <OPTION атрибуты>надпись в меню</OPTION> … <OPTION атрибуты>надпись в меню</OPTION> </SELECT> Атрибуты <SELECT>: name=имя size=число видимых строк (по умолчанию – 1) Атрибуты <OPTION>: selected – выбор пункта меню по умолчанию. Свойства <SELECT>: options – массив объектов, каждый из которых содержит одну строку меню. Каждый объект из этого массива имеет свойства: text – текст строки меню selected -возвращает true, если пункт выбран defaultSelected -возвращает true, если пункт выбран по умолчанию length – число элементов в массиве options seletedIndex – номер выбранной строки меню (совпадает с индексом элемента массива) <FORM> Укажите автора:<BR> У Лукоморья дуб зелёный,<BR> Златая цепь на дубе том…<BR> <SELECT name=menu> <OPTION selected>Лермонтов</OPTION> <OPTION>Пушкин</OPTION> <OPTION>Есенин</OPTION> </SELECT> <INPUT type=button value=”Проверить” onClick=”var ans=’неверно’; if (this.form.menu.selectedIndex==2) ans=’верно’; this.form.result.value=ans;”> <INPUT type=text size=15 name=result value=””> </FORM> Для работы с многострочными текстовыми полями используется тэг: <TEXTAREA атрибуты> текст по умолчанию </TEXTAREA> Атрибуты тэга: name=имя cols=число столбцов rows=число строк Свойства тэга: value – текущее значение. Содержимое value размещается в переменной как одна текстовая строка; концы строк представляются двумя символами “\r\n” defaultValue – значение по умолчанию. <FORM> Исправьте ошибки:<BR> <TEXTAREA name=edit rows=7 cols=44> Покрывало убежало, Улетела размазня, И кукушка, как лягушка, Ускакала от меня. </TEXTAREA> <BR> <INPUT type=reset value=”Восстановить”> <INPUT type=button value=”value” onClick=”alert(this.form.edit.value);”> <INPUT type=button value=”defaultValue” onClick=”alert(this.form.edit.defaultValue);”> </FORM> Рекомендуем также ознакомиться с примерами скриптов по адресу: http://www.scriptic.ru/form/index.shtml