Класация на сайтове TheRating Net Съвети и статии

Динамичен HTML Dynamic HTML (DHTML)

15.03.2009 – 13:30

Разчитане и целенасочено редактиране на JavaScript код в готови примери, както и запознаване с  използването му съвместно с DOM и CSS.

• DHTML (Dynamic HTML = динамичен HTML) е съвкупност от технологии:
• HTML (Hypertext Markup Language)
• CSS (Cascaded Style Sheets)
• DOM (Document Object Model)
• client-side език за програмиране

Работи се по стандартизацията както на тези технологии, така и на връзките между тях. За примери и анализи в това отношение правете справки с материала от лекциите. Там като примери са разглеждат:

Типовите задачи, изпълними с помощта на  DOM 1 и JavaScript

• Обхождане на дървото на документа
• Добавяне и изтриване на елементи в дървото на документа
• Добавяне и промяна на атрибути

Готови класове (интерфейси) с примери за използване на атрибутите и методите на тези класове за обхождане на дървото на документа и откриване, добавяне, отстраняване и промяна на елементи в него.

Връзката CSS и JavaScript

Достъпа до CSS правилата се осигурява от DOM Level 2 Style.
В интерфейса HTMLElement е добавен атрибут style, представляващ масив, в който както индексите, така и елементите са низове и съответстват на CSS правилата независимо от начина на задаването им - inline, вградени или външно свързани.

Така например:

В HTML:

<div id=”d1″ style=”color: #ff0000″> … </div>
Посредством JavaScript достъпът до атрибута style е аналогичен както и за останалите атрибути на html тага:
dstyle=document.getElementById(’d1′).style;
dstyle['color'] съдържа ‘#ff0000′
и може да бъде променян например dstyle['color']=’#00ff00′
Имената на CSS свойствата са различни в CSS и JavaScript, като в JavaScript името е слято (без тирета), започва с малка буква; ако се състои от няколко думи, втората и следващите се изписват с главни букви - например:

име на свойство в CSS    име на свойство в JavaScript
list-style-type    listStyleType

Разлики между браузерите с оглед на използваната структура на DOM и събитийната обработка. Тези разлики налагат включването на фрагменти код, целящи разпознаването им:

Разпознаването на браузера най-добре се постига с проверки за необходимата функционалност. Подпомага се от факта, че undefined, null, NaN се тълкуват като false. (празен низ също се тълкува като false, както и стойност 0)
Пример (anid е стойност на id атрибут):

function myGetElementById(anid){
if (document.getElementById) return
document.getElementById(anid);
else if (document.all) return document.all[anid];
else if (document.layers) return document.layers[anid];
else return null;}

Информация за настъпилото събитие се намира в обект от клас Event. Този обект се намира на различни места в основните браузери:
MSIE и Opera: в поле event на обекта window.
Mozilla: подава се като параметър на функцията, обработваща събитието - в примера по-долу: function eventHandler(e).

Така преносимият код, работещ в основните браузери, придобива вида:
function eventHandler(e) {
evt=e?e:window.event; // за IE/Opera e==null
if (<игнориране>) return false;
else return true;
}

Сходни статии:

1. Използване на външни CSS каскадни стилове и JavaScriptВ тази секция ви запознаваме как браузърите работят с отделните вътрешни и външни уеб елементи и компоненти. Преди да започнете работата по уеб дизайна и изграждането на страниците, трябва да...