Как вывести текст в консоль javascript

jQuery. Вывести текст, что находится в теге, в консоль

Есть некий родительский блок div. В нем две кнопки с одинаковыми класами, но разные значения в data-*. В зависимости, на какую кнопку клацнули, нужно достать текст в самом теге(Fade out или же Fade in) и именно это вывести в консоль Вот код

  
This is a paragraph.
 
Fade out Fade in 
   

 $(document).ready(function() < $(".div").click(function(evt)< let targ = evt.target.dataset.bq console.log(targ) $("p").fadeOut(); if(targ === "1")< $(".btn1").addClass("mytry") console.log($(".mytry").text()) >else if (targ === "2") < $('.btn1').addClass("twe") console.log($(".twe").text()) >>) >); 

добилась только того что выводит значение атрибута нажатой кнопки, теперь бы именно текст с этой кнопки вывести в консоль. Не знаю как написать, что типа: ми нажали на кнопку, узнали какой у нее атрибут, потом в зависимости от атрибута напялили доп класс, потом находим этот доп класс и именно по нему достаем текст. но что-то не выходит..не знаю что использовать( пару дней как начала разбираться в jquery Заранее благодарю за любую помощь

Метод console.log — Вывод информации в консоль

Метод console. log в Javascript позволяет выводить информацию (сообщения, данные и т.п.) из программного кода в консоль.

На этом сайте, при работе с Javascript -кодом, в большинстве случаев для вывода информации использовался метод write объекта document или (иногда) метод alert.

О существовании консоли тоже следует знать, так как ее использование — это хороший способ диагностики и отладки программного кода.

document . write ( «Вывод информации на экран» );

window . alert ( «Модальное Окно» );

console . log ( «Вывод данных в консоль» );

Как открыть консоль в браузере?

В браузере по умолчанию консоль скрыта от глаз пользователя. Но ее легко открыть при помощи специальной команды:

Ctrl + Shift + I — открываем Веб-консоль в большинстве браузеров Mozilla Firefox , Google Chrome , Opera .

В браузере Mozilla Firefox также работает сочетание клавиш Ctrl + Shift + K .

Либо следуем по пути: Инструменты — Веб-разработка — Консоль браузера.

Метод console.log в JavaScript — Вывод информации в консоль

Зная, как открыть консоль браузера, рассмотрим пример вывода в нее информации при помощи метода console.log.

Фрагмент кода

document . write («Чтобы открыть Консоль в Firefox — нажмите Ctrl + Shift + K»);

console. log («Добро пожаловать в Веб-консоль»);

Итак, при помощи метода console. log можно выводить информацию в консоль браузера.

Со временем Вы оцените достоинства этого способа представления работы Javascript -кода.

Преимущества console.log — Каждый раз с новой строки

О пользе и преимуществах работы в консоли Вы узнаете в свое время. В частности, метод console. log удобен тем, что каждое его использование выводит информацию в консоль с новой строки.

Если же выводить информацию в окно браузера при помощи метода write объекта document, то для организации переноса строки нужно специально ставить тег br, либо указывать новый параграф — тег p.

Фрагмент кода

document . write ( «Строка №1» );
document . write ( «Строка №2
» );
document . write ( «Строка №3» );

console. log ( «Строка №1» );
console. log ( «Строка №2» );
console. log ( «Строка №3» );

Строка №1Строка №2
Строка №3

Строка №1
Строка №2
Строка №3

Как видно, строки, выведенные на экран при помощи document . write , следуют друг за другом неразрывно, кроме той, где намеренно введен тег переноса .

В то время как метод console. log каждый раз выводит информацию с новой строки, что очень удобно. Поэтому для диагностики и отладки Javascript -кода пользуйтесь выводом результатов в консоль.

Читайте также.

Метод write() объекта document

Добавление элементов в массив

Способы вывода данных из массива

Практическая задача — Создание массива

Начало работы – Переменные и типы данных

Практика часть 1 – Способы добавления свойств в объект

Отзывы и комментарии:

Добавил(а): Александр
Дата: 2020-01-05

Скажите пожалуйста? А возможно вывести в строку в консоль через цикл?

Добавил: Admin
Дата: 2020-01-06

Александр Вы писали 2020-01-05
Скажите пожалуйста? А возможно вывести в строку в консоль через цикл?

Вывести строку в консоль через цикл? Да можно вывести что-либо в консоль через цикл.

Добавил(а): Александр
Дата: 2020-01-07

Я извиняюсь за не правильно поставленный вопрос) Дело вот в чем. Я учил Java но потом понял что хочу стать Front-End разработчиком и переключился на JS. Начал с чтения книги «Выразительный Javascript» там есть дз Шахматная доска -Напишите программу, создающую строку, содержащую решётку 8х8, в которой линии разделяются символами новой строки. На каждой позиции либо пробел, либо #. В результате должна получиться шахматная доска. Это задание легко выполнил бы в Java. А тут consol.log — постоянно переносит на новую строку) Но в общем я уже подсмотрел решение) записать все в String. В общем как то так)

Добавил: Admin
Дата: 2020-01-07

Хорошо. Не плохая задача для начала. Удачи в учебе.

