Példák megtekintéséhez, kattintsunk a kiválasztott meghatározásra.
Meghatározás. | Leírás. |
---|---|
document.write() | Közvetlen írás, weboldalba. |
document.writeln() | Többszörös kiíratásnál, szóközt alkalmaz. |
innerHTML | + vagy += Írás weboldalba, meghatározott jelölőelembe. |
alert( ) | Szöveg kiíratása, üzenő-ablakban jelenik meg. |
+ | Szavak, változók, vagy mindkettő összefűzése. |
parseInt(); | Csak az egésszámokat olvassa ki. Ha a szövegsor eleje, számokat is tartalmaz. |
parseFloat(); | Teljes számértéket kiolvassa (14 tizedesig). Ha a szövegsor eleje, számokat is tartalmaz. |
length; | Szövegfolyam vagy tömb hossza. |
substring(x,y); | x-től y-ig található karakterek keresése. (x és y értéke egészszám) |
charAt(x); | Egy karakter keresése, az x értéknek megfelelő helyen. |
charCodeAt() | String, azaz, karakter ASCII értéke. |
String.fromCharCode() | ASCII értékhez tartozó string. |
indexOf("szó"); | Keresett szó, hányadik karakterláncszem után helyezkedik el. |
lastIndexOf ("szó"); | Meghatározott szó keresése, visszafelé. |
split(" ") | Részekre szedi a megadott szövegrészt |
join( ) | Újrarendezi a részekre szedett szövegeket. |
sort( ) | Tömb elemeiben tárolt szöveget, ABC sorrendbe rendez |
reverse() | Fordított ABC sorrendbe rendezés. |
toLowerCase() | Karaktereket kisbetűsre változtatja |
toUpperCase() | Karaktereket nagybetűsre változtatja |
Max és Min | Tömbelemek Max és Min értéke. |
A weblapok minden elemét vezérelhetjük, minden elemet tetszőleges pozícióba helyezhetünk.
A HTML objektumok csoportjai rétegeket alkotnak, ezeket külön egységként kezelünk.
Egyedi rétegeket is létrehozhatunk a <div> és a <span> elemekkel.
De önmagukban a html oldalon, semmi formázási hatásuk sincs, a bennük elhelyezkedő szövegrészre.
- A span egy tetszőleges részt jelöl ki a html dokumentumban.
- A div is hasonlóan jár el, de ez egy sortörést helyez el a tartalmi rész előtt és után.
Ahhoz, hogy ezen rétegelemekben megjelenő szövegrész megjelenési formájára hatással legyünk, megtehetjük CSS, azaz stílus fájlban vagy JavaSripttel.
Ennek feltétele, hogy azonosítót rendeljünk a kezdő jelölőelemekhez.
CSS, azaz stílusfájl, elfogadja az id egyedi és a class osztályazonosítót, JavaScripttel az id egyedi azonosítóval rendeelkező elemek beazonosítása, biztonságosabb.
Zárójelek (..) közé, vagy változóhoz történő rendelés esetén:
Szöveget, mely tartalmazhat számokat is, idézőjelek közé kell beírni.
Számokat, melyek szöveget nem tartalmaznak, nem kell idézőjelek közé írni.
Változók neveit, akár szöveget, akár számokat tartalmaznak, nem kell idézőjelek közé írni.
Kiíratás szempontjából számokat is elhelyezhetünk idézőjelek között, de az idézőjelek közötti számok, szövegnek minősülnek, és ezekkel, nem lehet matematikai feladatokat elvégezni.
<body>
<script language="JavaScript" type="text/javascript" >
szoveg1 = "Aki nem lép egyszerre. ";
szoveg2 = "Nem kap rétest estére. ";
osszefuzes = szoveg1 + szoveg2 ;
document.write (osszefuzes);
</script>
</body>
Fenti programunk eredménye:
Aki nem lép egyszerre. Nem kap rétest estére.
Többszörös kiíratásnál, szóköz alkalmazása. Összehasonlításhoz, elsőként a document.write() függvényt, másodikként a document.writeln() függvényt teszteljük. document.write("Első"); document.write("Második"); document.write("Harmadik"); document.writeln("Első"); document.writeln("Második"); document.writeln("Harmadik");
Fenti programok eredményei:
document.write kiíratásnál = ElsőMásodikHarmadik // Szavak egybeíródnak. document.writeln kiíratásnál = Első Második Harmadik // Szavak szóközzel elkülönülnek.
<script language="JavaScript" type="text/javascript" >
szoveg1 = "Aki nem lép egyszerre. ";
szoveg2 = "Nem kap rétest estére. ";
osszefuzes = szoveg1 + szoveg2 ;
alert (osszefuzes);
</script>
Eredmény ugyan az, mint a document.write kiíratásnál.
Eltérés csak annyi, hogy itt, egy üzenő-ablakban jelenik meg, a kiíratás.
Megjegyzés:
Az alert üzenő ablakában nem alkalmazható a sorlezáró <br /> utasítás, és az ENTER billentyű leütése sortörésre.
Helyettük a "\n" utasítás alkalmazható sorlezárásra, sortörésre.
alert ("Aki nem lép egyszerre."+'\n'+"Nem kap rétest estére."+'\n\n');
<p id="kiiratas"></p> <script language="JavaScript" type="text/javascript" > id = document.getElementById("kiiratas"); // Változóhoz rendeljük a keresendő egyedi id azonosítót. szoveg1 = "Aki nem lép egyszerre. "; szoveg2 = "Nem kap rétest estére. "; osszefuzes = szoveg1 + szoveg2 ; id.innerHTML += osszefuzes; </script>
Eredmény ugyan az, mint a document.write kiíratásnál.
Eltérés csak annyi, hogy itt, mi határozzuk meg, a kiíratás helyét.
Az innerHTML utasítással, nem csak kiírathatunk, tetszőleges jelölőelem tartalmát is, lekérdezhetjük.
<p id="tesztszoveg">Ez egy teszt szöveg, melyet az innerHTML utasítással kérdezünk le.</p> <p> <script language="JavaScript" type="text/javascript"> var lekerdezett=document.getElementById('tesztszoveg').innerHTML; document.write("Lekérdezett jelölőelem tartalma = " +lekerdezett); </script> </p>
Fenti programunk eredménye:
Lekérdezett jelölőelem tartalma = Ez egy teszt szöveg, melyet az innerHTML utasítással kérdezünk le.
A szemléltetés végett, az első szövegsor végére, nem teszünk pontot
Kettő adattal dolgozunk:
1. Első szövegsor
2. Második szövegsor.
Szöveget, közvetlen a zárójelek közé írjuk: document.write ("Első szövegsor" + "Második szövegsor."); Eredmény: Első szövegsorMásodik szövegsor. // A két szövegsor, egybeíródott, nincs szóköz. Szóközbillentyűt leütjük, első mondat végén az idézőjel előtt, vagy a második mondatnál
az első idézőjelet követően, akkor, szóköz lesz a kiíratásnál is. document.write ("Első szövegsor "+"Második szövegsor"); // Vagy így: document.write ("Első szövegsor"+" Második szövegsor"); Eredmény: Első szövegsor Második szövegsor.
Szöveget változókhoz rendeljük: szoveg1 = "Első szövegsor"; szoveg2 = "Második szövegsor"; osszefuzes = szoveg1 + szoveg2 ; // Kiíratást meghatározhatjuk így: document.write (osszefuzes); // Vagy így: document.write (szoveg1 + szoveg2); // Vagy így: document.write (szoveg1 += szoveg2); Eredmény: Első szövegsorMásodik szövegsor. // A két szövegsor, egybeíródott, nincs szóköz. Szóközbillentyűt leütjük, első mondat végén az idézőjel előtt, vagy a második mondatnál
az első idézőjelet követően, akkor, szóköz lesz a kiíratásnál is. // Első szövegsornál alkalmazunk szóközt, vagy a második szövegsornál, az teljesen mindegy. szoveg1 = "Első szövegsor "; szoveg2 = " Második szövegsor";
Szóközt elhelyezhetünk, közvetlen a kiíratásban is, idézőjelek között. szoveg1 = "Első szövegsor"; szoveg2 = "Második szövegsor"; document.write (szoveg1+" "+szoveg2); Eredmény: Első szövegsor Második szövegsor.
Szöveg és változó összefűzése.(Változó nevét nem, de a szöveget, idézőjelek közé kell beírni.) szoveg1 = "Első szövegsor"; document.write (szoveg1+"Második szövegsor"); Eredmény: Első szövegsorMásodik szövegsor. // A két szövegsor, egybeíródott, nincs szóköz. //Szóközt, itt is az idézőjeleket követően helyezzük el. document.write (szoveg1+" Második szövegsor");
Akkor alkalmazhatjuk, ha a számok, a szöveget megelőzően helyezkednek el.
<p>
<script language="JavaScript" type="text/javascript" >
szoveg = "125.623 is, aki nem lép egyszerre. ";
szamok=parseInt(szoveg);
document.write (szamok);
</script>
</p>
Fenti programunk eredménye: 125
<p>
<script language="JavaScript" type="text/javascript" >
szoveg = "125.623 is, aki nem lép egyszerre. ";
szamok=parseFloat(szoveg);
document.write (szamok);
</script>
</p>
Fenti programunk eredménye: 125.623
<p>
<script language="JavaScript" type="text/javascript" >
szoveg = "125.623 is, aki nem lép egyszerre. ";
szoveg_hossza=szoveg.length;
document.write (szoveg_hossza);
</script>
</p>
Fenti programunk eredménye: 35
A kapott érték, tartalmazza a karakterek számát + a szóközök számát is.
<p> <script language="JavaScript" type="text/javascript"> var tomb=new Array; tomb[0]=0; // 1. Első tömbelem. tomb[1]=1; // 2. Második tömbelem. tomb[2]=2; // 3. Harmadik tömbelem. tomb[3]=3; // 4. Negyedik tömbelem. tomb[4]=4; // 5. Ötödik tömbelem. tombhossza=tomb.length; document.write(tombhossza); </script> </p>
Fenti programunk eredménye: 5
<p>
<script language="JavaScript" type="text/javascript" >
szoveg = "125.623 is, aki nem lép egyszerre. ";
szovegresz=szoveg.substring(12,16);
document.write (szovegresz);
</script>
</p>
Fenti programunk eredménye: aki
Meghatározott értéktől, a mondat végéig.
<p>
<script language="JavaScript" type="text/javascript" >
szoveg = "125.623 is, aki nem lép egyszerre. ";
stringek_szama=szoveg.length;
szovegresz=szoveg.substring(12,stringek_szama);
document.write (szovegresz);
</script>
</p>
Fenti programunk eredménye: aki nem lép egyszerre.
Kezdettől, a mondat végéig.
<p>
<script language="JavaScript" type="text/javascript" >
szoveg = "125.623 is, aki nem lép egyszerre. ";
stringek_szama=szoveg.length;
szovegresz=szoveg.substring(0,stringek_szama);
document.write (szovegresz);
</script>
</p>
Fenti programunk eredménye: 125.623 is, aki nem lép egyszerre.
charAt(x); Keresés az általunk meghatározott pozícióban.
Sorszámozás 0-val kezdődik, azaz, az első string értéke = 0
Emlékeztető: stringek száma = karakterek száma + a szóközök száma.
Véletlen olyan értéket határozunk meg, mely szóközre esik, kiíratásnál nem jelenik meg, semmi.
Keressük a 9. pozícióban található stringet.
<p>
<script language="JavaScript" type="text/javascript" >
szoveg = "125.623 is, aki nem lép egyszerre. ";
szovegresz=szoveg.charAt(9);
document.write (szovegresz);
</script>
</p>
Fenti programunk eredménye: s
Stringek, karakterek beolvasása, 0-val kezdődik.
String = karakterek és a szóköz is.
<script language="JavaScript" type="text/javascript">
szoveg = "A zöld erdő közepén!"; var kod1 = szoveg.charCodeAt(0); // "A" btű, a 0-ik karakter, azaz, string. document.write ('kod1 = '+kod1 +'<br>'); var kod4 = szoveg.charCodeAt(3); // "ö" btű, a 3-ik karakter, azaz, string. document.write ('kod4 = '+kod4 +'<br>');
// Tetszőleges karakter, azaz, string kódszámának lekérdezése. var betukod = 'a'.charCodeAt(); document.write ('betukod = '+betukod +'<br>');
</script>
<script language="JavaScript" type="text/javascript">
k65 = String.fromCharCode(65);
document.write ('k65 = '+k65+'<br>');
tobb = String.fromCharCode(65,193,69); // több kódszám karakterei.
document.write ('tobb = '+tobb+'<br>');
</script>
| Eredmény |
indexOf(......) Szövegfolyam elejétől, hányadik stringet követően található.
Szövegfolyamban hányadik stringet követően található, az első "nem" szó <p> <script language="JavaScript" type="text/javascript" > szoveg = "125.623 is, aki nem lép egyszerre, nem lesz katona."; keresett_szo=szoveg.indexOf("nem"); document.write (keresett_szo); </script> </p> Fenti programunk eredménye: 16
Keresés az általunk meghatározott érték után. Szövegfolyamban a "nem" szó, kétszer is szerepel. Az elsőt már tudjuk 16, a második keresésére növeljük ezt az értéket 2-vel <p> <script language="JavaScript" type="text/javascript" > szoveg = "125.623 is, aki nem lép egyszerre, nem lesz katona."; keresett_szo=szoveg.indexOf("nem",18); document.write (keresett_szo); </script> </p> Fenti programunk eredménye: 35
lastIndexOf(......) Szövegfolyam elejétől, hányadik stringet követően található.
Szövegfolyamban hányadik stringet követően található, visszafelé keresésénél, az első "nem" szó <p> <script language="JavaScript" type="text/javascript" > szoveg = "125.623 is, aki nem lép egyszerre, nem lesz katona."; keresett_szo=szoveg.lastIndexOf("nem"); document.write (keresett_szo); </script> </p> Fenti programunk eredménye: 35
Keresés visszafelé az általunk meghatározott érték után. Szövegfolyamban a "nem" szó, kétszer is szerepel. Visszafelé az elsőt már tudjuk 35, a második keresésére csökkentsük ezt az értéket 2-vel <p> <script language="JavaScript" type="text/javascript" > szoveg = "125.623 is, aki nem lép egyszerre, nem lesz katona."; keresett_szo=szoveg.lastIndexOf("nem",33); document.write (keresett_szo); </script> </p> Fenti programunk eredménye: 16
split(" ") Részekre szedi a megadott szövegrészt, és tömb formátumban tárolja az adatokat.
Zárójelben, az idézőjelek között meghatározhatjuk, mely szövegfolyam elválasztó, vagy lezáró írásjelnél válassza szét, a szöveget.
Példa, elválasztási jelekre:
<script language="JavaScript" type="text/javascript" > szoveg = "125.623 is, aki nem lép egyszerre, nem lesz katona. "; szavak=szoveg.split(" "); // Szövegfolyam feldarabolása részekre, és tárolásuk a "szavak" nevű tömbben. szavak_db=szavak.length; // Szövegfolyam mennyi részből (szóból) áll? // document.write (szavak); // Ez a kiíratás nem kell, de megnézhető vele, hogyan dolgozott a program. document.write ("<br />"); document.write (szavak_db); // Részek darabszámának kiíratása. document.write ("<br />"); // Tömbelemek sorszámozása, 0-val kezdődik. Ezért, a 3. tömbelem, a 4.szót tárolja. document.write (szavak[3]); // A 3. Tömbelem, milyen részt (szót) tárol. </script> Fenti programunk eredménye:
Részek (szavak) darabszáma = 10 A 3. Tömbelemben tárolt adat = nem
join(" ") Újrarendezésnél a zárójelek közé, ugyanazt a meghatározást kell beírni, melyet feldarabolásnál alkalmaztunk.
<script language="JavaScript" type="text/javascript" > szoveg = "125.623 is, aki nem lép egyszerre, nem lesz katona. "; szavak=szoveg.split(" "); // Szövegfolyam feldarabolása részekre, és tárolásuk a "szavak" nevű tömbben. szavak_db=szavak.length; // Szövegfolyam mennyi részből (szóból) áll? ujra_rendezes=szavak.join(" "); // Feldarabolt szövegfolyam, újrarendezése. document.write (szavak_db); // Részek darabszámának kiíratása. document.write ("<br />"); document.write (ujra_rendezes); // Újrarendezés kiíratása. </script> Fenti programunk eredménye:
Részek (szavak) darabszáma = 10 Újrarendezett szöveg = 125.623 is, aki nem lép egyszerre, nem lesz katona.
ABC_sorrendbe.sort();
<script language="JavaScript" type="text/javascript" > szoveg = "125.623 is, aki nem lép egyszerre, nem lesz katona. "; szavak=szoveg.split(" "); // Szövegfolyam feldarabolása részekre, és tárolásuk a "szavak" nevű tömbben. szavak_db=szavak.length; // Szövegfolyam mennyi részből (szóból) áll? abc_rendezes=szavak.sort(); // Tömb elemeiben tárolt adatok, ABC sorrendbe rendezése. document.write (szavak_db); // Részek darabszámának kiíratása. document.write ("<br />"); // Tömbelemek sorszámozása, 0-val kezdődik. Ezért, a 0. tömbelem, az 1.szót tárolja. document.write (abc_rendezes[0]); // Újrarendezés után, az első adat kiíratása. </script> Fenti programunk eredménye: Részek (szavak) darabszáma = 10 ABC szerint, az első tárolt adat = 125.623
Ha minden adatot ki akarunk íratni, használjuk a for ciklust. for(i=1; i<szavak_db; i++){ document.write ("<br />"+i+". "+abc_rendezes[i]); } Fenti for ciklus eredménye: 1. 125.623 2. aki 3. egyszerre, 4. is, 5. katona. 6. lesz 7. lép 8. nem 9. nem
ABC_sorrend_visszafelé.reverse();
<script language="JavaScript" type="text/javascript"> szoveg ="125.623 is, aki nem lép egyszerre, nem lesz katona."; // Idézőjeleknél ne legyen szóköz, mert más értéket kapunk. szavak=szoveg.split(" "); // Szövegfolyam feldarabolása részekre, és tárolásuk a "szavak" nevű tömbben. szavak_db=szavak.length; // Szövegfolyam mennyi részből (szóból) áll? abc_vissza=szavak.reverse(); // Tömb elemeiben tárolt adatok, ABC sorrend visszafelé rendezése. document.write (szavak_db); // Részek darabszámának kiíratása. document.write ("<br />"); // Tömbelemek sorszámozása, 0-val kezdődik. Ezért, a 0. tömbelem, az 1.szót tárolja. document.write (abc_vissza[0]); // Újrarendezés után, hátúlról az első adat kiíratása. </script> Fenti programunk eredménye: Részek (szavak) darabszáma = 9 ABC szerint visszafelé, az első tárolt adat = nem
Ha minden adatot ki akarunk íratni, használjuk a for ciklust. for(i=0; i<szavak_db; i++){ document.write ("<br />"+i+". "+abc_vissza[i]); } Fenti for ciklus eredménye: 0. nem 1. nem 2. lép 3. lesz 4. katona. 5. is, 6. egyszerre, 7. aki 8. 125.623
Kisbetűsre.toLowerCase();
<script language="JavaScript" type="text/javascript" >
szoveg = "Aki nem lép egyszerre, NEM LESZ KATONA.";
kisbetus=szoveg.toLowerCase();
document.write (kisbetus);
</script>
Fenti programunk eredménye: aki nem lép egyszerre, nem lesz katona.
Nagybetűsre.toUpperCase();
<script language="JavaScript" type="text/javascript" >
szoveg = "Aki nem lép egyszerre, NEM LESZ KATONA.";
nagybetus=szoveg.toUpperCase();
document.write (nagybetus);
</script>
Fenti programunk eredménye: AKI NEM LÉP EGYSZERRE, NEM LESZ KATONA.
Tömbünk elemeiben tárolt legnagyobb "Max" érték kiíratása.
Létrehozunk egy számokat tartalmazó tömböt: <script language="JavaScript" type="text/javascript"> var tomb=new Array; tomb[0]= 12; tomb[1]= 1; tomb[2]= -85; tomb[3]= 84; tomb[4]= 5; tomb[5]= 16; var Thossz=tomb.length; var TMax = -100; // Meghatározzuk, mely számtól kell, a legnagyobb számot keresni. for(i=0; i < Thossz; i++) { var ertek=tomb[i]; if(TMax < ertek) {var TMax=ertek;} } document.write ("<br> Tömbben tárolt legnagyobb érték = "+TMax); </script>
Fenti programunk eredménye: Tömbben tárolt legnagyobb érték = 84
Tömbünk elemeiben tárolt legkisebb "Min" érték kiíratása.
Létrehozunk egy számokat tartalmazó tömböt: <script language="JavaScript" type="text/javascript"> var tomb=new Array; tomb[0]= 12; tomb[1]= 1; tomb[2]= -85; tomb[3]= 84; tomb[4]= 5; tomb[5]= 16; var Thossz=tomb.length; var TMin = 100000; // Meghatározzuk, mely számtól kell, a legkisebb számot keresni. for(i=0; i < Thossz; i++) { var ertek=tomb[i]; if(TMin > ertek) {var TMin=ertek;} } document.write ("<br> Tömbben tárolt legkisebb érték = "+TMin); </script>
Fenti programunk eredménye: Tömbben tárolt legkisebb érték = -85