JavaScript a gyakorlatban

JavaScript a gyakorlatban

5. Gyakorlat • Böngészőfüggő alkalmazások készítése • Dinamikus oldalak készítése • Animációkészítés JavaScript-tel • Hangkezelés JavaScript-tel

Böngészőfüggő alkalmazások készítése • navigator objektum segítségével lehet elérni a böngészők adatait • ez az objektum nem a DOM része, így közvetlen hivatkozhatunk rá • navigator.appCodeName: a böngésző belső kódneve, mely általában Mozilla • navigator.appName: a böngésző neve, általában Netscape vagy Microsoft Internet Explorer • navigator.appVersion: a böngésző változatszáma • navigator.userAgent: az összes változat adatot tartalmazza, a böngésző küldi a webkiszolgálónak • navigator.language: a böngésző nyelve, melyet kétbetűs kóddal tarol,pl.: en • navigator.platform: a böngészőt futtató operációs rendszer neve

A böngésző adatainak lekérdezése JS0501.js //JavaScript document.write("<ul><li><b>Kód neve:</b> " + navigator.appCodeName+"</li>"); document.write("<li><b>Alkalmazás neve:</b> " + navigator.appName+"</li>"); document.write("<li><b>Alkalmazás verziója:</b> " + navigator.appVersion+"</li>"); document.write("<li><b>Felh. felület:</b> " + navigator.userAgent+"</li>"); document.write("<li><b>Nyelv:</b> " + navigator.language+"</li>"); document.write("<li><b>Platform:</b> " + navigator.platform+"</li></ul>");

Animációkészítés JavaScript-tel (képtömbök segítségével) • a weboldalon lévő képek is tömböt alkotnak • images tömb: ez tartalmazza az oldal kepeit, képek dinamikus cseréjét érhetjük el vele • image objektumok tulajdonságai: • border: legyen-e keret vagy sem, pixelben • complete: teljesen letöltődött-e a kép? true, false • height, width: nem módosíthatjuk • hspace, vspace: szintén csak olvashatók • name: az <img> elem name jellemzőjével határozhatjuk meg • lowsrc: csak Netscape-ben hasznalható, az alacsony felbontású kép forrása • src: a kép URL-je • image objektum eseménykezelői: • onLoad: akkor következik be amikor a kép teljesen betöltődött • onAbort: ha a felhasználó még a kép betöltése előtt megszakítja az oldal betöltését • onError: ha a kép sérült vagy nem található

JS0502.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>5.2 feladat</title> <script type="text/javascript" src="JS0502.js"></script> <styletype="text/css"> p { text-align: center; } </style> </head> <body onload="preload();"> <h1>5.2 feladat</h1> <p>Légy üdvözölve!</p> <hr /> <p> <imgsrc="mouse0.gif" width="100" height="100" alt="mouse0" /> <imgsrc="mouse0.gif" width="100" height="100" alt="mouse0" /> <imgsrc="mouse0.gif" width="100" height="100" alt="mouse0" /> <imgsrc="mouse0.gif" width="100" height="100" alt="mouse0" /> <imgsrc="mouse0.gif" width="100" height="100" alt="mouse0" /> </p> <hr /> </body> </html>

JS0502.js //JavaScript var cbox=0; var nbox=1; var cimage=0; var nimage=0; functionpreload() { a1 = new Image(); a1.src = "mouse1.gif"; a2 = new Image(); a2.src = "mouse2.gif"; a3 = new Image(); a3.src = "mouse3.gif"; a4 = new Image(); a4.src = "mouse4.gif"; a5 = new Image(); a5.src = "mouse5.gif"; a6 = new Image(); a6.src = "mouse6.gif"; a7 = new Image(); a7.src = "mouse7.gif"; a8 = new Image(); a8.src = "mouse8.gif"; window.setTimeout("next();",500); } functionnext() { cimage += 1; if (cimage > 8) { cimage = 4; document.images[cbox].src = "mouse0.gif"; cbox = (cbox + 1) % 5; nbox = (cbox + 1) % 5; } nimage = cimage - 5; if (nimage <= 0) nimage = 0; document.images[cbox].src = "mouse" + cimage + ".gif"; document.images[nbox].src = "mouse" + nimage + ".gif"; window.setTimeout("next();",100); }

