Weblap Hová jutunk?

Szöveges műveletek 520.

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.

 


Rétegek között elhelyezkedő elemek

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.

 


Szöveg vagy adatok kiíratása.

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.

  1. document.write(......);
    Kiíratás a szövegfolyamban jelenik meg, és ott, ahol a scriptet megírjuk, vagy a külső scriptet meghívjuk.
    De, nem alkalmazható a head szakaszban megírt script esetén.

  2. alert(........);
    Mindenhol alkalmazható, de a kiíratás nem a szövegfolyamban, hanem, egy üzenő-ablakban jelenik meg.

  3. id.innerHTML ( = vagy += )
    Mindenhol alkalmazható kiíratásra, és lekérdezésre is.
    Kiíratás a szövegfolyam tetszőleges területén. Kiíratás helyét, nekünk kell meghatározni.
    Kiíratás helyének, bármelyik html jelölőelemet kiválaszthatjuk, amelyik rendelkezik egyedi "id" azonosítóval.
    Az = azaz egyenlőségjel esetén, törli a már meglévő tartalmat, és beírja az új tartalmat.
    A += azaz plusz-egyenlő esetén, marad a már meglévő tartalom, és ezt követően, beírja az új tartalmat.

1. document.write( )
<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.

2. document.writeln()
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.
2. alert( )
<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');

3. innerHTML
<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.

Vissza a lap elejére!

 


Adatok összefűzése.
+ vagy +=

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");

Vissza a lap elejére!

 


Számok kinyerése, a szövegfolyamból.

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

Vissza a lap elejére!

 


Szöveg vagy tömb hosszának meghatározása.

<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

Vissza a lap elejére!

 


Karakterek keresése,
az általunk meghatározott tartományban.
substring(x,y);

<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.

Vissza a lap elejére!

 


Karakterek keresése

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

Vissza a lap elejére

 


ASCII Unicode meghatározása.
charCodeAt()

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>

Eredmény



Vissza a lap elejére

 


Unicode szám konvertálása, karakterré
String.fromCharCode()

<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

Vissza a lap elejére!

 


Szavak keresése előre.

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

Vissza a lap elejére!

 


Szavak keresése visszafelé.

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

Vissza a lap elejére!

 


Szövegfolyam feldarabolása.

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

Vissza a lap elejére!

 


Feldarabolt szöveg, újrarendezése.

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.

Vissza a lap elejére!

 


Tömb elemeiben tárolt adatok,
ABC sorrendbe rendezése.

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 

Vissza a lap elejére

 


Fordított ABC sorrendbe rendezés.

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 

Vissza a lap elejére!

 


Karakterek megváltoztatása.

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.  


Vissza a lap elejére

Tömbelemek Max és Min értéke.

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






Vissza a lap elejére!