JavaScript: feladatok II.

1.feladat: Mennyi a számok összege 1-500-ig? Hány darab 4-gyel, 6-tal osztható, páros szám van ebben az intervallumban?

<!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 osszeg = 0;
        var db4 = 0;
        var paros=0;
        var hat=0;
        for (i=1; i<=500; i++)
        {
            osszeg += i;
            if (i % 4 == 0)
            {db4++;}
            if (i % 2 ==  0)
            {paros++;}
            if (i % 2 == 0 && i % 3 == 2)
            {hat++;}
        }
        document.write("Számok összege: ",osszeg,"Néggyel oszthatók száma: ",
        db4,"Páros számok db: ",paros,"Hatosok: ",hat);
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

var osszeg = 0;

var db4 = 0;

var paros=0;

var hat=0;

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

{

osszeg += i;

if (i % 4 == 0)

{db4++;}

if (i % 2 == 0)

{paros++;}

if (i % 2 == 0 && i % 3 == 2)

{hat++;}

}

document.write("Számok összege: ",osszeg,"Néggyel oszthatók száma: ",

db4,"Páros számok db: ",paros,"Hatosok: ",hat);

</script>

</body>

</html>

2. feladat: Kérjünk be a felhasználótól 2 számot. Ha a felhasználó nem számot ír, vagy 0-át, vagy negatív számot, akkor írjon a program hibaüzenetet! Ha a két szám egyenlő, akkor számolja ki a négyzet kerületét, területét. Ha a két szám különböző, akkor a téglalap kerületét, területét!

<script>
        //téglalap kerülete, területe
        var a = Number(prompt("Kérem az a oldalt!"));
        var b = Number(prompt("Kérem a b oldal"));
        var kerulet = 0;
        var terulet = 0;
        //Ha szám, akkor foglalkozik csak vele a program, ellenkező esetben hibaüzenet
        if (isFinite(a) && isFinite(b))
        {//ha nem negatív, vagy nulla, akkor számolunk csak
          if((a<=0 || b<=0))
          {
              document.write("Hibás érték!");
          }
          else{
            if( a == b)
            {
                kerulet = 4*a;
                terulet = a*a;
                document.write("Négyzet kerülete: ",kerulet,"területe: ",terulet);
            }
            else
            {
             kerulet=(a+b)*2;
             terulet = a*b;
             document.write("Téglalap kerülete: ",kerulet,"területe: ",terulet);
            }
          }
        }
        else
        {
            document.write("Hibás érték! Számot írjon be!");
        }
    </script>

//téglalap kerülete, területe

var a = Number(prompt("Kérem az a oldalt!"));

var b = Number(prompt("Kérem a b oldal"));

var kerulet = 0;

var terulet = 0;

//Ha szám, akkor foglalkozik csak vele a program, ellenkező esetben hibaüzenet

if (isFinite(a) && isFinite(b))