Hangok és bővítmények • A bővitmenyek(plug-in) teszik lehetőve a hangok, mozgóképek megjelenítését • A Netscape 3.0-tól kezdve jelentek meg. • Ma már több száz bővítmény létezik, ezek közül a legfontosabbak: Macromedia ShockWave és Flash, Adobe Acrobat, RealPlayer, stb. • A két nagy böngésző más-más bővítményformátumot használ, így ezekből általában legalább kettőt keszítenek • az <embed> elem használata: • <embed src=”sound.wav” hidden=true autostart=false loop=false> • (src,hidden,autostart,loop,controls(console,smallconsole,playbutton),width,height) • de ez az elem a HTML 4.0-ban elavult, helyette egy új elem az <object> használatát javasoljak • pl.: <object type=”audio/x-wav” data=”sound.wav” width=”100” height=”50”> <param name=”src” value=”sound.wav”> <param name=”autostart” value=”false”> <param name=”hidden” value=”true”> </object>

JS0503.js //JavaScript function playnote(note) { document.embeds[note].play(); } JS0503.html <html> <head> <title>JavaScript zongora</title> <script type="text/javascript" src="JS0503.js"></script> </head> <body> <embedsrc="C0.wav" hidden=trueautostart=false> … <embedsrc="C1.wav" hidden=trueautostart=false> <h1>5.3 feladat</h1> <hr /> <p>Légy üdvözölve! Nyomd meg valamelyik billentyűt!</p> <hr /> <a href="#" onclick="playnote(0);"> <imgborder=0 src="whitekey.gif" align=top alt="whitekey" /></a> … <a href="#" onClick="playnote(12);"> <imgborder=0 src="whitekey.gif" align=top alt="whitekey" /></a> <hr /> </body> </html> HF: embed=>object!

6. Gyakorlat • DHTML • Dinamikus, többszintű stíluslapok • Animáció • Saját tartalom készítése

Stíluslapok használata • A HTML csak a dokumentumok szerkezetének meghatározására szolgál,a dokumentum elrendezésére és megjelenésére való szabályozásra hozták létre a CSS( Cascading Style Sheets, többszintű stíluslapok)-t • <style> elem segítségével készíthetünk többszintű stíluslapokat • A fejlécben, vagy külön file-ban kell elhelyezni. • Kizárólag stíluslap leírását tartalmazhatja, más HTML elemeket nem helyezhetünk el benne pl. <style type=”text/css”> egyetlen érvényes típus a CSS jelenleg h1 {color: blue;} </style> • A benne elhelyezett elemeket szabályoknak nevezzük • Az előző példa egyetlen szabályt tartalmaz, HTML elem neve, tulajdonságnév, hozzá tartozó érték • A tulajdonságokat és értékeket mindig zárójelek közé kell írni, közéjük pontosvesszőt kell rakni • Több HTML elemet is felsorolhatunk és azokhoz több tulajdonság illetve érték is tartozhat pl. <style type=”text/css”> h1, h2, h3, h4 {color: blue; font-style: italic; text-align: center;} </style>

Stíluslapok használata • Az egyes elemek stílusát a HTML kódban is megadhatjuk pl. <h1 style=”color:red; text-align:center;”> Ez egy piros cimsor.</h1> • Egyedi azonosítókat is rendelhetünk a HTML elemekhez • pl. <p id=”intro”> Ez egy bekezdés</p> <style type=”text/css”> #intro {color: red;} </style> • Osztályok használata (több elem egyidejű megváltoztatását teszi lehetővé): <p class=”smallprint”> Ez egy kisbetűs bekezdés.</p> • hivatkozni az osztály neve előtt elhelyezett ponttal lehet pl. <style type=”text/css”> .smallprint {color: red;} </style>

CSS-tulajdonságok használata • Rengeteg tulajdonság létezik, ezek megismerése nagyon sok időt vesz igénybe => csak a fontosabbakat tekintjük át • Szöveg igazítása: lehetővé teszi a térközök megváltoztatását és a szöveg igazítását • letter-spacing: betűk közötti távolság megadására szolgál • text-decoration: vonalat helyezhetünk el a szöveg környezetében • none, alapertelmezett • underline • overline • line-through • blink (csak a netscape 4 tamogatja)

CSS-tulajdonságok használata • vertical-align: feljebb vagy lejjebb tolása egy adott elemnek • baseline (alapvonal) • sub (alá) • super (fölé) • top (felül) • text-top (a szöveg tetejéhez) • middle (középre) • text-bottom (a szöveg aljához) • bottom (lent) • text-align: szöveg igazítását határoza meg • left • right • center • justify (sorkizárás) ( újabb böngészők támogatják csak) • text-transform: kis illetve nagybetűk használata • capitalize: az összes szó kezdőbetűjét nagybetűre cseréli • uppercase • lowercase • text-indent: a bekezdések és más elemek behúzásának mértékét határozza meg • line-height: két sor teteje közötti távolság beállitása

