Файл: Программирование клиентской части Интернет приложений с использованием JavaScript.pdf
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 01.12.2023
Просмотров: 98
Скачиваний: 2
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
СОДЕРЖАНИЕ
51
Объект Math
В отличие от других объектов этот объект создавать не надо — он создается интерпретатором автоматически при загрузке документа со сценарием в браузер.
Поэтому обращение к его методам и свойства выполняются с использованием его имени Math:
Math.PI
// число
π
Math.abs(x) // вычисление абсолютного значение
Методы объекта Math
Метод
Описание
abs(x)
Абсолютное значение sin(x), cos(x), tan(x)
Стандартные тригонометрические функции; аргумент задается в радианах acos(x), asin(x), atan(x)
Обратные тригонометрические функции exp(x), log(x)
Экспоненциальная функция и функция натурального логарифма ceil(x)
Наименьшее целое, большее или равное значению аргумента floor(x)
Наибольшее целое, меньшее или равное значению аргумента min(x,y), max(x,y)
Наибольшее или наименьшее значение двух аргументов pow(x,y)
Показательная функция: pow(x,y)=x y
round(x)
Округление аргумента до ближайшего целого sqrt(x)
Квадратный корень atan2(y,x)
Возвращает угол в радианах между осью Х и направлением на точку (х,у). random()
Возвращает случайное число между 0 и 1.
Генератор случайных чисел запускается автоматически при загрузке ядра JavaScript.
1 2 3 4 5 6 7 8 9 10 11
Абзац с атрибутом id='par1'.
69 err.number = 801 err.description = "Не задан второй параметр.";
// Генерирование ошибки throw err break;
}
// Возвращаемое значение функции return x+y;
}
// Обращение к функции add() с обработкой возможной ошибки try{
// функция add() сгенерирует ошибку с номером 801 alert(add(5))
} catch(e){ alert(e.description+"\n"+e.number)
}
Упражнения
1. Добавить метод propList() (пример 10) к прототипу объекта Object, а также добавить к прототипу этого же объекта свойство list со значением "Добавленное к прототипу Object". Проверить на объектах String, Date, Number, Function, Array,
Boolean, действительно ли будут добавляться к экземплярам указанных объектов добавленные к прототипу объекта Object метод и свойство.
2. Добавить к прототипу объекта Array метод вычисления максимального элемента массива и посмотреть его работу на экземплярах объектов этого типа, содержащими только числовые элементы, только строковые и смешанные (числа и строки).
3. Создать массив, элементы которого хранят ссылки на все 6 типов встроенных объектов JavaScript. Случайным образом "перемешать" его элементы. После этого распечатать отчет о том, какие объекты хранятся в его элементах, начиная с первого.
70 4. Реализовать нижеприведенный сценарий. Проверить доступность свойств 0, 1,
2, 3 массива. Объяснить результаты. Поэкспериментировать с другими типами встроенных объектов. var a = new Array("apple", "banana", "cactus"); a["q"] = 9 document.write(a.propertyIsEnumerable("q"))
5. Отобразить на странице HTML таблицу, показывающую результаты выполнения методов toString и valueOf всех встроенных объектов JavaScript.
6. Разработать страницу HTML со встроенным сценарием, который получает введенный пользователем код JavaScript в текстовом поле страницы и выполняет его.
Получить строку из текстового поля страницы HTML
можно, используя свойство value объекта с идентификатором, равным значению атрибута name текстового поля fromText = txt1.value
Интерпретацию строки можно организовать, используя кнопку
7. Написать сценарий, который кодирует строку, содержащую все небуквенные символы клавиатуры тремя возможными способами и отобразить результаты в виде таблицы:
Символ escape encodeURI
encodeURIComponent
%20
%20
%20
`
%60
%60
%60
%7E
!
%21
!
!
@
@
@
%40
#
%23
#
%23
Урок 9. Создание собственных объектов
Объектная модель JavaScript отличается от объектных моделей других объектно- ориентированных языков тем, что в ней объекты создаются на основе прототипов.
Для создания объектов в JavaScript можно использовать объектный литерал или специальным образом написанную функцию — конструктор объекта.
71
Объектный литерал представляет собой заданную в фигурных скобках последовательность свойств объекта и их значений. Свойства и значения задаются парами, разделенными символом :. Таким образом, объектный литерал имеет следующий синтаксис:
{prop1:value1, ..., propN:valueN}
Значением свойства может быть любой поддерживаемый JavaScript тип данных, включая объект: var Basil = {name:"Basil",surname: "Ivanoff", university:{name:"PGU",faculty:"AM",cours:5}}
В качестве значения может снова выступать объектный литерал. В этом случае "точечная" нотация может быть продолжена для получения соответствующего свойства объекта, являющегося свойством созданного объекта. alert(Basil.university.name)
Если в качестве значения свойства указывается ссылка на объект-функцию, то такое свойство на самом деле является методом создаваемого объекта: var Cat = {name:"Mourik", color:"red", voice:mew}; function mew(){ alert("mew... mew...")
}
Вызов метода осуществляется по всем правилам вызова функций JavaScript — указывается имя метода и при необходимости передаются ему фактические параметры:
Cat.voice();
Но реально будет вызвана и выполнена функция, реализующая указанный метод
(в нашем примере mew()).
Второй способ позволяет быстро создавать экземпляры объекта определенного типа через специальную функцию-конструктор. Если с помощью объектного литерала мы непосредственно создаем экземпляр объекта и сохраняем в некоторой переменной ссылку на него, то здесь мы сначала "описываем" в конструкторе его свойства и методы, а потом операцией new создаем экземпляры этого типа объекта:
// Объявление конструктора function CatWithoutOwner(sName, sColor) { this.name = sName this.color = sColor
}
// Создание экземпляра myCat = new CatWithoutOwner("Mourik", "red")
Ключевое слово this в конструкторе предназначено для ссылки на конкретный экземпляр объекта, создаваемый операцией new. (Если в функции используется ключевое слово this, то это обязательно конструктор объекта.)
Как и в случае с объектными литералами, свойства объекта, определяемые в его конструкторе, сами могут быть объектами:
72
// Конструктор объекта person function person(name, age) { this.name = name this.age = age
}
// создаем экземпляр объекта person alex = new person("Alex", 50)
// Конструктор объекта CatWithOwner function CatWithOwner(sName, sColor, sOwner) { this.name = sName this.color = sColor this.owner = sOwner
}
// Создает экземпляр объекта CatWithOwner cat = new CatWithOwner("Mourik", "red", alex)
// Отображаем имя владельца alert(cat.owner.name)
Отличительной особенностью объектной модели JavaScript является то, что после создания экземпляра объекта к нему можно добавлять новые свойства и методы, которые будут присущи только этому конкретному экземпляру. Для этого достаточно в точечной нотации указать имя нового свойства и присвоить ему значение: cat.age = 6; cat.voice = mew
Теперь у объекта cat появилось свойство age и метод voice, но только у этого объекта. Создаваемые конструктором CatWithOwner() объекты не будут иметь указанных свойства и метода.
Но в JavaScript можно (после написания конструктора) в любой момент (чтобы не менять конструктор) добавить свойства и метолы непосредственно к объектному типу. Это приведет к тому, что создаваемые после этого экземпляры объектов с помощью того же конструктора будут обладать добавленными свойствами и методами. Для этих целей используется свойство prototype "объектного типа", совпадающего с именем конструктора:
CatWithOwner.prototype.age = null
CatWithOwner.prototype.voice = mew
// теперь создаем экземпляр var cat1 = new CatWithOwner("Mourik", "red", alex)
// у него есть свойство age (значение null)
// и метод voice() alert(cat1.age); cat1.voice();
73
// можем изменить значение свойства age cat1.age = "red"
В конструкторе объекта вместо имен свойств (да и методов) можно использовать индексы: function CatWithOwner(sName, sColor, sOwner) { this[1] = sName this[2] = sColor this.owner = sOwner
} cat1 = new CatWithOwner("Mourik", "black", alex)
Теперь к свойствам, соответствующим имени и цвету, можно обращаться по индексу: alert(cat1[1])
Индексацию можно использовать и при доступе к свойствам, определенным с помощью имени, но в этом случае в качестве индекса берется строка с именем свойства: alert(cat1["owner"])
Для определения методов объекта в конструкторе следуем по схеме, аналогичной определению методов объекта в его конструкторе — определяем свойство, имеющее значением ссылку на функцию, реализующую создаваемый метод: function who() { var result = "Кот " + this.name + ",\nвладелец которого" + this.owner.name return result
}
// Новый конструктор объекта CatWithOwner function CatWithOwner(sName, sColor, sOwner) { this.name = sName this.color = sColor this.owner = sOwner this.whose = who
}
// Новый кот var cat2 = new CatWithOwner();
// Чей это кот alert(cat2.who())
В JavaScript не предусмотрено операции удаления объектов из памяти — они все удаляются либо по завершению работы сценария (закрытие страницы HTML в браузере), либо по завершению работы функции, в которой были созданы локальные объекты.
74
Существует операция delete, позволяющая удалить свойство объекта или элемента массива. Удалять можно только свойства созданных пользователем собственных объектов или свойства встроенных объектов, которые пользователь к ним добавил: myobj = new Number(); myoj["prop"] = "*********" delete myobj.prop
В завершение рассказа о пользовательских объекта, в конструкторах которых применялось ключевое слово this для создания ссылки на текущий экземпляр объекта, напомним еще об одном случае использования этого ключевого слова.
Его можно использовать в коде обработчика события элемента HTML для ссылки на объект, соответствующий этому элементу HTML:
Здесь ключевое слово this ссылается на поле ввода и ссылка на него передается в функцию validate(), вызываемую при возникновении события изменения содержимого этого поля.
Упражнения
1. Создать массив на основе объекта Object. Посмотреть, если у него свойство length
, присущее массивам, созданным с помощью объекта Array.
2. Распечатать свойство constructor для всех известных объектов JavaScript. С помощью свойства prototype объекта Object для всех создаваемых в сценарии объектов добавить метод propertiesList(), возвращающий массив, содержащий названия всех свойств объекта и их значения.
3. Разработать объект Collection, позволяющий хранить и выбирать любые объекты JavaScript с использованием строкового ключа. Реализовать методы этого объекта: add(ключ, объект) — добавление объекта в семейство
Collection, remove(ключ) — удаление объекта, count() — возвращает количество объектов в семействе, item(ключ) — возвращает объект по значению его ключа.
Абзац с атрибутом id='par1'.
69 err.number = 801 err.description = "Не задан второй параметр.";
// Генерирование ошибки throw err break;
}
// Возвращаемое значение функции return x+y;
}
// Обращение к функции add() с обработкой возможной ошибки try{
// функция add() сгенерирует ошибку с номером 801 alert(add(5))
} catch(e){ alert(e.description+"\n"+e.number)
}
Упражнения
1. Добавить метод propList() (пример 10) к прототипу объекта Object, а также добавить к прототипу этого же объекта свойство list со значением "Добавленное к прототипу Object". Проверить на объектах String, Date, Number, Function, Array,
Boolean, действительно ли будут добавляться к экземплярам указанных объектов добавленные к прототипу объекта Object метод и свойство.
2. Добавить к прототипу объекта Array метод вычисления максимального элемента массива и посмотреть его работу на экземплярах объектов этого типа, содержащими только числовые элементы, только строковые и смешанные (числа и строки).
3. Создать массив, элементы которого хранят ссылки на все 6 типов встроенных объектов JavaScript. Случайным образом "перемешать" его элементы. После этого распечатать отчет о том, какие объекты хранятся в его элементах, начиная с первого.
70 4. Реализовать нижеприведенный сценарий. Проверить доступность свойств 0, 1,
2, 3 массива. Объяснить результаты. Поэкспериментировать с другими типами встроенных объектов. var a = new Array("apple", "banana", "cactus"); a["q"] = 9 document.write(a.propertyIsEnumerable("q"))
5. Отобразить на странице HTML таблицу, показывающую результаты выполнения методов toString и valueOf всех встроенных объектов JavaScript.
6. Разработать страницу HTML со встроенным сценарием, который получает введенный пользователем код JavaScript в текстовом поле страницы и выполняет его.
Получить строку из текстового поля страницы HTML
можно, используя свойство value объекта с идентификатором, равным значению атрибута name текстового поля fromText = txt1.value
Интерпретацию строки можно организовать, используя кнопку
7. Написать сценарий, который кодирует строку, содержащую все небуквенные символы клавиатуры тремя возможными способами и отобразить результаты в виде таблицы:
Символ escape encodeURI
encodeURIComponent
%20
%20
%20
`
%60
%60
%60
%7E
!
%21
!
!
@
@
@
%40
#
%23
#
%23
Урок 9. Создание собственных объектов
Объектная модель JavaScript отличается от объектных моделей других объектно- ориентированных языков тем, что в ней объекты создаются на основе прототипов.
Для создания объектов в JavaScript можно использовать объектный литерал или специальным образом написанную функцию — конструктор объекта.
71
Объектный литерал представляет собой заданную в фигурных скобках последовательность свойств объекта и их значений. Свойства и значения задаются парами, разделенными символом :. Таким образом, объектный литерал имеет следующий синтаксис:
{prop1:value1, ..., propN:valueN}
Значением свойства может быть любой поддерживаемый JavaScript тип данных, включая объект: var Basil = {name:"Basil",surname: "Ivanoff", university:{name:"PGU",faculty:"AM",cours:5}}
В качестве значения может снова выступать объектный литерал. В этом случае "точечная" нотация может быть продолжена для получения соответствующего свойства объекта, являющегося свойством созданного объекта. alert(Basil.university.name)
Если в качестве значения свойства указывается ссылка на объект-функцию, то такое свойство на самом деле является методом создаваемого объекта: var Cat = {name:"Mourik", color:"red", voice:mew}; function mew(){ alert("mew... mew...")
}
Вызов метода осуществляется по всем правилам вызова функций JavaScript — указывается имя метода и при необходимости передаются ему фактические параметры:
Cat.voice();
Но реально будет вызвана и выполнена функция, реализующая указанный метод
(в нашем примере mew()).
Второй способ позволяет быстро создавать экземпляры объекта определенного типа через специальную функцию-конструктор. Если с помощью объектного литерала мы непосредственно создаем экземпляр объекта и сохраняем в некоторой переменной ссылку на него, то здесь мы сначала "описываем" в конструкторе его свойства и методы, а потом операцией new создаем экземпляры этого типа объекта:
// Объявление конструктора function CatWithoutOwner(sName, sColor) { this.name = sName this.color = sColor
}
// Создание экземпляра myCat = new CatWithoutOwner("Mourik", "red")
Ключевое слово this в конструкторе предназначено для ссылки на конкретный экземпляр объекта, создаваемый операцией new. (Если в функции используется ключевое слово this, то это обязательно конструктор объекта.)
Как и в случае с объектными литералами, свойства объекта, определяемые в его конструкторе, сами могут быть объектами:
72
// Конструктор объекта person function person(name, age) { this.name = name this.age = age
}
// создаем экземпляр объекта person alex = new person("Alex", 50)
// Конструктор объекта CatWithOwner function CatWithOwner(sName, sColor, sOwner) { this.name = sName this.color = sColor this.owner = sOwner
}
// Создает экземпляр объекта CatWithOwner cat = new CatWithOwner("Mourik", "red", alex)
// Отображаем имя владельца alert(cat.owner.name)
Отличительной особенностью объектной модели JavaScript является то, что после создания экземпляра объекта к нему можно добавлять новые свойства и методы, которые будут присущи только этому конкретному экземпляру. Для этого достаточно в точечной нотации указать имя нового свойства и присвоить ему значение: cat.age = 6; cat.voice = mew
Теперь у объекта cat появилось свойство age и метод voice, но только у этого объекта. Создаваемые конструктором CatWithOwner() объекты не будут иметь указанных свойства и метода.
Но в JavaScript можно (после написания конструктора) в любой момент (чтобы не менять конструктор) добавить свойства и метолы непосредственно к объектному типу. Это приведет к тому, что создаваемые после этого экземпляры объектов с помощью того же конструктора будут обладать добавленными свойствами и методами. Для этих целей используется свойство prototype "объектного типа", совпадающего с именем конструктора:
CatWithOwner.prototype.age = null
CatWithOwner.prototype.voice = mew
// теперь создаем экземпляр var cat1 = new CatWithOwner("Mourik", "red", alex)
// у него есть свойство age (значение null)
// и метод voice() alert(cat1.age); cat1.voice();
73
// можем изменить значение свойства age cat1.age = "red"
В конструкторе объекта вместо имен свойств (да и методов) можно использовать индексы: function CatWithOwner(sName, sColor, sOwner) { this[1] = sName this[2] = sColor this.owner = sOwner
} cat1 = new CatWithOwner("Mourik", "black", alex)
Теперь к свойствам, соответствующим имени и цвету, можно обращаться по индексу: alert(cat1[1])
Индексацию можно использовать и при доступе к свойствам, определенным с помощью имени, но в этом случае в качестве индекса берется строка с именем свойства: alert(cat1["owner"])
Для определения методов объекта в конструкторе следуем по схеме, аналогичной определению методов объекта в его конструкторе — определяем свойство, имеющее значением ссылку на функцию, реализующую создаваемый метод: function who() { var result = "Кот " + this.name + ",\nвладелец которого" + this.owner.name return result
}
// Новый конструктор объекта CatWithOwner function CatWithOwner(sName, sColor, sOwner) { this.name = sName this.color = sColor this.owner = sOwner this.whose = who
}
// Новый кот var cat2 = new CatWithOwner();
// Чей это кот alert(cat2.who())
В JavaScript не предусмотрено операции удаления объектов из памяти — они все удаляются либо по завершению работы сценария (закрытие страницы HTML в браузере), либо по завершению работы функции, в которой были созданы локальные объекты.
74
Существует операция delete, позволяющая удалить свойство объекта или элемента массива. Удалять можно только свойства созданных пользователем собственных объектов или свойства встроенных объектов, которые пользователь к ним добавил: myobj = new Number(); myoj["prop"] = "*********" delete myobj.prop
В завершение рассказа о пользовательских объекта, в конструкторах которых применялось ключевое слово this для создания ссылки на текущий экземпляр объекта, напомним еще об одном случае использования этого ключевого слова.
Его можно использовать в коде обработчика события элемента HTML для ссылки на объект, соответствующий этому элементу HTML:
Здесь ключевое слово this ссылается на поле ввода и ссылка на него передается в функцию validate(), вызываемую при возникновении события изменения содержимого этого поля.
Упражнения
1. Создать массив на основе объекта Object. Посмотреть, если у него свойство length
, присущее массивам, созданным с помощью объекта Array.
2. Распечатать свойство constructor для всех известных объектов JavaScript. С помощью свойства prototype объекта Object для всех создаваемых в сценарии объектов добавить метод propertiesList(), возвращающий массив, содержащий названия всех свойств объекта и их значения.
3. Разработать объект Collection, позволяющий хранить и выбирать любые объекты JavaScript с использованием строкового ключа. Реализовать методы этого объекта: add(ключ, объект) — добавление объекта в семейство
Collection, remove(ключ) — удаление объекта, count() — возвращает количество объектов в семействе, item(ключ) — возвращает объект по значению его ключа.
69 err.number = 801 err.description = "Не задан второй параметр.";
// Генерирование ошибки throw err break;
}
// Возвращаемое значение функции return x+y;
}
// Обращение к функции add() с обработкой возможной ошибки try{
// функция add() сгенерирует ошибку с номером 801 alert(add(5))
} catch(e){ alert(e.description+"\n"+e.number)
}
Упражнения
1. Добавить метод propList() (пример 10) к прототипу объекта Object, а также добавить к прототипу этого же объекта свойство list со значением "Добавленное к прототипу Object". Проверить на объектах String, Date, Number, Function, Array,
Boolean, действительно ли будут добавляться к экземплярам указанных объектов добавленные к прототипу объекта Object метод и свойство.
2. Добавить к прототипу объекта Array метод вычисления максимального элемента массива и посмотреть его работу на экземплярах объектов этого типа, содержащими только числовые элементы, только строковые и смешанные (числа и строки).
3. Создать массив, элементы которого хранят ссылки на все 6 типов встроенных объектов JavaScript. Случайным образом "перемешать" его элементы. После этого распечатать отчет о том, какие объекты хранятся в его элементах, начиная с первого.
70 4. Реализовать нижеприведенный сценарий. Проверить доступность свойств 0, 1,
2, 3 массива. Объяснить результаты. Поэкспериментировать с другими типами встроенных объектов. var a = new Array("apple", "banana", "cactus"); a["q"] = 9 document.write(a.propertyIsEnumerable("q"))
5. Отобразить на странице HTML таблицу, показывающую результаты выполнения методов toString и valueOf всех встроенных объектов JavaScript.
6. Разработать страницу HTML со встроенным сценарием, который получает введенный пользователем код JavaScript в текстовом поле страницы и выполняет его.
Получить строку из текстового поля страницы HTML
можно, используя свойство value объекта с идентификатором, равным значению атрибута name текстового поля fromText = txt1.value
Интерпретацию строки можно организовать, используя кнопку
7. Написать сценарий, который кодирует строку, содержащую все небуквенные символы клавиатуры тремя возможными способами и отобразить результаты в виде таблицы:
Символ escape encodeURI
encodeURIComponent
%20
%20
%20
`
%60
%60
%60
%7E
!
%21
!
!
@
@
@
%40
#
%23
#
%23
Урок 9. Создание собственных объектов
Объектная модель JavaScript отличается от объектных моделей других объектно- ориентированных языков тем, что в ней объекты создаются на основе прототипов.
Для создания объектов в JavaScript можно использовать объектный литерал или специальным образом написанную функцию — конструктор объекта.
71
Объектный литерал представляет собой заданную в фигурных скобках последовательность свойств объекта и их значений. Свойства и значения задаются парами, разделенными символом :. Таким образом, объектный литерал имеет следующий синтаксис:
{prop1:value1, ..., propN:valueN}
Значением свойства может быть любой поддерживаемый JavaScript тип данных, включая объект: var Basil = {name:"Basil",surname: "Ivanoff", university:{name:"PGU",faculty:"AM",cours:5}}
В качестве значения может снова выступать объектный литерал. В этом случае "точечная" нотация может быть продолжена для получения соответствующего свойства объекта, являющегося свойством созданного объекта. alert(Basil.university.name)
Если в качестве значения свойства указывается ссылка на объект-функцию, то такое свойство на самом деле является методом создаваемого объекта: var Cat = {name:"Mourik", color:"red", voice:mew}; function mew(){ alert("mew... mew...")
}
Вызов метода осуществляется по всем правилам вызова функций JavaScript — указывается имя метода и при необходимости передаются ему фактические параметры:
Cat.voice();
Но реально будет вызвана и выполнена функция, реализующая указанный метод
(в нашем примере mew()).
Второй способ позволяет быстро создавать экземпляры объекта определенного типа через специальную функцию-конструктор. Если с помощью объектного литерала мы непосредственно создаем экземпляр объекта и сохраняем в некоторой переменной ссылку на него, то здесь мы сначала "описываем" в конструкторе его свойства и методы, а потом операцией new создаем экземпляры этого типа объекта:
// Объявление конструктора function CatWithoutOwner(sName, sColor) { this.name = sName this.color = sColor
}
// Создание экземпляра myCat = new CatWithoutOwner("Mourik", "red")
Ключевое слово this в конструкторе предназначено для ссылки на конкретный экземпляр объекта, создаваемый операцией new. (Если в функции используется ключевое слово this, то это обязательно конструктор объекта.)
Как и в случае с объектными литералами, свойства объекта, определяемые в его конструкторе, сами могут быть объектами:
72
// Конструктор объекта person function person(name, age) { this.name = name this.age = age
}
// создаем экземпляр объекта person alex = new person("Alex", 50)
// Конструктор объекта CatWithOwner function CatWithOwner(sName, sColor, sOwner) { this.name = sName this.color = sColor this.owner = sOwner
}
// Создает экземпляр объекта CatWithOwner cat = new CatWithOwner("Mourik", "red", alex)
// Отображаем имя владельца alert(cat.owner.name)
Отличительной особенностью объектной модели JavaScript является то, что после создания экземпляра объекта к нему можно добавлять новые свойства и методы, которые будут присущи только этому конкретному экземпляру. Для этого достаточно в точечной нотации указать имя нового свойства и присвоить ему значение: cat.age = 6; cat.voice = mew
Теперь у объекта cat появилось свойство age и метод voice, но только у этого объекта. Создаваемые конструктором CatWithOwner() объекты не будут иметь указанных свойства и метода.
Но в JavaScript можно (после написания конструктора) в любой момент (чтобы не менять конструктор) добавить свойства и метолы непосредственно к объектному типу. Это приведет к тому, что создаваемые после этого экземпляры объектов с помощью того же конструктора будут обладать добавленными свойствами и методами. Для этих целей используется свойство prototype "объектного типа", совпадающего с именем конструктора:
CatWithOwner.prototype.age = null
CatWithOwner.prototype.voice = mew
// теперь создаем экземпляр var cat1 = new CatWithOwner("Mourik", "red", alex)
// у него есть свойство age (значение null)
// и метод voice() alert(cat1.age); cat1.voice();
73
// можем изменить значение свойства age cat1.age = "red"
В конструкторе объекта вместо имен свойств (да и методов) можно использовать индексы: function CatWithOwner(sName, sColor, sOwner) { this[1] = sName this[2] = sColor this.owner = sOwner
} cat1 = new CatWithOwner("Mourik", "black", alex)
Теперь к свойствам, соответствующим имени и цвету, можно обращаться по индексу: alert(cat1[1])
Индексацию можно использовать и при доступе к свойствам, определенным с помощью имени, но в этом случае в качестве индекса берется строка с именем свойства: alert(cat1["owner"])
Для определения методов объекта в конструкторе следуем по схеме, аналогичной определению методов объекта в его конструкторе — определяем свойство, имеющее значением ссылку на функцию, реализующую создаваемый метод: function who() { var result = "Кот " + this.name + ",\nвладелец которого" + this.owner.name return result
}
// Новый конструктор объекта CatWithOwner function CatWithOwner(sName, sColor, sOwner) { this.name = sName this.color = sColor this.owner = sOwner this.whose = who
}
// Новый кот var cat2 = new CatWithOwner();
// Чей это кот alert(cat2.who())
В JavaScript не предусмотрено операции удаления объектов из памяти — они все удаляются либо по завершению работы сценария (закрытие страницы HTML в браузере), либо по завершению работы функции, в которой были созданы локальные объекты.
74
Существует операция delete, позволяющая удалить свойство объекта или элемента массива. Удалять можно только свойства созданных пользователем собственных объектов или свойства встроенных объектов, которые пользователь к ним добавил: myobj = new Number(); myoj["prop"] = "*********" delete myobj.prop
В завершение рассказа о пользовательских объекта, в конструкторах которых применялось ключевое слово this для создания ссылки на текущий экземпляр объекта, напомним еще об одном случае использования этого ключевого слова.
Его можно использовать в коде обработчика события элемента HTML для ссылки на объект, соответствующий этому элементу HTML:
Здесь ключевое слово this ссылается на поле ввода и ссылка на него передается в функцию validate(), вызываемую при возникновении события изменения содержимого этого поля.
Упражнения
1. Создать массив на основе объекта Object. Посмотреть, если у него свойство length
, присущее массивам, созданным с помощью объекта Array.
2. Распечатать свойство constructor для всех известных объектов JavaScript. С помощью свойства prototype объекта Object для всех создаваемых в сценарии объектов добавить метод propertiesList(), возвращающий массив, содержащий названия всех свойств объекта и их значения.
3. Разработать объект Collection, позволяющий хранить и выбирать любые объекты JavaScript с использованием строкового ключа. Реализовать методы этого объекта: add(ключ, объект) — добавление объекта в семейство
Collection, remove(ключ) — удаление объекта, count() — возвращает количество объектов в семействе, item(ключ) — возвращает объект по значению его ключа.
Часть II. Среда клиента
Урок 10. Объектная модель MS Internet Explorer
Как отмечалось в уроке 2 при обсуждении языков сценариев, последние используются для расширения возможностей некоторой среды, которая для этих целей "поставляет" ряд объектов, доступных из сценариев. В рамках клиентского
Web-программирования такой средой является программа просмотра Интернета.
75
Если она поддерживает программирование на каком-либо языке сценариев, то она предоставляет ряд объектов для взаимодействия с ней из сценариев.
Раскрываемые браузером MS Internet Explorer объекты представляют собой иерархию, во главе которой расположен объект window, соответствующий окну браузера. Ряд объектов (navigator, history, location) непосредственно связан с функциональностью самого браузера, тогда как другие объекты
(семейство frames и объект document) позволяют получить доступ к отображаемому в данный момент в окне браузера документу HTML.
window
document
history
location
frames
plugins
applets
anchors
scripts
images
embeds
forms
selection
all
navigator
plugin
mimetype
links
document
screen
styleSheets
body
text
button
radio
checkbox
password
hidden
reset
submit
file
textarea
select
option
Объект window
Объект window создается автоматически при запуске браузера. Для выполнения его методов или установки и получения значений свойств указывать его не обязательно, хотя и рекомендуется для лучшей читаемости кода сценария.
Заметим, что любое окно браузера или отображаемый в нем фрейм представлен объектом этого типа.
Свойства объекта window
Свойство
Описание
opener
Ссылка на окно, открывшее данное. parent
Ссылка на родительское окно в иерархии объектов. top
Ссылка на верхний родительский объект. name
Имя окна.
76 screenLeft, screenTop Координаты левого верхнего угла окна отображения браузера относительно левого верхнего угла экрана. status
Текст в строке состояния.
Из всех перечисленных свойств объекта window сейчас мы остановимся на трех последних.
Изменяя значения свойств screenLeft и screenTop объекта window
(задаются в пикселях) можно изменить положение окна браузера относительно верхнего левого угла экрана монитора компьютера клиента.
Свойство status полезно для получения в сценарии строки, отображающейся в строке состояния окна браузера, а также для отображения информации для пользователя, например, что документ HTML обработан и загружен: window.status = "Документ загружен."
Методы объекта window
У этого объекта есть много полезных методов, но основным можно считать метод open()
, с помощью которого создается новое окно браузера (загружается еще одна его копия). Синтаксис этого метода представлен ниже: переменная = window.open([имя_файла],[имя_ссылки_окна],
[строка_параметров])
В переменной хранится возвращаемая методом ссылка на новое окно, которую можно использовать для доступа к нему из сценария JavaScript.
Первым параметром имя_файла определяется полный или относительный URL- адрес открываемого в окне документа (если задана пустая строка, то открывается пустая станица).
Второй параметр имя_ссылки_окна позволяет задать имя вновь открытого окна, которое можно использовать в документе HTML в атрибуте target гипертекстовой ссылки для указания загрузки в него документа.
Параметр строка_параметров — строка, представляющая список параметров вновь создаваемого окна со значениями. Каждый параметр задается в виде параметр=значение. Все параметры вместе со своими значениями в строке отделены друг от друга запятыми. Допустимые параметры: height=высота — определяет высоту окна в пикселях; width=ширина — определяет ширину окна в пикселях; left=значение — определяет горизонтальную координату верхнего левого окна в пикселях; top=значение — определяет вертикальную координату верхнего левого окна в пикселях; resizable={yes|no|1|0} — может ли пользователь изменять размеры окна; location={yes|no|1|0} — отображается ли адресная строка; menubar={yes|no|1|0} — отображается ли строка меню;
77 scrollbars={yes|no|1|0} — отображаются ли полосы прокрутки; titlebar={yes|no|1|0} — отображается ли строка заголовка окна (только для HTML-приложений); toolbar={yes|no|1|0} — отображается ли панель инструментов; status={yes|no|1|0} — отображается ли строка состояния.
Например, следующий вызов, создаст новое окно браузера без панели инструментов и полос прокрутки, загрузив в него документ с указанным первым параметром абсолютным адресом. В любом документе HTML, для ссылки на это окно можно использовать имя linkWin. В сценарии ссылаться на это окно можно с помощью переменной winExample. winExample = window.open(
"http://www.bhv.ru/library/index.html",
"linkWin", "toolbar=no,scrollbars=yes")
Вывод во вновь открытое окно осуществляется методом write() объекта document этого окна.
Закрывается окно методом close() без параметров: window.close()
В сценарии можно использовать специальное имя self для ссылки на текущее окно или использовать переменную, хранящую ссылку на требуемое окно: self.close() newWindow.close()
Пример 14. Открытие нового окна и запись в него
Создадим страницу HTML, открывающую новое окно браузера при щелчке в любом месте документа. Для этого обработчику onclick объекта document присвоим ссылку на функцию openNewWindow(), в которой открывается новое окно newWind и в него записывается абзац:
78
Щелчок в области документа откроет новое окно.
79 confirm(сообщение) окно с сообщением и двумя кнопками
(возвращает true, если нажата кнопка
Yes, и false, если нажата кнопка No);
Метод setTimeout() запускает выполнение кода JavaScript, задаваемого первым строковым параметром, через определенный промежуток времени после выполнения метода.
Метод setInterval() запускает периодический "процесс" выполнения кода
JavaScript, задаваемого первым строковым параметром, с интервалом, указанным вторым параметром. переменная = window.setTimeout(строка_кода, интервал,
[язык]) переменная = window.setInterval(строка_кода, интервал,
[язык])
Интервал задается в миллисекундах (1000 соответствует 1 секунде).
Необязательный параметр язык определяет язык сценария для выполняемого кода
(JavaScript, VBScript). По умолчанию предполагается язык JavaScript.
Для остановки запущенных процессов используются соответственно методы и , параметрами которых является переменная, в которой сохранен результат запуска "процесса": window.clearTimeout(переменная) window.clearInterval(переменная)
Одновременно можно запустить много "процессов". Обычно метод setInterval() используется для создания страницы HTML с движущимися элементами.
Пример 15. Периодический "процесс"
Ниже приведен код страницы HTML, после загрузки которой каждые три секунды будет появляться сообщение, генерируемое вызовом функции myMessage():
Каждые три секунды будет появляться сообщение
80
Область отображения браузера разбивается на несколько частей (фреймов) с помощью вложенных в элемент FRAMESET элементов FRAME, в которых и отображаются соответствующие документы HTML.
Контейнер
81
Во фрейм Frame1 загрузим файл frame1.html.:
При щелчке на кнопке Запись во фрейм Frame2 второй фрейм будет заполняться содержимым, определенным в качестве параметра метода write объекта document этого фрейма.
Если загружаемый во фрейм документ сам содержит набор фреймов, то объектная модель немного усложняется. В этом случае получить доступ ко всем фреймам через объект top нельзя. фреймы, отображаемого в заданном фрейме документа, являются подчиненными этому фрейму, который, в свою очередь, порождается от объекта верхнего уровня top.
Пример 17. Взаимодействие вложенных фреймов
Загружаемая страница с фреймами frame.html:
Файл frame2.html (названия фреймов могут быть такими же, как и в главной странице!):
Файл frame1-1.html, предоставляющий запись во фрейм Frame1 страницы frame2.html:
Можно на фрейм Frame1 файла frame2.html сослаться и так: top.frames[1].frames[0]
82
Является свойством объекта window и предоставляет информацию об используемом клиентом браузере.
Свойства appCodeName
Название кода браузера. appName
Название браузера. appVersion
Версия браузера. browserLanguage
Текущий используемый язык браузера. cookieEnabled
Поддерживает ли браузер сохранение cookies. userAgent
Заголовок, посылаемый клиентом серверу при обмене данными по протоколу HTTP. cpuClass
Строка, характеризующая используемый процессор компьютера. onLine
Браузер в режиме работы с сетью или в автономном. platform
Строка, характеризующая операционную систему компьютера. systemLanguage
Используемый по умолчанию язык операционной системы компьютера.
Методы
javaEnabled()
Возвращает true, если возможен в браузере запуск
Java-апплета. В противном случае false.
Объект location
Объект location также является свойство объекта window и связан с URL- адресом отображаемого в браузере документа. Синтаксис URL-адреса имеет следующий вид: protocol//host:port/pathname#hash?search
Примеры URL-адресов http://localhost:8080/doc/url.html#path http://www.net.org/tutorial/cgi/url.pl?name=search и соответствие их частей указанным в синтаксисе обозначениям:
Синтаксис URL
Адрес 1
Адрес 2
protocol http: http: host localhost www.net.org port
8080 pathname doc/url.html tutorial/cgi/url.pl hash path search name=search
83
Свойства
href возвращает полный адрес загруженного документа. Если его изменить, то будет загружен новый документ. Является свойством по умолчанию, поэтому для загрузки нового документа из сценария можно использовать следующую конструкцию: window.location = "http://microsoft.com/index.asp";
Остальные свойства hash, host, hostname, pathname, port , protocol, search соответствуют частям адреса загруженного документа, используемые как для получения, так и для изменения соответствующих частей адреса.
Методы
reload()
Перезагружает в браузер текущую страницу. replace(URL)
Загружает в окно браузера страницу, адрес которой задан в качестве его параметра.
Объект history
Объект history (свойство объекта window) содержит список адресов документов HTML, ранее загружавшихся в браузер.
Его свойство length хранит общее количество адресов в этом объекте.
Метод go() этого объекта загружает страницу из списка посещенных. Текущая страница имеет индекс 0, предыдущие по отношению к текущей страницы индексируются отрицательными целыми числами, а последующие положительными целыми числами: history.go(-3)
Для перемещения на одну страницу назад и на одну страницу вперед относительно текущей в списке посещенных можно использовать соответственно методы back() и forward() этого объекта.
Упражнения
1. Видоизменить программу примера 14, добавив на страницу две кнопки — одну для открытия окна, другую для закрытия.
2. Создать страницу с кнопкой, при щелчке на которой окно будет смещаться на
20 пикселей по горизонтали и по вертикали.
3. При загрузке страницы запустить два процесса, отображающие каждый свое сообщение. На странице предусмотреть кнопку, при нажатии на которую отображается диалоговое окно с просьбой ввести идентификатор процесса. После его ввода процесс останавливается.
4. В цикле определить все свойства объектов navigator и location и отобразить их в браузере в виде таблиц:
84 название свойства значение
5. Создать три страницы HTML. На первой странице расположена гиперссылка на страницу с именем history.html. На этой странице три кнопки: первая реализует метод back(), вторая метод forward() и третья метод go(). Также на этой странице должна быть гиперссылка на третью страницу HTML со ссылкой на history.html.
Загружаем первую страницу и переходим по ссылке на страницу history.html. С нее переходим по ссылке на третью страницу HTML и возвращаемся на страницу history.html нажатием кнопки Назад панели инструментов браузера.
Теперь при нажатии кнопок, реализующих методы back() и forward() мы должны попасть соответственно на первую и третью страницы, а при нажатии на кнопку, реализующую метод go(), в диалоговом окне следует указать на какую страницу мы хотим перейти (ее номер относительно текущей).
Урок 11. Объекты доступа к странице и ее элементам
Объект document
Этот объект содержит информацию о текущей загруженной странице. Для каждой страницы создается один объект document.
Свойства
Часть свойств соответствуют атрибутам тега-контейнера : background, bgColor, fgColor (атрибут text), linkColor (атрибут link), alinkColor
(атрибут alink) и vlinkColor (атрибут vlink). Другие свойства не соответствуют атрибутам указанного тега. Например, URL хранит адрес загруженного документа, parentWindow предоставляет ссылку на окно- родитель.
Семейства
all
Содержит ссылки на все объекты, представляющие элементы
HTML anchors
Содержит объекты, соответствующие тегам в порядке их появления в документе applets
Содержит объекты, соответствующие тегам
85 images
Содержит объекты, соответствующие тегам
в порядке их появления в документе links Содержит объекты, соответствующие тегам
HREF="..."> и , а также объекты link, созданные методом link() в порядке их появления в документе scripts
Содержит объекты, соответствующие тегам
86 scrollWidth scrollTop scrollLeft между верхним и левым краями области отображения и соответствующими краями содержимого, отображаемого в окне. scroll
Возвращает Yes, если полосы прокрутки отображены, No если нет и auto если они появляются, когда размеры содержимого области отображения превосходят ее размеры
Объект form
Каждая форма в документе, определенная тегом
87
У объекта, соответствующего элементу управления SELECT, имеется семейство options
, в котором хранятся ссылки на объекты, соответствующие элементам
OPTION этого элемента управления.
Для формы одним из важных действий на странице является проверка правильности заполнения полей пользователем на машине клиента до пересылки их на сервер. В следующем примере разъясняется, как выполнять эту процедуру.
Пример 18. Проверка данных формы
Страница HTML с формой form1, содержащей текстовые однострочные поля name для ввода имени и age для ввода года рождения, и функцией validate()
, вызываемой до отправки данных формы на сервер, представлена следующим кодом:
88
После загрузки страницы в браузер курсор устанавливается в поле ввода имени.
Нажатие на кнопку Подтвердить до отсылки данных формы генерирует событие submit для формы, которое и перехватывается в ее обработчике события onsubmit
. Функция проверки должна вернуть true, если все введенные данные правильны (а мы проверяем одно поле age), или false, если какие-то проверяемые данные не правильны. Но этого еще недостаточно, чтобы в случае неправильности данных браузером не инициировалась процедура их пересылки. В обработчике события onsubmit обязательно должна присутствовать операция return. Если ее операнд true, то данные пересылаются, если false, то нет.
Упражнения
1. Написать сценарий, отображающий в отдельном окне браузера сразу же после загрузки в него страницы все формы (свойство name) и все элементы управления в каждой из них с их названием и значением (свойства name и value), а для элемента SELECT отобразить его свойство name и все элементы списка со значением их свойств value, например: form1 1. txt1:
*****
2. chk1: yes
3. radio1: yes
4. radio1: no form2 1. txt1: xxxxxx
2. select1: val1 val2 3. txt2: yyyyyy
2. Реализовать эмуляцию взаимодействия страницы HTML с серверной программой, регистрирующей пользователя. На странице HTML пользователь вводит имя, фамилию, пароль и адрес электронной почты. Заполнение всех полей обязательно. Перед отсылкой данных на "сервер" следует проверить правильность ввода адреса электронной почты (наличие двух частей, разделенных символом @).
Эмуляцию серверной программы осуществить сценарием JavaScript, встроенном в другую страницу HTML, адрес которой указывается в атрибуте ACTION открывающего тега элемента FORM. Сценарий должен сформировать страницу, приветствующую пользователя по имени и фамилии и сообщающем ему в табличной форме с каким браузером он работает, его версию, а также наименование операционной системы (используйте объекты location и navigator).
89 3. Написать функцию, отображающую с помощью метода alert() объекта window значения свойств объекта body с префиксами client, offset и scroll
. Вызвать ее из начала, середины и конца большого документа, отображаемого как минимум на трех экранах. Проанализировать полученные результаты.
4. Напишите универсальную функцию проверки значений, вводимых пользователем в текстовых полях формы на соответствие вещественному числу.
Под универсальностью функции понимается тот факт, что ее можно использовать для любого однострочного текстового поля любой формы. Если пользователь ввел не вещественное число, то следует поле следует очистить и установить в него указатель мыши, сообщив о неправильном вводе пользователя.
Урок 12. Обработка событий в MS Internet Explorer
Обработчики событий
Интерактивные страницы HTML реагируют на действия пользователя. Например, при нажатии на кнопку появляется диалоговое окно с сообщением, или выполняется проверка правильности введенных пользователем данных в полях формы.
В JavaScript подобная интерактивность реализована, как и в других системах программирования, возможностью перехвата и обработки событий, возникающих в результате действий пользователя или системы. Для этого в теги практически всех элементов HTML (объектов с точки зрения JavaScript) были введены
атрибуты обработки событий, задающие действия, выполняемые при возникновении события, связанного с этим элементом HTML. Имя атрибута обработки события начинается с приставки on, за которым следует название события. Если событием является, например, щелчок кнопкой мыши click, то соответствующий атрибут обработки этого события называется onclick; если обрабатываемым событием является нажатие кнопки мыши mousedown, то атрибут называется onmousedown.
Информация о некоторых событиях некоторых элементов HTML приведена в следующей таблице.
Событие
Применяется к
объектам
Когда происходит событие
abort image
Пользователь отказывается от загрузки изображения blur window, body и все объекты формы
Потеря объектом фокуса change text, textarea, select
Пользователь изменяет значение элемента
90 click
Все элементы HTML Щелчок на элементе HTML error image, window
Загрузка документа или изображения вызывает ошибку focus window , body и все объекты формы
Окно или элемент формы получает фокус keydown
Все элементы HTML
Пользователь нажимает клавишу клавиатуры keypress
Все элементы HTML
Пользователь удерживает нажатой клавишу клавиатуры keyup
Все элементы HTML
Пользователь отпускает клавишу клавиатуры load
Тело документа
Загружается документ в браузер mousedown
Все элементы HTML Пользователь нажимает кнопку мыши mousemove
Все элементы HTML
Пользователь перемещает указатель мыши в области элемента mouseout
Все элементы HTML
Пользователь перемещает указатель мыши из области элемента mouseover
Все элементы HTML
Пользователь перемещает указатель в область элемента mouseup
Все элементы HTML Пользователь отпускает кнопку мыши mousewheel
Все элементы HTML Пользователь крутит колесико мыши move
Относительно или абсолютно позиционированный элемент
Пользователь или сценарий перемещает элемент reset form
Пользователь нажимает кнопку Reset формы select body, text, textarea
Пользователь выбирает поле ввода элемента формы или выделяет часть документа submit form
Пользователь нажимает кнопку Submit формы unload body, frameset, window
Пользователь закрывает документ
Хорошим стилем программирования является оформление действий, выполняемых при обработке событий, в виде процедур.
91
Вызов процедуры обработки события
В JavaScript каждое событие порождает ассоциированный с ним объект event.
Этот объект содержит всю информацию о событии и его можно передать процедуре обработки события.
Вызов процедуры обработки события можно осуществить двумя способами:
явно – назначив ссылку на процедуру обработки события в соответствующем свойстве объекта
неявно – в атрибуте обработки события тега соответствующего элемента
Каждый объект JavaScript, создаваемый для элементов документа HTML, имеет свойства, ассоциированные с возможными событиями, которые могут быть сгенерированы для этого элемента. Присвоив этому свойству в качестве значения ссылку на процедуру обработки события, мы и определим процедуру, которая будет вызываться при возникновении соответствующего события. Например, следующий код определяет процедуру showEventType как процедуру обработки события mousedown кнопки формы:
Сама процедура задается следующим кодом (объект event в IE доступен просто по своему имени):
// В IE function showEventType() { alert("Произошло событие: " + event.type)
}
Второй, неявный вызов процедуры обработки события требует задания обращения к ней в атрибуте onmousedown в открывающем теге элемента
INPUT:
Событийная модель
Любое событие имеет свой "жизненный" цикл: от момента возникновения действия или условия, являющегося причиной генерирования события, до выполнения последнего оператора обработчика события или финальных действий
92 браузера. Цикл жизни любого типичного события JavaScript включает следующие этапы:
1. Происходит действие пользователя или возникает условие, которое возбуждает событие
2. Тотчас же корректируется объект event, чтобы отразить параметры возникшего события
3. Событие генерируется – это и есть истинное сообщение о возникшем событии
4. Вызывается обработчик событий элемента-источника события, который выполняет определенные программистом действия и завершает свою работу
5. Событие передается вверх по иерархии объектов (bubble up) и вызывается обработчик события объекта, являющегося родителем объекта-источника события. Это "всплытие" вверх по иерархии объектов продолжается, пока не будет достигнут самый верхний объект иерархии – объект window, или обработчик события какого-либо объекта не аннулирует событие
6. Выполняются заключительные действия по умолчанию, если таковые определены, но при условии, что событие не было аннулировано.
Пример 19. "Всплытие" события
В этом примере щелчок на любом элементе HTML страницы приводит к отображению диалогового окна с надписью "Не надо щелкать".
1 2 3 4 5 6 7 8 9 10 11
Привет!
Это простой пример, ну очень простой пример.
93 обработчик событий, то событие будет обрабатываться всеми обработчиками, если только в каком-то обработчике не будет аннулировано его "всплытие" вверх по иерархии объектов.
Объект event имеет свойство cancelBubble, которое позволяет аннулировать событие, если установить его значение равным true. После этого соответствующее событие не существует, и обработчики этого события всех, расположенных выше элементов, не вызываются.
Пример 20. Аннулирование "всплытия" события
Аннулирование "всплытия" события в элементе bold1 приводит к тому, что щелчок на нем не отображает диалогового окна из обработчика этого события в элементе body. Для всех остальных элементов это действие продолжает выполняться.
Привет!
Это простой пример,
ну очень простой пример.
94
Свойство srcElement определяет элемент документа, явившийся источником события. Оно может быть полезным при централизованной обработке событий элементом, расположенным выше в иерархии объектов документа истинного "виновника" события, и, в зависимости от типа элемента, программа-обработчик может предпринять соответствующие действия.
Важное свойство cancelBubble, аннулирующее событие и прекращающее передачу его на обработку вверх по иерархии объектов, рассмотрено ранее.
Свойство returnValue является булевым и возвращает значение true или false после завершения выполнения процедуры обработки события. При передаче события вверх по иерархии значение этого свойства можно использовать для альтернативной обработки события. Кроме того, если в обработчике события элемента, для которого определены действия по умолчанию, это свойство устанавливается равным false, то это отменяет выполнение действий по умолчанию. Так, для элемента A действием по умолчанию является переход по ссылке, задаваемой атрибутом HREF.
По значениям свойств altKey, ctrlKey и shiftKey элемента-источника события определяется, была ли нажата, соответственно, клавиша
Значение свойства равно true, если клавиша была нажата, и false в противном случае. Свойства ctrlLeft, altLeft и shiftLeft позволяют определить, была ли нажата в момент возникновения события левая из указанных в названии свойств клавиша.
Следующий фрагмент сценария отменяет переход по любой связи в документе, если при щелчке на ней была нажата клавиша
Пример 21. Отмена перехода по гиперсвязи
document.onclick=click; function click() { if((window.event.srcElement.tagName=='A') && window.event.shiftKey) { window.event.returnValue=false;
}
}
Установка значения свойства returnValue равным false не аннулирует событие. Оно продолжает "всплывать" по иерархии объектов. Отменяется только действия по умолчанию элемента, являющегося источником события.
Для событий мыши определены свойства, значениями которых являются координаты положения курсора в момент возникновения события.
Свойства clientX и clientY представляют координаты относительно области отображения браузера, offsetX и offsetY являются координатами
95 относительно элемента-контейнера, в котором расположен элемент-источник события, screenX и screenY – абсолютные координаты курсора мыши, т.е. координаты экрана монитора. Все значения этих свойств определены в пикселях.
Свойства x и y определяют положение курсора мыши по горизонтали и вертикали относительно позиционированного контейнера, содержащего элемент-источник события. Если ни один контейнер не позиционирован, то положение определяется относительно тела документа .
Полезное свойство событий мыши button определяет нажатую кнопку мыши
(только для событий onmousedown, onmouseup и onmousemove):
Значение Нажаты кнопки мыши
0 ни одна
1
Левая
2
Правая
3
Одновременно левая и правая
4
Средняя
5
Одновременно левая и средняя
6
Одновременно правая и средняя
7
Все три одновременно
Свойства toElement и fromElement применимы только к событиям onmouseover и onmouseout. Они определяют, от какого элемента и к какому перемещался курсор мыши, и полезны при анализе этих действий для вложенных элементов.
Свойство keyCode хранит ASCII-код нажатой клавиши клавиатуры при событиях onkeydown, onkeyup и onkeypress. Для события onkeydown свойство repeat равно true, если оно происходило непрерывно два и более раз
(нажата и удерживается клавиша) и false в противном случае.
Для события onmousewheel, если свойство wheelDelta имеет значение -120, то колесо вращалось на себя, если 120, то от себя.
Пример 22. Изменение размеров картинки
Свойство каскадных таблиц стилей zoom (расширение компании Microsoft к свойствам каскадных таблиц стилей, вошедших в рекомендации консорциума
WWW) позволяет изменять масштаб отображения элемента HTML на странице, отображаемой в окне браузера. Его значением является коэффициент изменения размера элемента HTML по сравнению с его нормальным размером. Он задается в виде вещественного числа или в виде процента. Значения от нуля до единицы или от 0% до 100% приводят к уменьшению изображения элемента, а значения большие единицы или 100% к увеличению. В примере отслеживается поворот колесика мыши, когда указатель расположен над рисунком (элемент IMG), и
96 увеличение (поворот колесика "на себя") или уменьшение (поворот колесика "от себя") значения свойства zoom элемента IMG на 5%, что приводит к увеличению или уменьшению размеров рисунка.
97
Часть III. Динамический HTML
Урок 13. Объектная модель документа DHTML
Объектная модель документа определяет логическую структуру документа и способ доступа и манипулирования составляющими документ элементами. Все, что определено в документе тегами языка разметки HTML-страниц, становится доступным для изменения, удаления и добавления. Программист может создавать документы, свободно перемещаться по их структуре и добавлять, изменять или удалять элементы и/или их содержимое. Эту технику принято называть динамическим HTML.
Динамический HTML в Internet Explorer 4.0 был реализован на базе объектной модели DHTML, разработанной фирмой Microsoft и послужившей основой для объектной модели DOM консорциума WWW. Начиная с версии 5.0 в браузере
Internet Explorer полностью реализована эта объектная модель документа, но объектная модель документа DHTML продолжает существовать.
Структура документа
В объектной модели DHTML любой документ представляется в виде логической древовидной структуры. Следующий фрагмент документа HTML:
В блоковый элемент, каким является абзац, можно добавлять встраиваемые элементы, каковым является элемент IMG:
98
Каждый элемент документа HTML является в этой модели программируемым объектом. Это означает, что существует возможность динамически изменять содержимое элементов страницы, перемещать их по иерархии, добавлять новые элементы или удалять существующие, изменять форматирование (внешний вид) элементов страницы. Подобные действия реализуются через сценарии, выполняемые как реакция на определенные действия пользователя или системы.
Иерархия объектов
Каждый объект в иерархии, предоставляемой объектной моделью документа
HTML, можно использовать в сценарии JavaScript, но для этого необходимо получить доступ к соответствующему объекту.
В иерархической объектной модели одну из важных ролей при доступе к объектам играют два семейства, являющиеся свойствами любого объекта HTML,
— all и children. В первом содержатся ссылки на все объекты,
расположенные ниже объекта в иерархии, тогда как второй содержит ссылки на
все объекты, непосредственно порождаемые данным. Например, семейство all объекта body приведенного выше документа HTML содержит ссылки на все объекты документа, в том числе и на p1, img1, b1 и img2. Семейство children будет ссылаться только на два объекта, непосредственно порождаемых элементом body — p1, img2.
На вершине всей иерархии объектов расположен объект document, который "порождает" все объекты, представляющие элементы HTML. Этот объект также имеет свойство-семейство all (семейства children у него нет), содержащий ссылки на все объекты документа.
Отметим одну особенность семейства all объекта document — оно всегда содержит ссылки на объекты HTML, HEAD, TITLE и BODY, даже если соответствующие теги отсутствуют в документе (браузеры обычно позволяют их пропускать и сразу же задавать тело документа).
В семейство all объекта document не включается задаваемый без тегов разметки, хотя и отображаемый на странице, текст (браузер IE позволяет это делать). Таким образом, в объектной модели DHTML он будет просто потерян — к нему будет невозможен доступ.
Кроме объектов, представляющих распознаваемые и отображаемые браузером элементы HTML, в семейства all и children попадают также комментарии
HTML и неизвестные или ошибочные теги (без своего содержимого, которое отображается как неразмеченный текст).
Для получения ссылки на интересующий объект, "хранящийся" в любом семействе, следует использовать целочисленный индекс (отсчет от нуля) или строковый индекс (имя) соответствующего элемента. Имя элемента HTML — значение его атрибута ID или атрибута NAME. Отметим, что имя элемента в то же время является свойством объекта-семейства, в которое он включен.
99
Например, чтобы обратиться к объекту, представляющему первый абзац приведенного в начале урока примера страницы HTML, можно использовать одну из следующих конструкций: document.all[4] document.all['p1'] document.all.p1
В Internet Explorer можно просто ссылаться на элемент HTML, используя его имя, определяемое значением атрибута ID или NAME, в качестве переменной, хранящей ссылку на объект, соответствующий указанному элементу HTML. Это справедливо для всех элементов страницы за исключением элементов управления формы — к ним доступ осуществляется только через родительский объект form
(хотя с использованием семейства document.all придерживаться такой иерархии совершенно не обязательно). Таким образом, на первый абзац можно сослаться и просто как p1.
При программировании достаточно полезным свойством семейств является свойство length, в котором хранится общее число объектов в наборе. Его обычно используют для организации перебора элементов в семействе с помощью цикла for. Однако в этом случае большую производительность и удобство дает цикл for...in.
Пример 23. Два способа перебора элементов семейства