Роздрукувати сторінку
Главная \ Методичні вказівки \ Методичні вказівки \ 852 Тема 7 Розширені можливості javascript Основи Web-дизайну з курсу Сучасні Internet-технології, НУДПСУ

Тема 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. Об’єктна модель JavaScript

JavaScript належать до об’єктно-орієнтованих мов програмування. Об’єкт – це цілісна конструкція, що має властивості, які є змінними 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

Подія

Характеристика події

Обробник події

Click

Клік кнопкою миші на елементі форми або гіперпосилання

onClick

KeyDown

Натиск на клавіші клавіатури

onKeyDown

Load

Завантажується документ у браузер

onLoad

MouseDown

Натиск на кнопці миші

onMouseDown

MouseOver

Курсор знаходиться над елементом

onMouseOver

MouseOut

Курсор залишає зону над елементом

onMouseOut

Задача. Необхідно, щоб при наведенні курсору на комірку таблиці із написом "Привіт" з’являлось вікно повідомлення з фразою "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

Метод

Призначення

concat

Об’єднує два масиви у один.

join

Об’єднує всі елементи масиву у один рядок.

pop

Знищує останній елемент із масиву і повертає його значення.

push

Додає один або декілька елементів у кінець масиву  і повертає останній доданий елемент

reverse

Переставляє елементи масиву у зворотному порядку: перший елемент стає останнім, а останній першим

shift

Знищує перший елемент масиву і повертає його значення

slice

Створює перетин масиву у вигляді нового масиву

splice

Додає та/або знищує елементи масиву

sort

Сортує елементи масиву

unsift

Додає один або більше елементів у початок масиву та повертає нову довжину масиву

Об’єкт Date використовується для роботи з датами. Синтаксис оператора створення екземпляра об’єкта дати:

ім’я_об’єкта_дати = new Date([параметри])

Якщо параметри відсутні, то значенням об’єкта буде поточна дата. Параметром може бути рядок типу: "місяць день рік години хвилини;секунди".

Наприклад, для створення дати  - "5 лютого 2005 року 23:12:07" необхідно:

day = new Date("February 5, 2005 23:12:07")

Прочитати або змінити параметри створеного об’єкта Date можливо за допомогою ревних методів.

Найбільш вживані методи показані у табл. 7.3

Таблиця 7.3

Методи  об’єкта Date

Метод

Призначення

getDate

Повертає число місяця для вказаної дати

getDay

Повертає день тижня для вказаної дати

getHours

Повертає годину для вказаної дати

getMinutes

Повертає хвилини для вказаної дати

getMonth

Повертає місяць для вказаної дати

getSeconds

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

getYear

Повертає рік для вказаної дати

setDate

Встановлює число місяця для вказаної дати

setDay

Встановлює день тижня для вказаної дати

setHours

Встановлює годину для вказаної дати

setMinutes

Встановлює хвилини для вказаної дати

setMonth

Встановлює місяць для вказаної дати

setSeconds

Встановлює секунди для вказаної дати

setYear

Встановлює рік для вказаної дати

Об’єкт Math дозволяє використовувати вбудовані у JavaScript математичні функції та константи.  При зверненні до методів та властивостей цього об’єкта створювати його не потрібно, але необхідно явно вказувати його ім’я.

Наприклад для того, щоб записати  у змінну а результат розрахунку функції sin від 1 радіана, необхідно:

a = Math.sin(1)

Для того, щоб записати  в змінну а результат виразу 5 у степені 6, необхідно:

a = Math. pow(5,6)

Методи об’єкта  Math, що використовуються найчастіше подані в табл. 7.4.

Таблиця 7.4

Методи  об’єкта Math

Метод

Призначення

abs

Повертає абсолютне значення змінної

sin, cos, tan

Повертають значення тригонометричних функцій. Аргументи задаються у радіанах

acos, asin, atan

Повертають значення обернених тригонометричних функцій

exp, log

Повертають значення експоненціальної функції та функції натурального логарифму

ceil

Повертає найменше ціле число, більше або рівне значенню аргументу

floor

Повертає найменше ціле число, менше або рівне значенню аргументу

min, max

Повертає найбільше/найменше значення з двох аргументів

pow

Повертає значення функції: pow(x,y)=xy

round

Повертає  значення аргументу, округлене до найближчого цілого числа

sqrt

Повертає квадратний корінь аргументу

Об’єкт 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

Метод

Призначення

anchor

Створює HTML якір, який використовується, як гіпертекстове посилання

link

Створює гіпертекстове посилання, за яким можливо перейти на інший URL

fontsize

Виводить рядок з встановленим розміром шрифта

bold

Виводить рядок, що відображається напівжирним шрифтом

italics

Виводить рядок, що відображається курсивом

strike

Виводить рядок, що відображається перекресленим шрифтом

substring

Повертає частину рядка об’єкта string

sub

Виводить рядок, що відображається як нижній індекс

sup

Виводить рядок, що відображається як верхній індекс

toLowerCase,

toUperCase

Переводить зміст рядка у нижній/верхній регістр

На додаток до стандартних об’єктів 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

Основні параметри вікна

Назва

Призначення

Можливі значення

Directories

Наявність/відсутність панелі "Ссылки"

yes/no

Height

Висота вікна

кількість пікселів

Location

Наявність/відсутність адресного рядка

yes/no

Menubar

Наявність/відсутність рядка меню

yes/no

Resizable

Можливість/неможливість зміни розмірів віна користувачем

yes/no

scrollbars

Наявність/відсутність смуг прокрутки віна

yes/no

status

Наявність/відсутність рядка стану браузера

yes/no

toolbar

Наявність/відсутність панелей інструментів

yes/no

width

Ширина вікна

кількість пікселів

Наприклад, для створення нового вікна браузера, у якому буде завантажено файл  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. Контрольні запитання

  1. Правила запису функцій.

  2. Що таке об’єкт у мові JavaScript?

  3. Як визначити об’єкт користувача у JavaScript?

  4. Стандартні об’єкти JavaScript.

  5. Як реалізована інтерактивність у JavaScript?

  6. Стандартні функції JavaScript.

  7. Методи та властивості об’єкта Array.

  8. Методи та властивості об’єкта Date.

  9. Методи та властивості об’єкта Math.

  10.  Методи та властивості об’єкта String.

  11.  Методи та властивості об’єкта Window?

  12.  Як за допомогою JavaScript відкрити нове вікно браузера ?

  13.  Як за допомогою JavaScript запрограмувати виконання деяких команд після закінчення встановленого терміну часу?

  14.  Методи та властивості об’єкта Document.

  15.  Методи та властивості об’єкта Location.

З повагою ІЦ “KURSOVIKS”!