Alapadatok
Év, oldalszám:2010, 34 oldal
Nyelv:magyar
Letöltések száma:255
Feltöltve:2012. november 28.
Méret:250 KB
Intézmény:
-
Megjegyzés:
Csatolmány:-
Letöltés PDF-ben:Kérlek jelentkezz be!
Értékelések
Nincs még értékelés. Legyél Te az első!Mit olvastak a többiek, ha ezzel végeztek?
Tartalmi kivonat
Készítette: Subecz Zoltán, Szolnoki Főiskola, http://suzo.uwhu, subecz@szolfhu Tartalomjegyzék Bevezetés . 2 1. Alapok 5 2. Tömbök 25 3. Néhány JavaScript feladat 32 Bevezetés Példa proba.html: <HTML> <BODY> Ez itt hagyományos HTML.<BR> <SCRIPT LANGUAGE="JavaScript"> document.write("Ez már JavaScriptben íródott!!!<BR>"); </SCRIPT> Ez a sor újra HTML!<BR> </BODY> </HTML> ez a pár sor a következõt eredményezi: Ez itt hagyományos HTML. Ez már JavaScriptben íródott!!! Ez a sor újra HTML. Példa Javítsuk ki az előbbi egyszerű példát az alábbi módon: <HTML> <BODY> Ez itt egy hagyományos HTML dokumentum.<BR> <SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése, amennyiben szükséges document.write("Ez már JavaScriptben íródott!!!<BR>") // A kód elrejtésének vége --> </SCRIPT> Ez a sor újra
HTML!<BR> </BODY> </HTML> A JavaScript utasításokat HTML megjegyzések közé tesszük, így a nyelvet nem ismerő böngészők nem jelenítik meg az utasításokat, ugyanis azt megjegyzésként értelmezik. Példa eseménykezelésre Létrehozunk egy gombot, amire kattintva egy ablak jelenik meg a képernyőn. proba.html: <html> <body> <form> <input type="button" value="Kattints rám!" onClick="alert(Hello!)"> </form> </body> </html> Példa Függvény használatára <HTML> <SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése, amennyiben szükséges function szamol 1(x,y) { var eredmeny = x + y; document.write("<H3>"+x+" + "+y+" = "+eredmeny+"</H3><BR>"); } function szamol 2(x,y) { return x+y; } szamol 1(23,11); szamol 1(17,27); szamol 1(3,45); document.write("<H3>13 + 5 = " +
szamol 2(13,5) + "<H3>"); //--> </SCRIPT> </HTML> A program eredménye a következő lesz: 23 + 11 = 34 17 + 27 = 44 3 + 45 = 48 13 + 5 = 18 Példa Függvényeket eseménykezelőkkel is kombinálhatjuk: <html> <head> <script language="JavaScript"> <!-- hide function calculation(x,y) { var result= x + y; alert(result); } // --> </script> </head> <body> <form> <input type="button" value="Számol" onClick="calculation(5,10)"> </form> </body> </html> A gomb a calculation() függvényt hívja meg. 1. Alapok Példa Írjuk ki egymás alá 3 sorba: Hello1, Hello2, Hello3 <html> <body> <script language="JavaScript"> <!-- JavaScript elrejtés document.write("Hello1<br>Hello2<br>Hello3"); // --> </script> </body> </html> Példa Vegyünk fel 2 egész változót: b=5,a=3
Írassuk ki 5 sorba: Hello1,a-változó,Hello2,b-változó,Hello3 <html> <body> <script language="JavaScript"> <!-- JavaScript elrejtés var b=5, a=3; document.write("Hello1<br>"+a+"<br>Hello2<br>"+b+"<br>Hello3"); // --> </script> </body> </html> példa Írjuk ki 10-szer egymás alá, hogy Hello <html> <body> <script language="JavaScript"> <!-- JavaScript elrejtés var a; for(a=1;a<=10;a++) document.write("Hello<br>"); // --> </script> </body> </html> Példa Írjunk egy függvényt, ami kiír egy 2 soros szöveget. A függvényt hívjuk meg 3-szor <HTML> <SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése, amennyiben szükséges function Fuggv() { document.write("Első sor<br>"); document.write("Második sor<br>"); } Fuggv(); Fuggv();
Fuggv(); //--> </SCRIPT> </HTML> Példa Kitesz egy gombot. Lenyomva kiír egy szöveget proba.html: <html> <head> <script language="JavaScript"> <!-- hide function kiir() { document.write("Hello"); } // --> </script> </head> <body> <form> <input type="button" value="Kiir" onClick="kiir()"> </form> </body> </html> A document.write-al való kiírásnál ugyanabba az oldalba írja ki a szöveget (probahtml) példa Írassuk ki 10-szer egymás alá, hogy Hello, majd Gomb lenyomása után képernyőtörlés, majd írassuk ki 1-től 15-ig az egészeket egymás alá. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide for(x=1;x<=10;x++) document.write("Hello<br>"); function valtoztat() { for(x=1;x<=15;x++) document.write(x+"<br>"); }
document.write("<br>Nyomd meg a gombot a folytatáshoz!"); // --> </script> <form> <input type="button" value="Kiir" onClick="valtoztat()"> </form> </body> </html> Példa Írassuk ki egymás alá 30-tól 50-ig az egészeket. A végén írassuk ki a ciklusváltozó értékét Példa Írassuk ki a 15-től -10-ig a számokat egymás mellé space-el elválasztva. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide for(x=15;x>=-10;x--) document.write(x+" "); Példa Írassuk ki a páros számokat egymás alá 210-től 234-ig. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide for(x=210;x<=234;x++) if(x%2==0) document.write(x+"<br>"); // --> </script> </body> </html> // --> </script> </body> </html> példa
Írassuk ki a páratlan számokat egymás alá 95-től 73-ig. példa Adjuk össze a számokat 20-tól 50-ig. A végén írassuk ki az eredményt <html> <head> </head> <body> <script language="JavaScript"> <!-- hide var osszeg=0; // Kell a nullázás. egyébként hiba! for(x=20;x<=50;x++) osszeg=osszeg+x; document.write("20-50-ig az egészek összege= "+osszeg); // --> </script> </body> </html> példa Adjuk össze a -153-tól 247-ig a páratlan számokat. A végén írassuk ki az eredményt példa Tegyünk ki egy gombot. Írjuk ki , hogy 15 A gombra kattintva egyesével növelje a szám értékét. <html> <head> <script language="JavaScript"> <!-- hide var x=15; function valtoztat() { x=x+1; document.getElementById("reteg1")firstChildnodeValue=x; } // --> </script> </head> <body> <div id="reteg1" style="position:absolute; left:50;
top:80"> // VAGY: <div id="reteg1"> 15 </div> <form> <input type="button" value="Kiir" onClick="valtoztat()"> </form> </body> </html> B megoldás: mint az előző, de A gomb kiíratás és a réteg megadás is a JavaScript kódba: <html> <head> <script language="JavaScript"> <!-- hide var x=15; document.write(<div id="reteg1" >); // VAGY pl. left:100; top:150 document.write(x); document.write("</div>"); function valtoztat() { x=x+1; document.getElementById("reteg1")firstChildnodeValue=x; } document.write("<form>"); document.write(<input type="button" value="Kiir" onClick="valtoztat()">); document.write("</form>"); // --> </script> </head> <body> </body> </html> C megoldás: innerHTML-el <html> <head> <script
language="JavaScript"> <!-- hide var x=15; function valtoztat() { x=x+1; document.getElementById("reteg1")innerHTML=x; } // --> </script> </head> <body> <div id="reteg1" style="position:absolute; left:50; top:80"> 15 </div> <form> <input type="button" value="Kiir" onClick="valtoztat()"> </form> </body> </html> példa Írassuk ki 1-120-ig az egészeket egymás alá oldalanként. Minden oldalra 10 szám kerülhet továbblépés Gomb lenyomására. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide var x,y,z; z=1; document.write(<div id="reteg1" >); document.write("</div>"); function valtoztat() { if(z>=120) return; y=document.getElementById("reteg1"); y.innerHTML=""; for(x=z;x<=z+9;x++)
y.innerHTML=yinnerHTML+x+"<br>"; z=z+10; } valtoztat(); document.write("<br>Nyomd meg a gombot a folytatáshoz!"); // --> </script> <form> <input type="button" value="Kiir" onClick="valtoztat()"> </form> </body> </html> példa Számítsuk ki 1-től 25-ig a számok átlagát, és írassuk ki. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide var a,atlag=0; for(a=1;a<=25;a++) atlag=atlag+a; atlag=atlag/25; document.write("1-25-ig a számok átlaga= "+atlag); // --> </script> </body> </html> példa Olvasson be egy szöveget a billentyűzetről, majd írja vissza a képernyőre. Az oldal betöltődésekor a kurzor már a beviteli mezőben legyen. <html> <head> <script language="JavaScript"> <!-- hide function beolvas() { var szov;
szov=document.form1szovegvalue; document.write("A megadott szöveg="); document.write(szov); } function indul() { document.form1szovegfocus(); //A beviteli mezőre helyezi a fókuszt. } // --> </script> </head> <body onLoad=indul()> // onLoad eseménykezelő. Ez az aktuális oldal betöltésének befejeződésekor // aktivizálódik. <form name="form1"> Adj meg egy szöveget! <input type="text" size="40" name="szoveg"> <input type="button" value="Kiir" onClick="beolvas()"> </form> </body> </html> példa Olvasson be egy számot, és írja ki kétszeresét. <html> <head> <script language="JavaScript"> <!-- hide function beolvas() { var szov; szov=document.form1szovegvalue; document.write("A megadott szám kétszerese="); document.write(szov*2); } // --> </script> </head> <body> <form
name="form1"> Adj meg egy számot! <input type="text" size="40" name="szoveg"> <input type="button" value="Kiir" onClick="beolvas()"> </form> </body> </html> példa Olvasson be egy pozitív egészet. Írassa ki 1-től a számig az egészeket egymás alá <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function beolvas() { var i,x=document.form1szamvalue; for(i=1;i<=x;i++) document.write(i+"<br>"); } // --> </script> <form name="form1"> Adj meg egy egész számot! <input type="text" size="40" name="szam"> <input type="button" value="Kiir" onClick="beolvas()"> </form> </body> </html> példa Olvasson be egy pozitív egészet. Adja össze 1-től a beolvasott számig az egészeket Írja ki
az összeget és a számok átlagát. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function beolvas() { var i,osszeg=0,x=document.form1szamvalue; for(i=1;i<=x;i++) osszeg=osszeg+i; document.write("A beolvasott száig a számok összege= "+osszeg+"<br>"); document.write("és átlaguk= "+osszeg/x); } // --> </script> <form name="form1"> Adj meg egy egész számot! <input type="text" size="40" name="szam"> <input type="button" value="Kiir" onClick="beolvas()"> </form> </body> </html> példa Olvasson be egy pozitív egészet. Írassa ki a szám osztóit egymás alá <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function beolvas() { var i,x=document.form1szamvalue; document.write("A beolvasott
szám osztói:<br>"); for(i=2;i<=x/2;i++) if(x%i==0) document.write(i+"<br>"); } // --> </script> <form name="form1"> Adj meg egy egész számot! <input type="text" size="40" name="szam"> <input type="button" value="Kiir" onClick="beolvas()"> </form> </body> </html> példa Olvasson be egy egészet. Számolja ki a faktoriálisát És írassa ki az eredményt <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function beolvas() { var i,fakt=1,x=document.form1szamvalue; for(i=1;i<=x;i++) fakt=fakt*i; document.write("A beolvasott szám faktoriálisa= "+fakt); } // --> </script> <form name="form1"> Adj meg egy egész számot! <input type="text" size="40" name="szam"> <input type="button"
value="Kiir" onClick="beolvas()"> </form> </body> </html> példa Másodfokú egyenlet gyökeinek kiszámolása: Olvasson be 3 valós számot a billentyűzetről (a, b, c). Számítsa ki ezekre, a megoldó képlettel, a másodfokú egyenlet gyökeit (x1, x2). <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function beolvas() { var a,b,c,d,x1,x2; a=document.form1avalue; b=document.form1bvalue; c=document.form1cvalue; d=b*b-4ac; x1=(-b+Math.sqrt(d))/(2*a); x2=(-b-Math.sqrt(d))/(2*a); document.write("x1= "+x1+"<br>"); document.write("x2= "+x2+"<br>"); } // --> </script> <h3>Másodfokú egyenlet gyökeinek kiszámolása</h3><br> Adj meg 3 számot! <br> <form name="form1"> a=<input type="text" size="40" name="a"><br> b=<input
type="text" size="40" name="b"><br> c=<input type="text" size="40" name="c"> <input type="button" value="Nyomd meg!" onClick="beolvas()"> </form> </body> </html> példa Olvasson be 3 valós számot. Döntse el, hogy a 3 szám lehet-e egy háromszög 3 oldala <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function beolvas() { var a,b,c; a=Number(document.form1avalue); // A Number() függvényt kell itt is használni, mert az a+b-nél a két // számnak nem az összegét venné, hanem összefűzné őket. b=Number(document.form1bvalue); c=Number(document.form1cvalue); if (a + b > c && a + c > b && b + c > a) document.write("A három szám lehet egy háromszög három oldala"); else document.write("A három szám nem lehet egy háromszög három
oldala"); } // --> </script> <h3>Háromszög oldalai</h3><br> Adj meg 3 számot! <br> <form name="form1"> a=<input type="text" size="40" name="a"><br> b=<input type="text" size="40" name="b"><br> c=<input type="text" size="40" name="c"> <input type="button" value="Nyomd meg!" onClick="beolvas()"> </form> </body> </html> példa Írasson ki * karakterekből téglalapot. 10 sor, 20 oszlop <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Rajzol() { var i,j; for(i=1;i<=10;i++) { for(j=1;j<=20;j++) document.write("*"); document.write("<br>"); } } Rajzol(); // --> </script> </body> </html> példa Jelenítse meg az alábbi alakzatot a képernyőn
20 sorban: 1x2x3x 1x2x3x 1x2x3x példa Jelenítse meg az alábbi alakzatot a képernyőn 20 sorban: 1x 1x2x 1x2x3x <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Rajzol() { var i,j; for(i=1;i<=10;i++) { for(j=1;j<=i;j++) document.write(j+"x"); document.write("<br>"); } } Rajzol(); // --> </script> </body> </html> példa Írassa ki 1-10-ig egymás alá a számokat és mellé a szám értékének megfelelő számú * karaktert tegyen. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Rajzol() { var i,j; for(i=1;i<=10;i++) { document.write(i); for(j=1;j<=i;j++) document.write("*"); document.write("<br>"); } } Rajzol(); // --> </script> </body> </html> példa Írassa ki 3 oszlopban: 1. oszlop: számok 1-10 –ig, 2 oszlop: a szám
négyzete, 3 oszlop: a szám gyöke Legyen fejléc. Mindhárom oszlop 50 képpont széles legyen A valós értékeket 3 tizedes jegyen jelenítse meg. A böngésző elnyomja a többszörös szóközöket és a tabulátorjeleket is. Erre megoldás: táblázattal <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Kiir() { var i,gyok; document.write("<table width=150 border=1>"); // VAGY: document.write("<table width=150 >"); for(i=1;i<=10;i++) { gyok=Math.sqrt(i); document.write("<td width=50>"+i+"<td width=50>"+i*i+"<td width=50>"+gyok.toFixed(3)+"<tr>"); } // .toFixed: a számot adott tizedes jegyen jeleníti meg } Kiir(); // --> </script> </body> </html> példa Elöl tesztelős ciklussal írassuk ki 50-től 80-ig a páros számokat egymás alá. <html> <head> </head>
<body> <script language="JavaScript"> <!-- hide function Kiir() { var i=50; while(i<=80) { document.write(i+"<br>"); i=i+2; } } Kiir(); // --> </script> </body> </html> példa Elöl tesztelős ciklussal: adjuk össze a páratlan számokat 11-től 75-ig. A végén írassuk ki az eredményt. példa Hátul tesztelő ciklussal: Írassuk ki 20-tó -10-ig az egészeket egymás alá. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Kiir() { var i=20; do { document.write(i+"<br>"); i--; } while(i>=-10) } Kiir(); // --> </script> </body> </html> példa Hátul tesztelő ciklussal: adjuk össze 50-től 60-ig az egészeket. A végén írassuk ki az összeget, és a számok átlagát. példa Olvassunk be egészeket 15 végjelig. ( 15-re áll meg a beolvasással) A végén írassuk ki a beolvasott számok összegét. A
lezáró 15-öt is számolja bele A kurzor minden lépésnél a beviteli mezőben legyen. <html> <head> <script language="JavaScript"> <!-- hide var osszeg=0,a; function valtoztat() { a=Number(document.form1avalue); // A Number() használatáról már volt. // Itt is az összeadások miatt kell. document.form1avalue=""; // Kitörli a beviteli mező értékét a beolvasás után // Az újabb szám beírása előtt ne legyen benne az előző szám osszeg=osszeg+a; document.form1afocus(); if(a==15) document.write("A beolvasott számok összege= "+osszeg); } function indul() { document.form1afocus(); } // --> </script> </head> <body onLoad=indul()> <form name="form1"> Adj meg egészeket 0 végjelig<br> a=<input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="valtoztat()"> </form>
</body> </html> példa Olvassunk be egészeket 0 végjelig. A végén írassuk ki a beolvasott számok darabszámát, összegét, és átlagát. A lezáró 0-át ne számolja bele az átlagba Kezelje azt is, ha csak 1 db 0-át olvasunk be, hogy ne legyen 0-ával osztás. <head> <script language="JavaScript"> <!-- hide var osszeg=0,a,db=0,atlag; function valtoztat() { a=Number(document.form1avalue); document.form1avalue=""; // Kitörli a beviteli mező értékét a beolvasás után // Az újabb szám beírása előtt ne legyen benne az előző szám document.form1afocus(); if(a!=0) { osszeg=osszeg+a; db++; } else { document.write("A beolvasott számok összege= "+osszeg+"<br>"); document.write("A beolvasott számok darabszáma= "+db+"<br>"); if(db==0) atlag=0; else atlag=osszeg/db; document.write("A beolvasott számok átlaga= "+atlag+"<br>"); } } // -->
</script> </head> <body> <form name="form1"> Adj meg egészeket 0 végjelig<br> a=<input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="valtoztat()"> </form> <script language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> példa Olvassunk be egészeket, 0 végjelig (amíg 0 nem érkezik). Számoljuk meg hány pozitív és hány negatív szám érkezett. <html> <head> <script language="JavaScript"> <!-- hide var pozdb=0,a,negdb=0; function valtoztat() { a=Number(document.form1avalue); document.form1avalue=""; // Kitörli a beviteli mező értékét a beolvasás után // Az újabb szám beírása előtt ne legyen benne az előző szám document.form1afocus(); if(a!=0) { if(a>0) pozdb++; else negdb++; } else {
document.write("A pozitívok darabszáma= "+pozdb+"<br>"); document.write("A negatívok darabszáma= "+negdb+"<br>"); } } // --> </script> </head> <body> <form name="form1"> Adj meg egészeket 0 végjelig<br> a=<input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="valtoztat()"> </form> <script language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> példa Olvassunk be egész számokat 20 végjelig. A végén írassuk ki a legnagyobb számot A lezáró 20-át ne számolja bele, csak ha ez az első szám. <html> <head> <script language="JavaScript"> <!-- hide var legn,a; var VoltMarSzam=false; function valtoztat() { a=Number(document.form1avalue);
document.form1avalue=""; document.form1afocus(); if(VoltMarSzam==false) { legn=a; VoltMarSzam=true; } // A legn változó kezdő értéke az első beolvasott szám lesz. if(a!=20) { if(a>legn) legn=a; } else document.write("A legnagyobb szám= "+legn+"<br>"); } // --> </script> </head> <body> <form name="form1"> Adj meg egészeket 20 végjelig<br> a=<input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="valtoztat()"> </form> <script language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> példa Tegyünk ki egy gombot. a gombra kattintva az ablak háttérszínét állítsuk kékre Piros betűkkel írassuk ki, hogy Hello. <html> <head> </head> <body> <script language="JavaScript">
<!-- hide function valtoztat() { document.write("<font color=Red>Hello</font>"); document.bgColor="Blue"; // a két utasítás sorrendje fontos, mert egyébként // a hátteret nem festi be kékre, mert a document.write-al // új dokumentumot kezd. } // --> </script> <form> <input type="button" value="Gomb" onClick="valtoztat()"> </form> </body> </html> példa Egy beviteli mezőbe írjuk 15-öt. Tegyünk le egy gombot A gombot többször lenyomva növelje egyesével a beviteli mező értékét. A böngésző címsorába is mindig ugyanezt a számot írja. <html> <head> <script language="JavaScript"> <!-- hide var x=15; document.title=x; function valtoztat() { x=x+1; document.form1avalue=x; document.title=x; } // --> </script> </head> <body> <form name="form1"> a=<input type="text" size="40"
name="a" value="15"><br> <input type="button" value="Kiir" onClick="valtoztat()"> </form> </body> </html> 2. Tömbök példa Tömbök: alap feltöltés, kiíratás. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Tombok() { tomb = new Array(); // létrehoztuk az Array objektum egy új példányát. tomb[1]=5; tomb[3]=10; document.write(tomb[1]+" "+tomb[3]+"<br>"); // Kiírja: 5 10 document.write(tomb[5]+"<br>"); // Itt azt írja ki, hogy undefined document.write(3*tomb[5]+"<br>"); // Itt azt írja ki, hogy NaN tomb2 = new Array(); var i; for(i=1;i<=10;i++) tomb2[i]=i*i; for(i=1;i<=10;i++) document.write(tomb2[i]+"<br>"); // Kiírja a négyzetszámokat egymás alá Autok = new Array("Honda","Mercedes","BMW"); // Így is
meg lehet adni a tömböt // Ilyenkor az első elem indexe 0 lesz. document.write(Autoklength+"<br>"); // Kiírja: 3 for(i=0;i<=Autok.length-1;i++) document.write(Autok[i]+"<br>"); // kiírja a 3 autónevet egymás alá. } Tombok(); // --> </script> </body> </html> példa Töltsön fel egy 5 elemű tömböt a billentyűzetről. Majd írassa ki a tömb elemeit egymás mellé space-val elválasztva, majd egymás alá is. <html> <head> <script language="JavaScript"> <!-- hide tomb = new Array(); var i=0; function Beolvas() { i++; tomb[i]=Number(document.form1avalue); document.form1avalue=""; document.form1afocus(); if(i==5) { document.write("A beolvasott számok:"); for(i=1;i<=5;i++) document.write(tomb[i]+" "); document.write("<br>"); for(i=1;i<=5;i++) document.write(tomb[i]+"<br>"); } } // --> </script> </head>
<body> <form name="form1"> Adj meg 5 egész számot<br> a=<input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="Beolvas()"> </form> <script language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> példa Töltsünk fel egy 10 elemű tömböt 50 és 80 közötti véletlen számokkal, majd írassuk ki a tömb elemeit egymás mellé space-ekkel elválasztva. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Tombok() { tomb = new Array(); var i; for(i=1;i<=10;i++) tomb[i]=50+Math.floor(Mathrandom()*30); for(i=1;i<=10;i++) document.write(tomb[i]+" "); } Tombok(); // --> </script> </body> </html> példa 10 elemű egészekből álló tömb Töltse fel a tömböt
25-től a páratlan számokkal. A feltöltés után írassa ki a tömb elemeit egymás mellé szóközzel elválasztva. Majd írassa ki az elemeket fordított sorrendben. példa 1000 elemű egészekből álló tömb. Töltse fel a tömböt 70 és 90 közötti véletlen egészekkel Majd számolja ki az elemek összegét és átlagát és írassa ki azokat. példa 10 elemű egészekből álló tömb. Töltsük fel a tömböt 1-től a négyzetszámokkal Írassuk ki egymás mellé az elemeket szóközzel elválasztva. Forgassa el a tömb elemeit jobbra, úgy hogy az utolsó az első helyre kerüljön. Újra írassa ki az elemeket egy sorba egymás mellé szóközzel elválasztva. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Tombok() { tomb = new Array(); var i; for(i=1;i<=10;i++) tomb[i]=i*i; for(i=1;i<=10;i++) document.write(tomb[i]+" "); document.write("<br>"); var csere=tomb[10];
for(i=10;i>=2;i--) tomb[i]=tomb[i-1]; tomb[1]=csere; for(i=1;i<=10;i++) document.write(tomb[i]+" "); } Tombok(); // --> </script> </body> </html> példa Mint az előző, de az elemeket nem forgatni, hanem tükrözni kell a középvonalra. ( Fordított sorrendbe rendeződnek az elemek. ) <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Tombok() { tomb = new Array(); var i; for(i=1;i<=10;i++) tomb[i]=i*i; for(i=1;i<=10;i++) document.write(tomb[i]+" "); document.write("<br>"); var csere; for(i=1;i<=5;i++) { csere=tomb[i]; tomb[i]=tomb[11-i]; tomb[11-i]=csere; } for(i=1;i<=10;i++) document.write(tomb[i]+" "); } Tombok(); // --> </script> </body> </html> példa Olvassuk be hogy hány elemet fogunk kezelni (n). Olvassuk be a tömbbe az elemeket. Írassuk ki az elemeket a tömbindexükkel együtt 2 oszlopban.
<html> <head> <script language="JavaScript"> <!-- hide var db,i=0; var beolvasott=false; tomb = new Array(); function beolvas() { if(beolvasott==false) { db=document.form1avalue; document.getElementById("reteg1")innerHTML="Add meg a következő számot!"; beolvasott=true; document.form1avalue=""; document.form1afocus(); } else { i++; tomb[i]=document.form1avalue; document.form1avalue=""; document.form1afocus(); if(i==db) { for(i=1;i<=db;i++) document.write(i+" "+tomb[i]+"<br>"); } } } // --> </script> </head> <body> <div id="reteg1"> Add meg hány számot fogunk kezelni. </div> <form name="form1"> a=<input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="beolvas()"> </form> <script
language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> A Javascript-ben elsősorban egy-dimenziós tömbök vannak. A „többdimenziós” tömbre megvalósítás: rekordokból álló tömb. példa Olvasson be számokat. A beolvasás végét 0 jelezze Írassa ki az elemeket a beolvasás sorrendjében. <html> <head> <script language="JavaScript"> <!-- hide var db=0; var beolvasott=false; tomb = new Array(); function beolvas() { if(document.form1avalue!=0) { db++; tomb[db]=document.form1avalue; document.form1avalue=""; document.form1afocus(); } else { document.write("A beolvasott számok:"); var i; for(i=1;i<=db;i++) document.write(tomb[i]+" "); } } // --> </script> </head> <body> Adj meg számokat 0 végjelig! <form name="form1"> a=<input type="text" size="40"
name="a"><br> <input type="button" value="Gomb" onClick="beolvas()"> </form> <script language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> példa Olvasson be 5 számot. Rendezze a számokat növekvő sorrendbe Írja ki a rendezett tömb elemeit. <html> <head> <script language="JavaScript"> <!-- hide var db=1; var beolvasott=false; tomb = new Array(); function beolvas() { tomb[db]=document.form1avalue; document.form1avalue=""; document.form1afocus(); db++; document.getElementById("reteg1")innerHTML=db+" szám="; if(db==6) { var i,j,cs; for(j=1;j<=5;j++) for(i=1;i<=4;i++) if(tomb[i]>tomb[i+1]) { cs=tomb[i]; tomb[i]=tomb[i+1]; tomb[i+1]=cs; } document.write("A beolvasott számok növekvő sorrendben:"); for(i=1;i<=5;i++) document.write(tomb[i]+" "); } } //
--> </script> </head> <body> <div id="reteg1"> Adj meg 5 számot!<br> 1. szám= </div> <form name="form1"> <input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="beolvas()"> </form> <script language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> 3. Néhány JavaScript feladat feladat Aktuális datum/idő kiíratása. A JavaScript utasításokat külön fájlba tegyük ido.js: most=new Date(); // var kulcsszó nem is kell. document.write(most+"<br>"); ora=most.getHours(); perc=most.getMinutes(); masodperc=most.getSeconds(); document.write("óra="+ora+"<br>"); document.write("perc="+perc+"<br>");
document.write("másodperc="+masodperc+"<br>"); document.write("<h1>"+ora+":"+perc+":"+masodperc); proba.html: <html> <head> </head> <body> <h1>Aktuális idő: </h1><br> <script language="JavaScript" src="ido.js"> </script> </body> </html> példa Kis ablakban válasz vár a felhasználótól. Majd a képernyőre írja <html> <head> </head> <body> <script language="JavaScript"> szoveg=prompt("Írj be egy szöveget!"); document.write("A beírt szöveg= "+szoveg); </script> </body> </html> példa Tegyünk az oldalra 3 linket. Írassuk ki a linkek számát, majd a linkek címét egymás alá Helyezzünk el egy gombot az oldalon. A gombra kattintva változtassa meg az utolsó link címét http://www.szolfhu-ra, szövegét "Főiskola"-ra Az oldal
háttérszínét pirosra, a szöveg színét sárgára. <html> <head> </head> <body> <a href="http://www.indexhu">Index</a><br> <a href="http://www.origohu">Origo</a><br> <a href="http://www.startlaphu">Startlap</a><br> <script language="JavaScript"> var db=document.linkslength; document.write("Az oldalon szereplő linkkek száma: "+db); document.write("<br>A linkek:<br>"); var i; for(i=0;i<=db-1;i++) document.write(documentlinks[i]href+"<br>"); function valtoztat() { document.bgColor="Red"; document.fgColor="Yellow"; document.links[db-1]href="http://wwwszolfhu"; document.links[db-1]innerText="Főiskola"; } </script> <form name="form1"> <input type="button" value="Gomb" onClick="valtoztat()"> </form>
</body> </html> példa Írassuk ki hogy hány oldalon jártunk. Rakjunk le egy gombot is a gombra kattintva lépjünk egyet vissza. <html> <head> </head> <body> <script language="JavaScript"> var db=history.length; // vagy: windowhistorylength document.write("Az eddig meglátogatott oldalak száma: "+db); function valtoztat() { history.go(-1); } </script> <form name="form1"> <input type="button" value="Gomb" onClick="valtoztat()"> </form> </body> </html> history.go(-2); history.go(2); history.back(): history.forward(): Kettőt lép vissza Kettőt lép előre Előző oldalra lép. Következő oldalra lép
HTML!<BR> </BODY> </HTML> A JavaScript utasításokat HTML megjegyzések közé tesszük, így a nyelvet nem ismerő böngészők nem jelenítik meg az utasításokat, ugyanis azt megjegyzésként értelmezik. Példa eseménykezelésre Létrehozunk egy gombot, amire kattintva egy ablak jelenik meg a képernyőn. proba.html: <html> <body> <form> <input type="button" value="Kattints rám!" onClick="alert(Hello!)"> </form> </body> </html> Példa Függvény használatára <HTML> <SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése, amennyiben szükséges function szamol 1(x,y) { var eredmeny = x + y; document.write("<H3>"+x+" + "+y+" = "+eredmeny+"</H3><BR>"); } function szamol 2(x,y) { return x+y; } szamol 1(23,11); szamol 1(17,27); szamol 1(3,45); document.write("<H3>13 + 5 = " +
szamol 2(13,5) + "<H3>"); //--> </SCRIPT> </HTML> A program eredménye a következő lesz: 23 + 11 = 34 17 + 27 = 44 3 + 45 = 48 13 + 5 = 18 Példa Függvényeket eseménykezelőkkel is kombinálhatjuk: <html> <head> <script language="JavaScript"> <!-- hide function calculation(x,y) { var result= x + y; alert(result); } // --> </script> </head> <body> <form> <input type="button" value="Számol" onClick="calculation(5,10)"> </form> </body> </html> A gomb a calculation() függvényt hívja meg. 1. Alapok Példa Írjuk ki egymás alá 3 sorba: Hello1, Hello2, Hello3 <html> <body> <script language="JavaScript"> <!-- JavaScript elrejtés document.write("Hello1<br>Hello2<br>Hello3"); // --> </script> </body> </html> Példa Vegyünk fel 2 egész változót: b=5,a=3
Írassuk ki 5 sorba: Hello1,a-változó,Hello2,b-változó,Hello3 <html> <body> <script language="JavaScript"> <!-- JavaScript elrejtés var b=5, a=3; document.write("Hello1<br>"+a+"<br>Hello2<br>"+b+"<br>Hello3"); // --> </script> </body> </html> példa Írjuk ki 10-szer egymás alá, hogy Hello <html> <body> <script language="JavaScript"> <!-- JavaScript elrejtés var a; for(a=1;a<=10;a++) document.write("Hello<br>"); // --> </script> </body> </html> Példa Írjunk egy függvényt, ami kiír egy 2 soros szöveget. A függvényt hívjuk meg 3-szor <HTML> <SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése, amennyiben szükséges function Fuggv() { document.write("Első sor<br>"); document.write("Második sor<br>"); } Fuggv(); Fuggv();
Fuggv(); //--> </SCRIPT> </HTML> Példa Kitesz egy gombot. Lenyomva kiír egy szöveget proba.html: <html> <head> <script language="JavaScript"> <!-- hide function kiir() { document.write("Hello"); } // --> </script> </head> <body> <form> <input type="button" value="Kiir" onClick="kiir()"> </form> </body> </html> A document.write-al való kiírásnál ugyanabba az oldalba írja ki a szöveget (probahtml) példa Írassuk ki 10-szer egymás alá, hogy Hello, majd Gomb lenyomása után képernyőtörlés, majd írassuk ki 1-től 15-ig az egészeket egymás alá. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide for(x=1;x<=10;x++) document.write("Hello<br>"); function valtoztat() { for(x=1;x<=15;x++) document.write(x+"<br>"); }
document.write("<br>Nyomd meg a gombot a folytatáshoz!"); // --> </script> <form> <input type="button" value="Kiir" onClick="valtoztat()"> </form> </body> </html> Példa Írassuk ki egymás alá 30-tól 50-ig az egészeket. A végén írassuk ki a ciklusváltozó értékét Példa Írassuk ki a 15-től -10-ig a számokat egymás mellé space-el elválasztva. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide for(x=15;x>=-10;x--) document.write(x+" "); Példa Írassuk ki a páros számokat egymás alá 210-től 234-ig. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide for(x=210;x<=234;x++) if(x%2==0) document.write(x+"<br>"); // --> </script> </body> </html> // --> </script> </body> </html> példa
Írassuk ki a páratlan számokat egymás alá 95-től 73-ig. példa Adjuk össze a számokat 20-tól 50-ig. A végén írassuk ki az eredményt <html> <head> </head> <body> <script language="JavaScript"> <!-- hide var osszeg=0; // Kell a nullázás. egyébként hiba! for(x=20;x<=50;x++) osszeg=osszeg+x; document.write("20-50-ig az egészek összege= "+osszeg); // --> </script> </body> </html> példa Adjuk össze a -153-tól 247-ig a páratlan számokat. A végén írassuk ki az eredményt példa Tegyünk ki egy gombot. Írjuk ki , hogy 15 A gombra kattintva egyesével növelje a szám értékét. <html> <head> <script language="JavaScript"> <!-- hide var x=15; function valtoztat() { x=x+1; document.getElementById("reteg1")firstChildnodeValue=x; } // --> </script> </head> <body> <div id="reteg1" style="position:absolute; left:50;
top:80"> // VAGY: <div id="reteg1"> 15 </div> <form> <input type="button" value="Kiir" onClick="valtoztat()"> </form> </body> </html> B megoldás: mint az előző, de A gomb kiíratás és a réteg megadás is a JavaScript kódba: <html> <head> <script language="JavaScript"> <!-- hide var x=15; document.write(<div id="reteg1" >); // VAGY pl. left:100; top:150 document.write(x); document.write("</div>"); function valtoztat() { x=x+1; document.getElementById("reteg1")firstChildnodeValue=x; } document.write("<form>"); document.write(<input type="button" value="Kiir" onClick="valtoztat()">); document.write("</form>"); // --> </script> </head> <body> </body> </html> C megoldás: innerHTML-el <html> <head> <script
language="JavaScript"> <!-- hide var x=15; function valtoztat() { x=x+1; document.getElementById("reteg1")innerHTML=x; } // --> </script> </head> <body> <div id="reteg1" style="position:absolute; left:50; top:80"> 15 </div> <form> <input type="button" value="Kiir" onClick="valtoztat()"> </form> </body> </html> példa Írassuk ki 1-120-ig az egészeket egymás alá oldalanként. Minden oldalra 10 szám kerülhet továbblépés Gomb lenyomására. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide var x,y,z; z=1; document.write(<div id="reteg1" >); document.write("</div>"); function valtoztat() { if(z>=120) return; y=document.getElementById("reteg1"); y.innerHTML=""; for(x=z;x<=z+9;x++)
y.innerHTML=yinnerHTML+x+"<br>"; z=z+10; } valtoztat(); document.write("<br>Nyomd meg a gombot a folytatáshoz!"); // --> </script> <form> <input type="button" value="Kiir" onClick="valtoztat()"> </form> </body> </html> példa Számítsuk ki 1-től 25-ig a számok átlagát, és írassuk ki. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide var a,atlag=0; for(a=1;a<=25;a++) atlag=atlag+a; atlag=atlag/25; document.write("1-25-ig a számok átlaga= "+atlag); // --> </script> </body> </html> példa Olvasson be egy szöveget a billentyűzetről, majd írja vissza a képernyőre. Az oldal betöltődésekor a kurzor már a beviteli mezőben legyen. <html> <head> <script language="JavaScript"> <!-- hide function beolvas() { var szov;
szov=document.form1szovegvalue; document.write("A megadott szöveg="); document.write(szov); } function indul() { document.form1szovegfocus(); //A beviteli mezőre helyezi a fókuszt. } // --> </script> </head> <body onLoad=indul()> // onLoad eseménykezelő. Ez az aktuális oldal betöltésének befejeződésekor // aktivizálódik. <form name="form1"> Adj meg egy szöveget! <input type="text" size="40" name="szoveg"> <input type="button" value="Kiir" onClick="beolvas()"> </form> </body> </html> példa Olvasson be egy számot, és írja ki kétszeresét. <html> <head> <script language="JavaScript"> <!-- hide function beolvas() { var szov; szov=document.form1szovegvalue; document.write("A megadott szám kétszerese="); document.write(szov*2); } // --> </script> </head> <body> <form
name="form1"> Adj meg egy számot! <input type="text" size="40" name="szoveg"> <input type="button" value="Kiir" onClick="beolvas()"> </form> </body> </html> példa Olvasson be egy pozitív egészet. Írassa ki 1-től a számig az egészeket egymás alá <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function beolvas() { var i,x=document.form1szamvalue; for(i=1;i<=x;i++) document.write(i+"<br>"); } // --> </script> <form name="form1"> Adj meg egy egész számot! <input type="text" size="40" name="szam"> <input type="button" value="Kiir" onClick="beolvas()"> </form> </body> </html> példa Olvasson be egy pozitív egészet. Adja össze 1-től a beolvasott számig az egészeket Írja ki
az összeget és a számok átlagát. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function beolvas() { var i,osszeg=0,x=document.form1szamvalue; for(i=1;i<=x;i++) osszeg=osszeg+i; document.write("A beolvasott száig a számok összege= "+osszeg+"<br>"); document.write("és átlaguk= "+osszeg/x); } // --> </script> <form name="form1"> Adj meg egy egész számot! <input type="text" size="40" name="szam"> <input type="button" value="Kiir" onClick="beolvas()"> </form> </body> </html> példa Olvasson be egy pozitív egészet. Írassa ki a szám osztóit egymás alá <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function beolvas() { var i,x=document.form1szamvalue; document.write("A beolvasott
szám osztói:<br>"); for(i=2;i<=x/2;i++) if(x%i==0) document.write(i+"<br>"); } // --> </script> <form name="form1"> Adj meg egy egész számot! <input type="text" size="40" name="szam"> <input type="button" value="Kiir" onClick="beolvas()"> </form> </body> </html> példa Olvasson be egy egészet. Számolja ki a faktoriálisát És írassa ki az eredményt <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function beolvas() { var i,fakt=1,x=document.form1szamvalue; for(i=1;i<=x;i++) fakt=fakt*i; document.write("A beolvasott szám faktoriálisa= "+fakt); } // --> </script> <form name="form1"> Adj meg egy egész számot! <input type="text" size="40" name="szam"> <input type="button"
value="Kiir" onClick="beolvas()"> </form> </body> </html> példa Másodfokú egyenlet gyökeinek kiszámolása: Olvasson be 3 valós számot a billentyűzetről (a, b, c). Számítsa ki ezekre, a megoldó képlettel, a másodfokú egyenlet gyökeit (x1, x2). <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function beolvas() { var a,b,c,d,x1,x2; a=document.form1avalue; b=document.form1bvalue; c=document.form1cvalue; d=b*b-4ac; x1=(-b+Math.sqrt(d))/(2*a); x2=(-b-Math.sqrt(d))/(2*a); document.write("x1= "+x1+"<br>"); document.write("x2= "+x2+"<br>"); } // --> </script> <h3>Másodfokú egyenlet gyökeinek kiszámolása</h3><br> Adj meg 3 számot! <br> <form name="form1"> a=<input type="text" size="40" name="a"><br> b=<input
type="text" size="40" name="b"><br> c=<input type="text" size="40" name="c"> <input type="button" value="Nyomd meg!" onClick="beolvas()"> </form> </body> </html> példa Olvasson be 3 valós számot. Döntse el, hogy a 3 szám lehet-e egy háromszög 3 oldala <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function beolvas() { var a,b,c; a=Number(document.form1avalue); // A Number() függvényt kell itt is használni, mert az a+b-nél a két // számnak nem az összegét venné, hanem összefűzné őket. b=Number(document.form1bvalue); c=Number(document.form1cvalue); if (a + b > c && a + c > b && b + c > a) document.write("A három szám lehet egy háromszög három oldala"); else document.write("A három szám nem lehet egy háromszög három
oldala"); } // --> </script> <h3>Háromszög oldalai</h3><br> Adj meg 3 számot! <br> <form name="form1"> a=<input type="text" size="40" name="a"><br> b=<input type="text" size="40" name="b"><br> c=<input type="text" size="40" name="c"> <input type="button" value="Nyomd meg!" onClick="beolvas()"> </form> </body> </html> példa Írasson ki * karakterekből téglalapot. 10 sor, 20 oszlop <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Rajzol() { var i,j; for(i=1;i<=10;i++) { for(j=1;j<=20;j++) document.write("*"); document.write("<br>"); } } Rajzol(); // --> </script> </body> </html> példa Jelenítse meg az alábbi alakzatot a képernyőn
20 sorban: 1x2x3x 1x2x3x 1x2x3x példa Jelenítse meg az alábbi alakzatot a képernyőn 20 sorban: 1x 1x2x 1x2x3x <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Rajzol() { var i,j; for(i=1;i<=10;i++) { for(j=1;j<=i;j++) document.write(j+"x"); document.write("<br>"); } } Rajzol(); // --> </script> </body> </html> példa Írassa ki 1-10-ig egymás alá a számokat és mellé a szám értékének megfelelő számú * karaktert tegyen. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Rajzol() { var i,j; for(i=1;i<=10;i++) { document.write(i); for(j=1;j<=i;j++) document.write("*"); document.write("<br>"); } } Rajzol(); // --> </script> </body> </html> példa Írassa ki 3 oszlopban: 1. oszlop: számok 1-10 –ig, 2 oszlop: a szám
négyzete, 3 oszlop: a szám gyöke Legyen fejléc. Mindhárom oszlop 50 képpont széles legyen A valós értékeket 3 tizedes jegyen jelenítse meg. A böngésző elnyomja a többszörös szóközöket és a tabulátorjeleket is. Erre megoldás: táblázattal <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Kiir() { var i,gyok; document.write("<table width=150 border=1>"); // VAGY: document.write("<table width=150 >"); for(i=1;i<=10;i++) { gyok=Math.sqrt(i); document.write("<td width=50>"+i+"<td width=50>"+i*i+"<td width=50>"+gyok.toFixed(3)+"<tr>"); } // .toFixed: a számot adott tizedes jegyen jeleníti meg } Kiir(); // --> </script> </body> </html> példa Elöl tesztelős ciklussal írassuk ki 50-től 80-ig a páros számokat egymás alá. <html> <head> </head>
<body> <script language="JavaScript"> <!-- hide function Kiir() { var i=50; while(i<=80) { document.write(i+"<br>"); i=i+2; } } Kiir(); // --> </script> </body> </html> példa Elöl tesztelős ciklussal: adjuk össze a páratlan számokat 11-től 75-ig. A végén írassuk ki az eredményt. példa Hátul tesztelő ciklussal: Írassuk ki 20-tó -10-ig az egészeket egymás alá. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Kiir() { var i=20; do { document.write(i+"<br>"); i--; } while(i>=-10) } Kiir(); // --> </script> </body> </html> példa Hátul tesztelő ciklussal: adjuk össze 50-től 60-ig az egészeket. A végén írassuk ki az összeget, és a számok átlagát. példa Olvassunk be egészeket 15 végjelig. ( 15-re áll meg a beolvasással) A végén írassuk ki a beolvasott számok összegét. A
lezáró 15-öt is számolja bele A kurzor minden lépésnél a beviteli mezőben legyen. <html> <head> <script language="JavaScript"> <!-- hide var osszeg=0,a; function valtoztat() { a=Number(document.form1avalue); // A Number() használatáról már volt. // Itt is az összeadások miatt kell. document.form1avalue=""; // Kitörli a beviteli mező értékét a beolvasás után // Az újabb szám beírása előtt ne legyen benne az előző szám osszeg=osszeg+a; document.form1afocus(); if(a==15) document.write("A beolvasott számok összege= "+osszeg); } function indul() { document.form1afocus(); } // --> </script> </head> <body onLoad=indul()> <form name="form1"> Adj meg egészeket 0 végjelig<br> a=<input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="valtoztat()"> </form>
</body> </html> példa Olvassunk be egészeket 0 végjelig. A végén írassuk ki a beolvasott számok darabszámát, összegét, és átlagát. A lezáró 0-át ne számolja bele az átlagba Kezelje azt is, ha csak 1 db 0-át olvasunk be, hogy ne legyen 0-ával osztás. <head> <script language="JavaScript"> <!-- hide var osszeg=0,a,db=0,atlag; function valtoztat() { a=Number(document.form1avalue); document.form1avalue=""; // Kitörli a beviteli mező értékét a beolvasás után // Az újabb szám beírása előtt ne legyen benne az előző szám document.form1afocus(); if(a!=0) { osszeg=osszeg+a; db++; } else { document.write("A beolvasott számok összege= "+osszeg+"<br>"); document.write("A beolvasott számok darabszáma= "+db+"<br>"); if(db==0) atlag=0; else atlag=osszeg/db; document.write("A beolvasott számok átlaga= "+atlag+"<br>"); } } // -->
</script> </head> <body> <form name="form1"> Adj meg egészeket 0 végjelig<br> a=<input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="valtoztat()"> </form> <script language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> példa Olvassunk be egészeket, 0 végjelig (amíg 0 nem érkezik). Számoljuk meg hány pozitív és hány negatív szám érkezett. <html> <head> <script language="JavaScript"> <!-- hide var pozdb=0,a,negdb=0; function valtoztat() { a=Number(document.form1avalue); document.form1avalue=""; // Kitörli a beviteli mező értékét a beolvasás után // Az újabb szám beírása előtt ne legyen benne az előző szám document.form1afocus(); if(a!=0) { if(a>0) pozdb++; else negdb++; } else {
document.write("A pozitívok darabszáma= "+pozdb+"<br>"); document.write("A negatívok darabszáma= "+negdb+"<br>"); } } // --> </script> </head> <body> <form name="form1"> Adj meg egészeket 0 végjelig<br> a=<input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="valtoztat()"> </form> <script language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> példa Olvassunk be egész számokat 20 végjelig. A végén írassuk ki a legnagyobb számot A lezáró 20-át ne számolja bele, csak ha ez az első szám. <html> <head> <script language="JavaScript"> <!-- hide var legn,a; var VoltMarSzam=false; function valtoztat() { a=Number(document.form1avalue);
document.form1avalue=""; document.form1afocus(); if(VoltMarSzam==false) { legn=a; VoltMarSzam=true; } // A legn változó kezdő értéke az első beolvasott szám lesz. if(a!=20) { if(a>legn) legn=a; } else document.write("A legnagyobb szám= "+legn+"<br>"); } // --> </script> </head> <body> <form name="form1"> Adj meg egészeket 20 végjelig<br> a=<input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="valtoztat()"> </form> <script language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> példa Tegyünk ki egy gombot. a gombra kattintva az ablak háttérszínét állítsuk kékre Piros betűkkel írassuk ki, hogy Hello. <html> <head> </head> <body> <script language="JavaScript">
<!-- hide function valtoztat() { document.write("<font color=Red>Hello</font>"); document.bgColor="Blue"; // a két utasítás sorrendje fontos, mert egyébként // a hátteret nem festi be kékre, mert a document.write-al // új dokumentumot kezd. } // --> </script> <form> <input type="button" value="Gomb" onClick="valtoztat()"> </form> </body> </html> példa Egy beviteli mezőbe írjuk 15-öt. Tegyünk le egy gombot A gombot többször lenyomva növelje egyesével a beviteli mező értékét. A böngésző címsorába is mindig ugyanezt a számot írja. <html> <head> <script language="JavaScript"> <!-- hide var x=15; document.title=x; function valtoztat() { x=x+1; document.form1avalue=x; document.title=x; } // --> </script> </head> <body> <form name="form1"> a=<input type="text" size="40"
name="a" value="15"><br> <input type="button" value="Kiir" onClick="valtoztat()"> </form> </body> </html> 2. Tömbök példa Tömbök: alap feltöltés, kiíratás. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Tombok() { tomb = new Array(); // létrehoztuk az Array objektum egy új példányát. tomb[1]=5; tomb[3]=10; document.write(tomb[1]+" "+tomb[3]+"<br>"); // Kiírja: 5 10 document.write(tomb[5]+"<br>"); // Itt azt írja ki, hogy undefined document.write(3*tomb[5]+"<br>"); // Itt azt írja ki, hogy NaN tomb2 = new Array(); var i; for(i=1;i<=10;i++) tomb2[i]=i*i; for(i=1;i<=10;i++) document.write(tomb2[i]+"<br>"); // Kiírja a négyzetszámokat egymás alá Autok = new Array("Honda","Mercedes","BMW"); // Így is
meg lehet adni a tömböt // Ilyenkor az első elem indexe 0 lesz. document.write(Autoklength+"<br>"); // Kiírja: 3 for(i=0;i<=Autok.length-1;i++) document.write(Autok[i]+"<br>"); // kiírja a 3 autónevet egymás alá. } Tombok(); // --> </script> </body> </html> példa Töltsön fel egy 5 elemű tömböt a billentyűzetről. Majd írassa ki a tömb elemeit egymás mellé space-val elválasztva, majd egymás alá is. <html> <head> <script language="JavaScript"> <!-- hide tomb = new Array(); var i=0; function Beolvas() { i++; tomb[i]=Number(document.form1avalue); document.form1avalue=""; document.form1afocus(); if(i==5) { document.write("A beolvasott számok:"); for(i=1;i<=5;i++) document.write(tomb[i]+" "); document.write("<br>"); for(i=1;i<=5;i++) document.write(tomb[i]+"<br>"); } } // --> </script> </head>
<body> <form name="form1"> Adj meg 5 egész számot<br> a=<input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="Beolvas()"> </form> <script language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> példa Töltsünk fel egy 10 elemű tömböt 50 és 80 közötti véletlen számokkal, majd írassuk ki a tömb elemeit egymás mellé space-ekkel elválasztva. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Tombok() { tomb = new Array(); var i; for(i=1;i<=10;i++) tomb[i]=50+Math.floor(Mathrandom()*30); for(i=1;i<=10;i++) document.write(tomb[i]+" "); } Tombok(); // --> </script> </body> </html> példa 10 elemű egészekből álló tömb Töltse fel a tömböt
25-től a páratlan számokkal. A feltöltés után írassa ki a tömb elemeit egymás mellé szóközzel elválasztva. Majd írassa ki az elemeket fordított sorrendben. példa 1000 elemű egészekből álló tömb. Töltse fel a tömböt 70 és 90 közötti véletlen egészekkel Majd számolja ki az elemek összegét és átlagát és írassa ki azokat. példa 10 elemű egészekből álló tömb. Töltsük fel a tömböt 1-től a négyzetszámokkal Írassuk ki egymás mellé az elemeket szóközzel elválasztva. Forgassa el a tömb elemeit jobbra, úgy hogy az utolsó az első helyre kerüljön. Újra írassa ki az elemeket egy sorba egymás mellé szóközzel elválasztva. <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Tombok() { tomb = new Array(); var i; for(i=1;i<=10;i++) tomb[i]=i*i; for(i=1;i<=10;i++) document.write(tomb[i]+" "); document.write("<br>"); var csere=tomb[10];
for(i=10;i>=2;i--) tomb[i]=tomb[i-1]; tomb[1]=csere; for(i=1;i<=10;i++) document.write(tomb[i]+" "); } Tombok(); // --> </script> </body> </html> példa Mint az előző, de az elemeket nem forgatni, hanem tükrözni kell a középvonalra. ( Fordított sorrendbe rendeződnek az elemek. ) <html> <head> </head> <body> <script language="JavaScript"> <!-- hide function Tombok() { tomb = new Array(); var i; for(i=1;i<=10;i++) tomb[i]=i*i; for(i=1;i<=10;i++) document.write(tomb[i]+" "); document.write("<br>"); var csere; for(i=1;i<=5;i++) { csere=tomb[i]; tomb[i]=tomb[11-i]; tomb[11-i]=csere; } for(i=1;i<=10;i++) document.write(tomb[i]+" "); } Tombok(); // --> </script> </body> </html> példa Olvassuk be hogy hány elemet fogunk kezelni (n). Olvassuk be a tömbbe az elemeket. Írassuk ki az elemeket a tömbindexükkel együtt 2 oszlopban.
<html> <head> <script language="JavaScript"> <!-- hide var db,i=0; var beolvasott=false; tomb = new Array(); function beolvas() { if(beolvasott==false) { db=document.form1avalue; document.getElementById("reteg1")innerHTML="Add meg a következő számot!"; beolvasott=true; document.form1avalue=""; document.form1afocus(); } else { i++; tomb[i]=document.form1avalue; document.form1avalue=""; document.form1afocus(); if(i==db) { for(i=1;i<=db;i++) document.write(i+" "+tomb[i]+"<br>"); } } } // --> </script> </head> <body> <div id="reteg1"> Add meg hány számot fogunk kezelni. </div> <form name="form1"> a=<input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="beolvas()"> </form> <script
language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> A Javascript-ben elsősorban egy-dimenziós tömbök vannak. A „többdimenziós” tömbre megvalósítás: rekordokból álló tömb. példa Olvasson be számokat. A beolvasás végét 0 jelezze Írassa ki az elemeket a beolvasás sorrendjében. <html> <head> <script language="JavaScript"> <!-- hide var db=0; var beolvasott=false; tomb = new Array(); function beolvas() { if(document.form1avalue!=0) { db++; tomb[db]=document.form1avalue; document.form1avalue=""; document.form1afocus(); } else { document.write("A beolvasott számok:"); var i; for(i=1;i<=db;i++) document.write(tomb[i]+" "); } } // --> </script> </head> <body> Adj meg számokat 0 végjelig! <form name="form1"> a=<input type="text" size="40"
name="a"><br> <input type="button" value="Gomb" onClick="beolvas()"> </form> <script language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> példa Olvasson be 5 számot. Rendezze a számokat növekvő sorrendbe Írja ki a rendezett tömb elemeit. <html> <head> <script language="JavaScript"> <!-- hide var db=1; var beolvasott=false; tomb = new Array(); function beolvas() { tomb[db]=document.form1avalue; document.form1avalue=""; document.form1afocus(); db++; document.getElementById("reteg1")innerHTML=db+" szám="; if(db==6) { var i,j,cs; for(j=1;j<=5;j++) for(i=1;i<=4;i++) if(tomb[i]>tomb[i+1]) { cs=tomb[i]; tomb[i]=tomb[i+1]; tomb[i+1]=cs; } document.write("A beolvasott számok növekvő sorrendben:"); for(i=1;i<=5;i++) document.write(tomb[i]+" "); } } //
--> </script> </head> <body> <div id="reteg1"> Adj meg 5 számot!<br> 1. szám= </div> <form name="form1"> <input type="text" size="40" name="a"><br> <input type="button" value="Gomb" onClick="beolvas()"> </form> <script language="JavaScript"> <!-- hide document.form1afocus(); // --> </script> </body> </html> 3. Néhány JavaScript feladat feladat Aktuális datum/idő kiíratása. A JavaScript utasításokat külön fájlba tegyük ido.js: most=new Date(); // var kulcsszó nem is kell. document.write(most+"<br>"); ora=most.getHours(); perc=most.getMinutes(); masodperc=most.getSeconds(); document.write("óra="+ora+"<br>"); document.write("perc="+perc+"<br>");
document.write("másodperc="+masodperc+"<br>"); document.write("<h1>"+ora+":"+perc+":"+masodperc); proba.html: <html> <head> </head> <body> <h1>Aktuális idő: </h1><br> <script language="JavaScript" src="ido.js"> </script> </body> </html> példa Kis ablakban válasz vár a felhasználótól. Majd a képernyőre írja <html> <head> </head> <body> <script language="JavaScript"> szoveg=prompt("Írj be egy szöveget!"); document.write("A beírt szöveg= "+szoveg); </script> </body> </html> példa Tegyünk az oldalra 3 linket. Írassuk ki a linkek számát, majd a linkek címét egymás alá Helyezzünk el egy gombot az oldalon. A gombra kattintva változtassa meg az utolsó link címét http://www.szolfhu-ra, szövegét "Főiskola"-ra Az oldal
háttérszínét pirosra, a szöveg színét sárgára. <html> <head> </head> <body> <a href="http://www.indexhu">Index</a><br> <a href="http://www.origohu">Origo</a><br> <a href="http://www.startlaphu">Startlap</a><br> <script language="JavaScript"> var db=document.linkslength; document.write("Az oldalon szereplő linkkek száma: "+db); document.write("<br>A linkek:<br>"); var i; for(i=0;i<=db-1;i++) document.write(documentlinks[i]href+"<br>"); function valtoztat() { document.bgColor="Red"; document.fgColor="Yellow"; document.links[db-1]href="http://wwwszolfhu"; document.links[db-1]innerText="Főiskola"; } </script> <form name="form1"> <input type="button" value="Gomb" onClick="valtoztat()"> </form>
</body> </html> példa Írassuk ki hogy hány oldalon jártunk. Rakjunk le egy gombot is a gombra kattintva lépjünk egyet vissza. <html> <head> </head> <body> <script language="JavaScript"> var db=history.length; // vagy: windowhistorylength document.write("Az eddig meglátogatott oldalak száma: "+db); function valtoztat() { history.go(-1); } </script> <form name="form1"> <input type="button" value="Gomb" onClick="valtoztat()"> </form> </body> </html> history.go(-2); history.go(2); history.back(): history.forward(): Kettőt lép vissza Kettőt lép előre Előző oldalra lép. Következő oldalra lép
Kóka János 1972. július 5-én született Budapesten. 1986-tól az esztergomi Temesvári Pelbárt Ferences Gimnázium tanulója volt, itt is érettségizett 1990-ben. A bizonyítvány megszerzését követően tanulmányait a Semmelweis Orvostudományi Egyetem Általános Orvostudományi Karán folytatta, ahol 1996-ban szerzett diplomát. Szakmai pályafutását az informatikai iparban kezdte
