Eddig egyetlen HTML fájlban benne volt minden, amire szükségünk volt. A böngésző szépen beolvasta, értelmezte, megjelenítette, végrehajtotta... Vagyis csak a böngészőtől függött az egész. Ez az egyik jó dolog benne: bármilyen eszközön és operációs rendszeren működik (persze sok probléma lehet a platformok, böngészők különbözőségével, de szerencsére manapság már a böngészők igyekeznek jól megjeleníteni a szabványok szerint a HTML oldalakat és a CSS és JS képességeik is megbízhatóan hasonlóak)
Vegyük például a szokásos HTML fájlunkat:
<html>
<head>
<title>
Ez az első HTML-em!
</title>
<style>
p {color:green;background:yellow}
#harmadik_p {color:white;background:black;font-weight:bold}
</style>
</head>
<body>
Ez a doksi teste.
<p style="color: red;">
Ez az első paragrafus.
Hiába van ez előtt soremelés, ez nem látszik.
</p>
<p>
Ez a második bekezdés, hejj, de jó!
</p>
<p id="harmadik_p">
Ez a harmadik.
</p>
<script>
alert("itt vagyok");
</script>
</body>
</html>
A HTML blokkok egyfajta konténerek, a rendszer gerincét alkotják.
Jól elkülönül a <style> és a <script> rész. Biztosan könnyen belátod, hogy nagyobb weboldalak, webalkalmazások hatalmasra és átláthatatlanra nőnének, ha minden funkciót, definíciót egyetlen fájlban tárolnánk mindig.
De nem csak ez az egy oka van, hogy több fájlba érdemes szétszedni a dolgainkat: ha több alkalmazást készítünk, akkor bizonyos részeket, amiket az előző alkalmazásban elkészítettünk, felprogramoztunk, felhasználhatjuk a következőben, vagyis nem kell nulláról indulnunk. Az ilyen megírt, letesztelt, bevált programrészeket érdemes külön programkönyvtárban, külön fájlokban eltárolni, aztán a fő HTML fájlunkban csak utalni rá -- ezzel pont olyan hatást érünk majd el, mintha benne lenne a programrész magában a HTML fájlban.
Sőt, lehet, hogy valaki már megcsinálta, felprogramozta előzőleg azokat a feladatokat, amiket (vagy nagyon hasonlóakat) most nekünk is el kellene készítenünk, így felhasználhatjuk más kódját, függvénykönyvtárát, keretrendszerét. Sokan osztanak meg ilyen keretrendszereket, sok programozó fejleszt ilyeneket és tesz közkinccsé, vagy csinál belőle üzletet (eladja a keretrendszert).
Az ilyen keretrendszerek használatát persze külön meg kell tanulni: olyat érdemes választani, ami passzol a céljainkhoz, megbízható, jelenleg is foglalkoznak vele, fejlesztik (nem hagytál magára), jól dokumentált -- és fekszik az anyagi lehetőségeinkhez.
Ezermillió ilyen keretrendszer van, a leghíresebbek GPL, Apache, vagy MIT licensz alatt érhetők el -- de van ezer egyéb jogi forma. A legfontosabb kritérium, hogy az adott programcsomag felhasználható-e üzleti célra -- végülis érthető, hogy ha pénzt tudsz a segítségével szerezni magadnak, akkor fizess is érte. A legfurcsább, hogy a legismertebb rendszerek üzleti felhasználásra is ingyenesek.
Az egyik leghíresebb ilyen keretrendszer a JQuery. (Majd egyszer lehet, hogy ezt is megnézzük, egyelőre azonban specifikusan a célunknak megfelelő más keretrendszert fogunk kipróbálni.)
Ez egy annyira elterjedt keretrendszer, hogy más keretrendszerek alapjául is szolgál. Például ha képeket szeretnél megjeleníteni szép formában tálalva, akkor például használhatod a Lightbox modult (sok weboldalon találkoztál már vele, csak épp nem is tudsz róla). A Lightbox azonban Jquery-t használ, így aztán ha használni akarod, akkor előtte be kell linkelned a HTML fájlodba a Jquery-t is.
Ez egy függőségi láncolat.
Mondjuk csinálsz egy modult, aminek egy része a képmegjelenítés, és ezt a Lightbox-szal oldod meg, akkor ha ezt a modult külön lemented, akkor ez függeni fog a JQuery-től is, a következőképp:
Saját modulod->lightbox->JQuery
...pedig a Jquery-t egyébként nem is feltétlenül használod a kódodban.
Lehet, hogy egy másik modult is használsz, mondjuk egy űrlapkitöltéshez felhasználsz egy másik könyvtárat, az XY nevűt, ami szintén JQuery-t használ. Ekkor nyilván nem kell kétszer betöltened a Jquery-t, de figyelned kell rá, hogy melyik modulod mitől függ, milyen sorrendben épülnek egymásra, és csak azokat töltesd be a HTML-lel, amik kellenek.
Bonyolult projekteknél ha egy-egy modult kicserélgetnek, módosul a függőségi lánc (esetleg többen is dolgoznak rajta), akkor ennek a fejben tartása, kezelése sok problémát okozhat, ezekre külön létrehoznak kezelőrendszereket, "build","GIT","deploy" rendszereket, stb... (ezeket azért írtam ide, hogy tudd, ezek a kifejezések kb mire utalnak, ha találkozol velük)
De már túl messzire mentem, nézzünk egy egyszerű példát a gyakorlatban:
Ha megnézed egy nagyobb weblap HTML forrását, akkor ilyeneket fogsz benne találni a <head> részben:
<link rel="stylesheet" type="text/css" href="http://ize.hu/assets/static/cimlap.css />
vagy:
<script src="http://ize.hu/assets/js/jquery.min.js" type="text/javascript" ></script>
A cimlap.css és a jquery.min.js külön fájlok. Amikor a böngésző a <link href...> vagy a <script src...> részhez ér, akkor betölti ezeket a fájlokat, és pont úgy tesz, mintha magába a HTML fájba lenne beleírva valami.
Feladat: készítsd el az első HTML fájlodat, ami más fájlokra utal. Hozz létre egy script.js fáljt és egy stilus.css fájlt (ugyanabba a mappába tedd, mint a HTML-t), és írd át a fenti HTML fájlt, hogy ugyanúgy működjön, csak épp ne legyen benne konkrétan a javascript és a css kód (tedd át a külső fájlba). Sikerülni fog?
Nincsenek megjegyzések:
Megjegyzés küldése