JavaScript. Lectures. part 1. basis

Вступ до JavaScript
Міністерство освіти і науки України
Волинський національний університет імені Лесі Українки
Кафедра теоретичної та комп’ютерної фізики імені А. В. Свідзинського
Олег Вілігурський
старший викладач кафедри теоретичної та
комп’ютерної фізики імені А. В. Свідзинського
Луцьк - 2021

• Що таке JavaScript?
• Що вміє JavaScript?
• Що НЕ вміє JavaScript?

Основні переваги JavaScript
• Повна інтеграція з HTML/CSS.
• Прості задачі виконуються просто.
• Підтримується усіма поширеними
браузерами і по замовчуванню
ввімкнений.

Основні альтернативи
• Java
• Adobe Flash (ActionScript)

Довідники і специфікації
• Mozilla Developer Network (MDN) –
частково українізований
• MSDN – частково українізований
• htmlbook.ru – довідник по HTML і CSS
• www.w3schools.com/js/
• learn.javascript.ru/ - підручник

Редактори для коду
Вимоги до редакторів:
– Підсвітка синтаксису.
– Автодоповнення.
– «Фолдинг» (folding) – можливість сховати-
розкрити блок коду.
IDE: WebStorm, PHPStorm, Aptana
Легкі редактори: Sublime Text (shareware), Notepad ++, SciTe, Atom

Консоль розробника
• Виклик – клавіша F12
• Запуск сценаріїв:
– Ctrl+Enter (Firefox)
– Enter (Chrome), Shift+Enter для переходу на
новий рядок

Основи мови JavaScript
Тег SCRIPT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>Початок документа</p>
<script>
alert("Привіт, Світе!");
</script>
<p>Кінець документа</p>
</body>
</html>

Задача 1
Створіть код сторінки, яка виводить
повідомленя “Я вивчаю JavaScript!”,
збережіть її на диску, відкрийте у браузері.

Розв’язок
<!DOCTYPE html>
<html>
<head>
<title>Задача 1</title>
</head>
<body>
<script>
alert( 'Я вивчаю JavaScript!' );
</script>
</body>
</html>

Додаткові завдання:
• Створіть додаткову команду alert у
цьому самому скрипті
• Створіть нову команду alert в окремому
тезі <script>

Зовнішні скрипти, порядок
виконання
<script src="script.js"></script>
<script src="/path/to/script.js"></script>
<script
src="https://www.facebook.com/rsrc.php/v3/y7/r
/XWlsagvmeBU.js"></script>
Домашнє завдання
Прочитати про абсолютні і відносні шляхи у HTML

Асинхронні скрипти: defer/async
• атрибути async і defer використовуються для того,
щоб поки вантажиться зовнішній скрипт – браузер
показав подальшу частину сторінки (за скриптом).
• defer зберігає відносну послідовність скриптів. Крім
того, defer чекає завантаження всієї сторінки.
• async не зберігає послідовність скриптів. Який
скрипт завантажить першим, той і спрацює.

Задача 2
Виведіть alert зовнішнім скриптом
Файл alert.js розмістити в тій самій
директорії

Розв’язок
Код для HTML-файлу:
<!DOCTYPE html>
<html>
<head>
<title>Задача 2</title>
</head>
<body>
<script src="alert.js"></script>
</body>
</html>
Для файла alert.js:
alert( 'Я вивчаю JavaScript!' );

Задача 3
Яка послідовність виконання скриптів?
<script src="big.js"></script>
<script src="small.js"></script>
<script async src="big.js"></script>
<script async src="small.js"></script>
<script defer src="big.js"></script>
<script defer src="small.js"></script>

Розв’язки
• big.js, small.js.
• small.js, big.js (якщо big.js
довше завантажується).
• big.js, small.js.

Дещо про структуру коду
alert('Один'); alert('Два');
alert('Один')
alert('Два') // поганий стиль
alert('Один');
alert('Два'); // гарний стиль

Коментарі
alert( 'Один' );
// коментар
alert( 'Два' ); // коментар
/* багаторядковий
коментар.
alert( 'Три' ); // не виконується
*/
/*
/* Так не можна!!! (вкладений коментар) */
*/
alert( 'Чотири' );
Гарячі клавіші Ctrl+/ і Ctrl+Shift+/

Сучасний стандарт, "use strict"
Вмикається на початку коду директивою
"use strict";
або
’use strict’;
Скасувати не можна!

Змінні
var book;
book = 'Кобзар';
Або так:
var book = 'Кобзар';
Кілька змінних:
var user = 'John', age = 25, message = 'Hi!';
В іменах змінних допускаються букви,
цифри і символи _, $.
Перший символ не може бути цифрою.
Кирилиця не вітається!
var, class, return, export… – зарезервовані імена!
З незначними відмінностями працює оголошення змінних через
ключове слово let:
let gender = 'male';

Приклади використання
var message;
message = 'Hello!';
message = 'World!'; // поміняли значення
alert( message );
var hello = 'Hello world!';
var message;
message = hello; // скопіювали значення
alert( hello ); // Hello world!
alert( message ); // Hello world!

Константи
var PHONE = '+38 050 123 45 67';
var EARTH_RADIUS = 6371;
Або
const PHONE = '+38 050 123 45 67';
const EARTH_RADIUS = 6371;

Задача 4
1. Оголосіть змінні admin і name.
2. Запишіть в name значення "Вася".
3. Скопіюйте значення з name в admin .
4. Виведіть admin і name .

Правильний вибір імені змінної
• Ніякого трансліту, тільки англійська
• Не боятись довгих імен
• “Верблюжий стиль” (“camelCase”)
• Ім’я повинно відповідати даним

Задача 5
• Створіть ім’я для назви першої страви
в ресторані, назва страви - “Борщ".
Правильне ім’я оберіть самі.
• Створіть змінну для імені користувача
зі значенням “Вася". Ім’я теж на ваш
смак.

Розв’язок
• var firstDishName = "Борщ";
• var userName = "Вася";

Виведення даних
JavaScript може видавати дані різними способами:
•“Вписування” у HTML елемент: innerHTML.
•Виведення у HTML-потік: document.write().
•Виведення у alert-вікно: window.alert() або alert().
•Виведення у консоль браузера: console.log().

innerHTML
<!DOCTYPE html>
<html>
<head>
<title>innerHTML</title>
</head>
<body>
<h2 id="pageHeader">Заголовок</h2>
<p id="par1">Перший абзац</p>
<p id="par2">Другий абзац</p>
<script>
alert( "Пауза" );
document.getElementById("par1").innerHTML = "Зовсім
інший текст";
</script>
</body>
</html>

innerHTML
Замість
document.getElementById("par1").innerHTML
зазвичай можна використати скорочену форму:
par1.innerHTML

document.write()
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
alert( "Пауза" );
document.write("Текст через document.write()");
</script>
</body></html>

!!! Використання document.write() після повного завантаження HTML,
замінить весь існуючий HTML.
<!DOCTYPE html>
<html>
<head>
<title>innerHTML</title>
</head>
<body>
<p id="part1">Перший абзац</p>
<button type="button" onclick="document.write('Якийсь
новий текст')">Кнопка з текстом</button>
</body>
</html>

alert()
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
alert( 2 + 2 );
</script>
<p>Третій абзац</p>
</body>
</html>
Повна форма: window.alert()

console.log()
<!DOCTYPE html>
<html>
<body>
<script>
console.log(2 + 2);
console.log("Повідомлення");
</script>
</body>
</html>

Загальна інформація про типи
даних. typeof
• Число «number»
– Всі числа + Infinity + NaN
• Рядок «string»
let str = "Дядя Вася";
str = 'племінник Коля';
• Булевий (логічний) тип «boolean»
true, false
• Спеціальне значення «null»
• Спеціальне значення «undefined»
• Об’єкти «object»
let user = { name: "Вася" };

Оператор typeof повертає тип об’єкта:
typeof x
або
typeof (x)

Основні оператори
• Унарні і бінарні оператори
• Унарні мають один аргумент (операнд),
бінарні – два.
• Той самий оператор може бути і
унарним і бінарним:
x = -x;
z = z - x;

Додавання чисел і рядків,
перетворення типів
var x = 1, y = 2;
alert( x + y); // 3
var a = "сірий" + "вовк";
alert( a ); // сірийвовк !Без
пробіла!
alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"

+ може перетворювати число в рядок, інші
арифметичні оператори – тільки рядки в
числа
alert( 2 - '1' ); // 1
alert( 6 / '2' ); // 3
var one = "1";
var two = "2";
alert( one + two ); // "12", додаються рядки
alert( +one + +two ); // 3

Пріоритет операторів
16
Unary Plus + …
Unary Negation - …
Prefix Increment ++ …
Prefix Decrement -- …
typeof typeof …
15 Exponentiation … ** …
14
Multiplication … * …
Division … / …
Remainder … % …
13
Addition … + …
Subtraction … - …
3 Assignment
… = …
… += …
… -= …
… **= …
… *= …
… /= …
https://developer.mozilla.org/uk/docs/Web/JavaScript/Refere
nce/Operators/Operator_Precedence

Інкремент/декремент: ++, --
var i = 1;
var a = ++i;
alert(a); // 2
var i = 1;
var a = i++;
alert(a); // 1

Скорочена арифметика
var n = 2;
n = n + 5; // n = 7
n = n * 2; // n = 14
var n = 2;
n += 5;
n *= 2;
alert( n ); // 14

Задача 6
Розберіть наступний код:
var a = b = 1, c, d;
c = ++a; alert(c);
d = b++; alert(d);
c = (2+ ++a); alert(c);
d = (2+ b++); alert(d);

Задача 7
Якого значення набудуть a і x?
var a = 2;
var x = 1 + (a *= 2);

Оператори порівняння
>, <
>=, <=
==
!=
Логічні значення
true
false

Приклад
var a = true;
var b = 3 > 4; // b = false
alert( b ); // false
alert( a != b ); // (true !=
false) правильно, виведе true

Порівняння рядків
Порівнюються посимвольно. При цьому:
'A' < 'B'<...<'a'<...<'а'<'б'
Приклади:
alert( 'кілограм' > 'грам' ); // true
alert( 'метр' > 'сантиметр' ); // false
alert( 'кілометр' > 'кілограм' ); // true
alert( 'граматика' > 'грам' );
// true, бо 'а' > ніж «нічого»

Задача 8
Яким буде результат?
alert( "2" > "14" );
alert( +"2" > +"14" );

Взаємодія з користувачем: alert,
prompt, confirm
alert(повідомлення);
alert( "Привіт" + User );
result = prompt(title, default);
var years = prompt('Ваш вік?', 20);
alert('Вам ' + years + ' років');
При натисканні “Esc” повертає null.
result = confirm(question);
var isHungry = confirm("Хочете
їсти?");

Задача 9
Створіть сторінку, яка запитує у
користувача його ім’я і вітається з ним.

Умовні оператори: if, '?'
if (умова) команда
або
if (умова) {
команди
}
Умова – логічне значення або
приводиться до логічного значення.
0, "", null, undefined, NaN – false
Все інше - true

if - else
var year = prompt('Який зараз рік?',
'');
if (year == 2020) {
alert( 'Правильно!' );
} else {
alert( 'Неправильно!' );
}

else if
var userMass = prompt('Ваша маса?',
'');
if (userMass < 50) {
alert( 'Сходіть-но поїсти' );
} else if (userMass > 120) {
alert( 'Сідайте на дієту' );
} else {
alert( 'Ну й нормально' );
}

Задача 10
Чи виведеться alert?
if ("0") {
alert( 'Привіт' );
}

Тернарний оператор ? :
умова ? значення1 : значення2
access = (age > 14) ? true : false;
те саме, що
if (age > 14) {
access = true;
} else {
access = false;
}

Задача 11
За допомогою конструкції if..else
напишіть код, який отримує значення
prompt, а потім виводить alert:
•1, якщо значення >0,
•-1, якщо <0,
•0, якщо значення =0.

Розв’язок
var value = prompt('Введіть число',
0);
if (value > 0) {
alert( 1 );
} else if (value < 0) {
alert( -1 );
} else {
alert( 0 );
}

Задача 12 (домашнє завдання)
Напишіть код, який буде питати логін (prompt).
Якщо відвідувач вводить “Admin”, то питається
пароль, якщо натиснув “Відміна” (escape) –
виводить “Вхід скасовано”, якщо вводить щось
інше – “Я вас не знаю”.
Пароль перевіряти так. Якщо введено пароль
“javascript”, то виводить “Ласкаво просимо!”, інакше
– “Пароль неправильний”, при відміні – “Вхід
скасовано”.
Вказівка: по натисканню Esc prompt повертає null.
Виняток – Safari, який повертає порожній рядок.

Задача 13
Перепишіть if з використанням
конструкції '? :'
if (a + b < 4) {
result = 'Мало';
} else {
result = 'Багато';
}

Розв’язок
result = (a + b < 4) ? 'Мало' : 'Багато';

Задача 14
Перепишіть if…else в '? :'
var gender, message;
if (gender == 'male') {
message = 'Привіт, пане';
} else if (gender == 'female') {
message = 'Привіт, пані';
} else if (gender == '') {
message = 'Привіт';
} else {
message = '';
}

Розв’язок
var gender, message;
gender = prompt("Ваша стать?", '');
message = (gender == 'male') ? 'Привіт, пане' :
(gender == 'female') ? 'Привіт, пані' :
(gender == '') ? 'Привіт' :
'';
alert(message);

Логічні оператори
Логічні ||(АБО), &&(І), !(Не).
alert( true || true ); // true
alert( false || true ); // true
alert( true || false ); // true
alert( false || false ); // false
alert( true && true ); // true
alert( false && true ); // false
alert( true && false ); // false
alert( false && false ); // false
Пріоритет у && більший, ніж у ||:
alert( true || true && false ); // true

Логічне НЕ:
var result = !value;
Спочатку аргумент зводиться до логічного
типу true/false, а потім повертається
протилежне значення.
Приклади:
alert( !true ); // false
alert( !0 ); // true
Подвійне логічне НЕ можна використовувати
для перетворення у логічний тип:
alert( !!"рядок" ); // true
alert( !!null ); // false

Задача 15
Напишіть умову if для перевірки того, що
змінна age знаходиться між 14 і 90
включно.

Розв’язок
if (age >= 14 && age <= 90)

Задача 16
Напишіть умову if для перевірки того, що
age НЕ знаходиться між 14 і 90 включно.
Зробіть два варіанти умови: з
використанням оператора НЕ ! і без
цього оператора.

Розв’язок
Перший варіант:
if (!(age >= 14 && age <= 90))
Другий варіант:
if (age < 14 || age > 90)

Перетворення типів
У JavaScript є три перетворення:
Рядкове: String(value) – в рядковому контексті або
при додаванні з рядком.
alert( true + "test" ); // "truetest"
alert( String(null) ); // "null"
Числове: Number(value) – в числовому контексті,
включаючи унарний плюс +value.
var a = +"123"; // 123
var a = Number("123"); // 123
Логічне: Boolean(value) – в логічному контексті,
можна також виконати подвійним НЕ: !!value.
alert( 2 == "два" ); // false
alert( Boolean("no") ); // true

Порівняйте такі фрагменти:
var p = prompt("?", '');
alert (Boolean(Number(p)));
var p = prompt("?", '');
alert (Boolean(p));
Що буде якщо вводити 0 і якщо
натискати кнопку “Скасувати”?

Цикли
Цикл while
while (умова) {
// код, тіло цикла
}
Приклад:
var i = 0;
while (i < 5) {
alert( i );
i++;
}

Цикл do…while
do {
// тіло цикла
} while (умова)
Приклад:
var i = 0;
do {
alert( i );
i++;
} while (i < 3);

Цикл for
for (початок; умова; крок) {
// ... тіло цикла ...
}
Приклад:
var i;
for (i = 0; i < 5; i++) {
alert( i );
}
Або
for (var i = 0; i < 5; i++) {
alert(i); // 0, 1, 2, 3, 4
}

Переривання циклу
Директива break.
Сумація чисел, поки користувач їх вводить
var sum = 0;
while (true) {
var value = +prompt("Введіть число",
'');
if (!value) break; // (*)
sum += value;
}
alert( 'Сума: ' + sum );

Факультативний матеріал
•continue – переривання поточної ітерації
•мітки для break/continue
Цикл for..in для перахунку
властивостей об’єкта – пізніше.

Задача 17
Яке останнє значення виведе цей код і
чому?
var i = 3;
while (i) {
alert( i-- );
}

Розв’язок
1.
Треба врахувати, що alert(i--)
спочатку виводить поточне значення i, а
потім зменшує його на 1.

Задача 18
Які значення виведуть цикли:
for (var i = 0; i < 5; i++) alert( i );
for (var i = 0; i < 5; ++i) alert( i );

Розв’язок
В обох випадках – від 0 до 4.
Алгоритм роботи for:
1. Призначити i=0
2. Перевірити i<5
3. Якщо правильно – виконати тіло цикла
alert(i), потім виконати i++

Задача 19
Виведіть всі парні числа від 2 до 10.

Розв’язки
for (var i=2; i<=10; i += 2) {
alert( i );
}
Або
for (var i = 2; i <= 10; i++) {
if (i % 2 == 0) {
alert( i );
}
}
Або
var i = 2;
while (i<=10) {
alert ( i );
i += 2;
}

Задача 20
Напишіть цикл, який за допомогою prompt
пропонує ввести число, > 100. Якщо
користувач ввів інше число – попросити
ввести ще раз, і так далі. Вихід з циклу –
введення числа > 100 або кнопка
“Скасувати”.
Припускається, що користувач вводить
тільки числа.

Розв’язки
var num =1;
while (num <100 && !!num ==true){
num = prompt ("Введіть число > 100", '');
}
Або
var num;
do {
num = prompt("Введіть число > 100", 0);
} while (num <= 100 && num != null);

Конструкція switch
Синтаксис:
switch(x) {
case 'value1': // if (x === 'value1')
...
[break]
case 'value2': // if (x === 'value2')
...
[break]
default:
...
[break]
}

Приклад:
var a = 'весна';
switch (a) {
case 'зима':
alert( 'холодно' );
break;
case 'весна':
alert( 'тепло' );
break;
case 'літо':
alert( 'спекотно' );
break;
default:
alert( 'мокро' );
}

Якщо break нема, то виконання піде нижче по
наступних case, при цьому інші перевірки
ігноруються.
var a = 'весна';
switch (a) {
case 'зима':
alert( 'холодно' );
case 'весна':
alert( 'тепло' );
case 'літо':
alert( 'спекотно' );
default:
alert( 'мокро' );
}
Виведе по черзі тепло, спекотно, мокро.

Групування case
Кілька значень case можна згрупувати.
switch (new Date().getDay()) {
case 4:
case 5:
text = "Скоро вихідні";
break;
case 0:
case 6:
text = "Сьогодні вихідний";
break;
default:
text = "Вихідні колись будуть…";
}
alert(text);
Фрагмент new Date().getDay() розглянемо пізніше. Він
виводить номер дня тижня, причому неділя – 0,
понеділок – 1…

Задача 21
Перепишіть код з if у switch.
var a = +prompt('a?', '');
if (a == 0) {
alert( 0 );
}
if (a == 1) {
alert( 1 );
}
if (a == 2 || a == 3) {
alert( '2,3' );
}

Розв’язок
var a = +prompt('a?', '');
switch (a) {
case 0:
alert( 0 );
break;
case 1:
alert( 1 );
break;
case 2:
case 3:
alert( '2,3' );
break;
}

Функції
Синтаксис:
function name(parameter1, parameter2,
parameter3) {
код, який має виконуватись
}
Приклад:
function sayHello() {
alert( 'Привіт!' );
}
sayHello();
sayHello();

Локальні змінні
Функції можуть містити локальні змінні, які будуть
видимі тільки всередині функції. Оголошуються через
var.
function showMessage() {
var message = 'текст у локальній змінній';
alert( message );
}
showMessage(); // тут все спрацює
alert( message ); // <-- буде помилка

Блоки if/else, switch, for, while, do..while
не обмежують область видимості змінних.
function count() {
for (var i = 0; i < 3; i++) {
var j = i * 2;
}
alert( i ); // i=3, останнє значення i,
при якому цикл перестав працювати
alert( j ); // j=4, останнє значення j,
яке обчислив цикл
}
count();
Чи можна поза функцією написати alert( i )?

Зовнішні і глобальні змінні
Функція може працювати зі змінними, оголошеними зовні:
var day = 'понеділок';
function showDay() {
alert( day ); // виведення зовнішньої змінної
day = 'вівторок'; // (1) зміна значення зовнішньої
змінної
var message = 'Сьогодні ' + day;
alert( message );
}
alert( day ); // понеділок
showDay();
alert( day ); // вівторок, бо функція змінила значення
змінної
Змінна, оголошена на рівні всього скрипта називається

Параметри функції
Функції можна передавати параметри
(аргументи), з якими вона працюватиме.
function rectangle(a,b) {
var S = a*b;
var P = 2*(a+b);
alert ("Площа прямокутника = " + S);
alert ("Периметр прямокутника = " +
P);
}
rectangle(2,3);

Аргументи по замовчуванню
У функції може бути будь-яка кількість аргументів. Якщо якийсь
аргумент при виклику функції не заданий, він буде рівним
undefined.
Приклад:
alert ( "a = " + a + ", b = " + b );
var S = a*b;
var P = 2*(a+b);
alert ("Периметр прямокутника = " + P);
}
rectangle(2);
Виведе спочатку “a = 2, b = undefined”, а потім “Площа
прямокутника = NaN”, “Периметр прямокутника = NaN”.

Завжди можна за своїм бажання задати значення аргументів по
замовчуванню. Наприклад:
alert ( "a = " + a + ", b = " + b );
if (b === undefined) {
b = a;
alert( "Будемо вважати, що маємо справу з квадратом"
);
}
var S = a*b;
var P = 2*(a+b);
alert ("Периметр прямокутника = " + P);
}
rectangle(2);
Альтернативний спосіб (замість блоку if):
b = b || a;
“Зайві” аргументи ігноруються.
rectangle(2, 3, 4, "ще щось"); // все добре працює

Повернення значення. return
function getArea(a,b) {
return a*b;
}
function getPerimeter(a,b) {
return 2*(a+b);
}
var S = getArea(2,3);
alert( "S = " + S );
alert( "P = " + getPerimeter(2,3) );

Директив return може бути кілька
function showSign(number) {
if (number > 0) {
return "Плюс";
} else if (number < 0) {
return "Мінус";
} else {
return;
}
}
alert( showSign(1) ); // Плюс
alert( showSign(-1) ); // Мінус
alert( showSign(0) ); // undefined

Задача 22
Напишіть функцію, яка виводить текст “Я
вивчаю JavaScript” і викличте її.
Задача 23
Напишіть функцію, яка виводить текст “Я
вивчаю parameter”, де parameter має
вводитись як аргумент. Викличте її з
аргументом JavaScript.

Задача 24
Напишіть функцію min(a,b), яка повертає
менше з чисел a,b.
Приклад роботи:
min(2, 5) == 2
min(3, -1) == -1
min(1, 1) == 1

Задача 25
Напишіть функцію pow(x,n), яка повертає
x в степені n, тобто перемножує x на себе
n разів і повертає результат. Вважається,
що x і n – цілі додатні числа.
Створіть сторінку, яка питає x і n, а потім
виводить результат pow(x,n).