Добавил(а): Александр
Дата: 2020-01-09

Консоль JavaScript: определение, как вывести, команды и итог

При помощи J S ( JavaScript) можно осуществить вывод в консоль браузера какой-либо информации прямо из программного кода. JavaScript-программисты знакомы с командой, которая отвечает за это действие , — это «console.log()».

По сути, команда «console.log()» в JavaScript помогает отладить JS-код в программ е б лагодаря выводу сообщений. Поэтому понимать , как она работает , необходимо каждому веб-программисту.

Как осуществить JS-вывод в консоль браузера

Шаблон использования команды «console.log()» в JavaScript простой, но может выводить сложные вещи. Шаблон:

console.log();

Например, можно вывести какой-либо текст:

console.log(‘JavaScript-вывод в консоль’);

Но можно вывести и что-то сложное, например, вот такие функции со сложной конструкцией:

const object1 = < id: first, verified: true, objectcolor: 'white'>;

const object2 = < id: second, verified: false, objectcolor: 'black'>;

Можно вывести всю эту конструкцию в консоль, за исключением того, что находится до знака « = » , чтобы в консоли браузера появилось следующее:

< id: first, verified: true, objectcolor: 'white'>;

< id: second, verified: false, objectcolor: 'black'>;

Делается это простым выражением:

console.log();

Табличный вывод в консоль при помощи JavaScript

Чуть выше в примера х « object1 » и « object2 » представляют сложные объекты. Если выводить их обычным методом, мы показали , что будет в консоли. Когда только два объекта, тогда более менее читабельно. Но если будет 20 или 50 объектов? Наверное , читать будет не очень удобно. Чтобы улучшить читаемость информаци и, можно вывести их в консоль в табличном представлении. Для этого нужна другая команда:

console.table();

В нашем случае команда будет выглядеть так:

console.table();

Тогда результат в консоли браузера будет вот таким:

(index)	id	verified	objectcolor
object1	first	true	«white»
object2	second	false	«black»

Согласитесь, что так уже полегче читать?

Групповой вывод в JS-консоль

Бывают случаи, когда в консоль нужно вывести сгруппированную информацию, которая каким-то образом связана между собой. Тогда в консоли будет отчетливо видно , что и к чему относится и какая связь между сообщениями. Групповой вывод в JS — консоль осуществляется при помощи команды :

console.groupe()

Например , нужно вывести информацию о покупателях интернет-магазина:

console.group(«Информация о покупателе»);

console.log(«Имя: Дормидонт»);

console.log(«Отчество: Платонович»);

//Далее формируем вложенную группу

console.group(«Адрес»);

console.log(Страна: Тринидад и Тобаго);

console.log(Город:Чагуанас);

console.log(Улица:Черчилль-Рузвельта);

console.groupEnd();

console.groupEnd();

В результате такой организации вывода мы получим вложенный список «информация о покупателе», который можно будет свернуть или развернуть, чтобы увидеть всю информацию о покупателе «Дормидонте Платоновиче».

Вывод предупреждений в JS-консоль

• сообщения- « предупреждения » будут выделены желтым цветом, а перед ними будет стоять иконка « восклицательный знак в треугольнике » ;
• сообщения- « ошибки » будут выделены красным цветом, а перед ними будет располагаться иконка « крестик в красном круге » .

Отладка JS: полезные команды для консоли

1. Команда « console.trace » . Это специализированная команда, которая выведет результат трассировки стека и покажет, что происходит в программе в конкретное время и в конкретном месте. Обычно этой командой в консоль выводят сообщения, которые помогают контролировать исполнение « внутренних » механизмов программы.
2. Команда « console.time » . При помощи этой команды можно измерить время исполнения конкретных операций в коде. Например, если операция исполнилась в указанное время, тогда вывести об этом сообщение. Это полезно, так как каждому веб-разработчику необходимо заботит ь ся о производительности собственной программы.

Заключение

Сегодня мы рассказали , что вывод какого-либо сообщения в JS-консоль может быть разным. Функция « console.log()» » отвечает за вывод информации в консоль. Если ею правильно манипулировать, тогда и сообщения в консоли будут разны ми.

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

console . log ( )

console . log ( ) — это метод, предназначенный для печати в консоль браузера.

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Вызов console . log ( ) выведет в консоль все переданные аргументы:

 console.log('hello')// 'hello'console.log(true, < a: true >, 100)// true 100 console.log('hello') // 'hello' console.log(true,  a: true >, 100) // true 100    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

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

Почему консоль разработчика, а не alert ( ) ?

Откройте консоль и выполните:

 const a = alert(a) const a =  id: 1, value: 'one text' > alert(a)    Скопировать Скопировано Не удалось скопировать   

Вывод при таком подходе не отражает содержимого объекта а — мы увидим только надпись «[object Object]». Помимо этого приходится каждый раз закрывать диалоговое окно, что раздражает.

Другое дело если совершать эти действия в консоли:

 const a = console.log(a)// Object const a =  id: 1, value: 'one text' > console.log(a) // Object   Скопировать Скопировано Не удалось скопировать   

