Лекція 4
поняття про сценарії. мова java script
План
Поняття про сценарії.
Синтаксис мови JavaScript.
Керуючі оператори.
Поняття функції. Вбудовані функції.
Масиви та їх використання.
Об’єкти та операції роботи над ними.
Елемент <SCRIPT> </SCRIPT> дозволяє відділити текст програми-сценарію від решти інформації сторінки. Елемент SCRIPT може включати атрибут language, який визначає мову написання сценаріїв і може набувати наступних значень:
javascript — код на мові JavaScript;
tcl — код на мові Tel;
vbscript — код на мові VBScript.
Зручно зберігати тексти програм в окремому файлі, що узгоджується із сучасною концепцією створення сайтів (розділення контенту, оформлення та поведінки сторінки) . Тоді елемент SCRIPT треба забезпечити посиланням на цей файл:
<SCRIPT src="URL"> </SCRIPT>
За традицією файли, що містять програми на JavaScript, мають розширення .js.
Атрибут type теж може вказувати на тип мови, хоча його вживання не є обов’язковим. Щоб дотриматись всіх правил, всередині елемента можна помістити таке визначення:
type=" text/javascript"
Однією з особливостей сценаріїв є можливість зміни вмісту сторінки в результаті роботи програми. Але це тільки можливість, а не правило. За допомогою атрибута defer (який не приймає ніяких значень) можна повідомити браузер, що такі зміни не будуть внесені. В деяких випадках це дозволяє прискорити завантаження сторінки.
Із стандартних атрибутів можна використовувати атрибут charset.
Елемент SCRIPT (або ряд таких елементів) може розташовуватися як всередині секції HEAD, так і всередині секції BODY. Якщо сценарій знаходиться всередині елемента BODY, можлива ситуація, коли який-небудь браузер, що не підтримує елемент SCRIPT, сприйме програмний код як звичайний текст і виведе його на екран. Щоб цього не трапилося, код сценарію вводять як коментар:
<SCRIPT language="мова">
<! -- Все, що відноситься до коду сценарію-- >
</script>
Сучасні браузери знають цей прийом і ігнорують символи коментаря. Якщо в тексті сценарію потрібно ввести коментар, то для цього використовують інше позначення: на початку рядка вводять дві косі риски //.
Сценарій виконується у момент завантаження сторінки, тобто коли на екрані ще видно її зміст. В лістингу 1 наведено приклад найпростішого сценарію.
Лістинг 1. Виведення повідомлення у вікні (1 варіант)
<HTML>
<HEAD>
<МЕТА http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<TITLE>Простий сценарій<title>
<SCRIPT language="javascript">
alert("вітаємо вас на цій сторінці!")
</script>
</head>
<BODY background="font01.gif">
<P>
<CENTER>
<H1 style="color : maroon">3 а г о л о в о к 1 </h1>
</center>
</body>
</html>
Це звичайна сторінка, але в неї включений сценарій з одного рядка. За допомогою методу alert() перед завантаженням виводиться повідомлення (в даному випадку вітання). Доти, поки користувач не клацне на кнопці OK, завантаження не буде продовжено.
Той же сценарій можна виконати й іншим способом: створити функцію і пов’язати її з подією. Завантаження сторінки відповідає події onload елемента BODY (лістинг 2).
Лістинг 2. Виведення повідомлення у вікні (2 варіант)
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<TITLE>Простий сценарій</title >
<SCRIPT language="javascript">
function DoFirst()
{alert ("Hello!!!")}
</script>
</head>
<BODY onload="DoFirst()">
<P>
<CENTER>
<H1 style="color : maroon">3 а г о л о в о к 1</h1>
</center>
</body>
</html>
<NOSCRIPT> </noscript>
На той випадок, якщо сторінка буде видимою в браузері, що не підтримує сценаріїв, передбачений елемент NOSCRIPT. Сучасні програми перегляду ігнорують його вміст. Цей елемент можна використовувати декількома способами. По-перше, всередині нього можна розмістити попередження на зразок наступного: «ваш браузер не може відтворити сценарії, необхідні для проглядання цієї сторінки!» По-друге, всередині елемента можна створити спрощену версію сторінки, без скриптів. По-третє, можна створити посилання на інший документ. Елемент NOSCRIPT повинен обов’язково забезпечуватися кінцевим тегом. З атрибутів допускаються тільки id і style.
2. Як і всяка сучасна мова програмування, JavaScript має традиційну частину, що включає оператори присвоєння, математичні і рядкові функції, оператори і об’єктно-орієнтовану частину, до якої відносяться об’єкти, події, властивості і методи.
Основною конструкцією мови є функція. Вона створюється за наступним шаблоном:
function Ім’яФункціі(параметр1, параметр2.. .)
{
Текст програми
return вираз
}
Обов’язковими елементами є: ключове слово function, круглі дужки і фігурні дужки, що визначають тіло функції. Для виконання функції достатньо вказати її ім’я в сценарії, наприклад:
Ім’яФункціі(параметр)
Всередині функції можуть знаходитися виклики інших функцій, і, крім того, функція може викликати саму себе. Якщо функція вказана як значення атрибута події, вона виконується, коли відбувається відповідна подія.
За допомогою оператора return функція може повернути певне значення. Тоді функцію можна використовувати в операціях привласнення або перевірки умов.
В програмі можуть використовуватися змінні різних типів. Якщо змінна визначена поза функцією, вона є глобальною, тобто доступної для всіх функцій сторінки. Змінні, визначені всередині функції, є локальними, діючими тільки в межах функції. Різні функції можуть незалежно використовувати локальні змінні з однаковими іменами. Для визначення змінної можна вказати ключове слово var, хоча це і не обов’язково:
var Color01 = "red" або Color01 = "red"
Тип змінної визначається у момент привласнення їй значення. Для позначення рядкових констант використовуються подвійні або одинарні лапки. Два типи лапок необхідні на той випадок, коли рядкова константа містить символи лапок, наприклад:
WelcomeMessage = ‘Ласкаво просимо на сайт компанії "Tip Top" ‘
Числові значення можуть задаватися різними способами:
count = 1
Х1 = 3.55
F5 = 7.674Е-5
Логічні змінні можуть приймати значення false (хибність) і true (істина). За допомогою квадратних дужок визначаються елементи масивів:
mass[23]
Математичні операції виконуються таким чином:
var01 = var02+3 — додавання;
var03 = 10*(var04-var05) — обчислення з дужками.
Для виклику математичних функцій використовується об’єкт Math:
var06 = Math. sqrt(var07) — обчислення значення функції (квадратного кореня).
Окрім традиційних операцій, можна виконувати операцію пошуку остачі від ділення, наприклад:
var08=var09 % 4
Існують унарні операції:
var10++ — збільшення значення змінної на 1;
var05 -- — зменшення значення змінної на 1.
В умовних або керуючих операторах використовуються оператори порівняння. Для складання логічного виразу, окрім круглих дужок, допустимі наступні знаки:
• == — рівно;
• ! = — нерівний;
• > — більше;
>= — більше або рівно;
< — менше;
<= — менше або рівно.
Окрім них, використовуються логічні оператори:
! — логічне заперечення;
|| — логічне АБО;
&& — логічне І.
Можна використовувати і інші оператори, більшість яких аналогічна до операторів С++.
Розглянемо також оператор отримання типу typeof, значенням якого є тип змінної, що виступає аргументом. Наприклад, в результаті дії оператора
s=typeof ( "hfgjdhfdj")
змінна s отримає значення "string", тобто стрічкової величини.
Для сумісності типів запам’ятаємо такі правила.
При об’єднанні числового та стрічкового типу спочатку намагається перетворити стрічку в число, якщо це можливо – виконується дія додавання; якщо ж ні – число переводиться в стрічку і відбувається конкатенація;
Логічні величини перетворюються в число чи стрічку, в залежності від конкретного випадку.
Приорітет операцій аналогічний до С++.
3. Мова JavaScript має також стандартні керуючі оператори, такі як розгалуження та цикли.
Цикл do. . .while дозволяє виконувати програмний код до тих пір, поки виконується умова.
do {
рядок 1 ; рядок 2 ;
…
}
while (умова)
Зверніть увагу, що тіло оператора, так само як і тіло функції, виділяється за допомогою фігурних дужок. Рядки коду (команди, операції присвоєння, виклики функцій і ін.) завершуються (відділяються один від одного) крапкою з комою.
Наведений цикл можна записати і так:
while ( умова) {
рядок 1 ;
рядок 2 ;
…
}
Цикл for використовують для того, щоб виконати програмний код задане число раз. Як приклад, показана програма, що дозволяє створити числовий масив і заповнити його нулями.
var Massiv = newArray( );
var n = 25;
for (i =0;i< n; i++)
{
Massiv[i]= 0;
}
У прикладі показаний цикл з трьома параметрами: початковим значенням лічильника, умовою виконання циклу і командою зміни значення лічильника. Це традиційний спосіб використовування такого циклу, але жоден з параметрів не є обов’язковим. Якщо відсутня умова, то цикл стане виконуватися до тих пір, поки не буде перерваний іншим чином. Якщо відсутня команда зміни значення лічильника, її може замінити аналогічна команда в тілі циклу. Якщо кількість параметрів менше трьох, символи «крапка з комою» визначають, який параметр використовується.
Є ряд допоміжних операторів, що використовуються разом із циклами. За допомогою оператора break можна перервати роботу будь-якого циклу. Оператор continue дозволяє перервати виконання циклу і почати перевірку умови. Залежно від умови цикл може бути перерваний остаточно або його виконання може бути почато ще раз. Цей оператор ще називають оператором перезапуску циклу.
Умовний оператор if. . .else використовується там, де виконання програми треба поставити в залежність від значення виразу (умови). Шаблон оператора такий:
If (умова) {
рядки коду
}
else {
рядки коду
}
Блок else (виконується, якщо умова має значення false), не обов’язковий.
Найпростіші умовні оператори можна записати умовним оператором ?:
(умова) ? <рядки коду "то"> : <рядки коду "інакше">
Оператор switch. . .case теж є умовним, але вираз, що є його параметром, не обов’язково повинен бути логічним. Він може набувати будь-яких значень. Важливо тільки, щоб ці значення були вказані як мітки в блоках case. Тоді буде виконаний один з багатьох варіантів коду. Якщо значення виразу не рівне жодній мітці, виконується блок default. Нижче наведений шаблон оператора. Зверніть увагу, що фігурні дужки використані тільки один раз, оскільки варіанти коду розділені операторами case.
switch (вираз) {
case мітка1:
рядки коду
case мітка2:
рядки коду
…
default:
рядки коду
}
4. Функція JavaScript – це підпрограма, яка виконується у відповідь на виникнення якої - небудь події.
Щоб використати функцію, потрібно спочатку її визначити. Формальний синтаксис опису функції такий:
function <ім'я_функції> (<список_формальних_аргументів>)
{
оператор 1;
оператор 2;
….
оператор n;
}
Блок операторів, взятих у фігурні дужки, називається тілом функції. У тілі функції можуть використовуватися формальні аргументи - змінні, імена яких перераховані через кому в <списку_формальних_аргументів>. При виклику функції в дужках після її імені вказуємо список фактичних параметрів – формальні аргументи замінюються на фактичні, а тіло функції ніби підставляється на місце її виклику і виконується.
Оператори тіла функції можуть містити в собі виклики іншої функції, визначеної у поточному додатку. Розбіжності між описом і викликом функції традиційні для мов програмування. Опис функції просто називає функцію і задає виконувані нею дії. Запит функції виконує ці дії з фактичними параметрами. Бажано визначати функції для сторінки в розділі <НЕAD> документа. У цьому випадку всі функції будуть визначені перед тим, як буде завантажений зміст документа. Інакше, у той час як сторінка ще не повністю завантажена, користувач може виконати дію, що викличе функцію, яка працює із ще не завантаженим елементом сторінки, що може привести до помилки.
Наведемо приклад простої функції:
Function firstFun (str)
{
document.write (“<H1><P>”+str+”</h1>”);
}
Ця функція одержує рядок str (формальний параметр) як аргумент, додає до нього за допомогою оператора конкатенації деякі HTML-атрибути і виводить результат у поточному документі за допомогою методу write (повне пояснення дії цього методу буде у наступних лекціях).
У браузері можна використати будь-яку функцію, визначену на поточній сторінці. Можна також використати функції, визначені в інших іменованих вікнах і фреймах. Для того щоб функція виконалась, її необхідно викликати. Припустимо функцію firstFun, описана в розділі <НЕАD> документу, тоді виконати її можна, наприклад, у такий спосіб:
<SCRIPT>
firstFun (“Це працює перша функція ”);
</script>
Тут рядок «Це працює перша функція» – фактичний аргумент, який буде підставлений замість формального аргумента str.
Якщо функція обчислює якесь значення і його не потрібно повертати, то при її виклику використається оператор void:
Void <ім'я_функції> () ;
Слід зазначити, що оператор Vоіd почав підтримуватися Іnternet Ехрlоrеr тільки з версії 4.0 й Navigator з версії 3.0.
Глобальними називаються змінні, оголошені поза оголошенням функції. Ці змінні видно в будь-якій частині програми, включаючи і саму функцію (якщо тільки в ній не оголошено змінну з таким же ім'ям). У функції можна не тільки передавати значення змінних, але й оголошувати змінні всередині тіла функції. Це реалізується за допомогою локальних змінних, які називаються так тому, що існують тільки усередині самої функції, Коли виконання програми повертається з функції до основного коду, локальні змінні видаляються з пам'яті.
Локальні змінні оголошують так само, як і глобальні, тільки всередині тега <SСRIPТ>.
Локальні змінні, імена яких збігаються з іменами глобальних змінних, не змінюють значень останніх. Проте така локальна змінна приховує глобальну змінну. Якщо у функції оголошена змінна з тим же ім'ям, що і в глобальної змінної, то при використанні всередині функції це ім'я стосується до локальної змінної, а не до глобальної.
Крім функцій, які визначаються користувачем, у програмах JavaScript можна використати ще так званні вбудовані функції. Ці функції вбудовані в інтерпретатор JavaScript, тобто вони оголошені і реалізовані всередині нього.
Всі вбудовані функції перераховані в таблиці.
Функція |
Опис |
escape (<стрічка>) |
Кодує стрічка в URL формат, тобто всі недопустимі в URL символи представляє в їх шістнадцяткових кодах |
eval (<стрічка>) |
Обчислює вираз, що знаходиться в стрічці так, ніби він знаходиться в коді програми |
infinity |
Повертає значення „плюс нескінченність” |
isFinite (<вираз>) |
Перевіряє, чи повертає вираз скінчене число. Повертає true чи false |
isNan (<вираз>) |
Повертає true, якщо вираз є не числом (тобто нескінченністю чи помилкою, NaN (Not a Number) – не число), і False, якщо вираз є число |
NaN |
Повертає значення NaN |
parseFloat (<стрічка>) |
Перетворює стрічку в число з плаваючою комою, якщо стрічка не може бути перетворена, то повертає NaN |
parseInt (<стрічка>, <основа>) |
Перетворює стрічку у ціле число системи числення, що визначається основою. За замовчуванням використовується десяткова система числення. Якщо стрічка не може бути перетворена, то повертає NaN |
underfined |
Повертає значення underfined, яке означає, що змінна хоч і оголошена, але не визначена. |
unescape (<стрічка>) |
Декодує стрічку, закодовану функцією escape |
JavaScript дозволяє присвоювати змінній раніше оголошену функцію та використовувати функцію в якості параметра іншої функції.
5. Масиви – набори даних одного типу в пам'яті комп'ютера. Застосування масивів дозволяє звертатися до декількох комірок пам'яті, використовуючи одне ім'я. Кожна одиниця даних називається елементом масиву. Для звертання до елементу масиву використається операція індексації. При цьому нумерація елементів починається з нуля. Номер елемента називається його індексом, а загальна кількість елементів – розміром масиву,
Для оголошення масиву використовують квадратні дужки, всередині яких через кому перераховуються його елементи. Наприклад:
Vаr а;
а = [3, 5, 8];
У цьому прикладі оголошено масив з ім'ям а, що складається із трьох елементів (чисел 3, 5 й 8). Індексація масивів здійснюється в такий спосіб: спочатку записують ім'я масиву, потім у квадратних дужках вказується номер необхідного елемента. Наприклад, звертання до другого елементу масиву а (тобто числа 8, тому що нумерація починається з нуля) має вигляд:
b = а[2];
У цьому прикладі змінній b було присвоєно значення другого елемента масиву а.
На відміну від звичайних, статичних, масивів, розмір яких задається раз й назавжди (Тurbo Раsсаl, Ваsіс й ін.), масив в JavaScript – динамічні, тобто його розмір і вміст можна змінювати в процесі виконання програми. Наприклад, при оголошенні масиву значення деяких його елементів, якщо це необхідно, можна не вказувати.
Vаr c;
с = [2, 7, , 9];
Тут значення другого елемента масиву с не визначено (його можна визначити пізніше).
Дописування елементів здійснюється також за допомогою операції індексації:
с[5] = 11;
Масив с, таким чином, збільшився на два елементи: четвертий елемент, як і другий, не визначений, а п’ятий має значення 11.
Будь-якому елементу масиву можна також привласнити інший масив, тоді для доступу до елементу внутрішнього масиву потрібно вказувати два індекси.
6. Об’єкт – це складений тип даних, який містить у собі безліч змінних (властивостей) й функцій (методів) для керування цими змінними. Властивості містять дані та методи їх опрацювання.
Як приклад об’єкта можна розглянути HTML-документ. Його властивостями є: URL-адреса, розмір, кодування символів, тип документа й ін. А функції збереження на диску, відкриття у вікні браузера, роздрукування документа є його методами. Якщо провести аналогію із НТМL, то можна сказати, що властивості – це атрибути об’єкта, а методи – засоби керування.
У свою чергу кожен об’єкт належить до деякого класу об’єктів, тобто об’єкти є екземплярами класів об’єктів. Декілька об’єктів можуть належати до одного і того ж класу. Таким чином, клас – це свого роду тип об’єкта, а об’єкт –конкретний екземпляр класу, з яким можна працювати. Для створення об’єкта використовується оператор new з вказуванням імені класу, до якого буде належати цей об’єкт:
<ім'я_об’єкта> = new <ім'я_класу> () ;
Вираз <ім’я_класу>() називається конструктором об’єкта. У конструктор, у круглих дужках, можна передавати деякі параметри, ініціалізуючи таким чином деякі властивості об’єкта при його створенні.
Можна також обійтися й без конструктора, у цьому випадку використовуються так звані ініціалізатори.
<ім'я об’єкта> =
new <ім'я_класу> (властивість1:значення1,
властивість2:значення2, властивість3:7);
Тут властивість1 створюваного об’єкта ініціалізується значенням1, властивість2 – значенням2, а третя властивість – числом 7.
За допомогою <імені_об’єкта> можна звертатися до властивостей і методів створеного об’єкта. Для звертання, наприклад, до властивості <ім'я_властивості> об’єкта <ім'я_об’єкта>, потрібно спочатку записати ім'я об’єкта, потім поставити крапку й ім'я властивості:
<ім'я_об’єкта>. <ім'я__властивості>;
Звертання до методів об’єкта здійснюється аналогічним чином, тільки після імені методу необхідно ставити круглі дужки:
<ім'я_об’єкта>. <ім'я_методу> () ;
Властивості об’єкта можна не тільки зчитувати, але й змінювати. Це робиться за допомогою звичайного оператора присвоювання. Наприклад:
Var obj;
Obj = new Name_of_Class();
Obj.size=7;
Obj.SaveToDisk(“somefile.html”);
Тут спочатку було створено об’єкт obj, що належить до класу Name_of_Class, а потім його властивості size було присвоєно значення 7, після чого за допомогою методу SaveToDisk() цього ж об’єкта файл із ім'ям somefile.html був збережений на диск.
Об’єкт можна присвоїти елементу масиву й передати у функцію. При цьому всередині тіла функції можна змінювати властивості і викликати методи цього файлу.
Всі об’єкти в JavaScript поділяються на вбудовані, користувацькі й зовнішні. Вбудовані та користувацькі розглядатимуться пізніше. Що стосується зовнішніх, то до них відносяться об’єкти, зовнішні п відношенню до інтерпретатора JavaScript-програм.
У мові JavaScript існує ще два способи, крім розглянутого, звертання до змісту властивостей об’єктів, а саме:
за допомогою "класичного" (числового) масиву;
за допомогою асоціативного масиву.
Доступ до властивостей об’єкта за допомогою "класичного" масиву здійснюється в такий спосіб. Кожен об’єкт JavaScript є масивом, елементами якого є його властивості. Відповідно, для доступу до властивостей застосовується звичайна індексація масивів, наприклад:
Obj.NameOfProperty;
Obj[3];
Тут у першому записі показане стандартне звертання до властивості NameOfProperty, а в другому – звертання за допомогою операції індексації. Природно, що у цьому випадку необхідно знати номер властивості.
В асоціативному масиві, на відміну від "класичного", елементи мають не числовий, а стрічковий індекс, який можна інтерпретувати як ім'я відповідного елемента (властивості). Наприклад:
Obj. [ “NameOfProperty”]=4;
Тут властивості NameOfProperty об’єкта obj присвоюється значення 4.
Розглянемо оператори роботи з об’єктами
Оператор in здійснює перевірку на знаходження зазначеної властивості в заданому об’єкті. Якщо така властивість існує, то повертає - true, якщо її немає- false. Синтаксис оператора:
<ім'я_властивості> іn <ім'я_об’єкта>;
Тут <ім'я_властивості> задається у вигляді рядка, а об’єкт - у вигляді змінної об’єктного типу. Наприклад:
іn ("NameОfРrореrty" іn оbj)
{
//тіло оператора if
}
У прикладі здійснюється перевірка на наявність в об’єкті obj властивості NameОfРгореrty, і якщо така є, то виконується тіло оператора if.
Оператор іnstanceof перевіряє, чи є заданий об’єкт елементом зазначеного класу. Повертає true або false. Синтаксис оператора:
іf (obj instnceof NameОfClass)
{
//тіло оператора if
}
Якщо клас NameОfClass містить у собі об’єкт obj, то виконується тіло оператора if.
Оператор for-іn дозволяє переглянути всі властивості заданого об’єкта або масиву й виконати для кожної які-небудь дії. Синтаксис оператора:
for (<лічильник> in <об’єкт або масив>)
{
//тіло циклу for-іn
}
У наступному прикладі в змінну Pr записуються імена всіх властивостей об'єкта obj, а в змінну ValuePr поміщаються відповідні їм значення.
for (i in obj)
{
Pr += i + " ";
ValuePr += obj[i] + " ";
}
Оператор with використається для збільшення швидкості роботи програми і для компактності запису фрагментів програм, що використовують багаторазовий виклик властивостей і методів того самого об'єкта. Синтаксис оператора:
with (<об'єкт>)
{
<властивість_ 1>;
<властивість 2>;
<властивість_п>;
<метод_1>;
<метод_2>;
<метод_n>;
}
Тут під <властивість_1>, ..., <властивість_n> і <метод_1>, ..., <метод_n> маються на увазі вирази, у яких викликаються або змінюються чи властивості чи методи <об’єкту>.
Порівняємо наведені фрагменти програми з використанням стандартного звертання до властивостей і методів об'єкта, а також з використанням оператора with.
// стандартне звертання
obj.propl = 5;
obj.prop2 = 1;
obj.ргорЗ = 4;
obj.method1() ;
// звертання з використанням with
with (obj)
{
propl = 5;
prop2 = 7;
ргор3 = 4;
method1 () ;
}
Друга форма запису виглядає набагато компактніше й працює швидше, ніж з використанням стандартного звертання.