Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Петрозаводский Государственный Университет

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

отчет - лидок.docx

Скачиваний:

Добавлен:

01.07.2025

Размер:

376.95 Кб

Скачать

☆

<<< < Предыдущая 1 2 34 / 134 5 6 7 8 9 10 11 12 13 > Следующая >>>

Тема 3.2. Объектно-ориентированный язык программирования JavaScript

JavaScript –прототипно-ориентированный сценарный язык программирования.

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

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

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

Возможности языка

JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам — функции как объекты первого класса, объекты как списки, карринг,анонимные функции, замыкания — что придаёт языку дополнительную гибкость.

Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет коренные отличия:

объекты, с возможностью интроспекции;
функции как объекты первого класса;
автоматическое приведение типов;
автоматическая сборка мусора;
анонимные функции.

В языке отсутствуют такие полезные вещи, как:

модульная система: JavaScript не предоставляет возможности управлять зависимостями и изоляцией областей видимости;
стандартная библиотека: в частности, отсутствует интерфейс программирования приложений по работе с файловой системой, управлению потоками ввода/вывода, базовых типов для бинарных данных;
стандартные интерфейсы к веб-серверам и базам данных;
система управления пакетами^[~
3], которая бы отслеживала зависимости и автоматически устанавливала их.

Интеграция JavaScript и HTML

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

Из этой главы вы узнаете:

Как использовать тег <script> для включения JavaScript-программы в Web-страницу
Как скрыть JavaScript-программу от броузеров, не поддерживающих язык JavaScript.
Как пользоваться сообщениями об ошибках и окнами предупреждений (alert boxes)
Как тестировать JavaScript-программы с помощью броузера Navigator

Где можно разместить скрипты в HTML-документе?

Скрипты могут находиться в любом месте HTML-документа. Однако теги языка HTML нельзя помещать внутри JavaScript-программы. Не забывайте помещать JavaScript-программу между тегами <script>. . .</script>, за исключением тех случаев, когда она включена в обработчик событий. Они позволяют перехватывать и обрабатывать такие события, как нажатия кнопок, передачу заполненных форм, загрузку новых страниц и т.д.

Встретив тег <script>, Navigator построчно анализирует содержимое документа до тех пор, пока не будет достигнут тег </script>. После этого производится проверка скрипта на наличие ошибок и компиляция JavaScript-программы в формат, пригодный для выполнения на вашем компьютере. Это напоминает работу с языком Java, хотя в данном случае программы компилируются непосредственно в броузере Netscape. To же самое происходит и тогда, когда сценарий загружается как отдельный ресурс. Если при проверке или компиляции программы обнаруживаются ошибки, Navigator выводит на экран окна с предупреждениями. Чтобы продолжить работу, необходимо нажать кнопку ОК в каждом таком окне.

Главная часть JavaScript-программы может быть помещена в контейнер <head>. . .</head>, поскольку он считывается в программу Navigator при загрузке HTML-документа одним из первых. Теоретически скрипт можно размещать в любом месте HTML-документа, хотя лучше это делать перед контейнером <body>. . .</body>, т.е. в заголовке документа, чтобы функции языка JavaScript загружались в память сразу же после загрузки документа в броузер. Однако некоторые авторы любят размещать теги со скриптами в конце программы. Поэтому окончательный выбор остается за вами. Описания функций лучше всего помещать в заголовок документа, хотя скрипты, выполняемые "на лету" и формирующие новые HTML-документы при обращении к определенным частям текущего документа, могут быть размещены там, где они необходимы.

Использование гиперсвязей и меток в JavaScript-программах

Гиперсвязи — это краеугольный камень Web. Они позволяют переходить от одного документа к другому с помощью щелчка мыши. В языке HTML гиперсвязь создается посредством тега <a href=URL >...</а>, где URL — адрес Web-ресурса, к которому вы хотите обратиться при активизации этой связи. Заданный в атрибуте href целевой ресурс загружается в окно браузера Navigator. Можно указывать ресурсы различных типов — Gopher, News, FTP и др. Обратите внимание на то, что тегам языка HTML в языке JavaScript соответствуют объекты. При просмотре тега <а href> броузер Navigator воспринимает эту гиперсвязь как объект. Обращение к объектам происходит с помощью их свойств, например свойства link.

