Тема 6 Основи мови програмування javascript Основи Web-дизайну з курсу Сучасні Internet-технології, НУДПСУ
« Назад
Тема 6. ОСНОВИ МОВИ ПРОГРАМУВАННЯ JAVASCRIPT
6.1. Загальний огляд мови JavaScriptJavaScript - це мова програмування, що використовується у складі HTML-сторінок для збільшення їх функціональності та можливостей взаємодії з користувачем. JavaScript є однією із складових динамічного HTML. Ця мова програмування була створена фірмами Netscape та Sun Microsystems на базі мови програмування Sun's Java. На сьогодні є декілька версій JavaScript. Однією із найбільш поширених є версія JavaScript 1.3. За допомогою JavaScript на HTML-сторінці можна зробити те, що не можливо за допомогою стандартних тегів HTML. Код програми JavaScript розміщується або у середині HTML-сторінки, або у текстовому файлі, що пов’язаний за допомогою спеціальних команд з HTML-сторінкою. Цей код, як правило, розміщується у середині тегу HTML та завантажується у браузер разом з кодом HTML-сторінки. Програма JavaScript не може існувати самостійно, тобто без HTML-сторінки. Виконання програми JavaScript відбувається при перегляді HTML-сторінки у браузері, звісно, тільки у тому випадку, коли браузер містить інтерпретатор JavaScript. Практично всі сучасні популярні браузери оснащені таким інтерпретатором. Зазначимо, що, крім JavaScript, на HTML-сторінках можливо використовувати інші мови програмування. Наприклад, VBScript або JScript, яка є варіантом JavaScript від фірми Microsoft. Але виконання програм VBScript та JScript гарантовано коректне тільки при перегляді HTML-сторінки за допомогою браузера Microsoft Internet Explorer. Тому у більшості випадків використання JavaScript доцільніше, хоча функціональність програм VBScript та JScript дещо краща. Досить часто програму JavaScript називають скриптом або сценарієм. Скрипти виконуються у результаті того, що відбулась деяка подія, пов’язана з HTML-сторінкою. У багатьох випадках виконання вказаних подій ініціюється діями користувача. Скрипт може бути пов’язаний з HTML-сторінкою двома способами: - за допомогою парного тегу SCRIPT; - як оброблювач події, що стосується конкретного тегу HTML. Сценарій, вбудований у HTML-сторінку з використанням тегу SCRIPT, має такий формат: <SCRIPT>
// Код програми
</SCRIPT>
Усе, що розміщується між тегами <SCRIPT> та </SCRIPT>, інтерпретується як код програми на мові JavaScript. Обсяг вказаного коду не обмежений. Інколи скрипти розміщують у середині HTML-коментарію. Це роблять для того, щоб код JavaScript не розглядався старими браузерами, які не мають інтерпретатора JavaScript. У цьому випадку сценарій має формат: <SCRIPT>
<!--
// Код програми
-->
</SCRIPT>
Тег SCRIPT має декілька необов’язкових параметрів. Найчастіше використовуються параметри language та src. Параметр language дозволяє визначити мову та версію мови сценарію. Параметр src дозволяє задати файл з кодом сценарію. Для пояснення використання параметрів тегу SCRIPT розглянемо задачу. Задача. Необхідно для HTML-сторінки hi.htm створити сценарій на мові JavaScript 1.3 для показу на екрані вікна повідомлення з текстом "Привіт!". Зазначимо, що для показу на екрані вікна повідомлення можливо використати функцію alert. Для ілюстрації можливостей пов’язування скриптів з HTML-кодом розв’яжемо задачу двома варіантами. Варіант 1. Визначення сценарію безпосередньо на HTML-сторінці hi.htm <html><head> <title>Використання JavaScript</title> </head> <body> <script language="JavaScript1.3"> alert('hi'); </script> </body></html> Варіант 2. Визначення сценарію у файлі a.js, пов’язаному з HTML-сторінкою hi.htm за допомогою параметра src тегу SCRIPT. Код HTML-сторінки hi.htm: <html><head> <title>Використання JavaScript</title> <script language="JavaScript1.3" src="a.js"> </script> </head><body> </body></html> Програмний код, записаний у файлі a.js: alert('hi'); Результат виконання обох варіантів вирішення задачі однаковий і поданий на рис. 6.1. Змінні та вирази JavaScript можливо використовувати як значення параметрів тегів HTML. У цьому випадку елементи JavaScript розміщуються між амперсандом (&) та крапкою з комою (;), але повинні бути обмежені фігурними дужками {} і використовуватись тільки як значення параметрів тегів. Наприклад, нехай визначена змінна с, якій присвоєно значення green. Наступний тег буде виводити текст зеленого кольору: <font color="&{c};"> текст зеленого кольору </font> Зазначимо, що мінімальним комплектом програмного забезпеченням для розробки та тестування програм JavaScript є текстовий редактор та браузер з підтримкою JavaScript. 6.2. Синтаксис. Визначення та ініціалізація зміннихСценарій JavaScript являє собою набір операторів, що послідовно інтерпретуються браузером. Оператори можливо розміщувати як у одному, так і у окремих рядках. Якщо оператори розміщені у одному рядку, то між ними необхідно поставити ;. У іншому випадку ; ¾ не обов’язкова. Будь-який оператор можна розмістити у декількох рядках без символу продовження. Будь-яка послідовність символів, розміщених у одному рядку, якій передує //, розглядається як коментар. Для визначення багаторядкових коментарів використовується конструкція: /* Багаторядковий коментар */ У мові JavaScript рядкові та приписні букви вважаються різними символами. JavaScript використовує змінні для зберігання даних визначеного типу. При цьому JavaScript є мовою з вільним використанням типів. Тобто не обов’язково задавати тип змінної, який залежить від типу даних, що у ній зберігаються. При зміні типу даних автоматично змінюється і тип змінної. JavaScript підтримує чотири простих типи даних. Ілюстрацією цього є табл. 6.1. Для присвоєння змінним значень основних типів використовуються літерали. Таблиця 6.1 Типи даних JavaScript
Ім’я змінної повинно містити тільки букви латинського алфавіту, символ підкреслення _, арабські цифри та починатись з букви або символу підкреслення _. Довжина імені повинна бути менша від 255 символів. Заборонено використовувати імена, що збігаються з ключовими словами JavaScript. Приклади імен: _hello, go, go123. Визначити змінну можливо: - оператором var, наприклад var a; - при ініціалізації, за допомогою оператора присвоєння (=), наприклад b=126. Визначення та ініціалізацію змінних можливо реалізувати у будь-якому місці програми. 6.3. Вирази та операториВираз - це комбінація змінних, літералів та операторів, у результаті обчислення яких можливо отримати тільки одне значення, яке може бути числовим, рядковим або булевим. Для реалізації обчислень у JavaScript використовуються арифметичні, рядкові, логічні вирази та декілька типів операторів. Арифметичні вирази обчислюють число, наприклад а=7+5; Рядкові вирази обчислюють рядок символів, наприклад "Джон" або "234". Логічні вирази обчислюють true (істина) або false (хибна). Оператор присвоювання (=) присвоює значення лівому операнду, базуючись на значенні правого операнда. Наприклад, для присвоєння змінній а значення числа 5 необхідно записати: а=5 До стандартних арифметичних операторів належать: оператори додавання (+), віднімання (-), множення (*), ділення (/), остача від ділення чисел (%), збільшення числової змінної на 1 (++), зменшення числової змінної на 1 (--). Зазначимо, що оператор додавання можна використовувати не тільки для чисел, але й для додавання (контрактації / конкатенації) текстових рядків. Для створення логічних виразів використовуються логічні оператори та оператори порівняння. До логічних операторів належать - логічне І (&&), логічне АБО (||), логічне НІ (!). Оператори порівняння не відрізняються від таких операторів у інших мовах програмування. До операторів порівняння належать (==, >, >, =<, <=,!=). 6.4. Оператори виборуОператори вибору належать до операторів управління, призначенням яких є зміна напряму виконання програми. Крім операторів вибору до операторів управління відносять: операторів циклу та операторів маніпулювання об’єктами. Оператори вибору призначені для виконання деяких блоків операторів залежно від істинності деякого логічного виразу. До операторів вибору належать: оператор умови if...else та перемикач switch. Синтаксис оператора умови такий: if (умова) { група операторів 1 . . . . . . . . . } [else] { група операторів 2 . . . . . . . . . } Перша група операторів виконується за умови істинності виразу умова. Необов’язковий блок else визначає другу групу операторів, яка буде виконуватись у випадку хибності умови, заданої у блоці if. У середині групи операторів можуть бути використані будь-які інші оператори, у тому числі і інші оператори умови. Це дозволяє створювати групу вкладених операторів умови if та реалізовувати складні алгоритми перевірки. Однак, якщо кількість вкладених операторів if більша за три, то програма стає складною для розуміння. У такому випадку доцільно використовувати оператор switch. У цьому операторі обчислюється деякий вираз та порівнюється з значенням, заданим у блоках case. Синтаксис оператора switch такий: switch (вираз) { case значення1: [оператори1] break; case значення2: [оператори2] break; ... default: [оператори] } Якщо значення виразу у блоці switch дорівнює значення1, то виконується група операторів оператори1, якщо дорівнює значення2, то виконується група операторів оператори2 і так далі. Якщо значення виразу не дорівнює ні одному із значень, що задані у блоках case, то обчислюється група операторів блоку default, якщо це блок заданий, інакше - виконується вихід із оператора switch. Необов’язковий оператор break, який можливо задавати у кожному із блоків case, виконує безумовний вихід із оператора switch. Якщо він не заданий, то продовжується виконання операторів у наступних блоках case до першого оператора break або до кінця оператора switch. 6.5. Оператори циклуЦикл - це деяка група команд, що повторюється доки вказана умова не буде виконана. JavaScript 1.3 підтримує дві форми циклу: for та while. Крім того, оператори break та continue використовуються разом з циклами. Цикл for повторює групу команд до того часу, доки вказана умова хибна. Синтаксис оператора for такий: for ([initial-expression]; [condition]; [increment-expression])
{
statements
}
Виконання циклу for проходить у такій послідовності: 1. Вираз initial-expression слугує для ініціалізації змінної лічильника. Цей вираз розраховується один раз на початку виконання циклу 2. Вираз condition розраховується на кожній ітерації циклу. Якщо значення виразу condition дорівнює true, виконується група операторів statements у тілі циклу. Якщо значення виразу condition дорівнює false, то цикл forзакінчується. Якщо вираз condition пропущено, то він вважається рівним true. У цьому випадку цикл продовжується до оператора break. 3. Вираз increment-expression використовується для зміни значення змінної лічильника. 4. Розраховується група операторів statements та реалізується перехід на наступну ітерацію циклу, тобто на крок 2. Приклад. Цикл для розрахунку суми цілих чисел від 1 до 100. s=0
for (i=1;i<101;i++) {
s=s+1;
}
З повагою ІЦ “KURSOVIKS”! |