От переводчика

От Переводчика и составителя

« W3Schools Home Следующая Глава »

Среди многочисленных Online электронных учебников по Web-разработкам, размещенных в Интернете, особое место, по моему мнению, занимают Full Web Buildings Tutorials, опубликованные на сайте www.w3schools.com.

Эти учебники особенно хороши для начинающих Web-разработчиков ("чайников").

Основные достоинства этих Учебников:

  • Легко воспринимаемый, лаконичный контент
  • Каждый учебник содержит около 100 примеров, содержание которых обучаемый может редактировать и тотчас видеть результат
  • Обучение построено по принципу: учитесь на примерах
  • Учебники содержат тестирующие модули, позволяющие обучаемым производить самоконтроль знаний
  • Каждый учебник содержит Справочник, позволяющий получить полную информацию по изучаемой теме

Недостатки этих Учебников:

  • Весь их контент (содержание) на английском языке
  • Обучение возможно только в режиме Online
Переводчик и составитель этого учебника:
Джерихов Вадим Вадимович,
доцент кафедры Информатики и информационных систем
Санкт-Петербургской Государственной Лесотехнической академии им. С.М.Кирова.

Что сделано:

  • Основной контент учебника переведен с английского языка русский
  • Основной контент учебника скомпилирован в формате *.chm, с возможностью обучения в режиме Offline

Любые замечания по переводу будут с благодарностью приняты!

E-mail: vadvadd@mail.ru


DHTML Начало (HOME)

DHTML Учебник (Tutorial)

« W3Schools Home Следующая Глава »

DHTML

DHTML это НЕ язык.

DHTML это ТЕРМИН, обозначающий искусство создания динамических и интерактивных веб-страниц.

DHTML сочетает в себе HTML, JavaScript, HTML DOM и CSS.

Начнем изучение DHTML!

DHTML Пример

Щелкните, чтобы включить / выключить свет

Попробуйте сами »

DHTML Примеры

Учитесь на 100 примерах! Используя наш HTML редактор, Вы можете редактировать исходный код и, щелкнув по кнопке, увидеть результат.

  • DHTML Примеры
  • HTML DOM Примеры

HTML DOM Справочник

На W3Schools вы найдете полный справочник по всем, встроенным в JavaScript объектам, по всем объектам браузера и по всем HTML DOM объектам, вместе с их свойствами и методами.

JavaScript и HTML DOM Справочник


DHTML Введение (Introduction)

« Предыдущая Следующая Глава »

DHTML это искусство сочетания HTML, JavaScript, DOM и CSS.

Что вы должны уже знать

Прежде чем продолжить, вы должны иметь базовые знания о следующем:

  • HTML
  • CSS
  • JavaScript

Если вы хотите сначала изучать эти темы, найтите соответствующие учебники на нашей домашней странице. Home Page.

DHTML это НЕ язык

DHTML обозначается как Dynamic (динамический) HTML.

DHTML не является языком или Web стандартом.

Для большинства людей DHTML означает комбинацию HTML, JavaScript, CSS и DOM.

По определению World Wide Web Consortium (W3C):
"Динамический HTML это термин, используемый некоторыми разработчиками, для описания комбинации HTML, таблиц стилей и скриптов, делующей документы более оживленными."

HTML

Стандарт W3C HTML 4 имеет обширную поддержку динамического содержимого:

  • HTML поддерживает JavaScript
  • HTML поддерживает Document Object Model (DOM)
  • HTML поддерживает HTML События
  • HTML поддерживает Cascading Style Sheets (CSS)

DHTML использует эти поддержки для создания динамических и интерактивных Web-страниц.

JavaScript

JavaScript является самым популярным языком сценариев в Интернете и работает во всех основных браузерах.

DHTML использует JavaScript для проверкиl, доступа и управления HTML элементами.

Вы можете прочитать больше о JavaScript в следующей главе этого учебника.

HTML DOM

HTML DOM является W3C стандартом. Он описывает Document Object Model для HTML.

HTML DOM определяет стандартный способ для доступа и манипулирования HTML-документами.

DHTML использует DOM для доступа и манипулирования HTML- элементами.

Вы можете прочитать больше о HTML DOM в последней главе этого учебника.

HTML События

HTML события являются частью HTML DOM.

DHTML создает Web-страницы, которые реагируют на события (пользователя).

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

CSS

CSS определяет способ отображения HTML элементов.

DHTML использует JavaScript и HTML DOM, чтобы изменить стиль и позиционирование элементов HTML.

Вы можете узнать больше о CSS в последней главе этого учебника.


DHTML (JavaScript)

DHTML - JavaScript

JavaScript можно создать динамический контент HTML.

Дата: Wed Dec 16 10:28:10 2009

JavaScript Сам по себе

В JavaScript, инструкция: document.write(), используется для вывода на Web страницу.

Пример

В следующем примере JavaScript используется для отображения на странице текущей даты и времени :

Пример

<html>
<body>

<script type="text/javascript">
document.write(Date());
</script>

</body>
</html>

Попробуйте сами »

JavaScript и HTML DOM

JavaScript также может быть использован для изменения содержимого или атрибутов элементов HTML.

