ЛАБОРАТОРНА РОБОТА № 2

Основи мови JavaScript. Оператори, вирази, функції

2.1. Змінні в JavaScript

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

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

2.1.1 Оголошення змінних

Усі змінні в JavaScript з'являються за допомогою ключового слова var, як це показано нижче:

var szHelloMsg;

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

szMsg = "Привіт!";

Після такого присвоєння ім'я змінної szMsg стає доступним. При виборі імен змінних треба дотримувати наступних простих правил:

· ім'я змінної повинне починатися з букви чи з символів _, $ і може складатися тільки з букв, цифр, а також символів _, $;

· ім'я змінної не повинне збігатися з зарезервованими ключовими словами JavaScript.

Список зарезервованих ключових слів JavaScript приведений нижче:

Break do* if throw*

case* else import* true*

catch* enum* in try

class* export* new typeof

cpnst* extends* null var

continue false return void

debugger* finally* super* while

default* for switch* with

dpiete function this

Ключові слова, представлені в списку символом *, планується застосовувати в мові JavaScript при його розвитку. Рекомендується уникати їхнього використання в програмах як імена змінних.

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

2.1.2 Присвоєння значення змінним

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

var szHelloMsg;

szHelloMsg = "Hello, world!";

У будь-якому місці програми можна привласнити змінної szHelloMsg чисельне значення, наприклад так:

szHelloMsg = 4;

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

Можливо привласнити змінній спеціальне значення null:

szHelloMsg = null;

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

2.1.3. Типи даних

У мові JavaScript все-таки існує декілька типів даних. Це числа, текстові рядки, логічні дані, об'єкти, дані невизначеного типу, а також спеціальний тип null.

Числа

Допускається використання чисел у різних форматах. Це цілі числа, числа у форматі з десятковою крапкою і числа в науковій нотації. Цілі числа можуть бути представлені за основою 8, 10 чи 16. Наприклад:

Приклад Опис

25 Ціле число за основою 10

0137 Ціле число за основою 8

OxFF Целое число за основою 16

386.7 Число з десятковою крапкою, що плаває

25е5

чи 25Е5 Число в науковій нотації, дорівнює 2500000

У деяких випадках арифметичні функції можуть повертати "не число", що називається в JavaScript як Na (Not a Number) - це спеціальне значення, що не відповідає ніякому числу.

Текстові рядки

Текстові рядки - це послідовність символів Unicode, ув'язнених в одинарних чи подвійних лапках, наприклад:

"Hello, world!"

"12345" 'ЦЕ текстовий рядок'

Рядок " " - порожня. Помітимо, що наступні два присвоєння не еквівалентні:

szStr=""

szStrl=null

У першому випадку в змінної szStr зберігається текстовий рядок (хоча б і порожній), у другому - зовсім нічого.

Логічні дані

Логічні дані можуть мати тільки два значення: true і false. Ці значення ніяк не співвідносяться з числами 1 і 0.

Дані невизначеного типу

Якщо змінна була оголошена, але їй ще жодного разу не привласнювалося значення, вона має невизначений тип. Наприклад, у наступній рядку сценарію оголошена змінна MyVariable, що має невизначений тип:

var MyVariable;

Якщо ж цій змінний привласнити значення null, то тип змінної зміниться - тепер це буде змінне, утримуюче значення null:

MyVariable = null;

2.1.4. Перетворення типів даних

Інтерпретатор JavaScript може автоматично перетворювати чисельні дані в текстові рядки. Зворотнє ж перетворення (рядків у числа) приходиться виконувати за допомогою спеціальних функцій, таких, як parseInt і parseFloat.

Пояснимо це на прикладі (листинг 2.1).

Листинг 2.1 Файл Conversion/Conversion.html

<HTML>

<HEAD>

<TITLE>Type conversion sample</TITLE>

</HEAD>

<Hl>Type conversion sample</Hl>

<TABLE>

<!-і

var szTextBuf = "";

szTextBuf = 4 + " - число чотири" + "<BR>";

szBuf2 = (parseInt ("2") + 2) + " - число чотири" +

"<BR>";

document.write(szTextBuf + szBuf2);

//-->

</SCRIPT>

</TABLE>

</BODY>

</HTML>

Тут оголошена змінна szTextBuf і проініціалізвана порожнім рядком. Далі привласнена цьому рядку сума числа 4 і двох текстових рядків:

szTextBuf = 4 + " - число чотири" + "<BR>";

