JavaScript: tömbök

A tömb (array) olyan adatszerkezet, amelyet nevesített elemek csoportja alkot, melyekre sorszámukkal (indexükkel) lehet hivatkozni.
A tömb első eleme a 0 . elem! A tömb utolsó eleme a length-1 (tömb hossza – 1). elem!
Adott tömbelemre a tömbnév után tett szögletes zárójelben hivatkozunk: T[3]

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var tomb = new Array("alma","körte","barack","meggy");
        document.write("tömb elemszáma: ",tomb.length,"<br>");
        document.write("tömb 1 eleme: ", tomb[0],"<br>");
        document.write("tömb utolsó eleme: ",tomb[tomb.length-1],"<br>");
        //tömb elemének cseréje: barack helyett cseresznye
        tomb[2]="cseresznye";
        
        //tömb elemeinek kiírása függvénnyel
        function tombelemei()
        {
            for(i=0; i<tomb.length; i++)
            {
            document.write(" ",tomb[i]);
            }
            document.write("<br>");
        }
        tombelemei();
        //új elem a tömb végére
        tomb.push("citrom");
        tombelemei();
        
        //új elem a tömb elejére
        tomb.unshift("málna");
        tombelemei();
        //tömb első elemének törlése
        document.write("Tömb első eleme törölve!","<br>");
        tomb.shift();
        tombelemei();
                
        //tömb utolsó elemének törlése
        document.write("Tömb utolsó eleme törölve!","<br>");
        tomb.pop();
        tombelemei;
        //tömb elemeinek rendezése
        tomb.sort();
        tombelemei();
        //tömb elemei visszafelé, önmagában nem rendez, csak visszafelé írja ki
        tomb.reverse();
        tombelemei(); 
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

var tomb = new Array("alma","körte","barack","meggy");

document.write("tömb elemszáma: ",tomb.length,"<br>");

document.write("tömb 1 eleme: ", tomb[0],"<br>");

document.write("tömb utolsó eleme: ",tomb[tomb.length-1],"<br>");

//tömb elemének cseréje: barack helyett cseresznye

tomb[2]="cseresznye";

//tömb elemeinek kiírása függvénnyel

function tombelemei()

{

for(i=0; i<tomb.length; i++)

{

document.write(" ",tomb[i]);

}

document.write("<br>");

}

tombelemei();

//új elem a tömb végére

tomb.push("citrom");

tombelemei();

//új elem a tömb elejére

tomb.unshift("málna");

tombelemei();

//tömb első elemének törlése

document.write("Tömb első eleme törölve!","<br>");

tomb.shift();

tombelemei();

//tömb utolsó elemének törlése

document.write("Tömb utolsó eleme törölve!","<br>");

tomb.pop();

tombelemei;

//tömb elemeinek rendezése

tomb.sort();

tombelemei();

//tömb elemei visszafelé, önmagában nem rendez, csak visszafelé írja ki

tomb.reverse();

tombelemei();

</script>

</body>

</html>

A sort() csak stringek esetén működik alap esetben! Számjegyek esetén csak az első számjegyet vizsgálja, ezért a 20 nagyobb lesz például a 100-nál, ami téves sorrendet eredményez! Szerencsére a sort() függvénynek van egy összehasonlító funkciója, ami számok esetén alkalmazható. tomb.sort(function(a, b){return a – b});

A következő példában létrehozunk egy számokat tartalmazó tömböt, és rendezzük a tartalmát növekvő, majd csökkenő, majd véletlen sorrendbe! Megnézzük az első és utolsó elem törlését, majd új elemek hozzáadását helyettük.
Ha növekvő sorrendbe rendezzük a tömböt, akkor a legkisebb elem a tömb 0.eleme lesz, a legnagyobb a tömb elemszáma-1. elem.

<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>JavaScript tananyag</title>
 </head>
   <body>   
<script>
var tomb = new Array(5,17,82,100,13,1,0,20,33);
//A tömb elemeinek kiírása, függvény létrehozása
function kiiratas() {
for (i =0; i<tomb.length; ++i) {
	document.write(tomb[i],',');}
	document.write('<br>');
	}
document.write("A rendezetlen tömb:",'<br>');
kiiratas(); //kiiratas függvény meghívása
//Számok sorbarendezése, függvény létrehozása	
function rendezes() {
  tomb.sort(function(a, b){return a - b});
  }