Свойство links

Программа на языке JavaScript может обращаться к созданным вами гиперсвязям и меткам, используя стандартные свойства этих объектов, а именно свойства links*{В броузере Microsoft Internet Explorer свойство links объекта document не поддерживается, и при обращении к нему появляется сообщение об ошибке.} и anchors. Кроме того, в языке JavaScript имеется ряд методов, с помощью которых можно управлять этими объектами, создавая гиперсвязи и меткидинамически без помощи тегов языка HTML.

Когда HTML-документ загружается в Navigator, теги <а href > просматриваются и их атрибуты href (адрес URL, на который ссылается гиперсвязь) помещаются в свойство links. Свойство links представляет собой массив, каждый элемент которого соответствует одной обнаруженной гиперсвязи.

Поскольку при загрузке документа в броузер гиперсвязи записываются в массив links, интерпретатор JavaScript может обращаться к ним, ссылаясь на соответствующий элемент массива. И функция формирует список гиперсвязей в документе в виде текстовых строк, используя цикл for для просмотра массива links. Затем эти строки выводятся на дисплей с помощью функции alert() языка JavaScript.

Переход к меткам с помошыо JavaScript-программ

Можно заставить Navigator перейти к метке, определенной в документе, присвоив имя метки (заданное в теге <а name=...>) свойству document, hash. Например, если в документе с именем book.htm определена метка chapter2

<а name="chapter2"> CHAPTER 2 - INTRODUCTION! TO HYPERLINKS<hr> </а>, то присвоение имени "chapter2" свойству document.hash с помощью оператора языка JavaScript document.hash = "chapter2"; заставит Navigator загрузить ресурс:

http://www.somehost.com/book.htm#chapter2

Предполагается, что файл book.htm находится в корневом каталоге Web-сервера, имеющего адрес www.somehost.com. После загрузки нового документа Navigator выполнит переход к заданной метке. Если такой метки не существует, Navigator откроет документ с начала.

Проверка достоверности меток

Перед обращением к метке вы можете проверить ее достоверность, хотя эта процедура не так проста, как может показаться. Для проверки существования метки используется свойство document.anchor, которое представляет собой массив меток, определенных в пределах текущего документа. Однако к отдельным элементам этого массива обратиться нельзя, поскольку они возвращают значение null. Чтобы иметь возможность проверить достоверность меток в JavaScript-программе, необходимо для всех меток задать имена в числовой форме по порядку, например <а name="0">, <a name="1"> и т.д., а затем сравнить номера меток со значением свойства document.anchors, lenght. Метки с номерами, превышающими это значение, будут недостоверными (несуществующими), в этом случае можно выдать соответствующее сообщение об ошибке.

Создание меток с помошью метода anchor()

В языке JavaScript кроме метода link(), создающего гиперсвязи, существует метод anchor(), используемый для динамического создания меток в гипертекстовом документе. Синтаксис этого метода следующий:

anchText.anchor(anchName)

Где anchText является текстовым объектом, содержимое которого должно быть помещено в контейнер <а name>. . . </а>, а параметр anchName задает имя метки.

Вызов JavaScript-программ при активизации гиперсвязей

Использование адресов URL, начинающихся с javascript:, позволяет выполнить оператор или вычислить выражение языка JavaScript при активизации гиперсвязей. Такие адреса URL внутри тега гиперсвязи <а href > можно использовать для активизации функций или операторов языка JavaScript.

Использование языка JavaScript с HTML-формами

Форма является единственным средством, которое предоставляет пользователю возможность вводить данные в Web-документы без помощи каких-либо программ. Взаимодействие JavaScript-программ и форм обеспечивается за счет того, что в языке JavaScript имеется множество объектов, соответствующих HTML-тегам, которые могут присутствовать в теге <form>.

Взаимодействие HTML-форм и языка JavaScript

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

Тег <form>

Любой элемент формы определятся в контейнере <form>...</form>. Таким образом, поля ввода (text-field), области текста (text-area), селекторные кнопки, списки и контрольные переключатели не могут располагаться вне этого контейнера. Поля формы предоставляют возможность вводить данные и сохранять их для дальнейшей обработки. До появления языка JavaScript формы были единственным способом ввода данных в HTML-документы. В языке JavaScript имеется собственный метод (prompt()), обеспечивающий ввод текста, однако формы в этом случае предоставляют все же больше удобств.

