Tag: JavaScript

Маніпулювання ступенем важливості завантаження ресурсів в браузері

Для браузера не всі ресурси володіють однаковим ступенем важливості та пріоритету. Кожен браузер має свою своєрідну евристику, згідно з якою він визначає, які ресурси завантажувати в першу чергу, а які – пізніше. Наприклад, CSS стилі мають більш важливий пріоритет, ніж скрипти і картинки. Іноді браузер може неправильно розставляти пріоритети завантаження і довантажувати з сервера менш важливі ресурси в найпершу чергу. Наприклад, інструмент для підвищення якості веб-сторінок Lighthouse від компанії Google рекомендує боротися з цим так:...

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

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

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

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

Як зробити красиву анімовану кнопку Пошук з CSS3 та jQuery

В сьогоднішньому уроці ми на практиці розглянемо те, як можна створити просту, але дуже красиву кнопку для пошуку, всього лише з допомогою CSS3 і jQuery.   Готова кнопка буде виглядати приблизно так:     Для створення такої гарної анімованої кнопки для вікна пошуку ми будемо використовувати наступні інструменти: HTML – для структури документу CSS3 – для стильового оформлення та анімації руху jQuery – для реагування на натискання кнопок     Деякий час тому назад розробники...

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

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

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

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

9 онлайн платформ, на яких можна швидко поділитися кодом

Програмісти, в основному, використовують IDE (інтегроване середовище розробки) для своєї роботи і написання коду. Це досить потужні інструменти, в яких є інтуїтивно зрозумілий та зручний інтерфейс, включені передвстановлені бібліотеки, є підтримка безлічі мов, генератори коду, інструменти для спільної роботи та інші. Але, іноді, є потреба в тому, щоб можна було швидко поділитися з іншими сніпетами коду, який робочий і доступний онлайн. Наприклад, вам потрібно розмістити на своєму сайті шматок робочого коду і показати демо його...

Знак долара ($) і знак підкреслення (_) в 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/;...