Языки программирования
<<  Характеристика языков программирования высокого уровня Java 5  >>
JavaScript
JavaScript
Особенности работы с окнами
Особенности работы с окнами
Зависимое окно
Зависимое окно
Общие замечания
Общие замечания
Высота
Высота
Ширина
Ширина
Размер
Размер
Оформление и взаимодействие с пользователем
Оформление и взаимодействие с пользователем
Строка адреса
Строка адреса
Статус
Статус
Окно-предшественник
Окно-предшественник
Примеры манипуляции окнами
Примеры манипуляции окнами
Метод scroll
Метод scroll
Создание пользовательских объектов
Создание пользовательских объектов
Объект JavaScript - это неупорядоченный набор свойств
Объект JavaScript - это неупорядоченный набор свойств
Создание объекта myBrowser
Создание объекта myBrowser
Создание объектов с помощью инициализатора
Создание объектов с помощью инициализатора
Добавление еще одного свойства объекта myBrowser
Добавление еще одного свойства объекта myBrowser
Создание объектов с помощью конструктора
Создание объектов с помощью конструктора
Конструктор для класса объектов
Конструктор для класса объектов
Свойства
Свойства
Создание методов
Создание методов
Конструктор можно записать короче
Конструктор можно записать короче
Изменение прототипа объекта
Изменение прототипа объекта
Задание нового прототипа объекта
Задание нового прототипа объекта
Удаление объектов
Удаление объектов
Упражнение
Упражнение
Создание нового окна
Создание нового окна
Window
Window
Зависимое окно
Зависимое окно
Невозможно задать только один размер окна
Невозможно задать только один размер окна
Высота создаваемого окна в пикселах
Высота создаваемого окна в пикселах
Ширина создаваемого окна в пикселах
Ширина создаваемого окна в пикселах
Положение по горизонтали
Положение по горизонтали
Меню
Меню
Строка адреса
Строка адреса
Статус
Статус
Свойство opener определяет окно документа, который вызвал открытие
Свойство opener определяет окно документа, который вызвал открытие
Примеры манипуляции окнами
Примеры манипуляции окнами
Метод scroll
Метод scroll
Примеры открытия окон
Примеры открытия окон
Написать скрипт
Написать скрипт
Написать функцию
Написать функцию
Создание пользовательских объектов
Создание пользовательских объектов
Объект JavaScript - это неупорядоченный набор свойств
Объект JavaScript - это неупорядоченный набор свойств
Свойства
Свойства
Позволяет одновременно создать объект и присвоить значения
Позволяет одновременно создать объект и присвоить значения
Усложним этот пример
Усложним этот пример
Класс объектов с определенным набором свойств
Класс объектов с определенным набором свойств
Конструктор для класса объектов Browser
Конструктор для класса объектов Browser
Перепишем приведенный пример с учетом свойства options
Перепишем приведенный пример с учетом свойства options
Методы являются разновидностью свойств
Методы являются разновидностью свойств
При желании конструктор можно записать и короче
При желании конструктор можно записать и короче
Новое свойство security
Новое свойство security
Function Circle
Function Circle
Мы можем удалить ранее созданный объект с помощью операции delete
Мы можем удалить ранее созданный объект с помощью операции delete
Создайте объект Card
Создайте объект Card
Презентация «JavaScript». Размер 57 КБ. Автор: .

Загрузка...

JavaScript

содержание презентации «JavaScript.ppt»
СлайдТекст
1 JavaScript

JavaScript

JavaScript.5. 2012.

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 Примеры манипуляции окнами

Примеры манипуляции окнами

Примеры манипуляции окнами. <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>

13 Метод scroll

Метод scroll

Метод scroll. <a href="javascript:for(i=0;i<80;i++) {window.scroll(0,i*10)};void(0);">Прокрутить текст</a>

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

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

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

15 Объект JavaScript - это неупорядоченный набор свойств

Объект JavaScript - это неупорядоченный набор свойств

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

16 Создание объекта myBrowser

Создание объекта myBrowser

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

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

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

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

18 Добавление еще одного свойства объекта myBrowser

Добавление еще одного свойства объекта myBrowser

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

Window

Создание нового окна. 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 определяет окно документа, который вызвал открытие

Свойство opener определяет окно документа, который вызвал открытие

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

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

Примеры манипуляции окнами

Примеры манипуляции окнами. <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>

40 Метод scroll

Метод scroll

Метод scroll. <a href="javascript:for(i=0;i<80;i++) {window.scroll(0,i*10)};void(0);">Прокрутить текст</a>

41 Примеры открытия окон

Примеры открытия окон

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

42 Написать скрипт

Написать скрипт

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

43 Написать функцию

Написать функцию

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

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

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

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

45 Объект JavaScript - это неупорядоченный набор свойств

Объект JavaScript - это неупорядоченный набор свойств

Создание пользовательских объектов. Объект 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 Конструктор для класса объектов Browser

Конструктор для класса объектов Browser

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

51 Перепишем приведенный пример с учетом свойства options

Перепишем приведенный пример с учетом свойства options

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

Новое свойство security

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

55 Function Circle

Function Circle

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

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

57 Создайте объект Card

Создайте объект Card

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

«JavaScript»
Сайт

5informatika.net

115 тем