1 ЩО ТАКЕ JAVASCRIPT?

JavaScript – це мова програмування, яка дає можливість реалізовувати складну поведінку веб-сторінки. Кожен раз, коли ви бачите веб-сторінку, вона не тільки відображає статичний вміст, а й робить більше – своєчасно відображає оновлення контенту, виводить інтерактивні карти, 2D / 3D анімацію, прокручує відео і т.д.

JavaScript – це одна з трьох стандартних web технологій, дві з яких HTML і CSS.

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

CSS – це мова стилів за допомогою якої надається стиль відображення HTML контенту, наприклад колір фону (background) і шрифту.

JavaScript – мова програмування, яка дозволяє створити динамічно оновлюваний контент, управляє мультимедіа, анімує зображення і т.д. Наприклад, JavaScript може керувати зовнішнім виглядом сторінки або робити так, щоб сторінка реагувала на натискання клавіші або переміщення мишки. Такі сайти, як Gmail, Facebook і Twitter, використовують JavaScript для полегшення роботи з поштою, залишати відгуки або поліпшення навігації. Наприклад, коли, читаючи коментарі до публікації, можна було промотувати сторінку вниз і бачити все більше і більше повідомлень. Все це відбувається завдяки JavaScript.

Наприклад.

Візьмемо простий текст для прикладу. Для додання структури і смислового призначення тексту, розмітили його за допомогою HTML:

<p>Player 1: Chris</p>

Потім додамо трохи CSS, що б це виглядало симпатичніше:

p {
    font-family: 'helvetica neue', helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid rgba(0,0,200,0.6);
    background: rgba(0,0,200,0.3);
    color: rgba(0,0,200,0.6);
    box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
    border-radius: 10px;
    padding: 3px 10px;
    display: inline-block;
    cursor:pointer;
}

І нарешті, додамо трохи JavaScript для додання динамічної поведінки:

const para = document.querySelector('p'); 
para.addEventListener('click', updateName); 
function updateName() {     
let name = prompt('Enter a new name');     
para.textContent = 'Player 1: ' + name; 
}

Щоб писати і виконувати JavaScript-програми, достатньо інтернет-браузера – такого, як Internet Explorer, Mozilla Firefox або Google Chrome. У кожен з цих браузерів вбудований інтерпретатор JavaScript, який зможе виконувати JavaScript-програми.

Пробуємо JavaScript

Давайте напишемо просту JavaScript-програму за допомогою браузера Google Chrome (www.google.com/chrome). Встановіть Chrome на свій комп'ютер (якщо він ще не встановлений), запустіть його і введіть слова about: blank в адресному рядку. Тепер натисніть ENTER – відкриється порожня сторінка.

Почнемо з програмування в JavaScript-консолі Chrome (це секретний інструмент для тестування коротких програм на JavaScript).

Текст в консолі Chrome підсвічується різними кольорами в залежності від типу даних.

Наприклад, введіть в консолі:

Тепер натисніть ENTER. JavaScript повинен надрукувати результат виконання операції додавання:

2 ТИПИ ДАНИХ І ЗМІННІ

В JavaScript є три основних типи даних: числа, рядки і булеві значення. Наприклад, числом можна виразити вік або зріст.

В JavaScript числа записуються так:

Рядкові типи зберігаються в рядках:

Булеві значення можуть зберігати одну з двох величин – або це true ("істина"), або false («брехня»).

З даними різних типів і працювати слід по-різному. Наприклад, перемножити два числа, виділити чотири перших символи рядка, або, взявши два булевих значення, можна перевірити, чи є вони обидва «істиною» (true). Приклад дій показано нижче:

Будь-які дані в JavaScript – не більше ніж поєднання цих основних типів. Далі ми по черзі розглянемо кожен тип даних і вивчимо різні способи роботи з ними.

Напевно, ви помітили, що всі ці команди закінчуються на крапку з комою (;). Цим символом позначають кінець кожної окремої команди або інструкції мови JavaScript.

 

Числа і оператори

JavaScript дозволяє виконувати основні математичні операції, такі як додавання, віднімання, множення і ділення. Для їх запису використовуються відповідні оператори +, -, * і /.

Консоль JavaScript можна використовувати як калькулятор. Давайте, наприклад, обчислимо що-небудь складніше: суму 12345 і 56789.

Можна скласти кілька чисел за допомогою декількох знаків «плюс»:

Також JavaScript вміє віднімати:

Множити:

І ділити:

Крім того, можна об'єднувати ці прості операції, складаючи більш складні вирази, на кшталт такого:

Звичайно ж потрібно пам’ятати про пріоритет виконання операцій: множення і ділення виконуються раніше, ніж додавання і віднімання.

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

 

Змінні

Значенням в JavaScript можна давати імена, використовуючи змінні. Щоб створити нову змінну, використовуйте ключове слово var, після якого необхідно вказати ім'я змінної. Наприклад, створимо змінну з ім'ям nick:

Ми створили нову змінну під назвою nick. У відповідь консоль видала undefined – «значення не визначене». Однак це не помилка! JavaScript завжди так робить, якщо команда не повертає жодного значення. Імена змінних повинні бути написані латиницею.

Отже, щоб задати змінній значення, використовуйте знак «дорівнює»:

В даному випадку змінній age було присвоюємо значення 12. І знову в консолі з'являється undefined, оскільки ми тільки що створили нову змінну. Тепер в інтерпретаторі є змінна age, якій присвоєно значення 12. І якщо ввести в консолі ім'я age, інтерпретатор видасть значення цієї змінної:

Також в процесі виконання програми значення можна змінити:

Ось трохи складніший приклад: необхідно розділити карамельки серед братів та сестер.

 

Імена змінних

Вводячи імена змінних, будьте уважні і не допускайте помилок. Навіть якщо ви переплутаєте рядкові і великі літери, інтерпретатор JavaScript не розпізнає одну й ту ж змінну. Наприклад, якщо ви випадково введете ім'я numberOfCandies з малої буквою «c», виникне помилка:

На жаль, JavaScript слідує вашим вказівкам буквально. Якщо ви неправильно ввели ім'я змінної, JavaScript не зрозуміє, що ви мали на увазі, і видасть повідомлення про помилку. Ще один нюанс іменування змінних в JavaScript – в іменах не повинно бути пробілів, через що вони можуть виявитися складними для читання. Один із звичайних способів вирішення цієї проблеми – писати кожне слово з великої літери: numberOfCandies. Таку манеру іменування називають «CamelCase» записом: імена змінних прийнято починати з малої літери, а кожне наступне слово з великої літери без пробілів.

 

Створення нових змінних на основі обчислень

Можна створювати нові змінні, виконуючи математичні дії зі змінними, створеними раніше. Давайте за допомогою змінних з'ясуємо, скільки секунд в році і який ваш вік в секундах!

Скільки секунд в годині

Спочатку створимо дві нові змінні – secondsInAMinute (кількість секунд в хвилині) і minutesInAHour (кількість хвилин в годині) – і дамо їм обом значення 60 (оскільки, як ми знаємо, в хвилині 60 секунд, а в годині 60 хвилин). Тепер створимо змінну secondsInAHour (кількість секунд в годині), і нехай її значення дорівнює secondsInAMinute помножити на minutesInAHour. І виведемо на консоль обчислене значення в змінній secondsInAHour.

Скільки секунд в добі

Тепер створимо змінну hoursInADay (кількість годин у добі) і дамо їй значення 24. Потім створимо змінну secondsInADay (кількість секунд в добі), і нехай вона дорівнює secondsInAHour помножити на hoursInADay.

Скільки секунд в році

І нарешті, створимо змінні daysInAYear (кількість днів у році) і secondsInAYear (кількість секунд на рік): daysInAYear присвоємо значення 365, а secondsInAYear нехай дорівнює secondsInADay помножити на daysInAYear. Повертаємо значення secondsInAYear і бачимо, що це число 31 536 000 секунд.

Вік в секундах

Тепер, знаючи, скільки секунд в році, ви можете запросто дізнатися свій вік в секундах (з точністю до останнього дня народження):

Інкремент і декремент

Дуже часто необхідно збільшувати або зменшувати значення числових змінних на одиницю. Наприклад, у вас в програмі може бути змінна для підрахунку, скільки разів за день вам сказали "Привіт!". І при кожному новому вітанні цю змінну треба буде збільшити на 1. Збільшення на 1 називають інкрементом, а зменшення на 1 –декрементом. Виконуються інкремент і декремент за допомогою операторів ++ і – –.