rendezes(); //rendezes függvény meghívása
document.write('<br>',"A rendezett tömb:",'<br>');
kiiratas(); //kiiratas függvény meghívása
document.write('<br>',"A legkisebb elem:",tomb[0]);
document.write('<br>',"A legnagyobb elem:",tomb[tomb.length-1],'<br>');
function visszafele() {
  tomb.sort(function(a, b){return b - a});
  }
visszafele();
document.write('<br>',"A fordított sorrendű tömb:",'<br>');
kiiratas();
tomb.pop(); // utolsó elem törlése
tomb.shift(); // első elem törlése
document.write('<br>',"Az első és utolsó elem törölve",'<br>');
kiiratas();
tomb.push(200); // új elem beszúrása a tömb végére
tomb.unshift(2); // új elem beszúrása a tömb elejére
document.write('<br>',"Új elemek a tömb elején, végén",'<br>');
kiiratas();
</script>
</body>
</html>

<html>

<head>

<title>JavaScript tananyag</title>

</head>

<body>

var tomb = new Array(5,17,82,100,13,1,0,20,33);

//A tömb elemeinek kiírása, függvény létrehozása

function kiiratas() {

for (i =0; i<tomb.length; ++i) {

document.write(tomb[i],',');}

document.write('<br>');

}

document.write("A rendezetlen tömb:",'<br>');

kiiratas(); //kiiratas függvény meghívása

//Számok sorbarendezése, függvény létrehozása

function rendezes() {

tomb.sort(function(a, b){return a - b});

}

rendezes(); //rendezes függvény meghívása

document.write('<br>',"A rendezett tömb:",'<br>');

kiiratas(); //kiiratas függvény meghívása

document.write('<br>',"A legkisebb elem:",tomb[0]);

document.write('<br>',"A legnagyobb elem:",tomb[tomb.length-1],'<br>');

function visszafele() {

tomb.sort(function(a, b){return b - a});

}

visszafele();

document.write('<br>',"A fordított sorrendű tömb:",'<br>');

kiiratas();

tomb.pop(); // utolsó elem törlése

tomb.shift(); // első elem törlése

document.write('<br>',"Az első és utolsó elem törölve",'<br>');

kiiratas();

tomb.push(200); // új elem beszúrása a tömb végére

tomb.unshift(2); // új elem beszúrása a tömb elejére

document.write('<br>',"Új elemek a tömb elején, végén",'<br>');

kiiratas();

</script>

</body>

</html>

Tömb elemeinek összekeverés véletlenszerűen, Fisher-Yates módszer.

<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>JavaScript tananyag Fisher Yates keverés</title>
 </head>
   <body>   
<script>
var tomb = new Array(5,17,82,100,13,1,0,20,33);
//A tömb elemeinek kiírása, függvény létrehozása
function kiiratas() {
for (i =0; i<tomb.length; ++i) {
	document.write(tomb[i],',');}
	document.write('<br>');
	}
document.write("A rendezetlen tömb:",'<br>');
kiiratas(); //kiiratas függvény meghívása
function FisherYates() {
var i, j, k;
  for (i = tomb.length -1; i > 0; i--) {
    j = Math.floor(Math.random() * i)
    k = tomb[i]
    tomb[i] = tomb[j]
    tomb[j] = k
  }
 }
FisherYates();
document.write("Az összekevert elemekből álló tömb:",'<br>');
kiiratas(); //kiiratas függvény meghívása
</script>
</body>
</html>

<html>

<head>

<title>JavaScript tananyag Fisher Yates keverés</title>

</head>

<body>

var tomb = new Array(5,17,82,100,13,1,0,20,33);

//A tömb elemeinek kiírása, függvény létrehozása

function kiiratas() {

for (i =0; i<tomb.length; ++i) {

document.write(tomb[i],',');}

document.write('<br>');

}

document.write("A rendezetlen tömb:",'<br>');

kiiratas(); //kiiratas függvény meghívása

