Dhtml: DHTML — динамический язык разметки

DHTML

По мере развития индустрии создания Web-сайтов возникла потребность расширить возможности использовать мультимедиа как инструмента Web-дизайнера при создании Web-страниц.

Эту проблему решает динамический язык HTML (DHTML).

DHTML дает возможность создавать элементы Web-страниц (типа текста и графики) интерактивными и динамическими. При этом Web-страницы DHTML загружаются просто мгновенно.

Все последнии версии программного обеспечения Web-броузеров Microsoft и Netscape поддерживают язык DHTML.

Теперь в распоряжении Web-дизайнеров есть целая куча новых интерактивных эффектов, включая возможности организации текста и графики в виде презентаций типа телевизионных заставок.

Эффекты DHTML создаются с помощью трех технологий: HTML, каскадных таблиц стилей и сценариев.
Хотя все эти технологии существовали уже долгое время, сейчас они используются вместе и предоставляют дизайнерам возможности создания Web-страниц, которые выглядят и работают лучше, чем когда-либо прежде.

HTML служит основой для эффектов DHTML.

Каскадные таблицы стилей (CSS) предоставляют возможности точной установки графических элементов на Web-страницах (см. статью «Каскадные таблицы стилей»).

Кроме того, существуют эффекты изменения внешнего вида текста и графики на странице — называемые «фильтры». Фактические возможности фильтров определяются компонентами Web-броузера.

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

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

DHTML можно реализовывать с помощью двух языков сценариев: VBScript (Visual Basic Scripting ) и JavaScript. Visual Basic Scripting и является упрощенной версией языка программирования Microsoft Visual Basic. JavaScript — это версия языка программирования Java (от фирмы Sun Microsystems) для создания сценариев.

Совет

Хотя для создания DHTML можно использовать любой язык сценариев, JavaScript все же является наиболее многосторонним, так как сейчас он поддерживается броузерами и от Microsoft, и от Netscape. Кроме того, синтаксис JavaScript аналогичен синтаксису языков Java и C++, которые знакомы многим Web-разработчикам. Microsoft и Netscape поддерживают JavaScript, но они находятся на различных стадиях реализации.

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

Что такое DHTML? | KV.by

DHTML, он же Dynamic HTML — технология создания интерактивных HTML-страниц, реагирующих на действия пользователя.

Думаю, рассказывать, что такое HTML, читателям нашей газеты вряд ли стоит — многие наверняка сами могут рассказать об HTML гораздо больше, чем я.

Итак, что же скрывается за этой аббревиатурой, довольно-таки длинной, по сравнению с большинством тех, которые мы обсуждали уже в рубрике FAQ? DHTML означает «Dynamic HTML», то есть динамический HTML. В отличие от обычного HTML, который, по своей сути, статичен (имеется в виду HTML 4), DHTML позволяет динамически изменять страницу с учётом действий пользователя. Классические примеры использования DHTML — это различные выпадающие меню на сайтах, разворачивающиеся по клику пользователя панели и древовидные списки, и т. п. Технически Dynamic HTML реализуется с помощью JavaScript, CSS и DOM.

Не следует путать динамические HTML-страницы с динамическими сайтами. Первые являются динамическими только в контексте браузера, которым их открывает пользователь. Вторые являются динамическими и в контексте сервера, так как динамические сайты — это полноценные web-приложения, которые выполняются на сервере и могут работать с базами данных, осуществлять обработку пользовательских данных и делать прочие подобные вещи.

Не стоит путать также DHTML и AJAX, так как эти технологии имеют различную суть и природу, хотя и есть у них определённое внешнее сходство. AJAX позволяет не перезагружать открытую пользователем страницу целиком при внесении в неё каких-либо небольших изменений сервером, а ограничиться загрузкой только небольшого фрагмента, что достигается обменом XML-данными с сервером в «фоновом» режиме. AJAX-страницы для придания им большей интерактивности реализуются с использованием DHTML, однако DHTML-страницы совершенно не обязательно используют AJAX.

Использование DHTML связано с определёнными сложностями для разработчиков, которые создают web-страницы, так как необходимо отлаживать JavaScript и взаимодействие с DOM для каждого браузера в отдельности. Впрочем, сегодня существует немалое количество JavaScript-библиотек, которые существенно упрощают жизнь создателям DHTML-страниц.

Вадим СТАНКЕВИЧ,
[email protected]

