JavaScript a gyakorlatban
7. Gyakorlat DHTML Fa-struktúrájú menük létrehozása Legördülő menük létrehozása
JS0701.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 7.1 feladat a {text-decoration: none;} #contact, #support, #products { display:none; margin-left:2em; } 7.1 feladat Légy üdvözölve! … <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 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
… [+] 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
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="[-]"; }
JS0702.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 7.2 feladat body { margin-left: 0; margin-top: 0; } td { background-color: silver; width: 100; } div { position: absolute; visibility: hidden; } <td id="menu-products" onmouseover="Menu('products');" onmouseout="Timeout('products');"> Termékek <td id="menu-sales" onmouseover="Menu('sales');" onmouseout="Timeout('sales');"> Értékesítés <td id="menu-service" onmouseover="Menu('service');" onmouseout="Timeout('service');"> Szervíz … <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 7.2 feladat body { margin-left: 0; margin-top: 0; } td { background-color: silver; width: 100; } div { position: absolute; visibility: hidden; } <td id="menu-products" onmouseover="Menu('products');" onmouseout="Timeout('products');"> Termékek <td id="menu-sales" onmouseover="Menu('sales');" onmouseout="Timeout('sales');"> Értékesítés <td id="menu-service" onmouseover="Menu('service');" onmouseout="Timeout('service');"> Szervíz …
<td id="p1" onmouseover="Highlight('products','p1');" onmouseout="UnHighlight('products','p1');"> Berendezések <td id="p2" onmouseover="Highlight('products','p2');"onmouseout="UnHighlight('products','p2');"> Egyéb eszközök <td id="s1" onmouseover="Highlight('sales','s1');" onmouseout="UnHighlight('sales','s1');"> Árlista <td id="s2" onmouseover="Highlight('sales','s2');" onmouseout="UnHighlight('sales','s2');"> Megrendelés <td id="s3" onmouseover="Highlight('sales','s3');" onmouseout="UnHighlight('sales','s3');"> Egyéb … <td id="p1" onmouseover="Highlight('products','p1');" onmouseout="UnHighlight('products','p1');"> Berendezések <td id="p2" onmouseover="Highlight('products','p2');"onmouseout="UnHighlight('products','p2');"> Egyéb eszközök <td id="s1" onmouseover="Highlight('sales','s1');" onmouseout="UnHighlight('sales','s1');"> Árlista <td id="s2" onmouseover="Highlight('sales','s2');" onmouseout="UnHighlight('sales','s2');"> Megrendelés <td id="s3" onmouseover="Highlight('sales','s3');" onmouseout="UnHighlight('sales','s3');"> Egyéb … JS0702.html
<td id="r1" onmouseover="Highlight('service','r1');" onmouseout="UnHighlight('service','r1');"> Támogatás <td id="r2" onmouseover="Highlight('service','r2');" onmouseout="UnHighlight('service','r2');"> Kapcsolatfelvétel 7.2 feladat Légy üdvözölve! <td id="r1" onmouseover="Highlight('service','r1');" onmouseout="UnHighlight('service','r1');"> Támogatás <td id="r2" onmouseover="Highlight('service','r2');" onmouseout="UnHighlight('service','r2');"> Kapcsolatfelvétel 7.2 feladat Légy üdvözölve! Legördülő menük létrehozása
//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
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); } …
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
8. Gyakorlat Sütik
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
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);
Sütik használata JS0801.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> 8.1 feladat 8.1 feladat Légy üdvözölve! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> 8.1 feladat 8.1 feladat Légy üdvözölve!
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