Тема 7 Розширені можливості javascript Основи Web-дизайну з курсу Сучасні Internet-технології, НУДПСУ
« НазадТема 7. РОЗШИРЕНІ МОЖЛИВОСТІ JAVASCRIPT
7.1. Використання функційФункція JavaScript ¾ це поіменована група команд, які вирішують певну задачу та можуть повернути деяке значення. Функція визначається за допомогою оператора function , що має такий синтаксис: function Ім’я_функції ([параметри]) { [оператори] return [значення_що повертається] } Параметри, що передаються функції, розділяються комами. Необов’язковий оператор return у тілі функції (блок операторів, що обмежений фігурними дужками) визначає значення, що повертається функцією. Визначення функції тільки задає її ім’я и визначає, що буде робити функція при її визові. Безпосереднє виконання функції реалізується, коли у сценарії відбувається її виклик та передаються необхідні параметри. Зазначимо, що визначення функції необхідно реалізувати на HTML-сторінці до її виклику. Наприклад, для показу на екрані вікна повідомлення з текстом "Це виклик функції" визначимо функцію Go та реалізуємо її виклик: <html><head><title>Використання JavaScript</title> <script> function Go() { alert("Це виклик функції") } </script> </head><body> <script> Go(); </script></body></html> 7.2. Об’єктна модель JavaScriptJavaScript належать до об’єктно-орієнтованих мов програмування. Об’єкт – це цілісна конструкція, що має властивості, які є змінними JavaScript та методи їх обробки. Властивості можуть бути іншими об’єктами. Функції, пов’язані з об’єктом, називаються методами об’єкта. Для звернення до властивостей об’єкта використовується такий синтаксис: objectName.propertyName
myCar.model = "Таврія" object.methodname = function_name, Виклик методу у контексті об’єкта реалізується так: object.methodname (params);
Для створення екземпляра об’єкта необхідно: - написати функції, які будуть використані як методи об’єкта; - за допомогою звичайної функції визначити об’єкт; - за допомогою оператора new створити екземпляр об’єкта. Наприклад, необхідно створити об’єкт з іменем car та властивостями model та color та методом go. Для цього потрібно написати функцію when, що буде використана для визначення методу go: function when() { //код функції } Після цього необхідно написати функцію для визначення об’єкта: function car( model, color) {
this.model = model;
this.color = color;
this.go =when;
}
Зазначимо, що оператор this використовується для того, щоб присвоїти значення властивостям об’єкта, базуючись на параметрах, що передаються функції. Створення об’єкта з іменем mycar можливо реалізувати так: mycar = new car("Таврія", "Зелений") У JavaScript всі елементи (теги) на HTML-сторінці вибудовані у ієрархічну структуру. Причому кожен елемент представлений у вигляді об’єкта з визначеними властивостями та методами. Керування об’єктами на HTML-сторінці можливо за рахунок того, що JavaScript дозволяє одержати доступ до цих властивостей та методів. При реалізації доступу необхідно враховувати ієрархію об’єктів на HTML-сторінці. Зазначимо, що загальним об’єктом контейнером є об’єкт window, який відповідає вікну браузера. У свою чергу цей об’єкт містить деякі елементи оформлення, наприклад рядок стану. Завантажений у вікно браузера HTML-сторінці відповідає об’єкт document. Усі без внятку елементи HTML-сторінки є властивостями об’єкта document. Прикладами об’єктів HTML є таблиця, гіперпосилання або форма. Для доступу до методів/властивостей елементів на HTML-сторінці використовується такий синтаксис: document.ім’я_об’єкта.ім’я_методу()
7.3. Обробка подійВажливою ознакою інтерактивних HTML-сторінок є можливість реакції на дії користувача. Наприклад, натиск на кнопці повинен викликати появу діалогового вікна або виконання перевірки правильності введених користувачем даних. У JavaScript інтерактивність реалізована за допомогою перехвату та обробки подій, викликаних у результаті дій користувача. Для цього у теги деяких елементів введені параметри обробки подій. Ім’я параметра обробки події починається з префіксу on, за яким йде назва події. Наприклад, події клік кнопкою миші Click відповідає параметр обробки події з назвою onClick. Назви та характеристики деяких подій подані у табл. 7.1. Таблиця 7.1 Події JavaScript
Задача. Необхідно, щоб при наведенні курсору на комірку таблиці із написом "Привіт" з’являлось вікно повідомлення з фразою "Hello". Можливі рішення: Варіант 1: <td onClick="alert('Hello')"> Привіт </td> Варіант 2: <script> function Go() { alert("Hello") } </script> <td onClick="Go()"> Привіт </td> У варіанті вирішення 1, код JavaScript був записаний безпосередньо у тезі, а у варіанті 2 наслідком кліку став виклик функції. Варіант 2 потрібно використовувати, якщо код обробки події великий за обсягом.
7.4. Стандартні об’єкти і функції JavaScriptУ ядрі JavaScript визначені об’єкти та функції, які можна застосовувати не використовуючи контекст завантаженої сторінки. До основних об’єктів належать: Array, Date, Math, String. Array- масив. Масив ¾ це упорядкований набір однотипних даних, до елементів якого можливо звернутись за іменем або по індексом. Для створення масиву необхідно використати одну із двох конструкцій: ім’я_масиву = new Array([елемент1], [елемент2], [елемент3],...) ім’я_масиву = new Array([довжина масиву]) Зазначимо, що перший елемент масиву має номер 0. У першій конструкції у якості параметрів використовуються елементи масиву, у другій конструкції використовується довжина масиву. Наприклад: ar1 = new Array(1, 2, 3) ar2 = new Array(3) Для доступу до значень елементів масиву у квадратних дужках біля імені масиву необхідно вказати порядковий номер елемента. Наприклад: a = ar1[2] ar1[0] = 7 У цьому прикладі, змінній а присвоюється значення елемента масиву за номером 2, а у елемент масиву за номером 0 записується значення 7. Особливістю масивів JavaScript є те, що розмір масиву може встановлюватись динамічно. Наприклад, якщо для масиву із попереднього прикладу написати: ar1[100] = 7, то розмір масиву буде автоматично установленим рівним 101. Для визначення довжини масиву можна скористатись властивістю length. Наприклад: a = ar1. length Зручність використання масивів забезпечується методами, поданими у табл. 7.2. Таблиця 7.2 Методи об’єкта Array
Об’єкт Date використовується для роботи з датами. Синтаксис оператора створення екземпляра об’єкта дати: ім’я_об’єкта_дати = new Date([параметри]) Якщо параметри відсутні, то значенням об’єкта буде поточна дата. Параметром може бути рядок типу: "місяць день рік години хвилини;секунди". Наприклад, для створення дати - "5 лютого 2005 року 23:12:07" необхідно: day = new Date("February 5, 2005 23:12:07") Прочитати або змінити параметри створеного об’єкта Date можливо за допомогою ревних методів. Найбільш вживані методи показані у табл. 7.3 Таблиця 7.3 Методи об’єкта Date
Об’єкт Math дозволяє використовувати вбудовані у JavaScript математичні функції та константи. При зверненні до методів та властивостей цього об’єкта створювати його не потрібно, але необхідно явно вказувати його ім’я. Наприклад для того, щоб записати у змінну а результат розрахунку функції sin від 1 радіана, необхідно: a = Math.sin(1) Для того, щоб записати в змінну а результат виразу 5 у степені 6, необхідно: a = Math. pow(5,6) Методи об’єкта Math, що використовуються найчастіше подані в табл. 7.4. Таблиця 7.4 Методи об’єкта Math
Об’єкт String використовується для роботи з рядковими типами даних. Створення об’єкта String відбувається, коли змінній присвоюється рядковий літерал: а = "Не явний спосіб створення рядкового об’єкта" Крім того, можливо явно створити рядковий об’єкт, використовуючи оператор new та конструктор String: ім’я_об’єкта = new String(Рядок) Параметром конструктора може бути будь-який рядок. Наприклад: a=new String("Явний спосіб створення рядкового об’єкта") Єдиною властивістю об’єкта String є length, що зберігає довжину рядка. Наприклад, для запису у змінну h довжини рядка а необхідно: h=a.length Методи об’єкта String, що використовуються найбільш часто перераховані у табл. 7.5. Наведемо приклад використання методу toLowerCase для переводу рядкової змінної а у верхній регістр: a=a.toLowerCase(); Таблиця 7.5 Методи об’єкта String
На додаток до стандартних об’єктів JavaScript існує декілька функцій, для виклику яких не потрібно створювати об’єктів. Ці функції дістали назву “функцій верхнього рівня”. До цих функцій відносять: parseFloat(параметр) та parseInt(параметр). Їх призначенням є аналіз рядкового аргументу та повернення відповідного числа з плаваючою крапкою або цілого числа. Також досить часто використовуються функції Number(об’єкт) та String(об’єкт), які перетворюють об’єкт, що використовується як параметра, у число або рядок.
7.5. Використання об’єктів window, document, locationОб’єкт window створюється автоматично при запуску браузера. Крім того, нове вікно можливо створити і засобами JavaScript. Для цього необхідно використати метод open. Синтаксис методу такий: Ім’я_змінної = window.open([Ім’я_ файлу],[Ім’я_вікна],[Параметри]) Ім’я_змінної - це ім’я для звернення до нового вікна у програмі JavaScript. Ім’я_ файлу – це повна або відносна URL-адреса документа, що буде відкриватись у вікні браузера. Ім’я_вікна – це ім’я, що буде вказане як мета гіпертекстовому посиланні на це вікно з іншого HTML-документа. Параметри – задають значення параметрів вікна. Основні параметри подані у табл. 7.6. Якщо можливе значення властивості yes або no, то при стандартних настройках використовується значення yes. Таблиця 7.6 Основні параметри вікна
Наприклад, для створення нового вікна браузера, у якому буде завантажено файл a.html, необхідно: <script> myw=window.open("a.html","displayWindow", "width=400,height=300,status=no,toolbar=no,menubar=no") </script> При цьому ширина вікна дорівнює 400 пікселів, висота вікна ¾ 300 пікселів, рядок стану вікна, панель інструментів та рядок меню будуть відсутніми. Зазначимо, що наведений код необхідно записати у одному рядку. Для закриття вікна браузера використовується метод close. Наприклад, для закриття вікна попереднього прикладу необхідно: myw.close() Зазначимо, що при зверненні до методів та властивостей вікна браузера, у якому знаходиться програма JavaScript, імені вікна або ключового слова window можна не вказувати. Наприклад, закрити поточне вікно браузера можливо так: close() Цікавим методом об’єкта window є метод setTimeout, за допомогою якого можливо запрограмувати виконання деяких команд після закінчення встановленого терміну часу. Синтаксис методу такий: setTimeout("Код_JavaScript",інтервал_часу) Як перший параметр функції setTimeout використовують функцію. Зазначимо, що цю функцію необхідно визначити на HTML-сторінці до використання функції setTimeout. Другим параметром функції setTimeout є інтервал часу, закінчення якого буде сигналом про початок виконання команд JavaScript. Цей параметр задається у мілісекундах. Наприклад, виконання функції myfunction через 3000 мілісекунд після завантаження HTML-сторінки можливо запрограмувати так: setTimeout("myfunction()",3000) Досить часто функція setTimeout використовується для створення анімаційних ефектів. Це може бути, наприклад, циклічна зміна кольору тексту або циклічна заміна одного зображення іншим. Об’єкт document містить інформацію про завантажену сторінку. Усі елементи HTML-сторінки є властивостями цього об’єкта. Найбільш використовуваним методом об’єкта document є метод write, за допомогою якого можливо зробити запис у HTML-сторінку. Наприклад, для запису рядка "Привіт JavaScript" у документ, в якому знаходиться сценарій, необхідно: document.write("Привіт JavaScript") Ще одним широко вживаним методом цього об’єкта є getElementById, що реалізує доступ до будь-якого об’єкта з визначеним id. Синтаксис методу такий: document.getElementById(ім’я_id) Наприклад, встановлення значення стилю display елемента з id=myid рівним block, можливо реалізувати так: document.getElementById("myid").style.display="block" Властивості об’єкта location дозволяють одержати інформацію про URL-адресу завантаженої HTML-сторінки. Метод reload дозволяє перезавантажити у браузер поточну HTML-сторінку. Метод replace завантажує у вікно браузера сторінку, адреса якої використана як параметр цього методу. 7.6. Контрольні запитання
З повагою ІЦ “KURSOVIKS”! |