<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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):

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