Что такое DHTML. Плюсы и минусы технологии Dynamic HTML.

Для достижения перечисленных целей используются следующие методы:

1) динамическое изменение атрибутов и стилей элементов, составляющих HTML-документ.

2) динамическое извлечение данных из внешних источников и включение их в веб-страницу.

3) использование динамически загружаемых шрифтов.

4) поддержка визуальных и мультимедийных эффектов при отображении страниц.

5) механизмы сохранения информации на компьютере-клиенте между сессиями работы.

Все эти разнородные методы основаны на двух элементах. Первым из них является интеграция HTML-документа, каскадных стилей и сценариев клиента, основанная на объектной модели документа. Вторым, использование компонентного программирования, позволяющего нам встраивать однажды разработанные компоненты во вновь создаваемые документы.

Рассматривая более детально Dynamic HTML, можно выделить основные его компоненты:

CSS JavaScript DOM + (XHTML = HTML + XML) DHTML.

Рассмотрим плюсы и минусы технологии Dynamic HTML.

Плюсы:

1) Поддерживается всеми браузерами.

2) Страницы отображаются практически одинаково во всех браузерах.

3) Изменение содержания Web-страницы во время работы, после её загрузки.

4) Сравнительно небольшой размер файлов по сравнению с Flash и Java.

5) Не требуется модулей расширения (plugin).

6) DHTML базируется на популярных технологиях HTML и JavaScript.

7) Переход на DHTML не требует изучения принципиально новых технологий.

8) Более высокая конкурентоспособност узла в сравнении со статическим.

9) Упрощённое сопровождение.

10) Уменьшение трафика.

Минусы:

1) Страницы выглядят по разному в разных браузерах, но иногда и в одинаковых, работающих в разных операционных системах.

2) Сложность отладки исходных кодов.

3) Ошибки в браузерах.

Учитывая плюсы можно сказать, что DHTML очень удобен в web-программировании и является надёжной, перспективной, оправдывающей себя технологией, которая, способна конкурировать с Flash (на которой создаются мультимедийные сайты). Со стороны минусов у неё есть недочёты, но всё же они не помеха, как для любителей, так и профессионалов DHTML.

DHTML — Мегаэнциклопедия Кирилла и Мефодия — статья

Основная идея динамического HTML заключается в полном контроле языка сценариев над всеми без исключения элементами документа, параметрами их оформления и размещения (как подразумеваемыми в HTML, так и задаваемыми с помощью CSS) и даже над самим текстом страницы. Любой элемент HTML-документа сможет двигаться в произвольном направлении, изменять свое форматирование и переписываться как в ответ на действия пользователя, так и по собственной инициативе. Благодаря средствам компоновки данных, разработчики смогут создавать Web-приложения, которые выводят данные на экран в асинхронном режиме и манипулируют ими. Эти функции реализуются средствами стандартного HTML и языков сценариев. Язык сценариев имеет доступ ко элементам документа и способен отслеживать действия пользователя (перемещение мыши, нажатие клавиш). Язык сценариев JavaScript развиваясь, открывал доступ к большому количеству элементов страницы. Противопоставив языку Java технологию ActiveX, корпорация Microsoft не оставила без ответа и JavaScript; браузер Internet Explorer поддерживает два языка сценариев — JScript (аналог JavaScript) и VBScript (производная Visual Basic). Фирма Microsoft предложила объектную модель (DOM), которая обеспечивает средства контроля над элементами документа и их атрибутами: любому элементу документа соответствует объект, доступный из сценария, любой объект способен реагировать на минимум стандартных событий; имеется возможность изменять атрибуты элементов в любой момент времени, при этом браузер отслеживает взаимозависимость элементов; события могут «всплывать» (bubble) по иерархии элементов (например, если для изображения не предусмотрено никакой реакции на щелчок мыши, это событие будет передано выше по иерархии тому элементу, частью которого является данное изображение).

Придать динамику HTML-документу можно с помощью языка иерархических стилевых спецификаций (Cascading Style Sheets, CSS), который принимает на себя часть функций HTML и снимает часть его ограничений. Главная цель CSS — отделить структуру документа от его оформления и позволить автору страницы самому решать, как должен выглядеть тот или иной элемент содержания. CSS не только освобождает от «обязательного» форматирования тех или иных тегов, но и добавляет множество степеней свободы, например, возможность изменения расстояния между строками текста. Расширение языка CSS — подсистема абсолютного позиционирования (absolute positioning) элементов, которая позволяет располагать объект (фрагмент текста, изображение) в произвольной точке плоскости страницы, в том числе с наложением объектов друг на друга (и с указанием, какой должен лежать снизу, а какой — сверху). На стыке двух расширений HTML — языка стилей и языка сценариев — возник набор технологий, который называют «динамическим HTML».

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

