Використання функцій в скриптах

Зручним способом написання програм сценаріїв в JavaScript є використання функцій. Якщо функція повинна виконуватись при завантаженні HTML-документа, то в потрібному місці сценарію має бути оператор виклику функції.

Якщо функція має виконуватись, як реакція на подію, то в html-документі необхідно застосувати html-елемент з потрібним атрибутом обробника події, наприклад onclick.

Оператори виводу. Поширеним оператором, призначеним для виводу інформації в JavaScript є оператор document.write(). В дужках записується інформація, що виводиться. Приклад:

document.write(“Отриманий результат: ”+Y+”<br>”).

Після виконання оператора браузер виведе на екран повідомлення "Отриманий результат:" і значення змінної Y.

Особливості введення/виведення масивів

Масив– це набір даних одного типу з загальним іменем. Доступ до кожного елемента масиву здійснюється за індексом (номером) елемента. Індексація елементів масиву в JavaScript починається з нуля. Масиви створюються в два етапи: 1) оголошується змінна для зберігання масиву, тобто ім’я масиву; 2) виконується активізація масиву.

Існує декілька варіантів введення масиву.

Варіант 1. Введення масиву з допомогою оператора присвоювання в такий спосіб:

var arr; // оголошення масиву з іменем arr (від слова array – масив)

arr=[7,13,5,3,21,18,11]; // присвоєння значень елементам масиву, (кількість елементів – 7).

Варіант 2. Оголошення порожнього масиву:

var arr;

arr==[ ].

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

arr[0]=7;

arr[1]=13;

…

arr[6]=11;

Масив може автоматично розширюватись, якщо індекс елемента перевищить індекс останнього введеного елемента. Якщо оголосити масив у вигляді

var arr;

arr==[ ];

arr[4]=15;

то він буде мати 5 елементів, причому 4 перші елементи матимуть значення undefined (не визначено).

Звернення до окремого елемента масиву здійснюється по імені масиву та індексу елемента. Наприклад, якщо змінній val присвоюється значення val=arr[2], то їй буде надане значення елемента масиву з індексом 2.

Багатовимірні масиви. В JavaScript можна використовувати багатовимірні масиви. Оголосити порожній двовимірний масив (матрицю) можна так:

var arr;

arr==[[ ],[ ] ].

Звернення до елементів масиву пояснює наступний приклад:

Arr[[0],[1]]=25; // елемент на перетині рядка з індексом 0 і стовпця з індексом 1.

Використання в сценаріях об’єктної моделі документа

Скрипт сценарію може бути впроваджений в HTML-документ двома способами: 1) як ствердження чи функція, що використовують тег <SCRIPT>; 2) як обробник результату події.

Web-додатки для обробників подій. За допомогою Web-додатків в браузері в основному здійснюється керування подіями. Має місце визначений набір подій (events), котрі браузер розпізнає і підключає відповідний обробник результату. Обробник результату події записується в документ як атрибут тега HTML, до якого дописується код JavaScript для виконання. Наприклад, якщо створена функція JavaScript з назвою compute, то можна примусити браузер виконувати цю функцію, коли користувач натисне на кнопку, котрій методом onClick призначене виконання обробника результату події:

<input type=”button” value=”calculate” onClick=”compute(this.form)”>.

Об’єктна модель документа. JavaScript є об’єктно-орієнтованою мовою, а тому програмування Web-додатків ґрунтується на використанні об’єктної моделі документа (DOM). Об’єкти з точки зору програміста це – складні типи даних, що утримують сукупність значень змінних (властивостей) і функцій для їх обробки (методів). Ця складність якісно інша, ніж у масивів, файлів чи записів. Масив зазвичай визначається як сукупність елементів одного і того ж базового типу. Запис – сукупність різнотипних даних. Об’єкт – сукупність не тільки даних (частіше за все різних типів), а ще й дій, що застосовуються для обробки цих дій. При об’єктному програмуванні розробник оперує при створенні коду об’єктами, а не архітектурою комп’ютера.

