Új metódusok ebben a leckében:
getElementsByClassName(a CSS osztály neve) – a documentum és más objektumok metódusa, amellyel elemeket érhetünk el a rájuk alkalmazott osztály név alapján. A getElementById metódushoz hasonlóan működik, de az eredmény több elem listája lehet (a névben a többes szám is erre utal). Az eredmény objektum tömbként kezelhető.
getElementsByTagName(a címke neve) – a documentum és más objektumok metódusa, amellyel minden azonos típusú elemet elérhetünk. Az eredmény tömbként kezelhető.
querySelectorAll(a szelektor neve) – ezt a metódust arra használhatjuk, hogy akár címke, akár osztály alapján elemet keresünk, de komplexebb keresésekre is alkalmas kombinálva címkéket, osztályokat és egyéb szelektorokat.
charAt(index)– a string objektum (karakterlánc) ezen a metódusával azonosíthatjuk a szöveg paraméterként megadott sorszámú betűjét.
Új tulajdonság ebben a leckében:
length – ezt a tulajdonságot úgy karakterláncok, mint tömbök esetén használhatjuk. A tömbe elemeinek számát tudhatjuk meg. A tömb is egy objektum, ezért ezt a tulajdonságot, a tömb nevét eléje fűzve, használhatjuk.
Mi a tömb?
A tömb egy adattípus. Egy ilyen típusú változó egy értéksort tartalmaz. Az értékek általában ugyanolyan típusúak (lehetnek számok, karakterláncok, dátumok vagy objektumok, még tömbök is).
A tömbök hasznosak, mivel egy névvel hivatkozhatunk egy sor elemre, az elemek számától függetlenül – ez megváltoztatható.
Tömbhasználatkor értelmeznünk kell őket:
var t=[1, 2, 3, 4]; a=["x", "y", "v", "w"]
A tömb minden elemének van egy sorszáma és elérhető ezt a számot használva. A számozás 0-tól kezdődik. A szám ismeretében minden értéket felhasználhatunk/módosíthatunk.
Például itt minden elemet lecserélünk 5-re:
for (i=0;i<t.length;i++) t[i]=5;
Példa tömb értelmezésére és használatára:
Ebben a példában egy tömböt értelmezünk, amely színneveket tartalmaz.
A színes szakaszra kattintva a set függvény aktiválódik és lecseréli a szakasz háttérszínét.
A length tulajdonságot használjuk annak megállapítására, hány elem van a tömbben. Így ha módosul az elemek száma is helye értékkel dolgozzunk.
Egy véletlen számot állítunk elő 0 és 4 között ( a Math.random() a [0, 1) intervallumba tartozó valós számot eredményez). Hivatkozhatunk a tömb egy elemére az előállított számot használva. Ez lesz a háttérszínként használt szín.
Példa a getElementsByClassName metódus használatára:
A példában három különböző HTML elem van, amelyekre ugyanazt a CSS osztályt alkalmazzuk.
A gombra kattintva (ez az utolsó elem), a szöveg színe narancssárgára vált mindhárom elemben.
A getElementsByClassName metódussal hozzáférünk azokhoz az elemekhez, amelyekre a CSS osztály vonatkozik. A listájukat tartalmazó tömb a d_elements változó.
A tömb minden eleme egy HTML elem/objektum, elérhetjük őket minden lehetséges sorszámot érintve. Mindegyiknek van egy color tulajdonsága, amelyet be lehet állítani.
Példa karakterláncokban használt sorszámozásra:
Ebben a példában láthatjuk, hogyan működik a charAt metódus. A Firefox szó adott egyik változóban és egy tömbben számok – a lehetséges sorszámok a szó betűihez, keverve.
Az első ismétlés a szó betűit az eredeti sorrendben az első bekezdéshez adja. Egyszerre is átadhatnánk, de így szóközöket tehetünk a betű közé.
A második ismétlés ugyanazokat a betűket adja a második bekezdéshez, a t tömb által megadott sorrendben.
Végezd el a következő következő lépések:
- Az idézet kiválasztása és befecskendezése az oldal betöltésekor történik, így a függvényt a testcímke betöltési eseményéhez kapcsoljuk.
- Adja hozzá a négy idézőjelet egy tömbhöz.
- Azonosítsa a div-et, véletlenszerűen indexeljen egy tömböt és helyezze be az idézetet.
Hozza létre a hívandó függvényt, ha a benyújtás esemény megtörténik.
Létrehozhat egy listát az űrlap elemeiről (ha a "*"-ot a címke neveként használja), ne használja az elküldés gombját. < br /> Az eredeti kérdés, mint a helyőrző tulajdonság value értéke, a helyes válasz kiszámítása. Hasonlítsa össze a szövegdobozban megadott értékkel.
Számolja ki a helyes válaszokat, és mutassa meg az eredményt.
Lehet, hogy tudnia kell, hogy a változási esemény nem működik a képpel, ezért meg kell hívnia a funkciót ezt a feladatot kétszer kezeljük: egyszer a függvényből, amely a véletlen változást kezeli, és az, amelyik kezeli a tartományelemet.
A könnyebb mód az, hogy paraméterként adja meg a kép számát. Attól függően, hogy hogyan kezelte a problémákat eddig, előfordulhat, hogy a számot a kép nevéről kell megkapnia. Ha ezt megteszi, lehet, hogy tudnia kell, hogy az src tulajdonság tartalmazza a kép abszolút elérési útját, így könnyebb megtalálni a végső számot.
var t=[5, 6, 9, 15, 7];
for (i=4;i>=0;i--) this.innerHTML+=t[i]+ " ";
<img id="im1" src="pic.jpg">
var t=document.getElementById("im1").src;
var nr=t.length;
alert(nr);
var text="A Truth thats told with bad intent Beats all the Lies you can invent";
var nr=text.length;
var i=nr-5;
var j=5;
this.innerHTML=text.charAt(i)+" "+ text.charAt(j);