Область применения DHTML не ограничивается системой Web. С помощью этого языка можно извлекать информацию из любой СУБД, совместимой с протоколом ODBC, и передавать ее по Интернету. Цель создания стандарта связи с базами данных ODBC — обеспечить доступ к данным из любого приложения, вне зависимости от того, какая СУБД используется для их хранения. Для этого в ODBC применяется программное обеспечение промежуточного уровня, которое носит название драйвера базы данных и служит для связи между приложением и СУБД. Драйвер базы данных преобразует передаваемые приложением запросы в команды, понятные системе управления базы данных. Прикладная программа и СУБД должны поддерживать протокол ODBC, чтобы приложение могло использовать команды ODBC, а СУБД — отвечать на них.

DHTML

Нечасто задаваемые вопросы

Изменение текста (и оформления) страницы после её открытия в браузере иногда называют DHTML – Dynamic HTML. Справочник по DHTML найти в сети почти невозможно. Гораздо чаще способы обработки HTML страниц в браузере ищут в справочниках JavaScript. Dynamic HTML – более правильное описание вопроса. Потому что JavaScript там совсем немного, и, теоретически, может использоваться любой другой язык. Совсем правильная постановка вопроса: где найти справочник по манипуляциям с DOM – Document Object Model? Такой справочник (достаточно полный, комплексный) нам известен только один – «Справочник веб-разработчика», его автор – Юрий Лукач. Есть, конечно, известные спецификации W3C, но не всегда по-русски и с массой лишней (для практического использования) информации.

Даже основной вопрос – в каком справочнике это искать (к чёрту подробности! в каком я городе?) – сформулировать оказалось не так просто. Дальше – ещё хуже. Вопрос, заданный по-человечески (например, «как удалить прямо на странице лишние буквы из добавляемого пользователем текста?»), надо перевести в «машинные коды» спецификации (или в понятия справочника – который, в сущности, является адаптированной спецификацией).

На это, пожалуй, уходит львиная доля времени начинающего (впрочем, и продолжающего тоже) веб-разработчика – на «перевод» вопросов с естественного языка на язык спецификаций. Попробуем пособирать эти вопросы и дать на них ответы в виде строчек HTML-кода.

Вопросы веб-разработки: DOM

1. Как удалить лишние буквы из поля HTML-формы?

Код элемента:

<input name="address" onkeyup="if (this.value.length>3) 
 this.value=this.value.substr(0,3)">

2. Как сделать, чтобы картинка всё время то появлялась, то исчезала (а лучше чтоб ещё и меняла размер), и чтобы текст выезжал слева и плавно двигался вправо?

Никак. Во всяком случае, не в этой жизни.

3. Для чего вообще надо изменять открытую HTML-страницу?

1. Чтобы улучшить восприятие страницы и сделать работу с ней более удобной.
   • Скрыть-отобразить часть текста.
     • Выпадающее меню.
     • Скрыть-показать примечания (сноски).
     • Свернуть-развернуть ряд произвольных элементов.
     • Поиск по списку (отбор элементов).
   • Изменить оформление при наведении мыши.
     • Изменение формы курсора.
     • Изменение цвета активных элементов.
     • Изменение цвета строк таблицы.
     • Всплывающие подсказки.
   • Проверка вводимых пользователем данных до отправки на сервер.
   • Хранение настроек пользователя.
   • Невидимая (ненавязчивая) защита от спама.
   • Визуальный (wysiwyg) редактор HTML.
   • Уменьшение объёма страницы и трафика (дублирование элементов).
   • Редактирование большой таблицы базы данных.
2. Для оптимизации взаимодействия веб-сервера с клиентом.
   • Фоновые http-запросы с помощью динамического элемента script (или так называемого Ajax’а).
   • Исправление ошибок или небрежностей серверных скриптов (движка).
3. Для создания инструментов разработки.
   • Отображение объектов DOM.
   • Отображение скорости работы браузера.
   • Редактирование большой таблицы базы данных.

