Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-технологии. Ч.1. Учебное пособие (курс лекций)
.pdf
list), располагаются только в контейнере <form> . . . </form>. Всем
перечисленным элементам в языке JavaScript соответствуют отдельные объекты. Программы на языке JS могут обрабатывать
формы непосредственно, получая значения, содержащиеся в необходимых элементах (например для проверки ввода обязательных
данных). Кроме того, данные из формы обычно передаются для
обработки на удаленный Web-сервер.
Синтаксис:
<form name="formName"
target="windowname"
action="serverURL"
method="get" | "post"
enctype="encodingType"
[onSubmit="handlerText"]>
</form>
Здесь атрибут name – строка, определяющая имя формы. Атрибут target задает имя окна, в котором должны обрабатываться
события, связанные с изменением элементов формы. Для этого
требуется наличие окна или фрейма с заданным именем. В качестве значений данного атрибута могут использоваться и зарезервированные имена _blank, _parent, _self и _top.
Атрибут action задает адрес URL сервера, который будет получать данные из формы и запускать соответствующий CGIскрипт. Также можно послать данные из формы по электронной
почте, указав при этом значения этого атрибута адрес URL типа
mailto: . . . Формы, передаваемые на сервер, требуют задания метода передачи (submission), который указывается при помощи атрибута method. Метод GET присоединяет данные формы к строке
адреса URL, заданного в атрибуте action. При использовании метода POST информация из формы посылается как отдельный поток данных. В последнем случае CGI-скрипт на сервере считывает
эти данные из стандартного входного потока (standard input
stream). Кроме того, на сервере устанавливается переменная среды
с именем QUERY_STRING, что обеспечивает еще один способ
получения этих данных. Атрибут enctype задает тип кодировки
MIME (Multimedia Internet Mail Extensions) для посылаемых данных. Типом MIME по умолчанию является тип application/x-www-
form-urlencoded.
131
К свойствам и методам формы в JavaScript-прграмме можно
обратиться одним из способов:
formName.propertyName
formName.methodName (parameters)
forms[i].propertyName
forms[i].methodName (parameters)
Здесь formName соответствует атрибуту name объекта form,
а i является целочисленной переменной, используемой для обращения к отдельному элементу массива forms, который соответствует определенному тегу <form> текущего документа.
Использование массива forms
К любой форме текущего гипертекстового документа можно
обращаться как к элементу массива forms. Для этого необходимо
указать индекс запрашиваемой формы. Например, forms[0] – первый тег <form> в текущем документе.
document.forms[i]
document.forms.length
document.forms['name']
Переменная i – это индекс, соответствующий запрашиваемой
форме.
Выражение вида
document.forms[i]
можно также присвоить переменной
var myForm = document.forms[i];
Теперь, если в форме имеется, к примеру, поле ввода, определенное в HTML-теге
<form>
<input type=text name=myField size=40>
. . .
</form>
то в JS-программе к этому полю позволяет обращаться переменная myForm. В частности, при помощи следующего оператора
содержимое данного поля ввода присваивается новой переменной
с именем result:
var result = myForm.myField.value;
Значение свойства length соответствует количеству форм в
документе:
132
var numForms = document.forms.length
Массив forms содержит данные, которые используют только
для чтения.
Свойства
Объект form имеет шесть свойств, большинство из них соответствуют атрибутам тега <form>:
action – соответствует атрибуту action;
elements – массив, содержащий все элементы формы;
encoding – соответствует атрибуту enctype;
length – количество элементов в форме;
method – соответствует атрибуту method;
target – соответствует атрибуту target.
Массив forms имеет только одно свойство length – количество
форм в документе.
Методы
Метод submit() применяется для передачи формы из
JavaScript-программы. Его можно использовать вместо тега <input
type=submit>, имеющегося в большинстве форм, информация которых должна передаваться на сервер.
Обработчики событий
Обработчик события onSubmit() позволяет перехватывать события, связанные с передачей данных формы. Такие события возникают либо после нажатия кнопки передачи данных, определенной тегом <input type=submit> в контейнере <form>, либо при передаче данных формы с помощью метода submit(), вызванного из
JS-прграммы.
Пример
В следующем примере при нажатии кнопки передачи данных
содержимое текстового поля посылается адресату по электронной
почте:
Вот текст этой программы:
<form nethod="post"
action="mailto:my@mail.ru"
enctype="text/plain">
<input type="submit" value="Отправить почту">
<input type="reset" value="Очистить форму">
<textarea name="email" rows=5 cols=60>
133
</textarea>
</form>
Работа с изображениями
В браузере рисунки рассматриваются как объекты image,
а все рисунки, содержащиеся в текущем документе, помещаются в
массив images, который можно использовать для обращения к любому рисунку, определяемому тегом <img>. В частности, можно
динамически обновлять изображения, изменяя их свойство src.
Примеров тому в интернете очень много. Для начала приведем тег
<img>, распишем полностью:
<img src="fileOrUrl"
[alt="altText"]
[lowsrc="fileOrUrl"]
[width=w]
[heigth=h]
[border=b]
[vspace=v]
[hspace=h]>
В атрибуте src содержится имя или адрес URL файла, который
нужно вывести в документе. Рисунок должен храниться в формате
GIF, JPEG, или PNG. С помощью атрибута alt задается альтернативный текст, появляющийся на экране: в момент загрузки текста,
если пользователь заблокировал вывод изображений и поясняющая надпись под курсором мыши. Атрибут lowsrc позволяет предварительно выводить на экран изображение с низким разрешением. При этом рисунок загружается в два этапа. Атрибуты width
(ширина) и height (высота) позволяют задать размеры рисунка в
пикселах, атрибут border – ширину рамки в пикселах, а атрибуты
vspace и hspace – размеры вертикального и горизонтального зазоров между границами изображения и другими элементами документа.
Для обращения к свойствам объекта image используется следующий синтаксис:
document.images[i].propertyName
134
где i – индекс элемента массива, который соответствует нужному
рисунку. Первым рисунком в документе будет document.images[0].
Массив images является свойством объекта document, поэтому при
обращении к рисунку необходим префикс document к имени массива. Тег <img> не имеет атрибута name, поэтому выражение вида
"document.imgName" приведет к ошибке.
Свойства
Все свойства объектов image соответствуют атрибутам тега
<img>, за исключением свойства complete. Эти свойства, кроме
свойств src и lowsrc, значения которых могут быть изменены динамически, имеют значения только для чтения:
src – соответствует атрибуту src тега <img>;
lowsrc – соответствует атрибуту lowsrc тега <img>;
height – соответствует атрибуту height тега <img>;
width – соответствует атрибуту width тега <img>;
border – соответствует атрибуту border тега <img>;
vspace – соответствует атрибуту vspace тега <img>;
hspace – соответствует атрибуту hspace тега <img>;
complete – содержит булево значение, которое указывает, за-
гружен рисунок в браузер или нет (true – загружен, false – нет);
type – для объектов image содержит значение "image".
Перед загрузкой рисунка появляется его рамка, внутри которой отображается строка, заданная в атрибуте alt (в версии 5 и
выше IE, пользователь при желании может отключить рамки с altтекстом отображаемые в момент загрузки рисунка). Рисунок можно изменять динамически, присваивая атрибуту src или lowsrc в
качестве значения новый адрес URL.
Методы и обработчики событий
Объект image не имеет методов.
Обработчики событий:
onAbort – обработка события, возникающего при прерывании
загрузки рисунка, т.е. при нажатии клавиши [Esc] или активизации
новой гиперсвязи, в то время, когда рисунок загружается;
onError – обработка события, связанного с ошибкой загрузки
рисунка, т.е. когда невозможно найти рисунок по указанному адресу URL;
135
onLoad – соответствующее событие, инициализируется в
начале загрузки рисунка. При загрузке анимированного GIF-а это
событие возникает несколько раз и зависит от числа кадров анимационной последовательности.
Рассмотрим, как из JavaScript можно адресоваться к изображениям, представленным на web-странице. В рассматриваемом
языке все изображения предстают в виде массива. Массив этот
называется images и является свойством объекта document. Каждое
изображение на web-странице получает порядковый номер: первое
изображение получает номер 0, второе – номер 1 и т.д. Таким образом, к первому изображению мы можем адресоваться, записав
document.images[0].
Каждое изображение в HTML-документе рассматривается в
качестве объекта Image. Объект Image имеет определенные свойства, к которым и можно обращаться из языка JavaScript. Например, можно определить, который размер имеет изображение, обратившись к его свойствам width и height. То есть по записи
document.images[0].width
Можно определить ширину первого изображения на webстранице (в пикселах). К сожалению, отслеживать индекс всех
изображений может оказаться затруднительным, особенно если на
одной странице их довольно много. Эта проблема решается назначением изображениям своих собственных имен. Так, если вводится изображение с помощью тэга
<img src="img.gif" name="myImage" width=100 height=100>
то можно обращаться к нему, написав
document.myImage или document.images["myImage"].
Загрузка новых изображений
Если необходимо осуществлять смену изображений на webстранице, то для этого нам понадобится атрибут src. Как и в случае
тэга <img>, атрибут src содержит адрес представленного изображения. в языке JavaScript имеется возможность назначать новый
адрес изображению, уже загруженному в web-страницу, и в результате, изображение будет загружено с этого нового адреса, заменив на web-странице старое. Рассмотрим к примеру запись:
<img src="img1.gif" name="myImage" width=100 height=100>
136
Здесь загружается изображение img1.gif и получает имя
myImage. В следующей строке прежнее изображение img1.gif за-
меняется уже на новое – img2.gif:
document.myImage.src= "img2.src";
При этом новое изображение всегда получает тот же размер,
что был у старого. И уже невозможно изменить размер поля,
в котором это изображение размещается.
Упреждающая загрузка изображения
Один из недостатков такого подхода может заключаться в
том, что после записи в src нового адреса начинает процесс загрузки соответствующего изображения. И поскольку этого не было
сделано заранее, то еще пройдет некоторое время, прежде чем новое изображение будет передано через Интернет и встанет на свое
место. В некоторых ситуациях это допустимо, однако часто подобные задержки неприемлемы. И что же мы можем сделать с
этим? Конечно, решением проблемы была бы упреждающая загрузка изображения. Для этого мы должны создать новый объект
Image. Рассмотрим следующие строки:
hiddenImg= new Image();
hiddenImg.src= "img3.gif";
В первой строке создается новый объект Image. Во второй
строке указывается адрес изображения, которое в дальнейшем будет представлено с помощью объекта hiddenImg. Как мы уже видели, запись нового адреса в атрибуте src заставляет браузер загружать изображение с указанного адреса. Поэтому, когда выполняется вторая строка нашего примера, начинает загружаться изображение img2.gif. Но как подразумевается самим названием hiddenImg
("скрытая картинка"), после того, как браузер закончит загрузку,
изображение на экране не появится. Оно будет лишь будет сохранено в памяти компьютера (или точнее в кэше) для последующего
использования. Чтобы вызвать изображение на экран, мы можем
воспользоваться строкой:
document.myImage.src= hiddenImg.src;
137
Но теперь изображение уже немедленно извлекается из кэша
и показывается на экране. Таким образом, сейчас мы управляли
упреждающей загрузкой изображения. Конечно браузер должен
был к моменту запроса закончить упреждающую загрузку, чтобы
необходимое изображение было показано без задержки. Поэтому,
если необходимо предварительно загрузить большое количество
изображений, то может иметь место задержка, поскольку браузер
будет занят загрузкой всех картинок. Необходимо учитывать скорость связи с Интернет – загрузка изображений не станет быстрее,
если пользоваться только что показанными командами. Мы лишь
пытаемся чуть раньше загрузить изображение – поэтому и пользователь может увидеть их раньше. В результате и весь процесс
пройдет более гладко.
Эффективное создание баннеров
Реклама в баннерных сетях является, наверное, одним из популярнейших способов раскрутки интернет проектов. Баннер – это
графический файл, который размещается на странице сайта и который имеет ссылку на другую web-страницу. Баннеры имеют
разные размеры. Основной единицей измерения при этом являются пиксели. Вот наиболее известные размеры: 468x60, 120x60,
100x100, 88x31. Существуют и другие, но менее известные размеры баннеров. Как нетрудно догадаться, чем больше баннер, тем он
эффективнее. Очень важным является размер (объем) самого файла баннера. Обычно, принято, чтобы размер баннера был не более
15Kb. Конечно, с введением новых форматов (flash) достичь этого
будет уже невозможно.
Существуют следующие способы баннерной рекламы:
Участие в баннерообменных системах.
Прямая договоренность между web-мастерами сайтов об
обмене баннерами между собой.
Покупка показов баннеров на других сйтах или в баннеро-
обменных системах.
Остановимся подробнее на баннерообменых системах. Баннерообменные системы – это службы которые позволяют автоматизировать взаимообмен и показ баннеров между различными сайтами – участниками системами. Как происходит данный процесс.
Зарегистрировавшись в системе баннерообмена, вы загружаете в
138
нее свой баннер и вставляете в свои страницы (в которых хотите
показывать чужие баннеры) специальный код. Каждый раз, когда
данные страницы загружаются, на них показываются баннеры чужих сайтов. Каждый показ баннера учитывается на вашем внутреннем счете (аккаунт) в системе. Но не все показы чужих баннеров засчитываются вам. Система оставляет себе комиссию за
предоставленную вам услугу. Это примерно 10%-20%. Остальные
показы вы можете тратить по своему усмотрению. Можете их
накапливать, (некоторые системы выкупают свои показы). Можете
тратить их на показы своих баннеров на чужих сайтах.
В некоторых баннеророобменных системах предусмотрен
таргетинг. Таргетинг – это возможность выбора условий показа
вашего баннера на чужих сайтах – участниках системы. Это может
быть выбор сайтов определенной тематики, определение времени
показа, количества показов и многое другое. Но, к сожалению, не
все баннерообменные системы принимают сайты с малым посещением. У многих таких систем существуют планки, при которых
ваш сайт может быть принят в систему. Например, не менее 100
показов чужих баннеров в день. Ссылки на некоторые баннерообменные системы находятся на странице Баннерный обмен.
Основным показателем в баннерной рекламе является отклик
или эффективность баннера. Коротко отклик обозначается CTR
(click/through ratio). Данное число высчитывается в процентах. Так
если CTR = 2%, то это значит, что только на 2% из всего количества показанных баннеров кликнули. Сейчас, средним CTR считается 2%, но на самом деле, на практике получается еще меньше.
Но есть, некоторые советы, следуя которым можно хоть как-то
увеличить CTR баннеров.
Сначала советы по созданию баннеров:
Следует сразу определиться, чего необходимо добиться от показов данного баннера. Хотите ли вы просто увеличить посещаемость сайта или хотите привлечь целевого посетителя. Если же
вам нужен целевой посетитель, то и баннер должен быть соответственно оформлен. Он должен давать точное представление, о чем
идет речь.
Как уже было сказано, чем больше размер баннера, тем выше
его эффективность. На иностранных сайтах, например, сейчас популярны баннеры – небоскребы. Точного их размера сказать вам
139
не смогу, но примерно это 120x700. В некоторых российских баннерных системах также практикуется работа с данными банерами.
Несмотря на кажущуюся эффективность большеформатных
баннеров, у них есть и отрицательные стороны. Так чем больше
баннер, тем больше его размер, тем дольше загружается страница с
таким баннером. Возникает вероятность, что баннер не успеет загрузиться на страничку, а пользователь уже уйдет с нее. Особенно
это касается, на мой взгляд, модных сейчас flash баннеров. Конечно, flash баннеры – это новое слово в баннеростроении, но их
большой размер (объем) напрочь отбивает желание связываться с
ними.
Использование анимации увеличивает отклик баннеров.
Использование в оформлении баннера стандартных элементов
windows, таких как полосы прокрутки, кнопки и др. также увеличивают его эффективность.
Теперь советы по размещению баннеров:
Отклик баннера расположенного на самом верху выше, нежели отклик баннера расположенного в самом низу страницы.
Баннер расположенный на 1/3 ниже от верха экрана дает CTR
на 70% больше, чем баннер расположенный в само верху.
Баннер не стандартного размера (125x125), расположенный в
нижнем правом углу первого экрана страницы (пользователь не
должен скроллировать страницу чтобы увидеть баннер) дает CTR
на 228% больше, чем стандартный баннер (468x60), расположенный самом верху.
Используйте ALT в теге IMG (если вы не пользуетесь баннерообменными сетями). Многие пользователи отключают графику.
Текст размещенный над и под баннером, увеличивает его эффективность.
Изменение изображений в связи с событиями, инициируе-
мыми пользователем
Можно создавать красивые эффекты, используя смену изображений в качестве реакции на определенные события. Например,
можное изменять изображения в тот момент, когда курсор мыши
попадает на определенную часть страницы. Проверьте, как работает
следующий пример, просто поместив курсор мыши на картинку.
140
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]