Основи Javascript

Поняття мови сценаріїв Javascript

Для того, щоб “оживити” сторінку, змусити її реагувати на певні дії користувача, використовують мови сценаріїв, такі як JavaScript (JScript), VBScript.

Вивчати сценарії будемо на прикладі мови сценаріїв JScript. JScript не є складовою частиною HTML, але працює в тісному зв’язку з ним. HTML – мова розмітки, призначена для оформлення елементів Web-сторінки. JScript – універсальна мова створення сценаріїв.

В основному JScript використовується:
• для візуальних функцій, типу вікон попередження і випливаючих вікон
• для перезавантаження та оновлення документів
• для створення анімації
• для визначення типу браузера, його версії та платформи

Синтаксис та правила створення сценаріїв

Загальні правила JScript

• JScript чутливий до регістру літер;
• код JScript завжди повинен бути розміщений у коментарі, щоб старі браузери не виводили його;
• можливо, що підтримка JScript відключена, а тому потрібно створювати сторінки так, щоб вони могли працювати і без сценаріїв.

Розміщення JScript

JScript міститься в HTML-файлі між тегами . Ці теги, за звичай, містяться в заголовку HTML-сторінки, але часто код JScript включається в тіло сторінки для керування подіями. Також код сценарію можна розміщувати в окремому файлі з розширенням .js і потім зв’язувати файл сценарію з необхідною сторінкою засобом атрибута src.

Коментарі

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

// Це однорядковий коментар.
/* Весь текст між цими символами буде проігноровано. Це багаторядковий коментар. */
Код, що знаходиться до символів //, буде виконано. Аналогічно, код, що знаходиться “ззовні” коментарних дужок /* */, також буде виконано.

Змінні в мовах сценаріїв

Змінні – це одна з найбільш необхідних конструкцій кожної мови програмування. Змінна – це комірки пам’яті, в якій програма може розміщувати певну інформацію: числа, значення логічних виразів, літерні вирази. Ця інформація називається значенням змінної. Для того, щоб над значенням змінної проводити якісь маніпуляції, змінним дають імена. У компільованих мовах програмування високого рівня таких, як: DELPHI, C++ змінні мають тип. У JScript змінні є не типізованими. Це означає, що при створенні змінної не вказується, якого типу інформація буде в ній міститися. Для того, щоб використовувати змінну її необхідно оголосити.

Оголошення змінних
var var1 //(оголошення без ініціалізації)
var var1=5//(оголошення з ініціалізацією)
var x,y,z //(оголошення одночасно декількох //змінних)
Тут var – ключове слово мови Jscript, яке вказує на створення змінної var1, var1 – ім’я змінної.

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

Ініціалізація – це присвоєння змінній значення під час її створення.
Основні арифметичні операції над змінними.
• + (додавання)
• - (віднімання)
• * (множення)
• / (ділення)
• ++ (increment – збільшення значення змінної на 1)
• -- (decrement – зменшення значення змінної на 1)
Приклад
c=a+b; c=a-b; b = aaa * bbb; с++;

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

У додаток до основних арифметичних операцій існують й інші. Одна з тих, що найчастіше використовується – це знак рівності (=), у JScript він називається оператором присвоєння і використовується для присвоєння певного значення об’єкту чи змінній. Існує декілька видів оператора присвоєння, наприклад, допускається використання виразів виду:

value=5;
value=value + 7;

У першому випадку, змінній value присвоюється значення 5, в іншому – її значення збільшується на 7. Змінній можна присвоювати арифметичні вирази. В такому випадку буде пораховано значення виразу, і це значення буде присвоєно змінній:

a=5; b=15;
c=a+b;
У результаті виконання такого набору інструкцій значення змінної с буде 20.

Інструкції в JScript

Інструкції – це речення JScript. Вони об’єднують об’єкти і оператори в команди для виконання дій. Інструкція – одинична дія, хоча вона може залежати від певних умов. Будь-яка інструкція в JScript закінчується символом “;”.


Приклад
Pat_number = cats + dogs;

Логічні відношення

Можна створювати непогані програми, застосовуючи лише присвоєння і арифметичні оператори, однак, ви навіть не наблизитеся до реального програмування, поки не почнете використовувати логічні операції. Логічною операцією називається операція, результатом виконання якої буде істина або хибність. Логічним виразом називається логічна операція, записана мовою програмування.


