25. Язык Java Script. Использование Java Script для создания динамических страниц и форм.

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

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке. Название «JavaScript» является зарегистрированным товарным знаком компании Oracle Corporation.

Рассмотрим особенности создания динамики на странице, обработки форм, а также работы со слоями и стилями. JavaScript — это объектно-ориентированный язык программирования сценариев с синтаксисом, немного аналогичным синтаксисам языков C, Perl и Python. Несмотря на то что язык имеет схожее название с языком программирования Java, ничего общего, кроме части названия, у них нет.

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

Сеть Интернет построена по технологии «клиент-сервер».Серверы — это компьютеры или программы, которые предоставляют какие-либо сервисы клиентам, например веб-сервер или сервер электронной почты.Клиенты — это компьютеры или программы, которые используют то, что предлагают серверы, например веб-браузеры или почтовые клиенты.Сценарии JavaScript — это небольшие программы, которые выполняются на компьютере пользователя при загрузке с сервера вместе с веб-страницами.

Java Script - это язык, созданный компанией Netscape с синтаксисом и правилами, по которым он взаимодействует с Вашим HTML-документом. Начиная работать с Java Script, не следует забывать, что скрипт скачивается с сервера на клиентскую машину и лишь потом исполняется (запускается). Одной из самых распространенных ошибок является попытка реализовать те или иные динамические эффекты, связанные с файлами на сервере. Здесь сразу хочется сделать одно Важное замечание: язык Java Script не поддерживает работу с файлами.

С учетом того, что скрипт на Java Script должен сначала скачаться с сервера на клиентскую машину (компьютер пользователя, юзера), не следует ими злоупотреблять, так как они увеличивают время загрузки страниц. Как и в случае с HTML-кодами, так и в случае с языком Java Script, следует помнить и о том, что различные методы языка Java Script по разному работают в различных броузерах. Следовательно, страница, прекрасно смотрящаяся в одном броузере без учета данного условия, может быть полностью не читабельна в другом.

Java Script может быть использован для различных текстовых эффектов, для запроса информации с сервера с учетом данных клиентской машины, для создания "живой" неповторяющейся страницы (случайный показ рисунков, баннеров), разработок всплывающих подсказок, динамических меню, для проверки заполнения полей пользовательских форм и многого другого.

Очень часто при создании HTML-форм возникает потребность узнать у пользователя значения однотипных параметров, количество которых заранее неизвестно. Например, если это форма добавления сообщения в форум с возможностью прикрепить один или несколько файлов, например, с фотографиями. Другим примером может служить форма с анкетой, в которой есть сведения о детях. И в том и другом случае невозможно заранее предположить количество полей, которые пожелает заполнить посетитель сайта.

Без использования JavaScript эту задачу можно решить двумя путями: 1)Ограничить количество полей ввода каким-либо максимально разумным числом. Например, количество людей, у которых число детей больше 5, относительно невелико. Однако этот способ несколько некрасивый - во-первых, мы изначально загромождаем форму большим числом полей ввода, причём, большинству пользователей понадобятся от силы два - три первых, а во-вторых, мы всё-таки ограничиваем пользователя в возможности указать полную информацию о себе - так, если форму пожелает заполнить человек, у которого 10 сыновей, то некоторыми из них ему придётся пожертвовать. 2)Осуществлять ввод информации поэтапно. Например, на первом этапе предложить пользователю ввести количество фотографий, которые он желает загрузить на сервер, а на втором этапе при помощи скрипта на сервере сформировать форму с нужным количеством полей ввода. Однако, используя JavaScript, мы можем облегчить пользователю ввод информации о себе. Сделать это можно, например, следующим образом: Пусть, для определённости, пользователю необходимо ввести информацию о детях, а для упрощения примера - только имя и дату рождения. Со стороны пользователя нам понадобится браузер, понимающий тэг <span> и регулярные выражения, поддерживающий функцию getElementById объекта document, а также понимающий свойство innerHTML, например, Internet Explorer 5.5 Оформим ту часть формы, которая содержит информацию о детях, в виде таблицы. В самой первой строке таблицы мы разместим названия столбцов и добавим ещё одну ячейку, в которой разместим ссылку на добавление ещё одной строки с полями ввода информации. Во второй строке таблицы мы разместим сами поля ввода информации плюс ячейку со ссылкой на удаление строки с информацией. Чтобы можно было отличить строку данных от строки названий, добавим в тэг <tr> параметр id="newline" и номер строки в квадратных скобках (чтобы было легче отличить номер строки от символа 0) nomer="[0]". Затем поместим всю таблицу во внутрь тэга span с каким-либо именем, например, table. И напоследок, добавим еще поле ввода типа hidden для того, чтобы считать строки таблицы. В итоге у нас должно получиться что-то вроде следующего HTML-кода: <span id="table"> <table border=0 cellspacing=0 cellpadding=3> <caption>Сведения о детях</caption> <tr><td>Имя</td><td>Дата рождения</td><td><a href="#" onclick="return addline();">добавить</a></td></tr> <tr id="newline" nomer="[0]"> <td><input type="text" name="name[0]"></td><td><input type="text" name="date[0]"></td> <td valign="top"><a href="#" onclick="return rmline(0);">удалить</td></tr></table> </span> <input type="hidden" name="count" value="0"> Чтобы вся эта конструкция заработала, необходимо еще написать две функции на JavaScript: добавление новой строки и удаление ошибочно добавленной строки. Причём, в данном примере предполагается, что количество строк с данными может быть и нулевым, кроме того, у данной реализации динамической формы есть недостаток: если удалить все строки, то добавить строки уже будет нельзя. <script> function addline() {c=++document.getElementById('count').value; // увеличиваем счётчик строк s=document.getElementById('table').innerHTML; // получаем HTML-код таблицы s=s.replace(/[rn]/g,''); // вырезаем все символы перевода строк re=/(.*)(<tr id=.*>)(</table>)/gi;// это регулярное выражение позволяет выделить последнюю строку таблицы s1=s.replace(re,'$2'); // получаем HTML-код последней строки таблицы s2=s1.replace(/[d+]/gi,'['+c+']'); // заменяем все цифры к квадратных скобках // на номер новой строки s2=s2.replace(/(rmline()(d+))/gi,'$1'+c+')'); s=s.replace(re,'$1$2'+s2+'$3'); // заменяем аргумент функции rmline на номер новой строки document.getElementById('table').innerHTML=s; // создаём HTML-код с добавленным кодом новой строки return false; // возвращаем результат на место исходной таблицы function rmline(q) // чтобы не происходил переход по ссылке} {s=document.getElementById('table').innerHTML; s=s.replace(/[rn]/g,''); re=new RegExp('<tr id="?newline"? nomer="?['+q+'.*?</tr>','gi'); // это регулярное выражение позволяет выделить строку таблицы с заданным номером s=s.replace(re,''); // заменяем её на пустое место document.getElementById('table').innerHTML=s; return false;} </script> Таким образом, мы обнаружили, что использование регулярных выражений в JavaScript+DHTML открывает нам много новых возможностей для создания удобного пользовательского интерфейса. В частности, данный приём используется автором этих строк в интерфейсе администратора своего сайта для добавления нескольких картинок к странице в одной форме.