Új objektumok ebben a leckében:
Date – ez az objektum arra alkalmas, hogy a JavaScript dátum típusát leírja. Ilyen típusú objektumokat létrehozva az aktuális dátumot és időt is megtudhatjuk, illetve használhatjuk a JavaScript metódusokat, amelyek ehhez a típushoz társulnak.
Math – ez az objektum az összes JavaScriptben elérhető matematikai metódust összefogja. Így tehát, ha abszolút értékre, gyökvonásra vagy egy szám kerekítésére van szükségünk, erre az objektumra keressünk rá.
Új metódusok ebben a leckében:
ClearTimeout(hivatkozás az időzítőre) – a window objektumnak ezt a metódusát arra használjuk, hogy leállítsuk a setTimeout metódus által elindított időzítést.
getHours – ez a metódus arra alkalmas, hogy kiemelje az óra értékét egy dátum objektumból. Az eredmény egy szám a 0 és 23 között.
getMinutes – ez a metódus arra alkalmas, hogy kiemelje a perc értékét egy dátum objektumból. Az eredmény egy szám a 0 és 59 között.
getSeconds – ez a metódus arra alkalmas, hogy kiemelje a másodperc értékét egy dátum objektumból. Az eredmény egy szám a 0 és 59 között.
Math.floor(szám) – ez a metódus fel- vagy lekerekíti a zárójelben megadott számot a legközelebbi egész értékre.
Math.random() – ez a metódus egy random valós számot eredményez 0 és 1 között.
Mik a változók?
Ha egy hosszabb kódot írunk, szükségünk lehet adatok ideiglenes tárolására, hogy később dolgozzuk őket fel. Ezt elérhetjük, ha elnevezzük az adatot. Az elnevezett adatot változónak nevezzük, mivel változtatható az értékük és többször újrahasználhatóak.
A változókkal kapcsolatos legegyszerűbb utasítás az értékadás. Egy egyenlőségjel használatával átmásolhatunk egy értéket egy változóba vagy egy objektum adatmezőjébe. Az átmásolt érték lehet egy kifejezés eredménye, egy másik változó vagy adatmező értéke.
Minden számítógépes környezetben előforduló változó esetén fontos az adat típusa. A JavaScript környezet nem kívánja meg a típus konkrét megadását, de miután értéket kap, fontos tudni az érték típusát.
A legfontosabb adattípusok a szám és szöveg. Típus szerint másképp viselkedhetnek a különböző műveleteknek alávetve és értékadásokban megadva, ezért meg kell értenünk a viselkedésüket.
Példa számokkal:
A fenti példában négy változót láthatunk: x, y, z és v.
Amikor először használjuk a változót, a var szócskát írjuk eléje.
Az x változó értéke egy egész szám lesz, az ötös szám. Az y változó egy valós számot kap értékként: 0.5.
A HTML dokumentumokból elérhető tartalmak szöveg típusúak, ha számként akarjuk használni őket, át kell alakítani őket. A Number() metódus egy lehetőség az átalakításra.
A v és z változó értékei a HTML dokumentum két bekezdésének tartalma.
Összeadást alkalmazva a két szám között, a megszokott matematikai eredménnyel jár. Az eredmény HTML címkébe való visszatevése esetén nem szükséges direkt szöveggé alakítás, automatikusan megtörténik.
Példa szövegekkel:
A fenti példában az fn és ln változókat láthatjuk, azonnal kapnak szöveg típusú értéket. A konkrét szöveget idézőjelek közé tettük. A szövegekhez néhány speciális metódus tartozik, az egyik ilyen metódus a length, amely a szöveg hosszának megadására alkalmas.
Az i változóba egy számot másolunk. A name változóba kapcsoljuk össze a két szövegrészt és egy szóközt adva közéjük. Mind a szám, mind a szöveg, a weboldal tartalmához adható.
A második függvény egy += műveletet tartalmaz, ez azt jelenti, hogy az idézőjelbe foglalt + jelet, a HTML címke eddigi szöveges tartalmának végére csatolja. Eddig mindig fölülírtuk a tartalmat.
Kiegészítés - adattípusok:
Ha a JavaScript kifejezés eredményének típusa nem az általad elvárt típust eredményezi, meg kell vizsgálni a kifejezésben szereplő adatok típusát, az adatok sorrendjét, és megpróbálhatod erőltetni a típus átalakítást. (pl. a Number vagy a toString metódus)
A szöveg és szám alap adattípusok, amelyeket minden programozási nyelvben megtalálhatjuk. Komplexebb típusokat létrehozhatunk, metódusokkal kombinálva – ezek a JavaScript objektumok. A JavaScript nyelvben minden HTML elem objektummá alakul, láthattuk a window és a document objektumokat, ezek mindig létrejönnek, ha megnyitunk egy weboldalat.
Példa dátum típusra:
A fenti példában, egy tick függvényt láthatunk, amely először az oldal betöltésekor indul, el és időzítette magát egy másodperccel későbbi indításra.
A t változó egy hivatkozást tartalmaz az időzítőre, így leállíthatjuk az időzített esemény bekövetkeztét, ha szükséges. Ellenkező esetben az újraindítások végtelenszer ismétlődhetnek, vagy legalábbis amíg az ablak nyitva van.
A t változó egy objektumra hivatkozik, a d változó szintén. A t változóba a setTimeout függvény eredményét tároljuk, a d változóba egy újonnan létrehozott dátum típusú változót/objektumot. Így rögzíthetünk egy pillanatot az időben (egy évszámot, hónapot, napot, órát, percet és másodpercet fog össze). Ezeket az értékeket metódusokkal érhetjük el: getHours(), getMinutes(), getSeconds() a példákban.
Mi a paraméter?
Két függvény vagy egy függvény és a weboldal tartalma közötti adatcsere paramétereken keresztül történik – speciális változóknak tekinthetjük őket.
Paramétereket használva általánosabban oldhatunk meg feladatokat: meghatározhatjuk általuk az alprogram/függvény által megoldott alfeladat szempontjából föltétlenül szükséges adatokat, meghívhatjuk a függvényt különböző helyekről, különböző értékeket átadva.
Példa paraméteres függvényre:
A fenti példában egy change nevű függvényt láthatunk, amely két paraméterrel rendelkezik (az a és b). Az első egy HTML objektumra hivatkozik (amely egy innerHTML tulajdonsággal rendelkezik), a második egy szöveg, amelyet a weboldalhoz fogunk adni.
A függvény akkor hívódik meg, ha egy gombra kattintunk. A szöveg mindig más lesz, a HTML objektum is. Használhatjuk a hivatkozást – nem szükséges az azonosító alapján az elemet/gombot keresni később. Így a kód határozottan rövidebb.
Példa eredményt visszatérítő függvényekre:
A fenti példában a randnum és randcolor ilyen újabb típusú függvény. Mindkettő rendelkezik return utasítással. Ezek a függvények nem közvetlenül a weboldal tartalmához adják a tartalmat. Eredményük egy szám illetve egy szöveg, az eredményt a return utasítás téríti vissza. A visszatérített eredmény odakerül, ahonnan a függvényt meghívtuk.
A randnum függvény átalakítja azt a valós értéket, amelyet a Math.random metódus eredményez, egy a alatti egész számmá. Az eredményt visszatéríti és behelyezi a numb=randnum(255) értékadásba és a másik kettőbe. A három különböző függvény meghívás, három különböző eredménnyel jár.
A randcolor felépít egy szöveget, amely meghatároz egy színt RGB alakban, három különböző számmal 0 és 255 között. Az eredményt a c változóból visszatérítjük és elhelyezzük a change függvénybe. Itt a színt mint egy gomb háttérszínét alkalmazzuk.
Kiegészítés:
A függvények elnevezésekor vedd figyelembe, hogy nem lehet két függvényt ugyanazzal a névvel és paraméterszámmal megadni egy hatókörben (egy weboldal “látóköre” azon függvények listája, amelyek meghívhatóak a weboldalon belülről és a csatolt js fájlokból).
Adjon hozzá három négyzetet a galéria alatt, amelyek egy-egy idézetet tartalmaznak, egy a munkáról, egy barátról és egy időről.
Az alábbiakat használhatja:
A dream doesn't become reality through magic; it takes sweat, determination and hard work.
Share your smile with the world. It's a symbol of friendship and peace.
Time you enjoy wasting is not wasted time.
Három gomb hozzáadása a szövegekhez (Work, Friends és Harmony). Nem lehetnek határok az egyesítéshez az alábbi mezőhöz.
Válasszon külön színt minden idézethez, a gombnak és a doboznak azonos színűnek kell lennie.
Csak egy idézet látható egyszerre„az egyik gomb, amit az utolsó alkalommal megnyomtunk. Az elsőt alapértelmezés szerint meg kell jeleníteni.
Az alapértelmezett formázást a CSS fájlban kell beállítani, és a gombok egyikére kattintva egy kijelölt funkciót kell használni. A funkciónak paraméterként kell megadnia a megjelenítendő doboz azonosítóját.
Adjon hozzá egy új szakaszt a galéria alatt, amely egy gombot tartalmaz a Szúrópróbaszerű kép és a az első kép alkotja a galériát.
A függvények használatával az oldalnak a galéria mappában lévő 8 képtől eltérőnek kell lennie, minden alkalommal, amikor a gombot megnyomjuk. Használjon külön funkciót a megjelenítendő kép nevének létrehozásához, tudva, hogy a nevük számok: 01.jpg, 02.jpg, 08.jpg.
function something() {
var s= "10";
var z= "5";
z=z + s + z;
document.getElementById("x").innerHTML=z;
}
function something(x, y) {
y.innerHTML=x.getHours();
}
<img src="pic.jpg" alt="Missing picture" onclick="change(this)"/>
<script>
function image() {
var d=new Date();
var name=d.getHours();
name=name+".jpg";
return name;
}
function change(x){
x.src=image();
}