Элементы Формы

Контейнер <form>... </form> может содержать любой из приведенных в следующей таблице тегов элементов формы языка HTML.

Описание	Тег элемента Формы
Контрольный переключатель	<input type="checkbox">
Кнопка передачи формы	<input type="submit">
Скрытое поле	<input type="hidden">
Кнопка	<input type="button">
Селекторная кнопка	<input type="radio">
Список	<selectx/select>
Поле ввода	<input type="text">
Область текста	<textarea></textarea>

Каждый из этих элементов формы в языке JavaScript представляется в виде свойства объекта form.

Как язык JavaScript работает с Формами

Каждому контейнеру <form>...</form>, считанному в броузер Navigator, в языке JavaScript соответствует объект form. Кроме того, каждый такой объект является элементом массива forms, например forms[0] — первая форма текущего HTML-документа, и каждому элементу формы, например селекторной кнопке, списку или полю ввода, в языке JavaScript соответствует определенный объект. Для обращения к таким объектам и для работы с ними необходимо понять иерархию объектов HTML-документа.

Контрольные переключатели

Контрольные переключатели (checkbox) определяют в теге <input type="checkbox">. Они обеспечивают возможность выбора одного или нескольких вариантов и могут иметь два состояния — включено или выключено (on или off). В языке JavaScript контрольному переключателю соответствуют два объекта:

элемент массива elements;
массив, имя которого соответствует значению атрибута name, заданногов теге контрольного переключателя.

Свойство контрольного переключателя checked содержит булево значение true, если данный переключатель включен, и false, если он выключен. Атрибут тега checked определяет состояние контрольного переключателя по умолчанию. Этому атрибуту в языке JavaScript соответствует свойство def aultChecked, значение которого зависит от того, задан атрибут checked в теге <input> или нет. К контрольному переключателю в JavaScript-программе можно также обратиться при помощи массива elements.

Списки

Списки (selection list) обеспечивают возможность выбора одного (single) или нескольких (multiple) элементов из определенного множества. Для создания списка используется контейнер <select>. . .</select>, в котором с помощью тегов <option> задаются его элементы. Количество элементов списка не ограничено. В языке JavaScript элементам списка соответствует массив options, индексы которого начинаются с нуля. Элементы списка имеют свойство selected, которое содержит значение true, если данный элемент выбран, и false — в противном случае. В HTML-теге <option> также можно указать атрибут selected и задать в нем элемент, выбранный по умолчанию. Чтобы получить информацию о состоянии элемента списка по умолчанию в JavaScript-программе, необходимо обратиться к свойству default Che eked элемента списка. Элементы списка имеют также свойство text, значением которого является текст, заданный после тега <option>. Свойство списка selectedlndex возвращает индекс выбранного элемента. Списки могут быть представлены несколькими способами. Если в теге <select> определен атрибут multiple, на экран выводится обычный список, в котором можно выбрать несколько элементов. Кроме того, с помощью атрибута size тега <select> задается количество одновременно отображаемых элементов списка. Создавая список, необходимо выполнять перечисленные ниже правила.

Когда для определения списка использован тег <select multiple>, все элементы, заданные в тегах <option>, выводятся на экран, и вы можете выбратьнесколько из них. JavaScript-программа, обрабатывающая список этого типа, должна организовать цикл по элементам массива options и проверять свойство selected каждого элемента. Выполнение цикла необходимо продолжать до тех пор, пока не будут обработаны все элементы. Количество элементов в списке можно получить, обратившись к свойству length массива options. Например, для формы с именем myForm используйте выражение myForm.options.length. При работе со списками с возможностью выбора нескольких элементов свойство selectedlndex применять не следует. Для определения текста, заданного в теге <option>, обратитесь к свойству text.

Если в теге <select> атрибут multiple не задан, то определен список с возможностью выбора одного элемента. В этом случае для получения номера выбранного элемента используйте свойство списка selectedIndex, а для доступа к содержимому этого элемента — свойство text объекта option. Если атрибут selected не задан ни для одного элемента списка, по умолчанию выбирается первый элемент, т.е. элемент с индексом нуль. Поэтому для списков с возможностью выбора одного элемента свойство selectedlndex никогда не содержит значения.

