Вывод текста в документ в JavaScript
Средствами JavaScript можно управлять тегами HTML страницы, например, выводить в них текст. Этому мы будем учиться позднее, когда будем проходить раздел, посвященный работе с DOM.
Иногда, однако, в отладочных целях требуется вывести какой-нибудь текст в окно браузера. Это делается с помощью команды document.write . Посмотрим работу с ней на примерах.
Выведем числовое значение:
document.write(123);
Выведем какой-нибудь текст:
document.write(‘text’);
Выведем текст, заключенный в теги:
document.write(‘text‘);
Выведем текст из переменной:
let str = ‘text’; document.write(str);
Заключим текст из переменной в теги:
let str = ‘text’; document.write(‘‘ + str + ‘‘);
Выведем текст с два ряда:
document.write(‘text
text’);
Выведем много текстов в колонку:
document.write(‘text1
‘); document.write(‘text2
‘); document.write(‘text3
‘);
Можно и вот так:
document.write(‘text’); document.write(‘
‘); document.write(‘text’);
Выведите в окно браузера какой-нибудь текст.
Выведите в окно браузера какой-нибудь текст, сделав его курсивным.
let str = ‘text’;
Выведите текст из переменной в окно браузера так, чтобы он был курсивным.
Выведите в окно браузера столбец чисел от 1 до 5 .
Функции вывода
Во время написания программы, а также при её отладке часто возникает необходимость увидеть, как работает программа. Нужно узнать, доходит ли выполнение программы до определённого места и какие значения имеют переменные в этот момент. Для этого существуют функции вывода, которые рассмотрены в данной теме.
Функция alert()
Функция alert() выводит на экран окно с сообщением. Текст сообщения всегда пишется в кавычках. Все функции вывода могут выводить не только текст, но и значения переменных. Пример:
let x = 10; alert('Текст'); alert(x);
Особенность этой функции заключается в том, что она приостанавливает работу программы. Когда выполнение программы доходит до функции alert() , появляется окно и работа программы прерывается. А когда пользователь нажимает кнопку OK, окно изчезат, а программа продолжает работу. Иногда эта особенность бывает полезна. Она позволяет не только вывести сообщение, но и увидеть, как выглядит страница на данном этапе выполнения программы. Однако, если нужно вывести много сообщений, то использование функции alert() становится неудобным. Ведь при каждом выводе программа прерывается и нужно нажимать кнопку OK. В этих случаях используются другие способы вывода данных.
Метод document.write()
Метод document.write() добавляет текст на страницу. Это может быть не просто текст, но и HTML тэги. Они будут работать. Однако, не рекомендуется использовать этот метод для добавления элементов страницы. Они могут отображаться неправильно. Для создания элементов применяются другие методы, которые рассмотрены в этом учебнике. А document.write() используется, в основном, для отслеживания работы программы. Пример:
document.write('Текст на странице '); document.write(x);
Метод console.log()
Консоль браузера — это полезный инструмент отладки страницы, в том числе, скриптов. Он позволяет получить важную информацию о работе скрипта. Удобнее всего консоль сделана в браузере FireFox. Она находится в Инструментах разработчика. Чтобы их открыть, зайдите в главное меню браузера и выберите «Другие интструменты». Для быстрого открытия Инструментов разработчика можно добавить кнопку в панель инструментов.
Для консоли в Инструментах разработчика есть своя вкладка.
Метод console.log() позволяет вывести данные в консоль. Он работает не во всех, но в большинстве браузеров. Пример:
console.log('Текст выведенный в консоль'); console.log(x);
Подробнее работа с консолью рассмотрена в теме про отладку скриптов.
Коприрование материалов сайта возможно только с согласия администрации
2017 — 2024 © basecourse.ru Все права защищены
Взаимодействие с пользователем: alert, prompt, confirm
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/alert-prompt-confirm.
В этом разделе мы рассмотрим базовые UI операции: alert , prompt и confirm , которые позволяют работать с данными, полученными от пользователя.
alert
alert(сообщение)alert выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК».
alert( "Привет" );Окно сообщения, которое выводится, является модальным окном. Слово «модальное» означает, что посетитель не может взаимодействовать со страницей, нажимать другие кнопки и т.п., пока не разберётся с окном. В данном случае – пока не нажмёт на «OK».
prompt
Функция prompt принимает два аргумента:
result = prompt(title, default);Она выводит модальное окно с заголовком title , полем для ввода текста, заполненным строкой по умолчанию default и кнопками OK/CANCEL.
Пользователь должен либо что-то ввести и нажать OK, либо отменить ввод кликом на CANCEL или нажатием Esc на клавиатуре.
Вызов prompt возвращает то, что ввёл посетитель – строку или специальное значение null , если ввод отменён.
Safari 5.1+ не возвращает null
Единственный браузер, который не возвращает null при отмене ввода – это Safari. При отсутствии ввода он возвращает пустую строку. Предположительно, это ошибка в браузере.
Если нам важен этот браузер, то пустую строку нужно обрабатывать точно так же, как и null , т.е. считать отменой ввода.
Как и в случае с alert , окно prompt модальное.
var years = prompt('Сколько вам лет?', 100); alert('Вам ' + years + ' лет!')Всегда указывайте default
Второй параметр может отсутствовать. Однако при этом IE вставит в диалог значение по умолчанию «undefined» .
Запустите этот код в IE, чтобы понять о чём речь:
var test = prompt("Тест");Поэтому рекомендуется всегда указывать второй аргумент:
var test = prompt("Тест", ''); // confirm
result = confirm(question);confirm выводит окно с вопросом question с двумя кнопками: OK и CANCEL.
Результатом будет true при нажатии OK и false – при CANCEL( Esc ).
var isAdmin = confirm("Вы - администратор?"); alert( isAdmin );Особенности встроенных функций
Конкретное место, где выводится модальное окно с вопросом – обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять.
С одной стороны – это недостаток, так как нельзя вывести окно в своём, особо красивом, дизайне.
С другой стороны, преимущество этих функций по сравнению с другими, более сложными методами взаимодействия, которые мы изучим в дальнейшем – как раз в том, что они очень просты.
Это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие «красивости» особой роли не играют.
Резюме
- alert выводит сообщение.
- prompt выводит сообщение и ждёт, пока пользователь введёт текст, а затем возвращает введённое значение или null , если ввод отменён (CANCEL/ Esc ).
- confirm выводит сообщение и ждёт, пока пользователь нажмёт «OK» или «CANCEL» и возвращает true/false .
Вывод данных Javascript
У JavaScript есть несколько различных способов "отобразить" данные:
- Запись в HTML элемент при помощи свойства innerHTML.
- Запись в вывод HTML при помощи метода document.write().
- Запись в окно предупреждений при помощи метода window.alert().
- Запись в консоль браузера при помощи метода console.log().
Использование innerHTML
Чтобы получить доступ к HTML элементу, JavaScript должен воспользоваться методом document.getElementById(id). Атрибут id определяет идентификатор HTML элемента. Свойство innerHTML определяет выводимый HTML контент:
Моя веб-страница
Первый параграф
Изменение свойства innerHTML элемента HTML это обычный способ вывода данных в HTML.
Использование document.write()
В тестовых целях для вывода данных можно использовать метод document.write():
Моя веб-страница
Первый параграф
Следует помнить, что использование метода document.write() после полной загрузки HTML документа удалит весь существующий HTML код:
Моя веб-страница
Первый параграф
Метод document.write() следует использовать только для тестирования.
Использование window.alert()
Для отображения данных также можно использовать окно сообщений. Для этого нужно воспользоваться методом window.alert():
Моя веб-страница
Первый параграф
Использование console.log()
Во время отладки скрипта, чтобы увидеть некие данные, вы можете вывести их в консоль браузера. Для этого используется метод console.log():
Подробнее об отладке скриптов будет рассказано в следующих главах.