При обчисленні цього вираження значення 4 було автоматично перетворене в текстовий рядок. Подальше підсумовування виконувалося як злиття (конкатенація) трьох текстових рядків.

Символ не поділяючого пробілу   використовується в документах HTML, щоб після конкатенації рядків пробіл не зникав.

У наступному рядку перетворюється текстовий рядок "2" у чисельне значення за допомогою функції parseInt, додається до результату перетворення число 2, а потім виконується конкатенація з двома текстовими рядками:

szBuf2 = (parseint ("2")+2)+" - число чотири" + "<BR>";

2 2. Оператори мови JavaScript

2.2.1. Унарні оператори

Унарні оператори застосовуються для зміни знака, виконання операції доповнення, інкремента і декремента:

Унарний оператор Призначення

- Зміна знака на протилежний

! Доповнення. Використовується для реверсування значення логічних змінних

++ Збільшення значення змінної. Може застосовуватися як префікс змінної чи як її суфікс

-- Зменшення значення змінної. Може застосовуватися як префікс змінної чи як її суфікс

Приклади використання унарних операторів:

i=O; // початкове значення змінної i дорівнює 0

i++; // значення i дорівнює 1

--i; // значення i знову дорівнює 0

var j=3; // значення змінної j дорівнює 3

i = -j; // значення змінної i дорівнює -3

var fYes = true; // значення змінної fYes дорівнює true

testFlag (!fYes); // функції testFlag передається значення false

2.2.2. Бінарні оператори

У мові JavaScript передбачені бінарні оператори для віднімання, додавання, множення, ділення й обчислення залишку ділення :

Бінарний оператор Призначення

- Віднімання

⁺Додавання

* Множення

/ Ділення

% Обчислення залишку від ділення

Оператори використовуються в такий же спосіб, як і в мові програмування С, наприклад:

i=0; // початкове значення змінної i дорівнює 0

i = i + 1; // значення i дорівнює 1

var j=9; // значення змінної j дорівнює 9

i = j / 2; // значення змінної i дорівнює 4

k = j % 2; // значення змінної i дорівнює 1

2.2.3. Оператори для роботи з окремими битами

Можна застосовувати оператори, що виконують над бітами змінних такі логічні операції, як І, ЧИ, ЩО ВИКЛЮЧАЄ ЧИ, НІ:

Оператор Логічна операція

& И

| ЧИ

^ ЩО ВИКЛЮЧАЄ ЧИ

~ НІ

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

2.2.4. Оператори зрушення

Для виконання операцій зрушення в мові JavaScript передбачено три оператори:

Оператор зрушення Призначення

>> Зрушення в праву сторону

<< Зрушення в ліву сторону

>>> Зрушення в праву сторону з заповненням розрядів, що звільняються, нулями

Перед використанням операторів зрушення значення змінної перетворюється в 32-розрядне ціле число.

Нижче приведений приклад, у якому в змінну nValue записується значення, отримане в результаті зрушення біт числа 4. Зрушення виконується на 2 біта вліво:

var nValue;

nValue = 4 << 2;

2.2.5. Оператори відношення

Оператори відношення використовуються для порівняння значень змінних, повертають логічні значення true чи false у залежності від результату порівняння і застосовуються в умовних операторах.

Нижче представлений список операторів відношення мови сценаріїв JavaScript:

Оператор отношения Умова, при якому оператор повертає значення true

> Лівий операнд більше правого

>= Лівий операнд чи більше дорівнює правому

< Лівий операнд менше правого

<= Лівий операнд чи менше дорівнює правому

== Лівий операнд дорівнює правому

!= Лівий операнд не дорівнює правому

В умовних операторах також часто застосовуються логічні оператори:

2.2.6. Логічні оператори

Логічний оператор Опис

|| ЧИ Оператор. Повертає значення true, коли один з операндов дорівнює true

&& Оператор И. Повертає значення true, коли обидва операнда рівні true

2.2.7. Оператор присвоювання

Оператор присвоювання застосовується для присвоювання значень змінним. У мові сценаріїв JavaScript допускається комбінування цього оператора з іншими для зміни вмісту змінних.

Нижче перераховані всі можливі комбінації оператора присвоювання й інших операторів:

Оператор Опис

= Просте присвоювання

⁺⁼Збільшення чисельного чи значення злиття рядків

-= Зменшення чисельного значення

*= Множення

/= Розподіл

%= Обчислення залишку від розподілу

>>= Зрушення вправо

>>>= Зрушення вправо з заповненням розрядів, що звільняються, нулями

<<= Зрушення вліво