При определении списка с помощью тега <select size=n> на экране одновременно отображается п элементов списка, однако выбрать несколько элементов в нем невозможно. Таким образом, для определения выбранного элемента списка и в этом случае следует использовать свойство selectedlndex. Если же атрибут selected не задан ни для одного из элементов списка, по умолчанию будет выбран первый элемент (элемент с индексом нуль).

Кнопки передачи данных

Кнопки передани данных (submit button) используются для передачи данных формы на Web-сервер. Обработка этих данных может выполняться при помощи CGI-скриптов. В таких случаях атрибут action тега <form> задает адрес URL, определяющий имя скрипта, который будет обрабатывать данные формы. Язык JavaScript обеспечивает возможность обработки события, связанного с передачей данных формы, перед тем, как эти данные будут переданы на сервер для дальнейшей обработки. Обработка событий, связанных с передачей данных форм, часто применяется для проверки правильности введенных пользователем данных. К кнопке передачи данных из JavaScript-программы обращаются двумя способами:

как к элементу массива elements, соответствующего кнопке передачи данных;
используя имя кнопки, заданное в атрибуте name.

Поля ввода

Поля ввода (text-field) применяются главным образом для ввода алфавитно-цифровых данных. Чтобы числовые значения, введенные в поле ввода, можно было использовать в качестве числовых аргументов для индексации массивов и т.п., они должны быть преобразованы в числа при помощи соответствующей функции языка JavaScript. Поле ввода создается в теге <input type="text">. Поскольку "text" является типом элемента формы, определенным по умолчанию, при задании полей ввода атрибут type можно опускать. Для указания длины поля (в символах) используется атрибут size тега <input>. В JavaScript-программе к полю ввода обращаются посредством:

элемента массива elements, соответствующего данному полю ввода;
имени элемента, определенного с помощью атрибута name.

Значения, введенные в поле ввода, можно динамически изменять, присваивая необходимое строковое значение свойству value соответствующего объекта text-field. При инициализации формы свойство value сохраняет значение поля ввода, заданное по умолчанию в атрибуте value*{Данный атрибут является необязательным.} тега <input>. Поля ввода — это весьма распространенные элементы форм, поэтому в JavaScript-программах, приведенных в этой книге, они встречаются достаточно часто.

Проверка правильности данных форм при помощи языка JavaScript

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

Программы проверки правильности данных форм похожи на клиентские приложения или программы, взаимодействующие с CGI-скриптами (CGI — это широко распространенный стандарт передачи данных и обслуживания клиентских запросов на серверах Internet).

Управление окнами в JavaScript-программах

Окна броузера используются для загрузки и отображения документов. В языке JavaScript окнам броузера соответствуют объекты window, которые имеют метод ореп(), позволяющий открывать новые окна. Преимущество многооконных приложений состоит в том, что они предоставляют возможность отобразить одновременно несколько документов.

Создание окон

Метод open() объекта window позволяет открывать новые окна, определяя различные их характеристики (размер, координаты, наличие панели инструментов и т.п.). Использование метода ореn() подобно выбору команды New Web Browser меню File броузера Navigator, за исключением того, что язык JavaScript предоставляет больше возможностей для указания характеристик нового окна. Кроме того, из JavaScript-программы можно управлять загруженным в окно документом, динамически изменяя его при помощи таких методов объекта document, как open(), write() и close().

Каждая характеристика окна представляется в виде атрибута с уникальным именем, например toolbar, и может быть включена или выключена при помощи установок yes /no или 1/0. Использовать пробелы в строке windowFeatures не допускается. В таб. 5 приведены все атрибуты окон.

Атрибут	Значения	Что определяет
copyhistory	[=yes\|no] \| [=1\|0]	Сохранение истории загрузки документов в данное окно
directories	[=yes\|no] \| [=1\|0]	Наличие в данном окне кнопок групп новостей
height	= pixelheight	Высоту окна (в пикселах)
location	[=yes\|no] \| [=1\|0]	Наличие поля Location
menubar	[=yes\|no] \| [=1\|0]	Наличие меню
resizable	[=yes\|no] \| [=1\|0]	Наличие рамки окна, позволяющей изменять его размеры
scrollbars	[=yes\|no] \| [=1\|0]	Наличие линеек прокрутки
status	[=yes\|no] \| [=1\|0]	Наличие строки состояния
toolbar	[=yes\|no] \| [=1\|0]	Наличие панели инструментов
width	= pixelwidth	Ширину окна (в пикселах)

