7.1 feladat a {text-decoration: none;} #contact, #support, #products { display:none; margin-left:2em; } 7.1 feladat Légy üdvözölve! … 7.1 feladat a {text-decoration: none;} #contact, #support, #products { display:none; margin-left:2em; } 7.1 feladat Légy üdvözölve! … Fa-struktúráju menük létrehozása">

Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

JavaScript a gyakorlatban. 7. Gyakorlat DHTML  Fa-struktúrájú menük létrehozása  Legördülő menük létrehozása.

Hasonló előadás


Az előadások a következő témára: "JavaScript a gyakorlatban. 7. Gyakorlat DHTML  Fa-struktúrájú menük létrehozása  Legördülő menük létrehozása."— Előadás másolata:

1 JavaScript a gyakorlatban

2 7. Gyakorlat DHTML  Fa-struktúrájú menük létrehozása  Legördülő menük létrehozása

3 JS0701.html 7.1 feladat a {text-decoration: none;} #contact, #support, #products { display:none; margin-left:2em; } 7.1 feladat Légy üdvözölve! … 7.1 feladat a {text-decoration: none;} #contact, #support, #products { display:none; margin-left:2em; } 7.1 feladat Légy üdvözölve! … Fa-struktúráju menük létrehozása

4 … [+] Termékek Terméklista Rendelés Árlista [+] Támogatás Fórum Kapcsolat [+] Kapcsolatfelvétel Szervízcsoport Értékesítés … [+] Termékek Terméklista Rendelés Árlista [+] Támogatás Fórum Kapcsolat [+] Kapcsolatfelvétel Szervízcsoport Értékesítés JS0701.html

5 Fa-struktúráju menük létrehozása JS0701.js //JavaScript function Toggle(item) { obj=document.getElementById(item); visible=(obj.style.display!="block") key=document.getElementById("x" + item); if (visible) { obj.style.display="block"; key.innerHTML="[+]"; } else { obj.style.display="none"; key.innerHTML="[-]"; } //JavaScript function Toggle(item) { obj=document.getElementById(item); visible=(obj.style.display!="block") key=document.getElementById("x" + item); if (visible) { obj.style.display="block"; key.innerHTML="[+]"; } else { obj.style.display="none"; key.innerHTML="[-]"; }

6 JS0702.html 7.2 feladat body { margin-left: 0; margin-top: 0; } td { background-color: silver; width: 100; } div { position: absolute; visibility: hidden; } Termékek Értékesítés Szervíz … 7.2 feladat body { margin-left: 0; margin-top: 0; } td { background-color: silver; width: 100; } div { position: absolute; visibility: hidden; } Termékek Értékesítés Szervíz …

7 Berendezések Egyéb eszközök Árlista Megrendelés Egyéb … Berendezések Egyéb eszközök Árlista Megrendelés Egyéb … JS0702.html

8 Támogatás Kapcsolatfelvétel 7.2 feladat Légy üdvözölve! Támogatás Kapcsolatfelvétel 7.2 feladat Légy üdvözölve! Legördülő menük létrehozása

9 //JavaScript var inmenu=false; var lastmenu=0; function Menu(current) { if (!document.getElementById) return; inmenu=true; oldmenu=lastmenu; lastmenu=current; if (oldmenu) Erase(oldmenu); m=document.getElementById("menu-" + current); box=document.getElementById(current); box.style.left= m.offsetLeft; box.style.top= m.offsetTop + m.offsetHeight; box.style.visibility="visible"; m.style.backgroundColor="Aqua"; box.style.backgroundColor="Aqua"; box.style.width="108px"; }… //JavaScript var inmenu=false; var lastmenu=0; function Menu(current) { if (!document.getElementById) return; inmenu=true; oldmenu=lastmenu; lastmenu=current; if (oldmenu) Erase(oldmenu); m=document.getElementById("menu-" + current); box=document.getElementById(current); box.style.left= m.offsetLeft; box.style.top= m.offsetTop + m.offsetHeight; box.style.visibility="visible"; m.style.backgroundColor="Aqua"; box.style.backgroundColor="Aqua"; box.style.width="108px"; }… JS0702.js

