JavaScript.5 2012. Особенности работы с окнами window.open(URL, имя_окна, особенности_окна); // или self.open(URL, имя_окна, особенности_окна); - презентация

1 JavaScript

2 Особенности работы с окнами window.open(URL, имя_окна, особенности_окна); // или self.open(URL, имя_окна, особенности_окна);

3 Зависимое окно dependent=0 dependent=no dependent=1 dependent=yes Если 1 (yes), то новое окно создается как подчиненнное (child) текущему. Если пользователь закроет текущее окно, то закроются и все подчиненные dependent=no

4 Общие замечания Невозможно задать только один размер окна (по высоте или ширине). Если задан только один размер, он игнорируется и создаваемое окно имеет размер текущего окна - как если бы ни один из размеров не был задан Создание окна размером менее чем 100x100 пикселов или задание отрицательных или больших смещений (расположение открываемого окна "вне экрана") требует дополнительных действий

5 Высота Высотаheight= Высота создаваемого окна в пикселах Внутренняя высота innerHeight= То же, что и height. Высота создаваемого окна в пикселах. Внешняя высотаouterHeight= Наружная высота (с учетом рамки и другого оформления) создаваемого окна в пикселах.

6 Ширина Ширинаwidth= Ширина создаваемого окна в пикселах Внутренняя ширина innerWidth= То же, что и width. Ширина создаваемого окна в пикселах. Внешняя ширина outerWidth= Наружная ширина (с учетом рамки и другого оформления) создаваемого окна в пикселах.

7 Размер Положение по горизонтали screenX= Смещение в пикселах по горизонтали наружного левого верхнего угла окна относительно левого верхнего угла экрана, 0, если указано любое значение screenY Положение по вертикали screenY= Смещение в пикселах по вертикали наружного левого верхнего угла окна относительно левого верхнего угла экрана 0, если указано любое значение screenX Изменяемый размерresizable=0 resizable=no resizable=1 resizable=yes Если 1 (yes), то пользователь может изменять размер окна resizable=no

8 Оформление и взаимодействие с пользователем Меню menubar=0 menubar=no menubar=1 menubar=yes По умолчанию no Полоса инструментов toolbar=0 toolbar=no toolbar=1 toolbar=yes По умолчанию no

9 Оформление и взаимодействие с пользователем Строка адреса location=0 location=no location=1 location=yes По умолчанию no Линейки прокрутки scrollbars=0 scrollbars=no scrollbars=1 scrollbars=yes По умолчанию no

10 Оформление и взаимодействие с пользователем Статус status=0 status=no status=1 status=yes По умолчанию no "Горячие" клавиши" hotkeys=0 hotkeys=no hotkeys=1 hotkeys=yes По умолчанию no

11 Окно-предшественник Свойство opener определяет окно документа, который вызвал открытие окна текущего документа. window.opener.[method] Например, window.opener.close() window.opener.document.bgColor='cyan' window.opener= new_window window.opener = null

12 Примеры манипуляции окнами Открыть окно Закрыть окно

13 Метод scroll Прокрутить текст

14 Создание пользовательских объектов

15 Объект JavaScript - это неупорядоченный набор свойств. Свойство, являющееся функцией, называется методом. Для доступа к свойству объекта используется синтаксис: имя_объекта.имя_свойства Если название свойства задано текстовой строкой, то доступ к свойству возможен и так: имя_объекта["имя_свойства"]

16 Создание объекта myBrowser Свойства: myBrowser.name = "Microsoft Internet Explorer"; myBrowser.version = "5.5"; document.write(myBrowser.name, myBrowser.version);

17 Создание объектов с помощью инициализатора позволяет одновременно создать объект и присвоить значения всем или части его свойств. применяется в тех случаях, когда мы создаем объект с уникальным набором свойств. {свойство:значение [,свойство:значение]?} Здесь свойство - идентификатор, задающий имя свойства, а значение - выражение, задающее значение этого свойства.

18 Создание объектов с помощью инициализатора 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}};

19 Создание объектов с помощью конструктора Этот способ применяется в тех случаях, когда необходимо создать класс объектов с определенным набором свойств, а затем создавать новые объекты, просто указывая, к какому классу они должны принадлежать. Для этого нужно сначала создать конструктор объектов, который является функцией специального вида, а именно: имя функции задает имя создаваемого класса объектов; тело функции должно содержать присваивание начальных значений свойствам и методам создаваемого объекта.

