- •Дисциплина «Программное обеспечение компьютерных сетей» Специальность 230105 Лабораторная работа №1, 2. «Использование встроенных объектов и функций».
- •Практическое задание.
- •Вопросы для контроля.
- •Дисциплина «Программное обеспечение компьютерных сетей» Специальность 230105 Лабораторная работа №3. «Создание пользовательских объектов и обработка событий».
- •Свои методы объектов
- •Доступ к объекту через this
- •Функция-конструктор, «new»
- •Создание методов в конструкторе
- •Приватные свойства
- •Открытие и закрытие окон
- •Открытие окон
- •Закрытие окон
- •Использование фреймов
- •Модификация фреймов
- •Обращение и управление среди фреймов
- •Пример Фреймов
- •Обращение к окнам и фреймам
- •Обращение к свойствам, методам, и обработчикам события окна
- •Обращение к окну подчиненной формы или гиперсвязи
- •Управление окнами
- •Практическое задание.
- •Событие submit
- •Взаимосвязь событий submit и click
- •Метод submit
- •Практическое задание.
- •Структура анимации
- •Временная функция delta
- •Линейная delta
- •В степени n
- •Back: стреляем из лука
- •Упругая анимация
- •Реверсивные функции (easeIn, easeOut, easeInOut)
- •Графопостроитель
- •Сложные варианты step
- •Подсветка цветом
- •Набор текста
- •Сценарии, которые могут работать в разных браузерах
- •Доступ к таблицам стилей
- •Свойства таблиц стилей
- •Добавление и удаление правил
- •Изменение стилей элементов
- •Имена классов элементов
- •Практическое задание.
- •Контрольные вопросы.
Создание методов в конструкторе
Использование функций для создания объекта дает большую гибкость. Можно передавать функции свойства создаваемого объекта и параметры, определяющие как его создавать.
Например, функция User(name) создает объект с заданным значением свойства name и методомsayHi:
1 |
function User(name) { |
2 |
this.name = name; |
3 |
|
4 |
this.sayHi = function() { |
5 |
alert("Моё имя: " + this.name); |
6 |
}; |
7 |
} |
Пример использования:
01 |
var ivan = new User("Иван"); |
02 |
|
03 |
/* Объект ivan имеет вид: |
04 |
{ |
05 |
name: "Иван", |
06 |
sayHi: функция, обращение к имени идёт через this.name |
07 |
} |
08 |
*/ |
09 |
|
10 |
ivan.sayHi(); // Моё имя: Иван |
Следует ли в вызове run сохранять введённые значения как свойства объекта?
При этом метод sum() будет без параметров, и обращения в нём будут к this.a,this.b.
Свойства объекта могут со временем изменяться. Используйте это в следующей задаче.
Напишите функцию-конструктор Adder(startingValue). Объекты, которые она создает, должны хранить текущую сумму и прибавлять к ней то, что вводит посетитель.
Более формально, объект должен:
Хранить текущее значение в своём свойстве value. Начальное значение свойства value ставится конструктором равным startingValue.
Метод addInput() вызывает prompt, принимает число и прибавляет его к свойству value.
Метод showValue() выводит текущее значение value.
Таким образом, свойство value является текущей суммой всего, что ввел посетитель при вызовах метода addInput(), с учетом начального значенияstartingValue.
1 |
var adder = new Adder(1); // начальное значение 1 |
2 |
adder.addInput(); // прибавит ввод prompt к текущему значению |
3 |
adder.addInput(); // прибавит ввод prompt к текущему значению |
4 |
adder.showValue(); // выведет текущее значение |
Приватные свойства
Локальные переменные функции-конструктора, с одной стороны, доступны вложенным функциям, с другой — недоступны снаружи.
В объектно-ориентированном программировании это называется «приватный (private) доступ».
Например, в коде ниже к name имеет доступ только метод say. Со стороны объекта, после его создания, больше никто не может получить name.
1 |
function User(name) { |
2 |
|
3 |
this.say = function(phrase) { |
4 |
alert(name + ' сказал: ' + phrase); |
5 |
}; |
6 |
|
7 |
} |
8 |
|
9 |
var user = new User('Вася'); |
Если бы name было свойством this.name — можно было бы получить его как user.name, а тут — локальная переменная. Приватный доступ.
Замыкания никак не связаны с this
Доступ через замыкание осуществляется к локальной переменной, находящейся «выше» по области видимости.
А this содержит ссылку на «текущий» объект — контекст вызова, и позволяет обращаться к его свойствам. С локальными переменными это никак не связано.
Приватные свойства можно менять, например ниже метод this.upperCaseName() меняет приватное свойство name:
01 |
function User(name) { |
02 |
|
03 |
this.upperCaseName = function() { |
04 |
name = name.toUpperCase(); // <-- изменяет name из User |
05 |
}; |
06 |
|
07 |
this.say = function(phrase) { |
08 |
alert(name + ' сказал: ' + phrase); // <-- получает name из User |
09 |
}; |
10 |
|
11 |
} |
12 |
|
13 |
var user = new User('Вася'); |
14 |
|
15 |
user.upperCaseName(); |
16 |
|
17 |
user.say("Да здравствует ООП!") // ВАСЯ сказал: Да здравствует ООП! |
Все переменные конструктора User становятся приватными, так как доступны только через замыкание, из внутренних функций.
Можно ли из this.sayHi получить доступ к name из User и при этом обойтись без переименований?
1 |
function User(name) { |
2 |
|
3 |
this.sayHi = function(name) { |
4 |
// ваш код... ? |
5 |
} |
6 |
} |
Напишите конструктор Calculator, который создаёт расширяемые объекты-калькуляторы.
Первый шаг задачи: вызов calculate(str) принимает строку, например «1 + 2», с жёстко заданным форматом «ЧИСЛО операция ЧИСЛО» (по одному пробелу вокруг операции), и возвращает результат. Понимает плюс + и минус-.
Пример использования:
-
var calc = new Calculator;
-
alert(calc.calculate("3 + 7")); // 10
Второй шаг — добавить метод addMethod(name, func), который учит калькулятор новой операции. Он получает имя операции name и функцию от двух аргументов func(a,b), которая должна её реализовывать.
Например, добавим операции умножить *, поделить / и возвести в степень**:
-
1
var powerCalc = new Calculator;
-
2
powerCalc.addMethod("*", function(a, b) { return a * b; });
-
3
powerCalc.addMethod("/", function(a, b) { return a / b; });
-
4
powerCalc.addMethod("**", function(a, b) { returnMath.pow(a, b); });
-
5
-
6
var result = powerCalc.calculate("2 ** 3");
-
7
alert(result); // 8
Поддержка скобок и более сложных математических выражений в этой задаче не требуется.
Числа и операции могут состоять из нескольких символов. Между ними ровно один пробел.
Предусмотрите обработку ошибок. Какая она должна быть - решите сами.
Итого
У объекта могут быть методы:
Свойство, значение которого - функция, называется методом объекта и может быть вызвано как obj.method(). При этом объект доступен как this.
Объекты могут быть созданы при помощи функций-конструкторов:
Любая функция может быть вызвана с new, при этом она получает новый пустой объект в качестве this, в который она добавляет свойства. Если функция не решит возвратить свой объект, то её результатом будет this.
Функции, которые предназначены для создания объектов, называются конструкторами. Их названия пишут с большой буквы, чтобы отличать от обычных.
Практическое задание.
На страницах с описанием техники (в продолжение лабораторных работ №1 и 2) должен размещаться калькулятор покупки с учётом всех выбранных товаров. Предусмотреть возможность скидок при покупке товаров на сумму свыше какого-либо значения. Итог расчёта должен появиться в элементе вида input или обычной надписи.
Вопросы для контроля.
Что такое функция объекта?
Что нужно сделать для создания собственного объекта?
Каким образом создать множество однотипных объектов?
Чем приватные свойства отличаются от общедоступных?
Каким образом создаются методы объектов?
Что такое метод объекта?
Как осуществляется доступ к собственным объектам?
Дисциплина «Программное обеспечение компьютерных сетей» Специальность 230105
Лабораторная работа №4.
«Использование окон и фреймов».
Теоретическая часть.
