Вступна та минула стаття допомогли нам освоїти основи
роботи з jQuery - ми розглянули типи даних, створення змінних, аспекти роботи
з селекторами, також розібрали основні події: Click, Hover і
ToggleClass.
Сьогодні мова піде про:
- Нагалодження (дебаг) JavaScript;
- Попередження -
alert(); - Використання браузерної консолі;
- Як дістатися наскільки ми змістилися відносно початку сторінки;
- Як отримати значення ширини вікна;
Сьогодні кожен сучасний браузер має функцію "Проінспектувати елемент", ця функція надає нам доступ до вікна інструментів розробника.
alert()
Певний час, alert() була єдиним інструментом для дебагу, але це був доволі
дратівливий спосіб - іноді доводилось натискати на дуже велику кількість
попереджень.
alert('Ваше повідомлення');
Це виклече спливаюче вікно JavaScript, коли браузер дійде до цього рядка коду.
В демо з минулого уроку ми мали alert()
всередині події Click:
$clickMeElement.click(function() {
alert("Codeguida One Love.");
});
console.log()
console.log() \- це сучасний спосіб налагодження JavaScript-коду, і, крім
того, більш елегантний і менш дратівливий.
console.log('Ваше повідомлення');
Це дозволить надрукувати Ваше повідомлення в консолі браузера. Ви також можете роздрукувати об'єкти, масиви та інші відомості, але про це пізніше.
Uncaught TypeError
Коли все працює, консоль повинна бути вільна від будь-яких повідомлень про помилку. Ви можете мати так багато повідомлень, скільки Вам подобається, але одна помилка зупинить всю роботу. На щастя, консоль показує Вам, на який файл і рядок посилається помилка. Це дуже зручно для налагодження.
Коли Ви отримуєте помилку, як на скріншоті вище, Ви можете просто натиснути на
ім'я файлу праворуч. В цьому випадку вона відноситься до _main.js, лінія
27.
Натиснувши на ім'я файлу, Ви перейдете прямо місця проблеми. Якщо Ви уважно
проінспектуєте код, то побачите, що ми невірно ввели console.log і це
викликає помилку.
Одна помилка зупиняє все
Перевірка на помилки в консолі - це перше, що ви повинні зробити, якщо ваш плагін або анімація не працює. Одна помилка зупиняє браузер від виконання решти файлу javascript. Так що наступного разу перш ніж сказати "це не працює", не лінуйтеся. Просто зайдіть в консоль і перевірте код на помилки.
Console.log і вікно прокручування
Іноді ви хочете знати наскільки користувач прокрутив сторінку.
ar $window = $(window);
$(window).on('scroll', function() {
$topOffset = $(this).scrollTop();
console.log($topOffset);
});
Цей код буде відображати поточне зміщення scrollTop(), кожен раз, коли
користувач прокручує сторінку вниз або вверх.
$(this) відноситься до вікна браузера.
Console.log та зміна розміру вікна
Інша подія, яка може використовувати консоль \- це .resize()
$(window).on('resize', function() {
$windowWidth = $(this).width();
console.log($windowWidth);
});
Цей код буде виводити значення ширини вікна, кожен раз, коли користувач буде змінювати розміри вікна браузера.
Очищення консолі
Регулярно очищуйте консоль, щоб не перетворити її в смітник.
Як ми можемо використовувати пройдений сьогодні матеріал:
Візуалізація значень на сторінку відбувається з допомогою .text()
Відкрийте демо на CodePen та
змініть розмір вікна в режимі "Full Page", щоб побачити зміну значення.
Відкрийте веб-консоль розробника і подивіться, як відображаються значення
resize і scroll.
Ще немає коментарів