CSS-tulajdonságok használata • Színek és háttérképek módosítása: • color: egy elem szövegének a színét adja meg, névvel ill. RGB színkoddal is lehet • background-color: egy elem háttérszínét adja meg • background-image: egy elem hátteréül szolgáló képet adja meg • background-repeat: mozaikosítani kell e a hátteret vagy sem, vízszintes, függőleges, mindkét ir. • background-attachment: görgetés közben gördüljön a háttérkép is?, fixed érték(mozdulatlan), scroll(a háttérkép a dokumentumokkal együtt mozog) • background-position: a háttérkép helyzetét allíthatjuk be • background: egyetlen szabályban megadhatunk mindent

CSS-tulajdonságok használata • Betűkészlet használata: • font-family: pl. Arial • font-style: normal,italic,oblique • font-variant: normal, smallcaps • font-weight: szöveg vastagsága: normal vagy bold • font-size: pontmérete • font: az összes értéket megadhatjuk segítségével • Margók és Keretek: • margin-top • margin-botom • margin-left • margin-right • margin: ugyanazt az értéket rendeli mind a négy margószélességhez • width: egy elem szelességet határozza meg • height: egy elem magasságát határozza meg • float: egy elem szöveggel történő körbefuttatására szolgál • clear: a körbefuttatás befejezésére szolgál

CSS-tulajdonságok használata • mértékegységek a stíluslapon: • px: képpont • pt: betűkészletek méretének szabványos mértékegysége • ex: az x karakter hozzávetőleges magassága az adott betűkészletben • em: az m karakter ….., ez általában azonos az elem font-size értékkel • %: a befoglaló objektum méretének százalékos aránya

CSS-tulajdonságok használata • Külső stíluslap használata: • .css fájlban kell elhelyezni a <style> elemek nélkül • a dokumentumban pedig a link elemmel hivatkozhatunk • pl.: <link rel=stylesheet type=”text/css” href=”style.css”> • Stíluslapok vezérlése JavaScript-ből: • a style objektum értékeinek beállításával • pl.: elem.style.color=”blue”; • azonositok hasznalata: • pl. <h1 id = ”head1”>Ez egy címsor</h1> • getElementById metódus használata • elem = document.getElementById(“head1”); elem.color= ”blue”; • vagy csak egyszerűen: document.getElementById(“head1”).color = “blue”;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN„ "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>6.1 feladat</title> <script type="text/javascript" src="JS0601.js"></script> </head> <body> <h1 id="head1"> Stílusok megváltoztatása JavaScript segítségével</h1> <hr /> <p id="p1"> Válaszd ki a bekezdés és a fejléc színét! </p> <formname="form1" action="http://vision.vein.hu"> <p> <b>Fejléc színe: </b> <selectid="heading" onchange="changehead();"> <optionvalue="black">Fekete</option> … <optionvalue="yellow">Sárga</option> </select> <br /> <b>Bekezdések betűszíne: </b> <selectid="body" onchange="changebody();"> <optionvalue="black">Fekete</option> … <optionvalue="yellow">Sárga</option> </select> </p></form> </body> </html> JS0601.html JS0601.js //JavaScript functionchangehead() { i = document.form1.heading.selectedIndex; headcolor = document.form1.heading.options[i].value; document.getElementById("head1").style.color = headcolor; } functionchangebody() { i = document.form1.body.selectedIndex; doccolor = document.form1.body.options[i].value; document.getElementById("p1").style.color = doccolor; }

DHTML - DOM • Csomópontok: • az elemeket csomópontoknak nevezzük • Ezekre gyakran kell hivatkozni, amit azonosítók hozzárendelésével érhetünk el • Szülők és gyermekek: • hasonlóképpen értendőek mint az objektumok esetében

DHTML - DOM • Testvérek: • Közös szülővel rendelkező objektumokra vonatkoznak • Az új DOM segítségével oldalunkon a HTML objektumokat rétegekbe szervezhetjük a <div> és <span> elemek segítségével. • pl. <div id=”reteg1” style=”position:absolute; left:100; top:100”> <p>Ez a réteg tartalma.</p> </div> a rétegek tulajdonságai: • position: • static: normalis esetben ide kerülne a HTML elem, nem mozgatható a réteg, default • absolute: az elem helyett az általunk megadott koordináták határozzák meg • relative: a static helyhez viszonyítva adható meg a pozició

DHTML - DOM • left,top: a pontos hely megadása • right, bottom: jobb oldali vagy alsó szél igazítása • width,height: a réteg szélességét és magasságát határozza meg • z-index: ez adja meg hogyan takarják egymást a rétegek,a számozás 1-től indul, és egy újabb réteg felkerülésével eggyel nő az értéke, módosításával megváltoztatható a rétegek sorrendje • clip: csak azt latjuk egy rétegből, ami a határoló téglalapon belül van • overflow: levágja-e vagy sem a nem látható részeket: visible, hidden, scroll, auto, inherit • display: megjelenik-e az elem a böngészőben • none • block (sortörés előtte és utána) • inline (sortörés nélkül) • list-item (listába szervezés) • visibility: látható-e az elem • visible • hidden • inherit • lehetőség van a háttér és a keret tulajdonságainak beállítására is: • background-color • background-image • border-width • border-style • border-color

JS0602.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>6.2 feladat</title> <script type="text/javascript" src="JS0602.js"></script> <styletype="text/css"> div { position: absolute; left:0; width: 100; height: 100; visibility: show; } #mouse1 { top: 100; } #mouse2 { top: 200; } #mouse3 { top: 300; } </style> </head> <body onload="next();"> <h1>6.2 feladat</h1> <hr /> <divid="mouse1"> <imgsrc="mouse5.gif" width="100" height="100" alt=„m5" /></div> <divid="mouse2"> <imgsrc="mouse5.gif" width="100" height="100" alt=„m5" /></div> <divid="mouse3"> <imgsrc="mouse5.gif" width="100" height="100" alt=„m5" /></div> </body> </html>

DHTML - DOM JS0602.js //JavaScript var pos1=-95; var pos2=-95; var pos3=-95; var speed1 = Math.floor(Math.random()*10)+2; var speed2 = Math.floor(Math.random()*10)+2; var speed3 = Math.floor(Math.random()*10)+2; function next() { pos1 += speed1; pos2 += speed2; pos3 += speed3; if (pos1 > 795) pos1 = -95; if (pos2 > 795) pos2 = -95; if (pos3 > 795) pos3 = -95; document.getElementById("mouse1").style.left = pos1; document.getElementById("mouse2").style.left = pos2; document.getElementById("mouse3").style.left = pos3; window.setTimeout("next();",10); }

DHTML - DOM (csomópontok használata) • A DOM a weboldalon szereplő objektumokat faszerkezetbe rendezi • A fa összes csomópontját elérhetjük JavaScript-tel • Egyszerű tulajdonságok: • nodeName: a csomópont neve, pl. <p> - P, <body> - BODY,ill. spec.: #document,#text • nodeType: egy egész szám, normális HTML elemek=1,szöveges=3,dokumentum=9 • nodeValue: a szöveges csomópontok tényleges szövege • innerHTML: egy tetszőleges csomópont HTML tartalma • Kapcsolatleíró tulajdonságok: • firstChild: a csomópont első gyermekobjektuma • lastChild: a csomópont utolsó gyermekobjektuma • childNodes: egy tömb, amely tartalmazza a csomópont összes gyermekét • previousSibling: az adott csomópont előző testvére • nextSibling: következő testvére

DHTML - DOM (csomópontok használata) • A document csomópont eljárásai: • getElementById(id): visszaadja a zarójelben megnevezett elemet • getElementByTagName(elem): egy tömböt ad vissza a megadott elemnév alatt található elemekkel, a * karakter segítségével a dokumentum összes csomópontját megkaphatjuk • createTextNode(szöveg): új szöveges csomópontot hoz létre a megadott szöveggel, amit hozzá kell adni a dokumentumhoz • createElement(elem): egy új HTML-elemet hoz létre a megadott elemnévvel, ezt is hozzá kell adni • Csomoponteljarasok: • appendChild(új): az objektum meglévő csomópontjai mögött helyezi el az új csomópontot • insertBefor(új,régi):a régi elé szúrja be az újat, a réginek természetesen léteznie kell • replaceChild(uj,regi): a régi helyére az újat cseréli • removeChild(old): eltávolítja a csomópontot az objektum gyermekei közül • hasChildNodes(): true ha az objektumnak vannak gyermekei, false ha nincsenek • cloneNode(): másolatot készít egy meglévő csomópontról, ha true értékkel hívjuk meg akkor a gyermek objektumokat is lemásolja

DHTML - DOM <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>6.3 feladat</title> <script type="text/javascript" src="JS0603.js"></script> </head> <body> <h1>6.3 feladat</h1> <p id="p1">A W3C DOM segítségével saját mondatokat adhatsz a bekezdéshez. Írd be a mondatot, majd kattints a Hozzáad gombra!</p> <formname="form1" action="http://vision.vein.hu"> <input type="text" name="sentence" size="65" /> <input type="button" value="Hozzáad" onclick="AddText();" /> </form> </body> </html> JS0603.html

DHTML - DOM JS0603.js //JavaScript function AddText() { var sentence=document.form1.sentence.value; var node=document.createTextNode(" " + sentence); document.getElementById("p1").appendChild(node); }

JavaScript a gyakorlatban