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

Hasonló előadás


Az előadások a következő témára: "JavaScript a gyakorlatban"— 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 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>");

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

6 JS0502.html <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="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> <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>

5.2 feladat

Légy üdvözölve!


mouse0

", "width": "800" }

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

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

9 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(); } ", "description": "

5.3 feladat


Légy üdvözölve! Nyomd meg valamelyik billentyűt!

whitekey HF: embed=>object! JS0503.js. //JavaScript. function playnote(note) { document.embeds[note].play(); }", "width": "800" }

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

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

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

19 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN„
"http://www.w3.org/TR/2002/REC-xhtml /DTD/xhtml1-transitional.dtd"> <html xmlns="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> <form name="form1" action="http://vision.vein.hu"> <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;

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:
Bekezdések betűszíne:

JS0603.html.", "width": "800" }

28 DHTML - DOM JS0603.js //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"

Hasonló előadás


Google Hirdetések