DHTML
DHTML (acronim din engleză Dynamic HTML ), cunoscut și sub denumirea de HTML dinamic , este un set de tehnologii care vă permit să schimbați dinamic reprezentarea și conținutul unui document și să creșteți interactivitatea utilizatorului pe pagină.
Nu este un limbaj real, ci este un fel de container de scripturi între JavaScript , HTML și CSS . Elementele, atributele și stilurile DHTML se bazează pe specificațiile HTML existente și W3C clasice.
Caracteristici
Cele mai interesante caracteristici ale acestei tehnologii sunt:
- dinamismul stilurilor
- dinamismul conținutului
- poziționarea și animațiile pe elemente
- filtre și tranziții
- descărcarea fonturilor care nu sunt prezente pe aparat
- legarea datelor
- acces facil la DOM ( Document Object Model )
Stil dinamic
Prin DHTML este posibilă schimbarea dinamică a stilului CSS al unui obiect. De exemplu:
< html >
< cap >
< title > Test DHTML </ title >
funcția < script > changeAll () { document . getElementById ( 'div1' ). stil . culoare = 'albastru' ; } </ script >
</ head >
< corp >
< div id = "div1" style = "color: red;" onmouseover = "changeAll ()" >
Bine ați venit la testul DHTML! Plasați cursorul peste acest text!
</ div >
</ body >
</ html >
Sau am putea, de asemenea, să sortăm datele într-un tabel făcând clic pe o anumită parte a documentului: potențialul JavaScript este mult, atât încât, cu o utilizare elocventă a limbii, puteți crea aplicații web reale gestionate direct de browser , deci fără a fi nevoie de suport software de la client .
Structura unei pagini web
De obicei, o pagină web care utilizează DHTML este configurată după cum urmează:
<! DOCTYPE html>
< html lang = "it" >
< cap >
< meta charset = "utf-8" >
< title > Exemplu DHTML </ title >
</ head >
< corp >
< div id = "navigare" > </ div >
< script >
funcția init () {
var myObj = document . getElementById ( „navigare” );
// ... manipulează fereastra myObj
}
fereastră . onload = init ;
</ script >
<! -
Adesea codul este stocat într-un fișier extern; asta se face
prin conectarea fișierului care conține JavaScript.
Acest lucru este util atunci când mai multe pagini utilizează același script:
->
< script src = "myjavascript.js" > </ script >
</ body >
</ html >
Afișarea unui bloc de text suplimentar
Următorul cod ilustrează o funcție des utilizată. O parte suplimentară a unei pagini web va fi afișată numai dacă utilizatorul o solicită. Exemplu:
< html >
< cap >
< meta charset = "utf-8" >
< title > Utilizarea unei funcții DOM </ title >
< stil >
a { background-color : #eee ; }
a : hover { background : # ff0 ; }
# toggleMe { background : #cfc ; display : none ; marja : 30 px 0 ; umplutură : 1 em ; }
</ style >
</ head >
< corp >
< h1 > Utilizarea unei funcții DOM </ h1 >
<H2> <a id = "SHOWHIDE" href = "#"> Afișați paragraful </ a> </ h2>
< p id = "toggleMe" > Acesta este un paragraf vizibil numai dacă este necesar. </ p >
< p > Fluxul general al documentului continuă </ p >
< script >
function changeDisplayState ( id ) {
var d = document . getElementById ( 'showhide' ),
e = document . getElementById ( id );
if ( e . style . display === 'none' || e . style . display === '' ) {
și . stil . display = 'blocare' ;
d . innerHTML = 'Ascunde paragraful' ;
} altceva {
și . stil . display = 'none' ;
d . innerHTML = 'Arată paragraful' ;
}
}
document . getElementById ( 'showhide' ). addEventListener ( „clic” , funcție ( e ) {
și . preventDefault ();
changeDisplayState ( 'toggleMe' );
});
</ script >
</ body >
</ html >
Stiluri dinamice
Folosind CSS, puteți schimba rapid aspectul și formatarea elementelor dintr-un document fără a adăuga sau a elimina elemente. Acest lucru ajută la menținerea documentelor mici și a scripturilor care manipulează documentul rapid. Exemplu:
<! DOCTYPE html>
< html lang = "it" >
< cap >
< meta charset = "utf-8" >
< title > Stiluri dinamice </ title >
< stil >
ul { display : none ; }
</ style >
</ head >
< corp >
< h1 id = "firstHeader" > Bun venit la HTML dinamic </ h1 >
<P> <a id = "clickableLink" href = "#"> Stilurile dinamice sunt o caracteristică cheie a DHTML. </ a > </ p >
< ul id = "unorderedList" >
< li > Modificați culoarea, dimensiunea și tipul de text al textului </ li >
< li > Afișați și ascundeți textul / li>
< li > Și mult, mult mai mult </ li >
</ ul >
<P> Abia începem! </ p >
< script >
funcție showMe () {
document . getElementById ( „firstHeader” ). stil . color = "# 990000" ;
document . getElementById ( "unorderedList" ). stil . display = "bloc" ;
}
document . getElementById ( „clickableLink” ). addEventListener ( „clic” , funcție ( e ) {
și . preventDefault ();
showMe ();
});
</ script >
</ body >
</ html >
Elemente conexe
linkuri externe
- Exemplu: popular joc Mahjongg Solitaire scris în DHTML
| Controlul autorității | LCCN (EN) sh97008021 · BNF (FR) cb13572286g (dată) · BNE (ES) XX546727 (dată) |
|---|