20 Создание объектов с помощью конструктора (2) Например, конструктор для класса объектов Browser может иметь следующий вид: function Browser(name, version) { this.name = name; this.version = version; } Для создания новых объектов класса Browser достаточно вызвать этот конструктор в операции new, например: var myBrowser = new Browser("Microsoft Internet Explorer", "5.5");

21 Создание объектов с помощью конструктора (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);

22 Создание методов Поскольку методы являются разновидностью свойств, они создаются так же, как описано выше. Например, можно добавить к конструктору объектов 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().

23 Создание методов (2) Конструктор можно записать короче, используя вложенное определение функции: function Browser(name, version) { this.name = name; this.version = version; this.aboutBrowser = function() { document.write("Обозреватель: " + this.name + " " + this.version); } }

24 Изменение прототипа объекта Допустим, что мы хотим в процессе выполнения сценария добавить новое свойство security (безопасность) классу объектов Options. Для этого используется свойство prototype объекта Function: Options.prototype.security = null; Теперь мы можем присвоить значение новому свойству объекта: myBrowser.options.security = "Высокая"; Для удаления свойств объектов используется операция delete, например: delete Options.prototype.security;

25 Задание нового прототипа объекта 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.

26 Удаление объектов Можно удалить ранее созданный объект с помощью операции delete, например: delete myBrowser;

27 Упражнение Создайте объект Card, содержащий все личные данные о человеке – имя, фамилию, адрес, телефон, создайте метод, позволяющий отображать информацию на экране (например, PrintCard()) Добавьте новое свойство объекта – электронный адрес.

28 Создание нового окна

29 window.open(URL, имя_окна, особенности_окна); // или self.open(URL, имя_окна, особенности_окна);

30 Зависимое окно dependent=0 dependent=no dependent=1 dependent=yes Если 1 (yes), то новое окно создается как подчиненнное (child) текущему. Если пользователь закроет текущее окно, то закроются и все подчиненные dependent=no

31 Общие замечания Невозможно задать только один размер окна (по высоте или ширине). Если задан только один размер, он игнорируется и создаваемое окно имеет размер текущего окна - как если бы ни один из размеров не был задан Создание окна размером менее чем 100x100 пикселов или задание отрицательных или больших смещений (расположение открываемого окна "вне экрана") требует дополнительных действий

32 Высота Высотаheight= Высота создаваемого окна в пикселах Внутренняя высота innerHeight= То же, что и height. Высота создаваемого окна в пикселах. Внешняя высотаouterHeight= Наружная высота (с учетом рамки и другого оформления) создаваемого окна в пикселах.

33 Ширина Ширинаwidth= Ширина создаваемого окна в пикселах Внутренняя ширина innerWidth= То же, что и width. Ширина создаваемого окна в пикселах. Внешняя ширина outerWidth= Наружная ширина (с учетом рамки и другого оформления) создаваемого окна в пикселах.

34 Размер Положение по горизонтали screenX= Смещение в пикселах по горизонтали наружного левого верхнего угла окна относительно левого верхнего угла экрана, 0, если указано любое значение screenY Положение по вертикали screenY= Смещение в пикселах по вертикали наружного левого верхнего угла окна относительно левого верхнего угла экрана 0, если указано любое значение screenX Изменяемый размерresizable=0 resizable=no resizable=1 resizable=yes Если 1 (yes), то пользователь может изменять размер окна resizable=no

35 Оформление и взаимодействие с пользователем Меню menubar=0 menubar=no menubar=1 menubar=yes По умолчанию no Полоса инструментов toolbar=0 toolbar=no toolbar=1 toolbar=yes По умолчанию no

36 Оформление и взаимодействие с пользователем Строка адреса location=0 location=no location=1 location=yes По умолчанию no Линейки прокрутки scrollbars=0 scrollbars=no scrollbars=1 scrollbars=yes По умолчанию no

37 Оформление и взаимодействие с пользователем Статус status=0 status=no status=1 status=yes По умолчанию no "Горячие" клавиши" hotkeys=0 hotkeys=no hotkeys=1 hotkeys=yes По умолчанию no