Таб.5 Атрибуты окон

Различия между фреймами и окнами

Для объекта window в языке JavaScript существует ряд синонимов, использование которых зависит от структуры HTML-документа. Кроме того, отдельное (автономное) окно на самом деле является новым броузером с собственными значениями свойств window, top и self и, конечно, может содержать другие объекты, например фреймы. Не путайте автономные окна с объектами window — это не одно и то же.

Автономные окна также являются объектами, однако в отличие от фреймов в языке JavaScript отсутствует массив windows. Ссылка на вновь создаваемое окно может присваиваться переменной в качестве значения, но свойства этого объекта не соответствуют свойствам текущего документа. Объекты frame и window в языке JavaScript идентичны, однако различия между документом, загруженным в автономное окно, и фреймсодержащим документом существенны. Автономные окна в действительности являются клонами главного окна броузера Navigator. В них также могут быть порождены фреймы и загружены различные документы. Фреймсодержащие документы (см. главу 9) — это документы определенной структуры, загрузка которых приводит к разделению окна броузера на отдельные области, куда, в свою очередь, загружают другие ресурсы, в частности HTML-документы.

Запись текста и графики в другие окна

После того как новое окно открыто, в него можно записать текст в HTML-формате, указывая перед каждым методом document. write () имя переменной, которой в качестве значения присвоена ссылка на это окно, возвращаемая методом window.open(). Например:

var myWin = window.open(...);

myWin.document.write(...);

Загрузка новых документов в другие окна

Первый аргумент, передаваемый методу open(), задает имя документа, который следует загрузить в создаваемое окно. Однако загрузить документ в окно можно не только этим способом. Если присвоить адрес URL документа свойству location конкретного окна, указанный документ будет загружен в это окно. Например, фрагмент:

var w1 = open("",

"win1",

"toolbar=0,width=700,height=400");

w1.location = "http://www.osbone.com";

Загрузит домашнюю страницу Web-узла Osborne в окно с именем w1, хотя в этом случае было бы проще записать:

var w1 = open("http://www.osbone.com", "win1",

"toolbar=0,width=700,height=400");

Изменение содержимого окна программным путем позволяет избежать "жесткого" задания адреса URL в вызове метода open(). В качестве первого аргумента методу open() можно также передать ранее созданную строковую переменную, содержащую адрес URL документа, который требуется загрузить в окно.

Закрытие окон

Для закрытия окна используется метод close(). При его вызове в качестве префикса следует указать имя окна, которое необходимо закрыть, например:

winName.close();

Здесь winName представляет собой переменную, которой сначала было присвоено значение, возвращенное методом window.open(). Кроме того, для вызова метода close() можно применять синонимы объекта window. Например, если нужно закрыть текущее окно, используйте выражение self.close(), поскольку self является синонимом текущего окна. Однако метод close () вызывается и без префикса, потому что предполагается, что текущее окно существует

Обработка событии в языке JavaScript

Система событий языка JavaScript. Использование языка JavaScript при обработке событий значительно расширило возможности языка HTML. В HTML-теги, определяющие гиперсвязи и элементы формы, введены соответствующие атрибуты. Чаще всего программы создаются для обработки информации, вводимой пользователем в поля форм. Возможности управления элементами форм обеспечиваются главным образом за счет функций обработки событий, которые могут быть заданы для всех элементов формы. Формы (forms) представляют собой контейнеры, содержащие поля ввода, области текста, списки и кнопки. Для каждого из этих элементов можно определить программу обработки событий, что существенно повысит степень интерактивности документа. События делятся на несколько категорий:

События, связанные с документами (события документа): — загрузка и выгрузка документов;

События, связанные с гиперсвязью (события гиперсвязи): — активизация гиперсвязи;

События, связанные с формой (события формы): — щелчки мыши на кнопках (button), селекторных кнопках (radio button), контрольных переключателях (checkbox), кнопках передачи данных и восстановления исходных значений элементов форм;

