Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
JavaScript a gyakorlatban
2
9-10. Gyakorlat DHTML Rétegek szabályozása HTML-elemek dinamikus változtatása
3
HTML-elemek dinamikus változtatása JS0901.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 9.1 feladat 9.1 feladat Kattints valamelyik linkre, és rendezd a címsort ennek megfelelően balra, jobbra, vagy középre ! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 9.1 feladat 9.1 feladat Kattints valamelyik linkre, és rendezd a címsort ennek megfelelően balra, jobbra, vagy középre !
4
HTML-elemek dinamikus változtatása JS0901.js //JavaScript function AlignMe(a) { if (!document.getElementById) return; h=document.getElementById("head1"); h.setAttribute("align",a); } //JavaScript function AlignMe(a) { if (!document.getElementById) return; h=document.getElementById("head1"); h.setAttribute("align",a); }
5
Rétegek használata JS0902.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 9.2 feladat 9.2 feladat Első réteg Ez az első réteg. Kezdésként a bal felső sarokban található. Második réteg Ez a második réteg. Kezdésként a jobb felső sarokban található … <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 9.2 feladat 9.2 feladat Első réteg Ez az első réteg. Kezdésként a bal felső sarokban található. Második réteg Ez a második réteg. Kezdésként a jobb felső sarokban található …
6
Rétegek használata JS0902.html … Vezérlőpult Használd a vezérlőpult elemeit a rétegek mozgatásához. Első réteg Második réteg Fejléc Ez a panel … Vezérlőpult Használd a vezérlőpult elemeit a rétegek mozgatásához. Első réteg Második réteg Fejléc Ez a panel …
7
JS0902.html … …
8
Rétegek használata JS0902.js //JavaScript function move(x,y,z) { if (!document.getElementById) return; for(i=0;i<4;i++) { if (document.form1.what[i].checked) tomove=document.form1.what[i].value; } obj=document.getElementById(tomove); obj.style.left = parseInt(obj.style.left) + x; obj.style.top = parseInt(obj.style.top) + y; obj.style.zIndex=parseInt(obj.style.zIndex) + z; } //JavaScript function move(x,y,z) { if (!document.getElementById) return; for(i=0;i<4;i++) { if (document.form1.what[i].checked) tomove=document.form1.what[i].value; } obj=document.getElementById(tomove); obj.style.left = parseInt(obj.style.left) + x; obj.style.top = parseInt(obj.style.top) + y; obj.style.zIndex=parseInt(obj.style.zIndex) + z; }
![Rétegek használata JS0902.js //JavaScript function move(x,y,z) { if (!document.getElementById) return; for(i=0;i<4;i++) { if (document.form1.what[i].checked) tomove=document.form1.what[i].value; } obj=document.getElementById(tomove); obj.style.left = parseInt(obj.style.left) + x; obj.style.top = parseInt(obj.style.top) + y; obj.style.zIndex=parseInt(obj.style.zIndex) + z; } //JavaScript function move(x,y,z) { if (!document.getElementById) return; for(i=0;i<4;i++) { if (document.form1.what[i].checked) tomove=document.form1.what[i].value; } obj=document.getElementById(tomove); obj.style.left = parseInt(obj.style.left) + x; obj.style.top = parseInt(obj.style.top) + y; obj.style.zIndex=parseInt(obj.style.zIndex) + z; }](http://images.slideplayer.hu/8/2204510/slides/slide_8.jpg "Rétegek használata JS0902.js //JavaScript function move(x,y,z) { if (!document.getElementById) return; for(i=0;i<4;i++) { if (document.form1.what[i].checked) tomove=document.form1.what[i].value; } obj=document.getElementById(tomove); obj.style.left = parseInt(obj.style.left) + x; obj.style.top = parseInt(obj.style.top) + y; obj.style.zIndex=parseInt(obj.style.zIndex) + z; } //JavaScript function move(x,y,z) { if (!document.getElementById) return; for(i=0;i<4;i++) { if (document.form1.what[i].checked) tomove=document.form1.what[i].value; } obj=document.getElementById(tomove); obj.style.left = parseInt(obj.style.left) + x; obj.style.top = parseInt(obj.style.top) + y; obj.style.zIndex=parseInt(obj.style.zIndex) + z; }")
9
Dinamikus HTML-elemek alkalmazása JS1001.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 10.1 feladat 10.1 feladat Légy üdvözölve! 00:00:00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 10.1 feladat 10.1 feladat Légy üdvözölve! 00:00:00
10
Dinamikus HTML-elemek alkalmazása JS1001.js //JavaScript function Clock() { if (!document.getElementById) return; theclock=document.getElementById("clock"); now = new Date(); hours=now.getHours(); mins=now.getMinutes(); secs=now.getSeconds(); if (secs < 10) secs= "0" + secs; if (mins < 10) mins= "0" + mins; theclock.innerHTML = hours + ":" + mins + ":" + secs; window.setTimeout("Clock();",250); } //JavaScript function Clock() { if (!document.getElementById) return; theclock=document.getElementById("clock"); now = new Date(); hours=now.getHours(); mins=now.getMinutes(); secs=now.getSeconds(); if (secs < 10) secs= "0" + secs; if (mins < 10) mins= "0" + mins; theclock.innerHTML = hours + ":" + mins + ":" + secs; window.setTimeout("Clock();",250); } JS1001.css #clock { background-color: yellow; position: absolute; left: 5px; top: 5px; font-family: monospace; font-size: 20pt; font-weight: bold; } h1 { text-align: center; } #clock { background-color: yellow; position: absolute; left: 5px; top: 5px; font-family: monospace; font-size: 20pt; font-weight: bold; } h1 { text-align: center; }
Hasonló előadás