Компоненти-дані об’єктів називають властивостями об’єктів, а функції – методами. Об’єднання в одній структурі даних і виконуваних над ними дій називають інкапсуляцією. Це – перша із особливостей об’єкта. Друга особливість – успадкування. Суть її в тім, що, оголошуючи новий об’єкт, ми маємо можливість включити до його складу всі дані і методи, що наявні в уже відомому об’єкті. Об’єкт-спадкоємець називають породженим типом, а попередник – батьківським. За рахунок успадкування можна створювати ієрархію об’єктів.

Об’єктно-орієнтоване програмування пов’язане з середовищем візуального програмування. Клас в об’єктному програмуванні визначається як особливий вид запису, котрий може складатись з полів, методів і властивостей.

Обробники подій це – методи (процедури і функції) реакції на різні події. Події діляться на три групи: від миші, від клавіатури, системні (програмні). Імена подій прийнято починати з префіксу on: onKeyDown, onKeyPress, onKeyUp, onMauseDown, onMauseMove, onMauseUp, onClick, onClose, onCreate, onActivate і т. д.

Об’єкти одного і того ж типу (що мають однакові набори властивостей і методів) представляють собою екземпляри одного класу. Властивості об’єктів використовуються в програмі як звичайні змінні, які можуть отримувати значення. Методи об’єктів це – функції, що мають виконуватись над цими властивостями. Об’єкти, властивості і методи мають імена. Щоб дізнатись, до якого об’єкта відноситься властивість або метод, в програмі їх імена відділяють з допомогою оператора крапка (.).

Перш ніж застосовувати об’єкт, його спочатку потрібно створити. Це реалізується з допомогою оператора new. Наприклад, оператор

var today new Date()

створює об’єкт today як новий об’єкт в класі об’єктів Date. В даному випадку це – поточні дата і час.

Звернення до властивостей та методів об’єкта може бути таким:

var alpha=Math.Pi;

var rnd=Msth.random().

В JavaScript визначені вбудовані класи об’єктів. Найбільш вживаними серед них є: Array, Date, Number, String, Math.

Клас об’єктів Array дає можливість застосовувати розширений спектр методів з обробки масивів даних. Об’єкти даного класу мають такі конструкції:

array();

array(розмір);

array(елемент1, елемент 2, …).

Наступний приклад розкриває їх сутність

var arr1=new Array(); // Оголошується порожній масив

var arr2=new Array(7); // Об’являється порожній масив з 8 елементів.

var arr3=new Array(7,9,3,4,8); // Масив з елементами 7,9,3,4,8.

Об’єкту Array притаманні свої властивості і методи. Вони будуть розглянуті в наведених далі прикладах.

Клас об’єктів Date. JavaScript не має даних типу Date, проте об’єкти Date часто використовуються в додатках для збереження і обробки значень дати і часу. Конструкції об’єктів класу Date мають наступні формати:

Date();

Date(мілісекунди);

Date(рік, місяць, число, години, хвилини, секунди, мілісекунди).

Згідно першого формату (конструкція без параметрів) об’єкт Date утримує поточні дату і час. За другим форматом задається число мілісекунд, що збігло з 00.00.00 01.01.1970р. Третій формат служить для задання дати і часу. При цьому рік, місяць, число слід вказувати обов’язково, інші параметри можна опускати. Проте якщо потрібно вказати секунди чи мілісекунди, необхідно буде також вказувати години і хвилини. Наприклад:

Date1=new Date(2010,3,17,8,30,0).

За умовчанням задається місцевий час. Для перегляду універсального часу (по Грінвичу) слід користуватись спеціальним методом.

Створення і показ об’єкта Date ілюструє наступний скрипт:

<script>

var today=new Date();

document.write(”Сьогодні:”+today+”.”);

</script>.

Якщо запустити такий скрипт на виконання в браузері, той відобразить поточні дату і час.

Об’єкти класу Date не мають ніяких властивостей, але мають ряд методів. Найбільш вживаними є:

set – метод для установки дати і часу;

get – метод для отримання значень дати і часу з об’єктів Date.

Вказані методи дозволяють керувати компонентами об’єкта Date окремо. Значення компонентів встановлюються наступним чином:

секунди і хвилини – від 0 до 59;

години – від 0 до 23;

день тижня – від 0 до 6;

день місяця – від 1 до 31;

місяці – від 0 (січень) до 11 (грудень);

рік – починаючи з 1900.

Застосування метода get до об’єкта date1 попереднього прикладу може бути таким:

date1.getMonth() – повертає значення місяця поточної дати;

date1.getYear() – повертає значення поточного року.

Клас об’єктів String. Ці об’єкти надають зручні засоби маніпулювання рядками. Конструкції об’єктів класу String мають такі формати:

String() – об’єкт без параметрів;

String(рядок) – об’єкт, що має значення.

Об’єкт без параметрів спочатку має порожній рядок. Згідно другого формату об’єкт початково зберігає якийсь рядок. Наприклад:

var z=new String(“textfirst”).

Клас String підтримує властивість lengh, що задає довжину рядка. Крім того, він підтримує значний ряд методів, сприятливих для обробки текстових даних. Це такі як: anchor(ім’я якоря), big(), blink(), bold(), fontcolor(колір), cartAr(номер), concat(рядок1,рядок2,…), fixed(), fontsize(розмір), italics(), link(адреса), small(), strike() та ін. Призначення цих методів студентам відоме по назвах тегів HTML

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

E – число (константа Ейлера),

LN10 – значення ln10,

LN2 – значення ln2,

LOG10E – значення lg10,

LOG2E – значення log2e,

PI – начення pi,

SQRT1_2 – значення квадратного кореня з 0.5,

SQRT2 – значення квадратного кореня з числа 2.

З об’єктом Math зв’язані і наведені раніше вбудовані математичні функції. Вони є методами об’єкта Math і дозволяють виконувати розрахунки в програмах сценаріїв та створювати динамічні ефекти. Звернення до функцій може бути таким: y=Math.Sin(x).

Об’єкт document. Створення документа є метою кожного програміста. Згідно об’єктної моделі HTML-документ для програміста представляється, як об’єкт document. Це – глобальний об’єкт. З ним пов’язано багато властивостей та методів, які дозволяють здійснювати практично будь-які маніпуляції з HTML-документом завдяки сценаріям JavaScript. Об’єктна модель документа включає як об’єкти, з яких складається документ, так і об’єкти, що дозволяють отримувати різну інформацію про браузер, працювати з вікнами та фреймами.

Властивості об’єкта document зазвичай повертають кольори гіперпосилань або колекції об’єктів: alinkColor, linkColor, bgColor, links, all, anchors, forms, frames, images, URL. В колекціях перебувають об’єкти, котрі дають опис елементів HTML-документа. Такі об’єкти подібні масивам. Вони мають доступ до своїх елементів з допомогою методу item(). Доступ може бути як за номером елемента (атрибут id), так і за іменем (атрибут name). Нумерація елементів колекції здійснюється з нуля. Для колекцій передбачена властивість length, що визначає кількість елементів в колекції. Дії, котрі можна виконувати з елементами HTML-документа визначаються їх властивостями та методами. Це: id (ім’я, присвоєне елементу атрибутом id), height (висота), width (ширина), name (ім’я, присвоєне елементу атрибутом name) та багато інших. Методи зазвичай повертають або видаляють тексти, атрибути елементів, прокрутку.

Об’єкт window. Це – також глобальний об’єкт, що надає можливості з маніпулювання вікном браузера або вікном фрейма, в якому відкрито документ зі сценарієм. З допомогою об’єкта window можна відкривати нові вікна, змінювати фрейми, створювати таймери для здійснення анімацій та виконувати ряд інших привабливих дій.

З об’єктом window зв’язана властивість document, призначенням якої є генерація посилання на об’єкт.

Методами об’єкта window є функції:

alert (текст повідомлення) – показ вікна з повідомленням;

confirm() – виклик вікна повідомлення;

prompt() – виклик вікна вводу текста;

setinterval(функція, інтервал, arg1,…) – задає функцію і інтервал в млсек і повертає в функцію аргументи;

print() – викликає вікно виводу документа на друк.