Веб-технології і веб-дизайн (лекція 7)

Лекція 7. Основи JavaScript.
JavaScript — це мова програмування, дозволяюча зробити Web-сторінку

інтерактивною, тобто реагуючу на дії користувача.
Послідовність інструкцій (яку називають програмою, скриптом чи
сценарієм) виконується інтерпретатором, встановленим у звичайний Web-
браузер. Іншими словами, код програми впроваджується у HTML-документ та
виконується на стороні клієнта. Для виконання програми навіть не треба
перезагружати Web-сторінку. Усі програми виконуються у результаті появи
якоїсь події. Наприклад, перед відправкою даних форми можна перевірити їх
на допустимі значення і, якщо значення не відповідають очікуємим, заборонити
відправку даних.
Перша програма на JavaScript
При вивчені мов програмування прийнято починати с програми, яка
виводить слова "Hello, world". Продемонструємо, як це буде выглядати на
JavaScript.
Набираємо код у Блокноті и зберегаємо в формате HTML, наприклад, під
назвою test.html. Запускаємо Web-браузер и відкриваємо збережений файл.
<html>
<head>
<title>Первая программа</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<script type="text/javascript">

</script>
<noscript>
<p>Ваш Web-браузер не поддерживает JavaScript</p>
</noscript>
</body>
</html>
Можливі наступні варіанти:
 у вікні Web-браузера відображено слова "Hello, world" — значить, усе
нормально;
 відобразився напис "Ваш Web-браузер не підтримує JavaScript" та Web-
браузер задає питання "Запустити скрипти?" — значить, в настройках
Web-браузера встановлено флажок напроти пункта Підтверждувати
запуск скриптiв. Можна або встановити флажок напроти пункта
Дозволити запуск сприптiв, або кожний раз відповідати "Так" на це
питання;
 відобразився напис "Ваш Web-браузер не підтримує JavaScript" і Web-
браузер не задає ніяких питань — значить, в настройках Web-браузера
встановлено флажок напроти пункта Заборонити запуск скриптiв. Треба
встановити флажок напроти пункта Дозволити запуск сприптiв;
 у вікні Web-браузера нема ніяких написів — значить, допущена помилка
у коді програми. Треба мати на увазі, що в JavaScript регістр має важливе
значення. Малі и великі букви вважаються різними. Більш того, кожна
літера, кожна кавичка має значення. Достатньо помилитися в одній букві,
и вся програма працювати не буде.
Так, ми стовкнулися з першою проблемою при використанні JavaScript —
кожен користувач може відключити запуск скриптов в настройках Web-
браузера. Але ця проблема не єдина. Різні Web-браузери можуть по-різному
виконувати код програми. За цією причиною приходиться писати персональний
код під кожний Web-браузер. Усі приклади скриптів, які ми будемо
розглядувати, написані під Microsoft Internet Explorer и можуть не працювати у
інших Web-браузерах. Це слідує пам’ятати.
Повернемося до нашего прикладу. Програма впроваджується в HTML-
документ за допомогою парного тега <script>. У якості значення параметра type
указується MIME-тип text/javascript. Окірм того, може бути вказан параметр
language, який завдає назву мову програмування (у нашому випадку —
JavaScript). Даний параметр використовувався у ранніх версіях HTML, а в наш
час вказуєтся тільки для сумістності, водночас з параметром type:
<script type="text/javascript" language="JavaScript">
Якщо Web-браузер не підтримує JavaScript чи виконання скриптів
заборонено у настройках Web-браузера, то буде виведено текст між тегами
<noscript> и </noscript>. Строка
яка має інструкцію відобразити напис "Hello, world" у вікні Web-браузера,
називаеться виразом. Кожний вираз у JavaScript закінчується точкою з комою.
Зауваження:
1. Необхідно зауважити, що це необов’язкова вимога. Тим не менш
рекомендуеться вказувати точку з комою в кінці кожного виразу. Це
дозволить запобігти великої кількості помилок у майбутньому.
2. Код програми між тегами <script> и </script> іноді заключаеться у теги
HTML-коментаря , інакше Web-браузери, не підтримуючі
JavaScript, виведуть код скрипта у виді звичайного текста:

Інтерпретатор JavaScript ігнорує відчиняющий тег HTML-коментаря , починающийся з двох минусів (--), розпізнаеться
інтерпретатором як помилка, так як в JavaScript мається зумовлений оператор
--. За цією причиною перед зачиняючим тегом необхідно поставити символи
коментаря мови JavaScript (//):
//-->
У наш час практично всі Web-браузеры розпізнають тег <script>. Тому особого
сенсу заключати програму у символи коментаря нема.
Коментарі в JavaScript
Все, що розташоване після "//" до кінця рядка, у JavaScript вважається

однорядковим коментарем:
// Однорядковий коментар
Однорядковий коментар можна записати після виразу:
document.write("Hello, world"); // Однорядковий коментар

Крім того, існує багаторядковий коментар. Він починається із
символів /* і закінчується символами */:
/*
Багаторядковий коментар
*/
Виведення результатів роботи програми та введення даних
Перш ніж розпочинати вивчення мови JavaScript, розглянемо вбудовані

діалогові вікна, які дозволять нам виводити результати роботи програми або
значення змінних, а також вводити дані.
Вікно з повідомленням та кнопкою OK
Метод alert() відображає діалогове вікно з повідомленням та кнопкою OK.

Виведення вітання з допомогою методу alert().
<html>
<head>
<title>Метод alert()</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251">
</head>
<body>

</script>
</body>
</html>
Повідомлення можна розбити на рядки за допомогою послідовності
символів \n
<html>
<head>
<title>Розбиття повідомлення на рядки</title>
1251">
</head>
<body>

</script>
</body>
</html>
Вікно з повідомленням та кнопками OK та Cancel
Метод confirm() відображає діалогове вікно з повідомленням та двома

кнопками OK та Cancel. Він повертає значення true, якщо натиснуто кнопку
OK, і false — якщо Cancel.
<html>
<head>
<title>Метод confirm()</title>
1251">
</head>
<body>

</script>
</body>
</html>
Вікно з полем введення та кнопками OK та Cancel

Метод prompt() відображає діалогове вікно з повідомленням, полем
введення та двома кнопками OK та Cancel. Він повертає введене значення,
якщо натиснуто кнопку OK, або спеціальне значення null, якщо натиснуто
кнопку Cancel.
<html>
<head>
<title>Метод prompt()</title>
1251">
</head>
<body>

</script>
</body>
</html>
Змінні
Змінні — це ділянки пам'яті, що використовуються програмою зберігання
даних. Кожна змінна повинна мати унікальне ім'я у програмі, що складається з
латинських букв, цифр та знаків підкреслення. Першим символом може бути
буква або знак підкреслення. У назві змінної може також бути символ $. Імена
змінних не повинні співпадати із зарезервованими ключовими словами
JavaScript.
Правильні імена змінних:
x, strName, y1, _name, frame1
Неправильні імена змінних:
1y, Ім'яЗмінної, frame

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

strname – різні змінні.
У програмі змінні оголошуються ключовим словом var.

var strName;
Можна оголосити відразу кілька змінних в одному рядку, вказавши їх

через кому.
var x, strName, y1, _name, frame1;
Типи даних та ініціалізація змінних
У JavaScript змінні можуть містити такі типи даних:

 number – цілі числа чи числа з плаваючою точкою (дрібні числа);
 string – рядки;
 boolean – логічний тип даних. Може містити значення true (істина) або
false (брехня);
 function – функції. У мові JavaScript посилання на функцію можна
присвоїти будь-якій змінній. Для цього назва функції вказується без
круглих дужок. Крім того, функції мають властивості та методи;
 object – масиви, об'єкти, а також змінна зі значенням null.
При ініціалізації змінної JavaScript автоматично відносить змінну одного
з типів даних.
Ініціалізація змінних − то операція надання змінної початкового значення.
Значення змінної надається за допомогою оператора =.
Number1 = 7; // Змінною Number1 присвоєно значення 7
Number2 = 7.8;
// Змінною Number2 присвоєно значення з плаваючою точкою
String1 = "Рядок"; // Змінної String1 присвоєно значення Рядок
String2 = 'Рядок';
// Змінною String2 також присвоєно значення Рядок
Boolean1 = true;
// Змінної Boolean1 присвоєно логічне значення true
Str1 = null; // Змінна Str1 не містить даних
Змінною може бути надано початкове значення відразу при її оголошенні:

var str1 = "Рядок";
var str2 = "Рядок", Number1 = 7;
// Можна задати початкові значення відразу кільком змінним.
Якщо в програмі звернутися до змінної, яка не оголошена, виникне

критична помилка. Якщо змінна оголошена, але їй не надано початкове
значення, то значення передбачається рівним undefined.
Оператор типу повертає рядок, що описує тип даних змінної.
Оператори JavaScript
Оператори дозволяють виконати певні події з даними. Наприклад,
оператори присвоєння служать для збереження даних у змінній, математичні
оператори дозволяють зробити арифметичні обчислення, а оператор
конкатенації рядків використовується для з'єднання двох рядків до одного.
Оператори беруть одне або два значення, що є змінною, константу або інший
вираз, що містить оператори або функції, і повертають одне значення, що
визначається за вихідними даними.
Розглянемо доступні в JavaScript оператори докладніше.
Математичні оператори
 + - додавання:
Z = X + Y;
 - - віднімання:
Z = X – Y;
 * - множення:
Z = X * Y;
 / - ділення:
Z = X/Y;
 % - ділення за модулем:
Z = X% Y;
 ++ - Оператор інкременту. Збільшує значення змінної на 1:
Z++; // Еквівалентно Z = Z + 1;
 -- - Оператор декременту. Зменшує значення змінної на 1:
Z--; // Еквівалентно Z = Z - 1;
Оператори інкременту та декременту можуть використовуватись у
постфіксній або префіксній формах:
Z++; Z--; // Постфіксна форма
++Z; --Z; // Префіксна форма
В чому різниця? При постфіксній формі (Z++) повертається значення, яке
змінна мала перед операцією, а при префіксній формі (++Z) спочатку
проводиться операція і тільки потім повертається значення. Продемонструємо
різницю на прикладі.
<html>
<head>
<title>Постфіксна та префіксна форма</title>
1251">
</head>
<body>

</script>
</body>
</html>
Оператори присвоєння
 = надає змінної значення:
Z = 5;
 += збільшує значення змінної на вказану величину:
Z + = 5; // Еквівалентно Z = Z + 5;
 -= зменшує значення змінної на вказану величину:
Z -= 5; // Еквівалентно Z = Z - 5;
 *= множить значення змінної на вказану величину:
Z * = 5; // Еквівалентно Z = Z * 5;
 /= ділить значення змінної на вказану величину:
Z / = 5; // Еквівалентно Z = Z/5;
 %= ділить значення змінної на вказану величину і повертає
залишок:
Z % = 5; // Еквівалентно Z = Z%5;
Двійкові оператори
 ~ - Двійкова інверсія:
Z = ~ X;
 & - Двійкове І:
Z = X & Y;
 | - Двійкове АБО:
Z = X | Y;
 ^ - Двійкове виключає АБО:
Z = X^Y;
 << - зрушення вліво - зрушення вліво на один або більше розрядів із
заповненням молодших розрядів нулями:
Z = X << Y;
 >> — зрушення вправо — зрушення вправо на один або більше
розрядів із заповненням старших розрядів вмістом найстаршого
розряду:
Z = X >> Y;
 >>> - зрушення вправо без урахування знака - зрушення вправо на
один або більше розрядів із заповненням старших розрядів нулями:
Z = X >>> Y;
Як випливає із назви, двійкові оператори виконують порозрядні дії з
двійковим уявленням цілих чисел.
Оператор обробки рядків

 + - Оператор конкатенації рядків:
var Str = "Рядок1" + "Рядок2";
// Змінна Str міститиме значення "Рядок1Рядок2"
Часто необхідно сформувати рядок, що складається з імені змінної та її

значення. Якщо написати
var X = "Рядок1";
var Z = "Значення дорівнює X";
то змінна Z міститиме значення "Значення дорівнює X", а якщо так:
var Z = "Значення дорівнює" + X;
то змінна Z міститиме значення "Значення дорівнює Рядок1".
Продемонструємо виведення значення змінної у діалоговому вікні.
<html>
<head>
<title>Виведення значення змінної</title>
</head>
<body>

</script>
</body>
</html>
Пріоритет виконання операторів
Перерахуємо оператори в порядку зменшення пріоритету:

 !, ~, ++, - заперечення, двійкова інверсія, інкремент, декремент;
 *, /, % - множення, розподіл, залишок від розподілу;
 +, - - додавання та віднімання;
 <<, >>, >>> - Двійкові зрушення;
 & - Двійкове І;
 ^ - Двійкове виключає АБО;
 | - Двійкове АБО;
 =, +=, -=, *=, /=, % = - привласнення.

Веб-технології і веб-дизайн (лекція 7)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Веб-технології і веб-дизайн (лекція 7)

Uploaded by

Copyright:

Available Formats

Лекція 7. Основи JavaScript.

JavaScript — це мова програмування, дозволяюча зробити Web-сторінку

Все, що розташоване після "//" до кінця рядка, у JavaScript вважається

Однорядковий коментар можна записати після виразу:

document.write("Hello, world"); // Однорядковий коментар

Виведення результатів роботи програми та введення даних

Перш ніж розпочинати вивчення мови JavaScript, розглянемо вбудовані

Вікно з повідомленням та кнопкою OK

Метод alert() відображає діалогове вікно з повідомленням та кнопкою OK.

Вікно з повідомленням та кнопками OK та Cancel

Метод confirm() відображає діалогове вікно з повідомленням та двома

Вікно з полем введення та кнопками OK та Cancel

Правильні імена змінних:

x, strName, y1, _name, frame1

Неправильні імена змінних:

1y, Ім'яЗмінної, frame

При вказівці імені змінної важливо враховувати регістр літер: strName та

У програмі змінні оголошуються ключовим словом var.

Можна оголосити відразу кілька змінних в одному рядку, вказавши їх

var x, strName, y1, _name, frame1;

Типи даних та ініціалізація змінних

У JavaScript змінні можуть містити такі типи даних:

Змінною може бути надано початкове значення відразу при її оголошенні:

Якщо в програмі звернутися до змінної, яка не оголошена, виникне

Оператор обробки рядків

Часто необхідно сформувати рядок, що складається з імені змінної та її

Перерахуємо оператори в порядку зменшення пріоритету:

You might also like