1. Перші кроки

1. Перші кроки

Що таке JavaScript?
      JavaScript — мова програмування для створення інтерактивних Web-сторінок. Далі Ви ознайомитеся, що і як можна зробити з допомогою цієї мови.

JavaScript — це не Java!
      Дехто може подумати, що JavaScript — це те саме, що й Java, бо ці мови мають схожі назви. Насправді це не так. На початку знайомства з мовою недоречно подавати усі відмінності між цією мовою та іншою. Достатньо запам'ятати таке. Java — це об'єктно-орієнтована мова програмування, коди якої перед запуском програми опрацьовує компілятор.
      Створені з допомогою Java програми працюють як завершені додатки або як вбудовані у Web-сторінку аплети. Незважаючи на таку вбудованість, їх зберігають на ПК-клієнті як окремі файли.
      На відміну від цього код JavaScript розташовують всередині HTML сторінки. Він не може діяти як окрема програма, а працює запущеним у проглядачах Internet Explorer, Netscape Navigator, Google Chrome, Mozilla FireFox тощо. Наступна таблица порівнює JavaScript и Java.

JavaScript	Java
Не компільований клієнтом	Компільований клієнтом перед запуском
Інтегрований в HTML-сторінку	Додатки, окремі від HTML-сторінок
Змінні типи даних, які не оголошуюють	Суворий контроль типів даних
Динамічне закріплення. Посилання об'єкта перевіряють під час виконання	Статичне закріплення. Посилання об'єкта перевіряють під час компіляції

Використання JavaScript
Що потрібно, щоб використовувати скрипти, написані мовою JavaScript? Вам потрібен браузер, спроможний працювати з JavaScript. Наприклад, сучасні версії перелічених вище проглядачів. Перед знайомством з мовою JavaScript потрібно познайомитися з основами іншої мови — HTML.

Розташування коду JavaScript на сторінці HTML
Код JavaScript разташовують безпосредньо на HTML-сторінці. Продемонструємо це таким простим прикладом.

<html><body>Це звичайний документ HTML.<br>
       <script language="JavaScript">
       document.write("А це JavaScript!")
       </script><br>
Знову документ HTML.
</body></html>

Власне кодом JavaScript є такі три рядки:

       <script language="JavaScript">
       document.write("А це JavaScript!")
       </script>

      Завантаживши такий файл HTML у браузер з підтримкою JavaScript, отримаємо 3 рядки (гарнітура й написання залежать від налаштувань браузера):

Це звичайний документ HTML.
А це JavaScript!
Знову документ HTML.

      Поданий приклад не є змістовним, але він демонструє: тег ознаки <script>. Все, розташоване між тегами <script> i </script>, тлумачать як код мовою JavaScript. Також показано дію вказівки document.write() для тексту у поточному документі. Наразі таким є документ HTML.

Дії браузерів без підтримки JavaScript
      Браузер без підтримки JavaScript (пошукайте серед перших версій сучасних браузерів) ігнорують тег <script> і відображають усі наступні за ним символи як звичайний текст. Інакше кажучи, користувач побачить код JavaScript вписаним всередину документу HTML.

Події
      Події й опрацювання подій є істотньою частиною програмування мовою JavaScript. Події переважно спричиняються діями користувача. Програми опрацювання подій (обробники подій) описано далі таким чином:

назва програми — подія — зміст події та зауваження щодо її опрацювання:

onBlur — blur — поля форми select, text чи textarea гублять фокус;
onChange — change — поля форми select, text чи textarea гублять фокус, а їхні величини змінюються;
onClick — click — клацання мишею на об'єкті форми;
onFocus — focus — поле отримує фокус введення з клавіатури чи клацанням миші. Вибір результатів всередині поля з подією select, а не з подією focus;
onLoad — load — завершення завантаження вікна або всіх фреймів всередині тегу FRAMESET. Використовують всередині тегів BODY або FRAMESET. Наприклад, <BODY onLoad="…">. Робота onLoad, описана всередині фрейма в тезі BODY, виконується до роботи onLoad, описаної всередині тегу FRAMESET в тезі FRAMESET;
onMouseOver — mouseOver — курсор миші на об'єкті. Повернення true всередині опрацювання події, якщо потрібно використати властивості status або defaultStatus;
onSelect — select — користувач вибирає певний текст всередині поля text або textarea;
onSubmit — submit — користувач відправляє форму на Web-сервер. Можна використати для зупинки передавання даних форми при return=false і лише при такій величині;
onUnload — unload — Вихід з документу. Використовують всередині тегів BODY чи FRAMESET. Наприклад, <BODY onUnload="…">. Виконання onUnload, описаного всередині фрейму тега BODY, відбувається перед подією onUnload, описаною всередині FRAMESET у тезі FRAMESET.

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