38 Окно-предшественник Свойство opener определяет окно документа, который вызвал открытие окна текущего документа. window.opener.[method] Например, window.opener.close() window.opener.document.bgColor='cyan' window.opener= new_window window.opener = null

39 Примеры манипуляции окнами Открыть окно Закрыть окно

40 Метод scroll Прокрутить текст

41 Примеры открытия окон Создание документа в новом окне okno1.html Закрытие окна –okno2.html

42 Задание 1.2. Написать скрипт, который открывает окно и использует все возможные опции. Сделайте высоту окна 300 пикселей и ширину 500. Должно быть две ссылки: · Одна открывает новую страницу в основном окне · Вторая открывает новую страницу в том же окне. · Страница, которая открывает в том же самом маленьком окне, должна иметь ссылки для закрытия окна. Фон должен быть желтым, (ffff00).

43 Задание 1.3 Написать функцию, которая открыла бы окно с зеленым фоном и приветствием в заголовке окна: «Привет, имя пользователя, вот твое окно!» Имя пользователя можно узнать с помощью запроса. Допишите ссылку, которая закроет окно.

44 Создание пользовательских объектов

45 Объект JavaScript - это неупорядоченный набор свойств. Свойство, являющееся функцией, называется методом. Для доступа к свойству объекта используется синтаксис: имя_объекта.имя_свойства Если название свойства задано текстовой строкой, то доступ к свойству возможен и так: имя_объекта["имя_свойства"]

46 Создание объекта myBrowser Свойства: myBrowser.name = "Microsoft Internet Explorer"; myBrowser.version = "5.5"; document.write(myBrowser.name, myBrowser.version);

47 Создание объектов с помощью инициализатора позволяет одновременно создать объект и присвоить значения всем или части его свойств. применяется в тех случаях, когда мы создаем объект с уникальным набором свойств. {свойство:значение [,свойство:значение]?} Здесь свойство - идентификатор, задающий имя свойства, а значение - выражение, задающее значение этого свойства.

48 Создание объектов с помощью инициализатора 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}};

49 Создание объектов с помощью конструктора Этот способ применяется в тех случаях, когда мы хотим создать класс объектов с определенным набором свойств, а затем создавать новые объекты, просто указывая, к какому классу они должны принадлежать. Для этого нужно сначала создать конструктор объектов, который является функцией специального вида, а именно: имя функции задает имя создаваемого класса объектов; тело функции должно содержать присваивание начальных значений свойствам и методам создаваемого объекта.

50 Создание объектов с помощью конструктора (2) Например, конструктор для класса объектов Browser из предыдущего примера может иметь следующий вид: function Browser(name, version) { this.name = name; this.version = version; } Теперь для создания новых объектов класса Browser достаточно вызвать этот конструктор в операции new, например: var myBrowser = new Browser("Microsoft Internet Explorer", "5.5");

51 Создание объектов с помощью конструктора (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);

52 Создание методов Поскольку методы являются разновидностью свойств, они создаются так же, как описано выше. Например, можно добавить к конструктору объектов 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().

53 Создание методов (2) При желании конструктор можно записать и короче, используя вложенное определение функции: function Browser(name, version) { this.name = name; this.version = version; this.aboutBrowser = function() { document.write("Обозреватель: " + this.name + " " + this.version); } }

54 Изменение прототипа объекта Допустим, что мы хотим в процессе выполнения сценария добавить новое свойство security (безопасность) классу объектов Options. Для этого используется свойство prototype объекта Function: Options.prototype.security = null; Теперь мы можем присвоить значение новому свойству объекта: myBrowser.options.security = "Высокая"; Для удаления свойств объектов используется операция delete, например: delete Options.prototype.security;

55 Задание нового прототипа объекта 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.

56 Удаление объектов Мы можем удалить ранее созданный объект с помощью операции delete, например: delete myBrowser;

57 Упражнение Создайте объект Card, содержащий все личные данные о человеке – имя, фамилию, адрес, телефон, создайте метод, позволяющий отображать информацию на экране (например, PrintCard()) Добавьте новое свойство объекта – электронный адрес.