Розв’язок
function pow(x, n) {
var result = x;
for (var i = 1; i < n; i++) {
result *= x;
}
return result;
}
var x = prompt("x?", '');
var n = prompt("n?", '');
if (n <= 1) {
alert( 'Степінь ' + n + ' не підтримується, введіть ціле
n > 1' );
} else {
alert( pow(x, n) );
}

Функціональні вирази.
Function Expression
Синтаксис:
var f = function(параметри) {
// тіло функції
};
Основна відмінність: функції, оголошені як
Function Declaration, створюються
інтерпретатором до виконання коду.
myFunction(); // 1
function myFunction() {
alert( 1 );
}

Функціональні вирази дозволяють застосувати
умовне оголошення функції, наприклад:
var age = prompt('Ваш вік?');
var sayHi;
if (age >= 18) {
sayHi = function() {
alert( 'Заходьте' );
}
} else {
sayHi = function() {
alert( 'До 18 не можна' );
}
}
sayHi();

Рекурсія
В тілі функції можна викликати інші функції, зокрема,
саму себе.
function power(base, exponent) {
if (exponent == 0)
return 1;
else
return base * power(base, exponent - 1);
}
alert(power(2, 3));

Задача 26
Напишіть функцію sumTo(n), яка для
даного n рахує суму чисел від 1 до n.
Задачу можна розв'язати трьома
способами:
1. Через цикл.
2. Через рекурсію.
3. Через формулу суми арифметичної
прогресії.

Розв'язки
1.
function sumTo(n) {
var sum = 0;
for (var i = 1; i <= n; i++) {
sum += i;
}
return sum;
}

2.
function sumTo(n) {
if (n == 1) return 1;
return n + sumTo(n - 1);
}
alert( sumTo(100) );
3.
function sumTo(n) {
return n * (n + 1) / 2;
}

Задача 27
Напишіть функцію для обчислення
факторіала числа.
n! = n*(n-1)*(n-2)*...*2*1.

Розв'язок
function factorial(n) {
return (n != 1) ? n * factorial(n - 1) : 1;
}
alert( factorial(5) ); // 120

Задача 28
Послідовність чисел Фібоначчі визначається формулою
Fn = Fn-1 + Fn-2. Тобто наступне число є сумою двох
попередніх.
Перші два числа рівні 1, далі 2 (1+1), 3(1+2), 5(2+3) і так
далі: 1, 1, 2, 3, 5, 8, 13, 21....
Напишіть функцію fib(n), яка повертає n-е число
Фібоначчі. Приклад роботи:
function fib(n) { /* ваш код */ }
alert( fib(3) ); // 2
alert( fib(7) ); // 13
alert( fib(77)); // 5527939700884757

Розв'язок
Пряма рекурсія:
function fib(n) {
return n <= 1 ? n : fib(n - 1) +
fib(n - 2);
}
alert( fib(3) ); // 2
alert( fib(7) ); // 13
// fib(77); // краще не запускати.
“Підвісить” браузер

Обчислення в циклі:
function fib(n) {
var a = 1,
b = 1;
for (var i = 3; i <= n; i++) {
var c = a + b;
a = b;
b = c;
}
return b;
}
alert( fib(3) ); // 2
alert( fib(7) ); // 13
alert( fib(77) ); // 5527939700884757

Методи і властивості
Всі значення у JavaScript, крім null і
undefined, містять набір допоміжних
функцій і значень, які називаються
методами і властивостями відповідно.
Вони викликаються через крапку.

Методи і властивості рядкових
величин
Властивість str.length
alert( "Якийсь текст".length ); // 12
var str = "Якийсь текст";
alert( str.length ); // 12
Методи викликаються з додаванням ().
Метод str.toUpperCase()
var txt = "Якийсь текст";
alert( txt.toUpperCase() ); // ЯКИЙСЬ ТЕКСТ
Аналогічно - toLowerCase()

Деякі спеціальні символи
n New line
r Carriage return
t Tab
Приклад:
alert( 'ОдинnДва' );
Екранування спеціальних символів
' '
" "

Властивість length
var str = "Myn";
alert( str.length ); // 3
Метод charAt()
var str = 'Реве та стогне Дніпр
широкий';
alert( str.charAt(0) ); // Р
Альтернативний спосіб:
alert( str[0] ); // Р

Пошук підрядка
indexOf(підрядок[, стартова_позиція]).
Приклад:
var someText = "Думи мої, думи
мої,nЛихо мені з вами!";
alert( someText.indexOf("Думи") ); // 0
alert( someText.indexOf("думи") ); // 10
alert( someText.indexOf("лихо") ); // -1

Виділення підрядка
substring(start [, end])
не включаючи end!
Приклад:
var str = "Hello world!";
var res = str.substring(0, 4);
alert( res ); // Hell
alert( str.substring(6) ); //
world!

substr(start [, length])
Приклад:
var res = str.substr(1, 4); // ello
alert( str.substr(6) ); // world!
slice(start [, end])
не влючаючи end!
Приклад:
var res = str.slice(1, 4);
alert( res ); // ell
alert( str.slice(6) ); // world!

У методі substring від’ємні аргументи
заміняються на 0, а завеликі обрізаються до
довжини рядка. Якщо start > end, то
аргументи міняються місцями.
У методі slice від’ємні аргументи
відраховуються від кінця рядка.
alert( "JavaScript".substring(4, -1) ); // Java
alert( "JavaScript".slice(4, -1) ); // Scrip

Метод replace
str.replace(підрядок, новий_підрядок)
Заміняється тільки перше входження!
Приклад:
var str = "У лісі, лісі темному";
var str2 = str.replace("лісі","парку");
alert( str2 ); // = "У парку, лісі
темному"
alert( str ); // "У лісі, лісі
темному";

Задача 29
Напишіть функцію ucFirst(str), яка
повертає рядок str з великою першою
буквою, наприклад:
ucFirst("вася") == "Вася";
ucFirst("") == ""; // нема помилки
при порожньому рядку

Розв’язок
function ucFirst(str) {
if (!str) return str; // спрацює
тільки для порожнього рядка
return str[0].toUpperCase() +
str.slice(1);
}
alert( ucFirst("вася") );

Задача 30
Напишіть функцію checkSpam(str), яка
повертає true, якщо рядок str містить
"porn" або "xxx", а інакше false. Функція
повинна бути нечутливою до регістру.

Розв’язок
function checkSpam(str) {
var lowerStr = str.toLowerCase();
return !!((lowerStr.indexOf('porn')+1) ||
(lowerStr.indexOf('xxx')+1));
}
alert( checkSpam('best pOrN movies') );
alert( checkSpam('free xxxxx') );
alert( checkSpam("Голосуйте за Івана!") );

Задача 31
Напишіть функцію countSubstr(str), яка
рахуватиме всі входження підрядка у
рядок. Наприклад:
alert( countSubstr("Думи мої,
думи мої/nЛихо мені з вами!",
"Думи") ); // 2

Розв’язок 1
var txt = "Думи мої, думи мої/nЛихо мені з вами!";
var substr = "Думи";
function countSubstr(str, substr) {
var counter = 0;
var lowerSubstr = substr.toLowerCase();
while (lowerStr.indexOf(lowerSubstr)!=-1) {
lowerStr =
lowerStr.slice(lowerStr.indexOf(lowerSubstr)+1);
counter++;
}
return counter;
}
alert( countSubstr(txt, substr) );
Скажіть, що буде виводитись такими командами:
alert(txt);

Розв’язок 2
function countSubstr2(str, substr) {
var counter = 0;
var pos = 0;
var lowerSubstr = substr.toLowerCase();
while (true) {
var foundPos =
lowerStr.indexOf(lowerSubstr, pos);
if (foundPos == -1) break;
pos = foundPos + 1;
counter++;
}
return counter;

Задача 32
Напишіть функцію truncate(str,
maxlength), яка перевіряє довжину
рядка str, і якщо вона > maxlength –
заміняє кінець str на "...", так щоб
її довжина стала рівна maxlength.
truncate("Еней був парубок моторний І
хлопець хоть куди козак", 20) = "Еней
був парубок ...";
truncate("Котляревський", 20) = "
Котляревський";

Розв’язок
function truncate(str, maxlength) {
if (str.length > maxlength) {
return str.slice(0, maxlength - 3) +
'...'; // довжина стане рівною
maxlength
}
return str;
}
alert( truncate("Еней був парубок
моторний І хлопець хоть куди козак",
20) );
alert( truncate("Котляревський", 20) );

Методи і властивості числових
величин
Метод num.toFixed(n)
Округлює число num до n знаків після десяткової крапки,
при необхідності доповнюючи нулями до заданої довжини і
повертає в рядковому вигляді.
var n = 12.345;
alert( n.toFixed(2) ); // "12.35"
alert( n.toFixed(0) ); // "12"
alert( n.toFixed(5) ); // "12.34500"
alert(12.toFixed(1)); // помилка! Можна так:
alert( 12..toFixed(1) ); // 12.0

Запис числа в різних формах:
alert( 0xFF ); // 255 шістнадцяткова
alert( 3e5 ); // 300000 експоненціальна
alert( 0b1010101 ); // 85 двійкова
Перетворення в число:
var s = "12.34";
alert( +s ); // 12.34
alert( +"12test" ); // NaN
alert( '12.34' / "-2" ); // -6.17

Перетворення числа в іншу систему:
var n = 255;
alert( n.toString(16) ); // ff
alert( n.toString(2) ); //
11111111

Математичні операції округлення
Math.floor Округлює вниз
Math.ceil Округлює вгору
Math.round Округлює до найближчого цілого
alert( Math.floor(3.1) ); // 3
alert( Math.ceil(3.1) ); // 4
alert( Math.round(3.1) ); // 3

Задача 33
а) Округліть число до другого знаку після
десяткової крапки.
3.456  3.46
б) Округліть число до сотень.
3456  3500

Розв’язок
var n1 = 3.456;
alert( Math.round(n1 * 100) / 100 );
var n2 = 3456;
alert( Math.round(n2 / 100) * 100 );

Деякі математичні методи
Math.sin(x) Синус
Math.cos(x) Косинус
Math.sqrt(x) Квадратний корінь
Math.pow(x, exp) xexp
Math.abs(x) Абсолютне значення
Math.max(a, b, c...)
Math.min(a, b, c...)
Math.random() випадкове число в інтервалі [0,1)

Задача 34
а) Напишіть код для генерації
випадкового числа від min до max.
б) Напишіть код для генерації
випадкового цілого числа від min до max
(включаючи min і max).

