Mint láthatod, egyes elemek színekkel ki vannak jelölve, ezzel is segíti a szerkesztő a kód átláthatóságát. Ezt nevezik syntax highlighting -nek. A "szintaktika" szó jelentésére majd még visszatérünk.
Sok más segítséget is ad a szerkesztő (editor): például ha egy blokk elejének jelölőjére kattintasz, mind az elejét, mindpedig a végét egy színnel kiemeli.
Visszatérve a html-re:
Dokumentumként szoktuk emlegetni a megjelenő tartalmat, de ami a mi célunk jelenleg, az nem egy tipikus webdokumentum, hanem inkább egy webalkalmazás. A webalkalmazások pont úgy készíthetők el, mint bármi más, ami megjelenik a weben, csak épp nem az a célja, hogy dokumentumként szolgáljon, hanem hogy alkalmazásként. Ilyen például egy játék. A webalkalmazásokban több, dokumentumokhoz kötődő dologra nem kell figyelni, például a "vissza" gombra, ami jellemzője a webes navigálásnak, vagy például azzal sem foglalkozunk, hogy régi böngészője van-e az ügyfelünknek, vagy hogy le van-e tiltva a javascript. Ezeket alapkövetelményeknek tekintjük. Az sem érdekel bennünket, hogy az alkalmazásban megjelent szöveg megtalálható legyen a keresőkben. (stb stb)
A HTML-t is csak olyan szinten fogjuk átnézni, ami a webalkalmazás készítéséhez kell. A webprogramozást tehát mostantól "webalkalmazás készítés"-ként értelmezem.
A html mégis az alapja az egésznek, mert alapvetően ezt értelmezi és jeleníti meg a böngésző, tehát ezt kell szeretni.
A html-t 3 részre szokás bontani:
1. Mi az, ami megjelenik (DOM objektumok -- tartalom)
2. Hogyan néz ki (stílus CSS -- forma)
3. Mi történik ezekkel az objektumokkal (események, műveletek, interakció vagyis a javascript program)
Ezeket az elemeket elkülönülten szokás elhelyezni vagy a html fájlban magában, vagy (ami későbbiekben lesz célszerű) külön fájlokban, és a html-ben csak utalunk ezekre az elemekre.
Eleinte azonban nézzük egyben, úgy jobban látható (amíg a példák kicsik).
Tegyünk bele egy <script> blokkot a html-be, így:
html.... head..title..body..., stb... Ez a doksi teste.Ez az első paragrafus. Hiába van ez előtt soremelés, ez nem látszik.
Ez a második bekezdés, hejj, de jó!
<script> alert("itt vagyok"); </script>
Ha ezt megnézed a böngészőben, akkor ugyanazt a dokumentumot kapod, csak egy ablak is megjelenik, benne, hogy "itt vagyok".
Ezt az ablakot az alert parancs tette ki.
A script blokkon belül tehát parancsokat adhatunk ki, vagyis itt szabályozhatjuk, hogy mi történjen, itt írjuk a programot.
Nézzük meg a stílust:
html.... head..title..body..., stb... Ez a doksi teste.Ez az első paragrafus. Hiába van ez előtt soremelés, ez nem látszik.
Ez a második bekezdés, hejj, de jó!
<script> alert("itt vagyok"); </script>
Az egyik paragrafusban a betűk pirosak lettek. Amit tettünk, hogy az egyik paragrafusblokknál közvetlenül megadtunk egy stílusdefiníciót, annak is a "color" tulajdonságát. Ez az úgynevezett "inline" CSS, ezt nem így szokták használni, de ezt egyelőre nem részletezem, majd később visszatérünk rá.
A javascriptet már tanulgatod, így most ezen haladunk majd tovább.
A következőben a firebugot fogjuk egy kicsit megnézni. Ugye letöltötted ezt a kiegészítőt a firefoxhoz?
Nincsenek megjegyzések:
Megjegyzés küldése