В javascript (или jscript, версии javascript фирмы microsoft) есть две особенности: первая — что в нем поддерживаются только функции, вторая — что этот язык понятен для всех броузеров. Самый привычный способ передачи события элементу — это объявление названия функции в теге элемента. Заметим, что нам нужно записать не просто «myclickcode», а «myclickcode()» для соответствия синтаксической конструкции javascript. В html документе это будет выглядеть так:
<h2 onclick="myclickcode()"> Текст, реагирующий на событие </h2> ... <script language=javascript> function myclickcode() { alert('Ты щелкнул Текст!'); } </script>
Это хорошо для работы с отдельными элементами, а как поступить при необходимости обработки событий целым документом? В этом случае указатели на обработчики событий можно поместить в тег <body>:
<body onmousemove="mymousemovecode()" onclick="myclickcode()>
Кроме того, можно подключить код обработки внутри тега элемента. При этом используется такая конструкция языка jscript:
<h2 language=jscript onclick="alert('Ты щелкнул Текст!');"> Текст, реагирующий на событие </h2>
Так как jscript является языком броузера, определенным по умолчанию, можно опустить атрибут «language=jscript», сделав конструкцию более компактной:
<h2 onclick="alert('Ты щелкнул Текст!');"> Текст, реагирующий на событие </h2>
И, наконец, можно создать отдельные секции <script> для каждого события, которое нам нужно обработать:
<h2 id=myheading>Текст, реагирующий на событие</h2> ... <script language=javascript for=myheading event=onclick> alert('Ты щелкнул Текст!'); </script>
Обработка событий, связанных с окнами, в языке javascript.
Мы рассмотрели, как размещать объявления об обработке событий, таких, как onmousemove в теге документа <body> для обеспечения реакции на событие, произошедшее на уровне объекта document. Другая ситуация — обработка события на уроне window. В internet explorer можно поместить такие инструкции в тег открытия <html>:
<html onmousemove="mymousemovecode()" onclick="myclickcode()"> ... </html>
Существует еще один прием обозначения обрабатывающей событие функции в строке с идентификатором элемента и события. В этом случае название события и имя элемента разделяют точкой. Но при этом надо иметь в виду, что эти методы не являются общепринятыми для обработки событий. Просто они работают, потому что сами функции заданы в свойствах объекта element:
<h2 id=myheading>Текст, реагирующий на событие</h2> ... <script language=javascript> function myheading.onclick() { alert('Ты щелкнул Текст!'); } </script>
Этим методом пользуются для обработки событий, связанных с основными объектами броузера — document и window:
<script language=javascript> function window.onload() { alert('Загрузка страницы завершена.'); } </script>
Отмена действия события.
Некоторые события, такие как onsubmit, позволяют управлять тем, как броузер поведет себя в ответ на них, возвращая контрольное значение. Рассмотрим пример с формой, содержащей единственное текстовое поле email, и кнопку submit (Отправка):
<form id=myform onsubmit="return checkaddress()" action="http://www.some-web.com/file.cgi"> <input type=text id=email> <input type=submit> </form> <script language=javascript> function checkaddress() { straddress = document.forms["myform"].elements["email"].value; if (straddress.indexof("@") != -1) // содержит символ "@" return true else } alert('Проверьте правильность e-mail адреса!'); return false } } </script>
Здесь для поиска символа @ в строке, введенной пользователем в форме, используется функция «indexof()». Если в строке нет такого символа, функция возвратит значение -1. В этом случае подразумевается, что это не может быть корректный e-mail. Об этом выдается сообщение, и отправка отменяется передачей значения false. Нами было использовано ключевое слово return в атрибуте элемента onsubmit, так что результат возвращается в ту часть броузера, которая занимается отправкой.
В приведенном примере видно, как используется броузерная модель для получения текста из текстового поля. Искомая строка является свойством value элемента email. Эта форма — часть коллекции elements формы myform, хранящейся в коллекции forms объекта document.
Вместо возвращения значения собственно функцией мы можем отменить действие, по умолчанию назначенное для данного события, с помощью свойства returnvalue объекта event. Мы рассмотрим это в следующих выпусках.
Первоначально разработанный в 1995 году Бренданом Эйком (Brendan Eich), работавшим в Netscape, в сотрудничестве с Sun Microsystems, язык сценариев Javascript является объектно-ориентированным языком. Изначально Javascript предназначался для разработки клиентских приложений в веб-браузере с целью расширения пользовательского интерфейса и разработки динамических веб-страниц. В 1997 году язык был стандартизирован Европейской ассоциацией производителей компьютеров (European Computer Manufacturers Association, ECMA) под названием ECMAScript (ECMA-262). Internet Explorer, начиная с версии 3.0 (1996), поддерживает диалект ECMAScript, названный JScript. Как любой живой язык, JScript развивался, и Internet Explorer 8.0 использует версию языка JScript 5.8, основанную на 3 издании стандарта ECMA-262. В целом, диалекты ECMAScript достаточно близки, по этой причине Javascript и JScript часто считаются синонимами.
Несмотря на сходство названий, Javascript не является родственником Java, оба языка наследовали свой синтаксис от языка C.
Характеристики языка Javascript
Javascript поддерживает синтаксис структурного программирования языка C, включая ветвление (инструкции if…, if…else… и switch ) и циклы (инструкции for и while ).
Типы данных в Javascript связаны со значениями, а не с переменными. Это означает, что любой переменной может быть присвоено значение одного типа (например, число), затем другого типа (например, строка). Такое поведение иногда называют также нестрогой типизацией.
Javascript почти полностью построен как объектный язык. Фактически, объекты Javascript – это ассоциативные массивы; запись obj.x = 10 эквивалентна obj[«x»] = 10 и obj[0] = 10 (полагая, что x является первым по счету свойством объекта obj ). Свойства объекта и их значения могут добавляться, изменяться и удаляться динамически.
Функция eval() позволяет выполнять инструкции, заданные в виде строки.
Функции в Javascript являются объектами первого класса, то есть могут присваиваться переменным, передаваться в другие функции в качестве аргумента и возвращаться функциями.
Внутренние функции (определенные внутри других функций) создаются, когда выполняется внешняя функция, и переменные внешней функции доступны для внутренней даже когда внешняя функция завершила работу.
Javascript не использует понятия классов. Наследование осуществляется через механизм прототипов ( prototype ), то есть клонирования существующих объектов.
Функции могут выступать в качестве конструкторов объектов. В этом случае ключевое слово this относится к создаваемому объекту.
В Javascript нет различий между определением функции и метода. Различие возникает, когда функция вызывается как метод объекта. В этом случае ключевое слово this относится к объекту, чьим методом оказывается функция.
Функции в Javascript могут принимать произвольное число аргументов, в том числе и не описанные при определении функции. Доступ к ним осуществляется как через формальные параметры функции, так и через свойство arguments функции.
Вставка сценария в HTML-документ
Сценарий Javascript вставляется в HTML-документ при помощи тэга script.
<script type="text/javascript"> document.write('Hello from Javascript'); </script>
Сценарий может также храниться в отдельном файле.
<script type="text/javascript" src="myscript.js"></script>
Атрибут language элемента script описывает используемый язык сценариев (например, Javascript). Этот атрибут считается устаревшим и не рекомендуется к использованию.
Элементы script могут присутствовать в неограниченном числе внутри элементов head и body HTML-документа.
Переменные и типы данных
Javascript во многом наследовал синтаксис языка C, а это значит, что строчные и заглавные буквы в идентификаторах различаются. Нет необходимости специально объявлять переменные, хотя это является хорошей программистской практикой. Первое появление переменной автоматически является ее объявлением. Имя переменной должно начинаться с буквы или символа подчеркивания (_), последующими символами могут быть буквы, цифры и символ подчеркивания (_). Нельзя использовать в качестве имен переменных зарезервированные слова, такие как if, for, function, new. Для объявления переменной может использоваться необязательное слово var. Его использование обязательно только в том случае, если переменная объявляется внутри функции и пределом видимости этой переменной должна быть эта функция. Переменные, объявленные без использования var, являются глобальными. Примеры правильного объявления:
var test; //объявление без присвоения. Значение переменной undefined a = 2; var b2 = 3; sum_a_b2 = a + b2;
Примеры недопустимых имен:
var 3piglets // начинается с цифры var Smith&Wesson // символ & не допускается var for // for является зарезервированным словом
В Javascript есть три простых типа данных: строка ( String ), число ( Number ) и логический тип ( Boolean ), два составных типа: объект ( Object ) и массив ( Array ) и два специальных типа: пустое значение ( Null ) и неопределенное значение ( Undefined ). Тип данных ассоциирован не с именем переменной, а с ее значением.
Строковые данные – любая цепочка символов, заключенная в одиночные (‘) или двойные кавычки («). Одиночные кавычки могут содержаться в строках, заключенных в двойные кавычки и наоборот.
"простая строка" 'еще одна строка' "don't worry"
Числовые данные подразделяются на целые и числа с плавающей запятой (фактически, точкой), но внутренним представлением данных всегда является число с плавающей запятой. Целые числа могут быть представлены в десятеричной, восьмеричной и шестнадцатеричной форме. Числа с плавающей запятой могут записываться в степенной форме.
Число | Десятичное представление | Описание |
---|---|---|
0.0001, .0001, 1e-4, 1.0e-4 | 0.0001 | Разные представления числа с плавающей запятой |
125 | 125 | Целое |
0377 | 255 | Восьмеричное представление целого |
0378 | 378 | Десятичное целое. Восьмеричное представление допускает лишь цифры от 0 до 7 |
0xff | 255 | Шестнадцатеричное представление |
0x3e7 | 999 | Шестнадцатеричное представление |
00.001 0x0.001 | — | Ошибка компиляции. Восьмеричные и шестнадцатеричные числа могут быть только целыми |
Данные логического (Boolean) типа принимают лишь одно из двух значений: true (истина) или false (ложь).
y = (x == 10); //истина, если x равно 10
Чаще всего логические данные или выражения, возвращающие логические данные, используются в управляющих структурах:
if (x == 10) a = c; // выполняется, если x равно 10 else a = b; // выполняется в противном случае
В качестве логического может быть использовано любое выражение, например, число, строка, массив или объект, при этом, если значение равно 0, пустой строке, пустому (не содержащему элементов) массиву, пустому объекту ( Null ) или неопределенному значению ( undefined ), то условие оценивается как false (ложь), в противном случае как true (истина). Например, две следующие конструкции эквивалентны.
if (x != 0)//если x не равен 0 a = 1; if (x) a = 1;
Массив представляет собой данные, доступ к элементам которых осуществляется по индексу. Массивы в Javascript создаются следующим образом:
var a = new Array();// создает новый пустой массив var b = new Array(N);//где N – положительное целое. //Создает массив из N пустых элементов var c = new Array(elem1, elem2 ...); //создает массив из перечисленных элементов. //Элементы должны существовать заранее. var d = [elem1, elem2 ...]; //создает массив из перечисленных элементов var e = [];// создает новый пустой массив
Индексация массивов всегда начинается с нуля (0), то есть последний существующий элемент имеет индекс на 1 меньше длины массива.
document.write(c[0]); //будет выведен первый элемент массива c a[0] = 1; // присвоение значения первому элементу массива a a[10] = 10; // присвоение значения одиннадцатому элементу массива a // элементы 1 – 9 заполняются пустыми значениями. // длина массива a.length равна 11 document.write(a[10]); // печатает 10 document.write(a[11]); //печатает пустую строку и не меняет длину массива
Нет необходимости переопределять длину массива. Присвоение значения несуществующему элементу массива автоматически создает этот элемент (если его не было) и заполняет массив пустыми элементами между последним существовавшим и вновь добавленным элементом.
Одним
из основных недостатков языка HTML
является пассивность и статичность
документов на этом языке, то есть
невозможность алгоритмического
построения содержимого документа в
соответствии с программой, реализующей
алгоритм, или в зависимости от действий
пользователя, просматривающего документ.
Для преодоления этих недостатков в
язык HTML
введена поддержка сценариев – программ,
загружаемых с сервера вместе с документом
HTML
и выполняемых навигатором при просмотре
этого документа. Существует несколько
языков, на которых может быть написан
сценарий. Наибольшей популярностью
пользуется язык JavaScript
компании Netscape,
первой реализовавшей поддержку сценариев
стороны клиента в своем браузере.
Поскольку
программа-сценарий выполняется
пользовательским агентом на машине
клиента, то данную технологию следует
отнести к технологиям стороны клиента.
JavaScript,
как и другие языки для встраивания
сценариев в HTML-документы, имеет
программный интерфейс для доступа
навигатору. Навигатор, как правило,
имеет панель инструментов, строку ввода
адреса, рабочую область и строку
состояния. Панель инструментов, как
минимум, содержит кнопки
«Back», «Forward», «Stop», «Reload»
и «Home».
Используя язык JavaScript, можно управлять
содержимым рабочей области и строки
состояния, а также открывать новые окна
навигатора, возможно, без панели
инструментов и строки ввода адреса.
Кроме того, можно вызывать простейшие
диалоговые панели с кнопками и полями
ввода.
Для
доступа к компонентам в языке JavaScript
используются объекты. Под объектом
понимается некоторая программная
абстракция, в которой инкапсулированы
свойства (данные) и методы (код) некоторого
реального объекта. В языке JavaScript
между объектами не устанавливается
отношения наследования. Таким образом,
JavaScript не является объектно-ориентированным
языком.
С
понятием объекта связано понятие
класса. Каждый объект принадлежит
определенному классу. Например, каждый
объект «окно» принадлежит классу
«окно» (window).
Можно сказать, что каждое конкретное
окно является переменной типа window
или экземпляром класса window.
С этой точки зрения, понятие класса
близко к понятию типа.
В
языке JavaScript
имеется возможность создавать собственные
новые классы, однако данная возможность
используется редко из-за малой гибкости
(по сравнению с объектно-ориентированными
языками) при создании интерфейса нового
класса. Можно определить JavaScript как язык
для доступа к некоторой объектной
библиотеке.
С
точки зрения лексики и синтаксиса, язык
JavaScript
похож на языки C++
и Java.
Рассмотрим
следующие элементы языка JavaScript:
типы;
операции;
операторы;
встроенные
функции;
объекты
и классы.
Типы
языка JavaScript, не соответствующие никаким
классам, – числовой и логический, будем
условно называть number и bool. Значения
типа number – целые и вещественные числа.
Значения типа bool соответствуют числовым
значениям 0 и 1. Константы языка JavaScript
могут быть числовыми и строковыми.
Последние имеют тип, соответствующий
классу string. Значения остальных типов
(bool и других классов) не представляются
в виде констант, но могут возвращаться
функциями и методами. Следует еще раз
отметить, что слов number и bool в JavaScript не
существует. Это условное обозначение
для указания типов свойств, параметров
и возвращаемых значений функций и
методов.
В
JavaScript имеется ряд операций аналогичных
операциям языка C: ‘+’, ‘–’, ‘*’, ‘/’, ‘%’, ‘<<‘,
‘>>’, ‘+=’, ‘–=’. Операция ‘+’ для строк
перегружена и означает конкатенацию.
Основные
операторы JavaScript перечислены в табл. 5.
Таблица |
|
Операторы |
|
Оператор |
Описание |
var |
Объявление |
if else |
Оператор |
while |
Цикл |
for {…} |
Цикл |
for |
Цикл |
break |
Оператор |
continue |
Оператор |
function |
Определение |
Встроенные
функции JavaScript перечислены в табл. 6.
Таблица |
|
Встроенные |
|
Функция |
Описание |
string |
Перевод |
string |
Перевод |
number parseFloat(string |
Перевод |
number parseInt( string [number ) |
Перевод |
Bool |
Проверка |
string |
Выполнить |
Здесь
и далее для объявления функций, свойств
и методов применен C-подобный стиль:
тип возвращаемого значения, идентификатор
(название), список параметров в круглых
скобках. Необязательные параметры
перечислены в квадратных скобках. В
качестве типа указывается имя класса
или одно из слов number или bool.
Объекты
JavaScript
описывают интерфейс доступа к документу
в навигаторе и инкапсулируют его
свойства и методы.
В
табл. 7 приведены свойства и методы
основных классов JavaScript.
Таблица |
|
Классы |
|
Свойства |
Описание |
string: |
|
number |
Длина |
string |
Большой |
string |
Маленький |
string |
Полужирный |
string |
Наклонный |
string |
Перечеркнутый |
string |
Моноширинный |
string |
Нижний |
string |
Верхний |
string |
Мигающая |
string |
Строчные |
string |
Заглавные |
string |
Установить |
string |
Установить |
string |
Превращает |
string |
Превращает |
string |
i-й |
number |
Позиция |
number |
Позиция |
string |
Подстрока |
window: |
|
string |
Название |
string |
Содержимое |
string |
Строка |
number |
Число |
frame[] |
Массив |
Продолжение |
|
Свойства |
Описание |
window |
Ссылка |
window |
Ссылка |
window |
Родительское |
window |
Ссылка |
document |
Документ |
frame |
Фрейм |
location |
Местоположение |
window |
Открыть |
close() |
Закрыть |
timeout |
Установить |
clearTimeout(timeout |
Удалить |
alert(string |
Диалоговая |
bool |
Диалоговая |
string |
Диалоговая |
frame: |
|
string |
Название |
number |
Число |
frame[] |
Набор |
frame |
Ссылка |
frame |
Ссылка |
frame |
Ссылка |
window |
Ссылка |
timeout |
Установить |
clearTimeout (timeout |
Удалить |
Продолжение |
|
Свойства |
Описание |
location: |
|
string |
Поле |
string |
Поля |
string |
Поле |
string |
URI |
string |
Поле |
number |
Поле |
string |
Поле |
string |
Параметры |
document: |
|
string |
Заголовок |
string |
URI |
Date |
Дата |
string |
Цвет |
string |
Цвет |
string |
Цвет |
string |
Цвет |
string |
Цвет |
anchor |
Якорь |
link |
Ссылка |
history |
Набор |
form |
Форма |
anchor[] |
Массив |
link[] |
Массив |
form[] |
Массив |
string |
URI |
open([string |
Начать |
close() |
Завершить |
write(…) |
Вывести |
writeln(…) |
Вывести |
history: |
|
number |
Число |
back() |
Вернуться |
forward() |
Загрузить |
go(number |
Перейти |
go(string |
Перейти |
static |
|
number |
E |
Продолжение |
|
Свойства |
Описание |
number |
ln(2) |
number |
ln(10) |
number |
log2(e) |
number |
log10(e) |
number |
|
number |
1/sqrt(2) |
number |
sqrt(2) |
number |
Абсолютное |
number |
Арккосинус |
number |
Арксинус |
number |
Арктангенс |
number |
Наименьшее |
number |
Косинус |
number |
Экспонента |
number |
Наибольшее |
number |
Натуральный |
number |
Максимум |
number |
Минимум |
number |
ab |
number |
Случайное |
number |
Синус |
number |
Квадратный |
number |
Тангенс |
Date: |
|
Date() |
Инициализация |
static |
Возвращает |
static |
Возвращает |
number |
Число |
number |
День |
number |
Часы |
number |
Минуты |
number |
Месяц |
number |
Секунды |
number |
Число |
number |
Смещение |
Окончание |
|
Свойства |
Описание |
number |
Год, |
setDate(number |
Установка |
setHours(number |
Установка |
setMinutes(number |
Установка |
setMonth(number |
Установка |
setSeconds(number |
Установка |
setTime(number |
Установка |
setYear(number |
Установка |
string |
Преобразование |
string |
Преобразование |
Array: |
|
Array() |
Пустой |
Array(number |
Массив |
Array(a0, |
Массив инициализированными |
number |
Число |
string |
Объединение |
reverse() |
Изменение |
sort() |
Сортировка |
Image: |
|
Image() |
Пустое |
Image(number |
Пустое |
string |
URI |
В
объектно-ориентированном анализе при
проектировании и описании объектных
библиотек чаще всего рассматриваются
иерархии двух видов: иерархия классов
(иерархия «is-a»)
и иерархия объектов (иерархия «part-of»).
В иерархии классов отображаются
отношения наследования между классами.
Поскольку в JavaScript
не существует наследования, то нет и
иерархии данного типа. В иерархии
объектов отображаются отношения
агрегации (то есть отношения целого и
части) между классами и объектами. На
рис. 1 приведена иерархия объектов
JavaScript.
Для
доступа к свойствам и методам объекта
применяется операция «.»:
<объект>.<свойство>
<объект>.<метод>(<параметры>)
Некоторые
свойства и методы класса могут быть
статическими. Такие свойства относятся
не к конкретному объекту, а к классу в
целом. Можно получить доступ к этим
свойствам и методам, даже не имея доступа
ни к одному из объектов класса. В этом
случае операция «.» применяется
не к объекту, а к классу:
<класс>.<свойство>
<класс>.<метод>(<параметры>)
Класс,
в котором все свойства и методы являются
статическими, называется статическим.
Статические свойства, методы и классы
в табл. 7 приведены со словом «static»
перед идентификатором.
Методы
некоторых классов могут иметь то же
имя, что и класс. Такие методы называются
конструкторами и используются для
создания динамических объектов при
помощи операции new,
единственным аргументом которой
является конструктор с параметрами.
Массивы
в языке JavaScript
являются объектами некоторого
предопределенного класса Array.
В отличие от C
и C++
массивы в JavaScript
являются динамическими, то есть размер
массива автоматически увеличивается
при присваивании значения не существующему
элементу массива. Индексы массива
нумеруются с нуля. Для доступа к элементам
массива используются квадратные скобки.
Так же как и обычные переменные, элементы
массива не имеют типа. Тип имеют значения
элементов. В различных элементах массива
могут храниться значения различных
типов.
В
языке JavaScript
имеется возможность определять
собственные функции. Определение
функции в JavaScript
имеет следующий вид:
function
<идентификатор>(<параметры>) { …
}
Идентификатор
функции – это имя, по которому функция
будет вызываться в сценариях JavaScript.
Параметры указываются без типов и
разделяются символом «,».
Пользовательские функции в JavaScript
не могут возвращать значения, в отличие
от встроенных функций.
Для
размещения сценариев JavaScript
внутри документов HTML
используется элемент SCRIPT:
<SCRIPT
language=l src=s defer></SCRIPT>
Начальный
и конечный тэги обязательны. Атрибут
language
указывает язык, на котором написан
сценарий. Для сценариев на языке
JavaScript
этот атрибут должен принимать значение
«JavaScript».
В атрибуте src
указывается URI
файла со сценарием. Атрибут defer
указывается, если сценарий не осуществляет
вывод на экран при помощи методов write
и writeln
объекта document
для ускорения формирования содержимого
страницы.
Соседние файлы в предмете Программирование для Web
- #
- #
- #
- #