Category: JavaScript

Уроки JavaScript – Все, що потрібно знати про змінні

Однією з найголовніших та фундаментальних концепцій будь-якої мови програмування є можливість зберігання значень, які пізніше можна багаторазово використовувати. Такі значення в програмуванні називаються змінними. В сьогоднішньому уроці ми розглянемо змінні в JavaScript. В цій мові програмування для оголошення змінних використовуються три зарезервованих ключових слова: var, let або const.   Ви можете вільно використовувати кожен з цих видів змінних, оскільки всі вони «нетипізовані», — тобто, це означає, що змінна може містити значення будь-якого типу даних. Змінні...

Детальний опис техніки ледачого завантаження зображень (Lazy Load)

Ліниве (або відкладене) завантаження картинок – це популярний метод асинхронного звернення до адреси зображення, по мірі необхідності його завантаження, а не одразу після того, як HTML сторінки був проаналізований браузером. Ви, швидше за все, вже бачили цю реалізацію в дії, оскільки цей метод використовується на багатьох популярних сайтах. Сьогодні неможливо уявити собі Інтернет без картинок і відео. Ми всі звикли до цього. Плюс, якщо на сторінці сайту немає якихось графічних елементів, нам важче буде вловити...

Уроки JavaScript – приклади використання випадковості

В JavaScript досить часто потрібно використовувати випадковість або випадкове поводження. Найпростішим прикладом буде отримання випадкового числа для проведення жеребкування. Або, наприклад, уявити можливий результат кидка монети. Але існує багато різних видів випадковості, і для різних додатків потрібно підбирати свій вид випадкового результату.     Найпростіша випадковість Найпростішою формою випадковості, яка вбудована в JavaScript, є функція Math.random(). Щоб побачити її в дії, наберіть в консолі браузера (виклик консолі Ctrl+Shift+I) функцію: Math.random(); //0.2735944957535754 – приклад результату  ...

Що таке ключове слово this в JavaScript

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

Знак долара ($) і знак підкреслення (_) в JavaScript

Знак долара ($) і символ підкреслення (_) є ідентифікаторами в JavaScript, що означає, що вони ідентифікують об’єкт так само, як і його ім’я. Ідентифіковані ними об’єкти включають такі речі, як змінні, функції, властивості, події та об’єкти. З цієї причини ці символи не обробляються так само, як інші спеціальні символи. Замість цього JavaScript обробляє $ і _ так, як якщо б вони були літерами алфавіту. Ідентифікатор JavaScript (або просто ім’я для будь-якого об’єкта) повинен починатися з...

Як відключити на сторінці клік правою кнопкою миші з допомогою JavaScript

Це робиться дуже легко і просто, хоча і не є панацеєю. Новачки часто вважають, що блокуючи виклик відвідувачами контекстного меню за допомогою кліка правою кнопкою миші, вони можуть запобігти крадіжці вмісту їх веб-сторінки. Але, це не зовсім так. Відключення кліка правої кнопки миші легко обходиться більш досвідченими користувачами, а доступ до більшої частини коду сторінки взагалі не вимагає кліка правою кнопкою миші. Доступ до контекстного меню також можна отримати і за допомогою клавіатури. На клавіатурі...

JavaScript функції DOM, про які ви не знали

Дуже важливо в процесі програмування використовувати функції DOM і Web API, які працюють у всіх сучасних браузерах і без будь-яких залежностей. У сьогоднішній статті ми розглянемо маловідомі функції DOM, у яких сильна підтримка в браузерах. Ці методи і властивості будуть добре працювати з будь-яким набором інструментів, який ви будете використовувати в своїх проектах.     Ви напевно використовували addEventListener(), щоб прив’язувати події до елементів в документі. Зазвичай виклик addEventListener() виглядає приблизно так: <script> element.addEventListener('click', doSomething,...

Уроки JavaScript – ознайомлення з класами (частина 2)

Класи в JavaScript дозволяють писати більш чистий і читабельний код. Сьогоднішня стаття продовжує тему класів в JavaScript, і в ній мова піде про такі поняття, як поля класів, методи доступу гетери і сетери. Це дозволить вам поліпшити свої навички програмування і стати більш просунутим JavaScript розробником. Попередня стаття циклу: Ознайомлення з класами в JavaScript (частина 1)     JavaScript класи і поля класів Ви пам’ятаєте конструктор класу з попереднього уроку? Доброю новиною є те, що...

Уроки JavaScript – ознайомлення з класами (частина 1)

Класи в JavaScript є однією з найпопулярніших функцій, і сьогодні ми зробимо їх короткий огляд. Ми розглянемо такі частини і концепції, як конструктор, властивості і методи класу, успадкування, суперклас і підкласи, а також способи перевизначення властивостей і методів конструктора і класу.     Створення об’єктів по-старому (за допомогою конструкторів функцій) Як розробники створювали об’єкти до введення класів в JavaScript? Вони використовували конструктори функцій. Потім, коли потрібно було додати деякі властивості або методи до об’єкта, вони...

Короткий опис об’єктно-орієнтованого програмування (ООП) в JavaScript

Об’єктно-орієнтоване програмування – це популярний стиль програмування, який був впроваджений в JavaScript на самих ранніх етапах. Зараз багато вбудованих функцій та методів JavaScript написані в об’єктно-орієнтованому стилі. Об’єктно-орієнтоване програмування в JavaScript сильно відрізняється від об’єктно-орієнтованого програмування в інших мовах. І в сьогоднішній статті ми коротко розглянемо основи об’єктно-орієнтованого програмування (ООП) в JavaScript.     Що таке об’єктно-орієнтоване програмування в JavaScript Об’єктно-орієнтоване програмування – це дві складові: створення окремих об’єктів із загального об’єкта та успадкування. У...

Уроки JavaScript – не працюють події jQuery після AJAX завантаження

Якщо ви використовуєте AJAX на своєму сайті, майте на увазі, що такі події, як клік (click), надсилання (submit), наведення (hover), можуть не працювати, якщо ви не прикріпите їх правильно. У сьогоднішній статті ми розглянемо практичне рішення проблеми, коли не спрацьовують події в jQuery після динамічної зміни сторінки (або AJAX).     Опис задачі Припустимо, у нас є блоки з заголовком і прихованим контентом в тегові <p>. По кліку на заголовку, прихований контент показується/ховається за допомогою...

Уроки JavaScript – Шпаргалка по регулярним виразам

У сьогоднішній статті ми розглянемо регулярні вирази в JavaScript, а також побачимо практичні приклади використання регулярних виразів в JavaScript скриптах. Регулярні вирази бувають досить корисними, і їх можна використовувати практично у всіх своїх скриптах. Але, для цього потрібна практика, тому нижче представлені основні приклади регулярних виразів, які допоможуть вам в цьому.     Шпаргалка регулярних виразів в JavaScript   Скорочений запис пошуку символів let regex; regex = /\d/; // відповідає будь-якій цифрі regex = /\D/;...

Уроки JavaScript – строгий режим (strict-mode)

Коли розробник пише скрипти в строгому режимі, це полегшує йому створення «безпечного» JavaScript. За замовчуванням JavaScript дозволяє програмісту писати код трохи недбало, наприклад, не оголошувати змінні за допомогою var при першій їх появі. Хоча це може здатися зручним для деяких розробників, такий підхід може бути причиною багатьох помилок, коли ім’я змінної написано з помилкою або випадково зазначено поза її області дії. Програмісти люблять змушувати комп’ютер робити за них нудні речі і автоматично перевіряти їх роботу...

Уроки JavaScript – як отримати поточну дату і час

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

Уроки JavaScript – ознайомлення з функцією console.log()

Коли ви пишете додаток на JavaScript, дуже корисно використовувати налагоджувач (або дебаґер, від англ. debugger), тобто, програму, яка призначена для пошуку помилок в інших програмах. Всі браузери поставляються з подібною програмою, яка виконує функції налагоджувача, — мова йде про Консоль (Console). Тут ви знайдете всі помилки, які виникають при взаємодії браузера з сайтом. Наприклад, тут ви можете побачити недоступні ресурси сайту (які повертають 404 помилку), помилки в JavaScript коді та масу інших корисних даних. Крім...