Користувальницькі об'єкти. Лекция 31

Содержание

Слайд 2

Поняття призначеного для користувача об'єкта

function Rectangle (a, b, c, d)
{
this.x0 = a;
this.y0

Поняття призначеного для користувача об'єкта function Rectangle (a, b, c, d) {
= b;
this.x1 = c;
this.y1 = d;
this.area = new Function (
 "Return Math.abs ((this.x1-this.x0) * (this.y1-this.y0))");
}
r = new Rectangle (0,0,30,50);
Функція Rectangle () - це конструктор об'єкта класу Rectangle, визначеного користувачем. Конструктор дозволяє створити екземпляр (об'єкт) даного класу. Адже функція - це не більше ніж опис деяких дій. Для того щоб ці дії були виконані, необхідно передати функції управління. У нашому прикладі це робиться за допомогою оператора new Rectangle.

Слайд 3

Прототип

Зазвичай ми маємо справу з вбудованими об'єктами JavaScript, такими як Data, Array

Прототип Зазвичай ми маємо справу з вбудованими об'єктами JavaScript, такими як Data,
і String.
У цьому сенсі цікаво одна властивість об'єктів, яке носить назву prototype.
Прототип - це інша назва конструктора об'єкта конкретного класу.
Наприклад, якщо ми хочемо додати метод до об'єкту класу String, то ми можемо це зробити наступним чином:
String.prototype.out = new Function ( "a", "a.write (this)");
var s = "Привіт!";
s.out (document);
// Буде виведено: Привіт!
Є один істотний нюанс: новими методами і властивостями будуть володіти тільки ті об'єкти, які породжуються після зміни прототипу об'єкта.
Всі вбудовані об'єкти створюються до того, як JavaScript-програма отримає управління, що істотно обмежує застосування властивості prototype.

Слайд 4

Прототип

Проте покажемо, як можна додати метод до вбудованого в JavaScript класу. Завдання полягає в

Прототип Проте покажемо, як можна додати метод до вбудованого в JavaScript класу.
тому, щоб розібрати URL картинки таким же чином, як і URL об'єкта класу Link, тобто забезпечити об'єкт класу Image додатковими методами protocol (), host () і т.п .:
Додавання методів до класу Image
function pr ()
{
  a = this.src.split ( ':');
  return a [0] + ':';
}
function ho ()
{
  a = this.src.split ( ':');
  path = a [1] .split ( '/');
  return path [2];
}

function pa ()
{
  path = this.src.split ( '/');
  path [0] = '';
  path [2] = '';
  return path.join ( '/'). split ( '///'). join ( '/');
}

Слайд 5

Прототип

