Как выводить html с помощью JavaScript
С помощью JavaScript удобно делать "мини" движки для сайтов сделанных на html. Например, можно выводить через яваскрипт левый сайдбар, шапку и футер сайта, поскольку эти элементы часто изменяются. Ниже я расскажу о том, как это делается. Помимо этого способа, есть ещё один отличный способ вывода контента на сайте: вывод html с помощью ajax.
Для вывода html с помощью JavaScript нужно сделать:
1) Создать файл с расширением .js. Например, topjava.js.
2) Напишите в этом файле следующее:
document.write('Сюда можно писать html код'); document.write('<br/>'); document.write('Как не писать каждый раз документ райт?'); document.write('<br/>'); document.write('Очень просто'); document.write('Это первая строка'+ 'Это втора строка'+ 'Видите? Можно писать и так'); document.write('<br/>'); document.write('Стоит так же сказать, что вместо одинарной'+ ' ковычки можно использовать "'); document.write('<br/>'); document.write("Например так"); document.write('Если Вам надо написать одинарную ковычку, то'+ ' напишите её через слэш: \' - так '+ 'она будет воспринята как текст');
Если Вы будете писать текст без пробелов, то использование переносов '+ на следующие строки не обязательны. С текстом можно писать любой html код.
Примечание
Если Вам нужно подключить файлик JavaScript, то его можно подключить так:
document.write('<SCRIPT type="text/javascript" language="JavaScript" src="java.js"></SCRIPT>');
3) В месте где Вы хотите вывести текст из javascript напишите следующие:
<SCRIPT type="text/javascript" language="JavaScript" src="topjava.js"></SCRIPT>
Если ничего не выводится, то это означает, что у Вас ошибка в файле topjava.js. Скорее всего, где-то пропущена кавычка.
Таким образом, Вы можете написать несколько яваскриптов и выводить различные элементы сайта. Это очень удобно, когда сайт написан на html и на нем много страниц. Вы изменяете код всего лишь в одном файлике, а получается, что он изменяется на всем сайте.
Читайте также:
• Вывод html с помощью AJAX
• Добавление счетчика посещений на сайт
• Коды и названия html цветов для сайта
• Лишние элементы любого сайта
← Перейти в каталог html уроков и советов
|