Розв’язок
а)
var min = 5, max = 10;
alert( min + Math.random() * (max - min) );
б)неправильний розв’язок:
function randomInteger(min, max) {
var rand = min + Math.random() * (max - min)
rand = Math.round(rand);
return rand;
}
alert( randomInteger(1, 3) ); // 2 випадає
вдвічі частіше, ніж 1 і 3.

б) один з варіантів правильного розв’язку
function randomInteger(min, max) {
var rand = min + Math.random() * (max + 1 - min);
rand = Math.floor(rand);
return rand;
}

Об’єкти
У JavaScript об’єкт є набором
найменованих властивостей і методів-
функцій. Об’єкти можуть зберігатись у
змінних, доступ до властивостей і методів
– через “крапковий” синтаксис.

Створення об’єктів
Два способи:
o = new Object();
o = {}; // пусті фігурні дужки
Приклади:
var rak = {};
var koza = {
name: "Дереза",
age: 12,
talk: function () { alert("Заколю тебе рогами...");
}
};
alert( koza.name ); // Дереза
koza.talk(); // Заколю тебе рогами...

Додавання властивості:
rak.name = "Неборак";
rak.age = 60;
koza.color = "white";
Видалення:
delete koza.color;
Перевірка наявності властивості – in:
if ("name" in koza) {
alert( "Властивість name існує" );
}
Якщо властивості нема:
alert( koza.color ); // undefined

Інший спосіб доступу до властивостей:
об’єкт['властивість'].
var person = {};
person['name'] = 'Колобок';
alert( person['name'] ); //
Колобок
person.name = 'Солом'яний бичок';
alert( person['name'] ); //
Солом'яний бичок

Квадратні дужки дозволяють використовувати як ім’я
властивості будь-який рядок:
var person = {};
person['колір волосся'] = 'темний';
Допустимі обидва способи:
var menuSetup = {
width: 300,
'height': 200, // можна в лапках, можна
без
title: "Menu"
};
var menuSetup = {};
menuSetup.width = 300;
menuSetup.height = 200;

Значенням може бути навіть інший об’єкт
var character = {
name: "Баба Яга",
age: 700,
transport: {
name: "ступа",
capacity: 1,
maxSpeed: 200
}
}
alert( character.name ); // Баба Яга
alert( character.transport.name ); // Ступа

Задача 35
Виконайте таку послідовність дій:
Створіть порожній об’єкт user.
Додайте властивість name зі значенням
Вася.
Додайте властивість surname зі
значенням Дмитрук.
Поміняйте значення name на Сергій.
Видаліть властивість name з об’єкта.
Виведіть властивість surname.

