Treść książki
Przejdź do opcji czytnikaPrzejdź do nawigacjiPrzejdź do informacjiPrzejdź do stopki
ROZDZIAŁ1.PRZYDATNENARZĘDZIA
powinnobyćnaturalnymprzełączaniesięmiędzynimiitestowanieswojegooprogramo-
wanianabieżąco,cooczywiściewiążesięzposiadaniempodstawowychumiejętnościpracy
znarzędziamioferowanymiprzezkażdąznich.
GoogleChromeDevToolssąwbudowanewprzeglądarkę;możemyjeuruchomićdla
aktualnejstrony,używającklawiszaF12lubskrótuklawiszowegoCTRL+SHIFT+I.Na-
rzędziadeweloperskieprzeglądarkiGoogleChromeoferująwielefunkcjonalnościprzy-
datnychzarównoprzytworzeniuoprogramowania,jakirozwiązywaniuproblemów.Nie
sposóbwjednejksiążceomówićjewszystkiewnajdrobniejszychszczegółach,dlategoteż
skupimysięnaprzeglądzienajczęściejużywanychpaneli.
Elementy(elements)
PanelelementówpozwalanapodglądaktualnegostanudrzewaDOM
2
;możemywnim
teżzaznaczyćdowolnyelementtegodrzewa,anastępniedokonaćmodyfikacjijegoatry-
butów.ZaznaczonyelementmożemytakżeedytowaćjakozwykłykodHTMLwrazzjego
potomkami.Międzyelementamimożnanawigowaćnadwasposoby:
•
PrzezwyszukiwanieelementówwdrzewieDOM.Wyszukiwanieodbywasięprzez
podanieodpowiedniegoselektora,którybędziepasowałdoszukanegoprzeznas
elementu.PoużyciukombinacjiklawiszyCTRL+Fwpaneluelementówukaże
siępolewyszukiwania,wktórymbędziemymoglipodaćselektor.Pasującyelement
zostanienatychmiastpodświetlony.
•
Dziękiużyciuklawiszyzestrzałkamigóraidółdoprzemieszczaniasięmiędzyele-
mentamisąsiadującymiorazlewoiprawodoprzemieszczaniasięmiędzyrodzi-
camiiichpotomkami.
WkwestiimodyfikacjielementówwdrzewieDOMzpoziomupanelumamydowyboru
kilkaopcjizpoziomumenukontekstowego.Wzależnościodtego,wktórączęśćzazna-
czonegoelementuklikniemyprawymprzyciskiemmyszy,dostaniemyróżneopcje.
<divclass="myClass">treść</div>
Kliknięciewnazwęelementu(np.div)pozwolinammiędzyinnymidodaćnowyatry-
but,natomiastkliknięcieprawymprzyciskiemmyszywistniejącyatrybutdanamopcje
edycjiatrybutu.
Podczasedycjiatrybutujestonzaprezentowanywpostacipolatekstowego,gdziejego
nazwaiwartośćmogązostaćzedytowane(np.class="myClass").Wszelkiezmiany,ja
-
kichdokonamypodczasedycjiatrybutu,potwierdzamyklawiszemEnter.Usunięciesamej
wartościatrybutu(np."myClass")sprawi,żeatrybutnadalbędzieistniałnaelemencie,
alebezprzypisanejwartości,natomiastjeżeliusuniemytylkonazwęatrybutu(np.class)
lubwykasujemycałązawartośćpolatekstowegopodczasedycji,toatrybutzostaniecałko-
wicieusuniętyzzaznaczonegoelementu.
2DocumentObjectModel(ObiektowyModelDokumentu):http://www.w3.org/DOM/
20
