Создание объектов с помощью инициализатора

JavaScript.5
2012
Особенности работы с окнами
window.open(URL, имя_окна,
особенности_окна);
// или
self.open(URL, имя_окна, особенности_окна);
Зависимое окно






dependent=0
dependent=no
dependent=1
dependent=yes
Если 1 (yes), то новое окно создается как
подчиненнное (child) текущему. Если
пользователь закроет текущее окно, то
закроются и все подчиненные
dependent=no
Общие замечания


Невозможно задать только один размер окна (по
высоте или ширине). Если задан только один размер,
он игнорируется и создаваемое окно имеет размер
текущего окна - как если бы ни один из размеров не
был задан
Создание окна размером менее чем 100x100
пикселов или задание отрицательных или больших
смещений (расположение открываемого окна "вне
экрана") требует дополнительных действий
Высота



Высота
height=<целое>
Высота
создаваемого окна в пикселах
Внутренняя высота innerHeight=<целое>
То же, что и height. Высота создаваемого
окна в пикселах.
Внешняя высота
outerHeight=<целое>
Наружная высота (с учетом рамки и другого
оформления) создаваемого окна в
пикселах.
Ширина



Ширина
width=<целое>
Ширина
создаваемого окна в пикселах
Внутренняя ширина innerWidth=<целое>
То же, что и width. Ширина создаваемого
окна в пикселах.
Внешняя ширина
outerWidth=<целое>
Наружная ширина (с учетом рамки и другого
оформления) создаваемого окна в
пикселах.
Размер



Положение по горизонтали

screenX=<целое>

Смещение в пикселах по горизонтали наружного левого верхнего
угла окна относительно левого верхнего угла экрана,

0, если указано любое значение screenY
Положение по вертикали

screenY=<целое>

Смещение в пикселах по вертикали наружного левого верхнего угла
окна относительно левого верхнего угла экрана

0, если указано любое значение screenX
Изменяемый размер
resizable=0

resizable=no

resizable=1

resizable=yes

Если 1 (yes), то пользователь может изменять размер окна

resizable=no
Оформление и взаимодействие с
пользователем

Меню






menubar=0
menubar=no
menubar=1
menubar=yes
По умолчанию no
Полоса инструментов





toolbar=0
toolbar=no
toolbar=1
toolbar=yes
По умолчанию no
Оформление и взаимодействие с
пользователем

Строка адреса






location=0
location=no
location=1
location=yes
По умолчанию no
Линейки прокрутки





scrollbars=0
scrollbars=no
scrollbars=1
scrollbars=yes
По умолчанию no
Оформление и взаимодействие с
пользователем

Статус






status=0
status=no
status=1
status=yes
По умолчанию no
"Горячие" клавиши"





hotkeys=0
hotkeys=no
hotkeys=1
hotkeys=yes
По умолчанию no
Окно-предшественник



Свойство opener определяет окно
документа, который вызвал открытие окна
текущего документа.
window.opener.[method]
Например,




window.opener.close()
window.opener.document.bgColor='cyan'
window.opener= new_window
window.opener = null
Примеры манипуляции окнами
<a href="javascript:window.open('simple8.htm',
'example','scrollbars,resizable,width=300,
height=200'); void(0);">Открыть окно</a>
<a href="javascript:window.close();void(0);">
Закрыть окно</a>
Метод scroll
<a href="javascript:for(i=0;i<80;i++)
{window.scroll(0,i*10)};void(0);">Прокрутить
текст</a>
Создание пользовательских
объектов
Создание пользовательских
объектов

Объект JavaScript - это неупорядоченный набор
свойств. Свойство, являющееся функцией,
называется методом. Для доступа к свойству объекта
используется синтаксис:
имя_объекта.имя_свойства
Если название свойства задано текстовой строкой, то
доступ к свойству возможен и так:
имя_объекта["имя_свойства"]
Создание объекта myBrowser

Свойства:



myBrowser.name = "Microsoft Internet Explorer";
myBrowser.version = "5.5";
document.write(myBrowser.name,
myBrowser.version);
Создание объектов с помощью
инициализатора


позволяет одновременно создать объект и присвоить
значения всем или части его свойств.
применяется в тех случаях, когда мы создаем объект
с уникальным набором свойств.
{свойство:значение [,свойство:значение]?}

Здесь свойство - идентификатор, задающий имя
свойства, а значение - выражение, задающее
значение этого свойства.
Создание объектов с помощью
инициализатора
var myBrowser = {name: "Microsoft Internet Explorer", version:
"5.5"};
Добавление еще одного свойства объекта myBrowser,
которое называется options (опции обозревателя) и
само является объектом:
var myBrowser = {name: "Microsoft Internet Explorer", version:
"5.5",
options: {enableJava: true, enableCookies: false}};
Создание объектов с помощью
конструктора

Этот способ применяется в тех случаях, когда необходимо
создать класс объектов с определенным набором свойств,
а затем создавать новые объекты, просто указывая, к
какому классу они должны принадлежать. Для этого нужно
сначала создать конструктор объектов, который является
функцией специального вида, а именно:


имя функции задает имя создаваемого класса объектов;
тело функции должно содержать присваивание начальных
значений свойствам и методам создаваемого объекта.
Создание объектов с помощью
конструктора (2)

Например, конструктор для класса объектов Browser может иметь
следующий вид:
function Browser(name, version) {
this.name = name;
this.version = version;
}

Для создания новых объектов класса Browser достаточно вызвать этот
конструктор в операции new, например:
var myBrowser = new Browser("Microsoft Internet Explorer", "5.5");
Создание объектов с помощью
конструктора (3)
с учетом свойства options:
function Options(enableJava, enableCookies) {
this.enableJava = enableJava;
this.enableCookies = enableCookies;
}
function Browser(name, version) {
this.name = name;
this.version = version;
this.options = options;
}
var myOptions = new Options(true, false);
var myBrowser = new Browser("Microsoft Internet Explorer", "5.5",
myOptions);
Создание методов

Поскольку методы являются разновидностью свойств, они создаются
так же, как описано выше. Например, можно добавить к конструктору
объектов Browser метод aboutBrowser, который будет выводить на
экран обозревателя информацию о свойствах этого объекта:
function showBrowser() {
document.write("Обозреватель: " + this.name + " " + this.version);
}
function Browser(name, version) {
this.name = name;
this.version = version;
this.aboutBrowser = showBrowser;
}
можно вызвать этот метод так: myBrowser.aboutBrowser().
Создание методов (2)

Конструктор можно записать короче, используя
вложенное определение функции:
function Browser(name, version) {
this.name = name;
this.version = version;
this.aboutBrowser = function() {
document.write("Обозреватель: " + this.name + " " +
this.version);
}
}
Изменение прототипа объекта

Допустим, что мы хотим в процессе выполнения сценария добавить
новое свойство security (безопасность) классу объектов Options. Для
этого используется свойство prototype объекта Function:
Options.prototype.security = null;

Теперь мы можем присвоить значение новому свойству объекта:

myBrowser.options.security = "Высокая";



Для удаления свойств объектов используется операция delete,
например:
delete Options.prototype.security;
Задание нового прототипа
объекта






function Circle(radius) {
this.radius = radius;
}
Circle.prototype.area = function() {
return Math.PI * this.radius * this.radius;
}
function FullCircle(x, y, radius) {
this.x = x;
this.y = y;
this.radius = radius;
}
FullCircle.prototype = Circle.prototype;
var myCircle = new FullCircle(0, 0, 1);
document.write(myCircle.area());
В этом примере сначала определяется класс объектов Circle со свойством radius и
методом area, возвращающим площадь круга. Затем определяется класс FullCircle,
конструктор которого дополнительно содержит координаты центра окружности. Затем
указывается, что он наследует прототип класс Circle. После этого мы создаем объект
myCircle и вызываем его метод area, который он унаследовал от прототипа класса Circle.
Удаление объектов

Можно удалить ранее созданный объект с
помощью операции delete, например:
delete myBrowser;
Упражнение


Создайте объект Card, содержащий все
личные данные о человеке – имя,
фамилию, адрес, телефон, создайте метод,
позволяющий отображать информацию на
экране (например, PrintCard())
Добавьте новое свойство объекта –
электронный адрес.
Создание нового окна
Создание нового окна
window.open(URL, имя_окна,
особенности_окна);
// или
self.open(URL, имя_окна, особенности_окна);
Зависимое окно






dependent=0
dependent=no
dependent=1
dependent=yes
Если 1 (yes), то новое окно создается как
подчиненнное (child) текущему. Если
пользователь закроет текущее окно, то
закроются и все подчиненные
dependent=no
Общие замечания


Невозможно задать только один размер окна (по
высоте или ширине). Если задан только один размер,
он игнорируется и создаваемое окно имеет размер
текущего окна - как если бы ни один из размеров не
был задан
Создание окна размером менее чем 100x100
пикселов или задание отрицательных или больших
смещений (расположение открываемого окна "вне
экрана") требует дополнительных действий
Высота



Высота
height=<целое>
Высота
создаваемого окна в пикселах
Внутренняя высота innerHeight=<целое>
То же, что и height. Высота создаваемого
окна в пикселах.
Внешняя высота
outerHeight=<целое>
Наружная высота (с учетом рамки и другого
оформления) создаваемого окна в
пикселах.
Ширина



Ширина
width=<целое>
Ширина
создаваемого окна в пикселах
Внутренняя ширина innerWidth=<целое>
То же, что и width. Ширина создаваемого
окна в пикселах.
Внешняя ширина
outerWidth=<целое>
Наружная ширина (с учетом рамки и другого
оформления) создаваемого окна в
пикселах.
Размер



Положение по горизонтали

screenX=<целое>

Смещение в пикселах по горизонтали наружного левого верхнего
угла окна относительно левого верхнего угла экрана,

0, если указано любое значение screenY
Положение по вертикали

screenY=<целое>

Смещение в пикселах по вертикали наружного левого верхнего угла
окна относительно левого верхнего угла экрана

0, если указано любое значение screenX
Изменяемый размер
resizable=0

resizable=no

resizable=1

resizable=yes

Если 1 (yes), то пользователь может изменять размер окна

resizable=no
Оформление и взаимодействие с
пользователем

Меню






menubar=0
menubar=no
menubar=1
menubar=yes
По умолчанию no
Полоса инструментов





toolbar=0
toolbar=no
toolbar=1
toolbar=yes
По умолчанию no
Оформление и взаимодействие с
пользователем

Строка адреса






location=0
location=no
location=1
location=yes
По умолчанию no
Линейки прокрутки





scrollbars=0
scrollbars=no
scrollbars=1
scrollbars=yes
По умолчанию no
Оформление и взаимодействие с
пользователем

Статус






status=0
status=no
status=1
status=yes
По умолчанию no
"Горячие" клавиши"





hotkeys=0
hotkeys=no
hotkeys=1
hotkeys=yes
По умолчанию no
Окно-предшественник



Свойство opener определяет окно
документа, который вызвал открытие окна
текущего документа.
window.opener.[method]
Например,




window.opener.close()
window.opener.document.bgColor='cyan'
window.opener= new_window
window.opener = null
Примеры манипуляции окнами
<a href="javascript:window.open('simple8.htm',
'example','scrollbars,resizable,width=300,
height=200'); void(0);">Открыть окно</a>
<a href="javascript:window.close();void(0);">
Закрыть окно</a>
Метод scroll
<a href="javascript:for(i=0;i<80;i++)
{window.scroll(0,i*10)};void(0);">Прокрутить
текст</a>
Примеры открытия окон


Создание документа в новом окне
okno1.html
Закрытие окна –okno2.html
Задание 1.2.
Написать скрипт, который открывает окно и использует
все возможные опции. Сделайте высоту окна 300
пикселей и ширину 500.
Должно быть две ссылки:
·
Одна открывает новую страницу в основном окне
·
Вторая открывает новую страницу в том же окне.
·
Страница, которая открывает в том же самом
маленьком окне, должна иметь ссылки для закрытия
окна.
Фон должен быть желтым, (ffff00).
Задание 1.3

Написать функцию, которая открыла бы
окно с зеленым фоном и приветствием в
заголовке окна: «Привет, имя
пользователя, вот твое окно!» Имя
пользователя можно узнать с помощью
запроса. Допишите ссылку, которая закроет
окно.
Создание пользовательских
объектов
Создание пользовательских
объектов

Объект JavaScript - это неупорядоченный набор
свойств. Свойство, являющееся функцией,
называется методом. Для доступа к свойству объекта
используется синтаксис:
имя_объекта.имя_свойства
Если название свойства задано текстовой строкой, то
доступ к свойству возможен и так:
имя_объекта["имя_свойства"]
Создание объекта myBrowser

Свойства:



myBrowser.name = "Microsoft Internet Explorer";
myBrowser.version = "5.5";
document.write(myBrowser.name,
myBrowser.version);
Создание объектов с помощью
инициализатора


позволяет одновременно создать объект и присвоить
значения всем или части его свойств.
применяется в тех случаях, когда мы создаем объект
с уникальным набором свойств.
{свойство:значение [,свойство:значение]?}

Здесь свойство - идентификатор, задающий имя
свойства, а значение - выражение, задающее
значение этого свойства.
Создание объектов с помощью
инициализатора
var myBrowser = {name: "Microsoft Internet Explorer", version:
"5.5"};

Усложним этот пример, добавив еще одно свойство
объекта myBrowser, которое называется options
(опции обозревателя) и само является объектом:
var myBrowser = {name: "Microsoft Internet Explorer", version:
"5.5",
options: {enableJava: true, enableCookies: false}};
Создание объектов с помощью
конструктора

Этот способ применяется в тех случаях, когда мы хотим
создать класс объектов с определенным набором свойств,
а затем создавать новые объекты, просто указывая, к
какому классу они должны принадлежать. Для этого нужно
сначала создать конструктор объектов, который является
функцией специального вида, а именно:


имя функции задает имя создаваемого класса объектов;
тело функции должно содержать присваивание начальных
значений свойствам и методам создаваемого объекта.
Создание объектов с помощью
конструктора (2)

Например, конструктор для класса объектов Browser из предыдущего
примера может иметь следующий вид:
function Browser(name, version) {
this.name = name;
this.version = version;
}

Теперь для создания новых объектов класса Browser достаточно
вызвать этот конструктор в операции new, например:
var myBrowser = new Browser("Microsoft Internet Explorer", "5.5");
Создание объектов с помощью
конструктора (3)
Перепишем приведенный пример с учетом свойства options:
function Options(enableJava, enableCookies) {
this.enableJava = enableJava;
this.enableCookies = enableCookies;
}
function Browser(name, version) {
this.name = name;
this.version = version;
this.options = options;
}
var myOptions = new Options(true, false);
var myBrowser = new Browser("Microsoft Internet Explorer", "5.5",
myOptions);
Создание методов

Поскольку методы являются разновидностью свойств, они создаются
так же, как описано выше. Например, можно добавить к конструктору
объектов Browser метод aboutBrowser, который будет выводить на
экран обозревателя информацию о свойствах этого объекта:
function showBrowser() {
document.write("Обозреватель: " + this.name + " " + this.version);
}
function Browser(name, version) {
this.name = name;
this.version = version;
this.aboutBrowser = showBrowser;
}
В дальнейшем мы можем вызвать этот метод так:
myBrowser.aboutBrowser().
Создание методов (2)

При желании конструктор можно записать и короче,
используя вложенное определение функции:
function Browser(name, version) {
this.name = name;
this.version = version;
this.aboutBrowser = function() {
document.write("Обозреватель: " + this.name + " " +
this.version);
}
}
Изменение прототипа объекта

Допустим, что мы хотим в процессе выполнения сценария добавить
новое свойство security (безопасность) классу объектов Options. Для
этого используется свойство prototype объекта Function:
Options.prototype.security = null;

Теперь мы можем присвоить значение новому свойству объекта:

myBrowser.options.security = "Высокая";



Для удаления свойств объектов используется операция delete,
например:
delete Options.prototype.security;






Задание нового прототипа
объекта
function Circle(radius) {
this.radius = radius;
}
Circle.prototype.area = function() {
return Math.PI * this.radius * this.radius;
}
function FullCircle(x, y, radius) {
this.x = x;
this.y = y;
this.radius = radius;
}
FullCircle.prototype = Circle.prototype;
var myCircle = new FullCircle(0, 0, 1);
document.write(myCircle.area());
В этом примере сначала определяется класс объектов Circle со свойством radius и
методом area, возвращающим площадь круга. Затем определяется класс FullCircle,
конструктор которого дополнительно содержит координаты центра окружности. Затем
указывается, что он наследует прототип класс Circle. После этого мы создаем объект
myCircle и вызываем его метод area, который он унаследовал от прототипа класса Circle.
Удаление объектов

Мы можем удалить ранее созданный объект
с помощью операции delete, например:
delete myBrowser;
Упражнение


Создайте объект Card, содержащий все
личные данные о человеке – имя,
фамилию, адрес, телефон, создайте метод,
позволяющий отображать информацию на
экране (например, PrintCard())
Добавьте новое свойство объекта –
электронный адрес.