Image.prototype.protocol = pr;
Image.prototype.host = ho;
Image.prototype.pathname = pa;
document.write ( "

Прототип Image.prototype.protocol = pr; Image.prototype.host = ho; Image.prototype.pathname = pa; document.write (
SRC = 'image1.gif'>
");
document.write (document.i1.src + "
");
document.write (document.i1.protocol () + "
");
document.write (document.i1.host () + "
");
document.write (document.i1.pathname () + "
");

Слайд 6

Методи об'єкта Object

Object - це клас, елементами якого є будь-які об'єкти JavaScript.

Методи об'єкта Object Object - це клас, елементами якого є будь-які об'єкти
У всіх об'єктів цього класу є загальні методи. Таких методів ми розглянемо три: toString (), valueOf () і assign ().
Метод toString () здійснює перетворення об'єкта в рядок символів (строковий літерал). Він використовується в JavaScript-програмах повсюдно, але в основному неявно.
Наприклад, при виведенні числа або строкових об'єктів. document.write (pr.toString ());
Результат виконання:
function pr ()
{
  a = this.src.split ( ':');
  return a [0] + ':';
}
Однак, якщо роздрукувати таким же чином об'єкт класу Image з того ж прикладу:
document.write (document.i1.toString ());
то отримаємо вже наступне: [object Image] ().

Слайд 7

Методи об'єкта Object

Метод valueOf () - дозволяє отримати значення об'єкта. У більшості

Методи об'єкта Object Метод valueOf () - дозволяє отримати значення об'єкта. У
випадків він працює подібно методу toString (), особливо якщо потрібно виводити значення на сторінку.
Наприклад, оператор
document.write (pr.valueOf ())
document.write (pr.toString ()) – з попереднього слайду
Метод assign () - дозволяє не прочитати, а перепризначити якусь властивість і метод об'єкта. Цей метод працює не у всіх браузерах і не з усіма об'єктами.
У загальному випадку має вигляд:
об‘єкт.властивість = значення рівносильне оператору об'ект.свойство.assign (значення).
Наприклад, такі оператори рівносильні - вони перенаправляють користувача на нову сторінку:
window.location = "http://intuit.ru/";
window.location.assign ( "http://intuit.ru/");

Слайд 8

Об'єкт WINDOW

Клас об'єктів Window - це найстарший клас в ієрархії об'єктів JavaScript.

Об'єкт WINDOW Клас об'єктів Window - це найстарший клас в ієрархії об'єктів

Об'єкт window, що відноситься до поточного вікна (тобто в якому виконується скрипт), є об'єктом класу Window.
Об'єкт window створюється тільки в момент відкриття вікна.
Всі інші об'єкти, які породжуються при завантаженні сторінки, є властивості об'єкта window.
Більш того, всі глобальні змінні, визначені в даному вікні, теж є властивостями об'єкта window.

Слайд 9

Властивості, методи та події об'єкта window

Властивості, методи та події об'єкта window

Слайд 10

Властивості об'єкта window

Поле статусу і властивість window.status
Поле статусу - це перше, що

Властивості об'єкта window Поле статусу і властивість window.status Поле статусу - це
почали використовувати автори HTML-сторінок з арсеналу JavaScript.
Програма на JavaScript має можливість працювати з цим полем як із змінним властивістю вікна. При цьому фактично з ним пов'язані два різних властивості:
• window.status - значення поля статусу;
• window.defaultStatus - значення поля статусу за замовчуванням.
Значення властивості status можна змінити - і воно тут же буде відображено в полі статусу.
Властивість defaultStatus теж можна міняти - і відразу по його зміні воно відображається в полі статусу.

Слайд 11

Програмуємо STATUS

Властивість status пов'язане з відображенням повідомлень про події, відмінних від простого

Програмуємо STATUS Властивість status пов'язане з відображенням повідомлень про події, відмінних від
завантаження сторінки.
Прикладі:
onMouseOver = "window.status = 'Миша над посиланням'; return true;
onMouseOut = "window.status = 'Миша повели з посилання';
href = "http://site.com/"> Наведіть мишу на посилання і стежте за полем статусу

Зверніть увагу на оператор return true в кінці обробника подій onMouseOver. Він необхідний для того, щоб скасувати дію за замовчуванням (в даному випадку - висновок URL в поле статусу), яке, за відсутності цього оператора, браузер виконав би відразу після виведення нами своєю рядки в поле статусу, і користувач не встиг би побачити нашу рядок .

Слайд 12

Програмуємо defaultstatus

Властивість defaultStatus визначає текст, який відображається в полі статусу, коли ніяких

Програмуємо defaultstatus Властивість defaultStatus визначає текст, який відображається в полі статусу, коли
подій не відбувається.

    onmouseout = "window.status = 'миша повели з посилання'; alert ( 'чекаємо');"
   href = "http://site.com/"> наведіть мишу на посилання і стежте за полем статусу

Відразу після завантаження документа в поле статусу буде "Значення за замовчуванням". При наведенні покажчика миші на посилання в поле статусу з'явиться напис "Миша над посиланням", при цьому URL посилання (http://site.com/) в поле статусу не з'явиться, тому що ми придушили його висновок оператором return true.

Слайд 13

Методи об'єкта window

alert () - дозволяє видати вікно попередження, що має єдину

Методи об'єкта window alert () - дозволяє видати вікно попередження, що має
кнопку "OK":

Потрібно лише мати на увазі, що повідомлення виводяться системним шрифтом, отже, для отримання попереджень російською мовою потрібна локалізована версія ОС.

Слайд 14

Методи об'єкта window

confirm () – дозволяє задати користувачеві питання, на який той

Методи об'єкта window confirm () – дозволяє задати користувачеві питання, на який
може відповісти або позитивно (натиснувши кнопку "OK"), або негативно (натиснувши кнопку "Скасувати" або "Cancel", або просто закривши вікно запиту). Відповідно до діями користувача метод confirm () повертає значення true або false. приклад:

onClick = "if (window.confirm ( 'Ви знаєте JavaScript?'))
     document.f.b.value = 'Так. Запитати ще? ';
else document.f.b.value = 'Немає. Запитати ще? '; ">

Слайд 15

Методи об'єкта window

prompt () – дозволяє прийняти від користувача Рядок тексту.
Синтаксис

Методи об'єкта window prompt () – дозволяє прийняти від користувача Рядок тексту.
його такий:
prompt ( "Рядок питання", "Рядок відповіді за замовчуванням")
Коли користувач введе свій відповідь (або залишить незмінним відповідь за замовчуванням) і натисне кнопку OK, метод prompt () поверне отриману рядок в якості значення, яке можна далі привласнити будь-якої змінної і потім розбирати її в JavaScript-програмі.

onClick = "document.f.e.value =
     window.prompt ( 'Введіть повідомлення', 'Сюди'); ">


Слайд 16

Методи об'єкта window

Методи об'єкта window

Слайд 17

Методи об'єкта window

window.open() – призначений для створення нових вікон.
У загальному випадку

Методи об'єкта window window.open() – призначений для створення нових вікон. У загальному
його синтаксис виглядає наступним чином:
myWin = window.open ( "URL", "імя_окна", "параметр = значення, параметр = значення, ...", замінити);
Перший аргумент задає адресу сторінки, що завантажується в нове вікно (можна залишити порожній рядок, тоді вікно залишиться порожнім).
Другий аргумент задає ім'я вікна, яке можна буде використовувати в атрибуті TARGET контейнерів і . Як значення допустимі також зарезервовані імена _blank, _parent, _self, _top, зміст яких такий же, як у аналогічних значень атрибута TARGET. Якщо імя_окна збігається з ім'ям вже існуючого вікна (або фрейма), то нове вікно не створюється, а всі наступні маніпуляції зі змінною myWin будуть застосовуватися до цього вікна (або кадру).

Слайд 18

Параметры метода window.open()

Параметры метода window.open()

Слайд 19

Методи об'єкта window

Наведемо два приклади відкриття нового вікна:

Методи об'єкта window Наведемо два приклади відкриття нового вікна: onclick = "window.open
= "просте вікно"
 onclick = "window.open ( '', 'test1',
  'directories = no, height = 200, location = no,' +
  'menubar = no, resizable = no, scrollbars = no,' +
  'status = no, toolbar = no, width = 200'); ">
 onclick = "window.open ( '', 'test2',
  'directories = yes, height = 200, location = yes,' +
  'menubar = yes, resizable = yes, scrollbars = yes,' +
  'status = yes, toolbar = yes, width = 200'); ">

Слайд 20

Методи об'єкта window

Методи об'єкта window

Слайд 21

Методи об'єкта window

window.close () – дозволяє закрити вікно. Найчастіше виникає питання, яке

Методи об'єкта window window.close () – дозволяє закрити вікно. Найчастіше виникає питання,
з вікон, власне, слід закрити. Якщо необхідно закрити поточний, то:
window.close ();
self.close ();
Якщо необхідно закрити довільне вікно, то тоді спочатку потрібно отримати його ідентифікатор:
id = window.open ();
...
id.close ();

Слайд 22

Методи об'єкта window

Метод focus () застосовується для передачі фокусу у вікно, з

Методи об'єкта window Метод focus () застосовується для передачі фокусу у вікно,
яким він використовувався. Передача фокуса корисна як при відкритті вікна, так і при його закритті, не кажучи вже про випадки, коли потрібно вибирати вікна. Розглянемо приклад.
Відкриваємо вікно і, не закриваючи його, знову відкриємо вікно з таким же ім'ям, але з іншим текстом. Нове вікно не з'явилося поверх основного вікна, так як фокус йому не був переданий.
Щоб відвести фокус з певного вікна myWin, необхідно застосувати метод myWin.blur ().
Наприклад, щоб відвести фокус з поточного вікна, де виконується скрипт, потрібно викликати window.blur (). Ефект буде той же, як якби користувач сам звернув вікно натисканням кнопки в правому верхньому куті вікна.

Слайд 23

Події об'єкта window

Load - подія відбувається в момент, коли завантаження документа в

Події об'єкта window Load - подія відбувається в момент, коли завантаження документа
даному вікні повністю закінчилася.

Unload - подія відбувається в момент вивантаження сторінки з вікна.
Наприклад, коли користувач з нашої сторінки ми можемо подбати про його зручність і закрити відкрите раніше нашим скриптом вікно:

Error - подія відбувається при виникненні помилки в процесі завантаження сторінки. Якщо ця подія відбулася, можна, наприклад, вивести повідомлення користувачеві за допомогою alert () або спробувати перезавантажити сторінку за допомогою window.location.reload ().

Слайд 24

Події об'єкта window

Focus - подія відбувається в момент, коли вікна передається фокус.

Події об'єкта window Focus - подія відбувається в момент, коли вікна передається
Наприклад, коли користувач "розкриває" згорнуте раніше вікно, або (в Windows) вибирає це вікно браузера за допомогою Alt + Tab серед вікон інших додатків. Ця подія відбувається також при програмної передачі фокусу даному вікна шляхом виклику методу window.focus (). Приклад використання:

Blur - подія, протилежне попередньому, відбувається в момент, коли це вікно втрачає фокус. Це може статися в результаті дій користувача або програмними засобами - викликом методу window.blur ().
Resize - подія відбувається при зміні розмірів вікна користувачем або сценарієм.

Слайд 25

Об'єкт Document

Об'єкт document є найважливішим властивістю об'єкта window
До нього потрібно звертатися

Об'єкт Document Об'єкт document є найважливішим властивістю об'єкта window До нього потрібно
як
window.document….
Всі елементи HTML-розмітки, присутні на web-сторінці - текст, абзаци, гіперпосилання, картинки, списки, таблиці, форми і т.д. - є властивостями об'єкта document.
Можна сказати, що технологія DHTML (Dynamic HTML), тобто динамічна зміна вмісту web-сторінки, полягає саме в роботі з властивостями, методами і подіями об'єкта document (не рахуючи роботи з вікнами і фреймами).

Слайд 26

Властивості, методи та події об'єкта document

Властивості, методи та події об'єкта document

Слайд 27

Контейнер FORM

Зазвичай контейнер FORM і поля форм іменовані:

Контейнер FORM Зазвичай контейнер FORM і поля форм іменовані: Тому в програмах
= get>


Тому в програмах на JavaScript до них звертаються по імені:
document.fname.iname.value = "Текст";
Того ж ефекту можна досягти, використовуючи колекції форм і елементів, звертаючись до форми і до елементу або за індексом, або по імені:
document.forms [0] .elements [0] .value = "Текст";
document.forms [ 'fname']. elements [ 'iname']. value = "Текст";

Слайд 28

Властивості, методи та події об'єкта Form

Властивості, методи та події об'єкта Form

Слайд 29

Властивості об'єкта Form

Властивість action - відповідає за виклик CGI-скрипта. У ньому вказується

Властивості об'єкта Form Властивість action - відповідає за виклик CGI-скрипта. У ньому
URL цього скрипта. Але там, де можна вказати URL, можна вказати і його схему javascript :, наприклад:



Метод POST передає дані форми скрипту в тілі HTTP-повідомлення, тому символ "?" Не додає до URL, і помилка не генерується. При цьому застосування void (0) скасовує перезавантаження документа, і браузер не генерує подію Submit, тобто не вдається до сервера при натисканні на кнопку, як це було б при стандартній обробці форми.

Слайд 30

Властивості об'єкта Form

Властивість method визначає метод доступу до ресурсів HTTP-сервера з програми-браузера.

Властивості об'єкта Form Властивість method визначає метод доступу до ресурсів HTTP-сервера з
Залежно від того, як автор HTML-сторінки збирається отримувати і обробляти дані з форми, він може вибрати той чи інший метод доступу. На практиці найчастіше використовуються методи GET і POST.
Зміна методу форми (GET і POST) скриптом

Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть