Главная Новости

JavaScript - Презентация

Опубликовано: 06.09.2018

видео JavaScript - Презентация

Pac-Man: Играть On-Line. Презентация современной игры на Javascript

Презентация «JavaScript» . Размер 57 КБ. Автор: .

Слайд Текст
1

JavaScript

JavaScript.5. 2012.


Что должен знать Junior JavaScript Developer | Презентация курса "Продвинутый JS"

2

Особенности работы с окнами

Особенности работы с окнами. Window.Open(url, имя_окна, особенности_окна); // или self.Open(url, имя_окна, особенности_окна);


Финална Презентация на Frontend JavaScript курса

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

14

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

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

15

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

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

16

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

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

17

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

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

18

Добавление еще одного свойства объекта 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.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 определяет окно документа, который вызвал открытие окна текущего документа. 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. <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 - это неупорядоченный набор свойств. Свойство, являющееся функцией, называется методом. Для доступа к свойству объекта используется синтаксис: имя_объекта.имя_свойства Если название свойства задано текстовой строкой, то доступ к свойству возможен и так: имя_объекта["имя_свойства"].

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

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

Создание объектов с помощью конструктора (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 (безопасность) классу объектов Options. Для этого используется свойство prototype объекта Function: Options.prototype.security = null; Теперь мы можем присвоить значение новому свойству объекта: myBrowser.options.security = "Высокая"; Для удаления свойств объектов используется операция delete, например: delete Options.prototype.security;

55

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 myBrowser;

57

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

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

«JavaScript»
rss