function FisherYates() {

var i, j, k;

for (i = tomb.length -1; i > 0; i--) {

j = Math.floor(Math.random() * i)

k = tomb[i]

tomb[i] = tomb[j]

tomb[j] = k

}

FisherYates();

document.write("Az összekevert elemekből álló tömb:",'<br>');

kiiratas(); //kiiratas függvény meghívása

</script>

</body>

</html>

Rendezetlen tömbből a legkisebb és a legnagyobb elem kiválasztása

Ehhez a Math.max() és Math.min() JavaScript függvényeket használhatjuk.

<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>JavaScript tananyag, rendezetlen tömb min/max értéke</title>
 </head>
   <body>   
<script>
var tomb = new Array(5,17,82,100,-200,500,1,0,20,33);
var tomb_minimuma=0;
var tomb_maximuma=0;
//A tömb elemeinek kiírása, függvény létrehozása
function kiiratas() {
for (i =0; i<tomb.length; ++i) {
	document.write(tomb[i],',');}
	document.write('<br>');
	}
document.write("A rendezetlen tömb:",'<br>');
kiiratas(); //kiiratas függvény meghívása
//minimum érték kiválasztása
function minimum_keres(arr) {
  return Math.min.apply(null, arr);
}
tomb_minimuma=minimum_keres(tomb);
//maximum érték kiválasztása
function maximum_keres(arr) {
  return Math.max.apply(null, arr);
}
tomb_maximuma=maximum_keres(tomb);
document.write("A legkisebb érték: ",tomb_minimuma,'<br>');
document.write("A legnagyobb érték: ",tomb_maximuma,'<br>');
</script>
</body>
</html>

<html>

<head>

<title>JavaScript tananyag, rendezetlen tömb min/max értéke</title>

</head>

<body>

var tomb = new Array(5,17,82,100,-200,500,1,0,20,33);

var tomb_minimuma=0;

var tomb_maximuma=0;

//A tömb elemeinek kiírása, függvény létrehozása

function kiiratas() {

for (i =0; i<tomb.length; ++i) {

document.write(tomb[i],',');}

document.write('<br>');

}

document.write("A rendezetlen tömb:",'<br>');

kiiratas(); //kiiratas függvény meghívása

//minimum érték kiválasztása

function minimum_keres(arr) {

return Math.min.apply(null, arr);

}

tomb_minimuma=minimum_keres(tomb);

//maximum érték kiválasztása

function maximum_keres(arr) {

return Math.max.apply(null, arr);

}

tomb_maximuma=maximum_keres(tomb);

document.write("A legkisebb érték: ",tomb_minimuma,'<br>');

document.write("A legnagyobb érték: ",tomb_maximuma,'<br>');

</script>

</body>

</html>

Feladat: sorsoljunk ötös és hatoslottó számokat! Rendezzük a kisorsolt számokat növekvő sorrendbe!

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var otoslotto = new Array;
        var hatoslotto = new Array;
        var db=0;
        var szam=0;
        //ötöslottó
        do{
            szam = Math.floor(Math.random()*89+1);
            if (!otoslotto.includes(szam))
            {
                otoslotto[db]=szam;
                db++;
            }
        }
        while(db<5);
        db = 0;
        szam = 0;
        //hatoslottó
        do{
            szam = Math.floor(Math.random()*44+1);
            if (!hatoslotto.includes(szam))
            {
                hatoslotto[db]=szam;
                db++;
            }
        }
        while(db<6);
        otoslotto.sort(function(a, b){return a - b});
        hatoslotto.sort(function(a, b){return a - b});
        document.write("Ötöslottó tippek: <br>");
        for (i=0; i<otoslotto.length; i++)
        {
            document.write(" ",otoslotto[i]);
        }
        document.write("<br> Hatoslottó tippek: <br>");
        for (i=0; i<hatoslotto.length; i++)
        {
            document.write(" ",hatoslotto[i]);
        }
    </script>
</body>
</html>

<html>

<head>

<title>Document</title>

</head>

<body>

var otoslotto = new Array;

var hatoslotto = new Array;

var db=0;

var szam=0;

//ötöslottó

do{

szam = Math.floor(Math.random()*89+1);

if (!otoslotto.includes(szam))

{

otoslotto[db]=szam;

db++;

}

while(db<5);

db = 0;

szam = 0;

//hatoslottó

do{

szam = Math.floor(Math.random()*44+1);

if (!hatoslotto.includes(szam))

{

hatoslotto[db]=szam;

db++;

}

while(db<6);

otoslotto.sort(function(a, b){return a - b});

hatoslotto.sort(function(a, b){return a - b});

document.write("Ötöslottó tippek: <br>");

for (i=0; i<otoslotto.length; i++)

{

document.write(" ",otoslotto[i]);

}

document.write("<br> Hatoslottó tippek: <br>");

for (i=0; i<hatoslotto.length; i++)

{

document.write(" ",hatoslotto[i]);

}

</script>

</body>

</html>

Feladat: sorsoljunk ki 1-90 közötti számokból ötöt, majd jelöljük be a kisorsolt számokat egy 90 elemű tömbön!

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //ötöslottó
        var otoslotto = new Array;
        var db=0;
        var szam=0;
        do{
            szam = Math.floor(Math.random()*89+1);
            if (!otoslotto.includes(szam))
            {
                otoslotto[db]=szam;
                db++;
            }
        }
        while(db<5);
        
        //90 elemű tömb feltöltése 1-90-ig
        var tomb = new Array;
        document.write("<p style='color:red;'>","Lottószámok a tömbben: ","</p>");
        for (i=1; i<91; i++)
        {
            tomb[i]=i;            
            if (otoslotto.includes(tomb[i]))
            {
                document.write("<b style='color:red;'>"," ",tomb[i],"</b>");
            }
            else
            {
            document.write(" ",tomb[i]);
            }
            if (i % 10 == 0) {document.write("<br>")}
        }
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

//ötöslottó

var otoslotto = new Array;

var db=0;

var szam=0;

do{

szam = Math.floor(Math.random()*89+1);

if (!otoslotto.includes(szam))

{

otoslotto[db]=szam;

db++;

}

while(db<5);

//90 elemű tömb feltöltése 1-90-ig

var tomb = new Array;

document.write("<p style='color:red;'>","Lottószámok a tömbben: ","</p>");

for (i=1; i<91; i++)

{

tomb[i]=i;

if (otoslotto.includes(tomb[i]))

{

document.write("<b style='color:red;'>"," ",tomb[i],"</b>");

}

else

{

document.write(" ",tomb[i]);

}

if (i % 10 == 0) {document.write("<br>")}

}

</script>

</body>

</html>

Feladat: sorsoljuk ki az ötös és hatoslottó számait!
(5db random szám 1-90 között, illetve 6db random szám 1-45 között)
Rendezzük sorrendbe őket! Ahol lehet használjunk függvényeket!

<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>Lottó</title>
 </head>
   <body>   
<script>
var lottoszamok5=[]; //5 elemű tömb, az ötöslottó nyerő számainak
lottoszamok5.length=5;
var lottoszamok6=[];
lottoszamok6.length=6; //6 elemű tömb, a hatoslottó nyerő számainak
var db=0; //ötöslottó, már kihúzott számok megszámolása
var szam=0;
var db6=0; //hatoslottó, már kihúzott számok megszámolása
var szam6=0;//segédváltozó 6-os lottóhoz
//ötös lottó számainak generálása
function lotto5(){
do
	{
	szam=Math.round(Math.random()*89)+1; //1-90 közötti véletlenszám
	if(!lottoszamok5.includes(szam)) //tartalmazza-e a tömb a generált számot?
		{
		lottoszamok5[db]=szam;//ha nem akkor eltároljuk a tömbben
		db++;//növeljük a darabszámot
		}	
	}
while (db<5);//addig ismétel, amíg nincs meg az 5 db szám
}
lotto5();//függvény lefuttatása
//6-os lottó számainak sorsolása
function lotto6(){
do
	{
	szam6=Math.round(Math.random()*44)+1;
	if(!lottoszamok6.includes(szam6))
		{
		lottoszamok6[db6]=szam6;
		db6++;
		}	
	}
while (db6<7);
}
lotto6();
//tömb elemeinek kiírása, a tömb nevének megadásával
function tombkiir(a){
	for(i=0; i<a.length; ++i)
	document.write("<b>",a[i]," ","</b>");
}
//lottószámok sorbarenezése
function rendezes(b){
b.sort(function (a,b){return a-b});
}
rendezes(lottoszamok5);
rendezes(lottoszamok6);
document.write("Az ötöslottó számai:","<br>");
tombkiir(lottoszamok5);
document.write("<br>","A hatoslottó számai:","<br>");
tombkiir(lottoszamok6);
</script>
</body>
</html>

<html>

<head>

<title>Lottó</title>

</head>

<body>

var lottoszamok5=[]; //5 elemű tömb, az ötöslottó nyerő számainak

lottoszamok5.length=5;

var lottoszamok6=[];

lottoszamok6.length=6; //6 elemű tömb, a hatoslottó nyerő számainak

var db=0; //ötöslottó, már kihúzott számok megszámolása

var szam=0;

var db6=0; //hatoslottó, már kihúzott számok megszámolása

var szam6=0;//segédváltozó 6-os lottóhoz

//ötös lottó számainak generálása

function lotto5(){

{

szam=Math.round(Math.random()*89)+1; //1-90 közötti véletlenszám

if(!lottoszamok5.includes(szam)) //tartalmazza-e a tömb a generált számot?

{

lottoszamok5[db]=szam;//ha nem akkor eltároljuk a tömbben

db++;//növeljük a darabszámot

}

while (db<5);//addig ismétel, amíg nincs meg az 5 db szám

}

lotto5();//függvény lefuttatása

//6-os lottó számainak sorsolása

function lotto6(){

{

szam6=Math.round(Math.random()*44)+1;

if(!lottoszamok6.includes(szam6))

{

lottoszamok6[db6]=szam6;

db6++;

}

while (db6<7);

}

lotto6();

//tömb elemeinek kiírása, a tömb nevének megadásával

function tombkiir(a){

for(i=0; i<a.length; ++i)

document.write("<b>",a[i]," ","</b>");

}

//lottószámok sorbarenezése

function rendezes(b){

b.sort(function (a,b){return a-b});

}

rendezes(lottoszamok5);

rendezes(lottoszamok6);

document.write("Az ötöslottó számai:","<br>");

tombkiir(lottoszamok5);

document.write("<br>","A hatoslottó számai:","<br>");

tombkiir(lottoszamok6);

</script>

</body>

</html>

Feladat: tömb legkisebb, legnagyobb eleme, átlaga, összeg, páros elemek száma

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tömb</title>
</head>
<body>
    <script>
    //20db 1-100 közötti véletlen számmal tölti fel a tömböt
    var tomb = new Array();
    var osszeg = 0;
    var min=101; var max = 0; var parosok = 0; var hatosok = 0;
    for(var i=0; i<20; i++)    
    {
        tomb[i] = Math.floor(Math.random()*100)+1;
        osszeg += tomb[i];
        if (tomb[i] > max) 
            { max = tomb[i]; }
        if (tomb[i] < min) 
            { min = tomb[i]; }
        if (tomb[i] % 2 == 0)
            { parosok++;}
        if (tomb[i] % 2 == 0 && tomb[i] % 3 == 0) //tomb[i] % 6 ==0
            { hatosok++;}
        document.write(" ",tomb[i]);
    }
    document.write("<br>","Tömb elemeinek összege: ",osszeg);
    document.write("<br>","Tömb legkisebb eleme: ",min);
    document.write("<br>","Tömb legnagyobb eleme: ",max);
    document.write("<br>","Tömb elemeinek átlaga: ",osszeg/tomb.length);
    document.write("<br>","Tömb páros számok száma: ",parosok);
    document.write("<br>","Tömb 6-tal osztható számainak száma: ",hatosok);
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

//20db 1-100 közötti véletlen számmal tölti fel a tömböt

var tomb = new Array();

var osszeg = 0;

var min=101; var max = 0; var parosok = 0; var hatosok = 0;

for(var i=0; i<20; i++)

{

tomb[i] = Math.floor(Math.random()*100)+1;

osszeg += tomb[i];

if (tomb[i] > max)

{ max = tomb[i]; }

if (tomb[i] < min)

{ min = tomb[i]; }

if (tomb[i] % 2 == 0)

{ parosok++;}

if (tomb[i] % 2 == 0 && tomb[i] % 3 == 0) //tomb[i] % 6 ==0

{ hatosok++;}

document.write(" ",tomb[i]);

}

document.write("<br>","Tömb elemeinek összege: ",osszeg);

document.write("<br>","Tömb legkisebb eleme: ",min);

document.write("<br>","Tömb legnagyobb eleme: ",max);

document.write("<br>","Tömb elemeinek átlaga: ",osszeg/tomb.length);

document.write("<br>","Tömb páros számok száma: ",parosok);

document.write("<br>","Tömb 6-tal osztható számainak száma: ",hatosok);

</script>

</body>

</html>

Kategóriák

Friss bejegyzések

JavaScript objektumok

JavaScript: űrlap elemek kezelése