<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как вывести текст в JavaScript

Как вывести текст в JavaScript

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

Создадим простую HTML структуру, подходящую для обоих вариантов. При клике по кнопке, текст в параграфе должен замениться на другой. На кнопку мы повесили событие onclick с названием функции text_out(). Дальше нам предстоит эту функцию запрограммировать в JavaScript.

<div id="text_out">
<p id="text_change">Заменить текст</p>
<hr>
<button onclick="text_out()" class="btn btn-danger">Заменить текст</button>
</div>

Как вывести текст в JavaScript.

Заменить текст в JavaScript

Пишем название функции, совпадающее с onclick событием на кнопке, внутри фигурных скобочках, будем писать код функции.

function text_out(){ }

Для получения параграфа для работы:

Объявим переменную:

var p;

Присвоим переменной p следующий объект. Мы получили и положили в переменную p, весь параграф с идентификатором text_change.

p = document.getElementById('text_change');

Для того, чтобы вывести что-нибудь (числа, строки) внутри любого парного тега, надо использовать конструкцию innerHTML. Получим целый параграф и вместо "Заменить текст", выведем внутри p новую запись:

p.innerHTML = 'Текст заменили';

После клика по кнопке, замена произошла успешно.

Как вывести текст в JavaScript.

Нам интересно, а что произойдет с исходным кодом, после манипуляций с заменой? Заглянем в инспектор кода для разработчика и увидим, что в HTML коде, тоже произошли изменения.

Что будет, если кавычки оставить пустыми?

p.innerHTML = '';

Тогда параграф очистится, текущая запись удалится, а новая не вставится.

Добавить текст в JavaScript

Как добавить новый текст к уже существующему, не удаляя текущий?

p.innerHTML += ' <i>на сайте</i>';

Мы видим новый оператор присваивания +=, который объединяет две строки. Это выражение можно записать и аналогичным образом.

Эти две записи равнозначны.

p.innerHTML = p.innerHTML + 'на сайте';

Берем, что имеется, прибавляем что-нибудь новое и записываем заново.

 Как вывести текст в JavaScript.

Вы наверное заметили, что новый текст, заключен в кавычки вместе с тегами <i>, а браузер не просто его добавил, но и обработал (добавил курсивное начертание). В конструкции innerHTML, теги обрабатываются браузером.

p.innerHTML += ' <i>на сайте</i>';

Теги выводятся, но не обрабатываются.

p.innerText += ' <b>на сайте</b>';

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

p.insertAdjacentHTML('beforeBegin','на сайте');

Это свойство позволяет выводить на экран информацию в разные места по отношению к текущему элементу. Оно имеет два параметра:

  • первый параметр – где вывести информацию
  • второй параметр – это что вывести

Свойство insertAdjacentHTML, позволяет выводить любое содержание в четырех позициях, как дополнение к текущему содержанию.

  • beforeBegin - перед открывающим тегом
  • afterBegin - после открывающего тега
  • beforeEnd – перед закрывающим тегом
  • afterEnd – после закрывающим тегом

Осталось рассмотреть ещё одно свойство – outerHTML. В чем между ними разница? innerHTML, заменяет содержимое тега, но сам тег оставляет прежним. outerHTML заменяет содержимое вместе с тегом.

Присвоим параграфу "Замена" всего вместе с div. Обратите внимание, что парный тег div снаружи заключен в одинарные кавычки, но внутри тега используются двойные кавычки. Это делается для того, чтобы не происходило разрыва строки. Кавычки снаружи и внутри должны быть разные.

p.outerHTML = '<div id="text_change">Замена всего</div>';

После нажатия на кнопку, текущие теги параграфа вместе с текстом, заменяются на div.

Как вывести текст в JavaScript.

В инспекторе кода, мы увидим уже новый код, на месте старого.

<div id="text_change">Замена всего</div>

See the Pen Как вывести текст в JavaScript by porsake (@porsake) on CodePen.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.