|
div.main {margin-left: 20pt; margin-right: 20pt}
Создание сценариев в Navigator
Использование JavaScript в HTML
Создание скриптов обработки событий
Советы и методы
Использование JavaScript в HTML
Чтобы запускать скрипты, написанные на языке JavaScript вам понадобится браузер, способный работать с JavaScript - например Netscape Navigator или Microsoft Internet Explorer (MSIE). С тех пор, как оба этих браузера стали широко распространеными, множество людей получили возможность работать со скриптами, написанными на языке JavaScript. Несомненно, это важный аргумент в пользу выбора языка JavaScript, как средства улучшения ваших Web-страниц.
Перед изучением языка JavaScript вы должны познакомиться с основами другого языка - HTML. При этом, возможно, Вы обнаружите, что много хороших средств диалога можно создать, пользуясь лишь командами HTML.
Скрипт-программа размещается непосредственно на HTML странице, как правило внутри тега HTML файла.Она загружается в браузер вместе с файлом.
А именно JavaScript может быть внедрен в HTML документе двумя способами:
Как утверждение и функция, использующие тег SCRIPT.
Как обработчики результата, использующие тег HTML.
Тег SCRIPT
Сценарий, внедренный в web-страничу,использующий тег SCRIPT имеет следующий формат:
<SCRIPT>
JavaScript statements...
</SCRIPT>
Необязательный атрибут LANGUAGE определяет язык создания сценария следующим образом:
<SCRIPT LANGUAGE="JavaScript">
JavaScript statements...
</SCRIPT>
В документе HMTL теги <SCRIPT>, и закрывающий тег </SCRIPT> могут содержать любое количество утверждений
JavaScript.
Чтобы наглядно увидить как пишутся скрипты на языке JavaScript рассмотрим простой пример скрипт-программы расположенной на сторанице HTML:
Скрипт-программа
В этом примере внутри тега <BODY> указано событие ONLOAD, по которому скрипт-программа запускается сразу после загрузки. Событиями также могут являться щелчком или перемещение указателя мышки.
Скрипты могут размещаться внутри области комментария, чтобы ваше утверждение JavaScript не просматривалось старыми окнами браузера, которые не распознают JavaScript. Тогда весь сценарий спрятан в HTML- страницу тегами комментария:
<!-- Begin to hide script contents from old browsers.
// End the hiding here. -->
Определение и запрос функций
JavaScript загружается в браузер вместе с файлом. Запуск программы присходит тогда, когда совершается некоторое событие, на которое указано в файле. Функции сохранены, но не выполнены. Они будут выполнены тогда, когда в странице указано события его выполнения.
Важно понять разность между определением функции и запроса функции. Определение функции просто называет функцию и определяет, что и когда делать. Запрос функции фактически выполняет указанные действия в определении функции. Следующий пример демонстрирует скрипт с функцией и комментариями:
Документ готов.
Тег HTML
Вы должны определить функции на странице в теги HTML документа. Так как HTML грузится сначала, что гарантирует функции загрузиться прежде, чем пользователь вызовет функцию.
Пример скрипта с двумя функциями:
Thanks.
Кавычки
Использeйте оденочные ковычки ('), чтобы разграничить литералы ряда так, чтобы скрипты могли отличать литералы от атрибутов, расположенные в двойных кавычках. В предыдущем примере, функция содержит литерал 'center' внутри атрибута, находящийся в двойных кавычках. Рассмотрим другой пример:
Создание скриптов обработчиков событий
Приложениями JavaScript в Навигаторе мы в основном управляем событиями. События (Events)- это действия, которые происходят, обычно в результате чего - нибудь, что делает пользователь (например, щелчок кнопки мышки). Имеется определенный набор событий, которые Навигатор распознает. Вы можете определить обработчики результатов скриптов, которые автоматически выполняются, когда происходит результат.
Обработчик Результата записываются в документ как атрибут тега HTML, к которому вы приписываете код JavaScript, для выполнения. Общий вид:
Где TAG - это тег HTML, и eventHandler - имя обработчика результата.
Например вы создали функцию JavaScript, и назвали ее compute. Вы можете заставить Навигатор выполнять эту функцию, когда пользователь нажимает на кнопку,в которой к onClick приписан обработчик результата кнопки:
Вы можете помещать любые утверждения JavaScript внутри ковычек onClick. Эти утверждения будут выполнены, когда пользователь нажмет на кнопку. Если Вы хотите включить больше чем одно утверждение, отдельные утверждения записываются через точкой с запятой (;).
Вообще, это - хорошая идея определить функцию для ваших обработчиков результата потому что:
Это делает ваш код мобильным, так как вы можете использовать ту же самую функцию во многих различных местах.
Это делает ваше утверждение более легким для чтения.
В этом примере используется this.form, чтобы обратиться к текущей форме. Ключевое слово обращается к текущему объекту - в вышеупомянутом примере, объекту кнопки. Затем конструкция this.form обращается к форме, содержащей кнопку. Там же, onClick обработчик результата - запрос к функции compute(), с this.form, текущей формой, как параметр функции.
События обращаются к тегам HTML следующим образом:
События Focus, Blur, Change: text fields, textareas, и selections
События Щелчка: buttons, radio buttons, checkboxes, submit buttons, reset buttons, links
Событие Select: text fields, textareas
Событие MouseOver: links
Если события обращаются к тегам HTML, то для этого вы можете определять обработчик событий. Вообще, обработчик событий имеет имя события, прещедствующее "on". Например, обработчик результата для результата Focus - onFocus.
Много объектов также имеют методы, которые подражают событиям. Например, кнопка имеет метод щелчка, который подражает нажимаемой кнопке. Заметьте: методы подражаемые событиям не вызывают обработчика событий. Так, например, метод щелчка не вызывает обработчика результата onClick. Однако, Вы можете всегда вызывать обработчик результата (например, Вы можете вызывать onClick явно в сценарие).
Метод
Происходит когда ...
Обработчик Результата
| Blur |
Пользователь удаляет строку фокус из элемента формы |
OnBlur |
| click |
Пользователь нажимает на элемент формы или link |
OnClick |
| change |
Пользователь изменяет значение text, textarea, или select элемента |
OnChange |
| Focus |
Пользователь передает фокус указанному элементу формы |
OnFocus |
| load |
Пользователь загружает страницу в Navigator |
OnLoad |
| Mouseover |
Происходит, когда пользователь помещает указатель мышки над гиперссылкой |
OnMouseOver |
| Select |
Пользователь выделяет область ввода указанного элемента формы |
OnSelect |
| Submit |
Пользователь подчиняет форму |
OnSubmit |
| Unload |
Пользователь выходит из страницы |
OnUnload |
Приведем сценарий "калькулятор" с формой и атрибутом обработчика событий.
function compute(form) {
if (confirm("Вы уверены?"))
form.result.value = eval(form.expr.value)
else
alert("Please come back again.")
}
Введите выражение:
Результат:
Сценарий с формой и атрибутом обработчика события внутри тега BODY.
Пожалуйста введите маленькое число:
Советы и методы
Этот раздел описывает различные полезные методы создания сценария.
Модифицирование Страниц
Результаты JavaScript в Navigator вызываются из вершины загруженной страницы. Если вы хотите что - нибудь форматировать,то вы не можете изменить это без перезагрузки страницы. В настоящее время, Вы не можете модернизировать частную часть страницы без модифицирования всей страницы. Хотя, вы можете модернизировать "sub-window" (незначительную часть окна) в фрейме отдельно.
Печать
Вы не можете в настоящее время напечатать вывод, созданный с JavaScript. Например, если у вас есть следующее в странице:
This is some text.
document.write(" And some generated text")
И вы напечатали его, то вы получите следующее
даже если вы видели бы обе экранные линии.
Использование ковычек
Убедитесь, что бы чередовали двойные котировки с одиночными ковычками. Так как обработчики событий в HTML должны быть расположены в кавычках, вы должны использовать одиночные ковычки, чтобы разграничить аргументы. Например
В качестве альтернативы, вы можете выйте из ковычек, предшествуя им наклонной чертой влево ().
Определение Функций
Хорошо определять все ваши функции в HEAD вашей HTML страницы. Потому, что все функции будут определены прежде, чем любое содержание показано. Иначе, пользователь может выполнять какое - нибудь действие, в то время как страница все еще загружается, которое вызывает обработчик событий и вызывает неопределенную функцию, ведя к ошибке.
Создание Массивов
Массив - упорядоченное множество значений, на которые вы ссылаетесь через имя массива и индекс. Например, у вас есть массив, с именем emp, который содержит имена служащих, индексированные их номером служащего. Так emp [1] будет служащий номер один, emp [2] служащий номер два, и так далее.
JavaScript не имеет явный тип данных массива, но из-за близкой связи между массивами и объектами свойств (смотрите Объектная Модель JavaScript). Вы можете определять тип объекта массива, следующим образом:
function MakeArray(n) {
this.length = n;
for (var i = 1; i
|
