Меню
Спросить
JS

console и alert.

21 ноября 2017
console и alert.

Всем привет! Почти в каждой статье до этой мы пользовались то объектом console и ее методом log, то функцией alert. Сегодня я решил, что не стоит оставлять эти полезности в стороне и нужно по ближе их узнать. Конечно нужно было сделать это заранее, но лучше поздно, чем ни когда. Кстати, по мимо alertа мы еще затронем две функции - prompt и confirm.
Вообще для начала определимся. Функция alert чаще нужна для пользователей, а метод console уже для нас - для разработчиков. К примеру мы просто так не сможем через alert посмотреть объект, для этого нужно мудрить, а вот console как раз для этого и подходит. НО в свою очередь в console мы можем вывести сообщение об ошибке, например "Вы не ввели логин", но пользователь не знает про консоль и так и не поймет, что же ни чего не происходит, а вот alert, как раз для этого и подойдет, он явно даст пользователю знать об ошибке. Сегодня мы и поговорим про этих двух ребят.

console.log

Начнем с того метода, с которым мы уже работали. Метод log - это часто-используемый общий метод для вывода информации в консоль. Выводит например числа, строки, объекты и тд. Данный метод поддерживает так называемые паттерны или этакие шаблоны для подстановки каких-либо значений в указанное место в строке. То есть вместо обычной строки мы можем сделать ее шаблон, меняя аргументы.
Вот список поддерживаемых паттернов:

  1. %d или %i - Выведет число
  2. %f - Выведет дробное число, то число с плавающей запятой
  3. %c - Применит css стили
  4. %s - Выведет строку
  5. %o - Выведет DOM элемент
  6. $O - Выведет JavaScript Объект

Не забивайте себе голову, просто возможно вам это пригодится. А так давайте посмотрим пример использования паттернов в методе log, для полноты картины.

  1. console.log('Это число %d, а это уже строка в нашем шаблоне - %s, а это мы %cвыделили%c текст',20, 'гыгыгы', 'color:lime;', 'color:normal');

В итоге мы видим в консоли следующее:

console.log - паттерны

console.clear

Данный метод clear очищает нашу консоль. К примеру очистим консоль, чтобы было заметно как работает данный метод я использую таймер, консоль очистится через 5 секунд. Только не волнуйтесь, таймеры мы скоро тоже пройдем =)

  1. console.log('Это число %d, а это уже строка в нашем шаблоне - %s, а это мы %cвыделили%c текст',20, 'гыгыгы', 'color:lime;', 'color:normal');
  2. setTimeout(function(){console.clear();}, 5000);
  3. // Спустя 5 секунд в консоли:
  4. // Console was cleared

console.assert

С помощью данного метода мы можем проверить свой код. Например проверить действительно ли число 5 не равно числу 5. Если наш код ложный, то есть неверный, то выйдет ошибка, в противном случае ни чего не произойдет.

  1. console.assert(5 != 5);
  2. // Ошибка
  3. console.assert(5 == 5);
  4. // Пусто, значит все нормально

console.dir

Данный метод выведет JS-объект, а точнее DOM элемент в виде JS-объекта со всеми своими свойствами и методами.
Например обратимся к body и выведем его в консоль через метод log.

  1. var
  2. el = document.body;
  3. console.log(el);
  4. // Выводит тег body

А теперь выведем с помощью метода dir.

  1. var
  2. el = document.body;
  3. console.dir(el);
  4. // Выводит объект body

console.time и console.timeEnd

Данный метод покажет вам за сколько миллисекунд выполняется ваш код.
Давайте попробуем на примеру цикла for.
Для начала нужно объявить переменную и задать ей строковое значение, хотя не обязательно строковое, можно любое, можно вообще ничего не писать, это будет метка для данных двух методов.

  1. var
  2. m = 'Time';

Дальше напишем простенький цикл.

  1. var
  2. m = 'Time';

  3. for (var i=0; i<10; i++) {
  4.     console.log(i);
  5. }

Теперь нудно обозначить места откуда начинать считать и где заканчивать. Метод time - это начало отсчета, а метод timeEnd - конец отсчета. Поэтому поставим соответствующие методы перед циклом и в конце цикла. Таким образом мы посчитаем за какое время цикл произвел работу.

  1. var
  2. m = 'Time';

  3. console.time();
  4. for (var i=0; i<10; i++) {
  5.     console.log(i);
  6. }
  7. console.timeEnd();

Осталось поставить метку.

  1. var
  2. m = 'Time';

  3. console.time(m);
  4. for (var i=0; i<10; i++) {
  5.     console.log(i);
  6. }
  7. console.timeEnd(m);

Все теперь в консоли метод мне показывает время работы моего кода, моего цикла - Time: 4.178955078125ms.
Давайте изменим счетчик от 0 до 100, как изменится теперь время?
Теперь стало - Time: 13.35400390625ms
Вот таким образом с помощью методов time и timeEnd можно подсчитать время работы вашего кода и вывести в консоль.
Думаю достаточно, другие методы можно посмотреть здесь. Поехули дальше.

alert

С данной функцией мы уде встречались, но раз уж начали давайте повторим.
Функция alert выводит на экран сообщение в модальном окне и работа JavaScript да и работа документа приостанавливается, пока пользователь не нажмет в данном окне на кнопку "OK".

  1. alert('Нажми OK');

prompt

Данная функция похожа на alert, тем что тоже выходит модальное окно и код будет ждать действий пользователя.
Отличия в том, что prompt в своем окне содержит несколько больше элементов - заголовок, текстовое поле, кнопка ОК и кнопка ОТМЕНА.
Например, спросим у пользователя его имя.
Пишем функцию.

  1. prompt();

Если alert принимает один параметр, то prompt принимает два параметра - заголовок и значение в поле по умолчанию.
Запишем заголовок:

  1. prompt('Как тебя зовут');

Теперь запишем значение по умолчанию, которое будет содержаться в текстовом поле.

  1. prompt('Как тебя зовут', 'Введите имя');

Данная функция возвращает ответ, в зависимости от действий пользователя:

  1. Вернет то, что пользователь ввел в текстовое поле
  2. Вернет null или пустую строку, если пользователь нажал отмену или ни чего не ввел.

Давайте попробуем получить то, что ввел пользователь. Для этого объявим переменную и запишем в нее данную функцию.

  1. var
  2. a;
  3. a = prompt('Как тебя зовут', 'Введите имя');

Теперь выведем с помощью функции alert.

  1. var
  2. a;
  3. a = prompt('Как тебя зовут', 'Введите имя');
  4. alert(a);

Все. Теперь запустите и попробуйте ввести или наоборот и вводить и тд.

confirm

confirm похожа на alert и prompt. Принимает один параметр и содержит две кнопки, в ответ возвращает булево значение.
TRUE, если была нажата клавиша ДА.
ELSE, если была нажата клавиша НЕТ.
Пробуем.

  1. var
  2. a;
  3. a = confirm('Есть чо?');

  4. if (a) {
  5.     alert('Давай сюда');
  6. }
  7. else {
  8.     alert('А если найду?');
  9. }

Заключение

На сегодня все, думаю, что каждый здесь нашел что-то для себя. Всем спасибо, пока =)

Предыдущая статья