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" " <html xmlns=" xml:lang="hu" lang="hu"> <head> <title>5.2 feladat</title> <script type="text/javascript" src="JS0502.js"></script> <style type="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> <img src="mouse0.gif" width="100" height="100" alt="mouse0" /> </p> </body> </html>

JS0502.js //JavaScript var cbox=0; var nbox=1; var cimage=0;
var nimage=0; function preload() { 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); } function next() { 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.html <html> <head> <title>JavaScript zongora</title> <script type="text/javascript" src="JS0503.js"></script> </head> <body> <embed src="C0.wav" hidden=true autostart=false> … <embed src="C1.wav" hidden=true autostart=false> <h1>5.3 feladat</h1> <hr /> <p>Légy üdvözölve! Nyomd meg valamelyik billentyűt!</p> <a href="#" onclick="playnote(0);"> <img border=0 src="whitekey.gif" align=top alt="whitekey" /></a> <a href="#" onClick="playnote(12);"> </body> </html> HF: embed=>object! JS0503.js //JavaScript function playnote(note) { document.embeds[note].play(); }

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;}

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;}

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)

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

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

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

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

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„
" <html xmlns=" 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> <form name="form1" action=" <p> <b>Fejléc színe: </b> <select id="heading" onchange="changehead();"> <option value="black">Fekete</option> … <option value="yellow">Sárga</option> </select> <br /> <b>Bekezdések betűszíne: </b> <select id="body" onchange="changebody();"> </p></form> </body> </html> JS0601.html JS0601.js //JavaScript function changehead() { i = document.form1.heading.selectedIndex; headcolor = document.form1.heading.options[i].value; document.getElementById("head1").style.color = headcolor; } function changebody() { i = document.form1.body.selectedIndex; doccolor = document.form1.body.options[i].value; document.getElementById("p1").style.color = doccolor;

DHTML - DOM Csomópontok: Szülők és gyermekek:
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: a rétegek tulajdonságai: position:
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" " <html xmlns=" xml:lang="hu" lang="hu"> <head> <title>6.2 feladat</title> <script type="text/javascript" src="JS0602.js"></script> <style type="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 /> <div id="mouse1"> <img src="mouse5.gif" width="100" height="100" alt=„m5" /></div> <div id="mouse2"> <img src="mouse5.gif" width="100" height="100" alt=„m5" /></div> <div id="mouse3"> <img src="mouse5.gif" width="100" height="100" alt=„m5" /></div> </body> </html>

DHTML - DOM //JavaScript JS0602.js var pos1=-95; var pos2=-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); } JS0602.js

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" " <html xmlns=" 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> <form name="form1" action=" <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

Hasonló előadás

Az előadások a következő témára: "JavaScript a gyakorlatban"— Előadás másolata:

Hasonló előadás

Projectumról

Visszajelzés

Bejelentkezés

A társadalmi hálózaton keresztül belépni:

JavaScript a gyakorlatban

Hasonló előadás

Az előadások a következő témára: "JavaScript a gyakorlatban"— Előadás másolata:

Hasonló előadás

Projectumról

Visszajelzés