Консоль JavaScript в вашем браузере
В процессе программирования на JavaScript появляется необходимость выводить значения переменных. К примеру, это можно делать функцией alert( ). Но если использовать её несколько раз, тогда придётся закрывать всплывающее окно, чтобы увидеть следующее. Это неудобно, поэтому на помощь приходит консоль, встроенная в браузер.
Как открыть JavaScript консоль в браузере?
Если вы пользуетесь одним из популярных браузеров (Chrome, FireFox, Safari, Opera), то в них уже встроена консоль JavaScript, в которую можно выводить отладочную информацию во время разработки. Для этого откройте страницу сайта, на которой находится JS код для тотладки, и кликните на клавишу F12 на клавиатуре. Откроется панель разработчика.
В большинстве браузеров средства разработки называются более-менее одинаково и имеют очень схожий функционал. Далее в статье будет рассматриваться браузер FireFox.
Теперь необходимо переключить вкладку вверху открывшегося окна на «Консоль». Кликните на эту вкладку с помощью курсора мыши: Разберёмся с иконоками и опциями, которые есть в этой закладке:
- Иконка корзины — очищает лог (лог — это список событий, строчки текстовых записи)
- Непрерывные логи — если поставить эту галочку, то при перезагрузки страницы лог не будет очищаться автоматически.
- «Ошибки», «Предупреждения», «Лог» . — эти закладки отключают вывод сообщений. К примеру, кликните по пункту «Ошибки» и снимите выделение, тогда в консоль не будут записываться предупреждение об ошибках.
Как вывести переменную JavaScript в консоль?
Попробуем написать на странице JavaScript код и перезагрузить её, чтобы он выполнился. В коде используем функцию console.log( ), которая выводит значение содержимого в скобках. То есть если поставить в скобки переменную, то в консоли будет показано её значение:
var a = ; console.log(a);Заглянем в консоль и увидим значение объекта: 
Чтобы увидеть подробную информацию, кликните на иконку стрелочки слева на интересующей строчке: 
Таким способом можно выводить не только массивы и объекты, но и простые переменные. К сожалению, если выводить сразу несколько значений, то не будет понятно что к чему относится. Продемонстрируем это:
var a = 'Мышь'; var b = 'Сыр'; var c = 100; console.log(a); console.log(b); console.log(c);
Результат выполнения этого кода будет таким: Такой вывод не слишком информативен. К счастью, внутри скобок функции console.log( ) можно использовать объединение строк. Поэтому предлагаем записать дополнительную отладочную информацию в выводимые строки:
var a = 'Мышь'; var b = 'Сыр'; var c = 100; console.log('Значение переменной "a" = ' + a); console.log('Значение переменной "b" = ' + b); console.log('Значение переменной "c" = ' + c);
Теперь вывод в консоль будет более информативным. И можно использовать функцию console.log( ) десятки раз, не боясь запутаться в значениях, которые попадают в консоль:
Рекомендуем ознакомиться со статьёй «Операции со строками в JavaScript», если возникли вопросы к объединению строк.
К сожалению, это можно делать только с простыми переменными (строки/числа) и массивами (в том числе многомерными), но с объектами так сделать не получится, потому что будет выведено «[object Object]» вместо значения:
Вывод переменной Javascript в текстовую строку.
Вывод переменной Javascript в тектовую строку — это задача, с которой можно столкнуться довольно часто.
Например, это может быть текстовое поле ввода, в которое нужно ввести имя пользователя и это введеное пользователем значение нужно вывести в качестве переменной Javascript в текстовой строке.
Можете «поиграть» с этим кодом.
В зависимости от того, какое имя введет пользователь, должно выводиться сообщение:
Привет, Вася! или Привет, Петя!, и.т.д.
Чтобы добиться такого эффекта, нужно объединить текстовую строку «Привет» и переменную, которая будет содержать имя пользователя.
Давайте посмотрим, как это можно сделать на Javascript:
alert( "Привет " + name + "!");
Таким образом, в Javascript символом, который объединяет текстовую строку и переменную является знак «+». Чтобы сообщить о том, что здесь закончился текст и начинается переменная Javascript, нужно открыть и закрыть кавычки.
Больше моих уроков по Javascript здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Как вывести переменную JS в HTML?
Да, я понял. Спасибо. Только почему он выводит на следюущей строке?
5 фев 2018 в 12:43
Потому что
5 фев 2018 в 12:45
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
var min = 0; document.getElementById("min").innerHTML = min;
Итог -
Да, тут ошибка была лишь в том, что не прописалось еще все. Вообще скрипты лучше стараться ставить все после загрузки DOM и стилей. Так во всех фреймворках требуют. Хотя есть и такие, которые вы вынуждены будете закинуть в .
Переменные в JavaScript. Ввод и вывод информации в JavaScript
Чтобы обрабатывать информацию в JavaScript, используются переменные. С помощью переменных в JavaScript можно получать информацию от пользователя, изменять её и выводить на веб страницу. Чтобы задать переменную в JavaScript используется конструкция
let имя переменной = начальное значение;
Пример числовой переменной в JavaScript
let a = 5;
Пример строковой переменной в JS
let name = «Иван»;
Чтобы поменять значение переменной в JavaScript используется конструкция
имя переменной = значение;
Над числовыми переменными в JavaScript можно применять следующие операции:
+ — сложение
— — вычитание
/ — деление
* — умножение
% — остаток от деления
** — возведение в степень
++ — инкремент
— — декремент
Пример арифметической операции в JS
let a=4;
let b=2;
let c;
c = a+b;
Вывод информации на веб страницу с помощью JavaScript
Чтобы вывести информацию на веб страницу с помощью JavaScript, можно использовать модальное окно alert
alert(информация);
Для вывода значения переменной в JavaScript используется конструкция
alert(переменная);
Для вывода текста в JS используется конструкция
alert(«Текст»);
Код всех примеров необходимо сохранять в файл с расширением js и вызывать этот файл внутри html страницы. Подробнее о вызове javascript в html страницах Пример вывода значения переменной в JavaScript
let a=4;
let b=2;
let c;
c = a+b;
alert(c); 
Для вывода текста и значения переменной в JS используется конструкция
alert(‘Текст’+(переменная));
Пример вывода текста и значения переменной в JavaScript
let a=4;
let b=2;
let c;
c = a+b;
alert(‘Сумма ‘+(a)+’+’+(b)+’=’+(c));
Для вывода информации в виде текста в JavaScript используется команда
document.write(информация);
Пример вывода информации в виде текста в JavaScript
let a=4;
let b=2;
let c;
c = a+b;
document.write(‘Сумма ‘+(a)+’+’+(b)+’=’+(c));
Ввод информации в JavaScript
Для ввода информации в JS используется окно ввода информации prompt
переменная= prompt(‘Текст’);
Пример ввода информации в JavaScript
let a=prompt(‘Введите ваше имя’);
let b=prompt(‘Введите ваш возраст’);
document.write(‘Здраствуйте, ‘+(a)+’, вам ‘+(b)+’ лет’);
Часто на веб страницах необходимо ввести числовое значение. Чтобы ввести числовое значение в JavaScript используется следующая конструкция.
переменная = Number(prompt(‘Текст’));
Пример ввода числовых значений в JavaScript
let a=Number(prompt(‘Введите первое число’));
let b=Number(prompt(‘Введите второе число’));
let c;
c = a+b;
document.write(‘Сумма ‘+(a)+’+’+(b)+’=’+(c));