{//ha nem negatív, vagy nulla, akkor számolunk csak

if((a<=0 || b<=0))

{

document.write("Hibás érték!");

}

else{

if( a == b)

{

kerulet = 4*a;

terulet = a*a;

document.write("Négyzet kerülete: ",kerulet,"területe: ",terulet);

}

else

{

kerulet=(a+b)*2;

terulet = a*b;

document.write("Téglalap kerülete: ",kerulet,"területe: ",terulet);

}

else

{

document.write("Hibás érték! Számot írjon be!");

}

</script>

3. feladat: gondoltam egy számra játék. A program generáljon véletlenszámot 1-100 között.

A Math.random 0-1 közötti számot generál. Ezt meg kell szorozni 100-zal, ha ennél nagyobb számot szeretnénk. Mivel az előállított szám nem egész, ezért a Math.floor függvénnyel az egész részét vesszük. A +1 azért kell, hogy 1-től induljon, ne nullától.

<script>
        //1-100 közötti véletlen szám
        var szam = Math.floor(Math.random()*100)+1;
        var tipp = 0;
        var szoveg="Tipp?";       
        do {
            tipp = prompt(szoveg, tipp);
            if (tipp > szam)
            {szoveg="A gondolt szám kisebb!";}
            if (tipp < szam)
            {szoveg="A gondolt szám nagyobb!";}
        }
        while(tipp != szam);
        document.write("Gratulálok!");
    </script>

//1-100 közötti véletlen szám

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

var tipp = 0;

var szoveg="Tipp?";

do {

tipp = prompt(szoveg, tipp);

if (tipp > szam)

{szoveg="A gondolt szám kisebb!";}

if (tipp < szam)

{szoveg="A gondolt szám nagyobb!";}

}

while(tipp != szam);

document.write("Gratulálok!");

</script>

4. feladat: szögfüggvények használata. sin, cos, tan

<script>
        var s = "";
        var radian = 0;
        for (i=0; i<=360; i++)
        {
            radian = i * Math.PI / 180;
            s += "<tr><td>"+i+"° = radian: "+radian+"</td>"+
            "<td>"+" sin "+Math.sin(radian)+"</td>"+
            "<td>"+" cos "+Math.cos(radian)+"</td>"+
            "<td>"+" tan "+Math.tan(radian)+"</td></tr>";
        }
        document.write("<table border='1'>",s,"</table>");
    </script>

var s = "";

var radian = 0;

for (i=0; i<=360; i++)

{

radian = i * Math.PI / 180;

s += "<tr><td>"+i+"° = radian: "+radian+"</td>"+

"<td>"+" sin "+Math.sin(radian)+"</td>"+

"<td>"+" cos "+Math.cos(radian)+"</td>"+

"<td>"+" tan "+Math.tan(radian)+"</td></tr>";

}

document.write("<table border='1'>",s,"</table>");

</script>

5. feladat: switch -case segítségével határozzuk meg, hogy milyen nap van ma! Ehhez használjuk a dátum függvények közül a getDay()-t! Ha csak sima Date() függvényt írunk, akkor az aktuális dátumot és időt írja ki.

<p id="pelda"></p>
    <script>
        var nap;
        
        switch (new Date().getDay()){
            case 0: nap="vasárnap"; break;
            case 1: nap="hétfő"; break;
            case 2: nap="kedd"; break;
            case 3: nap="szerda"; break;
            case 4: nap="csütörtök"; break;
            case 5: nap="péntek"; break;
            case 6: nap="szombat"; break;
        }
        document.getElementById("pelda").innerHTML = "Mai nap: "+nap;       
        document.write(new Date().getMonth());
    </script>

var nap;

switch (new Date().getDay()){

case 0: nap="vasárnap"; break;

case 1: nap="hétfő"; break;

case 2: nap="kedd"; break;

case 3: nap="szerda"; break;

case 4: nap="csütörtök"; break;

case 5: nap="péntek"; break;

case 6: nap="szombat"; break;

}

document.getElementById("pelda").innerHTML = "Mai nap: "+nap;

document.write(new Date().getMonth());

</script>

6. feladat: stringek használata. Leggyakoribb függvények.

A stringek hasonlóan a tömbökhöz, elemeikre bonthatóak. Az elemek számozása 0-tól indul! A string első betűje a 0. utolsó betűje a hossz-1. elem. /szoveg.length-1/

<!DOCTYPE html>
<html lang="hu">
<head>
    
    <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 s = new String;
        s = prompt("Kérek egy szót!");
        document.write("A szó első betűje: ", s.charAt(0));
        document.write("<br>");
        document.write("A szó első betűje: ", s[0]);
        document.write("<br>");
        document.write("A szó utolsó betűje: ", s.charAt(s.length-1));
        document.write("<br>");
        document.write("A szó utolsó betűje: ", s[s.length-1]);
        document.write("<br>");
        document.write("A szöveg hossza: ",s.length);
        document.write("<br>");
        for (i=0; i<s.length; i++)
        {
            document.write(s[i]," ");
        }
        document.write("<br>");
        //szöveg visszafelé
        for (i=s.length-1; i>=0; i--)
        {
            document.write(s[i], " ");
        }
        document.write("<br>");
        //szöveg nagybetűssé alakítása
        document.write(s.toUpperCase());
        document.write("<br>");
        //szöveg kisbetűssé alakítása
        document.write(s.toLowerCase());
        document.write("<br>");
        //keresés stringben
        document.write(s.indexOf("inf"));
        document.write("<br>");
        //string kivágása
        //pl: in(format)ika mettől - meddig 
        document.write(s.substring(2,8));
        document.write("<br>");
        //ASCII karakter kódja
        for (i = 32;i<=60;i++)
        {
            document.write(i," ", String.fromCharCode(i)," ");
        }
        document.write("38-as karakter: ",String.fromCharCode(38));
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

var s = new String;

s = prompt("Kérek egy szót!");

document.write("A szó első betűje: ", s.charAt(0));

document.write("<br>");

document.write("A szó első betűje: ", s[0]);

document.write("<br>");

document.write("A szó utolsó betűje: ", s.charAt(s.length-1));

document.write("<br>");

document.write("A szó utolsó betűje: ", s[s.length-1]);

document.write("<br>");

document.write("A szöveg hossza: ",s.length);

document.write("<br>");

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

{

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

}

document.write("<br>");

//szöveg visszafelé

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

{

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

}

document.write("<br>");

//szöveg nagybetűssé alakítása

document.write(s.toUpperCase());

document.write("<br>");

//szöveg kisbetűssé alakítása

document.write(s.toLowerCase());

document.write("<br>");

//keresés stringben

document.write(s.indexOf("inf"));

document.write("<br>");

//string kivágása

//pl: in(format)ika mettől - meddig

document.write(s.substring(2,8));

document.write("<br>");

//ASCII karakter kódja

for (i = 32;i<=60;i++)

{

document.write(i," ", String.fromCharCode(i)," ");

}

document.write("38-as karakter: ",String.fromCharCode(38));

</script>

</body>

</html>

7. feladat: Ceasar kód. Kódoljunk egy szöveget a klasszikus Ceasar kóddal: toljuk el 3 karakterrel a betűket! A kódolt szöveget dekódoljuk a végén!

<script>
        var nyilt = new String("Almáspite");
        var titkos = new String;
        var kulcs = 3;
        for(i=0; i<nyilt.length; i++)
        {
            var a = nyilt.charCodeAt(i)+kulcs; //i. karaktert ASCII kódja +1
            var k = String.fromCharCode(a); //ASCII kód visszaalakítása betűvé
            titkos += k;
        }
        document.write("Nyílt szöveg: ",nyilt," titkosítva: ",titkos);
        //dekódolás
        var eredeti="";
        for (i=0; i<titkos.length; i++)
        {
            var b = titkos.charCodeAt(i)-kulcs;
            var c = String.fromCharCode(b);
            eredeti += c;
        }
        document.write("<br> Dekódolt szöveg: ",eredeti);
    </script>

var nyilt = new String("Almáspite");

var titkos = new String;

var kulcs = 3;

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

{

var a = nyilt.charCodeAt(i)+kulcs; //i. karaktert ASCII kódja +1

var k = String.fromCharCode(a); //ASCII kód visszaalakítása betűvé

titkos += k;

}

document.write("Nyílt szöveg: ",nyilt," titkosítva: ",titkos);

//dekódolás

var eredeti="";

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

{

var b = titkos.charCodeAt(i)-kulcs;

var c = String.fromCharCode(b);

eredeti += c;

}

document.write("<br> Dekódolt szöveg: ",eredeti);

</script>

8. feladat: A program kérjen be egy dátumot, és döntse el, hogy szökőév-e! Az évszám vizsgálatához használj függvényt! A függvény olyan eljárás, amely egy értéket ad vissza a return segítségével. (visszatérési érték) Jelen esetben igaz vagy hamis értéket.

<script>
        function szokoev(a)
        {
            return (( a % 4 == 0 && a % 100 != 0)|| a % 400 == 0);
        }
        var ev=prompt("Kérek egy évszámot!");
        if(szokoev(ev))
        {
            document.write("A megadott év ",ev," szökőév!");
        }
        else
        {
            document.write("A megadott év ",ev," NEM szökőév!");
        }
    </script>

function szokoev(a)

{

return (( a % 4 == 0 && a % 100 != 0)|| a % 400 == 0);

}

var ev=prompt("Kérek egy évszámot!");

if(szokoev(ev))

{

document.write("A megadott év ",ev," szökőév!");

}

else

{

document.write("A megadott év ",ev," NEM szökőév!");

}

</script>

9. feladat: eljárások segítségével változtasd meg a weboldal háttérszínét! Lehetőség szerint használj onclick, onmouseover eseménykezelőket!
Készíts eljárást egy izzó ki/be kapcsolásához!

lampa_be-2 Letöltés

lampa_ki-1 Letöltés

<!DOCTYPE html>
<html lang="en">
<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>
        function sarga()
        {
            document.bgColor="yellow";
        }
        function kek()
        {
            document.bgColor="blue";
        }
        function feher()
        {
            document.bgColor="white";
        }
        function bekapcsol()
        {
            document.getElementById("kep").src="lampa_be.gif";
        }
        function kikapcsol()
        {
            document.getElementById("kep").src="lampa_ki.gif";
        }
    </script>
    <input type="button" onclick="sarga()" value="Sárga háttér";>
    <input type="button" onmouseover="kek()" value="Kék háttér";>
    <input type="button" onmouseover="feher()" onclick="bekapcsol()" value="Bekapcs";>
    <input type="button" onmouseover="feher()" onclick="kikapcsol()" value="Kikapcs";>
    <img id="kep" src = "lampa_ki.gif">
    
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

function sarga()

{

document.bgColor="yellow";

}

function kek()

{

document.bgColor="blue";

}

function feher()

{

document.bgColor="white";

}

function bekapcsol()

{

document.getElementById("kep").src="lampa_be.gif";

}

function kikapcsol()

{

document.getElementById("kep").src="lampa_ki.gif";

}

</script>

</body>

</html>

10. feladat: Testtömeg index számítása űrlap segítségével. Készíts űrlapot, amelyen 2db szövegdoboz szolgál a súly, és a magasság bevitelére, másik 2 szövegdobozba pedig kiírjuk az testtömeg indexet, és a szöveges értékelést! Az űrlap elemeire a nevük segítségével fogunk hivatkozni.

<!DOCTYPE html>
<html lang="en">
<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>
        function szamol()
        {
            var testsuly = parseFloat(document.bmi_index.testsuly.value);
            var magassag = parseFloat(document.bmi_index.magassag.value);
            var eredmeny = 0;
            if(testsuly > 0 && magassag > 0)
            {
                eredmeny=testsuly/(magassag/100*magassag/100);
                document.bmi_index.eredmeny.value = eredmeny;
                if(eredmeny < 18.5)
                {
                    document.bmi_index.ertekeles.value = "Sovány testalkat";
                }
                if(eredmeny > 18.5 && eredmeny <=25)
                {
                    document.bmi_index.ertekeles.value = "Normál testalkat";
                }
                if(eredmeny > 25)
                {
                    document.bmi_index.ertekeles.value = "Túlsúly testalkat";
                }
            }
            else
            {
                alert("Hibás adatok!");
            }
        }
    </script>
    <form class="bmi" name="bmi_index">
        <h2>BMI index számítása</h2>
        <b>Kiindulási adatok:</b>
        Testsúly: <input type="number" name="testsuly" size="5"> kg
        Magasság: <input type="number" name="magassag" size="5"> cm
        <input type="button" onclick="szamol()" value="Számolj!">
        Testtömeg indexed: <input name="eredmeny" readonly>
        Értékelés: <input name="ertekeles" readonly>
    </form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

function szamol()

{

var testsuly = parseFloat(document.bmi_index.testsuly.value);

var magassag = parseFloat(document.bmi_index.magassag.value);

var eredmeny = 0;

if(testsuly > 0 && magassag > 0)

{

eredmeny=testsuly/(magassag/100*magassag/100);

document.bmi_index.eredmeny.value = eredmeny;

if(eredmeny < 18.5)

{

document.bmi_index.ertekeles.value = "Sovány testalkat";

}

if(eredmeny > 18.5 && eredmeny <=25)

{

document.bmi_index.ertekeles.value = "Normál testalkat";

}

if(eredmeny > 25)

{

document.bmi_index.ertekeles.value = "Túlsúly testalkat";

}

else

{

alert("Hibás adatok!");

}

</script>

<h2>BMI index számítása</h2>

<b>Kiindulási adatok:</b>

Testsúly: <input type="number" name="testsuly" size="5"> kg

Magasság: <input type="number" name="magassag" size="5"> cm

Testtömeg indexed: <input name="eredmeny" readonly>

Értékelés: <input name="ertekeles" readonly>

</form>

</body>

</html>

11. feladat: Szimuláljuk dobókocka dobást véletlenszám (Math.floor(Math.random()*6)+1) segítségével! A „dobott” szám szerinti oldalát mutassa a program a kockának!

<!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>
        function dobokocka()
        {
            var dobas = Math.floor(Math.random()*6)+1;
            document.getElementById("kocka").src=dobas+".png";
        }
    </script>
    <img id="kocka" src="1.png";>
    <input type="button" onclick="dobokocka()"; value="Sorsolj!">
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

function dobokocka()

{

var dobas = Math.floor(Math.random()*6)+1;

document.getElementById("kocka").src=dobas+".png";

}

</script>

</body>

</html>

12. feladat: Készíts szorzótáblát ciklusok segítségével!

A feladat megoldásához 2db for ciklust fogunk használni. A belső for ciklus a sorokat nézi végig, amikor végez, akkor lép tovább a külső, ami az oszlopokat lépteti.

<script>
        document.write("<table border='1'>");
        for (i=1; i<=10; i++)
        {
            document.write("<tr>");
            for (j=1; j<=10; j++)
            {
                document.write("<td>",i*j,"</td>");
            }
            document.write("</tr>");
        }
    </script>

document.write("<table border='1'>");

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

{

document.write("<tr>");

for (j=1; j<=10; j++)

{

document.write("<td>",i*j,"</td>");

}

document.write("</tr>");

}

</script>

13. feladat Készíts JavaScript programot, amely táblázatos formában kiírja a 1-10-ig a számok hatványait (2-5.) a faktoriálisát, és a Fibonacci sorozatbeli értékét!
Fibonacci sorozat: 0,1,1,2,3,5,8,13… Minden elem az előző kettő összege, kivéve a 0,1.

<!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>
    <style>
        table,tr,td {
            border: 1px solid black;
        }
        table{
            width: 400px;
            border-collapse: collapse;
        }
        td{
            text-align: center;
        }
        tr:nth-child(even) {
            background-color: grey;
        }
        tr:nth-child(odd) {
            background-color: rgb(142, 177, 254);
        }
    </style>
</head>
<body>
   <table>
    <tr>
        <td>n</td>
        <td>n<sup>2</sup></td>
        <td>n<sup>3</sup></td>
        <td>n<sup>4</sup></td>
        <td>n<sup>5</sup></td>
        <td>n!</td>
        <td>n Fib</td>
    </tr>    
   <script>
    function faktorialis(n) {
        if (n === 0) {
            return 1;
        } else {
            return n * faktorialis(n-1);
        }
    }
    function fibonacci(n) {
    if (n < 2) {
        return n;
    } else {
        return fibonacci(n - 1) + fibonacci(n - 2);
    }
}
        for(i=0; i<=10; i++)
        {
            document.write("<tr>")
            document.write("<td>"+i+"</td>")
            document.write("<td>"+Math.pow(i,2)+"</td>")
            document.write("<td>"+Math.pow(i,3)+"</td>")
            document.write("<td>"+Math.pow(i,4)+"</td>")
            document.write("<td>"+Math.pow(i,5)+"</td>")
            document.write("<td>" + faktorialis(i) + "</td>")
            document.write("<td>" + fibonacci(i) + "</td>");
            document.write("</tr>")
        }
   </script>
</table>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

table,tr,td {

border: 1px solid black;

}

table{

width: 400px;

border-collapse: collapse;

}

td{

text-align: center;

}

tr:nth-child(even) {

background-color: grey;

}

tr:nth-child(odd) {

background-color: rgb(142, 177, 254);

}

</style>

</head>

<body>

<table>

<tr>

</tr>

function faktorialis(n) {

if (n === 0) {

return 1;

} else {

return n * faktorialis(n-1);

}

function fibonacci(n) {

if (n < 2) {

return n;

} else {

return fibonacci(n - 1) + fibonacci(n - 2);

}

for(i=0; i<=10; i++)

{

document.write("<tr>")

document.write("<td>"+i+"</td>")

document.write("<td>"+Math.pow(i,2)+"</td>")

document.write("<td>"+Math.pow(i,3)+"</td>")

document.write("<td>"+Math.pow(i,4)+"</td>")

document.write("<td>"+Math.pow(i,5)+"</td>")

document.write("<td>" + faktorialis(i) + "</td>")

document.write("<td>" + fibonacci(i) + "</td>");

document.write("</tr>")

}

</script>

</table>

</body>

</html>

Kategóriák

Friss bejegyzések

JavaScript objektumok

JavaScript: űrlap elemek kezelése