Оволодіння JavaScript: Простий посібник з чіткими прикладами

текст перекладу

Вступ до JavaScript

Огляд:
JavaScript — це потужна мова програмування, яка додає інтерактивності вебсайтам. Вона працює разом з HTML і CSS для створення динамічних вебсторінок, дозволяючи виконувати такі дії, як валідація форм, анімації та оновлення в реальному часі.

Приклад:
Ось простий код на JavaScript, який змінює текст при натисканні кнопки:

<button onclick="document.getElementById('demo').innerHTML = 'Hello, World!'">Click Me</button>
<p id="demo"></p>

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

Коментарі в JavaScript

Огляд:
Консоль — це інструмент, який допомагає розробникам виводити повідомлення для налагодження чи інформування. Вона може показувати виводи, помилки або навіть об'єкти для перевірки під час розробки. Коментарі — це рядки коду, які не виконуються, але допомагають пояснити код іншим або нагадати розробнику про конкретні наміри.

Приклад:

// Це однорядковий коментар
console.log("Hello, JavaScript!"); // Виводить повідомлення в консоль


Для багаторядкових коментарів:

/*
Це багаторядковий коментар.
Він може охоплювати кілька рядків і не впливатиме на виконання коду.
*/


Приклад в реальному часі (Щоденна рутина):
Уявіть, що ви плануєте свої щоденні завдання. Ви записуєте свої цілі у список справ (як коментарі в коді), але самі завдання — це ваші реальні дії (як виконуємий код). Список справ допомагає зрозуміти, над чим ви працюєте, але не перериває вашого потоку дня.

Освоєння змінних у JavaScript

Огляд:
Змінні в JavaScript використовуються для зберігання даних, до яких можна звертатися та маніпулювати ними впродовж програми. Існує три основні способи оголошення змінних: var, let та const.

• var: Старіший, з обмеженою видимістю в межах функції.
• let: Сучасний, з обмеженою видимістю в межах блоку (рекомендується для більшості випадків).
• const: Оголошує константи, які не можна переприсвоїти.

Приклад:

let name = "John"; // Оголошуємо змінну за допомогою let
const age = 25; // Оголошуємо константу за допомогою const
console.log(name); // Виводить: John
console.log(age); // Виводить: 25


Приклад в реальному часі (Щоденна рутина):
Уявіть, що змінні — це елементи вашої щоденної рутини. Наприклад, let може бути, як ваші обіди (які можуть змінюватися), в той час як const — це щось сталеве, як час пробудження (що не змінюється).

Булеві значення та порівняння у JavaScript

Огляд:
Булеві значення представляють істинність: або true, або false. Оператори порівняння допомагають нам порівнювати значення для оцінки виразів, що повертають булевий результат.

Приклад:

let isAdult = 18;
let isTeenager = 16;
console.log(isAdult > isTeenager); // true
console.log(isAdult < isTeenager); // false


Приклад в реальному часі (Щоденна рутина):
Уявіть, що ви порівнюєте, чи готові ви до дня. Якщо час 7:00, а ваш день починається о 8:00, булеве порівняння поверне false, що означає, що ви ще не готові.

Оператори в JavaScript

Огляд:
Оператори — це символи, які виконують операції над змінними та значеннями, такі як арифметичні або логічні операції.

Приклад:

let a = 10, b = 5;
console.log(a + b); // 15 (Додавання)
console.log(a > b); // true (Порівняння)
console.log(a && b); // true (Логічний AND)


Приклад в реальному часі (Щоденна рутина):
Оператори — це як ваші щоденні інструменти.
текст перекладу

Перетворення типів у JavaScript

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

Приклад:

let num = "5";  
let result = Number(num); // Перетворення рядка на число  
console.log(result + 10); // 15

Приклад в реальному часі (Щоденна рутина):
Уявіть, що ви перетворюєте тривалість вашого улюбленого телевізійного шоу (як рядок, наприклад, “2 години”) на справжнє число, щоб підрахувати загальний час для кількох епізодів.

Умовні оператори в JavaScript

Огляд:
Умовні оператори дозволяють виконувати різні дії в залежності від того, чи є умова істинною або хибною, використовуючи if, else if та else.

Приклад:

let hour = 9;  
if (hour < 12) {  
 console.log("Good Morning!");  
} else {  
 console.log("Good Afternoon!");  
}

Приклад в реальному часі (Щоденна рутина):
Вранці ви вирішуєте, чи пити чай або каву, залежно від того, чи холодно на вулиці. Якщо холодно, ви обираєте чай, в іншому випадку — каву.

Оператор Switch у JavaScript

Огляд:
Оператор switch є альтернативою кільком умовам if-else. Він оцінює змінну та порівнює її з кількома можливими значеннями.

Приклад:

let day = "Monday";  
switch (day) {  
 case "Monday":  
 console.log("Start of the week!");  
 break;  
 case "Friday":  
 console.log("Weekend is near!");  
 break;  
 default:  
 console.log("Mid-week hustle!");  
}

Приклад в реальному часі (Щоденна рутина):
Ви можете використовувати оператор switch для вибору одягу залежно від дня тижня. Якщо п’ятниця, ви, можливо, виберете щось більш casual!

Цикл For у JavaScript

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

Приклад:

for (let i = 0; i < 5; i++) {  
 console.log(i); // Виводить: 0, 1, 2, 3, 4  
}

Приклад в реальному часі (Щоденна рутина):
Ви можете використовувати цикл for для проходу по ваших завданнях на день і позначати їх як завершені одне за одним.

Цикл While у JavaScript

Огляд:
Цикл while повторює код, поки умова є істинною.

Приклад:

let count = 0;  
while (count < 3) {  
 console.log(count); // Виводить: 0, 1, 2  
 count++;  
}

Приклад в реальному часі (Щоденна рутина):
Ви можете продовжувати працювати над завданням (наприклад, написання статті), поки у вас є час перед наступним зобов'язанням.

Цикл Do-While у JavaScript

Огляд:
Цикл do-while гарантує, що код буде виконано хоча б один раз, навіть якщо умова є хибною.

Приклад:

let count = 0;  
do {  
 console.log(count); // Виводить: 0, 1, 2  
 count++;  
} while (count < 3);

Приклад в реальному часі (Щоденна рутина):
Після завершення завдання, ви можете перевірити, чи є у вас час на ще одне завдання, і ви обов'язково перевірите це вперше, незалежно від того, скільки часу залишилось.

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

Огляд:
Логічні оператори (&&, ||, !) використовуються для комбінування кількох умов або заперечення умови.

Приклад:

let isWeekend = true;  
let hasFreeTime = false;  
console.log(isWeekend && hasFreeTime); // false (обидві умови мають бути істинними)  
console.log(isWeekend || hasFreeTime); // true (будь-яка з умов може бути істинною)

Приклад в реальному часі (Щоденна рутина):
Логічні операції — це як вирішення, чи можна вийти на прогулянку. Для цього вам потрібно, щоб було гарна погода (true) і вільний час (true), щоб піти на прогулянку (true).

Масиви в JavaScript

Огляд:
Масиви використовуються для зберігання кількох значень в одній змінній.
текст перекладу

Масиви в JavaScript

Огляд:
Масиви можуть містити дані будь-якого типу і доступ до елементів здійснюється за індексом.

Приклад:

let fruits = ["Apple", "Banana", "Orange"];  
console.log(fruits[0]); // Виводить: Apple

Приклад в реальному часі (Щоденна рутина):
Масив — це як ваш список покупок. Ви можете додавати елементи (наприклад, фрукти) до списку, а потім перевіряти, що ще потрібно купити або що вже куплено.

Техніки роботи з масивами в JavaScript

Масиви — це одна з найбільш використовуваних структур даних у JavaScript. Нижче наведено кілька основних технік роботи з масивами.

1. Створення масивів Масиви можна створювати за допомогою літералів або конструктора Array.

let fruits = ["Apple", "Banana", "Orange"];

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

• push(): Додає елементи в кінець.
• unshift(): Додає елементи на початок.
• pop(): Видаляє з кінця.
• shift(): Видаляє з початку.

fruits.push("Grapes"); fruits.pop();

3. Доступ до елементів Доступ до елементів здійснюється через індекс.

console.log(fruits[1]); // "Banana"

4. Ітерація по масивах Використовуйте цикли або методи, такі як forEach(), map() і filter(), для проходу по масивах.

fruits.forEach(fruit => console.log(fruit));

5. Сортування масивів Масиви можна сортувати за допомогою sort().

fruits.sort();

6. Пошук елементів Використовуйте методи, такі як find(), indexOf() або includes(), для пошуку елементів.

console.log(fruits.indexOf("Banana")); // 1

7. Об'єднання елементів Ви можете об'єднати елементи в рядок за допомогою join().

console.log(fruits.join(", ")); // "Apple, Banana, Orange"

8. Сплітинг і вирізання

• splice(): Додає/видаляє елементи за конкретним індексом.
• slice(): Витягує частину масиву без змінення оригіналу.

fruits.splice(1, 1, "Peach");

Об'єкти в JavaScript

Огляд:
Об'єкти зберігають колекції даних у вигляді пар ключ-значення. Вони корисні для організації пов'язаних даних, таких як профілі користувачів або інформація про продукти.

Приклад:

let person = {  
 name: "John",  
 age: 30,  
 greet: function() {  
 console.log("Hello, " + this.name);  
 }  
};  
console.log(person.name); // John  
person.greet(); // Hello, John

Приклад в реальному часі (Щоденна рутина):
Уявіть об'єкт як профіль людини, де ключі — це особисті дані (ім'я, вік, завдання), а значення — це самі деталі (наприклад, John, 30, завдання на день).

Основи функцій у JavaScript

Огляд:
Функції в JavaScript — це блоки коду, які можна багаторазово використовувати для виконання конкретних завдань. Вони дозволяють уникнути повторення і роблять код більш модульним.

Приклад:

function greet(name) {  
 console.log("Hello, " + name);  
}  
greet("Alice"); // Виводить: Hello, Alice

