Простой и понятный каждому Java-script Скриптовые языки в некотором роде перевернули мир, и именно благодаря им появился DHTML, который позволяет делать со страничкой практически что угодно. Как известно, всего два языка претендуют на лавры победителя в браузере. Это VBScript — подмножество Visual Basic-а и JavaScript. Вот последним мы и займемся, как наиболее универсальным.
Сами по себе изучать скриптовые языки не имеет смысла, т.к. они тесно связаны с объектной моделью браузера и, по сути дела, большая часть скриптов просто устанавливает соответствующие свойства объектов или вызывает их методы.
Что такое объектная модель?
Давным-давно, когда браузеры еще имели номер версии равный единице, ничего подобного не было и в помине. Информация просто выводилась на дисплей по мере поступления, не подвергаясь никаким изменениям. Все было просто, и даже глюков совместимости еще не было:)
Сейчас же путь странички до дисплея гораздо дольше. Давайте поэтапно проследим ее путь:
Cтраничка скачивается с сайта и размещается в памяти компьютера Производится анализ странички, в результате которого она препарируется на составляющие. Блоки, из которых состоит страничка (<body></body>, <head></head>, <p></p> и т.д.) размещаются во временной базе данных
соответственно структуре объектной модели. База данных становится доступной другим программам и, в частности, рендеру, который выводит страничку на экран. Для доступа и управления содержимым этой базы данных браузер предоставляет нам механизм объектов и скриптовый язык, посредством которого и выполняется доступ.
Разумеется, содержимое базы может быть изменено до вывода на экран, что и позволяет работать DHTML. Но объектная модель остается работать даже после того, как страничка показана на экране дисплея. Это дает нам возможность в небольших пределах (а в последних версиях HTML 4.0 практически полностью) менять содержимое странички после загрузки.
Структура объектной модели
Чтобы было понятно, о чем мы говорим, рассмотрим общую структуру объектной модели. Ниже приведена объектная модель Internet Explorer версии 4 и выше.
window — объект, дающий доступ к окну браузера
frames — объект, дающий доступ к фреймам
window…
window…
…
document — объект, содержащий в себе всю страничку
all — полная коллекция всех тегов документа
forms — коллекция форм
anchors — коллекция якорей
appleеs — коллекция апплетов
embeds — коллекция внедренных объектов
filters — коллекция фильтров
images — коллекция изображений
links — коллекция ссылок
plugins — коллекция подключаемых модулей
scripts — коллекция блоков <script></script>
selection — коллекция выделений
stylesheets — коллекция объектов с индивидуально заданными
стилями
history — объект, дающий доступ к истории посещенных ссылок
navigator — объект, дающий доступ к характеристикам браузера
location — объект, содержащий текущий URL
event — объект, дающий доступ к событиям
screen — объект, дающий доступ к характеристикам экрана
Объектная модель Netscape Navigator-а немного отличается от вышеприведенной, но ее смысл точно такой же. А использование JavaScript позволяет нам обойти различия в реализации объектных моделей.
Вместо того, чтобы подробно объяснять каждый объект, входящий в модель браузера, я буду разъяснять смысл соответствующих объектов, их свойств и методов на конкретных примерах по мере возникновения в том необходимости.
Как видите, структура объектной модели достаточно сложна, но строго определена, и существует однозначный способ доступа к любому свойству
или методу. Синтаксис полностью соответствует тому, что используется в объектных языках. Т.е. нижележащие объекты отделяются от вышележащих точкой, и для доступа к конкретному свойству нужно просто корректно построить строку доступа.
И, как Вы понимаете, вот здесь-то на сцену и выходит скриптовый язык, который и позволяет нам манипулировать объектами.
Как любой язык программирования, JavaScript имеет определенный набор типов переменных, операторов, встроенных функций и объектов. Изучение JavaScript как такового как раз и заключаются в запоминании всего этого. Но, как Вы понимаете, оторванный от объектной модели, он мало полезен сам по себе. А потому я просто расскажу о популярных эффектах, применяемых на страничках, попутно давая пояснения. И надеюсь, что если это Вас заинтересует, то более сложные вещи Вы уже напишите сами.
Как и где размещать код скрипта?
Но сначала мы немного отвлечемся от эффектов и поговорим о том, как и где размещать JavaScript. Так как язык скриптовый и рассчитан на работу на web-страничках, то его код размещается непосредственно в HTML-коде странички. Причем, код на JavaScript обычно состоит из двух частей:
Функции, которые вызываются из кода странички в ответ на какое-то
событие
Код событий, которые вызывают функции:))
Описание функций должно располагаться в теге <head></head> — это гарантирует нам, что к моменту вызова функции она уже будет находиться в памяти компьютера. Для вставки кода используется специальный тег <script>, в параметрах которого мы и определяем конкретный язык. Вот пример типичного описания JavaScript-вставки:
<script language="JavaScript">
<!--
function somefunction ()
{
// здесь располагается код функции
}
//-->
</script>
Обратите внимание, что непосредственно сам код заключен в тег комментария. Это сделано для того, чтобы более старые браузеры игнорировали непонятные им команды. Новые же программы знают о существовании закомментированных скриптов и им это не мешает.
Заметьте также, что закрывающий тег комментария несколько необычен и предваряется двумя косыми чертами. Две косые черты — это комментарий языка JavaScript, т.е. скрипт игнорирует все, что идет после него. А сделана такая сложная конструкция ради совместимости с Netscape, который закрывающий HTML-комментарий воспринимает как непонятную ему команду и, соответственно, вызывает ошибку.
Способ внедрения Java-скрипта в страничку я уже описал, и в последующих примерах скриптов буду опускать всю эту стандартную обвязку, но Вы должны помнить, что в реальном проекте код должен быть описан полностью.
Определение типа и версии броузера
Как известно, броузеры отличаются широтой толкования стандартов HTML. Один и тот же код в каждом из броузеров проявляется несколько по-разному. Чтобы получить одинаковый результат иногда требуется писать разный код — для каждого броузера свой. И, разумеется, функция, которая бы сообщала нам о том, подходит броузер для отображения странички в полном объеме или нужно ограничиться урезанной версией, была бы как нельзя кстати.
Узнать тип используемого броузера достаточно просто. Нужно прочитать значение свойства appName объекта navigator. Точно таким же образом из свойства navigator.appVersion мы выуживаем версию броузера. Все это реализуется следующим фрагментом кода:
var browser_name = navigator.appName;
var browser_version = parseFloat (navigator.appVersion);
В принципе, эти переменные уже можно использовать для того, чтобы писать броузерозависимый код. Но мы поступим немного по-другому и для удобства воспользуемся механизмом флажков. Т.е. определим некую глобальную логическую переменную, например, browser_ok и в зависимости от результата проверок полученных ранее переменных browser_name и browser_version присвоим ей значение true (если по результатам проверки броузер удовлетворяет неким условиям) или false (в противном случае).
Логичный вопрос — зачем все нужно так усложнять? И ответ — для упрощения написания сложных функции и избежания повторных проверок.
Итак, вот пример кода, в котором мы проверяем броузер на соответствие следующим критериям: он должен быть либо Internet Explorer, либо Netscape Navigator и иметь версию не ниже 4-ой:
var browser_ok = false;
if (browser_name == «Netscape» && browser_version >= 4.0)
browser_ok = 'true';
else if (browser_name == «Microsoft Internet Explorer» &&
browser_version >= 4.0)
browser_ok = 'true';
Разумеется, условие может быть и более сложным, в зависимости от того, какие цели Вы преследуете. Кроме проверки типа и версии броузера мы можем также узнать количество используемых цветов, ширину и высоту экрана, возможность поддержки определенных плагинов и другие не менее полезные вещи, а значит, и скорректировать поведение скрипта. Можно завести более одного флажка, если мы собираемся писать разный код для разных броузеров. В данном конкретном случае мы просто выполнили проверку броузера на соответствие 4-ой версии. Это было сделано с целью безболезненного отсечения старых версий броузеров (чтобы они не показывали ошибку при обращении к страничке) и для проверки возможности использования DHTML.
Итак, код проверки броузера и выставления флажка, сигнализирующего о том, что броузер нам подходит, мы написали. А теперь научимся этим пользоваться. Основное правило заключается в том, что весь зависимый от этого флажка код нужно предварять проверкой его значения:
function somefunction () {
if (browser_ok == 'true') {
// здесь и располагается зависимый код
}
}
Таким образом, старые версии броузеров, которые не умеют работать с новыми технологиями, просто не получат непонятный для себя код и, соответственно, не сгенерируют ошибку.
Генерация случайного числа
Не столь уж и редкая ситуация, когда нам может понадобиться сгенерировать случайное число. Это может пригодиться, например, для написания странички, которая случайным образом показывает каждый раз новую картинку или афоризм при заходе на сайт. Но это может быть и часть более сложной системы — например, механизм локальной баннерной системы.
Для генерации случайного числа мы воспользуемся JavaScript объектом Math, метод random которого генерирует случайное число от 0 до 1. Но, так как нам обычно нужны целые числа из некоего диапазона, то будет логичным написать небольшую функцию, которая все это будет делать автоматически. Вот как выглядит соответствующий фрагмент кода:
function getrandom () {
var min_random = 0;
var max_random = 10;
max_random++;
var range = max_random — min_random;
var n=Math.floor (Math.random ()*range) + min_random;
return n;
}
Перед использованием скрипта нужно лишь определить границы диапазона, в которых генерируется случайное число (соответственно, переменные min_random и max_random)
Дата модификации документа
Некоторые web-дизайнеры находят полезным отображать внизу странички дату последней модификации документа. Это делается для того, чтобы посетитель мог определить, насколько часто обновляется сайт. Правда это же накладывает и определенные обязательства по поддержке сайта. Согласитесь, что наблюдать прошлогоднюю дату доставляет мало удовольствия. Но если Вы все же решились использовать этот прием, то следующий скрипт Вам пригодится.
Есть два способа добиться нужного нам результата. Первый заключается в том, что строчку с датой вы корректируете вручную, а второй, и он более привлекательный, заключается в использовании свойства lastModified объекта document. Для этого в нужном месте странички достаточно вставить следующую конструкцию:
<script language="JavaScript">
<!--
document.write («Дата последней модификации: „ + document.lastModified);
//-->
</script>
Дата выводится в формате, соответствующем региональным настройкам компьютера, а это не всегда нам подходит. Но, несколько усложнив скрипт, мы сможем выводить дату практически в любом формате. Для этого достаточно печатать дату модификации документа не сразу, а предварительно разобрав ее на составляющие. Сделать это можно при помощи создания объекта Date, передав ему в качестве параметра document.lastModified:
<script language=“JavaScript»>
<!--
LastDate = new Date (document.lastModified);
LastDay = LastDate.getDate (); // Считываем число
LastMonth = LastDate.getMonth (); // Считываем месяц
LastYear = LastDate.getYear (); // Считываем год
LastYear = LastYear % 100;
LastYear = ((LastYear < 50)? (2000 + LastYear): (1900 + LastYear));
document.write ("Дата последней модификации: «, LastDay, „/“, LastMonth+1, „/“, LastYear);
//-->
</script>
Теперь осталось только прочитать день, месяц и год, воспользовавшись методами объекта Date и напечатать дату в нужном нам формате. Именно так и сделано в вышеприведенном скрипте, который печатает дату в формате, соответствующим региональным настройкам России (ДД/ММ/ГГГГ).
Обратите внимание на два обстоятельства. Первое это то, что при печати месяца мы увеличиваем его на единичку, так как метод getMonth () возвращает нам номер месяца в виде целого числа от 0 (январь) до 11 (декабрь).
А второе заключается в том, что год мы печатаем не сразу, а вначале решаем проблему 2000 года. В данном случае эта проблема заключается в том, что метод getYear () в версии JavaScript от Microsoft возвращает нам год в виде четырех цифр, а в версии Netscape Navigator в виде последних двух (после 2000 года в виде трех:), которые следует рассматривать как смещение от 1900 года.
Решение проблемы осуществляется достаточно просто — вначале мы берем остаток от целочисленного деления на 100 и тем самым гарантированно получаем год в виде двух последних цифр. Теперь нужно выяснить к какому веку относятся эти две цифры — для этого мы сравниваем их с 1950-м годом и считаем, что если число меньше 50, то это уже новый век, а иначе старый. Данным способом мы превратили проблему 2000 года в проблему 2050 года:), когда эта уловка уже наверняка потеряет смысл.
Как сделать страничку стартовой?
В последнее время стало достаточно модным применять этот скрипт. Его смысл заключается в том, что где-нибудь на видном месте странички мы делаем ссылку, нажав на которую пользователь сможет сделать Вашу страничку стартовой, т.е. такой, которая загружается при запуске броузера и нажатии на кнопку „Домой“.
Этот прием может быть полезен для информационных ресурсов, но не стоит им особо злоупотреблять.
К сожалению, на данный момент скрипт будет работать только под Internet Explorer версии 5.x. Учтите это. Сам же код требуется разместить в подходящем месте, а выглядит он так:
<p><a href=»http://www.artsinus.info/prostoj-i-ponyatnyj-java-script.html#" mce_href="http://www.artsinus.info/prostoj-i-ponyatnyj-java-script.html#" onClick="this.style.behavior='url (#default#homepage)'; this.setHomePage ('http://www.yoursite.com/'); return false;">Сделать стартовой страницей</a></p>
Желающие могут сделать стартовой, например, мою страничку.;-)
Добавление странички в «Избранное»
Подобно предыдущему скрипту, этот прием также работает лишь под Internet Explorer, но уже начиная с 4-ой версии. И точно такие же замечания по поводу его уместности.
Размещая на видном месте ссылку на этот скрипт, мы позволяем пользователю при помощи одного щелчка добавить наш сайт в папку «Избранное». А сам скрипт выглядит следующим образом:
<p><a href="http://www.artsinus.info/prostoj-i-ponyatnyj-java-script.html#" mce_href="http://www.artsinus.info/prostoj-i-ponyatnyj-java-script.html#" onClick="window.external.addFavorite ('http://www.yoursite.com/', 'Description'); return false;">Добавить сайт в Избранное</a></p>
Желаете проверить? Нажмите здесь, и Вы сможете добавить в избранное мой сайт.:-)
Распечатка страницы из кода
Иногда требуется распечатать страничку, причем сделать это нужно непосредственно из кода. Сначала кажется, что это невозможно, но все не так плохо. На самом деле в Netscape Navigator для этого есть, даже, встроенный механизм. Достаточно просто вызвать метод window.print ()
А вот для получения такого же результата в Internet Explorer мы применим не совсем обычный способ и воспользуемся специализированным объектом ActiveX, который и позволит нам распечатать страничку.
Таким образом, наша задача разделилась на две части. Первая — определить тип броузера, а вторая корректно вставить объект на страничку. Вот пример кода, который делает все необходимые действия:
<script language="JavaScript">
<!--
var browser_name = navigator.appName;
function printit () {
if (browser_name == «Netscape») {
window.print ();
} else {
var WebBrowser = '<object id="WebBrowser1" width=0 height=0
classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2"></object>';
document.body.insertAdjacentHTML ('beforeEnd', WebBrowser);
WebBrowser1.ExecWB (6, 2);
}
}
//-->
</script>
Осталось только вызвать этот код. Для этого, к примеру, можно воспользоваться событием onClick:
<a href="http://www.artsinus.info/prostoj-i-ponyatnyj-java-script.html#" mce_href="http://www.artsinus.info/prostoj-i-ponyatnyj-java-script.html#" onClick="printit ();">Распечатать статью</a>
Только не путайте этот скрипт с версиями страничек «для распечатки». Страничка для распечатки это обычный html-файл, из которого убрали дизайнерское оформление и оставили очень простую верстку, чтобы при печати не было лишних элементов. Приведенный же выше код непосредственно посылает страничку на принтер.
Общие соображения и HTML-код формы
Проверка формы, пожалуй, одна из наиболее часто применяемых функций. Редкий сайт обходится без какой-либо ее вариации, будь то простая отсылка сообщения на e-mail или форма сложного заказа в интернет-магазине. Польза скрипта очевидна — проверить, что пользователь заполнил все нужные поля перед отправкой, и тем самым избежать проблемы получения пустых писем или отсутствия контактной информации отправителя.
Предположим, что форма у нас уже есть и состоит из следующих 4-х полей: имя, электронный адрес, тема сообщения и непосредственно само сообщение. Соответствующий html-код для такой формы будет выглядеть примерно так:
<form action="/cgi-bin/formmail.cgi" onsubmit="return SendForm ();">
Ваше имя: *<input type="text" name="name"><br>
Электронный адрес: *<input type="text" name="email"><br>
Тема сообщения: <input type="text" name="subject"><br>
Сообщение: <textarea name="message"></textarea><br><br>
<input type="submit" value="Отправить">
<input type="reset" value="Очистить">
</form>
* — необходимые для заполнения поля
Заметьте, что в отличие от обычной формы, непосредственно в теге <form> мы отслеживаем событие onsubmit, и при его наступлении вызываем функцию проверки формы SendForm ().
Почему выбран именно такой способ вызова функции? Ведь можно было применить, например, событие onClick? Ответ простой — при использовании события onClick кнопку «Submit» придется заменить обычной кнопкой. И в случае, если в броузере отключена поддержка JavaScript, мы не сможем отправить форму (!). Отслеживание же события OnSubmit лишено этого недостатка, т.к. даже при отключенной поддержке скриптов форма будет отправлена.
Будем считать, что необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес.
Если Вы внимательно присмотритесь к HTML-коду нашей формы, то заметите, что рядом с этими полями я поставил звездочку, а в конце формы разместил сноску. Сделано это, разумеется, для удобства и элементарного уважения к пользователю.
Функция проверки формы перед отправкой
А теперь перейдем к главному — к написанию той самой функции, что будет непосредственно осуществлять проверку формы. Давайте подумаем, что нам от нее требуется? Ну, во-первых, проверить, что нужные поля заполнены, а во-вторых, отослать форму. В случае же, если несколько из обязательных полей пусты, нам нужно сформировать об этом сообщение пользователю и переместить курсор на соответствующий элемент.
Для начала напишем общую обвязку функции:
<script language="JavaScript">
<!--
function SendForm () {
// Здесь мы разместим код функции
return true;
}
//-->
</script>
Примененный нами способ вызова функции через событие onSubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.
Теперь попробуем написать проверочную функцию, привязанную к данной конретной форме. Как Вы помните, необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес. Самое простое — это проверить содержимое каждого из обязательных полей на отсутствие текста:
<script language="JavaScript">
<!--
function SendForm () {
if (document.forms[0].name.value == "") {
alert ('Пожалуйста, введите Ваше имя');
document.mailform.name.focus ();
return false
}
if (document.forms[0].email.value == "") {
alert ('Пожалуйста, введите электронный адрес');
document.mailform.email.focus ();
return false
}
return true;
}
//-->
Как видите, функция проверки состоит из двух идентичных блоков, различающихся только именем проверяемого поля. Давайте прокомментируем каждую строчку в этих блоках:
сначала проверяем, что данное поле является пустым. И если это так, то выводим сообщение об ошибке при помощи встроенной функции alert (). После того, как пользователь закроет окошко, мы воспользуемся методом focus () и переместим курсор на ошибочное поле. И, наконец, выйдем из функции, установив флажок успешности выполнения в false.
В случае же, если проверяемое поле не было пустым, то соответствующий блок просто пропускается. При пропуске всех проверочных блоков функция в качестве результата возвращает true, что свидетельствует об успешной проверке.
Универсальная функция проверки
Если нам необходимо проверить всего два или три поля, то с таким методом проверки «по одиночке» еще можно смириться, но что, если их несколько десятков? А ведь такое не редкость — особенно в сложных анкетах. Поэтому мы немного модифицируем нашу функцию, чтобы она не зависела от количества проверяемых полей.
Первым делом, мы создадим массив, где перечислим имена всех полей, которые требуют проверки:
required = new Array («name», «email»);
Такой подход позволит нам очень легко добавлять и модифицировать список обязательных полей без непосредственного изменения кода самой функции.
Дополнительно к вышеописанному массиву, мы добавим еще один, который будет содержать текст ошибки для конкретного поля:
required_show = new Array («Ваше имя», «электронный адрес»);
Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа «name не введен».
Имея массив обязательных для заполнения полей, всю проверку можно осуществлять в ци
|
Чти-Во