Tag: 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/;...

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

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

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

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

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

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

Приклади маніпулювання DOM за допомогою jQuery

У попередніх статтях категорії Уроки JavaScript ми розглянули основні принципи DOM, дізналися, як можна взаємодіяти і маніпулювати елементами DOM за допомогою простого JavaScript. У цій статті ми трохи розширимо цю тему і розглянемо приклади маніпулювання елементами DOM за допомогою потужної бібліотеки JavaScript – jQuery. Бібліотека jQuery має потужні інструменти для знаходження елементів і роботи з ними для досягнення потрібної мети. За допомогою методів jQuery завдання обходу і маніпуляції елементами DOM вирішуються досить простими та інтуїтивно...

Уроки JavaScript – виконання коду після повного завантаження DOM

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

Уроки JavaScript – Діалогові вікна alert, confirm і prompt

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