«Слова і кулі». Письменники, що захищають Україну. Єлизавета Жаріковаestet13
До вашої уваги історія про українську поетку, бойову медикиню, музикантку – Єлизавету Жарікову, яка з початку повномасштабної війни росії проти України приєдналася до лав ЗСУ.
Важливість впровадження стандарту ISO/IEC 17025:2019 у процес державних випро...tetiana1958
29 травня 2024 року на кафедрі зоології, ентомології, фітопатології, інтегрованого захисту і карантину рослин ім. Б.М. Литвинова факультету агрономії та захисту рослин Державного біотехнологічного університету було проведено відкриту лекцію на тему «Важливість впровадження стандарту ISO/IEC 17025:2019 у процес державних випробувань пестицидів: шлях до підвищення якості та надійності досліджень» від кандидата біологічних наук, виконавчого директора ГК Bionorma, директора Інституту агробіології Ірини Бровко.
Участь у заході взяли понад 70 студентів та аспірантів спеціальностей 202, 201 та 203, а також викладачі факультету та фахівці із виробництва. Тема лекції є надзвичайно актуальною для сільського господарства України і викликала жваве обговорення слухачів та багато запитань до лектора.
Дякуємо пані Ірині за приділений час, надзвичайно цікавий матеріал та особистий внесок у побудову сучасного захисту рослин у нашій країні!
Регіональний центр євроатлантичної інтеграції України, що діє при відділі документів із гуманітарних, технічних та природничих наук, підготував віртуальну виставку «Допомога НАТО Україні».
1. Вступ до JavaScript
Міністерство освіти і науки України
Волинський національний університет імені Лесі Українки
Кафедра теоретичної та комп’ютерної фізики імені А. В. Свідзинського
Олег Вілігурський
старший викладач кафедри теоретичної та
комп’ютерної фізики імені А. В. Свідзинського
Луцьк - 2021
2. • Що таке JavaScript?
• Що вміє JavaScript?
• Що НЕ вміє JavaScript?
3. Основні переваги JavaScript
• Повна інтеграція з HTML/CSS.
• Прості задачі виконуються просто.
• Підтримується усіма поширеними
браузерами і по замовчуванню
ввімкнений.
5. Довідники і специфікації
• Mozilla Developer Network (MDN) –
частково українізований
• MSDN – частково українізований
• htmlbook.ru – довідник по HTML і CSS
• www.w3schools.com/js/
• learn.javascript.ru/ - підручник
6. Редактори для коду
Вимоги до редакторів:
– Підсвітка синтаксису.
– Автодоповнення.
– «Фолдинг» (folding) – можливість сховати-
розкрити блок коду.
IDE: WebStorm, PHPStorm, Aptana
Легкі редактори: Sublime Text (shareware), Notepad ++, SciTe, Atom
7. Консоль розробника
• Виклик – клавіша F12
• Запуск сценаріїв:
– Ctrl+Enter (Firefox)
– Enter (Chrome), Shift+Enter для переходу на
новий рядок
11. Додаткові завдання:
• Створіть додаткову команду alert у
цьому самому скрипті
• Створіть нову команду alert в окремому
тезі <script>
12. Зовнішні скрипти, порядок
виконання
<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
14. Асинхронні скрипти: defer/async
• атрибути async і defer використовуються для того,
щоб поки вантажиться зовнішній скрипт – браузер
показав подальшу частину сторінки (за скриптом).
• defer зберігає відносну послідовність скриптів. Крім
того, defer чекає завантаження всієї сторінки.
• async не зберігає послідовність скриптів. Який
скрипт завантажить першим, той і спрацює.
19. Дещо про структуру коду
alert('Один'); alert('Два');
alert('Один')
alert('Два') // поганий стиль
alert('Один');
alert('Два'); // гарний стиль
20. Коментарі
alert( 'Один' );
// коментар
alert( 'Два' ); // коментар
/* багаторядковий
коментар.
alert( 'Три' ); // не виконується
*/
/*
/* Так не можна!!! (вкладений коментар) */
*/
alert( 'Чотири' );
Гарячі клавіші Ctrl+/ і Ctrl+Shift+/
21. Сучасний стандарт, "use strict"
Вмикається на початку коду директивою
"use strict";
або
’use strict’;
Скасувати не можна!
22. Змінні
var book;
book = 'Кобзар';
Або так:
var book = 'Кобзар';
Кілька змінних:
var user = 'John', age = 25, message = 'Hi!';
В іменах змінних допускаються букви,
цифри і символи _, $.
Перший символ не може бути цифрою.
Кирилиця не вітається!
var, class, return, export… – зарезервовані імена!
З незначними відмінностями працює оголошення змінних через
ключове слово let:
let gender = 'male';
23. Приклади використання
var message;
message = 'Hello!';
message = 'World!'; // поміняли значення
alert( message );
var hello = 'Hello world!';
var message;
message = hello; // скопіювали значення
alert( hello ); // Hello world!
alert( message ); // Hello world!
24. Константи
var PHONE = '+38 050 123 45 67';
var EARTH_RADIUS = 6371;
Або
const PHONE = '+38 050 123 45 67';
const EARTH_RADIUS = 6371;
25. Задача 4
1. Оголосіть змінні admin і name.
2. Запишіть в name значення "Вася".
3. Скопіюйте значення з name в admin .
4. Виведіть admin і name .
26. Правильний вибір імені змінної
• Ніякого трансліту, тільки англійська
• Не боятись довгих імен
• “Верблюжий стиль” (“camelCase”)
• Ім’я повинно відповідати даним
27. Задача 5
• Створіть ім’я для назви першої страви
в ресторані, назва страви - “Борщ".
Правильне ім’я оберіть самі.
• Створіть змінну для імені користувача
зі значенням “Вася". Ім’я теж на ваш
смак.
29. Виведення даних
JavaScript може видавати дані різними способами:
•“Вписування” у HTML елемент: innerHTML.
•Виведення у HTML-потік: document.write().
•Виведення у alert-вікно: window.alert() або alert().
•Виведення у консоль браузера: console.log().
36. Загальна інформація про типи
даних. typeof
• Число «number»
– Всі числа + Infinity + NaN
• Рядок «string»
let str = "Дядя Вася";
str = 'племінник Коля';
• Булевий (логічний) тип «boolean»
true, false
• Спеціальне значення «null»
• Спеціальне значення «undefined»
• Об’єкти «object»
let user = { name: "Вася" };
38. Основні оператори
• Унарні і бінарні оператори
• Унарні мають один аргумент (операнд),
бінарні – два.
• Той самий оператор може бути і
унарним і бінарним:
x = -x;
z = z - x;
39. Додавання чисел і рядків,
перетворення типів
var x = 1, y = 2;
alert( x + y); // 3
var a = "сірий" + "вовк";
alert( a ); // сірийвовк !Без
пробіла!
alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"
40. + може перетворювати число в рядок, інші
арифметичні оператори – тільки рядки в
числа
alert( 2 - '1' ); // 1
alert( 6 / '2' ); // 3
var one = "1";
var two = "2";
alert( one + two ); // "12", додаються рядки
alert( +one + +two ); // 3
49. Задача 8
Яким буде результат?
alert( "2" > "14" );
alert( +"2" > +"14" );
50. Взаємодія з користувачем: alert,
prompt, confirm
alert(повідомлення);
alert( "Привіт" + User );
result = prompt(title, default);
var years = prompt('Ваш вік?', 20);
alert('Вам ' + years + ' років');
При натисканні “Esc” повертає null.
result = confirm(question);
var isHungry = confirm("Хочете
їсти?");
52. Умовні оператори: if, '?'
if (умова) команда
або
if (умова) {
команди
}
Умова – логічне значення або
приводиться до логічного значення.
0, "", null, undefined, NaN – false
Все інше - true
53. if - else
var year = prompt('Який зараз рік?',
'');
if (year == 2020) {
alert( 'Правильно!' );
} else {
alert( 'Неправильно!' );
}
54. else if
var userMass = prompt('Ваша маса?',
'');
if (userMass < 50) {
alert( 'Сходіть-но поїсти' );
} else if (userMass > 120) {
alert( 'Сідайте на дієту' );
} else {
alert( 'Ну й нормально' );
}
57. Задача 11
За допомогою конструкції if..else
напишіть код, який отримує значення
prompt, а потім виводить alert:
•1, якщо значення >0,
•-1, якщо <0,
•0, якщо значення =0.
58. Розв’язок
var value = prompt('Введіть число',
0);
if (value > 0) {
alert( 1 );
} else if (value < 0) {
alert( -1 );
} else {
alert( 0 );
}
59. Задача 12 (домашнє завдання)
Напишіть код, який буде питати логін (prompt).
Якщо відвідувач вводить “Admin”, то питається
пароль, якщо натиснув “Відміна” (escape) –
виводить “Вхід скасовано”, якщо вводить щось
інше – “Я вас не знаю”.
Пароль перевіряти так. Якщо введено пароль
“javascript”, то виводить “Ласкаво просимо!”, інакше
– “Пароль неправильний”, при відміні – “Вхід
скасовано”.
Вказівка: по натисканню Esc prompt повертає null.
Виняток – Safari, який повертає порожній рядок.
67. Логічне НЕ:
var result = !value;
Спочатку аргумент зводиться до логічного
типу true/false, а потім повертається
протилежне значення.
Приклади:
alert( !true ); // false
alert( !0 ); // true
Подвійне логічне НЕ можна використовувати
для перетворення у логічний тип:
alert( !!"рядок" ); // true
alert( !!null ); // false
70. Задача 16
Напишіть умову if для перевірки того, що
age НЕ знаходиться між 14 і 90 включно.
Зробіть два варіанти умови: з
використанням оператора НЕ ! і без
цього оператора.
72. Перетворення типів
У 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
73. Порівняйте такі фрагменти:
var p = prompt("?", '');
alert (Boolean(Number(p)));
var p = prompt("?", '');
alert (Boolean(p));
Що буде якщо вводити 0 і якщо
натискати кнопку “Скасувати”?
75. Цикл do…while
do {
// тіло цикла
} while (умова)
Приклад:
var i = 0;
do {
alert( i );
i++;
} while (i < 3);
76. Цикл 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
}
77. Переривання циклу
Директива break.
Сумація чисел, поки користувач їх вводить
var sum = 0;
while (true) {
var value = +prompt("Введіть число",
'');
if (!value) break; // (*)
sum += value;
}
alert( 'Сума: ' + sum );
78. Факультативний матеріал
•continue – переривання поточної ітерації
•мітки для break/continue
Цикл for..in для перахунку
властивостей об’єкта – пізніше.
79. Задача 17
Яке останнє значення виведе цей код і
чому?
var i = 3;
while (i) {
alert( i-- );
}
81. Задача 18
Які значення виведуть цикли:
for (var i = 0; i < 5; i++) alert( i );
for (var i = 0; i < 5; ++i) alert( i );
82. Розв’язок
В обох випадках – від 0 до 4.
Алгоритм роботи for:
1. Призначити i=0
2. Перевірити i<5
3. Якщо правильно – виконати тіло цикла
alert(i), потім виконати i++
84. Розв’язки
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;
}
85. Задача 20
Напишіть цикл, який за допомогою prompt
пропонує ввести число, > 100. Якщо
користувач ввів інше число – попросити
ввести ще раз, і так далі. Вихід з циклу –
введення числа > 100 або кнопка
“Скасувати”.
Припускається, що користувач вводить
тільки числа.
86. Розв’язки
var num =1;
while (num <100 && !!num ==true){
num = prompt ("Введіть число > 100", '');
}
Або
var num;
do {
num = prompt("Введіть число > 100", 0);
} while (num <= 100 && num != null);
88. Приклад:
var a = 'весна';
switch (a) {
case 'зима':
alert( 'холодно' );
break;
case 'весна':
alert( 'тепло' );
break;
case 'літо':
alert( 'спекотно' );
break;
default:
alert( 'мокро' );
}
89. Якщо break нема, то виконання піде нижче по
наступних case, при цьому інші перевірки
ігноруються.
var a = 'весна';
switch (a) {
case 'зима':
alert( 'холодно' );
case 'весна':
alert( 'тепло' );
case 'літо':
alert( 'спекотно' );
default:
alert( 'мокро' );
}
Виведе по черзі тепло, спекотно, мокро.
90. Групування 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…
91. Задача 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' );
}
92. Розв’язок
var a = +prompt('a?', '');
switch (a) {
case 0:
alert( 0 );
break;
case 1:
alert( 1 );
break;
case 2:
case 3:
alert( '2,3' );
break;
}
94. Локальні змінні
Функції можуть містити локальні змінні, які будуть
видимі тільки всередині функції. Оголошуються через
var.
function showMessage() {
var message = 'текст у локальній змінній';
alert( message );
}
showMessage(); // тут все спрацює
alert( message ); // <-- буде помилка
95. Блоки 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 )?
96. Зовнішні і глобальні змінні
Функція може працювати зі змінними, оголошеними зовні:
var day = 'понеділок';
function showDay() {
alert( day ); // виведення зовнішньої змінної
day = 'вівторок'; // (1) зміна значення зовнішньої
змінної
var message = 'Сьогодні ' + day;
alert( message );
}
alert( day ); // понеділок
showDay();
alert( day ); // вівторок, бо функція змінила значення
змінної
Змінна, оголошена на рівні всього скрипта називається
97. Параметри функції
Функції можна передавати параметри
(аргументи), з якими вона працюватиме.
function rectangle(a,b) {
var S = a*b;
var P = 2*(a+b);
alert ("Площа прямокутника = " + S);
alert ("Периметр прямокутника = " +
P);
}
rectangle(2,3);
98. Аргументи по замовчуванню
У функції може бути будь-яка кількість аргументів. Якщо якийсь
аргумент при виклику функції не заданий, він буде рівним
undefined.
Приклад:
function rectangle(a,b) {
alert ( "a = " + a + ", b = " + b );
var S = a*b;
var P = 2*(a+b);
alert ("Площа прямокутника = " + S);
alert ("Периметр прямокутника = " + P);
}
rectangle(2);
Виведе спочатку “a = 2, b = undefined”, а потім “Площа
прямокутника = NaN”, “Периметр прямокутника = NaN”.
99. Завжди можна за своїм бажання задати значення аргументів по
замовчуванню. Наприклад:
function rectangle(a,b) {
alert ( "a = " + a + ", b = " + b );
if (b === undefined) {
b = a;
alert( "Будемо вважати, що маємо справу з квадратом"
);
}
var S = a*b;
var P = 2*(a+b);
alert ("Площа прямокутника = " + S);
alert ("Периметр прямокутника = " + P);
}
rectangle(2);
Альтернативний спосіб (замість блоку if):
b = b || a;
“Зайві” аргументи ігноруються.
rectangle(2, 3, 4, "ще щось"); // все добре працює
100. Повернення значення. 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) );
101. Директив 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
102. Задача 22
Напишіть функцію, яка виводить текст “Я
вивчаю JavaScript” і викличте її.
Задача 23
Напишіть функцію, яка виводить текст “Я
вивчаю parameter”, де parameter має
вводитись як аргумент. Викличте її з
аргументом JavaScript.
103. Задача 24
Напишіть функцію min(a,b), яка повертає
менше з чисел a,b.
Приклад роботи:
min(2, 5) == 2
min(3, -1) == -1
min(1, 1) == 1
104. Задача 25
Напишіть функцію pow(x,n), яка повертає
x в степені n, тобто перемножує x на себе
n разів і повертає результат. Вважається,
що x і n – цілі додатні числа.
Створіть сторінку, яка питає x і n, а потім
виводить результат pow(x,n).
105. Розв’язок
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) );
}
106. Функціональні вирази.
Function Expression
Синтаксис:
var f = function(параметри) {
// тіло функції
};
Основна відмінність: функції, оголошені як
Function Declaration, створюються
інтерпретатором до виконання коду.
myFunction(); // 1
function myFunction() {
alert( 1 );
}
107. Функціональні вирази дозволяють застосувати
умовне оголошення функції, наприклад:
var age = prompt('Ваш вік?');
var sayHi;
if (age >= 18) {
sayHi = function() {
alert( 'Заходьте' );
}
} else {
sayHi = function() {
alert( 'До 18 не можна' );
}
}
sayHi();
108. Рекурсія
В тілі функції можна викликати інші функції, зокрема,
саму себе.
function power(base, exponent) {
if (exponent == 0)
return 1;
else
return base * power(base, exponent - 1);
}
alert(power(2, 3));
109. Задача 26
Напишіть функцію sumTo(n), яка для
даного n рахує суму чисел від 1 до n.
Задачу можна розв'язати трьома
способами:
1. Через цикл.
2. Через рекурсію.
3. Через формулу суми арифметичної
прогресії.
114. Задача 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
115. Розв'язок
Пряма рекурсія:
function fib(n) {
return n <= 1 ? n : fib(n - 1) +
fib(n - 2);
}
alert( fib(3) ); // 2
alert( fib(7) ); // 13
// fib(77); // краще не запускати.
“Підвісить” браузер
116. Обчислення в циклі:
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
117. Методи і властивості
Всі значення у JavaScript, крім null і
undefined, містять набір допоміжних
функцій і значень, які називаються
методами і властивостями відповідно.
Вони викликаються через крапку.
118. Методи і властивості рядкових
величин
Властивість str.length
alert( "Якийсь текст".length ); // 12
var str = "Якийсь текст";
alert( str.length ); // 12
Методи викликаються з додаванням ().
Метод str.toUpperCase()
var txt = "Якийсь текст";
alert( txt.toUpperCase() ); // ЯКИЙСЬ ТЕКСТ
Аналогічно - toLowerCase()
119. Деякі спеціальні символи
n New line
r Carriage return
t Tab
Приклад:
alert( 'ОдинnДва' );
Екранування спеціальних символів
' '
" "
120. Властивість length
var str = "Myn";
alert( str.length ); // 3
Метод charAt()
var str = 'Реве та стогне Дніпр
широкий';
alert( str.charAt(0) ); // Р
Альтернативний спосіб:
alert( str[0] ); // Р
122. Виділення підрядка
substring(start [, end])
не включаючи end!
Приклад:
var str = "Hello world!";
var res = str.substring(0, 4);
alert( res ); // Hell
alert( str.substring(6) ); //
world!
123. substr(start [, length])
Приклад:
var str = "Hello world!";
var res = str.substr(1, 4); // ello
alert( str.substr(6) ); // world!
slice(start [, end])
не влючаючи end!
Приклад:
var str = "Hello world!";
var res = str.slice(1, 4);
alert( res ); // ell
alert( str.slice(6) ); // world!
124. У методі substring від’ємні аргументи
заміняються на 0, а завеликі обрізаються до
довжини рядка. Якщо start > end, то
аргументи міняються місцями.
У методі slice від’ємні аргументи
відраховуються від кінця рядка.
alert( "JavaScript".substring(4, -1) ); // Java
alert( "JavaScript".slice(4, -1) ); // Scrip
125. Метод replace
str.replace(підрядок, новий_підрядок)
Заміняється тільки перше входження!
Приклад:
var str = "У лісі, лісі темному";
var str2 = str.replace("лісі","парку");
alert( str2 ); // = "У парку, лісі
темному"
alert( str ); // "У лісі, лісі
темному";
126. Задача 29
Напишіть функцію ucFirst(str), яка
повертає рядок str з великою першою
буквою, наприклад:
ucFirst("вася") == "Вася";
ucFirst("") == ""; // нема помилки
при порожньому рядку
127. Розв’язок
function ucFirst(str) {
if (!str) return str; // спрацює
тільки для порожнього рядка
return str[0].toUpperCase() +
str.slice(1);
}
alert( ucFirst("вася") );
128. Задача 30
Напишіть функцію checkSpam(str), яка
повертає true, якщо рядок str містить
"porn" або "xxx", а інакше false. Функція
повинна бути нечутливою до регістру.
129. Розв’язок
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("Голосуйте за Івана!") );
130. Задача 31
Напишіть функцію countSubstr(str), яка
рахуватиме всі входження підрядка у
рядок. Наприклад:
alert( countSubstr("Думи мої,
думи мої/nЛихо мені з вами!",
"Думи") ); // 2
131. Розв’язок 1
var txt = "Думи мої, думи мої/nЛихо мені з вами!";
var substr = "Думи";
function countSubstr(str, substr) {
var counter = 0;
var lowerStr = str.toLowerCase();
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);
132. Розв’язок 2
function countSubstr2(str, substr) {
var counter = 0;
var pos = 0;
var lowerStr = str.toLowerCase();
var lowerSubstr = substr.toLowerCase();
while (true) {
var foundPos =
lowerStr.indexOf(lowerSubstr, pos);
if (foundPos == -1) break;
pos = foundPos + 1;
counter++;
}
return counter;
133. Задача 32
Напишіть функцію truncate(str,
maxlength), яка перевіряє довжину
рядка str, і якщо вона > maxlength –
заміняє кінець str на "...", так щоб
її довжина стала рівна maxlength.
Приклад роботи:
truncate("Еней був парубок моторний І
хлопець хоть куди козак", 20) = "Еней
був парубок ...";
truncate("Котляревський", 20) = "
Котляревський";
134. Розв’язок
function truncate(str, maxlength) {
if (str.length > maxlength) {
return str.slice(0, maxlength - 3) +
'...'; // довжина стане рівною
maxlength
}
return str;
}
alert( truncate("Еней був парубок
моторний І хлопець хоть куди козак",
20) );
alert( truncate("Котляревський", 20) );
135. Методи і властивості числових
величин
Метод 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
136. Запис числа в різних формах:
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
137. Перетворення числа в іншу систему:
var n = 255;
alert( n.toString(16) ); // ff
alert( n.toString(2) ); //
11111111
141. Деякі математичні методи
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)
142. Задача 34
а) Напишіть код для генерації
випадкового числа від min до max.
б) Напишіть код для генерації
випадкового цілого числа від min до max
(включаючи min і max).
143. Розв’язок
а)
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.
144. б) один з варіантів правильного розв’язку
function randomInteger(min, max) {
var rand = min + Math.random() * (max + 1 - min);
rand = Math.floor(rand);
return rand;
}
145. Об’єкти
У JavaScript об’єкт є набором
найменованих властивостей і методів-
функцій. Об’єкти можуть зберігатись у
змінних, доступ до властивостей і методів
– через “крапковий” синтаксис.
146. Створення об’єктів
Два способи:
o = new Object();
o = {}; // пусті фігурні дужки
Приклади:
var rak = {};
var koza = {
name: "Дереза",
age: 12,
talk: function () { alert("Заколю тебе рогами...");
}
};
alert( koza.name ); // Дереза
koza.talk(); // Заколю тебе рогами...
147. Додавання властивості:
rak.name = "Неборак";
rak.age = 60;
koza.color = "white";
Видалення:
delete koza.color;
Перевірка наявності властивості – in:
if ("name" in koza) {
alert( "Властивість name існує" );
}
Якщо властивості нема:
alert( koza.color ); // undefined
148. Інший спосіб доступу до властивостей:
об’єкт['властивість'].
var person = {};
person['name'] = 'Колобок';
alert( person['name'] ); //
Колобок
person.name = 'Солом'яний бичок';
alert( person['name'] ); //
Солом'яний бичок
149. Квадратні дужки дозволяють використовувати як ім’я
властивості будь-який рядок:
var person = {};
person['колір волосся'] = 'темний';
Допустимі обидва способи:
var menuSetup = {
width: 300,
'height': 200, // можна в лапках, можна
без
title: "Menu"
};
var menuSetup = {};
menuSetup.width = 300;
menuSetup.height = 200;
150. Значенням може бути навіть інший об’єкт
var character = {
name: "Баба Яга",
age: 700,
transport: {
name: "ступа",
capacity: 1,
maxSpeed: 200
}
}
alert( character.name ); // Баба Яга
alert( character.transport.name ); // Ступа
151. Задача 35
Виконайте таку послідовність дій:
Створіть порожній об’єкт user.
Додайте властивість name зі значенням
Вася.
Додайте властивість surname зі
значенням Дмитрук.
Поміняйте значення name на Сергій.
Видаліть властивість name з об’єкта.
Виведіть властивість surname.
152. Перебір властивостей об‘єкта
for (key in obj) {
/* ... якісь дії з obj[key] ...
*/
}
Зазвичай змінну key оголошують
прямо в циклі:
for (var key in menu) {
// ...
}
Можна використовувати й інші імена
для змінної: for(var propName in
153. Приклад ітерації по властивостях:
var character = {
name: "Баба Яга",
age: 700,
transport: {
name: "ступа",
capacity: 1,
maxSpeed: 200
}
}
for (var key in character) {
alert("ключ: " + key + "nзначення: " +
character[key]);
}
155. Розв’язок
function countProp (obj){
var counter = 0;
for (var key in obj) {
counter++;
}
return counter;
}
alert( countProp(character) );
P.S. Можливий коротший спосіб підрахунку:
Object.keys(character).length (див. Масиви).
156. Задача 37
Напишіть функцію isEmpty(obj), яка
повертає true, якщо в об’єкті нема
властивостей і false – якщо є хоч
одна властивість.
Приклад роботи:
var schedule = {};
alert( isEmpty(schedule) ); // true
schedule["8:30"] = "підйом";
alert( isEmpty(schedule) ); // false
158. Задача 38
Є об’єкт salaries з зарплатами.
var salaries = {
"Ахванасій": 5000,
"Савка": 6000,
"Соломон": 2500
};
Напишіть код, який виведе суму
всіх зарплат.
159. Розв’язок
var salaries = {
"Ахванасій": 5000,
"Савка": 6000,
"Соломон": 2500
};
var sum = 0;
for (var key in salaries) {
sum += salaries[key];
}
alert( sum );
160. Задача 39
Є об’єкт salaries з зарплатами. Напишіть
код, який виведе ім’я персонажа, у якого
найбільша зарплата.
Якщо об’єкт порожній, має виводитись
“Ніхто нічого не заробив”.
161. Розв’язок
var leader = "", maxValue = 0;
for (var key in salaries) {
if (salaries[key] > maxValue) {
maxValue = salaries[key];
leader = key;
}
}
alert( leader || "Ніхто нічого не
заробив" );
162. Задача 40
Напишіть функцію multiplyNumeric, яка множить всі числові властивості на 2.
Наприклад:
var salaries = { // до виклику
"Ахванасій": 5000,
"Савка": 6000,
"Митродора Пилипівна": "багато"
};
multiplyNumeric(salaries);
var salaries = {// після виклику
"Ахванасій": 10000,
"Савка": 12000,
"Митродора Пилипівна": "багато"
};
P. S. Для перевірки на число використовуйте функцію:
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n)
}
163. Розв’язок
function multiply(obj) {
for (var key in obj) {
if( isNumeric(obj[key]) ) {
obj[key] *= 2;
}
}
}
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n)
}
multiply( salaries );
164. Відмінності об’єктів від змінних
У змінній, якій надається об’єкт, зберігається
лише посилання на нього!
var user = { name: 'Вася' };
var admin = user;
admin.name = 'Люда';
alert(user.name); // 'Люда'
alert(admin.name); // 'Люда'
Зі звичайними змінними:
var user = 'Вася';
var admin = user;
admin = 'Люда';
alert( user ); // 'Вася'
165. Масиви з числовими індексами
Масив (Array) – різновид об’єкта,
призначений для зберігання багатьох
величин в одній змінній.
Приклади створення:
var arr = [];
var fruits = ["Яблуко", "Апельсин",
"Слива"];
166. Доступ до елементів масиву:
var fruits = ["Яблуко", "Апельсин",
"Слива"];
alert( fruits[0] ); // Яблуко
alert( fruits[1] ); // Апельсин
alert( fruits[2] ); // Слива
Заміну і додавання можна виконувати так:
fruits[2] = 'Груша'; // ["Яблуко",
"Апельсин", "Груша"]
fruits[3] = 'Лимон'; // ["Яблуко",
"Апельсин", "Груша", "Лимон"]
167. Число елементів масиву виводиться властивістю
length.
var fruits = ["Яблуко", "Апельсин", "Слива"];
alert( fruits.length ); // 3
alert виводить всі елементи масиву через
кому.
Елементом масиву може бути також інший
масив чи будь-який об’єкт.
var harvest = ["овочі", "зернові",
fruits];
alert( harvest ); //
овочі,зернові,Яблуко,Апельсин,Слива
168. Задача 41
З масива fruits невідомої довжини отримайте
останній елемент.
Поміняйте його значення на значення
елемента з номером 0.
170. Методи pop/push, shift/unshift
pop – видаляє останній елемент з масиву
і повертає його:
var fruits = ["Яблуко", "Апельсин",
"Слива"];
alert( fruits.pop() ); // видалили "Слива"
alert( fruits ); // Яблуко, Апельсин
push – додає елемент в кінець масиву.
var fruits = ["Яблуко", "Апельсин"];
fruits.push("Груша");
alert( fruits ); // Яблуко, Апельсин, Груша
171. shift – видаляє перший елемент і
повертає його:
var fruits = ["Яблуко", "Апельсин",
"Груша"];
alert( fruits.shift() );
alert( fruits ); // Апельсин, Груша
unshift – додає елемент на початок:
var fruits = ["Апельсин", "Груша"];
fruits.unshift('Яблуко');
alert( fruits ); // Яблуко, Апельсин, Груша
172. push і unshift можуть додавати зразу
кілька елементів.
shift і unshift повільніші за pop і push.
Масив з “дірами”:
var a = [];
a[0] = 0;
a[5] = 5;
alert( a ); // 0,,,,,5
alert( a.length ); // 6
173. Задача 42
Створіть масив cars з елементами "Volvo",
"BMW".
Додайте в кінець значення "Mercedes".
Замініть передостаннє значення на "Toyota".
Код такої операції повинен працювати з
масивом будь-якої довжини.
Видаліть перше значення масиву і виведіть його
alert’ом.
Додайте на початок значення "Nissan" і
"Renault".
175. Цикл по елементах:
var arr = ["Яблуко", "Апельсин", "Груша"];
for (var i = 0; i < arr.length; i++) {
alert( arr[i] );
}
Можна й for..in, але він значно
повільніший.
for (var key in arr) {
alert( arr[key] ); // Яблуко, Апельсин,
Груша
}
176. Задача 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 і заповнюйте відфільтрованими даними.
177. Розв’язок
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 );
178. Властивістю 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;
179. Ще один спосіб створення масиву:
var arr = new Array("Яблуко", "Груша", "Слива");
new Array(n) – створюється масив довжини n, але
без елементів! Цей спосіб краще уникати.
Багатовимірні масиви
Оскільки елементом масиву може бути навіть інший масив,
це дозволяє створювати багатовимірні масиви на зразок:
var matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
alert( matrix[1][1] ); // центральний елемент -
5
180. Методи масивів
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('') ); // с,л,о,в,о
181. 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
182. splice
array.splice(index[, howmany, item1, ....., itemX])
Видаляє howmany елементів масиву починаючи з
індекса index і вставляє на їх місце item1, ....., itemX.
Якщо index від’ємний – відраховується з кінця.
Метод повертає масив з видалених елементів.
Приклад:
var users = ["Люда", "Марина", "Іра", "Вася",
"Коля"];
var boys = users.splice(3, 2, "Ніна", "Зіна");
alert( users ); // Люда,Марина,Іра,Ніна,Зіна
alert( boys ); // Вася,Коля
183. Задача 44
У масиві numbers = [1, 2, 3, 4, 5, 6,
7, 8] поміняйте місцями першу і другу
половину. Тобто результатом виконання коду
має бути масив [5,6,7,8,1,2,3,4].
185. slice
array.slice(start, end)
Повертає ділянку масиву від begin до end, не включаючи end.
Вихідний масив при цьому не змінюється.
Приклад:
var numbers = ["Один", "Два", "Три", "Чотири",
"П'ять"];
alert( numbers.slice(1, 4) ); // Два,Три,Чотири
alert( numbers ); // Один,Два,Три,Чотири,П'ять
Якщо аргументу end нема – копіювання йде до
кінця масиву.
Від’ємні індекси відраховуються з кінця.
187. Функція сортування дозволяє задавати свій порядок
сортування. Вона отримує два аргументи 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;
}
188. Задача 45
Нехай є масив
var points = [13, 2, 3, 0, -5, 6, 17, 8, 9, 10];
Напишіть функцію getMinMax(arr), яка
отримує масив чисел і виводить масив з
двох чисел – мінімального і максимального
елементів вихідного масиву.
Розв’язок (з коментарями і належним
оформленням коду) надішліть на адресу
viligurskyi@gmail.com
190. Задача 46
Напишіть функцію flipSentence, яка міняє
порядок слів у тексті "Жили-були дід і
баба" на зворотний.
Розв’язок (з коментарями і
належним оформленням коду)
надішліть на адресу
viligurskyi@gmail.com
191. Задача 47
Є текст "Іван Сидорук, Петро Гнатюк, Василь
Коваленко". Треба написати функцію
change, яка видає текст, де ім’я і прізвище
переставлені місцями.
Розв’язок (з коментарями і
належним оформленням коду)
надішліть на адресу
viligurskyi@gmail.com
192. 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