Перебір властивостей об‘єкта
for (key in obj) {
/* ... якісь дії з obj[key] ...
*/
}
Зазвичай змінну key оголошують
прямо в циклі:
for (var key in menu) {
// ...
}
Можна використовувати й інші імена
для змінної: for(var propName in

Приклад ітерації по властивостях:
var character = {
name: "Баба Яга",
age: 700,
transport: {
name: "ступа",
capacity: 1,
maxSpeed: 200
}
}
for (var key in character) {
alert("ключ: " + key + "nзначення: " +
character[key]);
}

Задача 36
Напишіть функцію countProp для
підрахунку кількості властивостей об’єкта
character.

Розв’язок
function countProp (obj){
var counter = 0;
for (var key in obj) {
counter++;
}
return counter;
}
alert( countProp(character) );
P.S. Можливий коротший спосіб підрахунку:
Object.keys(character).length (див. Масиви).

Задача 37
Напишіть функцію isEmpty(obj), яка
повертає true, якщо в об’єкті нема
властивостей і false – якщо є хоч
одна властивість.
var schedule = {};
alert( isEmpty(schedule) ); // true
schedule["8:30"] = "підйом";
alert( isEmpty(schedule) ); // false

Розв’язок
function isEmpty(obj) {
return false;
}
return true;
}

Задача 38
Є об’єкт salaries з зарплатами.
var salaries = {
"Ахванасій": 5000,
"Савка": 6000,
"Соломон": 2500
};
Напишіть код, який виведе суму
всіх зарплат.

Розв’язок
var salaries = {
"Савка": 6000,
"Соломон": 2500
};
var sum = 0;
for (var key in salaries) {
sum += salaries[key];
}
alert( sum );

Задача 39
Є об’єкт salaries з зарплатами. Напишіть
код, який виведе ім’я персонажа, у якого
найбільша зарплата.
Якщо об’єкт порожній, має виводитись
“Ніхто нічого не заробив”.

Розв’язок
var leader = "", maxValue = 0;
for (var key in salaries) {
if (salaries[key] > maxValue) {
maxValue = salaries[key];
leader = key;
}
}
alert( leader || "Ніхто нічого не
заробив" );

Задача 40
Напишіть функцію multiplyNumeric, яка множить всі числові властивості на 2.
Наприклад:
var salaries = { // до виклику
"Савка": 6000,
"Митродора Пилипівна": "багато"
};
multiplyNumeric(salaries);
var salaries = {// після виклику
"Савка": 12000,
"Митродора Пилипівна": "багато"
};
P. S. Для перевірки на число використовуйте функцію:
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n)
}

Розв’язок
function multiply(obj) {
if( isNumeric(obj[key]) ) {
obj[key] *= 2;
}
}
}
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n)
}
multiply( salaries );

Відмінності об’єктів від змінних
У змінній, якій надається об’єкт, зберігається
лише посилання на нього!
var user = { name: 'Вася' };
var admin = user;
admin.name = 'Люда';
alert(user.name); // 'Люда'
alert(admin.name); // 'Люда'
Зі звичайними змінними:
var user = 'Вася';
var admin = user;
admin = 'Люда';
alert( user ); // 'Вася'

Масиви з числовими індексами
Масив (Array) – різновид об’єкта,
призначений для зберігання багатьох
величин в одній змінній.
Приклади створення:
var arr = [];
var fruits = ["Яблуко", "Апельсин",
"Слива"];

Доступ до елементів масиву:
"Слива"];
alert( fruits[0] ); // Яблуко
alert( fruits[1] ); // Апельсин
alert( fruits[2] ); // Слива
Заміну і додавання можна виконувати так:
fruits[2] = 'Груша'; // ["Яблуко",
"Апельсин", "Груша"]
fruits[3] = 'Лимон'; // ["Яблуко",
"Апельсин", "Груша", "Лимон"]

Число елементів масиву виводиться властивістю
length.
var fruits = ["Яблуко", "Апельсин", "Слива"];
alert( fruits.length ); // 3
alert виводить всі елементи масиву через
кому.
Елементом масиву може бути також інший
масив чи будь-який об’єкт.
var harvest = ["овочі", "зернові",
fruits];
alert( harvest ); //
овочі,зернові,Яблуко,Апельсин,Слива

Задача 41
З масива fruits невідомої довжини отримайте
останній елемент.
Поміняйте його значення на значення
елемента з номером 0.

Розв’язок
alert( fruits[fruits.length - 1] );
fruits[fruits.length - 1] =
fruits[0];
alert( fruits );

Методи pop/push, shift/unshift
pop – видаляє останній елемент з масиву
і повертає його:
"Слива"];
alert( fruits.pop() ); // видалили "Слива"
alert( fruits ); // Яблуко, Апельсин
push – додає елемент в кінець масиву.
var fruits = ["Яблуко", "Апельсин"];
fruits.push("Груша");
alert( fruits ); // Яблуко, Апельсин, Груша

shift – видаляє перший елемент і
повертає його:
"Груша"];
alert( fruits.shift() );
alert( fruits ); // Апельсин, Груша
unshift – додає елемент на початок:
var fruits = ["Апельсин", "Груша"];
fruits.unshift('Яблуко');
alert( fruits ); // Яблуко, Апельсин, Груша

push і unshift можуть додавати зразу
кілька елементів.
shift і unshift повільніші за pop і push.
Масив з “дірами”:
var a = [];
a[0] = 0;
a[5] = 5;
alert( a ); // 0,,,,,5
alert( a.length ); // 6

Задача 42
Створіть масив cars з елементами "Volvo",
"BMW".
Додайте в кінець значення "Mercedes".
Замініть передостаннє значення на "Toyota".
Код такої операції повинен працювати з
масивом будь-якої довжини.
Видаліть перше значення масиву і виведіть його
alert’ом.
Додайте на початок значення "Nissan" і
"Renault".

Розв’язок
var cars = ["Volvo", "BMW"];
cars.push("Mercedess");
cars[cars.length - 1] = "Toyota";
alert( cars.shift() );
cars.unshift(["Nissan","Renault"]);
alert( cars );

Цикл по елементах:
var arr = ["Яблуко", "Апельсин", "Груша"];
for (var i = 0; i < arr.length; i++) {
alert( arr[i] );
}
Можна й for..in, але він значно
повільніший.
for (var key in arr) {
alert( arr[key] ); // Яблуко, Апельсин,
Груша
}

