Javascript. Obiecte si evenimente
Download
Report
Transcript Javascript. Obiecte si evenimente
V. JavaScript. DHTML
• Tehnici rollover
Preîncărcarea imaginilor
• Modificarea stilurilor CSS
Proprietăţile stilurilor JavaScript
1
V. JavaScript. DHTML
Javascript este folosit frecvent pentru a da dinamicitate
documentelor HTML generând aşa numitele documente
DHTML (Dynamic HTML).
DHTML este utilizat pentru:
• a schimba aspectul unor imagini atunci când plasăm
cursorul mouse-ului deasupra lor (rollover), când
apăsăm un buton sau un link,
• a crea efecte de animaţie,
• a modifica stilurile CSS ale diferitelor elemente din
documentele HTML
2
V. JavaScript. DHTML
Exemplu de schimbare a unei imagini la trecerea peste un link
<head>
<script language="javascript">
</script>
</head>
<body>
<a href="#" onmouseover="document.o_poza.src='dodo_bird.jpg'"
onmouseout="document.o_poza.src='dodo_blank.jpg'">Vezi pasarea
Dodo</a>
<img src="dodo_blank.jpg" name="o_poza" width="120" height
="100" align="middle" />
</body>
Notă
Ambele imagini “dodo_blank.jpg” şi “dodo_blank.jpg” se află în acelaşi
director cu fişierul curent.
Handlere de eveniment pentru suprapunerea cursorului mouse-ului peste
link şi respectiv pentru părăsirea link-ului sunt onmouseover şi onmouseout.
Proprietatea .src setează imaginea care trebuie afişată de elementul cu
numele “o_poza” din interiorul documentului.
3
V. JavaScript. DHTML
Întrebări
Încercaţi să faceţi diferenţa între viteza de înlocuire a imaginilor când rulaţi
exemplul pe calculatorul local şi când îl accesaţi prima dată de pe Internet.
De ce la a doua rulare de pe Internet şi următoarele, imaginile se schimbă
foarte repede?
Îmbunătăţire
Pentru a preveni întârzierea afişării imaginii, datorată timpului de transfer a
imaginii de la server la client, se foloseşte preîncărcarea imaginilor.
Imaginile se încarcă odată cu documentul, înainte de apariţia evenimentului
care declanşează schimbarea lor. La apariţia evenimentului imaginea este
citită din cache-ul navigatorului şi schimbarea se face foarte rapid.
Încărcarea documentului durează mai mult, deoarece toate imaginile care
ar putea fi schimbate se încarcă odată cu documentul, dar efectul de
schimbare este aproape instantaneu şi, prin urmare, mai puţin supărător.
4
V. JavaScript. DHTML
Preîncărcarea imaginilor
<head>
<script language="javascript">
var primapoza=new Image();
var a_doua_poza=new Image();
primapoza.src="dodo_blank.jpg";
a_doua_poza.src="dodo_bird.jpg";
function schimba_imagine()
{document.o_poza.src=a_doua_poza.src;}
function revine()
{document.o_poza.src=primapoza.src;}
</script>
</head>
<body>
<a href="#" onmouseover="schimba_imagine()"
onmouseout="revine()">Schimba imaginea</a><img
src="dodo_blank.jpg" name="o_poza" border="0" align= "middle" />
</body>
5
V. JavaScript. DHTML
Comentariu
• Pentru fiecare imagine care trebuie încărcată se creează un obiect nou cu:
var nume_poza=new Image();
• cu ajutorul proprietăţii .src se atribuie fiecărei variabile imagine fişierul
imagine: nume_poza.src =“cale/nume_fisier_imagine”;
• se construiesc două funcţii care se vor asocia evenimentelor onmouseover
şi onmouseout. Fiecare funcţie atribuie elementului imagine din document un
obiect imagine din cele două preîncărcate.
Notă
• Exemplul funcţionează corect şi este eficient pentru un link şi două imagini.
Cum aţi scrie codul pentru n linkuri şi n+1 imagini?
• Cum puteţi crea un meniu de navigare folosind tehnica rollover?
6
V. JavaScript. DHTML
Studiaţi următorul exemplu:
<script language="javascript">
function schimba_imagine(imag_on,nr_poza)
{document.getElementById(nr_poza).src=imag_on;}
function revine(imag_off,nr_poza)
{document.getElementById(nr_poza).src=imag_off;}
</script>
<body>
<a href="#" onmouseover="schimba_imagine('dodo1.jpg','poza1')"
onmouseout="revine('dodo0.jpg','poza1')"><img src="dodo0.jpg"
id="poza1" border="0" /></a><br />
<a href="#" onmouseover="schimba_imagine('dodo2.jpg','poza2')"
onmouseout="revine('dodo0.jpg','poza2')"><img src="dodo0.jpg"
id="poza2" border="0" /></a><br />
</body>
Notă
Acest script nu utilizează preîncărcarea imaginilor. Modificaţi scriptul pentru a folosi această
tehnică şi a beneficia de avantajele ei.
Metoda getElementById() a obiectului Document întoarce o referinţă la obiectul cu Id-ul specificat
ca argument
7
V. JavaScript. DHTML- Stiluri
Comentarii
Utilizare (IE7, Mozilla Firefox 3+):
document.getElementById(div_id).style.JS_property_reference =
"new_CSS_property_value";
(Netscape 4.7 şi anterioare)
document.div_id.JS_property_reference = "new_CSS_property_value";
Proprietatea CSS
Referinţă JavaScript
background
background
background-attachment backgroundAttachment
Proprietatea CSS
Referinţă JavaScript
border-bottom
borderBottom
border-bottom-color
borderBottomColor
background-color
backgroundColor
border-bottom-style
borderBottomStyle
background-image
backgroundImage
border-bottom-width
borderBottomWidth
background-position
backgroundPosition
border-color
borderColor
background-repeat
backgroundRepeat
border-left
borderLeft
border
border
border-left-color
borderLeftColor
8
V. JavaScript. DHTML-Stiluri
Proprietatea CSS
Referinţă
JavaScript
Proprietatea CSS
Referinţă
JavaScript
border-left-style
borderLeftStyle
Font
font
border-left-width
borderLeftWidth
font-family
fontFamily
font-size
fontSize
font-variant
fontVariant
font-weight
fontWeight
height
height
border-right
border-right-color
borderRight
borderRightColor
border-right-style
borderRightStyle
border-right-width
borderRightWidth
left
left
border-style
borderStyle
letter-spacing
letterSpacing
border-top
borderTop
line-height
lineHeight
border-top-color
borderTopColor
list-style
listStyle
border-top-style
borderTopStyle
list-style-image
listStyleImage
border-top-width
borderTopWidth
list-style-position
listStylePosition
border-width
borderWidth
list-style-type
listStyleType
9
V. JavaScript. DHTML-Stiluri
Proprietatea CSS
Referinţă
JavaScript
margin
margin
margin-bottom
marginBottom
margin-left
marginLeft
Proprietatea CSS
Referinţă JavaScript
text-decoration: blink
textDecorationBlink
text-decoration: none
textDecorationNone
text-decoration: overline
textDecorationOverline
textDecorationUnderline
margin-right
marginRight
text-decoration:
underline
margin-top
marginTop
text-indent
textIndent
padding
padding
text-transform
textTransform
padding-bottom
paddingBottom
top
top
padding-left
paddingLeft
vertical-align
verticalAlign
padding-right
paddingRight
padding-top
paddingTop
visibility
visibility
text-align
textAlign
width
width
text-decoration
textDecoration
z-index
zIndex
10
V. JavaScript. DHTML-Stiluri
Modificarea stilurilor cu JavaScript
<head>
<script language="javascript">
function change_style_on(elid, forecolor, backcolor)
{document.getElementById(elid).style.color=forecolor;
document.getElementById(elid).style.background=backcolor;}
function change_style_off(elid, forecolor, backcolor)
{document.getElementById(elid).style.color=forecolor;
document.getElementById(elid).style.background=backcolor;}
</script></head>
<body>
<table><tr>
<td bgcolor="lightcyan" id="cell1“
onmouseover="change_style_on('cell1','red','white');"
onmouseout="change_style_off('cell1','white','black')">Celula
1</td>
<td bgcolor="lightgreen" id="cell2"
onmouseover="change_style_on('cell2','blue','yellow');"
onmouseout="change_style_off('cell2','orange','navy')">Celula
2</td>
</tr>
</table> </body>
11
V. JavaScript. DHTML-Stiluri
Manipularea straturilor (layers)
Straturi, exemplu
<html>
<head>
</head>
<body>
<div id="d1" style="width:100;height:200;backgroundcolor:red;float:left; color:white">
Aceasta aste primul strat
</div>
<div id="d2" style="width:100;height:200;backgroundcolor:blue;margin-left:100">
Aceasta aste al doilea strat</div>
</body>
</html>
Adăugaţi proprietatea visibility:hidden primului strat. Vizualizaţi
rezultatul.
12
V. JavaScript. DHTML-Stiluri
Manipularea straturilor (layers)
Modificarea proprietăţilor cu ajutorul JavaScript
<script language="javascript">
function arata(layer){
document.getElementById(layer).style.visibility="visible";}
function ascunde(layer) {
document.getElementById(layer).style.visibility="hidden";}
</script>
<body>
<div id="d1"
style="visibility:hidden;width:100;height:200;backgroundcolor:red;float:left; color:white;">Acesta este primul
strat</div>
<div id="d2" style="width:100;height:200;background-color:blue;
float:left; color:white;">Acesta este al doilea strat <br />
<a href="#" style="color:yellow" onmouseover="arata('d1')"
onmouseout="ascunde('d1')">arata/ascunde </a>
</div>
</body>
13
V. JavaScript. DHTML-Stiluri
Manipularea straturilor (layers)
Remarcă
Observaţi că dacă treceţi de linkul din stratul albastru pe stratul roşu,
acesta dispare.
Modificaţi tag-ul primului strat ca mai jos şi urmăriţi rezultatul
<div id="d1" style="visibility:hidden;width:100; height:200;
background-color:red;float:left; color:white;" onmouseover=
"arata('d1')" onmouseout="ascunde('d1')" >
Pe baza exemplului anterior analizaţi sursa meniului drop-down de la adresa
http://www.seap.usv.ro/~dtiliute/webtech/excap5/drop-down-menu.htm
Notă
Funcţiile Javascript asigură:
• afişarea stratului la mouseover peste item-urile meniul principal
• menţinerea afişării stratului la plasarea cursorului peste el
• ascunderea stratului după 500ms la activarea oricărui alt item al meniului
principal
• ascunderea stratului la un click executat oriunde în fereastră
14