Функции вывода
Во время написания программы, а также при её отладке часто возникает необходимость увидеть, как работает программа. Нужно узнать, доходит ли выполнение программы до определённого места и какие значения имеют переменные в этот момент. Для этого существуют функции вывода, которые рассмотрены в данной теме.
Функция 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 — 2023 © basecourse.ru Все права защищены
Вывод текста на HTML страницу при помощи JavaScript
Обычный текст в JavaScript выводится следующим образом:
|
Вывод текста в JavaScript при помощи HTML тегов:
|
Текстовые значения выделяются одинарными или двойными кавычками. В случае если выводимый текст содержит кавычки, их необходимо экранировать с помощью backslash › \ .
JavaScript вывод текста с кавычками:
|
Если не использовать backslash, результатом вывода будет: Профессор Ефимов сказал:.
Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
Знакомство с JavaScript JavaScript вывод текста JavaScript включение
© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Вывод текста в JavaScript? – Не вопрос!
Как вывести текст в JavaScript
На этом уроке мы рассмотрим, как вывести текст в JavaScript на экран, с двумя разными целями: заменить на другой и добавить к существующему.
Создадим простую HTML структуру, подходящую для обоих вариантов. При клике по кнопке, текст в параграфе должен замениться на другой. На кнопку мы повесили событие onclick с названием функции text_out(). Дальше нам предстоит эту функцию запрограммировать в JavaScript.
Заменить текст в JavaScript
Пишем название функции, совпадающее с onclick событием на кнопке, внутри фигурных скобочках, будем писать код функции.
Для получения параграфа для работы:
Присвоим переменной p следующий объект. Мы получили и положили в переменную p, весь параграф с идентификатором text_change.
Для того, чтобы вывести что-нибудь (числа, строки) внутри любого парного тега, надо использовать конструкцию innerHTML. Получим целый параграф и вместо «Заменить текст», выведем внутри p новую запись:
p.innerHTML = ‘Текст заменили’;
После клика по кнопке, замена произошла успешно.
Нам интересно, а что произойдет с исходным кодом, после манипуляций с заменой? Заглянем в инспектор кода для разработчика и увидим, что в HTML коде, тоже произошли изменения.
Что будет, если кавычки оставить пустыми?
Тогда параграф очистится, текущая запись удалится, а новая не вставится.
Добавить текст в JavaScript
Как добавить новый текст к уже существующему, не удаляя текущий?
p.innerHTML += ‘ на сайте‘;
Мы видим новый оператор присваивания +=, который объединяет две строки. Это выражение можно записать и аналогичным образом.
Эти две записи равнозначны.
p.innerHTML = p.innerHTML + ‘на сайте’;
Берем, что имеется, прибавляем что-нибудь новое и записываем заново.
Вы наверное заметили, что новый текст, заключен в кавычки вместе с тегами , а браузер не просто его добавил, но и обработал (добавил курсивное начертание). В конструкции innerHTML, теги обрабатываются браузером.
p.innerHTML += ‘ на сайте‘;
Теги выводятся, но не обрабатываются.
p.innerText += ‘ на сайте‘;
Все действия, которые мы производили до этого, приводят к тому, что запись выводится между парными тегами. Однако было бы удобно иметь возможность более гибко выводить дополнительную информацию по отношению к элементу. Такой способ есть и выглядит следующим образом.
Это свойство позволяет выводить на экран информацию в разные места по отношению к текущему элементу. Оно имеет два параметра:
- первый параметр – где вывести информацию
- второй параметр – это что вывести
Свойство insertAdjacentHTML, позволяет выводить любое содержание в четырех позициях, как дополнение к текущему содержанию.
- beforeBegin — перед открывающим тегом
- afterBegin — после открывающего тега
- beforeEnd – перед закрывающим тегом
- afterEnd – после закрывающим тегом
Осталось рассмотреть ещё одно свойство – outerHTML. В чем между ними разница? innerHTML, заменяет содержимое тега, но сам тег оставляет прежним. outerHTML заменяет содержимое вместе с тегом.
Присвоим параграфу «Замена» всего вместе с div. Обратите внимание, что парный тег div снаружи заключен в одинарные кавычки, но внутри тега используются двойные кавычки. Это делается для того, чтобы не происходило разрыва строки. Кавычки снаружи и внутри должны быть разные.
p.outerHTML = ‘
‘;
После нажатия на кнопку, текущие теги параграфа вместе с текстом, заменяются на div.
В инспекторе кода, мы увидим уже новый код, на месте старого.
Создано 02.01.2019 10:36:17
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Метод document.write
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/modifying-document.
Метод document.write – один из наиболее древних методов добавления текста к документу.
У него есть существенные ограничения, поэтому он используется редко, но по своей сути он совершенно уникален и иногда, хоть и редко, может быть полезен.
Как работает document.write
Метод document.write(str) работает только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.
HTML-документ ниже будет содержать 1 2 3 .
1 3
Нет никаких ограничений на содержимое document.write .
Строка просто пишется в HTML-документ без проверки структуры тегов, как будто она всегда там была.
Текст внутри TD.
Также существует метод document.writeln(str) – не менее древний, который добавляет после str символ перевода строки «\n» .
Только до конца загрузки
Во время загрузки браузер читает документ и тут же строит из него DOM, по мере получения информации достраивая новые и новые узлы, и тут же отображая их. Этот процесс идёт непрерывным потоком. Вы наверняка видели это, когда заходили на сайты в качестве посетителя – браузер зачастую отображает неполный документ, добавляя его новыми узлами по мере их получения.
Методы document.write и document.writeln пишут напрямую в текст документа, до того как браузер построит из него DOM, поэтому они могут записать в документ все, что угодно, любые стили и незакрытые теги.
Браузер учтёт их при построении DOM, точно так же, как учитывает очередную порцию HTML-текста.
Технически, вызвать document.write можно в любое время, однако, когда HTML загрузился, и браузер полностью построил DOM, документ становится «закрытым». Попытка дописать что-то в закрытый документ открывает его заново. При этом все текущее содержимое удаляется.
Текущая страница, скорее всего, уже загрузилась, поэтому если вы нажмёте на эту кнопку – её содержимое удалится:
Из-за этой особенности document.write для загруженных документов не используют.
XHTML и document.write
В некоторых современных браузерах при получении страницы с заголовком Content-Type: text/xml или Content-Type: text/xhtml+xml включается «XML-режим» чтения документа. Метод document.write при этом не работает.
Это лишь одна из причин, по которой XML-режим обычно не используют.
Преимущества перед innerHTML
Метод document.write – динозавр, он существовал десятки миллионов лет назад. С тех пор, как появился и стал стандартным метод innerHTML , нужда в нём возникает редко, но некоторые преимущества всё же есть.
- Метод document.write работает быстрее, фактически это самый быстрый способ добавить на страницу текст, сгенерированный скриптом. Это естественно, ведь он не модифицирует существующий DOM, а пишет в текст страницы до его генерации.
- Метод document.write вставляет любой текст на страницу «как есть», в то время как innerHTML может вписать лишь валидный HTML (при попытке подсунуть невалидный – браузер скорректирует его).
Эти преимущества являются скорее средством оптимизации, которое нужно использовать именно там, где подобная оптимизация нужна или уместна.
Однако, document.write по своей природе уникален: он добавляет текст «в текущее место документа», без всяких хитроумных DOM. Поэтому он бывает просто-напросто удобен, из-за чего его нередко используют не по назначению.
Антипример: реклама
Например, document.write используют для вставки рекламных скриптов и различных счётчиков, когда URL скрипта необходимо генерировать динамически, добавляя в него параметры из JavaScript, например:
На заметку:
Закрывающий тег в строке разделён, чтобы браузер не увидел и не посчитал его концом скрипта.
Также используют запись:
document.write('');
Здесь вместо : обратный слеш \ обычно используется для вставки спецсимволов типа \n , а если такого спецсимвола нет, в данном случае \/ не является спецсимволом, то будет проигнорирован. Так что получается такой альтернативный способ безопасно вставить строку .
Сервер, получив запрос с такими параметрами, обрабатывает его и, учитывая переданную информацию, генерирует текст скрипта, в котором обычно есть какой-то другой document.write , рисующий на этом месте баннер.
Проблема здесь в том, что загрузка такого скрипта блокирует отрисовку всей страницы.
То есть, дело даже не в самом document.write , а в том, что в страницу вставляется сторонний скрипт, а браузер устроен так, что пока он его не загрузит и не выполнит – он не будет дальше строить DOM и показывать документ.
Представим на минуту, что сервер ads.com , с которого грузится скрипт, работает медленно или вообще завис – зависнет и наша страница.
В современных браузерах у скриптов есть атрибуты async и defer , которые разрешают браузеру продолжать обработку страницы, но применить их здесь нельзя, так как рекламный скрипт захочет вызвать document.write именно на этом месте, и браузер не должен двигаться вперёд по документу.
Альтернатива – использовать другие техники вставки рекламы и счётчиков. Примеры вы можете увидеть в коде Google Analytics, Яндекс.Метрики и других.
Если это невозможно – применяют всякие хитрые оптимизации, например заменяют метод document.write своей функцией, и она уже разбирается со скриптами и баннерами.
Итого
Метод document.write (или writeln ) пишет текст прямо в HTML, как будто он там всегда был.
- Этот метод редко используется, так как работает только из скриптов, выполняемых в процессе загрузки страницы. Запуск после загрузки приведёт к очистке документа.
- Метод document.write очень быстр. В отличие от установки innerHTML и DOM-методов, он не изменяет существующий документ, а работает на стадии текста, до того как DOM-структура сформирована.
- Иногда document.write используют для добавления скриптов с динамическим URL. Рекомендуется избегать этого, так как браузер остановится на месте добавления скрипта и будет ждать его загрузки. Если скрипт будет тормозить, то и страница – тоже. Поэтому желательно подключать внешние скрипты, используя вставку скрипта через DOM или async/defer . Современные системы рекламы и статистики так и делают.