4. Ну, и как скрыть-отобразить выпадающее меню?

1. Для начала нарисовать схему:

   div

   Пункт верхнего уровня

   div

   Скрытый пункт 1

   Скрытый пункт 2

   Скрытый пункт 3

   . ..

   menutop – главный контейнер столбца меню, в который помещается видимый всегда пункт верхнего уровня и список невидимых при открытии страницы подпунктов. Невидимые пункты помещаются в скрытый контейнер menuhid.

2. Потом сделать контейнер menuhid невидимым с помощью правила CSS div.menuhid {display:none;} (правило должно быть внутри элемента style или в файле *.css, связанном с данной страницей через элемент link rel=’stylesheet’).

3. Потом добавить элементу menutop атрибуты onmouseover=’menushow(this,1)’ и onmouseout=’menushow(this,0)’. Функция menushow будет запускаться при появлении мыши над элементом menutop и должна будет делать видимыми все пункты текущего столбца меню.

4. Ниже (или выше, или в отдельном файле js) меню нужно поместить внутри элемента script функцию menushow:

   <script type="text/javascript">
   function menushow(obj,show) {
    var ch=obj. childNodes
    var display=(show)?"block":"none"
    for (var d in ch) {
     if (1==ch[d].nodeType && "menuhid"==ch[d].className)
      ch[d].style.display=display
    }
    return true
   }
   </script>
   

5. div Пункт верхнего уровня

   Вот примерно так всё и будет выглядеть (кроме форматирования, конечно, которое вы должны сделать по-своему). Мелкие детали: элементу menuhid обязательно нужно добавить правило CSS position:absolute – чтобы он, становясь видимым, не отпихивал бы нижележащий текст, а появлялся поверх него. Элементу menutop нужно добавить правило CSS position:relative (а то menuhid при абсолютном позиционировании может вылезти чёрт знает где).

   Ну, ещё элементу menuhid надо добавить атрибут onclick=’menushow(this. parentNode,0)’, а то при уходе на другую страницу выпадающее меню останется висеть, и при возвращении, например, по стрелке Alt+Left, страница появится обратно с висящим меню, что, наверное, не очень правильно.

   Несколько главных пунктов меню можно поместить в соседние ячейки обычной таблицы (так сделано в примере).

5. Как и где отображать примечания в книге (статье)?

Благодаря HTML теперь нет необходимости собирать все примечания в кучу в конце книги (или внизу каждой страницы). Примечания можно (и нужно) отображать при щелчке по ссылке прямо в том месте, где стоит ссылка (сразу за основным текстом), а скрывать текст примечания тоже можно при щелчке прямо по этому тексту. Подробно всё это описано в Учебнике HTML. Не идеально описано, так как писалось давно, но решение рабочее.

Принципиальная схема отображения примечаний проще, чем отображение скрытых пунктов меню, так как там не нужны правила position:absolute, и текст примечания должен отображаться по щелчку (а если бы по событию onmouseover, как в меню, тогда пришлось бы вкладывать элемент примечания в элемент основного текста, а то при переходе мыши с основного текста к примечанию примечание будет исчезать).

6. Как ограничить размер нескольких элементов с большим количеством текста и по команде пользователя отображать элементы целиком?

Назначить многотекстовым элементам div, задать CSS правило для данного класса элементов div.bigtext {height:150px; overflow:scroll;} – и забы/ить. Пользователи при желании всегда могут увидеть весь текст элемента с помощью прокрутки.

Если предположить, что у пользователей могут возникнуть другие желания (например, видеть текст всех элементов без прокрутки внутри элемента), надо запрограммировать кнопку, которая будет менять отображение элементов bigtext:

<button>Показать элементы целиком</button>.

Функция, меняющая отображение больших элементов, должна быть примерно такой:

<script type="text/javascript">
function togglebigtext(obj) {
 var val=obj.firstChild.nodeValue
 if ("Показать элементы целиком"==val) {
 
  overflow="visible"
 }
 else {
 
  overflow="scroll"
  val="Свернуть большие абзацы"
 }
 var divs=document. getElementsByTagName("DIV")
 for (var i in divs) {
  div=divs[i]
  if (1==div.nodeType && "bigtext"==div.className) {
   div.style.height=height
   div.style.overflow=overflow
  }
 }
}
</script>