| = ЧИ

&= И

^= ЩО ВИКЛЮЧАЄ ЧИ

Приклад застосування оператора += для збільшення вмісту числової змінної.

Спочатку вирішимо цю задачу без використання даного оператора. Нижче оголошена змінна з ім'ям nCounter і привласнене їй початкове значення 1, а потім збільшене це значення на 5:

var nCounter = 1;

nCounter = nCounter + 5;

Тепер зробимо те ж саме, але по-іншому:

var nCounter = 1;

nCounter += 5;

Як видно, другий спосіб коротше першого.

Для того щоб зрушити вміст змінної на три розряди вправо, можна скористатися оператором >>=, як це зроблено в наступному фрагменті вихідного тексту:

nCounter >>= 3;

Результат при цьому буде такий же, як і при виконанні наступної рядка:

nCounter = nCounter >> 3;

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

Оператор if-else

У JavaScript передбачений умовний оператор if-else, що дозволяє виконувати різні програмні рядки в залежності від умови.

Загальний вид оператора if-else представлений нижче:

if (умова)

рядок 1 [else

рядок 2]

Частина оператора, виділена квадратними дужками, є необов'язкової. При виконанні цього оператора оцінюється умова, задане в круглих дужках після ключового слова if. Якщо в результаті оцінки умови вийшло логічне значення true, виконується рядок 1. Якщо ж вийшло значення false, то виконується рядок 2 (у тому випадку, коли вона присутня).

Оператор if-else може бути вкладеним. Якщо в рядку 1 чи рядку 2 необхідно розташувати декілька операторів, їх варто виділити фігурними дужками:

if (nYourAge < 18)

{

bAccessDenied = true;

szNextPage = "byel8.html";

}

else if (nYourAge > 99)

{

bAccessDenied = true;

szNextPage = "bye99.html";

}

else

{

bAccessDenied = false;

szNextPage = "welcome.html";

}

Спочатку оцінюється умова (nYourAge < 18). Якщо вміст змінної nYourAge менше 18, змінної bAccessDenied привласнюється значення true, а змінної szNextPage - текстовий рядок "byel8.html".

Потім вміст nYourAge порівнюється з числом 99. Якщо змінна nYourAge має значення, більше ніж 99, у змінну bAccessDenied записується значення true, а в змінну szNextPage - текстовий рядок "bye99.html".

Нарешті, якщо жодна з двох умов не була виконана, тобто значення змінної nYourAge знаходиться в інтервалі від 18 до 99, у змінну bAccessDenied записується значення false, а в змінну SzNextPage - текстовий рядок "welcome.html".

Оператор ?

Існує також спеціальний тип умовного оператора, що називається оператором ?:. Цей оператор у загальному виді записується так:

вираження ? рядок 1 : рядок 2

При обчисленні оператора ?: спочатку оцінюється логічне вираження, розташоване в лівій частині. Якщо воно дорівнює true, виконується рядок 1, а якщо false - рядок 2.

Нижче приведений приклад використання умовного оператора ?: для присвоєння значення змінної bAccessDenied у залежності від умісту змінної nYourAge:

bAccessDenied =

(nYourAge < 18 || nYourAge > 99) ? true : false;

Якщо значення змінної nYourAge знаходиться в інтервалі від 18 до 99. змінної bAccessDenied привласнюється значення true, а якщо воно не попадає в цей інтервал - false. Традиційне рішення цієї задачі за допомогою оператора else-if зайняло б більше місця:

if(nYourAge < 18 || nYourAge > 99)

bAccessDenied = true;

else

bAccessDenied = false;

У приведених вище прикладах вказувалася складена умова:

(nYourAge < 18 || nYourAge > 99)

Відповідно до таблиці старшинства операторів, яку можна знайти нижче в цій главі, оператор || обчислюється після операторів < і >. Для вказівки порядку обчислення можна використовувати дужки:

((nYourAge < 18) || (nYourAge > 99))

2.2.9. Оператори циклу

У JavaScript є декілька операторів, призначених для організації циклів.

Оператор for

Загальний вид оператора for представлений нижче:

for ( [ініціалізація;] [умова;] [ітерація])

{

...

рядка тіла циклу

...

}

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

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

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

Оператор for-in

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