Задача 43
Напишіть функцію filterRange(arr, a, b), яка
отримує масив чисел arr і повертає новий
масив, який містить тільки числа з arr в
диапазоні від a до b. Тобто перевірка має
вигляд a ≤ arr[i] ≤ b. Функція не повинна
міняти arr. Наприклад:
var arr = [5, 4, 3, 8, 0];
var filtered = filterRange(arr, 3, 5);
// тепер filtered = [5, 4, 3]
// arr не змінився
Підказка: створіть тимчасовий порожній
масив results і заповнюйте відфільтрованими даними.

Розв’язок
function filterRange(arr, a, b) {
var result = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= a && arr[i] <= b) {
result.push(arr[i]);
}
}
return result;
}
var arr = [5, 4, 3, 8, 0];
var filtered = filterRange(arr, 3, 5);
alert( filtered );

Властивістю length можна керувати довжиною
масиву:
var arr = [1, 2, 3, 4, 5];
arr.length = 2; // вкоротили до 2
елементів
alert( arr ); // [1, 2]
arr.length = 5; // відновили довжину
alert( arr[3] ); // undefined:
значення не вернулись
Можна очистити масив так:
arr.length=0;

Ще один спосіб створення масиву:
var arr = new Array("Яблуко", "Груша", "Слива");
new Array(n) – створюється масив довжини n, але
без елементів! Цей спосіб краще уникати.
Багатовимірні масиви
Оскільки елементом масиву може бути навіть інший масив,
це дозволяє створювати багатовимірні масиви на зразок:
var matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
alert( matrix[1][1] ); // центральний елемент -
5

Методи масивів
split
string.split(separator[, limit])
Приклади:
var names = 'Іван, Степан, Петро, Віктор';
var arr = names.split(', ');
alert(arr); // Іван,Степан,Петро,Віктор
var names = 'Іван, Степан, Петро, Віктор';
var arr = names.split(', ', 3);
alert(arr); // Іван,Степан,Петро
var str = "слово";
alert( str.split('') ); // с,л,о,в,о

join
array.join([separator])
Елементи масиву об’єднуються в рядок.
Приклади:
var fruits = ["Banana", "Orange", "Apple",
"Mango"];
var energy = fruits.join();
alert( energy ); // Banana,Orange,Apple,Mango
var fruits = ["Banana", "Orange", "Apple",
"Mango"];
var energy = fruits.join(" + ");
alert( energy ); // Banana + Orange + Apple +
Mango

splice
array.splice(index[, howmany, item1, ....., itemX])
Видаляє howmany елементів масиву починаючи з
індекса index і вставляє на їх місце item1, ....., itemX.
Якщо index від’ємний – відраховується з кінця.
Метод повертає масив з видалених елементів.
Приклад:
var users = ["Люда", "Марина", "Іра", "Вася",
"Коля"];
var boys = users.splice(3, 2, "Ніна", "Зіна");
alert( users ); // Люда,Марина,Іра,Ніна,Зіна
alert( boys ); // Вася,Коля

Задача 44
У масиві numbers = [1, 2, 3, 4, 5, 6,
7, 8] поміняйте місцями першу і другу
половину. Тобто результатом виконання коду
має бути масив [5,6,7,8,1,2,3,4].

Розв’язок
var numbers = [1, 2, 3, 4, 5, 6, 7, 8];
var arr1 = numbers.splice(0, numbers.length/2);
arr1.splice(0,0,numbers);
alert( arr1 );

slice
array.slice(start, end)
Повертає ділянку масиву від begin до end, не включаючи end.
Вихідний масив при цьому не змінюється.
Приклад:
var numbers = ["Один", "Два", "Три", "Чотири",
"П'ять"];
alert( numbers.slice(1, 4) ); // Два,Три,Чотири
alert( numbers ); // Один,Два,Три,Чотири,П'ять
Якщо аргументу end нема – копіювання йде до
кінця масиву.
Від’ємні індекси відраховуються з кінця.

sort()
array.sort([compareFunction])
compareFunction – функція порівняння.
sort() – порівняння рядкових величин у
порядку зростання:
var arr = [ 1, 2, 15 ];
arr.sort();
alert( arr ); // 1, 15, 2 !!!

Функція сортування дозволяє задавати свій порядок
сортування. Вона отримує два аргументи a, b і повинна
повертати число > 0, якщо a > b. Приклад:
function compareNumeric(a, b) {
return (a > b) ? 1 : -1;
}
var arr = [ 1, 2, 15 ];
arr.sort(compareNumeric); // тільки ім’я
функції!
alert(arr); // 1, 2, 15
Можна задавати compareNumeric простіше:
function compareNumeric(a, b) {
return a - b;
}

Задача 45
Нехай є масив
var points = [13, 2, 3, 0, -5, 6, 17, 8, 9, 10];
Напишіть функцію getMinMax(arr), яка
отримує масив чисел і виводить масив з
двох чисел – мінімального і максимального
елементів вихідного масиву.
Розв’язок (з коментарями і належним
оформленням коду) надішліть на адресу
viligurskyi@gmail.com

reverse
array.reverse()
Змінює порядок елементів у масиві.
var fruits = ["Banana", "Orange", "Apple"];
fruits.reverse();
Результат: Apple,Orange,Banana

Задача 46
Напишіть функцію flipSentence, яка міняє
порядок слів у тексті "Жили-були дід і
баба" на зворотний.
Розв’язок (з коментарями і
належним оформленням коду)
надішліть на адресу

Задача 47
Є текст "Іван Сидорук, Петро Гнатюк, Василь
Коваленко". Треба написати функцію
change, яка видає текст, де ім’я і прізвище
переставлені місцями.
Розв’язок (з коментарями і
належним оформленням коду)
надішліть на адресу

concat
array1.concat(array2, array3, ..., arrayX)
array2, array3, ... – масиви чи інші елементи.
Приклад:
var arr1 = [1, 2];
var arr2 = [3, 4];
var newArr = arr1.concat(arr2, 5);
alert( newArr ); // 1,2,3,4,5

JavaScript. Lectures. part 1. basis

More Related Content

What's hot

Similar to JavaScript. Lectures. part 1. basis

More from Олег Вілігурський

Recently uploaded

JavaScript. Lectures. part 1. basis