— получение и потеря фокуса ввода и изменение содержимого полейввода, областей текста и списков;

— выделение текста в полях ввода и областях текста;

события, связанные с рисунками (события рисунка):

— загрузка рисунка, ошибка загрузки рисунка, прерывание загрузки рисунка;

события, связанные с мышью (события мыши):

— помещение указателя мыши на гиперсвязь и активизация гиперсвязи. События, связанные с документами, возникают при загрузке и выгрузке документа, в то время как события гиперсвязей возникают при их активизации или при помещении на них указателя мыши. Чаще всего программы на языке JavaScript используются для обработки событий форм. События, связанные с рисунками, введены в броузер Navigator версии 3.0. Они позволяют выполнять определенные действия как в процессе загрузки рисунка, так и при возникновении ошибок. Рисунки теперь тоже являются объектами с собственными свойствами. Например, выражение document.images[0].src соответствует атрибуту src (адрес URL) в первом теге <img> текущего документа. События, связанные с рисунками, подробно рассмотрены ниже.

Обработчики событий конкретного объекта задаются в HTML-теге, определяющем этот объект. Например, обработчик события, связанного с рисунком, задается в теге <img>, а обработчик события гиперсвязи — в теге <а href > и т.д. Чтобы обеспечить перехват события, необходимо написать функцию-обработчик события (event-handler). В качестве обработчиков событий могут быть заданы целые функции языка JavaScript или только группы из одного или нескольких JavaScript-операторов, разделенных точкой с запятой (;). В таблице ниже перечислены имена всех событий и условия их возникновения. В среднем столбце таблицы приведены названия атрибутов HTML-тегов, при помощи которых задаются обработчики событий.

Изменение содержимого поля и выбранных элементов списка — атрибут onChange

Атрибут обработчика события onChange можно использовать в следующих HTML-тегах:

Атрибут onChange задает JavaScript-выражение, которое должно выполняться при потере фокуса ввода элементом HTML-формы и при изменении содержимого этого элемента. Данный атрибут подобен атрибуту onBlur, однако для того чтобы возникло событие Change, содержимое поля должно быть изменено, и поле должно потерять фокус ввода, т.е. после изменения значения поля необходимо перейти к другому полю HTML-формы.

Щелчки мыши и активизация гиперсвязей — атрибут onClick

Атрибут onclick может использоваться в следующих тегах языка HTML:

<а href=URL onClick="expr|function()">...</а>

Операторы языка JavaScript, заданные в атрибуте onclick, выполняются при щелчке мыши на таких объектах как гиперсвязь, кнопка перезагрузки формы (reset button) или контрольный переключатель (checkbox). Для контрольных переключателей и селекторных кнопок событие Click возникает не только при выборе элемента, но и при его разблокировании. Использование атрибутов onclick проще всего продемонстрировать на примере кнопок, определяемых тегами <input type = "button"> в контейнере <form>...</form>.

Получение фокуса ввода — атрибут onFocus

Атрибут onFocus работает со следующими тегами языка HTML:

Как следует из названия, атрибут onFocus позволяет обрабатывать события, связанные с получением объектами фокуса ввода. Поле формы получает фокус ввода, когда пользователь либо щелкает на нем мышью, либо перемещается к нему при помощи клавиши [Tab].

Загрузка документов — атрибут onLoad

Атрибут обработчика события onLoad может использоваться в следующих HTML-тегах:

Атрибут onLoad, помещенный в HTML-тег <body>, активизирует заданные операторы языка JavaScript, когда загрузка текущего документа в броузер закончена. Событие происходит после завершения программой Navigator загрузки текста HTML-документа в текущее окно или в текущий фреймсо-держащий документ (frameset-document). Фреймсодержащий документ — это документ, окно которого разделено на несколько участков. В каждый из них загружается документ (или ресурс) с уникальным адресом URL.

Перемещение мыши — атрибуты onMouseOver и onMouseOut

Атрибут onMouseOver позволяет активизировать JavaScript-операторы, когда курсор мыши находится на активной гиперсвязи, а атрибут оnMouseOut (введен в Navigator 3.0) — когда курсор мыши отведен от гиперсвязи.

<а href="..."onMouseOver="expr|function()">...</а>