Приклад в реальному часі (Щоденна рутина):
Функція — це як ваша щоденна рутина сніданку. Кожного разу, виконуючи її, ви слідуєте одними й тими ж кроками (наприклад, кип'ятите воду, готуєте чай), але з різними вхідними даними (наприклад, вибираєте різні види чаю).

Типи функцій у JavaScript

Огляд:
JavaScript підтримує різні типи функцій:

• Звичайні функції
• Анонімні функції
• Стрілкові функції

Приклад:

• Звичайна функція:

function add(a, b) {  
 return a + b;  
}

• Анонімна функція:

let multiply = function(a, b) {  
 return a * b;  
};

• Стрілкова функція:

let divide = (a, b) => a / b;

Приклад в реальному часі (Щоденна рутина):
Функції — це як рецепти приготування їжі. Звичайна функція — це детальний рецепт, якому ви слідуєте крок за кроком.
текст перекладу

Анонімні функції в JavaScript

Огляд:
Анонімна функція — це як швидкий рецепт, який ви пам'ятаєте, а стрілкова функція — це як скорочений рецепт, який відразу йде до суті.

Функції зворотного виклику (Callback Functions) в JavaScript

Огляд:
Функція зворотного виклику — це функція, яку передають іншій функції як аргумент, і яка виконується після завершення певного завдання, зазвичай використовується для асинхронних операцій.

Приклад:

function fetchData(callback) {  
 let data = "Sample Data";  
 callback(data); // Викликаємо функцію зворотного виклику з даними  
}  
fetchData(function(data) {  
 console.log("Data received: " + data); // Виводить: Data received: Sample Data  
});

Приклад в реальному часі (Щоденна рутина):
Уявіть, що ви попросили друга купити продукти, поки ви працюєте над завданням. Коли ваш друг повертається з покупками (завершення завдання), він телефонує вам, щоб повідомити (функція зворотного виклику).

Область видимості змінних, методи об'єктів, робота з JSON, дати і час, setInterval та setTimeout

Область видимості змінних

• Глобальна область видимості: Змінні, оголошені поза будь-якими функціями, доступні в будь-якому місці програми.
• Локальна область видимості: Змінні, оголошені всередині функції, доступні тільки в цій функції.
• Блокова область видимості: Змінні, оголошені за допомогою let або const всередині блоку (наприклад, всередині {}), доступні тільки в цьому блоці.

Приклад:

let globalVar = "I'm global";   
function testScope() {   
let localVar = "I'm local";   
 if (true) {   
 const blockVar = "I'm block scoped";   
 console.log(blockVar); // Доступна тут   
 }   
 console.log(localVar); // Доступна тут   
 console.log(globalVar); // Доступна тут   
} testScope();

Методи об'єктів Об'єкти в JavaScript можуть мати методи — функції, що зберігаються як властивості об'єкта.

Приклад:

let person = {   
 firstName: "John",   
 lastName: "Doe",   
 fullName: function() {   
 return this.firstName + " " + this.lastName;   
 } };   
 console.log(person.fullName()); // "John Doe"

Робота з JSON JavaScript Object Notation (JSON) використовується для обміну даними. Ви можете перетворювати об'єкти JavaScript в JSON і назад за допомогою JSON.stringify() та JSON.parse().

• JSON.stringify(): Перетворює об'єкт у рядок JSON.
• JSON.parse(): Перетворює рядок JSON назад в об'єкт.

Приклад:

let user = { name: "Alice", age: 25 };   
let jsonString = JSON.stringify(user); // Перетворення в рядок JSON   
console.log(jsonString); // '{"name":"Alice","age":25}' 
let parsedUser = JSON.parse(jsonString); // Перетворення назад в об'єкт 
console.log(parsedUser.name); // "Alice"

Дати та час JavaScript надає об'єкт Date для роботи з датами та часом. Ви можете створити новий об'єкт Date, який представляє поточну дату та час, або вказати конкретну дату.

Приклад:

let currentDate = new Date(); // Поточна дата і час   
console.log(currentDate); // Виводить: поточну дату та час   
let specificDate = new Date(2023, 11, 25); // Конкретна дата: 25 грудня 2023 року 
console.log(specificDate); // Виводить: Mon Dec 25 2023 ...

• Отримання конкретних частин: Ви можете витягувати частини дати, такі як рік, місяць чи день.

console.log(currentDate.getFullYear()); // Рік 
console.log(currentDate.getMonth()); // Місяць (0-індексація)

setInterval та setTimeout

• setInterval(): Виконує функцію повторно через вказані інтервали часу (в мілісекундах).
• setTimeout(): Виконує функцію один раз після вказаної затримки (в мілісекундах).

Приклад:

// Використання setTimeout   
setTimeout(() => {   
 console.log("Це спрацьовує через 2 секунди"); }, 2000); // Використання setInterval 
let count = 0;   
 let intervalId =   
 setInterval(() => {   
 console.log("Це спрацьовує кожні 2 секунди");   
 count++;   
 if (count >= 3) {   
 clearInterval(intervalId); // Зупиняє інтервал після 3 виконань   
 } }, 2000);

Основні теми JavaScript з прикладами в реальному часі

JavaScript — це незамінна мова для веб-розробки, яка забезпечує динамічні функції та можливості сучасних вебсайтів і додатків.
текст перекладу

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

1. Обробка подій (Event Handling)

Обробка подій (Event Handling) в JavaScript дозволяє взаємодіяти з користувачами через кліки миші, введення з клавіатури тощо. Це основа для інтерфейсів користувача.

Приклад в реальному часі: В додатку для списку справ можна відмічати завдання як виконані при кліку.

document.getElementById("task").addEventListener("click", function() {  
 this.classList.toggle("completed");  
});

У цьому прикладі, коли користувач натискає на завдання, воно перемикається між виконаним і невиконаним, додаючи або видаляючи клас "completed". Така взаємодія робить веб-сайт динамічним.

2. Асинхронний JavaScript (Promises & Async/Await)

Асинхронний JavaScript є важливим для обробки завдань, таких як отримання даних з API без блокування решти програми.

Приклад в реальному часі: На сайті електронної комерції можна отримувати деталі продукту через API.

async function getProductDetails(productId) {  
 let response = await fetch(`https://api.example.com/products/${productId}`);  
 let product = await response.json();  
 console.log(product);  
}

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

3. Замикання (Closures)

Замикання — це функції, які мають доступ до змінних зовнішньої функції, навіть після того, як зовнішня функція завершила виконання. Замикання корисні для створення приватних змінних.

Приклад в реальному часі: У банківській програмі замикання можна використати для зберігання балансу рахунку приватно.

function createAccount(initialBalance) {  
 let balance = initialBalance;  
 return {  
 deposit: function(amount) {  
 balance += amount;  
 console.log(`Deposited: ${amount}, New Balance: ${balance}`);  
 },  
 withdraw: function(amount) {  
 if (amount <= balance) {  
 balance -= amount;  
 console.log(`Withdrew: ${amount}, New Balance: ${balance}`);  
 } else {  
 console.log("Insufficient funds");  
 }  
 },  
 getBalance: function() {  
 return balance;  
 }  
 };  
}  
const myAccount = createAccount(1000);  
myAccount.deposit(500); // Deposited: 500, New Balance: 1500

Цей приклад демонструє, як замикання можуть інкапсулювати баланс і надавати функції для безпечної взаємодії з ним.

4. Деструктуризація (Destructuring Assignment)

Деструктуризація робить процес витягування значень з масивів або об'єктів більш чистим і зручним для читання.

Приклад в реальному часі: У додатку для погоди можна отримувати дані у вигляді об'єкта і витягувати важливу інформацію, таку як температура і вологість.

const weatherData = { city: "New York", temperature: 75, humidity: 80 };  
const { temperature, humidity } = weatherData;  
console.log(`Temperature: ${temperature}°F, Humidity: ${humidity}%`);

Деструктуризація спрощує процес доступу до властивостей об'єкта та елементів масиву.

5. Модулі в JavaScript (Modules)

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

Приклад в реальному часі: У великому веб-додатку можна розділяти утилітні функції на окремі файли для кращої структури.

// utils.js  
export const formatCurrency = (amount) => `$${amount.toFixed(2)}`;  
// app.js  
import { formatCurrency } from './utils.js';  
console.log(formatCurrency(123.456)); // $123.46

Використання модулів забезпечує зручність підтримки і розширення кожної частини додатку.

6. Обробка помилок (Error Handling)

Обробка помилок допомагає уникнути краху програми та надає корисний зворотний зв'язок користувачам.
текст перекладу
try...catch блоки використовуються для управління помилками.

Приклад в реальному часі: В додатку для відео-стримінгу можна перехопити помилки, коли користувач намагається відтворити неіснуюче відео.

try {  
 let video = getVideoById("nonexistent-id");  
 video.play();  
} catch (error) {  
 console.log("Error: Video not found");  
}

Це гарантує безперебійний досвід користувача навіть тоді, коли виникають помилки.

7. Оператори Spread і Rest

Оператор spread (...) допомагає копіювати і об'єднувати масиви або об'єкти, а оператор rest збирає значення в масив.

Приклад в реальному часі: При оновленні профілю користувача на соціальній мережі можна оновити об'єкт профілю, не втрачаючи при цьому наявних даних.

let user = { name: "Alice", age: 25 };  
let updatedUser = { ...user, age: 26 };  
console.log(updatedUser); // { name: "Alice", age: 26 }

Оператор spread спрощує об'єднання або копіювання об'єктів без зміни оригіналу.

8. Функції вищого порядку (Higher-Order Functions)

Функція вищого порядку — це функція, яка приймає іншу функцію як аргумент або повертає функцію. Вони часто використовуються в методах маніпулювання масивами, таких як map, filter та reduce.

Приклад в реальному часі: В системі модерації контенту можна використовувати функцію вищого порядку для фільтрації неприязних коментарів.

const comments = ["Nice post!", "Hate this!", "Love it!"];  
const filteredComments = comments.filter(comment => !comment.includes("Hate"));  
console.log(filteredComments); // ["Nice post!", "Love it!"]

Функції вищого порядку спрощують операції з масивами або іншими колекціями, роблячи код більш лаконічним і виразним.

9. Map і Set

Map зберігає пари ключ-значення, а Set зберігає унікальні значення. Обидва є частиною сучасних типів колекцій JavaScript.

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

let cart = new Set();  
cart.add("Apple");  
cart.add("Banana");  
cart.add("Apple"); // Дубль, не буде додано  
console.log(cart); // Set { "Apple", "Banana" }

Використання Set гарантує, що в кошику не буде дубльованих товарів.

10. Прототипи та успадкування (Prototype and Inheritance)

JavaScript використовує прототипи для успадкування, що дозволяє об'єктам успадковувати властивості та методи від інших об'єктів.

Приклад в реальному часі: В грі можна мати прототип Character, а потім створювати конкретні типи персонажів, такі як Warrior або Mage, які успадковують від нього.

function Character(name) {  
 this.name = name;  
}  
Character.prototype.sayHello = function() {  
 console.log(`Hello, I'm ${this.name}`);  
};  
function Warrior(name) {  
 Character.call(this, name);  
}  
Warrior.prototype = Object.create(Character.prototype);  
const warrior = new Warrior("Thor");  
warrior.sayHello(); // "Hello, I'm Thor"

Успадкування на основі прототипів дозволяє об'єктам ділитися функціональністю та структурою.

Перекладено з: Mastering JavaScript: A Simple Guide with Clear Examples