10 Legördülő menük létrehozása JS0702.js … function Erase(current) { if (!document.getElementById) return; if (inmenu && lastmenu==current) return; m=document.getElementById("menu-" + current); box=document.getElementById(current); box.style.visibility="hidden"; m.style.backgroundColor="Silver"; } function Timeout(current) { inmenu=false; window.setTimeout("Erase('" + current + "');",500); } … function Erase(current) { if (!document.getElementById) return; if (inmenu && lastmenu==current) return; m=document.getElementById("menu-" + current); box=document.getElementById(current); box.style.visibility="hidden"; m.style.backgroundColor="Silver"; } function Timeout(current) { inmenu=false; window.setTimeout("Erase('" + current + "');",500); } …

11 JS0702.js … function Highlight(menu,item) { if (!document.getElementById) return; inmenu=true; lastmenu=menu; obj=document.getElementById(item); obj.style.backgroundColor="Silver"; } function UnHighlight(menu,item) { if (!document.getElementById) return; Timeout(menu); obj=document.getElementById(item); obj.style.backgroundColor="Aqua"; } … function Highlight(menu,item) { if (!document.getElementById) return; inmenu=true; lastmenu=menu; obj=document.getElementById(item); obj.style.backgroundColor="Silver"; } function UnHighlight(menu,item) { if (!document.getElementById) return; Timeout(menu); obj=document.getElementById(item); obj.style.backgroundColor="Aqua"; } Legördülő menük létrehozása

12 8. Gyakorlat Sütik

13 Sütik használata cookie-k segítségével változókat tárolhatunk a felhasználó számítógépén fontosabb adatok megjegyzésére szolgál biztonságtechnikai szempontból elég ellentmondásos, de megfelelő használat mellet nagyon hasznos a tarolt adatok a sütik szavatosságáig érhetőek el, a szavatosságot is mi adjuk meg kiválóan alkalmas példaul arra hogy felismerjünk egy oldalunkra visszalátogató egyént

14 Sütik használata beállítás:  mindig egy adott weboldalra vonatkozik  pl.: name=window.prompt("Please enter your name",""); d = new Date(); d.setFullYear(d.getFullYear() + 1); expires="expires=" + d.toGMTString(); document.cookie="Username=" + name + "; " + expires; beolvasás:  meg kell nézni a document.cookie értéket  ez a tulajdonság tartalmazza az összes süti értekét, szöveges azonosítók segítségével tudjuk azokat megtalálni  pl.: cookies=document.cookie; startpos=cookies.indexOf("Username")+9; endpos=cookies.indexOf(";",startpos); if (endpos==-1) endpos=cookies.length; name=cookies.substring(startpos,endpos);

15 Sütik használata JS0801.html 8.1 feladat 8.1 feladat Légy üdvözölve! 8.1 feladat 8.1 feladat Légy üdvözölve!

16 JS0801.js //JavaScript cookies=document.cookie; alert(cookies); startpos=cookies.indexOf("Username")+9; if (startpos<9) { // Nincs beállítva a süti name=window.prompt("Kérjük, adja meg a nevét!",""); d = new Date(); d.setFullYear(d.getFullYear() + 1); expires="expires=" + d.toGMTString(); document.cookie="Username=" + name + "; " + expires; document.write(" Üdvözöljök, " + name + "! "); } else { // Megtaláltuk a sütit endpos=cookies.indexOf(";",startpos); if (endpos==-1) endpos=cookies.length; name=cookies.substring(startpos,endpos); document.write(" Üdvözöljük ismét, " + name + "! "); } //JavaScript cookies=document.cookie; alert(cookies); startpos=cookies.indexOf("Username")+9; if (startpos<9) { // Nincs beállítva a süti name=window.prompt("Kérjük, adja meg a nevét!",""); d = new Date(); d.setFullYear(d.getFullYear() + 1); expires="expires=" + d.toGMTString(); document.cookie="Username=" + name + "; " + expires; document.write(" Üdvözöljök, " + name + "! "); } else { // Megtaláltuk a sütit endpos=cookies.indexOf(";",startpos); if (endpos==-1) endpos=cookies.length; name=cookies.substring(startpos,endpos); document.write(" Üdvözöljük ismét, " + name + "! "); } Sütik használata


Letölteni ppt "JavaScript a gyakorlatban. 7. Gyakorlat DHTML  Fa-struktúrájú menük létrehozása  Legördülő menük létrehozása."