Проверьте, как это работает: Показать все элементы целиком. Можно вместо button использовать input type=»button», тогда проще будет менять его свойство value. А ещё лучше использовать input type=»checkbox».

7. Как вести поиск на странице с помощью JavaScript?

1. Можно как браузер: получить текст всей страницы (например, с помощью свойства body innerHTML) и затем с помощью метода replace заменить во всём тексте фрагменты искомого текста на фрагменты с выделением – что-то вроде <span>фрагмент</span>. Но зачем делать «как браузер», если это и так может делать (и быстрее) сам браузер?

2. Полезнее организовать поиск в стиле фильтрации – когда на странице остаются только те элементы текста, в которых есть искомый фрагмент. В этом случае возникает вопрос размера «элементов текста» – что это должно быть: слова, предложения, абзацы? К странице с неупорядоченным («естественным») текстом фильтрация практически неприменима (во всяком случае, с помощью JavaScript).

3. Применять поиск-фильтр имеет смысл лишь к более-менее упорядоченным спискам, и там он может быть очень эффективен. Списки есть на многих веб-сайтах: это списки городов, предприятий, товаров, разделов, людей… Пример работающей фильтрации списка рубрик есть, например, на странице irkutsk.ir2.ru/listrubr.htm.

   • Принципиальная схема: при вводе букв в окно поиска по событию onkeyup запускается функция pickup(obj) (файл listrubr.js). Функция просматривает весь список ссылок страницы, и, если в текст ссылки входит искомый фрагмент, ссылка делается видимой, если нет – невидимой (display:none).

7. Зачем изменять оформление элементов при наведении мыши?

Чтобы пользователь видел, что какие-то из этих элементов активные – при щелчке по ним будет что-то меняться. Самый главный из таких элементов – ссылка. Курсор меняет свою форму над ссылками сам (точнее, это делает браузер), ничего программировать специально не надо.

Поменять цвет ссылки, над которой мышь, можно без JavaScript, с помощью правила CSS: a:hover {color:red;}. Теоретически так можно поменять цвет любого элемента. Но практически – Интернет Эксплорер саботирует спцификации HTML-CSS, и в нём такое решение работает только для ссылок.

8. Как изменять оформление элементов при наведении мыши?

Используя события элемента onmouseover и onmouseout – при наступлении второго события надо возвращать элементу первоначальный цвет (или фон):

Пример onmouseover

Код элемента:

<div 
 
>
 Пример onmouseover
</div>

9. Как делать всплывающие подсказки?

Стандартное средство – атрибут title внутри элемента:

Пример title

Код элемента:

<div title="Достаточно длинный текст...">Пример title</div>

Браузеры отображают перенос строк в атрибуте title по-разному, но ещё хуже то, что они сами устанавливают время отображения title – и пользователь может просто не успеть прочитать, что там написано. Поэтому более надёжно, конечно, использовать атрибут onmouseover и отображать с помощью функции JavaScript заранее приготовленный элемент со всплывающей подсказкой какой угодно формы:

заранее приготовленный элемент со всплывающей подсказкой

Код элемента:

<div 
onmouseout="this.firstChild.style.display='none'"
style="position:relative;"><div 
style="display:none; position:absolute;">
 заранее приготовленный элемент со всплывающей подсказкой
 </div>
Пример всплывающей подсказки onmouseover</div>

Обратите особое внимание на фрагмент кода relative;»><div: между открывающим тэгом внешнего элемента и открывающим тэгом вложенной в него подсказки не должно быть ничего (ни пробела, ни разрыва строки – именно ничего!). Иначе приведённый код не будет работать, так как firstChild для внешнего элемента будет уже не заготовленная подсказка, а текст (textNode) – тот самый разрыв строки или пробел.

Ну, и при абсолютном позиционировании элемента внешний для него элемент (родительский) должен иметь позиционирование как минимум relative (то есть обязательно хоть какое-то особое, не static). Иначе позиционируемый элемент может унести неизвестно куда.

Проверку вводимых пользователем данных и некоторые другие вопросы применения DHTML мы рассмотрим в следующей статье.

© 2009, «Деловая неделя», Михаил Гутентог

SourceTec Software Co., LTD Sothink DHTML Menu

Описание товара

У нас вы можете купить лицензию на SourceTec Software Co., LTD Sothink DHTML Menu по выгодной цене.

Основные характеристики

Производитель

Sothink DHTML Menu – самый простой способ создания DHTML двумя кликами мыши. Не требуется знания программирования. Нет проблем с совместимостью браузеров. Программа работает на всех возможных браузерах.
Sothink DHTMLMenu создает DHTML меню с ясными кодами, не включающими скрытые ссылки.
Скрытые ссылки – чрезвычайно неприятный для пользователей факт, поскольку в этом случае меню включают неверную информацию и может возникнуть конфликт между кодами.

Полная интеграция.

• Создание JavaScript меню в кросс-браузерах.
• Интеграция с Dreamweaver, FrontPage, Golive и Sothink HTML Editor.
• Создание DHTML Drop Down меню из динамических баз данных, используя ASP, PHP, JSP, ColdFusion и другие коды сервера.

Работоспособность.

• Опция Search Engine Friendly Code Maker позволяет быстро найти любой контент.
• Google XML Sitemap создает специальный код и сохраняет в XML формате, поддерживаемом Google.
• Создание рамочных меню.
• Система «слежения» для отображения местонахождения пользователя на сайте.
• Доступность плавающего меню DHTML Navigation Menu.
• Демонстрация/скрытие веб-меню по желанию пользователя.
• Сохранение видимости меню поверх окна, включая форматы Flash, Selected box, IFRAME.

Мощный функционал:

• Библиотека образов позволяет выбирать графику прямо из программы.
• Несколько DHTML меню сосуществуют на одной странице.
• Реорганизация шаблонов по требованию пользователя.
• Оптимизация стилей.
• Поддержка UTF-8.
• Поддержка любых видов документов.
• Контент меню поддерживает HTML кодировки.

Быстрота.

• Пользователь может сразу же увидеть результат в режиме «предпросмотра».
• Возможность задавать длину и ширину каждого параметра меню в отдельности.

Пошаговое руководство.

• Включает «помощника», который показывает, как шаг за шагом переместить меню на веб-страницу.
• Возможность работать в любом любимом браузере.

В интернет-магазине SoftMagazin вы можете купить лицензию SourceTec Software Co., LTD Sothink DHTML Menu онлайн по выгодной цене.

Семестр 2. Создание динамических сайтов. DHTML и JavaScript (1 раз в неделю по 4 ак. часа)

Уровень сложности:

Длительность курса: 52 ак.ч.

График обучения: 52 академических часа

Аннотация

Ни один современный сайт не обходится в наше время без интерактивного взаимодействия с посетителями. Будь то проверка форм или использование карт или просмотр увеличенных фотографий – все это, и многое другое, реализуется с помощью клиентского JavaScript.

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

Научатся использовать встроенные объекты, реагировать на события элементов управления и действия пользователя. Создавать различные визуальные эффекты и интерактивные элементы управления, такие как меню, различные слайдшоу, презентации и т.д.

Получат знания о DHTML, более подробно изучат CSS, научатся делать отладку скриптов.

Программное обеспечение курса

• Операционная система MS Windows 7 (русская версия)
• Adobe Dreamweaver CS5 (английская версия)

Знания и умения, полученные в результате обучения

В ходе обучения слушатели изучат:

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

Расчёт стоимости с учётом возможных скидок представлен как справочная информация. Фактический размер скидки может несколько отличаться из-за округления значения суммы.

Курс ориентирован на школьников, знающих основы синтаксиса языка HTML в объеме програм-мы первого семестра данной специализации. Поступающие также должны уметь создавать сайты с применением CSS, используя и табличную, и блочную верстки.

Занятие 1

• JavaScript
  • История
  • Семантика и синтаксис
  • Область применения
  • Версии
  • Библиотеки
  • Отладка
  • Поддержка браузерами
• Спецификация языка
  • Типы данных и значения
  • Переменные
  • Выражения и операторы
  • Условные инструкции
  • Циклы
• Самостоятельная работа №1
• Домашняя работа №1

Занятие 2

• Тест №1 по темам предыдущего занятия
• Спецификация языка (продолжение)
• Ввод-вывод информации
  • alert
  • confirm
  • prompt
  • document.write и document.writeln
• Объекты JavaScript
  • Создание объектов
  • Установка и получение свойств
  • Перечисление свойств
  • Неопределенные свойства
  • Number
  • Array
• Самостоятельная работа №2
• Домашняя работа №2

Занятие 3