for (змінна in об'єкт)

{

...

рядка тіла циклу

...

}

Оператор while

Для організації циклів з перевіркою умови їх завершення перед виконанням ітерації використовується оператор while:

while (умова)

{

...

рядка тіла циклу

...

}

Якщо в результаті оцінки умови виходить значення true, то ітерація виконується, якщо false - цикл переривається.

Оператор break

За допомогою оператора break можна перервати виконання циклу, створеного операторами for чи while, у будь-якім місці. Наприклад:

var i = 0;

while (true)

{

...

i++;

if (i > 10) break;

...

}

Оператор continue

Виконання оператора continue усередині циклу for чи while приводить до того, що ітерація переривається, а потім відновляється заново. Цей оператор не перериває циклу.

Нижче приведений приклад використання оператора continue:

var i = 0;

while (1 < 100)

{

i++;

if (i < 10)

continue;

...

}

Тут фрагмент тіла циклу, відзначений крапками, буде виконуватися тільки після того, як значення змінної i стане рівним 10. Коли ж це значення досягне 100, цикл буде довершений.

2.2.10. Інші оператори

Серед інших операторів мови сценаріїв JavaScript доцільно розглянути оператори доступу до поля, індексування масиву, дужки і кому:

Оператор Опис

. Доступ до поля об'єкта

[] Індексування масиву

() Дужки

, Кома

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

Нижче, наприклад, викликаний метод write, визначений в об'єкті document:

document.write("Hello, world!");

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

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

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

var i;

var nCycleCount = 0;

for (i = 0; i < 25; i++, nCycleCount++)

{

...

}

2.2.11. Старшинство операторів JavaScript

Нижче приведена таблиця старшинства операторів JavaScript. За допомогою цієї таблиці можна визначити порядок обчислення складених операторів. При цьому варто враховувати, що всі логічні операції виконуються зліва на право.

Першими обчислюються оператори, розташовані на початку таблиці старшинства:

Оператори Опис

. [] () Доступ до поля, індексування в масиві, виклик функції

++ -- - ~ ! Унарні оператори

* / % Множення, ділення, обчислення залишку від ділення

+ - + Додавання, віднімання, злиття текстових рядків

<< >> >>> Бітові зрушення

< <= > >= Менше, чи менше дорівнює, більше, чи більше дорівнює

== != Рівність, нерівність

& Логічна операція І

^ Логічна операція ЩО ВИКЛЮЧАЄ ЧИ

| Логічна ЧИ операція

&& Логічний оператор відношення І

|| Логічний оператор ЧИ

? : Умовний оператор

= += -= *= /= %= Присвоювання

>>= >>>= <<= |=

&= ^=

, Багаторазове обчислення

2.2.12. Функції в мові сценаріїв JavaScript

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

Звичайно функції визначаються в розділі заголовка документа HTML, відзначеного операторами <HEAD> і </HEAD>. Функція повинна бути визначена перед викликом.

Загальний вид визначення функції представлений нижче:

function ім'я([параметр 1] [,параметр 2] [...,параметр N])

...

рядка тіла функції

...

[return значення]

}

Усі параметри передаються функції за значенням. Тому функція не може змінити вміст змінних, переданих їй як параметри.

За допомогою ключового слова return функція може повернути значення.

2.2.13. Приклади використання операторів циклу

Три приклади показують використання операторів циклу for і while. У прикладах сценарій відображає у вікні документа десять рядків Hello, world!.

Вихідний текст першого сценарію представлений у листинге 2.2.

Листинг 2.2. Файл chapterl/Operators/for.html

<HTML>

<HEAD>

<TITLE>Hello, world!</TITLE>

<!--

var n = 10;

var szHelloMsg = "Hello, world!";

function printNString(szString, n)

{

var i;

for (i = 0; i < n; i++)

{

document.write(szString.bold() + "<BR>");

}

function printHello()

{

printNString(szHelloMsg, 10);

}

//-->

</SCRIPT>

</HEAD>

<Hl>JavaScript Test</Hl>

<P>Message:<BR>

<!--

printHello();

//-->

</SCRIPT>

</BODY>

</HTML>

Тут відразу після завантаження документа викликається функція printHello. У тілі цієї функції, у свою чергу, викликається функція printNString, що передаються два параметри:

printNString(szHelloMsg, 10);

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

Висновок рядка виконується функцією printNString у циклі:

for (i = 0; i < n; i++)

{

document.write(szString.bold() + "<BR>");

}

Тут значення змінної циклу i змінюється від нуля до n, де n - кількість повторів. Коли значення змінної циклу досягне значення n, цикл буде довершений.

У листинге 2.3. показаний сценарій, що вирішує ту ж саму задачу іншим методом - з використанням оператора while.

Листинг 2.3. Файл chapterl/Operators/while.html

<HTML>

<HEAD>

<TITLE>Hello, world!</TITLE>

<!--

var n = 10;

var szHelloMsg = "Hello, world!";

function printNString(szString, n)

{

var i;

i = 0;

whiie (i < n)

{

document.write(szString.bold() + "<BR>");

i++;

}

} function printHello()

{

printNString(szHelloMsg, 10);

}

//-->

</SCRIPT>

</HEAD>

<Hl>JavaScript Test</Hl>

<P>Message:<BR>

<!--

printHello();

//-->

</SCRIPT>

</BODY>

</HTML>

Тут i також використовується як змінна циклу:

i = 0;

while (i < n) {

document.write(szString.bold() + "<BR>");

i++;

}

Як працює цей цикл?

Після висновку рядка методом write значення змінної циклу збільшується на одиницю. Потім перед початком наступної ітерації перевіряється, чи досягла змінна циклу значення n. Якщо досягла, цикл завершує свою роботу.

Спільне застосування операторів while і break демонструється в сценарії, показаному в листинге 2.4.

Листинг 2.4. Файл chapterl/Operators/break.html

<HTML>

<HEAD>

<TITLE>Hello, world!</TITLE>

<!--

var n = 10;

var szHelloMsg = "Hello, world!";

function printNString(szString, n)

{

var i;

i = 0;

while (true) {

document.write(szString.bold() + "<BR>");

i++;

if (i > n)

break;

}

function printHello()

{

printNString(szHelloMsg, 10);

}

//-->

</SCRIPT>

</HEAD>

<Hl>JavaScript Test</Hl>

<P>Message:<BR>

<!--

printHello();

//-->

</SCRIPT>

</BODY>

</HTML>

Так само як і в попередньому випадку, i використовується як змінна циклу. Однак в операторі while на місці умови завершення циклу стоїть значення true:

i = 0;

while (true)

{

document.write(szString.bold() + "<BR>");

i++;

if (i > n)

break;

}

Для того щоб перервати цикл, застосований оператор break. Цей оператор викликається в тому випадку, якщо значення змінної циклу i перевищило значення n.

2.3. Індивідуальні завдання на лабораторну роботу №2

2.3.1. Індивідуальне завдання для кожного студента. На основі листингов 2.1-2.4 підготувати і налагодити код JavaScript, у якому передбачити реалізацію індивідуального завдання. Вибір варіанта завдання здійснюється з таблиці 2 на основі номера залікової книжки студента. У завданні кожного студента – дванадцять задач (по числу рядків). Номер варіанта кожної конкретної задачі виходить як залишок від розподілу числа з двох останніх цифр номера залікової книжки на число варіантів конкретної задачі, збільшений на «1». Наприклад, для номера зачіткі «ХХХ21», третьої задачі «Перетворення типів», що має п'ять варіантів, обраний варіант буде дорівнювати:

Вар.=(21%5)+1=1+1=2.

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

Таблиця 2

Завдання	Варіант 1	Варіант 2	Варіант 3	Варіант 4	Варіант 5	Варіант 6	Варіант 7
Обирані базові листинги	Листинг 2.2	Листинг 2.3	Листинг 2.4	Листинг 2.2	Листинг 2.3	Листинг 2.4	Листинг 2.2
Використовувані змінні	Цілі за основою 10	Цілі за основою 8	Цілі за основою 16	Числа з десят.крапкою	Числа в науковій нотації	Текстові рядки	Логічні змінні
Перетворення типів	Чисельні в текстові без конкатенації	Чисельні в текстові з конкатенацією	Чисельні в текстові з конкатенацією і	Текстові в цілі	Текстові в що плавають	Чисельні в текстові без конкатенації	Чисельні в текстові з конкатенацією
Унарные оператори	-	!	++	--	!	++	--
Бінарні оператори	+ , - , /	+ , * , %	+ , - , /	+ , * , %	+ , - , /	+ , * , %	+ , - , /
Бітові оператори	&	\|	^	~	\|	^	~
Оператори зрушення	>>	<<	>>>	>>	<<	>>>	>>
Оператори отношения	>	>=	<	<=	==	!=	<
Логічні оператори	\|\|	&&	\|\|	&&	\|\|	&&	\|\|
Оператори присвоювання	= , +=	-= , *=	/= , %=	\|= , >>=	&= , <<=	^= , >>>=	\|= , >>=
Умовні оператори й оператори циклу	If-else	?	For	For-in	While	For , continue	While , break