|
IPRO - PC Magazine Romania, Aprilie 2003
SOLUȚII PENTRU PROGRAMATORII ȘI DESIGNERII WEB Picătura
de DHTML
Octavian Arsene
Vremea schimbărilor a cam venit. Setările legate de culori și fonturi, de
poziția diverselor elemente HTML sunt realizate prin intermediul fișierelor
de stiluri CSS (care reprezintă extinderea standardului HTML). Partea de
dinamică a obiectelor dintr-o pagină de web este realizată cu JavaScript
(limbaj de scripting, ce lucrează cu obiecte, a nu se confunda cu Java).
Ca o privire de ansamblu, proiectarea unei pagini de web presupune ceva programare
(trebuie stăpânite conceptele de obiect - metodă - proprietate). Pentru legarea
celor 3 standarde HTML-CSS-JavaScript utilizăm conceptul container, materializat
cu ajutorul tagului <DIV> sau <SPAN> din HTML. Estetica acestora
se realizează cu stilurile CSS iar de punerea lor în mișcare se ocupă scriptul
JavaScript.
De exemplu să realizăm o pagină de web în care tratarea evenimentului "Click"
(vom apăsa pe un buton) să schimbe culoarea background-ului unui container
din respectiva pagină; sursele acestui exemplu sunt următoarele :
fișierul pag1.htm
<html>
< head>
<title>Exemplul 1</title>
<link href="stiluri.css" type="text/css" rel="stylesheet">
< /head>
< SCRIPT src='scripturi.js'>
< /SCRIPT>
<BODY>
<
DIV CLASS="cutie" ID="container1">
Text inauntrul containerului 1
< /DIV>
<
P ALIGN="CENTER">
<INPUT TYPE="BUTTON" onClick="f1()" VALUE="Wind of
change..">
< /P>
< /BODY>
< /html>
fișierul stiluri.css
BODY
{
background-color: #0040A7;
}
.cutie
{
background-color: #003384;
color: white;
padding: 10px;
border-style: solid;
border-color: white;
border-width: 1px;
font-family: Arial;
}
fișierul stiluri.js
//-Variabile globale
var browser=navigator.userAgent.toLowerCase();
var IE=(document.all)?true:false;
var NETZ_NOU=((document.getElementById)&& (!IE))?true:false;
/* -Functii ce sunt executate la invocarea handler-elor
Browserul va stii ce functie sa invoce intr-un anume moment datorita
handlerului ; de ex: onClick=f() este handlerul onClick apeleaza functia
Javascript f()
*/
function f1()
{
if(IE)
document.all.item(container1').style.backgroundColor='red';
if(NETZ_NOU)
document.getElementById(container1').style.backgroundColor='yellow';
}
Pare complicat?
Hai să vedem ce inginerie am făcut ! Remarcăm o noutate introdusă în HTML,
atributul ID care va reprezenta identificatorul containerului în cadrul scripturilor
Javascript (puteți să-l considerați ca un nume, poreclă); apoi problema spinoasă
este modelul obiectual ales de către fiecare producător de browser (până
la un punct, sunt cam la fel; de exemplu obiectele window' ,'document' și
chiar câteva metode și proprietăți ale acestora). Scopul, în cadrul codului
Javascript, este de a obține REFERINȚA la OBIECTUL CONTAINER (trebuie să
vă reamintiți că în Javascript se utilizează modelul obiectual pentru accesarea
diverselor elemente HTML). "Referință la obiect" înseamnă o variabilă prin
intermediul căreia putem ajunge la metodele și proprietățile acelui obiect.
Pentru IE referința la obiectul container este următoarea expresie:
document.all.item(container1')
Pentru Netscape referința la obiectul container
este următoarea expresie:
document.getElementById(container1')
Instrucțiunile de mai sus s-ar putea citi cam așa: din cadrul tuturor elementelor
HTML disponibile în pagina de web alegem elementul cu numele "container1"
(vezi ID din cadrul sursei HTML) .
După obținerea referinței elementului container nu ne mai trebuie decât numele
stilului CSS pe care dorim să-l modificăm. Acesta este:
style.backgroundColor='red', reprezentând culoarea de fundal a containerului.
|