• Тест №2 по темам предыдущего занятия
• Объекты JavaScript (продолжение)
• Самостоятельная работа №3
• Домашняя работа №3

Занятие 4

• Тест №3 по темам предыдущего занятия
• Объекты JavaScript (продолжение)
• Самостоятельная работа №4
• Домашняя работа №4

Занятие 5

• Тест №4 по темам предыдущего занятия
• События JavaScript
  • Доступ к элементам документа
  • Ключевое слово «this»
  • Доступ к содержимому элементов документа
  • События и обработчики
• Самостоятельная работа №5
• Домашняя работа №5

Занятие 6

• Тест №5 по темам предыдущего занятия
• События JavaScript (продолжение)
  • События и обработчики (продолжение)
• Самостоятельная работа №6
• Домашняя работа №6

Занятие 7

Занятие 8

• Тест №6 по темам предыдущего занятия
• Объекты браузера
  • Иерархия объектов
  • Window
  • Document
• Самостоятельная работа №7
• Домашняя работа №7

Занятие 9

• Тест №7 по темам предыдущего занятия
• Объекты браузера (продолжение)
  • Location
  • History
  • Navigator
  • Screen
• Самостоятельная работа №8
• Домашняя работа №8

Занятие 10

• Тест №8 по темам предыдущего занятия
• Объекты браузера (продолжение)
• Самостоятельная работа №9
• Домашняя работа №9

Занятие 11

• Тест №9 по темам предыдущего занятия
• Объекты браузера (продолжение)
• Практикум
• Движение по кругу
• Контекстное меню
• GMT-калькулятор
• Калькулятор
• Самостоятельная работа №10
• Домашняя работа №10

Занятие 12

• Тест №10 по темам предыдущего занятия
• Пользовательские объекты
  • Конструкторы
  • Методы
  • Прототипы и наследование
  • Объекты как ассоциативные массивы
  • Свойства и методы класса Object
• Самостоятельная работа №11
• Домашняя работа №11

Занятие 13

DHTML | Введение — GeeksforGeeks

DHTML означает динамический HTML, он полностью отличается от HTML. Браузеры, поддерживающие динамический HTML, — это некоторые из версий Netscape Navigator и Internet Explorer версии выше 4.0. DHTML основан на свойствах HTML, javascript, CSS и DOM (объектная модель документа, которая используется для доступа к отдельным элементам документа), что помогает создавать динамический контент. Это комбинация HTML, CSS, JS и DOM.DHTML использует динамическую объектную модель для изменения настроек, а также свойств и методов. Он также использует сценарии и является частью более ранних тенденций в области вычислений.

DHTML позволяет различным языкам сценариев на веб-странице изменять свои переменные, которые улучшают эффекты, внешний вид и многие другие функции после того, как вся страница полностью загружена или находится в процессе просмотра, или же статические HTML-страницы на том же самом. Но на самом деле следует отметить, что в качестве динамического в DHTML существует только включение различных технологий, таких как CSS, HTML, JS, DOM, и различных наборов статических языков, которые делают его таким же динамичным.

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

HTML: HTML означает язык гипертекстовой разметки и является языком разметки на стороне клиента. Используется для построения блока веб-страниц.
Javascript: Это язык сценариев на стороне клиента.Javascript поддерживается большинством браузеров, также есть сбор файлов cookie для определения потребностей пользователя.
CSS: Сокращение CSS — каскадная таблица стилей. Это помогает в стилизации веб-страниц и помогает в дизайне страниц. Правила CSS для DHTML будут изменены на разных уровнях с использованием JS с обработчиками событий, что добавляет значительный динамизм с очень небольшим количеством кода.
DOM: Она известна как объектная модель документа, которая действует как самое слабое звено в ней.Единственный недостаток в том, что большинство браузеров не поддерживает DOM. Это способ манипулировать статическим содержимым.

Примечание: Часто DHTML путают с таким языком, как HTML, но это не так. Следует иметь в виду, что это функция улучшения интерфейса или браузеров, которая позволяет получить доступ к объектной модели через язык Javascript и, следовательно, сделать веб-страницу более интерактивной.

document.getElementById ('основной').  стиль  .color = '# ff0000';
 

document.getElementById ('основной'). style.  borderLeft  = '2 пикселя красным пунктиром';
 

document.getElementById ('nav'). style.left = 300;
 

document.layers ['main']. left = 200;