<form><input type="button" value="Приклад з alert"
onClick="alert('Бачиш, що вийшло?')"></form>

      У поданому прикладі засобами HTML створено форму з кнопкою. Але є нововведення: onClick="alert('Бачиш, що вийшло?')" всередині <input>. Саме цей атрибут визначає відповідь на подію натискання на кнопку з написом "Натисни на мене". Такою відповіддю є виклик alert('Бачиш, що вийшло?'). Зауважимо, що у даному випадку навіть немає потреби використовувати тег <script>).
      Функція alert() створює випадні вікна. Викликаючи її, потрібно задати у дужках рядок тексту. У поданому прикладі це 'Бачиш, що вийшло?'. Саме цей текст з'явиться у випадному вікні.
      Може здивувати те, що раніше у вказівці document.write() було використано подвійні лапки ("), а зараз у вказівці alert() — одинарні ('). Зазвичай можна використовувати обидва типи лапок. Але у вказівці onClick="alert('Бачиш, що вийшло?')" використано обидва типи одночасно. Чому? При використанні лише одного типу лапок неможливо було б визначити, до якої з частин вказівки має відношення функція опрацювання подій onClick, а до якої — не має. Тому використання обох типів лапок у даному випадку вимушене. Не істотньо, у якому порядку використовувати лапки: одинарні всередині подвійних чи навпаки. Інакше кажучи, можна писати й так:

onClick='alert("Бачиш, що вийшло?")'

Наступний код створює випадне вікно, в яке можна ввести послідовність символів.

<form><input type="button" value="Приклад з prompt" 
onClick="var str=prompt('Введіть хоча б один символ','Набирати тут'); alert('Введено: '+str)">
</form>

Змінні
      У сценаріях JavaScript можна використовувати змінні, звертаючись до них за назвою. Змінні можуть бути глобальними або локальними. Глобальні змінні досяжні з довільного місця сценарію. Область дії локальних змінних обмежено кодом функції, всередині якого оголошено ці змінні. При створенні сценаріїв JavaScript рекомендовано оголошувати змінні до їхнього використання та надавання початкових величин. Це спрощує відлагодження сценаріїв і зменшує ймовірність помилки.
      Оголошення змінної у JavaScript — за допомогою ключового слова var таким чином: var назва змінної;
      Тип змінної JavaScript надає лише при наданні змінній певної величини. Після такого надання назва змінної стане доступною, навіть якщо її попередньо не було оголошено.
      Назва змінної:

має починатися начинаться з літери латиниці або символів "_" чи "$", містити лише літери латиниці, цифри і символи "_" та "$";

не може збігатися з жодним з таких зарезервированих слів JavaScript:break case catch class const continue debugger default delete do else enum export extends false finally for function if import in new null return super switch this throw true try typeof var void while with

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

var Hello;
Hello = "Привіт!";

При цьому у довільному місці програми змінній Hello можна надати числельну величину, наприклад, так:

Hello = 4;

Після здійснення такої операції тип змінної буде змінено, але у процесі інтерпретації сценарію не буде зроблено жодного попереджувального повідомлення. Змінній можна надати спеціальну величину null. У цьому пипадку змінній не призначено жоден з типів.
      Тип число допускає використання різних форматів, наприклад,:
25 — запис цілого числа у десятковій системі числення;
0137 — запис цілого числа у вісімковій системі числення;
0xFF — запис цілого числа у шістнадцятковій системі числення;
386.7 — запис дійсного числа с плавающей десятковою крапкою;
25e5 або 25E5 — запис дійсного числа в науковій нотації, дорівнює 25 ∙ 10⁵.
      Якщо результат виконання операцій з числами не можна подати числом, то повертається величина NaN (від англійською Not a Number).
      Тип текстовий рядок описує послідовність символів між лапками (' або ", але одного вигляду). Зауважимо, порожній рядок відмінний від null.
      Тип логічних даних передбачає лише дві величини: true і false.
      Якщо змінну було оголошено, але їй не було надано величини, вона має невизначений тип.
      Якщо у виразах зустрічаються змінні різних типів, інтерпретатор JavaScript може автоматично перетворити числові дані в рядки тексту. Перетворення рядка у число виконують лише з допомогою спеціальних функцій parseInt (у ціле) і parseFloat (у дійсне).

Оператори

      Унарні (для одного аргумента) оператори застосовують для зміни знаку, заперечення, збільшення (інкременту) чи зменшення (декременту):
- — зміна знаку на протилежний;
! — заперечення (логічної змінної);
++ — збільшення на 1 цілої величини змінної;
-- — зменшення на 1 цілої величини змінної.
Перші два оператори записують як префікс (перед операндом), останні два — і як префікс, і як суфікс (після операнда)

      Бінарні оператори записують між двома операндами. У мові JavaScript передбачено такі бінарні оператори:
- — віднімання;
+ — додавання;
* — множення;
/ — ділення;
% — лишок від ділення.

      Перелічимо оператори для роботи з окремими бітами:
& — і;
| — або;
^ — або ... або ...;
~ — заперечення.

      Оператори зсуву у мові JavaScript такі:
>> — зсув праворуч;
<< — зсув ліворуч;
>>> — зсув праворуч з заповненням звільнених розрядів нулями.
      Перелічені оператори зсуву і для роботи з окремими бітами перед визначенням результату перетворюють велечини змінних у 32-розрядні (у двійковій системі) цілі числа.

      Оператори відношення використовують для порівняння величин змінних. Ці оператори повертають логічні величини true або false залежно від результату порівняння. Їх використовують переважно в умовних операторах. Подамо перелік операторів відношення мови JavaScript з вказанням умови повертання величини true:
> — лівий операнд більший за правий;
>= — лівий операнд не менший за правому;
< — лівий операнд менший за правий;
<= — лівий операнд не більший за правий;
== — величини операндів збігаються;
!= — величини операндів різні.

      Логічні оператори:
|| — оператор «або», який повертає true, якщо хоча б один з операндів дорівнює true;
&& — оператор «і», який повертає true, якщо обидва операнди дорівнюють true.

      Оператор надання величини у мові JavaScript, як у мові С, можна використовувати у поєднанні з іншими для зміни величини змінної. Перелічимо всі можливі такі поєднання:
= — звичайне надання величини;
+= — збільшення числової величини або злиття рядків;
-= — зменшення числової величини;
*= — множення;
/= — ділення;
%= — лишок від ділення;
>>= — зсув праворуч;
>>>= — зсув праворуч з заповненням звільнених розрядів нулями;
<<= — зсув ліворуч;
|= — «або»;
&= — «і»;
^= — «або ... або ...».

      Для тих, хто не знайомий з мовою С, комбинації оператора надання величини з іншими операторами можуть видатися незвичними й складними у використанні. Але насправді вони спрощують сценарії, скорочуючи код. Порівняйте такі два рядки:

var number = 1; number = number + 3; var number = 1; number += 3;

Результати виконання обох фрагментів збігаються, але другий фрагмент коротший.
      Зсув вмісту змінної number на 4 розряди праворуч можна також здійснити двома способами:

number = number >> 4; number >>= 4;

      Умовний оператор має такий вигляд:
if (умова) оператор₁ або
if (умова) оператор₁ else оператор₂.
При справдженні умови проглядач виконує оператор₁. Для другої повної форми при хибності умови проглядач виконує оператор₂

      Оператор вибору має такий вигляд:switch (вираз) { case величина: оператори break; case величина: оператори break; ...default: оператори}
Тут спочатку обчислюють величину виразу. Потім перевіряють, чи немає цієї величини після однієї з міток case величина. Якщо така мітка є, то виконують оператори після неї, інакше виконують оператори після мітки default. Якщо остання відсутня, то переходять до виконання наступного за switch оператора. Необов'язковий оператор break вказує: після виконання операторiв керування передати наступному за switch оператору. Якщо відсутній, то після виконання операторiв виконують оператори, розташовані після наступної мітки case.

      Оператори циклу використовують для багатократного виконання послідовності операторів поки певне висловлювання не стане хибним. Схожий на оператори циклу оператор ітерації for…in, який використовують при роботі з об'єктами. JavaScript має 3 форми оператора циклу:

for (ініціалізація; висловлювання; змiнa) оператор
Оператор for працює так.
1. Здійснюють ініціалізація (лічильнику (лічильникам) циклу надають початкової величини.
2. Встановлюють істинність висловлювання. При хибності переходять до наступного за for оператора.
3. Виконують оператор.
4. Виконують зміну (зазвичай це збільшення або зменшення лічильника) і переходять до пункту 2.
Наприклад, for (var i = 0; i < a.length; i++) a[i] = 0; надає величину 0 усім елементам масиву a.
while (висловлювання) оператор
Оператор while працює так.
1. Встановлюють істинність висловлювання. При хибності переходять до наступного за while оператора.
2. Виконують оператор і переходять до пункту 1.
do оператор while (висловлювання)
Оператор do … while працює так.
1. Виконують оператор.
2. Встановлюють істинність висловлювання. При хибності переходять до наступного за do … while оператора.
3. Переходимо до кроку 1.
На відміну від попереднього оператора циклу, цей виконує оператор хоча б один раз.

Мітки використовують для того, щоб вказати адресу переходу до оператора чи групи операторів. Роблять це таким чином: мітка: оператор. Міткою може бути довільна послідовність символів, що може бути назвою змінної (не є зарезервованим словом).

Оператор break перериває виконання поточного циклу, оператора switch або поміченого оператора й передає керування наступному за перериванням оператору. Його можна використосувати лише всередині циклів for, while, do…while або for…in, а також всередині оператора switch. Є дві форми цього оператора: break та break мiтка. Перша форма лише перериває виконання самого внутрішнього циклу, а друга додатково здійснює перехід на задану мітку. Подамо приклад оператора break у тілі функції, що повертає найменший номер елемента масиву, величина якого дорівнює заданій, або кількість елементів масиву, якщо такого елемента немає.

function findValue(a, theValue)
{ for (var i = 0; i < a.length; i++)
  { if (a[i] == theValue) break;
  }
  return i;
}

Оператор continue має дві форми:continue і continue мiтка. Перша форма оператора лише завершує поточну ітерацію самого внутрішнього з циклів. Друга форма оператора завершає поточну ітерацію самого внутрішнього з циклів з заданою міткою. При цьому перехід до наступної ітерації циклу здійснюється таким чином:

цикли while і do…while перевіряють істинність висловлювання — умови циклу. При істинності починають чергове виконання циклу;
цикл for здійснює зміну, перевіряють істинність висловлювання — умови циклу. При істинності починають чергове виконання циклу;
цикл for…in переходить до наступного поля змінної і починає чергове виконання цикла.

У наступному прикладі змінну n знайдено як суму чисел 1, 2, 4 і 5.var i = 0; var n = 0; while (i < 5) { i++; if (i == 3) continue; n += i; }

Оператор for…in виконує задані дії для кожної властивості об'єкта чи для кожного елемента масиву і має такий вигляд:

for (змінна in вираз) оператор

Оператор for…in діє таким чином:

Змінній надає назву чергової властивості об'єкту чи чергового елемента масиву (залежно від природи виразу).
Виконують оператор.
Переходять до етапу 1.

При ітерації властивостей об'єкту неможливо передбачити, в якому порядку їх буде проглянуто. Але їх буде проглянути усі без виключення. Подамо приклад створення об'єкту ob з наступним послідовним виведенням усіх його властивостей на екран користувача.

<html><script>
var ob = {"а": "Літера а", "б" : 2012};
for (var key in ob) document.write(key+": "+ob[key]+"<BR>");</script></html>

На екрані побачимо такий текст:
а: Літера а
б: 2012

Оператор with задає назву об'єкту за замовчуванням і має такий вигляд:

with (вираз) оператор

Цей оператор діє таким чином. Для кожної назви в операторi перевіряють, чи є вона назвою властивості об'єкту, заданого згідно із замовчуванням. Якщо відповідь ствердна, то цю назву вважають назвою відповідної властивості, інакше — назвою змінної. Це допомагає скоротити код. Например, для доступу до математичних функцій маємо кожного разу вказувати назву об'єкту Math, як у такому коді:

x = Math.cos(Math.PI / 2) + Math.sin(Math.LN10) + Math.tan(2 * Math.E);

Того самого можна досягнути таким чином:with (Math) { x = cos(PI / 2) + sin(LN10) + tan(2 * E);};

Оператор with можна застосовувати лише до наявних методів.

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

      Оператор try…catch використовують для опрацювання такого виключення. Він має такий вигляд:

try { оператор₁ } catch ( виключення ) { оператор₂ }

Тут виключення — довільна назва змінної, оператор₁ — містить код, що може спричинити виключення. Якщо виключення не відбулося, то після виконання оператору₁ здійснюють перехід до наступного за try…catch оператору. Інакше інформацію про виключення зберігають як величину локальної змінної виключення, а керування передають оператор₂, який має містити код опрацювання цього виключення. Якщо виключення неможливо на даному рівні опрацювати, то оператор₂ має містити оператор throw для переходу до опрацювання виключення на вищому рівні (див. далі).

      Оператор throw породжує виключення, яке вже можна опрацювати оператором try…catch. Він має такий вигляд:

throwвиключення

Тут виключення — довільний вираз, величину якого надають локальній змінній, вказаній в операторі catch. Подамо приклад породження й опрацювання виключення.

<html><body><script>
var e;
function getMonthName(m)
{ var months=new Array("січень","лютий","березень","квітень","травень",
  "червень","липень","серпень","вересень","жовтень","листопад","грудень");
  m = m - 1;
  if (months[m] != null) return months[m]
  else throw "trow";   
}
try       { monthName = getMonthName(7)}
catch (e) { monthName="Неправильний № місяця"};
document.write(monthName);
</script></body></html>

При заміні (7) на (77) замість слова «липень на екрані побачимо текст: «Неправильний № місяця».

      Функції
      У багатьох випадках функції є способом зв'язати разом кілька вказівок для того, щоб зручним для себе чином викликати їх з різних ррядків коду. Зазвичай функції описують у розділі заголовку документу HTML, виділеного контейнером <HEAD> i </HEAD>. Функцію потрібно означити перед викликом. Розташування всіх означень функцій саме в розділі заголовку документу HTML гарантує доступ до цих функцій при опрацюванні документу.
      Загальний вигляд опису (означення) функції такий:

function назва ([параметр 1] [,параметр 2] [...,параметр N])
{  . . .
  рядки тіла функції
  . . .
  [return величина]
}

У мові JavaScript діють такі правила передавання аргументів функції:

Аргументи примітивних типів передають функції за величиною. Інакше кажучи, формальним аргументам надають величини фактичних аргументів на момент виклику. Якщо в тілі функції буде змінено величину аргумента, то ця зміна не стосується змінної, величину якої передано як аргумент.
Об'єкти і вбудовані, і визначені користувачем (про об'єкти та їх ієрархію див. ) передають за посиланням. Інакше кажучи, всі зміни властивостей об'єкту в тілі функції виконують безпосередньо в самому об'єкті, а не в його локальній копії. Такі зміни зберігаються після повернення з функції.

      З допомогою оператора return функція може повернути величину. Цей оператор дві форми: return вираз або return.
      Перша форма оператора return вираз завершує виконання функції і повертає величину виразу. Функцію з таким оператором викликають як частину виразу оператора надання величини (аналог мови Pascal — function).
      Друга форма оператора return завершає виконання функції і повертає величину undefined. Функцію з таким оператором викликають як оператор (аналог мови Pascal — procedure).
      Якщо тело функція не містить оператора return, то її виконання завершується з виконанням останнього оператора тіла функції і повертає величину undefined.
      Подамо приклад багатократного друку певного тексту.

<html>
<script language="JavaScript">
<!-- hide

function myFunction()
{
  document.write("Цей текст потрібно надрукувати.<br>");
  document.write("І це текст також!<br>");
}
myFunction();
myFunction();
myFunction();
// -->
</script>
</html>

У поданому коді визначено функцію такими рядками:

function myFunction()
{
  document.write("Цей текст потрібно надрукувати.<br>");
  document.write("І це текст також!<br>");
}

      Всі вказівки, что розташовані всередині фігурних дужок належать до означення функції myFunction(). Таким чином, обидві вказівки document.write() тепер пов'язані й обидві будуть виконані у результаті кожного виклику вказаної функції (у поданому прикладі — тричі).
      Поданий простий приклад ще не показує, чому функції такі важливі в JavaScript. Це стане зрозумілим після знаймства з усією публікацією.
      Функції можна використати разом з процедурами опрацювання подій. Розглянемо такий приклад:

<html><head>
<script language="JavaScript">
<!-- hide
function calculation()
{
  var x= 3;
  var y= 2;
  var result= x + y*y/3;
  alert(result);
}
// -->
</script>
</head>

<body>
<form><input type="button" value="Обчислити" onClick="calculation()"></form>
</body></html>

Можете перевірити, натиснувши наступну кнопку.

Тут при натисканні на кнопку виклакають функцію calculation(). Ця функція здійснює певні арифметичні обчислення, використовуючи змінні x, y и result. Змінну означають з допомогою кодового слова var. Змінні використовують для зберігання чисел, рядків тексту і т.і. Рядок

  var result= x + y*y/3;

повідомляє проглядачу: потрібно створити змінну result й розташувати у відповідній комірці пам'яті результат виконання арифметичних дій x + y²/3, тобто 3 + 2²/3 = 3 + 4/3 = 4.(3). Вказівка alert(result) здійснює те саме, щой й alert(4.333333333333333). Інакше кажучи, випадає вікно з числом 4.333333333333333.
В мові JavaScript припустимим є виклик в тілі функції самої цієї функції. У цьому випадку функцію називають рекурсивною. В багатьох випадках використання рекурсії дозволяє записати короткий код замість складних вкладених циклів. Але потрібно врахувати, що рекурсія працює повільніше за традиційні цикли. Тому користуватися рекурсією потрібно лише тоді, коли це виправдано. Неакуратно написанна чи використана рекурсивна функція може війти нескінчену послідовність викликів функції самою себе і ніколи не повернути результат. Наприклад, при спробі обчислити факторіал, задавши від'ємний аргумент.

[попереднє] [зміст] [наступне]