Динамический HTML: различия между версиями
Нет описания правки |
(→Читать) |
||
(не показано 14 промежуточных версий этого же участника) | |||
Строка 27: | Строка 27: | ||
Обычно веб-страница с помощью DHTML настраивается следующим образом: | Обычно веб-страница с помощью DHTML настраивается следующим образом: | ||
<! | <source lang="html5"> | ||
<html | <!DOCTYPE html> | ||
< | <html lang="en"> | ||
< | <head> | ||
< | <meta charset="utf-8"> | ||
</ | <title>DHTML example</title> | ||
< | </head> | ||
< | <body> | ||
<div id="navigation"></div> | |||
< | <script> | ||
function init() { | |||
var myObj = document.getElementById("navigation"); | |||
//... | // ... manipulate myObj | ||
} | } | ||
window.onload = init; | |||
< / script | </script> | ||
-- | <!-- | ||
Often the code is stored in an external file; this is done | |||
by linking the file that contains the JavaScript. | |||
This is helpful when several pages use the same script: | |||
-- | --> | ||
< script | <script src="myjavascript.js"></script> | ||
< / body>> | </body> | ||
< / | </html> | ||
</source> | |||
==Пример: отображение дополнительного блока текста== | ==Пример: отображение дополнительного блока текста== | ||
Следующий код иллюстрирует часто используемые функции. Дополнительная часть веб-страницы будет отображаться только в том случае, если пользователь запросит ее. | Следующий код иллюстрирует часто используемые функции. Дополнительная часть веб-страницы будет отображаться только в том случае, если пользователь запросит ее. | ||
< | |||
<source lang="html5"> | |||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 70: | Строка 73: | ||
<body> | <body> | ||
<h1>Using a DOM function</h1> | <h1>Using a DOM function</h1> | ||
<h2><a id="showhide" href="#">Show paragraph</a></h2> | |||
<p id="toggleMe">This is the paragraph that is only displayed on request. | <p id="toggleMe">This is the paragraph that is only displayed on request. | ||
Строка 81: | Строка 83: | ||
var d = document.getElementById('showhide'), | var d = document.getElementById('showhide'), | ||
e = document.getElementById(id); | e = document.getElementById(id); | ||
if (e.style.display === 'none' || e. | if (e.style.display === 'none' || e.style.display === '') { | ||
e . | e.style.display = 'block'; | ||
d .innerHTML | d.innerHTML = 'Hide paragraph'; | ||
} | } else { | ||
e . | e.style.display = 'none'; | ||
d .innerHTML | d.innerHTML = 'Show paragraph'; | ||
} | } | ||
} | } | ||
document.getElementById('showhide').addEventListener('click', function (e) { | |||
e .preventDefault (); | e.preventDefault(); | ||
changeDisplayState ( 'toggleMe'); | changeDisplayState('toggleMe'); | ||
}); | }); | ||
< / script | </script> | ||
< / body | </body> | ||
< / html> | </html> | ||
</ | </source> | ||
==Объектная модель документа== | ==Объектная модель документа== | ||
Основная статья: | Основная статья: [[Объектная модель документа]] | ||
DHTML-это не технология сама по себе; скорее, это продукт трех связанных и взаимодополняющих технологий: HTML, каскадные таблицы стилей (CSS) и JavaScript . Чтобы разрешить скриптам и компонентам доступ к функциям HTML и CSS, содержимое документа представляется в виде объектов в программной модели, известной как объектная модель документа (DOM). | DHTML-это не технология сама по себе; скорее, это продукт трех связанных и взаимодополняющих технологий: HTML, каскадные таблицы стилей (CSS) и JavaScript . Чтобы разрешить скриптам и компонентам доступ к функциям HTML и CSS, содержимое документа представляется в виде объектов в программной модели, известной как объектная модель документа (DOM). | ||
Строка 105: | Строка 108: | ||
DOM также предоставляет доступ к пользовательским действиям, таким как нажатие клавиши и щелчок мыши. Эти и другие события можно перехватывать и обрабатывать, создавая функции и процедуры обработчика событий. Обработчик событий получает управление каждый раз, когда происходит данное событие, и может выполнять любое соответствующее действие, включая использование DOM для изменения документа. | DOM также предоставляет доступ к пользовательским действиям, таким как нажатие клавиши и щелчок мыши. Эти и другие события можно перехватывать и обрабатывать, создавая функции и процедуры обработчика событий. Обработчик событий получает управление каждый раз, когда происходит данное событие, и может выполнять любое соответствующее действие, включая использование DOM для изменения документа. | ||
==Динамические стили== | ==Динамические стили== | ||
Строка 113: | Строка 117: | ||
Встроенные стили-это назначения стилей CSS, которые были применены к элементу с помощью атрибута style. Вы можете изучить и задать эти стили, извлекая объект стиля для отдельного элемента. Например, чтобы выделить текст в заголовке при наведении на него указателя мыши, можно использовать объект style для увеличения шрифта и изменения его цвета, как показано в следующем простом примере. | Встроенные стили-это назначения стилей CSS, которые были применены к элементу с помощью атрибута style. Вы можете изучить и задать эти стили, извлекая объект стиля для отдельного элемента. Например, чтобы выделить текст в заголовке при наведении на него указателя мыши, можно использовать объект style для увеличения шрифта и изменения его цвета, как показано в следующем простом примере. | ||
<!DOCTYPE html> | <source lang="html5"> | ||
<html lang="en"> | <!DOCTYPE html> | ||
<html lang="en"> | |||
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
Строка 142: | Строка 147: | ||
} | } | ||
document.getElementById("clickableLink").addEventListener (" | document.getElementById("clickableLink").addEventListener("click", function (e) { | ||
e .preventDefault (); | e.preventDefault(); | ||
showMe (); | showMe(); | ||
}); | }); | ||
< / script | </script> | ||
< / body>> | </body> | ||
< / | </html> | ||
</source> | |||
==См. также== | ==См. также== | ||
Строка 155: | Строка 161: | ||
* [[Динамические Каскадные Таблицы Стилей]] | * [[Динамические Каскадные Таблицы Стилей]] | ||
* [[DHTMLEdit]] | * [[DHTMLEdit]] | ||
==Читать== | |||
[https://javascript.fandom.com/ /javascript.fandom.com/] | |||
* [http://wiki.jmol.org/index.php/ /wiki.jmol.org/index.php/] | |||
* [https://docs.joomla.org/ /docs.joomla.org/] | |||
==Пруф== | |||
[https://www.quirksmode.org/ .quirksmode.org/] | |||
* [https://www.yourhtmlsource.com/javascript/dhtmlexplained.html .yourhtmlsource.com/javascript/dhtmlexplained.html] | |||
* [https://msdn.microsoft.com/en-us/library/ms533050.aspx /msdn.microsoft.com/en-us/library/ms533050.aspx] | |||
* [https://codepen.io/ge1doot/# /codepen.io/ge1doot/#] | |||
[[Категория:Сайт]] | [[Категория:Сайт]] |
Текущая версия от 21:50, 3 мая 2022
Динамический HTMLили DHTML будет, это обобщающий термин для семейства технологий, используемых вместе, чтобы создать интерактивные и анимированные веб-сайты[1] , используя сочетание статичного языка разметки (такие как HTML-код), а на стороне клиента скриптовый язык (например, на JavaScript), презентация определение языка (как в CSS), а объектной модели документов (дом).[2] применение DHTML было введено Microsoft с выпуском Internet Explorer 4 в 1997 году.
DHTML позволяет скриптовым языкам изменять переменные на языке определения веб-страницы, что, в свою очередь, влияет на внешний вид и функцию "статического" содержимого HTML-страницы после полной загрузки страницы и во время просмотра. Таким образом, динамическая характеристика DHTML-это то, как он функционирует во время просмотра страницы, а не в его способности генерировать уникальную страницу при каждой загрузке страницы.
Напротив, динамическая веб-страница-это более широкое понятие, охватывающее любую веб-страницу, созданную по-разному для каждого пользователя, вхождения загрузки или определенных значений переменных. Это включает страницы, созданные клиентскими скриптами, и страницы, созданные серверными скриптами (например, PHP, Python, JSP или ASP.NET ) где веб-сервер генерирует контент перед отправкой клиенту.
DHTML отличается от Ajax тем, что страница DHTML по-прежнему запрашивает/перезагружает. С DHTML не может быть никакого взаимодействия между клиентом и сервером после загрузки страницы; вся обработка происходит в JavaScript на стороне клиента. Напротив, страница Ajax использует функции DHTML для инициирования запроса (или "подзапроса") к серверу для выполнения дополнительных действий. Например, если на странице несколько вкладок, чистый подход DHTML будет загружать содержимое всех вкладок, а затем динамически отображать только тот, который активен, в то время как AJAX может загружать каждую вкладку только тогда, когда это действительно необходимо.
Использует[править]
DHTML позволяет авторам добавлять на свои страницы эффекты, которые в противном случае трудно достичь, изменяя объектную модель документа (DOM) и стиль страницы. Сочетание HTML, CSS и JavaScript предлагает способы:
- Анимация текста и изображений в документе.
- Встроить тикер или другой динамический дисплей, который автоматически обновляет его содержимое с последними новостями, котировками акций или другими данными.
- Используйте форму для записи пользовательского ввода, а затем обработки, проверки и ответа на эти данные без необходимости отправлять данные обратно на сервер.
- Включите кнопки опрокидывания или выпадающие меню.
Менее распространенное использование-создание браузерных экшенов. Хотя много игр были созданы, используя DHTML в течение конца 1990-х и начала 2000-х, различия между браузерами сделали это трудным: много методов должны были быть реализованы в коде, чтобы позволить играм работать на многократных платформах. В последнее время браузеры стали приближаться к веб-стандартам , что сделало дизайн игр DHTML более жизнеспособным. Эти игры можно играть на всех основных браузерах, и они также могут быть портированы на Plasma для KDE, виджеты для macOS и гаджеты для Windows Vista, которые основаны на коде DHTML.
Термин "DHTML" вышел из употребления в последние годы, поскольку он был связан с практикой и соглашениями, которые, как правило, не работают хорошо между различными веб-браузерами. DHTML теперь можно назвать ненавязчивым кодированием JavaScript (DOM Scripting), чтобы сделать акцент на согласованных лучших практиках, позволяя аналогичные эффекты доступным, совместимым со стандартами способом .
Поддержка DHTML с широким доступом к DOM была представлена в Internet Explorer 4.0 . Хотя существовала базовая динамическая система с Netscape Navigator 4.0, не все HTML-элементы были представлены в DOM. Когда методы DHTML-стиля стали широко распространенными, различные степени поддержки среди веб-браузеров для используемых технологий затруднили их разработку и отладку . Разработка стала проще, когда Internet Explorer 5.0+, Mozilla Firefox 2.0+ и Opera 7.0+ приняли общий DOM, унаследованный от ECMAScript .
Совсем недавно библиотеки JavaScript, такие как jQuery, абстрагировали многие из повседневных трудностей в кросс-браузерных манипуляциях с DOM.
Структура веб страницы[править]
См. также: события DOM
Обычно веб-страница с помощью DHTML настраивается следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DHTML example</title>
</head>
<body>
<div id="navigation"></div>
<script>
function init() {
var myObj = document.getElementById("navigation");
// ... manipulate myObj
}
window.onload = init;
</script>
<!--
Often the code is stored in an external file; this is done
by linking the file that contains the JavaScript.
This is helpful when several pages use the same script:
-->
<script src="myjavascript.js"></script>
</body>
</html>
Пример: отображение дополнительного блока текста[править]
Следующий код иллюстрирует часто используемые функции. Дополнительная часть веб-страницы будет отображаться только в том случае, если пользователь запросит ее.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using a DOM function</title>
<style>
a { background-color: #eee; }
a:hover { background: #ff0; }
#toggleMe { background: #cfc; display: none; margin: 30px 0; padding: 1em; }
</style>
</head>
<body>
<h1>Using a DOM function</h1>
<h2><a id="showhide" href="#">Show paragraph</a></h2>
<p id="toggleMe">This is the paragraph that is only displayed on request.
<p>The general flow of the document continues.
<script>
function changeDisplayState(id) {
var d = document.getElementById('showhide'),
e = document.getElementById(id);
if (e.style.display === 'none' || e.style.display === '') {
e.style.display = 'block';
d.innerHTML = 'Hide paragraph';
} else {
e.style.display = 'none';
d.innerHTML = 'Show paragraph';
}
}
document.getElementById('showhide').addEventListener('click', function (e) {
e.preventDefault();
changeDisplayState('toggleMe');
});
</script>
</body>
</html>
Объектная модель документа[править]
Основная статья: Объектная модель документа
DHTML-это не технология сама по себе; скорее, это продукт трех связанных и взаимодополняющих технологий: HTML, каскадные таблицы стилей (CSS) и JavaScript . Чтобы разрешить скриптам и компонентам доступ к функциям HTML и CSS, содержимое документа представляется в виде объектов в программной модели, известной как объектная модель документа (DOM).
DOM API является основой DHTML, обеспечивая структурированный интерфейс, который позволяет доступ и манипуляции практически ничего в документе. Элементы HTML в документе доступны как иерархическое дерево отдельных объектов, то есть вы можете исследовать и изменять элемент и его атрибуты, читая и устанавливая свойства и вызывая методы. Текст между элементами также доступен через свойства и методы DOM.
DOM также предоставляет доступ к пользовательским действиям, таким как нажатие клавиши и щелчок мыши. Эти и другие события можно перехватывать и обрабатывать, создавая функции и процедуры обработчика событий. Обработчик событий получает управление каждый раз, когда происходит данное событие, и может выполнять любое соответствующее действие, включая использование DOM для изменения документа.
Динамические стили[править]
Динамические стили являются ключевой особенностью DHTML. С помощью CSS можно быстро изменить внешний вид и форматирование элементов в документе без добавления или удаления элементов. Это помогает сохранить ваши документы маленькими и сценарии, которые управляют документом быстро.
Объектная модель предоставляет программный доступ к стилям. Это означает, что вы можете изменять встроенные стили для отдельных элементов и правила стиля с помощью простого программирования JavaScript.
Встроенные стили-это назначения стилей CSS, которые были применены к элементу с помощью атрибута style. Вы можете изучить и задать эти стили, извлекая объект стиля для отдельного элемента. Например, чтобы выделить текст в заголовке при наведении на него указателя мыши, можно использовать объект style для увеличения шрифта и изменения его цвета, как показано в следующем простом примере.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dynamic Styles</title>
<style>
ul { display: none; }
</style>
</head>
<body>
<h1 id="firstHeader">Welcome to Dynamic HTML</h1>
<p><a id="clickableLink" href="#">Dynamic styles are a key feature of DHTML.</a></p>
<ul id="unorderedList">
<li>Change the color, size, and typeface of text</li>
<li>Show and hide text</li>
<li>And much, much more</li>
</ul>
<p>We've only just begun!</p>
<script>
function showMe() {
document.getElementById("firstHeader").style.color = "#990000";
document.getElementById("unorderedList").style.display = "block";
}
document.getElementById("clickableLink").addEventListener("click", function (e) {
e.preventDefault();
showMe();
});
</script>
</body>
</html>