Результат представлен в виде дерева, которое удобно раскрывается — видны все параметры.

Если хочется вывести отладочное сообщение на страницу, то придётся воспользоваться или alert ( ) или создавать отладочный HTML-блок div или textarea , чтобы записать туда свои вычисления с помощью записи в свойство inner Text . Перед этим не забудьте привести объект в строку с помощью JSON . stringify ( ) — проще будет читать.

Особенность работы в браузере

Скопировать ссылку «Особенность работы в браузере» Скопировано

В браузере с помощью console . log ( ) можно проверить мутацию ссылочного типа. Этого можно добиться, раскрыв выведенное значение в консоли. Всё что нам нужно сделать — нажать на иконку с перевёрнутым треугольником (►).

В качестве примера создадим массив с героями диснеевских мультфильмов. Изначально в нем будет располагаться только Микки Маус, а после вызова console . log ( ) , добавим и Плуто.

 const disneyCharacters = [< name: 'Mickey Mouse', type: 'mouse' >]console.log(disneyCharacters)disneyCharacters.push() const disneyCharacters = [ name: 'Mickey Mouse', type: 'mouse' >] console.log(disneyCharacters) disneyCharacters.push(name: 'Pluto', type: 'dog' >)    Скопировать Скопировано Не удалось скопировать   

Нажмём на иконку с перевёрнутым треугольником (►) в консоли и увидим результат вывода:

Причина в том, что значение ссылочного типа читается браузером только при его первом раскрытии. Этот процесс также называют ленивым чтением (lazy-read).

Google Chrome при этом показывает информационную иконку, при наведении на которую отобразится подсказка с текстом: «This value was evaluated upon first expanding. It may have changed since then.»

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

console . log ( ) и console . dir ( )

Скопировать ссылку «console.log() и console.dir()» Скопировано

В пространстве объекта console существуют различные методы. Есть два похожих метода console . log ( ) и console . dir ( ) .

console . log ( ) отражает любой объект в консоли в удобном виде. Если это примитив — то его значением, если объект — его древовидной формой. DOM-элемент — его можно также раскрыть и увидеть, что внутри.

Но console . log ( ) показывает содержимое DOM, а не его свойства. Если нужно увидеть свойства DOM-элемента, то лучше использовать console . dir ( ) :

 const el = document.createElement('div')const el2 = document.createElement('div')el2.appendChild(el)console.log(el)console.dir(el) const el = document.createElement('div') const el2 = document.createElement('div') el2.appendChild(el) console.log(el) console.dir(el)    Скопировать Скопировано Не удалось скопировать   

️ console . log ( ) удобен для исследования объектов и их вложенных элементов, а console . dir ( ) удобен для просмотра свойств объекта.

Если делать console . log ( ) и console . dir ( ) простого объекта, то разница минимальна:

 const a = console.log(a)console.dir(a) const a =  cat: "miu", dog: "woof" > console.log(a) console.dir(a)    Скопировать Скопировано Не удалось скопировать   

�� В каждом браузере свой набор инструментов работы с console . Смотрите, поддерживается ли тот или иной метод в вашем браузере в таблице на MDN

Виталий Баев советует

Скопировать ссылку «Виталий Баев советует» Скопировано

�� Часто нам необходимо вывести в консоли содержимое переменных. Например, вывести переменные language и count можно так:

 const language = 'JavaScript'const count = 100 console.log('language:', language, 'count:', count)// language: JavaScript count: 100 const language = 'JavaScript' const count = 100 console.log('language:', language, 'count:', count) // language: JavaScript count: 100    Скопировать Скопировано Не удалось скопировать   

Но можно сделать проще и быстрее. Сравните:

 const language = 'JavaScript'const count = 100 console.log(< language, count >)// const language = 'JavaScript' const count = 100 console.log( language, count >) //   Скопировать Скопировано Не удалось скопировать   

�� Если у нас есть массив с каким-то количеством однотипных объектов, то можно воспользоваться console . table ( ) :

 const data = [ < section: 'HTML', count: 212 >, < section: 'CSS', count: 121 >, < section: 'JavaScript', count: 182 >, < section: 'Tools', count: 211 >,] console.table(data);// ┌─────────┬──────────────┬───────┐// │ (index) │ section │ count │// ├─────────┼──────────────┼───────┤// │ 0 │ 'HTML' │ 212 │// │ 1 │ 'CSS' │ 121 │// │ 2 │ 'JavaScript' │ 182 │// │ 3 │ 'Tools' │ 211 │// └─────────┴──────────────┴───────┘ const data = [  section: 'HTML', count: 212 >,  section: 'CSS', count: 121 >,  section: 'JavaScript', count: 182 >,  section: 'Tools', count: 211 >, ] console.table(data); // ┌─────────┬──────────────┬───────┐ // │ (index) │ section │ count │ // ├─────────┼──────────────┼───────┤ // │ 0 │ 'HTML' │ 212 │ // │ 1 │ 'CSS' │ 121 │ // │ 2 │ 'JavaScript' │ 182 │ // │ 3 │ 'Tools' │ 211 │ // └─────────┴──────────────┴───────┘    Скопировать Скопировано Не удалось скопировать