Після виконання оператора ++ значення highFives (кількість вітань) збільшиться на 1, а після виконання оператора – – зменшиться на 1. Також ці оператори можна писати після імені змінної – ефект буде як і в попередньому випадку, однак після виконання такої команди JavaScript поверне початкове значення змінної, яким воно було до операції інкремента або декремента.

У цьому прикладі ми спочатку обнулили значення highFives. Команда highFives ++ збільшує змінну на 1, але число, яке друкує після цього JavaScript, є значенням до інкремента. Однак, повертаючи значення highFives в самому кінці (після двох інкрементів), ми отримуємо 2.

 

+ = (Плюс-дорівнює) і - = (мінус-дорівнює)

Щоб збільшити значення змінної на задане число, можна написати такий код:

В арсеналі JavaScript є простіший спосіб збільшення або зменшення змінної на задану величину: це оператори + = і - =. Нехай у нас є змінна x, тоді команда x + = 5 означає те ж саме, що і x = x + 5. Оператор - = працює аналогічно, тобто x = 9 відповідає x = x - 9 (зменшити x на 9) . За допомогою цих операторів можна, наприклад, управляти підрахунком очок в грі:

Аналогічно до вище розглянутих операторів існують і скорочені форми для операторів множення і ділення. Наприклад, * = і / =.

 

Рядки

До сих пір ми мали справу тільки з числами. Пора познайомитися з ще одним типом даних – з рядками. В JavaScript (як і в більшості інших мов програмування) рядок є набором символів – букв, цифр, знаків пунктуації та пробілів. Щоб JavaScript знав, де починається і закінчується рядок, його беруть в лапки. Ось класичний приклад з фразою «Привіт, світ!»:

Рядки можна зберігати в змінних, так само як числа:

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

А що якщо записати в лапках число? Рядок це буде або число? В JavaScript рядок залишається рядком, навіть якщо там зберігаються цифрові символи. Наприклад:

В змінній numberNine (число дев'ять) зберігається число, а в змінній stringNine (рядок дев'ять) – рядок. Щоб з'ясувати, у чому їх відмінність, подивимося, як вони реагують на додавання:

Додавши числові значення 9 і 9, ми отримали 18. Однак при використанні оператора + з рядками "9" і "9" ці рядки просто склеюються воєдино, утворюючи "99".

 

Об'єднання рядків

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

Тут ми створили дві змінні (greeting і myName) і привласнили кожній з них строкове значення ("Привіт" і "Нік" відповідно). При складанні цих змінних рядки об'єднуються, утворюючи новий рядок – "ПривітНік".

 

Як дізнатися довжину рядка

Щоб дізнатися довжину рядка, досить додати до його кінця .length:

Можна додавати .length до кінця як самого рядка, так і змінної, що містить рядок:

Тут ми присвоїли рядкове значення "Java" змінній java, а значення "Script" – змінній script. Потім ми додали .length до кінця кожної із змінних, дізнавшись таким чином довжини окремих рядків, а також довжину складеного з них нового рядка.

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

 

Повернення окремого символу рядка

Іноді потрібно отримати з рядка одиночний символ. Щоб отримати символ, що стоїть в певній позиції рядка, використовуйте квадратні дужки – []. Візьміть рядок (або змінну, в якій зберігається рядок) і поставте відразу після неї квадратні дужки, в яких вказана позиція потрібного символу. Наприклад, щоб отримати перший символ рядкової змінної myName, використовуйте запис myName [0]:

Зверніть увагу – щоб отримати перший символ, ми вказали в дужках позицію 0, а не 1. Справа в тому, що JavaScript (як і багато інших мов програмування) веде відлік символів з нуля. Таким чином, для отримання першого символу рядка вказуйте позицію 0, другого – 1 і т. д.

 

Отримання зрізу рядка

Щоб отримати частину, або «зріз», рядка, використовуйте slice. Наприклад, уявіть, що вам потрібен уривок з довгого опису фільму для анонса на вашому сайті. Щоб скористатися slice, поставте в кінці рядка (або змінної, що містить рядок) крапку, а після неї слово slice і круглі дужки. У дужках вкажіть позицію першого символу тієї частини рядка, яку ви хочете отримати, потім кому, а потім позицію останнього символу.

 

Переведення рядка в верхній або нижній регістр

Якщо потрібно вивести який-небудь текст великими літерами, скористайтесь функцією toUpperCase.

.toUpperCase () повертає новий рядок, всі букви в якого – великі.

Можна зробити і зворотну операцію, використавши toLowerCase:

.toLowerCase () переводить усі символи у нижній регістр.

 

Приклад.

Необхідно перетворити рядок "ПрИвіТ, яК сПраВи?" в "Привіт, як справи?".

 

Булеві значення

Тепер поговоримо про булеві значення. По суті, є лише два варіанти таких значень – це або true (істина), або false (брехня). Наприклад, ось простий вираз з булевим значенням:

Тут ми створили нову змінну з ім'ям javascriptIsCool і присвоїли їй логічне значення true. Наступним рядком ми повернули значення javascriptIsCool і, зрозуміло, отримали true.

 

Логічні операції

Подібно до того як числа можна об'єднувати за допомогою математичних операторів (+, -, *, / і інших), булеві значення можна об'єднувати за допомогою булевих (логічних) операторів. Результатом виразу, складеного з булевих значень і булевих операторів, завжди буде інше логічне значення (або true, або false).

Три основних булевих оператора – це &&, || і !.

&& (І)

Оператор && означає «і». Використовуйте оператор && з двома булевими значеннями, коли потрібно дізнатися, чи рівні вони обидва (true).

Наприклад, перед тим як піти в школу, ви хочете переконатися, що прийняли душ, а також взяли рюкзак. Якщо обидві ці умови істинні (true), можна йти в школу, але якщо хоч одне хибне (false), то йти не можна.

Тут ми встановлюємо змінну hadShower («ви прийняли душ?») В true, а змінну hasBackpack («ви взяли рюкзак? ») в false. Далі, вводячи hadShower && hasBackpack, ми запитуємо JavaScript: «чи рівні обидва цих значення true »? Оскільки це не так (рюкзак не в руках), JavaScript повертає false (тобто ви не готові йти в школу).

Давайте повторимо спробу, встановивши на цей раз обидві змінні в true:

Тепер JavaScript повідомляє нам, що hadShower && hasBackpack дорівнює true. Можна йти в школу!

|| (АБО)

Логічний оператор || означає «або». Використовуйте оператор || з двома булевими значеннями для перевірки, що як мінімум одне з них дорівнює true. Припустимо, ви знову готуєтеся йти в школу і хочете взяти з собою до обіду фрукти, причому вам неважливо, буде це яблуко, або апельсин, або і те й інше. За допомогою JavaScript можна перевірити, чи є у вас хоча б один з цих плодів:

Вираз hasApple || hasOrange дасть true, якщо або hasApple («взяли яблуко?»), або hasOrange («взяли апельсин?»), або обидві ці змінні мають значення true. Однак якщо обидві вони рівні false, вираз дасть false (тобто у вас з собою немає жодного фрукта).

! (НЕ)

Використовуйте цей оператор, щоб перетворити false в true або, навпаки, true в false. Це корисно для роботи зі значеннями-протилежностями. Наприклад:

У цьому прикладі ми встановили змінну isWeekend («зараз вихідний? ») в true. Потім ми дали змінній needToShowerToday («Сьогодні потрібно прийняти душ?») Значення !IsWeekend. Оператор ! перетворює значення в протилежне – тобто, якщо isWeekend дорівнює true, !isWeekend дасть нам не true (тобто false). Відповідно, запитуючи значення needToShowerToday, ми отримуємо false (Сьогодні вихідний, так що митися зовсім не обов'язково). Оскільки needToShowerToday дорівнює false, !NeedToShowerToday дасть true:

 

Поєднання логічних операторів

Оператори дають більше можливостей, якщо використовувати їх спільно.

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

 

В даному випадку Сьогодні не вихідний, ви прийняли душ, у вас немає з собою яблука, зате є апельсин – значить, потрібно йти в школу. Вираз hasApple || hasOrange записано в дужках, оскільки нам важливо переконатися, що ця перевірка виконана в першу чергу.

Точно так само як JavaScript виконує множення перш ніж додавання, в логічних виразах він виконує && перш ніж ||.

 

Порівняння чисел за допомогою булевих значень

Булеві значення можна використовувати для перевірки чисел, якщо ця перевірка має на увазі просту відповідь: так чи ні. Наприклад, уявіть, що ви працюєте в парку розваг, де один з атракціонів має обмеження: туди допускаються відвідувачі із зростом не менше 150 см. Коли хто-небудь хоче покататися, він повідомляє свій зріст, і вам потрібно перевірити, більше він допустимого чи менше.

Більше

Менше

Більше або дорівнює

Менше або дорівнює

Рівність

Щоб перевірити два числа на точну рівність, використовуйте потрійний знак рівності (===) – це оператор «дорівнює».

 

Подвійний знак рівності

Ще трохи заплутаю вас: в JavaScript є ще один оператор порівняння (подвійне дорівнює, ==), який означає «практично дорівнює».

Використовуйте його для перевірки двох значень на відповідність один одному, навіть якщо одне з них рядок, а інше – число. Всі значення належать до того чи іншого типу, так що число 5 відрізняється від рядка «5», хоч вони і виглядають схоже. Якщо порівняти їх з допомогою ===, JavaScript відповість, що значення не рівні. Однак при порівнянні через == вони виявляться рівними.

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

Справа в тому, що, порівнюючи значення через подвійне дорівнює, JavaScript насамперед намагається перетворити їх до одного типу. В даному випадку булеве значення він перетворює в числове – при цьому false стає нулем, а true – одиницею. Тому, порівнюючи 0 == false, ви отримаєте true!

 

undefined і null

І нарешті, в JavaScript є два особливих значення, вони називаються undefined і null. Обидва вони означають «порожньо», але зміст цього в обох випадках трохи різниться.

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

А значення null зазвичай використовується, щоб явно позначити – «Порожня змінна».

Ви отримаєте undefined, якщо створите змінну і не присвоїте їй значення, – JavaScript завжди повертає undefined, коли значення не визначене. Однак спеціально undefined зазвичай нічому не присвоюють; якщо вам захочеться позначити, що в змінній «порожньо», використовуйте для цього null.

Інакше кажучи, null потрібен, щоб явно показати відсутність значення, і часом це буває корисно.

 

3 МАСИВИ

Масив – це список, де зберігаються інші значення. За допомогою масивів JavaScript дозволяє створювати і групувати дані.

Наприклад, створимо масив з назв відомих динозаврів:

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

Тому краще віддати перевагу створенню масиву.

 

Створення масиву

Щоб створити масив, використовуйте квадратні дужки []. Фактично для задання порожнього масиву досить лише пари квадратних дужок:

Давайте заповнимо його елементами.

Щоб створити масив зі значеннями, потрібно перерахувати ці значення всередині квадратних дужок, розділяючи їх комами. Окремі значення, що зберігаються в масиві, називають елементами. В даному прикладі всі елементи будуть рядковими, тому запишемо їх в лапках. Збережемо наш масив у змінній з ім'ям dinosaurs:

Доступ до елементів масиву

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

Індекс – це номер елемента, в якому зберігається значення. Аналогічно символам в рядку, першому елементу масиву відповідає індекс 0, другому – 1, третьому – 2 і т. д. Тому, запросивши індекс 0 в масиві dinosaurs, ми отримали "Тиранозавр" (це перший елемент), а запросивши індекс 3 – "Тріцератопс" (четвертий елемент).

 

Створення та зміна елементів

Використовуючи індекс в квадратних дужках, можна задавати або змінювати значення елементів і навіть додавати нові елементи. Наприклад, щоб замінити вміст першого елемента масиву dinosaurs ("Тиранозавр") на "Тиранозавр рекс", можна написати:

Після цього масив dinosaurs стане таким:

За допомогою індексів також можна додавати в масив елементи. Наприклад, ось як створити масив dinosaurs, задаючи кожен елемент через квадратні дужки:

Спочатку створюємо порожній масив: var dinosaurs = []. Потім в кожен з наступних рядків додаємо по одному елементу командами dinosaurs [] з індексом від 0 до 8. Закінчивши наповнення масиву, можна подивитися його вміст і переконатися, що JavaScript розташував значення по порядку, відповідно з індексами.

Насправді в масив можна додати елемент з будь-яким індексом. Наприклад, щоб додати нового (відмінного) динозавра з індексом 33, введемо:

Елементи між індексами 8 і 33 отримають значення undefined. При друку масиву Chrome повідомляє кількість цих undefined-елементів, а не виводить кожен з них окремо.

Різні типи даних в одному масиві

Не обов'язково, щоб всі елементи масиву були одного типу. Наприклад, ось масив, в якому зберігається число (3), рядок ("динозаври"), масив (["трицератопс", "стегозавр", 3627.5]) і ще одне число (10):

Щоб звернутися до елементів масиву, вкладеного в інший масив, потрібно використовувати другу пару квадратних дужок. Наприклад, якщо команда dinosaursAndNumbers [2]; поверне весь вкладений масив, то dinosaursAndNumbers [2] [0]; – лише перший елемент цього вкладеного масиву ("трицератопс").

 

Робота з масивами

Працювати з масивами вам допоможуть властивості і методи. Властивості зберігають різні відомості про масиви, а методи зазвичай або змінюють його, або повертають новий масив.

Довжина масиву

Часом потрібно знати, скільки в масиві елементів. Для цього є властивість length (довжина), що зберігає кількість елементів в масиві. Щоб дізнатися довжину масиву, просто додайте .length після його імені.

Щоб дізнатися довжину цього масиву, додамо .length до maniacs:

JavaScript повідомляє, що в масиві 3 елементи, і ми знаємо, що їх індекси – 0, 1 і 2. Звідси випливає корисне спостереження: останній індекс масиву завжди на одиницю менше довжини цього масиву. Це значить, що є простий спосіб отримати останній елемент масиву, якою б не була його довжина:

 

Додавання елементів в масив

Щоб додати елемент до кінця масиву, можна скористатися методом push. Введіть .push після імені масиву, а після в круглих дужках вкажіть елемент, який потрібно додати:

Командою var animals = []; ми створили порожній масив animals, а потім методом push додали туди елемент "Кіт". Потім знову використовували push, додавши "Пес", а потім "Лама". Запитавши тепер вміст масиву animals, ми бачимо, що "Кіт", "Пес" і "Лама" стоять там в тому ж порядку, в якому ми їх додавали.

При виклику методу push відбуваються дві речі.

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

Щоб додати елемент в початок масиву, використовуйте метод .unshift (елемент):

 

Видалення елементів масиву

Видалити з масиву останній елемент можна, додавши до його імені .pop (). Метод pop робить відразу дві справи: видаляє останній елемент з масиву і повертає цей елемент у вигляді значення. Для прикладу почнемо з нашого масиву animals ["Білий ведмідь", "Мавпа", "Кіт", "Пес", "Лама"]. Далі створимо нову змінну lastAnimal і збережемо в ній останній елемент, викликавши animals.pop ().

Методи push і pop добре один одного доповнюють, оскільки деколи треба працювати тільки з кінцем масиву. Ви можете додати елемент в кінець викликом push, а потім, коли це знадобиться, забрати його звідти викликом pop.

Щоб видалити з масиву перший елемент, повернувши його значення, використовуйте .shift ():

Метод animals.shift () працює аналогічно animals.pop (), але елемент береться з початку масиву. На початку цього прикладу масив animals мав вигляд ["Лама", "Білий ведмідь", "Мавпа", "Кіт"].

Виклик .shift () повернув перший елемент, "Лама", який ми зберегли в змінній firstAnimal. Оскільки .shift () не тільки повертає елемент, але і видаляє його, в масиві animals залишилося лише ["Білий ведмідь", "Мавпа", "Кіт"].

 

Об'єднання масивів

Щоб «склеїти» два масиви, створивши таким чином новий масив, використовуйте команду firstArray.concat(otherArray). Метод concat створює масив, в якому елементи з firstArray будуть розташовані перед елементами з otherArray.

Нехай у нас є два списки тварин – і ми хочемо їх об'єднати. Якщо помістити наших пухнастих тварин в масив furryAnimals, а лускатих - в масив scalyAnimals, команда furryAnimals.concat(scalyAnimals) створить новий масив, на початку якого будуть елементи з першого масиву, а в кінці – з другого.

Хоч команда firstArray.concat(otherArray) і повертає масив, що містить всі елементи з firstArray і otherArray, самі ці масиви залишаються без змін. Запитавши вміст furryAnimals і scalyAnimals, ми бачимо, що масиви не змінилися.

Об'єднання декількох масивів

За допомогою concat можна об'єднати більше ніж два масиви. Для цього вкажіть додаткові масиви в дужках, розділивши їх комами:

Ми бачимо, що пернаті тварини з масиву featheredAnimals виявилися в самому кінці нового масиву, оскільки featheredAnimals був зазначений останнім в дужках методу concat.

 

Пошук індексу елемента в масиві

Щоб з'ясувати, який у певного елемента індекс в масиві, використовуйте .indexOf ("елемент"). Створимо масив colors з назвами квітів, а потім отримаємо індекси елементів «синій» і «зелений» за допомогою команд colors.indexOf ("синій") і colors.indexOf ("зелений"). Оскільки "синій" розташовується за індексом 2, colors.indexOf("синій") поверне 2. А "зелений" знаходиться за індексом 1, так що colors.indexOf("зелений") поверне 1.

Метод indexOf схожий на квадратні дужки, тільки тут все навпаки: команда colors [2] поверне "синій", а colors.indexOf ("синій") поверне 2.

Хоча елемент "синій" стоїть третім в черзі, його індекс дорівнює 2, адже ми завжди рахуємо з 0. Все те ж стосується і "зеленого" з індексом 1.

Якщо елемента, індекс якого ви запитуєте, в масиві немає, JavaScript поверне значення -1.

Таким чином JavaScript повідомляє: «елемент не знайдений», так чи інакше повертаючи з методу число.

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

 

Перетворюємо масив в рядок

Скориставшись методом .join (), можна з'єднати всі елементи масиву в один великий рядок.

Метод join повертає рядок, в якому через кому перераховані всі елементи масиву boringAnimals. Але що якщо ми не хочемо використовувати як роздільник кому?

Нам допоможе метод .join ("роздільник"), який робить все те ж саме, але замість ком ставить між елементами обраний роздільник. Давайте спробуємо три різних роздільники: дефіс з пробілами по сторонам, зірочку * і сполучник «і» з пробілами по сторонам. Зверніть увагу: роздільник потрібно записувати в лапках – адже це рядок.

Цей варіант join зручний, коли у вас є масив, з якого потрібно зробити рядок. Припустимо, у вас багато середніх імен та ви вирішили зберігати їх всі в масиві разом зі своїм особистим ім'ям і прізвищем.

І раптом комусь знадобилося ваше повне ім'я у вигляді рядка. Тодіметод join з роздільником-пропуском перетворює всі імена в шуканий рядок:

Не будь методу join, довелося б з'єднувати елементи вручну:

Крім того, цей код спрацює, тільки якщо у вас рівно два середніх імені. Якщо ж їх три або одне, програму доведеться міняти. А c join нічого міняти не треба – цей метод з'єднає в рядок всі елементи масиву незалежно від його довжини. Якщо ж в масиві зберігаються не рядкові значення, JavaScript перетворює їх в рядки перед тим, як з'єднати:

 

Випадковий вибір

Використовуючи масиви, можна написати програму, яка видає випадкові варіанти із заданого списку. Однак спочатку потрібно розібратися, звідки нам брати випадкові числа.

Використання Math.random ()

Випадкові числа можна генерувати за допомогою спеціального методу Math.random (), який при кожному виклику повертає випадкове число від 0 до 1:

Важливо пам'ятати, що Math.random () завжди повертає число менше 1, тобто ніколи не повертає власне 1.

Якщо вам потрібно число побільше, просто помножте отримане з методу Math.random () значення на відповідний коефіцієнт. Наприклад, якщо потрібно випадкове число від 0 до 10, помножте Math.random () на 10:

Округлення за допомогою Math.floor ()

І все ж ці випадкові значення не можна використовувати як індекси в масиві, оскільки індекси повинні бути цілими числами, а не десятковими дробами. Щоб виправити цей недолік, потрібен метод Math.floor (), округляти число до найближчого знизу цілого значення (по суті, він просто відкидає всі знаки після коми).

Давайте використаємо обидва методи, щоб отримати випадковий індекс.

Потрібно лише помножити Math.random () на довжину масиву і потім округлити отримане число методом Math.floor (). Наприклад, якщо в масиві чотири елементи, це можна зробити так:

При кожному запуску цей код буде повертати випадкове число від 0 до 3 (включаючи 0 і 3). Оскільки Math.random () завжди повертає значення менше 1, Math.random () * 4 ніколи не поверне 4 або більше число. Використовуючи це випадкове число як індекс, можна отримати випадковий елемент масиву:

За допомогою Math.floor (Math.random () * 4); ми отримали випадкове число від 0 до 3. Зберігши це число у змінній randomIndex, ми використовували його як індекс для отримання рядка з масиву randomWords. По суті, можна зробити цей код коротше, позбувшись від змінної randomIndex: