14. Объектная модель документа, динамический html. Объекты, их свойства и методы. Обработчики событий. Формулировка свойств css в объектной модели. Метод getElementById.

Описать структуру web-страниц можно с помощью объектов. Точнее, сложной иерархии объектов, вложенных друг в друга и зависящих друг от друга. Такая структура называется объектной моделью документа (Document Object Model, DOM). Все современные программы web-обозревателей представляют web-страницу как иерархический набор объектов.

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

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

Именно такой подход был положен в основу динамической модели HTML

Dynamic HTML или DHTML — это способ создания интерактивного веб-сайта, использующий сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа).

Он может быть использован для создания приложения в веб-браузере: например для более простой навигации или для придания интерактивности форм.

Объект — некоторый элемент модели с набором свойств и методов (например, теги html).

Свойство — свойство объекта, которое может быть изменено или считано (прежде всего св-ва CSS, разница в разделении слов в свойствах: в CSS '_', а в объектн.модели используется прописная буква getElementById).

Метод — функция манипулирования объектом (например, window.close() — закрыть окно).

Обработчики событий предназначены для связи событий с методами и функциями, определёнными сценарием. Для каждого объекта существует определённый набор событий, расширяемый с каждой версией JavaScript.

document.getElementById("{Имя}") — метод JavaScript.

Метод возвращает ссылку на первый элемент страницы с заданным именем (значением атрибута ID).

Например,

<input type="text" name="your_name" id="your_name_input" />

<script type="text/javascript">

var name_input = document.getElementById('your_name_input')

name_input.value="Medved"

</script>

<span onClick=”document.getElementById('46').style.color='red';”>что-то</span> - при нажатии на «что-то» объект, ID которого 46 становится красным.

Если искомого элемента не существует, то getElementById возвращает null.

15. Локальное программирование на языке JavaScript. Способы включения в документ - внешние, внутренние и локальные скрипты. Синтаксис JavaScript. Переменные, операторы и функции.

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

Способы включения в документ

1. Внешние

<head>

<script type="text/javascript" src="xxx.js"> </script>

</head>

2. Внутренние

<html>

<head>

<script type="text/javascript">

function message()

{alert("Это окно с предупреждением является результатом выполнения сценария. Обратите внимание на команду внутри тега <body>!");}

</script>

</head>

<body onload="message()">

</body>

</html>

3. Локальные

<body>

<script type="text/javascript">

document.write("Это сообщение написано с помощью Java Script.");

</script>

</body>

Синтаксис, основные правила:

1) Чувствительность к регистру. Все ключевые слова пишутся в нижнем регистре.

2) Пробелы, табуляция и перевод строки. Эти символы игнорируются в JavaScript, так что можно использовать их для форматирования кода с тем, чтобы его было удобно читать.

3) Все операторы должны быть разделены этим символом (;).

4)Комментарии. JavaScript игнорирует любой текст расположенный между символами /* и */. Также игнорируется текст начинающийся символами // и заканчивающийся концом строки.

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

Функции: Можно оформить фрагменты исходного текста в виде функции, вызывая эту функцию по мере необходимости из различных мест сценария JavaScript.

Операторы: Операторы служат для управления потоком команд в JavaScript. Один объект может быть разбит на несколько строк, или, наоборот, в одной строке может быть несколько операторов.

— break (прерывает текущий цикл for и while, передавая управление первому оператору после цикла)

— Comment (комментарий, однострочные комментарии начинаются с символа (//).

— for (Создает цикл)

— return (указывает значение, которое будет возвращено функцией)

— var (объявляет переменную varname и дополнительно может присваивать ей значение)

— while (это оператор цикла, который повторяет цикл, пока значение condition есть истинно (true). Как только значение condition становится ложным (false), то управление переходит к первому оператору после фигурной скобки, закрывающей тело цикла)

Пример:

<script type="text/javascript">

function hell(параметры)

{ var pgn ="go to hell";

alert (pgn);}

</script>

Этот скрипт может быть реализован либо при загрузке страницы, либо при срабатывании обработчика событий:

<span onClick="hell();">что-то</span>

МиСПЭИ