Keresd ki a firebug ikonját, nyisd meg. Állítsd be úgy, hogy alul jelenjen meg egy kis ablaksávban, egy kényelmes méretben, hogy nagyrészt maga a html látszódjon fenn, alul pedig a firebug.
Valahogy így fog kinézni:
A "konzol" fület engedélyezni kell.
A firebug sokmindennel segíti a fejlesztést. Alapvetően hibakeresésre szolgál, de nagyon jól használható egyéb dolgokra is a fejlesztés során.
A füleken láthatod a már ismerős fogalmakat: HTML, CSS, szkript, DOM stb.
A konzol fülön kiadhatsz parancsokat, és láthatod azok eredményeit, illetve azokat az üzeneteket, amiket eleve a konzolra szántak. Például a programod is írhat a konzolra üzenetet, vagy a hibajelzések is ide kerülnek.
Nagyon sok beépített objektum és parancs létezik, és ezek száma folyamatosan bővül.
Próbáljunk ki egy objektumot, a >>> után írd be, hogy "document", nyomd meg a pontot, és azt fogod látni, ami fenn van a képen.
A document - ahogy a nevéből is kiderül - egy olyan objektum, ami a html dokumentum összes objektumát tartalmazza. Amikor a pontot megnyomtad, a firebug segít, és kilistázza az összes közvetlen objektumot és tulajdonságot, ami a documentum objektumból elérhető.
Nézegesd meg, mennyi minden van benne! Egy részük egyértelműen kiderül, hogy micsoda, de a legtöbbel ismerkedni kell.
Néhányat megnézünk, persze jó lenne, ha magad utánajárnál hogy mire is képes mindez. A neten egy csomó anyagot találsz a DOm objektumokról és a firebug kezeléséről is, akár magyarul is!
Most példaképp folytasd a begépelést, írd be, hogy: document.body.inner
Láthatod, hogy a struktúra hierarchikus, a DOMban visszaköszön az, amit a html fájlban definiáltunk. Mert hát persze, a böngészőben az elsohtml.html fájl nyitva van, ezt a szövegfájlt a firefox értelmezte, és létrehozta belőle a DOM struktúrát, ami most innen a firebug konzolból is elérhető. Létre van hozva a document-en belül a body, és annak van egy innerHTML tulajdonsága. Azzal, hogy a begépelésnél eljutottál addig, hogy ...inner , a firebug felkínálja az egyetlen értelmes folytatást, vagyis: document.body.innerHTML.
Nyomj egy entert, majd még egyet, és a konzolban megjelenik a body innerHTML-je, vagyis az a szöveg, amit a fájba írtunk a <body> blokkjelölők közé.
Most próbáld ki mondjuk ezt:
document.body.firstChild
Ez fog megjelenni a konzolban:
<TextNode textContent="\n Ez a doksi teste. \n ">
Ez furcsa: a "textnode" egy olyan blokk, amit nem definiáltunk a html fájlunkban. Legalábbis azt hittük. A "pőrén" álló szövegeket a böngésző úgy értelmezi, hogy az is egy olyasmi blokk, mint a <p>, csak épp egy sima "textnode". Hasonlóképp néha látszólag önkényesen a böngésző létrehoz máskor is objektumokat, erre számítani kell.
(Ugye a firstChild az érthető?)
Most ezt próbáld ki:
document.body.firstChild.nextSibling
Ez jelenik meg a konzolban:
<p style="color: red;">
Na végre, itt megérkeztünk az első blokk definíciójához , amit tényleg így adtunk meg.
Folytassuk:
document.body.firstChild.nextSibling.style.color
Ez pedig: "red"
Ugye, milyen klassz? A hierarchián szépen végigmehetünk, az objektumon belüli objektumokig illetve tulajdonságokig. Itt egy CSS tulajdonságig jutottunk el a DOM hierarchiából kiindulva.
Sőt, meg is változtathatjuk, ezt próbáld ki:
document.body.firstChild.nextSibling.style.color="green"
Hát zöld lett, persze.
Ezekkel szépen el lehet szórakozni, tedd is meg! Próbálgasd megváltoztatni az innerHTML-t, más style tulajdonságokat adjál, nézz utána a neten, hogy mik vannak még, pl. backgroundColor, fontWeight, stb, stb.
A következő bejegyzésben ezeket próbálgatjuk majd programból.
Nincsenek megjegyzések:
Megjegyzés küldése