Оператори порівняння в JScript
• variable1 = = variable2 – повертає істину, якщо значення змінних рівні між собою, і хибність - в протилежному випадку
• variable1 != variable2 – повертає істину, якщо значення змінних не рівні між собою, оператор обернений до попереднього
• variable1 > variable2, variable1 < variable2, variable1 <= variable2, variable1 >= variable2 – повертають істину, якщо значення змінної variable1 відповідно більше, менше, не більше, не менше за значення змінної variable2

Зауваження

У мові Jscript Істина позначається true, а Хибність – false. Але для позначення хибності часто використовують 0, а для позначення істини – все, що не 0, як правило 1.

Логічні оператори в JScript
• && – логічне “і”, логічний вираз value1 && value2 буде істиною, якщо одночасно значення логічних виразів value1 і value2 - істинні
• || – логічне “або”, value1||value2 повертає істину, якщо хоча б один з логічних виразів істинний
• ! – логічне “не”, змінює значення логічного виразу на протилежне ( ! істина == хибність)
Приклад s = 34; a = 12;
L1 = (15 > a) || (120 < s);
L2 = (123 + a < s) && (s == a);
// Значення виразу L1 буде true,
// а значення L2– false;

Умовні оператори

Умовний оператор – один з найбільш широковживаних операторів. Він перевіряє значення логічного виразу і виконує блок інструкцій, у залежності від того, істинний даний вираз чи хибний.

Синтаксис
if (Умова)
{інструкції}
Приклад
if (а < 0) {
a=-a;
}
// Дана інструкція знаходить модуль числа а.
Зауваження
Умова (умовний вираз) завжди записується в круглих дужках.
Оператор if … else
Цей варіант попереднього оператора також перевіряє, чи умова є істинною, але пропонує альтернативну дію (в розділі else), якщо умова хибна.
if (умова) {
інструкції1
}
else {
інструкції2
}
Цикли

Другий важливий тип вбудованих інструкцій JScript – цикли. Цикли повторюють блок коду програми певну кількість разів або до того часу, поки виконується якась умова.

Цикл із лічильником
У цьому циклі фігурує змінна-лічильник. Цей цикл виконується наперед задану кількість разів.
Синтаксис
for (I=1; I<=10; I++)
{ ТІЛО ЦИКЛУ }
де, І – змінна-лічильник;
I=1 – присвоєння початкового значення змінній-лічильнику;
I++ – крок, з яким змінюється змінна-лічильник, в даному випадку 1;
I<=10 – вказує скільки разів виконувати цикл, в даному випадку цикл буде виконуватися доти, доки значення змінної лічильника буде не більше ніж 10.
ТІЛО ЦИКЛУ – набір інструкцій.
Цикл з умовою повторення
На відміну від циклу з лічильником, цикл з умовою повторення виконується до того часу, поки певна умова залишається істинною.
Синтаксис
while (умова)
{ ТІЛО ЦИКЛУ }

Цикл for легко отримати з циклу while.
Приклад
//сума всіх чисел від 1 до 100;
var s = 0, i;
for (i=1; i<=100; i++)
s = s+i;

Функції
Функції об’єднують певну кількість інструкцій для виконання ряду задач.
Синтаксис
function Name_of_Function(параметри)
{
ТІЛО ФУНКЦІЇ
[return Value;]
}
де function – ключове слово, що вказує на оголошення функції;
Name_of_Function – ім’я функції;
параметри – значення, які передаються функції для обробки, якщо функція їх не містить, просто ставлять порожні круглі дужки;
Value – значення, яке повертає функція;
ТІЛО ФУНКЦІЇ міститься у фігурних дужках.

Лістинг 1.Приклад функції <html> <head> <title>My First Page</title> <script language=JScript> function factorial(n) { var j, fact = 1; for (j = 1; j <= n; j++) fact=fact*j; return fact; } </script> </head> <body> </body> </html>
Наведена вище функція знаходить факторіал числа n.

Вправи
1.Поміняти значення змінних місцями.
2.Знайти суму трьох чисел.
3.Написати процедуру, яка шукає корені заданого квадратного рівняння.

Контрольні запитання
1.Для чого використовують мови сценаріїв?
2.Які найбільш уживані мови сценаріїв на сьогоднішній день?
3.Які основні правила створення сценаріїв на мові Jscript?
4.Де, як правило, розміщують код сценарію?
5.Для чого використовують змінні в мовах програмування? Які операції можна проводити над змінними?
6.Що таке інструкція?
7.Що таке логічна операція та логічний вираз? Які операції можна проводити над логічними виразами?
8.Для чого використовують цикли в мовах програмування?
9. Що таке функція мови програмування? Наведіть приклад