<а href="..."onMouseOut="expr|function()">...</а>

Атрибут onMouseOver активизирует операторы JavaScript, когда указатель мыши наведен на гиперсвязь, в которой задан этот атрибут. При обработке событий Mouseover можно изменять сообщения в строках состояния и текстовые поля. Кроме того, в контейнере <а href>. . .</a> может содержаться область отображения (display-area) Java-апплета, заданная при помощи тега <applet>. В таких случаях обработка события Mouseover особенно полезна, поскольку в этот момент апплет или изображение можно "оживить".

Атрибут onMouseOut предоставляет возможность активизировать операторы языка JavaScript при помещении курсора мыши за пределы области гиперсвязи. Обработку события MouseOut следует выполнять, когда необходимо отменить ранее заданные действия. Например, если при обработке события Mouseover начата анимация изображения, то при обработке события MouseOut она может быть прекращена. До введения в броузер события MouseOut сделать это было невозможно, поскольку не существовало способа обнаружить, когда пользователь переместил указатель мыши за пределы области гиперсвязи (в Navigator версии 2.0).

Документ в следующем примере содержит изображения четырех обложек книг и область текста. Атрибут onMouseOver используется для обновления содержимого области текста. Содержимое области текста обновляется при перемещении указателя мыши на обложку другой книги. Рисунки обложек заключены в теги <а href> и представляют собой гиперсвязи. Значениями переменных book1txt, book2txt, book3txt и book4txt являются текстовые строки в формате HTML, описывающие упомянутые книги. При обработке событий Mouseover, заданной в тегах гиперсвязей <а href>, активизируются операторы JavaScript, которые обновляют содержимое области текста, помещая в него текст из этих переменных

Выделение текста — атрибут onSelect

Атрибут обработчика события onSelect может быть использован со следующими тегами языка HTML:

Этот атрибут запускает обработчик события, когда пользователь выделил фрагмент текста в поле ввода или области текста.

Передача Формы — атрибут onSubmit

Атрибут onSubmit можно использовать только с тегами, определяющими формы:

Событие Submit возникает при нажатии кнопки, заданной тегом <input type=" submit">. Такая кнопка обычно присутствует во всех формах, данные из которых могут пересылаться на Web-сервер.

Поскольку все функции JavaScript выполняются на локальном (клиентском) компьютере, обработка событий Submit происходит без передачи каких-либо данных на сервер. Поэтому обработку событий, связанных с передачей данных формы, удобно выполнять в тех случаях, когда эти данные можно обработать локально, не пересылая их на сервер, либо когда перед передачей данных необходимо проверить правильность заполнения формы. Функция-обработчик событий Submit должна возвращать булево значение (true или false), что дает возможность остановить процесс передачи данных формы. Если язык JavaScript не используется, правильность формы проверяется только на сервере при помощи скрипта CGI (Common Gateway Interface). Обеспечивая проверку правильности формы на клиентском компьютере, можно избежать пересылки на сервер неверных или неполных данных

Выгрузка документов — атрибут onUnLoad

Атрибут обработчика события onUnload может быть использован со следующими HTML-тегами:

Соответствующее событие возникает при выгрузке текущего документа, т.е. функция-обработчик события вызывается перед выгрузкой текущего документа. Атрибут обработчика события onUnload может быть задан также для фреймсодержащих документов

<<< < Предыдущая 1 2 34 / 134 5 6 7 8 9 10 11 12 13 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
14.05.2015570.88 Кб132ОтветыБД.doc
#
14.05.20151.32 Mб57ОтветыБД.pdf
#
01.07.2025573.96 Кб0отработанный.rtf
#
14.05.2015257.54 Кб29ОТРАСЛЕВЫЕ СТАНДАРТЫ ХСН.doc
#
06.11.2018128 Кб56Отчет "Олкон".doc
#
01.07.2025376.95 Кб0отчет - лидок.docx
#
14.09.201993.03 Кб5Отчет 1 лаба.docx
#
18.11.20191.4 Mб84отчет готовый2.doc
#
01.05.20252.02 Mб0Отчет о исследовании влияния ЗГК Лошади.doc
#
09.09.201965.54 Кб6Отчет ПЗ 03 спец. Э.doc
#
14.05.201568.77 Кб16Отчет по 5ой программе.docx