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. 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.

Hasonló előadás


Az előadások a következő témára: "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."— Előadás másolata:

1 JavaScript a gyakorlatban

2 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

3 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

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

5 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 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ó

6 JS0502.html 5.2 feladat p { text-align: center; } 5.2 feladat Légy üdvözölve! 5.2 feladat p { text-align: center; } 5.2 feladat Légy üdvözölve!

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

8 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 elem használata:   (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 használatát javasoljak pl.:

9 JS0503.html JavaScript zongora … 5.3 feladat Légy üdvözölve! Nyomd meg valamelyik billentyűt! … JavaScript zongora … 5.3 feladat Légy üdvözölve! Nyomd meg valamelyik billentyűt! … HF: embed=>object! JS0503.js //JavaScript function playnote(note) { document.embeds[note].play(); } //JavaScript function playnote(note) { document.embeds[note].play(); }

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

11 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 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. egyetlen érvényes típus a CSS jelenleg h1 {color: blue;} 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. h1, h2, h3, h4 {color: blue; font-style: italic; text-align: center;}

12 Stíluslapok használata Az egyes elemek stílusát a HTML kódban is megadhatjuk pl. Ez egy piros cimsor. Egyedi azonosítókat is rendelhetünk a HTML elemekhez pl. Ez egy bekezdés #intro {color: red;} Osztályok használata (több elem egyidejű megváltoztatását teszi lehetővé): Ez egy kisbetűs bekezdés. hivatkozni az osztály neve előtt elhelyezett ponttal lehet pl..smallprint {color: red;}

13 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)

14 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

15 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

16 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

17 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

18 CSS-tulajdonságok használata Külső stíluslap használata: .css fájlban kell elhelyezni a elemek nélkül  a dokumentumban pedig a link elemmel hivatkozhatunk  pl.: 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. Ez egy címsor  getElementById metódus használata elem = document.getElementById(“head1”); elem.color= ”blue”; vagy csak egyszerűen: document.getElementById(“head1”).color = “blue”;

19 JS0601.js 6.1 feladat Stílusok megváltoztatása JavaScript segítségével Válaszd ki a bekezdés és a fejléc színét! Fejléc színe: Fekete … Sárga Bekezdések betűszíne: Fekete … Sárga 6.1 feladat Stílusok megváltoztatása JavaScript segítségével Válaszd ki a bekezdés és a fejléc színét! Fejléc színe: Fekete … Sárga Bekezdések betűszíne: Fekete … Sárga //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; } //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; } JS0601.html

20 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

21 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 és elemek segítségével.  pl. Ez a réteg tartalma. 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ó

22 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

23 JS0602.html 6.2 feladat div { position: absolute; left:0; width: 100; height: 100; visibility: show; } #mouse1 { top: 100; } #mouse2 { top: 200; } #mouse3 { top: 300; } 6.2 feladat 6.2 feladat div { position: absolute; left:0; width: 100; height: 100; visibility: show; } #mouse1 { top: 100; } #mouse2 { top: 200; } #mouse3 { top: 300; } 6.2 feladat

24 DHTML - DOM //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); } //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); } JS0602.js

25 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, - 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

26 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

27 6.3 feladat 6.3 feladat A W3C DOM segítségével saját mondatokat adhatsz a bekezdéshez. Írd be a mondatot, majd kattints a Hozzáad gombra! 6.3 feladat 6.3 feladat A W3C DOM segítségével saját mondatokat adhatsz a bekezdéshez. Írd be a mondatot, majd kattints a Hozzáad gombra! DHTML - DOM JS0603.html

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


Letölteni ppt "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."