jQuery швидко стає обов'язковою навичкою для фронтенд-розробників. Метою цієї книги є огляд JavaScript-бібліотеки jQuery. Після завершення читання ви повинні вміти вирішувати основні завдання за допомогою jQuery та мати міцну основу для продовження навчання. Ця книга замислювалася як матеріал, який використовується в навчальному класі, але ви можете знайти його корисним і для самостійного вивчення. Це практичне керівництво. Ми витратимо трохи часу на опис понять, а потім у вас буде можливість працювати з вправою, пов'язаною з цим поняттям. Деякі з вправ можуть здатися примітивними, інші, навпаки, лякають. У будь-якому випадку тут немає оцінок, ціль проста — щоб ви комфортно пройшли свій шлях крізь проблеми, які зазвичай вирішуються за допомогою jQuery. Приклад вирішення всіх вправ включений до зразка коду.
Отримання коду
Код, який ми будемо використовувати в цій книзі, розташований у сховищі GitHub. Ви можете завантажити файл .zip або .tar, розпакувати його, щоб використовувати на своєму сервері. Якщо ви git-маніяк, то завжди можете клонувати або форкнути сховище.
Програми
Для виконання більшості уроків вам знадобляться наступні інструменти:
- Браузер Firefox
- Розширення Firebug для Firefox
- Простий текстовий редактор
- Для Ajax: локальний сервер (такий як MAMP або WAMP) або клієнт FTP або SSH для доступу до віддаленого сервера .
Додавання JavaScript на сторінку
JavaScript може бути доданий безпосередньо до документа або як зовнішній файл через тег <script>. Порядок додавання JavaScript має важливе значення: залежності повинні бути включені до скрипта, який з ними пов'язаний.
Заради продуктивності, JavaScript повинен бути доданий якомога ближче до кінця вашого HTML, наскільки це можливо. Декілька файлів JavaScript повинні бути об'єднані на робочому сайті.
Приклад 1.1. Вбудований JavaScript
<code data-language="javascript"><script> console.log('привіт');
</script> Приклад 1.2. Зовнішній JavaScript
<code data-language="javascript"><script src='/js/jquery.js'></script>
Налагодження JavaScript
Інструмент налагодження має важливе значення у JavaScript-розробці. Для Firefox найпопулярнішим відладником є розширення Firebug; Safari та Chrome надають вбудовані консолі.
Кожна консоль пропонує:
- одно-та багаторядкові редактори для експериментів з JavaScript;
- інспектор для перегляду вихідного, що генерується. коду сторінки;
- Вкладки Network та Resources для вивчення мережевих запитів.
Коли ви пишете код на JavaScript, то можете використовувати такі методи для надсилання повідомлень у консоль: p>
- console.log() для спільних повідомлень;
- console.dir() для об'єктів браузера;
- console.warn() для попереджень;
- console .error() для помилок.
Також доступні інші методи консолі, хоча вони можуть відрізнятися в різних браузерах. Крім того, консолі надають можливість встановлення контрольних точок та стеження за кодом з метою налагодження.
Вправи
Більшість розділів у цій книзі містить одну або кілька вправ. З деякими вправами ви зможете працювати безпосередньо в Firebug, для інших ви повинні будете включити скрипти після jQuery, як зазначено в окремих вправах. інформація представлена у книзі. Бібліотека jQuery велика і знаходження відповідей у документації є важливою частиною процесу навчання.
Ось кілька порад для вирішення таких проблем:
- Для початку переконайтеся, що ви повністю розумієте проблему, яку вас просять вирішити.
- Далі з'ясуйте, які елементи вам потрібні для вирішення проблеми та визначте, як ви отримаєте ці елементи. Використовуйте Firebug для перевірки, що елементи отримані.
- Нарешті з'ясуйте, що вам потрібно зробити з цими елементами для вирішення проблеми. Це може бути корисним для додавання коментарів, які пояснюють, що ви збираєтеся робити перед написанням коду.
Не бійтеся помилок! Не намагайтеся зробити код ідеальним з першого разу! Помилки та експерименти з рішеннями є частиною вивчення бібліотеки і ви станете найкращим розробником. Приклади рішень цих вправ знаходяться в папці /solutions.
Довідковий матеріал
Існує багато статей та блогів, в яких описано певний погляд на jQuery. Деякі їх видатні, деякі помилкові. При читанні статті про jQuery переконайтеся, що в ній йдеться про ту саму версію, яку ви використовуєте. Не піддавайтеся спокусі просто скопіювати та вставити код — витратите час на його вивчення.
Ось деякі відмінні ресурси для ознайомлення в процесі навчання jQuery. Найважливішим є сам сайт jQuery: він містить у вигляді коду повну документацію бібліотеки. Це не чорна скринька — ваше розуміння бібліотеки зростатиме в геометричній прогресії, якщо ви витратите час, відвідуючи його знову і знову. І я настійно рекомендую додати сайт до закладок браузера і постійно до нього звертатися.