Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 15.03.2024)
428420
солдат
347
самолетов
325
вертолетов
6758
танков
12949
ББМ
10580
артиллерия
717
ПВО
1017
РСЗО
13993
машин
26
корабли и катера
Уроки JavaScript – ознакомление с функцией console.log()
Опубликовано

Уроки 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

 

 

  • Использование Консоли в браузере в качестве калькулятора

После того как вы открыли Консоль, попробуйте использовать этот инструмент в качестве калькулятора. Напишите следующее выражение:

25*5

 

Чуть ниже вы сразу увидите результат данной арифметической операции:

> 125

 

Консоль в браузере (console.log())

 

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

 

 

  • Использование Консоли в браузере в качестве локального сервера

В Консоли вы можете писать JavaScript код и сразу видеть результат его выполнения. Вот простой пример, напишите в Консоли следующий код и нажмите Enter:

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

 

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

Консоль в браузере (console.log())

 

 

Попробуйте самостоятельно писать здесь JavaScript код, чтобы увидеть, как работает Консоль в качестве локального сервера.

 

 

  • Использование Консоли в браузере в качестве отладчика JavaScript

Один из самых основных инструментов отладки в JavaScript – это функция console.log(). JavaScript функция console.log() используется для вывода любых переменных, определенных ранее, или просто для вывода любого сообщения, которое необходимо отобразить пользователю.

Объект console в JavaScript дает вам доступ к Консоли браузера. Это позволяет вам выводить строки, массивы и объекты, которые помогают отлаживать код. Данная функция является частью объекта window и предоставляется объектной моделью браузера (BOM).

 

Синтаксис:

console.log(объект)
или
window.console.log(объект)

 

 

Самый простой пример – вывод сообщения (строки):

console.log('Привет, мир!');

 

Консоль в браузере (console.log())

 

 

Пример работы с массивом в Консоли:

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

 

Консоль в браузере (console.log())

 

 

Пример работы с объектом в Консоли:

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

 

Консоль в браузере (console.log())

 

 

Пример работы с функцией в Консоли:

Напишите небольшой JavaScript-код и сохраните, например, в файле с расширением .html. Откройте этот файл в браузере, и вы увидите результат функции в Консоли:

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

 

Консоль в браузере (console.log())

 

 

Пример отслеживания события click в Консоли:

Сохраните данный код в файле с расширением .html и откройте этот файл в браузере:

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

 

Теперь, если вы нажмете кнопку на странице, вы увидите запись лога в Консоли браузера.

 

Консоль в браузере (console.log())

 

 

Для очистки Консоли нажмите сочетание клавиш Ctrl+L.

 

 

Метод console.log является наиболее часто используемым элементом объекта console. Кроме него существуют также другие элементы данного объекта:

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

 

 

 

Вот и все на сегодня! Надеемся, что данной вводной информации вам было достаточно для понимания работы Консоли в браузере, а также функции console.log(). Используйте эти инструменты при работе с JavaScript, и процесс кодирования и отладки кода станет для вас намного проще.

 

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *