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?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!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> |
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!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
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/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!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> |
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!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!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> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!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> |
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!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 |
<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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!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> |