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

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

Крім пошуку помилок, ви можете використовувати Консоль також в якості калькулятора (уявіть собі!) або невеликого локального сервера. Консоль в браузері – це потужний спосіб перевірити, що робить ваша сторінка або додаток. Давайте розглянемо додаткові можливості, які доступні в цьому інструменті, а також приділимо основну увагу функції console.log().

Відкрийте Консоль в браузері і подивимося на основні моменти по роботі з нею.

Виклик інструментів розробника (і консолі) в різних браузерах здійснюється так:

  • Chrome, Firefox, Internet Explorer (Microsoft Edge) і Safari: натисніть в браузері F12, а потім відкрийте вкладку Console (в деяких браузерах можна також натиснути Ctrl+Shift+J)
  • Opera: натисніть в браузері Ctrl+Shift+C, а потім відкрийте вкладку Console

1) Використання Консолі в браузері в якості калькулятора

Після того як ви відкрили Консоль, спробуйте використати цей інструмент в якості калькулятора. Напишіть такий вираз:

25*5

Трохи нижче ви одразу побачите результат даної арифметичної операції:

> 125

Якщо вам сподобалося, можете погратися далі, з використанням інших арифметичних операцій :).

2) Використання Консолі в браузері в якості локального сервера

У Консолі ви можете писати JavaScript код і одразу бачити результат його виконання. Ось простий приклад, напишіть в Консолі наступний код та натисніть Enter:

var boxWidth = 50;
var boxHeight = 250;
var areaOfBox = boxWidth * boxHeight;

Тепер, якщо ви, наприклад, напишете змінну areaOfBox в Консолі, ви одразу побачите результат виконання даного коду:

Спробуйте самостійно писати тут JavaScript код, щоб побачити, як працює Консоль в якості локального сервера.

3) Використання Консолі в браузері в якості налагоджувача JavaScript

Один із самих основних інструментів налагодження в JavaScript – це функція console.log(). JavaScript функція console.log() використовується для виведення будь-яких змінних, визначених раніше, або просто для виведення будь-якого повідомлення, яке необхідно відобразити користувачеві.

Об’єкт console в JavaScript дає вам доступ до Консолі браузера. Це дозволяє вам виводити рядки, масиви і об’єкти, які допомагають налагоджувати код. Ця функція є частиною об’єкта window і надається об’єктною моделлю браузера (BOM).

Синтаксис:

console.log(об'єкт)
або
window.console.log(об'єкт)

Найпростіший приклад – виведення повідомлення (рядка):

console.log('Привіт, світ!');

Приклад роботи з масивом в Консолі:

var firstArray = ["Apple", "Banana", "Kiwi", "Mango", "Orange" ];
console.log(firstArray);

Приклад роботи з об’єктом в Консолі:

var firstObject = { firstname : "John", lastname : "Doe" };
console.log(firstObject);

Приклад роботи з функцією в Консолі:

Напишіть невеликий JavaScript-код і збережіть, наприклад, у файлі з розширенням .html. Відкрийте цей файл у браузері, і ви побачите результат функції в Консолі:

<script>
 function testFunction() {
  return (46800864 / 120); // операція ділення
 }
 console.log(testFunction());
</script>

Приклад відстеження події click в Консолі:

Збережіть даний код у файлі з розширенням .html і відкрийте цей файл в браузері:

<button type="button" id="test-button" class="button"><span>Кнопка</span></button>
<script>
 document.getElementById('test-button').onclick = function(e){
  console.log('Кнопка була настинута');
 }
</script>

Тепер, якщо ви натиснете кнопку на сторінці, ви побачите запис логу в Консолі браузера.

Для очищення Консолі натисніть клавіші Ctrl+L.

Метод console.log є найбільш часто використовуваним елементом об’єкта console. Крім нього існують також інші елементи даного об’єкта:

console.assert()
console.dir()
console.group()
console.table()
console.time()
console.trace()
console.warn()

Ось і все на сьогодні! Сподіваємося, що даної вступної інформації вам було досить для розуміння роботи Консолі в браузері, а також функції console.log(). Використовуйте ці інструменти при роботі з JavaScript, і процес кодування і налагодження коду стане для вас набагато простішим.

Tags: JavaScript

Recent Posts

Правильний вибір якісних гральних карт

Відомо, що перші гральні карти були винайдені династією Тан в Китаї ще в 9 столітті.… Read More

15/11/2020

Як знайти нову роботу – кращі тактики

Давно минули ті часи, коли люди отримували роботу одразу ж після закінчення навчання, і залишалися… Read More

13/11/2020

Ліцензування Zoom в Україні – тарифи і ціни

Самоізоляція 2020 року поставила людей в досить суворі умови – незважаючи на вимушені карантинні заходи,… Read More

10/11/2020

Десятка найбільш хокейних міст України

Чи є в Україні хокей? Багато шанувальників цього виду спорту асоціюють гру з шайбою на… Read More

09/11/2020

Переваги б/в ноутбуків та критерії вибору техніки

Сучасний ринок комп'ютерної техніки постійно оновлюється, щорічно пропонуючи користувачам нові і більш потужні моделі ПК… Read More

03/11/2020

Найкращі водоспади світу (частина 1)

Водоспад – це одне з найбільш хвилюючих і найкрасивіших творінь матінки-природи у світі. По всьому… Read More

31/10/2020