Új metódusok ebben a leckében:
a_fo_szoveg.search(a szövegrész, amit keresünk) – ez a metódus a string (szöveg) objektumhoz tartozik. Ezt a metódust arra használjuk, hogy egy szöveget megtaláljunk egy másik szövegben. Az eredmény -1, ha nem találja meg, különben egy szám, amely azt adja meg, hogy a keresett szöveg hol található az eredeti szövegen belül.
getComputedStyle(elem) – a window objektum egy metódusa, amely arra alkalmas, hogy egy HTML elemre alkalmazott tényleges CSS formázást lekérdezzük. Stílust az elem a HTML címkén belülről, a dokumentum fejlécéből és a CSS fájlokból akár több osztályból és egyéb beállításból kaphatja, így hát a válasz eldöntése nem olyan egyszerű.
Egy sor beállítást kapunk vissza, és a getPropertyValue metódust kell használni, hogy a kívánt eredményt megtaláljuk. Kétparaméteres változat is létezik.
getPropertyValue(a tulajdonság neve) – ezt a metódust a getComputedStyle metódus párjaként lehet használni arra, hogy egy konkrét tulajdonság értékét visszakapjuk.
parseInt – egy globális metódus, amely alkalmas szöveget számmá alakítani – az átalakítást a szöveg elején kezdi. Ha az elején nincs számjegy, az eredmény nem egy érvényes szám.
confirm(‘az üzenet szövege’) – a window objektum ezen metódusa, arra alkalmas, hogy üzenetet jelenítsen meg, akár az alert metódus, de ez esetben van visszajelzésre lehetőség. Ha a felhasználó az Ok-ra kattint, igaz eredményt térít vissza és hamisat, ha a Cancel-t választja.
Új események ebben a leckében:
onmouseenter – ez az esemény akkor váltódik ki, ha a kurzor egy objektum fölé ér, amelyet figyelünk erre az eseményre.
onmouseleave – ez az esemény akkor váltódik ki, ha a kurzor elhagyja a megfigyelt elemet.
Példa egy CSS tulajdonság értékének lekérésére:
Az eddigiekben módosítottunk már HTML elemek stílusát, de a beállított CSS tulajdonságok értékeit még nem kértük soha vissza. Egy HTML tulajdonság értékének lekérdezéséhez, csupán a tulajdonság nevét kell tudnunk. Például a this.src-vel az éppen aktuális kép forrását érjük el.
Ahhoz, hogy egy CSS értéket megtaláljunk a getComputedStyle és a getPropertyValue metódusok kombinációit használjuk. A fenti példában a change függvény megtalálja annak az elemnek a színét, amelyre kattintottunk, és a másik elemre alkalmazzuk háttérszínként.
A getComputedStyle(x) metódus az x objektum minden stílusbeállítását összeszedi, és a getPropertyValue metódus a szövegszínt (color) kéri ki, amely paraméterként van megadva.
Mi a feltétel?
Egy kifejezés változókból és műveletekből épül fel. A feltétel egy kifejezés, amelynek az eredménye egy logikai érték, azaz igaz vagy hamis.
Műveletek, amelyek logikai eredménnyel járnak: <, <=, >, >=, ==, !=.
Példa feltételekre:
xx==10 – ez a feltétel igaz, ha az x változó értéke 10 és hamis minden más értékre.
x!=10 – ez a feltétel igaz minden értékre kivétel a 10, és hamis 10-re.
Több feltételt összefoghatunk && (és), || (vagy).
A && jelet használjuk, ha mindkét feltételnek igaznak kell lennie.
A || jelet használjuk, ha elég az is, hogy az egyik feltétel igaz.
Példa kombinált feltételekre:
(x>=10) && (x<=50) – ez a feltétel igaz, minden olyan x értékre a [10, 50] intervallumból és hamis minden értékre az intervallumon kívül.
(x==10) || (x==20) – ez a feltétel két lehetséges értékre, a 10 és 20 értékre igaz. Minden más értékre az eredmény hamis.
Mi az if struktúra?
Ha egy döntést kell hozzunk a programon belül, nem helyezhetünk el egy feltételt magában a kódban. Például egy if struktúrában helyezhetünk el egy feltételt. Egy if struktúra egy feltétel alapján, amely igaz vagy hamis lehet, két utasítássor közül választ.
Az if struktúra általános alakja:
if (feltétel) {
utasítások, amelyeket a feltétel igaz értékére hajtunk végre.
} else {
utasítások, amelyeket a feltétel hamis értékére hajtunk végre.
}
Az else rész kihagyható, ha nem szükséges.
A kapcsos zárójelek elhagyhatóak, ha csak egy utasítás szerepel bennük.
Példa az if struktúrára:
A fenti példában az x változó a kép méretét (szélességét) tárolja, a HTML címkében tárolt értéket veszi át.
Ha a kép mérete kisebb, mint 300 pixel, a kép 10 pixellel lesz nagyobb gombnyomásra. Egy if struktúrát használva határt szabhatunk a növekedésnek.
Nincs else rész – adhattunk volna egyéb tennivalókat, ha már nem nőhet tovább a kép.
Példa szövegek (karakterláncok) összehasonlítására:
A fenti példában két karakterláncot hasonlítunk össze, két bekezdés elem tartalmát. Az == művelet szövegekre is működik, nem csak számokra. Az eredményt egy figyelmeztető ablakban jelenik meg. 
Ha a kép nevét szeretnénk elérni, problémákba ütközhetünk: az eredmény a teljes útvonalat adja vissza a kép nevével együtt. Az == operátor csak akkor működik, ha a teljes (abszolút) útvonalat beírjuk a kódba, de az útvonal változik, ha másoljuk a mappát, a kód máshol nem működne.
Megoldhatjuk a problémát az x változóra alkalmazott search metódussal. Az eredmény -1, ha a small.jpg nem szerepel az x változó értékében.
A A legnépszerűbb programozási nyelvek 2018 címben, állítsa be az összes listaelemet az események onmouseenter benne egy funkcióval, az úgynevezett módosítsa és a onmouseleave egy funkcióval, úgynevezett changeback. Mindkét funkciónak hivatkoznia kell az aktuális objektumra (ez).
A függvény módosítása növelnie kell a 10 képpontos betűméretet, és a changeback funkciónak vissza kell állítania a kezdeti értékét.
if (this.width this.style.width+=10;
this.style.height+=10;
}
<div onclick="find(this)"> And it grew both day and night. Till it bore an apple bright. </div>
<script>
function find(x){
var t=x.innerHTML.search("both");
alert(t);
}
</script>
if (confirm("What do you say?")) this.innerHTML="I do not know.";
else this.innerHTML="I do not care.";
<img onclick="change(this)" src="small.jpg" width="350">
<script>
function change(){
var x=this.width;
if (x=300) alert(x);
else alert("NO");
}
</script>