Чтобы изменить содержимое элемента HTML:

document.getElementById(id).innerHTML=new HTML

Чтобы изменить атрибут элемента HTML:

document.getElementById(id).attribute=new value

Вы узнаете больше о JavaScript и HTML DOM в следующей главе настоящего руководства.

JavaScript и HTML События

JavaScript также может быть выполнен, когда происходит событие, например, когда пользователь щелкает по элементу HTML.

Чтобы выполнить код, когда пользователь нажимает на элементе, используется следующий атрибут события:

onclick=JavaScript

Вы узнаете больше о JavaScript и HTML событиях в последней главе учебника .

JavaScript и CSS

JavaScript может также изменить стиль элементов HTML.

Чтобы изменить стиль элемента HTML:

document.getElementById(id).style.property=new style

Вы узнаете больше о JavaScript и CSS в последней главе этого учебника.


DHTML (HTML DOM)

DHTML - HTML DOM

Что такое HTML DOM?

HTML DOM это:

  • Document Object Model для HTML
  • Стандартный интерфейс программирования для HTML
  • Platform- and language-independent
  • W3C стандарт

HTML DOM определяет objects и properties всех HTML элементов, и methods (интерфейс)для доступа к ним.

Другими словами : HTML DOM является стандартом для доступа, измения, добавения или удаления элементов HTML.

Изменение HTML Элемента

В следующем примере изменяется содержание элемента h1:

Пример

<html>
<body>

<h1 id="header">Старый Заголовок</h1>

<script type="text/javascript">
document.getElementById("header").innerHTML="Новый Заголовок";
</script>

</body>
</html>

Попробуйте сами »

Пояснение примера:

  • Показанный выше HTML документ содержит элемент h1 с id="header"
  • Мы используем HTML DOM, чтобы получить элемента с id="header"
  • A JavaScript изменяет содержание (innerHTML) этого элемента

Изменение HTML Атрибута

В следующем примере изменяется src атрибут элемента img:

Пример

<html>
<body>

<img id="image" src="smiley.gif">

<script type="text/javascript">
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

Попробуйте сами »

Пояснение примера:

  • Показанный выше HTML документ содержит элемент img с id="image"
  • Мы используем HTML DOM, чтобы получить элемента с id="image"
  • JavaScript измененяет атрибут SRC элемента с "smiley.gif" на "landscape.jpg"

HTML DOM Учебник

Чтобы узнать больше о HTML DOM, ознакомьтесь с нашим Полный HTML DOM Учебник .


DHTML События (HTML Events)

DHTML - HTML События (Events)

« Предыдущая Следующая Глава »

HTML события могут вызвать действия в браузере.

HTML События

Каждый элемент на странице HTML имеет события, которые могут вызвать JavaScript.

Например, мы можем использовать событие OnClick элемента типа button, чтобы показать, что функция будет выполняться, когда пользователь щелкнет на кнопке. Мы определяем события в тегах HTML.

Примеры событий :

  • Щелчок мышью
  • Загрузка web страницы или изображения
  • Наведение курсора мыши на "горячий" участок Web страницы
  • Выбор поля input на HTML форме
  • Отправка формы HTML
  • Нажатие клавиши

В следующем примере, содержание элемента h1 будет меняться, когда пользователь щелкнет на нем:

Пример

<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Щелкните на этом тексте</h1>
</body>
</html>

Попробуйте сами »

Вы также можете добавить сценарий в раздел head, а затем вызвать функцию из обработчика события:

Example

<html>
<head>
<script type="text/javascript">
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Щелкните на этом тексте</h1>
</body>
</html>

Попробуйте сами »

Подробнее о HTML событиях

О всех HTML событиях, посмотрите на наш полный HTML DOM Event Object Reference.

Examples

Дополнительные примеры

onmousedown и onmouseup
Изменение изображения, когда пользователь удерживает нажатой кнопку мыши.

onload
Показ окна alert, когда закончена загрузка страницы.


DHTML (CSS)

DHTML - CSS

JavaScript и HTML DOM могут быть использованы, чтобы изменить стиль любого элемента HTML.

Изменение Стиля активного элемента HTML

Чтобы изменить стиль активного элемента HTML, используйте следующую инструкцию:

this.style.property=new style

Пример

<html>
<body>

<h1 onclick="this.style.color='red'">Щелкни меня!</h1>

</body>
</html>

Попробуйте сами »

Изменение стиля Конкретного элемента HTML

Чтобы изменить стиль конкретного элемента HTML, используйте следующую инструкцию:

document.getElementById(id).style.property=new style

Пример

<html>
<body>

<h1 id="h1" onclick="document.getElementById('h1').style.color='red'">Щелкни меня!</h1>

</body>
</html>

Попробуйте сами »

Подробнее об Объекте Style и CSS

О всех свойствах стиля, посмотрите наш полный HTML DOM Style Object Reference.

Чтобы узнать больше о CSS, пожалуйста, прочитайте наш Полный CSS Учебник .

Examples

Попробуйте сами - Примеры

События мыши
Изменение цвета элемента при перемещении курсора над ним.

Видимость
Как сделать элемент невидимым. Хотите, чтобы элемента бал показан или нет?


DHTML Краткие выводы (Summary)

DHTML Краткие выводы- Что дальше?

« Предыдущая Следующая Глава »

DHTML это сочетание HTML, JavaScript, DOM и CSS.

DHTML это термин

В этом Учебнике вы узнали, что DHTML это только термин, используемый для описания комбинаций HTML, JavaScript, DOM и CSS с целью создания более динамических веб-страниц.

Еще DHTML примеры

JavaScript

JavaScript это стандартный язык сценариев для Интернета.

Каждый веб-разработчик должен изучить JavaScript.

Посетите JavaScript Учебник , и наш полный JavaScript Справочник .

HTML DOM

HTML 4 поддерживает HTML Document Object Model (DOM).

HTML DOM является стандартным способом доступа к элементам HTML. Она работает во всех браузерах.

С HTML DOM, вы можете сделать интерактивные веб-страницы, которые будут работать во всех современных браузерах.

Если вы серьезно относитесь к веб-разработке, изучите наш HTML DOM Учебник , и наш полный HTML DOM Справочник .

Динамический CSS

Нет такой вещи, как динамический CSS.

Однако, с JavaScript и HTML DOM можно динамически изменять стиль любого элемента HTML.

Сценарии на стороне сервера

В этом Учебнике мы создали динамические веб-страницы с помощью сценариев на стороне клиента (в браузере).

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

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

В W3Schools вы можете изучать следующие Учебники по сценариям на стороне сервера:

PHP Учебник

ASP Учебник

.NET Учебник


DHTML Examples

DHTML Примеры (Examples)

« Предыдущая Следующая Глава »

CSS

Видимость (Visibility)
Изменение цвета фона (Change background color)

События (Events)

onload
onunload
onchange
onsubmit
onreset
onselect
onblur
onfocus
onkeydown
onkeyup
onkeydown vs onkeyup
onkeypress
onmouseover & onmouseout
onclick
ondblclick
onmousedown & onmouseup
onmousemove
Disable right-click

Текст (Text)

Доступ к элементу (Element access)
Изменение атрибута (Attribute change)
Доступ к внутренности HTML (innerHTML access)
Изменение внутренности HTML (Change innerHTML)
Изменение позиции ( Change position)
onmousemove
onload & onunload
Всплывающая подсказка (Tooltip)
Печатать сообщений на пишущей машинке (Typewrite message)
Увеличивающися текст (Bigger text)
Прокрутка текста (Scrolling text)
Мигающий заголовок (Blinking header)

Формы ввода

Одинаковые формы (Identical forms)
Одинаковые формы 2 (Identical forms 2)
Изменение цвета фона поля ввода (Change background color of an input field)
Изменение цвета текста в поле ввода (Change text color of an input field )
Вставка фонового изображения в поле ввода (Insert background image to an input field)
Выделить все флажки (Select all check-boxes)
Изменение цвета фона кнопки (Change background color of a button )
Изменение цвета текста кнопки (Change text color of a button )
Вставить фоновый рисунок на кнопку (Insert background image to a button)
Изменение цвета фона в раскрывающимся списке (Change background color of a drop-down list)
Изменение цвета текста в раскрывающимся списке (Change text color of a drop-down list)
Изменение цвета фона в textarea (Change background color of a textarea)
Изменение цвета текста в textarea (Change text color of a textarea)
Вставка фонового изображения в textarea (Insert background image to a textarea )

Изображения (Images)

Предварительная загрузка изображения (Preload image)
Изменение размера изображения (Change the size of an image)
Изменение источника изображения (Change the source of an image)
Изменение размера и источника изображения (Change the size & the source of an image)
Изменение положения изображения (Change the position of an image)
Изменение фонового изображения (Change the background image)
Перемещение изображения (Moving image)
Перетаскивание изображения (Drag and drop the image)
Просмотр изображений (Image viewer)
Тряска Изображения (Shaking image)
Цифровые часы (Digital clock )

Окно (Window)

Тряска Окна (Shake the window)

Ссылки (Links)

Мигающая ссылка (Blinking link)
Дрожащая ссылка (Shaking link)
Случайный баннер (Random Banner)

Меню (Menus)

Ниспадающая навигация (выбор окна) (Drop down navigation (select box))
Ниспадающие сверху (Top drop down)
Всегда наверху (Always-on-top)
Врезка границ (Inset borders)
Описания меню (Description menu)
Описание изображением (Description image)
Описание курсором (Cursor description)
Изображением курсора (Cursor image)
Горизонтальная раздвижка (Sliding horizontal)
Горизонтальная раздвижка щелчком (Click sliding horizontal)

Курсор (Cursor)

Положение курсора (Cursor position)
Текст курсора (Cursor text)
Изображение курсора (Cursor image)

« Предыдущая Следующая Глава »


Tryit Editor v1.4

Результат после редактирования:

Отредактируйте код и щелкните кнопку, чтобы увидеть результат W3Schools.com - Попробуйте сами


Tryit Editor v1.4

Copyright: W3Schools.com

Copyright: W3Schools.com