Mi a függvény?
A függvény egy utasítás csoport, amely egy problémát/feladatot old meg. A függvényeknek neve van és meghívhatóak a fájl különböző részeiből, hogy a benne levő utasításokat végrehajtsa.
Miért használjunk függvényeket?
- Lehetővé teszik, hogy a kódot egyszer írjuk le és többször hívjuk meg/hivatkozunk rá. Ez a kód újrahasznosítását jelenti.
- A függvényeket helyesen elnevezve (utalva az elvégzendő feladatra), javíthatunk a kód olvashatóságán. Ez segíthet, ha más szeretné a kódunkat használni, vagy utólag módosítani szeretnénk valamit.
- Adat cserét (paramétereket) használva a függvények és a HTML kód között, átfogóbb kódot írhatunk – egy feladatot általánosabban oldhatunk meg.
Új HTML címkék ebben a leckében:
<script> - ha JavaScript kódot helyezünk egy HTML fájlba, a HTML címkéken kívül, a <script> címkék közé kell illeszteni. Így jelöljük meg a kódot a böngésző számára.
Új események ebben a leckében:
onload – ezt az eseményt akkor érzékeli a böngésző, amikor a dokumentum betöltődik. Kezdőértékeket állíthatunk be, időzíthetünk újabb eseményeket stb.
onresize – ez az esemény, részben úgy működik, mint az előzőleg megismert média szabály. Ezt az eseményt használhatjuk, hogy a böngésző átméretezésére reagáljunk. Ezt az eseményt a többi eseménnyel együtt megtaláljuk a JavaScript események listáján, de az eddigiekhez képest nem váltódik ki, ha egy HTML címkébe írjuk bele. A megértés céljából nézd át az erre vonatkozó példát és az addEventListener metódust.
Új objektum ebben a leckében:
window – ez az objektum fogja össze a böngésző ablakkal kapcsolatos tulajdonságokat és metódusokat.
Új metódusok ebben a leckében:
setTimeout(függvény név,ezredmásodperc) – ez a metódus alkalmas arra, hogy időzítsük egy függvény végrehajtását az eltelt idő alapján.
addEventListener(‘az esemény neve’, a függvény neve) – ezzel a metódussal, eseményeket párosíthatunk függvényekkel programkódból – nem szükséges a HTML címkébe beírni őket. Ez a lehetőség annyit jelent, hogy egy eseményhez kötötten is eldönthetjük, hogy létrehozunk ilyen esemény és függvénypárokat… Ebben a leckében a window osztályban található változatot használjuk, de minden HTML elem rendelkezik ilyen metódussal.
alert("a megjelenítendő szöveg") – ez a metódus arra alkalmas, hogy egy hibaüzenetet jelenítsünk meg böngésző ablak tartalma fölött.
date() – ezt a metódust használhatjuk, hogy az aktuális dátumot a HTML oldalon megjelenítsük. Más műveletekre is alkalmas a metódus, később még visszatérünk erre.
Új tulajdonságok ebben a leckében:
innerWidth – ez az adatmező tartalmazza az aktuális ablak szélességét (hivatkozhatunk rá mint window.innerWidth). Nem módosítható. Az ablak kódból való átméretezésére más metódust kell alkalmazni és nem jó ötlet.
innerHeight – ez a tulajdonság tartalmazza az aktuális ablak magasságát, az előző tulajdonsághoz hasonlóan.
Kiegészítések:
- Mind az alert, mind az addEventListener metódus, a window objektum metódusai, de nem szükséges megadni a window objektumot a használatukkor.
- Több függvényt is kapcsolhatunk egy eseményhez, pontosvesszővel elválasztva.
Példa egy egyszerű függvényre:
Ebben a példában a change nevű függvényt használjuk. A függvény egy utasítást tartalmaz, amelyet előzőleg a HTML címkén belül adtuk meg. Nem használhatjuk a this hivatkozást itt, mivel még nem tudunk adatátadást végezni a függvény és a HTML tartalom között. Így a gombhoz azonosítót adhatunk, amely alapján megkereshetjük a gombot a függvényből, és lecserélhetjük a szöveget rajta.
A függvény nevét egy üres kerek zárójelpár követi – ezek az előbb említett adatcserében játszanak majd szerepet – egyelőre nem írunk semmit a zárójelbe, egyelőre.
Az utasításokat, amelyek a megoldandó feladathoz szükségesek, más típusú, kapcsos zárójelekbe kell foglalni. Ezek mind föltétlenül szükséges elemek.
A <script> címkét használjuk a kód meghatározására, és a függvény nevét használjuk az utasításokra való hivatkozásra – az onclick után írtuk a hivatkozást.
Példa az időzítésre:
Ebben a példában az onload eseményt használjuk. Ezt főként a <body> címkéhez rendelhetjük.
Az init függvényt elindítjuk az oldal betöltésére. Ez a függvény egyetlen utasítást tartalmaz: a change1 függvényt időzítjük, az oldal betöltése utáni harmadik másodpercben indul el.
A change1 függvény lecseréli a megjelenített képet, és időzíti a change2 függvényt három másodperc múlva való indításra.
A change2 függvény visszacseréli a képet az eredetire, majd utal a change1 függvényre szintén három másodperc után.
Ez annyit jelent, hogy a két kép három másodpercenként váltogatni fogják egymást, amíg az oldalt el nem hagyjuk.
Példa események figyelésére és hibaüzenetek megjelenítésére:
Ebben a példában először használjuk addEventListener metódust. Amikor az oldal betöltődik, az init függvény elindul, ekkor társítjuk a window objektum resize eseményét a write függvényével. Az init függvény csak egyszer hajtódik végre, elérve a célját.
Ahányszor átméretezzük az ablakot egy vagy több hibajelentés jelenik meg jelezve, hogy megtörtént a várt esemény. A hibaüzenetek idegesítőek lehetnek, tehát bánjunk velük bölcsen…
címkét. Adjon hozzá egy új szakaszt a galéria előtt és egy
azonosítót.Adjon hozzá párnázást, szövegszínt, háttérszínt és alsó margót.
A betűméretet az ablakmérethez (vw-ben kifejezve) viszonyítva kell kiszámítani.
Ahányszor megnyitod az oldalt, az újonnan hozzáadott szakaszban,mutassa azaktuális dátumot, és minden másodpercben frissítse.
fájlt. Adj hozzá egy új szakaszt az előző gyakorlatsor után, hogy mindig megjelenítse a az ablak méretét, és úgy tervezzük meg, mint az előző fejezetben.
Az új szakasz belsejében írd be Window’s width:, majd egy azonosítóval, azonos módon azonos bekezdéssel Window’s height.
Az onload eseményhez adj hozzá egy új függvényt és nevezd el méretnek .
A méret függvénynek hozzá kell rendelnie az írási funkciót az átméretezéses eseményhez. Igazítsd az írás funkciót az ablak eredeti méretének megjelenítéséhez.
Az írás funkció, amelyet csak átméretezéskor igazítanak, kell frissitse a feladatban létrehozott két bekezdés tartalmát.
