A változók elnevezése. A JavaScript alapjai. Általános változó. Helyi változó. Értékadás változónak. Kifejezések

Átírás

1 A változók elnevezése A JavaScript alapjai webprogramozó Csak az angol abc bet it, a számjegyeket és az aláhúzásjelet használhatjuk Nem használhatunk szóközt és írásjeleket Az els karakter csak bet, vagy aláhúzásjel lehet. A kis- és nagybet k különböz knek számítanak. A változónév tetsz leges hosszúságú lehet, de egy sorban el kell férnie. Általános változó Hatóköre a teljes programra kiterjed. A f programban kell bevezetni. Helyi változó Hatóköre egyetlen függvényre terjed ki A függvény belsejében kell deklarálni a var kulcsszóval. A függvény paraméterlistájában szerepl változók is mindig helyi változók. Értékadás változónak változónév = érték lines = 40; lines = lines + 1; lines += 1; lines++; ++lines; Kifejezések Értékek és változók együttese A közöttük lév kapcsolatokat a m veleti jelek határozzák meg. 1

2 veleti jelek + Karakterláncok összef zése + Összeadás - Kivonás * Szorzás / Osztás % Maradékképzés ++ Növelés -- Csökkentés Adattípusok A JavaScript nem szigorúan típusos nyelv Szám: egész, lebeg pontos Logikai: true, false Karakterlánc: "szöveg" A null érték: Meghatározatlan változó Típuskonverzió Automatikusan történik "A teljes összeg: "+osszeg; egesz = parseint(szoveg); egesz = szoveg*1; valos = parsefloat(szoveg); valos = szoveg*1.0; Készítsünk olyan programot, amely két szöveget összef z, és egy figyelmeztet ablakon kiír. <form name="urlap"> <input type="text" name="szoveg1"><br> <input type="text" name="szoveg2"><br> <input type="button" value="összeadás" onclick="osszead()"> </form> function osszead(){ sz1 = document.urlap.szoveg1.value; sz2 = document.urlap.szoveg2.value; osszeg = sz1 + sz2; alert(osszeg); 2

3 Készítsünk olyan programot, amely két számot összead, és egy figyelmeztet ablakon kiír. <form name="urlap"> <input type="text" name="szoveg1"><br> <input type="text" name="szoveg2"><br> <input type="button" value="összeadás" onclick="osszead()"> </form> function osszead(){ sz1 = document.urlap.szoveg1.value*1; sz2 = document.urlap.szoveg2.value*1; osszeg = sz1 + sz2; alert(osszeg); Karakterlánc hossza length szoveg = "Ez egy szöveg."; hossz = szoveg.length; Ekkor a hossz értéke: 14. Kisbet -nagybet átalakítás touppercase() : a szöveg minden karakterét nagybet sre változtatja tolowercase() : a szöveg minden karakterét kisbet sre változtatja Szövegrészletek substring(kezd pozíció,végpozíció) A végpozíció nem tartozik a részlethez. Az indexérték mindig 0-ról indul. abece = "abcdefghijklmnopqrstuvwxyz"; abece.substring(0,4) értéke: abcde abece.substring(10,12) értéke: kl abece.substring(6,7) értéke: g abece.substring(24,26) értéke: yz 3

4 charat(pozíció) Egyetlen karakter Az indexérték itt is 0-val kezd dik. abece.charat(0) eredménye: a abece.charat(12) eredménye: m abece.charat(25) eredménye: z abece.chatat(27) eredménye üres karakterlánc Szövegrész keresése indexof("karakterlánc") A karakterlánc el fordulási helyének indexét adja eredményül. indexof("karakterlánc",kezd pozíció) A karakterlánc el fordulási helyének indexét adja eredményül. A keresés a kezd pozíciótól indul. pontok = new Array(); Számtömbök létrehoz egy tömböt, az elemszámot kés bb adjuk meg. pontok = new Array(4); létrehoz egy négy elemb l álló tömböt pontok = new Array(39,40,100,49) létrehoz egy tömböt, és fel is tölti adatokkal. Számtömbök pontok[0] = 39; pontok[1] = 40; pontok[2] = 100; pontok[3] = 49; Értékadás a tömb elemeinek külön-külön pontok = [39,40,100,49] Értékadás a tömb elemeinek egyszerre length A tömb hossza Karakterlánctömbök nevek = new Array(30) nevek[0] = "Szabó Béla"; nevek[1] = "Kovács István"; nevek = new Array("Szabó Béla","Kovács István"); nevek = ["Szabó Béla","Kovács István"]; 4

5 Karakterlánc szétvágása split("karakter"); Az adott karakter el fordulásainak helyén feldarabolja a szöveget. szoveg = "Ez egy szöveg."; reszek = szoveg.split(" "); reszek[0] értéke: Ez reszek[1] értéke: egy reszek[2] értéke: szöveg. Karakterlánc tömb elemeinek összef zése join("karakter"); A karakterlánc tömb elemeit összef zi, az elemek közé beszúrja az adott karaktert. szoveg = reszek.join(" "); Karakterlánc tömbök rendezése rendezett = nevek.sort(); A rendezett tömbben már ábécérendben lesznek az elemek. Számtömbök rendezése A sort() ábécérendbe rendezi az elemeket. Megoldás: function vizsgalat(a,b){ return a-b; szamok = new Array(30,10,200,4); rendezett = szamok.sort(vizsgalat); Készítsünk olyan alkalmazást, amely egy szövegbeviteli mez be beírt szöveget ábécérend szerint illeszt egy szövegmez be. 5

6 <form name="urlap"> <input type="text" name="szoveg"> <input type="button" value="hozzáad" onclick="beszur()"><br> <textarea cols="60" rows="20" name="mezo"></textarea> </form> var szamlalo = 0; var tomb = new Array(); function beszur(){ sz = document.urlap.szoveg.value; tomb[szamlalo] = sz; szamlalo++; tomb.sort(); document.urlap.mezo.value = tomb.join("\n"); Függvények meghatározása function függvénynév(paraméterlista){ a függvény utasításai return visszatérési érték //nem kötelez Írjunk olyan programot, amely egy szövegbeviteli mez be beírt szöveget kiír egy figyelmeztet ablakra! <form name="urlap"> <input type="text" name="szoveg"><br> <input type="button" value="kiír" onclick="kiir()"> </form> function kiir(){ sz = document.urlap.szoveg.value; alert(sz); 6

7 Írjunk olyan programot, amely három szövegbeviteli mez be beírt szám átlagát kiírja egy figyelmeztet ablakra! <form name="urlap"> <input type="text" name="szoveg1"><br> <input type="text" name="szoveg2"><br> <input type="text" name="szoveg3"><br> <input type="button" value="kiír" onclick="kiir()"> </form> function atlag(a,b,c){ return (a+b+c)/3; function kiir(){ sz1 = document.urlap.szoveg1.value*1; sz2 = document.urlap.szoveg2.value*1; sz3 = document.urlap.szoveg3.value*1; alert(atlag(sz1,sz2,sz3)); Objektumok Konstruktor: function NevjegyKartya(nev,cim,telefon){ this.nev = nev; this.cim = cim; this.telefon = telefon; this.kiiras = Kiiras; //tagfüggvény Tagfüggvény: function Kiiras(){ Objektumok document.write("név: "+this.name+"<br>"); document.write("cím: "+this.cim+"<br>"); document.write("telefon: " +this.telefon+"<br>"); Objektumpéldány létrehozása tom = new NevjegyKartya("Tom Jones","123 Elm Street"," "); vagy tom = new NevjegyKartya(); tom.nev = "Tom Jones"; tom.cim = "123 Elm Street"; tom.telefon = " "; 7

8 Tagfüggvény hívása tom.printcard(); Készítsünk olyan programot, amely a másodfokú egyenlet együtthatóiból kiszámítja annak gyökeit! Használjunk objektumot! <form name="urlap"> <input type="text" name="szoveg1"><br> <input type="text" name="szoveg2"><br> <input type="text" name="szoveg3"><br> <input type="button" value="kiír" onclick="kiir()"> </form> function Masodfoku(a,b,c){ this.a = a; this.b = b; this.c = c; this.diszkriminans = Diszkriminans; this.masodfokue = Masodfokue; this.vane = Vane; this.gyok1 = Gyok1; this.gyok2 = Gyok2; this.megoldas = Megoldas; function Diszkriminans(){ return this.b*this.b-4*this.a*this.c; function Masodfokue(){ if (a == 0) return false; else return true; function Vane(){ if (this.diszkriminans()>=0) return true; else return false; function Gyok1(){ return (-this.b+math.sqrt(this.diszkriminans()))/(2*this.a); function Gyok2(){ return (-this.b-math.sqrt(this.diszkriminans()))/(2*this.a); function Megoldas(){ if (this.masodfokue()==false) alert("nem másodfokú."); else if (this.vane()==false) alert("nincs valós megoldás."); else alert(this.gyok1()+" "+this.gyok2()); 8

9 function kiir(){ a = document.urlap.szoveg1.value*1; b = document.urlap.szoveg2.value*1; c = document.urlap.szoveg3.value*1; egyenlet = new Masodfoku(a,b,c); egyenlet.megoldas(); Készítsünk olyan programot, amely objektumot használ uralkodóink adatainak tárolásához, és egységes formában történ kiírásához! <body> <h1>uralkodóink</h1> <hr> type="text/javascript" src="kiralyok.js"> </body> function Kiraly(nev,kezdet,veg,csalad){ this.nev = nev; this.kezdet = kezdet; this.veg = veg; this.csalad = csalad; this.kiir = Kiir; function Kiir(){ document.write("<b>név:</b> "+this.nev+"<br>"); document.write("<b>uralkodás kezdete:</b> "+this.kezdet+"<br>"); document.write("<b>uralkodás vége:</b> "+this.veg+"<br>"); document.write("<b>család:</b> "+this.csalad+"<br>"); document.write("<hr>"); istvan = new Kiraly("I.István","997","1038","Árpád-ház"); peter = new Kiraly("I.Péter","1038","1046","Orseolo"); samuel = new Kiraly("Aba Sámuel","1041","1044","Aba"); andras = new Kiraly("I.András","1046","1060","Árpád-ház"); bela = new Kiraly("I.Béla","1060","1063","Árpád-ház"); istvan.kiir(); peter.kiir(); samuel.kiir(); andras.kiir(); bela.kiir(); if (feltétel) utasítás; if (feltétel) { utasítások Az if utasítás Csak akkor hajtja végre az utasítást, illetve utasításokat, ha a feltétel igaz. 9

10 Feltételes m veletek == : egyenl!= : nem egyenl < : kisebb > : nagyobb <= : kisebb, vagy egyenl >= : nagyobb, vagy egyenl && : ÉS : VAGY Logikai m veletek if.. else if (feltétel) { utasítások else{ utasítások Az else ág utasításai akkor hajtódnak végre, ha a feltétel nem igaz. Készítsünk olyan alkalmazást, ami az aktuális id ponttól függ en a napszaknak megfelel en üdvözöl minket! <body> <h1>köszönés</h1> <hr> type="text/javascript" src="udvozol.js"> </body> most = new Date(); ora = most.gethours(); if (ora < 10) document.write("jó reggelt kívánok!"); else if (ora < 17) document.write("jó napot kívánok!"); else document.write("jó estét kívánok!"); 10

11 Több feltétel: switch switch (változó) { case eset1: utasítás1; break; case eset2: utasítás2; break; case esetn: utasításn; break; default: utasítás; A for ciklus for (inicializálás; feltétel; léptetés){ utasítások; Az utasítások addig hajtódnak végre, amíg a feltétel igaz. Készítsünk olyan programot, amely 1-t l 20-ig külön sorokban kiírja a számokat és a négyzeteiket! <body> <h1>számok és négyzeteik</h1> for (i=1; i<=20; i++){ document.write(i+" négyzete: " +i*i+"<br>"); </body> while (feltétel){ utasítások A while ciklus do{ utasítások while (feltétel); A do.. while ciklus Az utasítások addig hajtódnak végre, amíg a feltétel igaz. Az utasítások addig hajtódnak végre, amíg a feltétel igaz. 11

12 break, continue A break utasítás hatására a ciklus megszakad, a program a ciklus után folytatódik A continue is megszakítja a ciklust, de nem lép ki bel le, hanem a ciklus elejét l folytatja a végrehajtást. for.. in Egy objektum tulajdonságait járhatjuk be a segítségével. Készítsünk olyan alkalmazást, amely bekér neveket, majd kiírja ket egy sorszámozott listában! <body> <h1>nevek</h1> type="text/javascript" src="nevek.js"> </body> nevek = new Array(); i = 0; do{ kovetkezo = window.prompt("írj be egy nevet",""); if (kovetkezo > " ") nevek[i] = kovetkezo; i++; while (kovetkezo > " "); document.write("nevek száma: "+nevek.length+"<br>"); document.write("<ol>"); for (i in nevek) { document.write("<li>"+nevek[i]+"<br>"); document.write("</ol>"); Math A JavaScript beépített osztálya Matematikai állandókat, függvényeket tartalmaz 12

13 A Math osztály függvényei ceil() : a számot egész számra kerekíti felfelé floor() : a számot egész számra kerekíti lefelé round() : a számot a legközelebbi egész számra kerekíti random() : 0 és 1 között véletlenszer en el állított valós szám. Készítsünk olyan alkalmazást, amely véletlenszer en kitölti a 13+1 mérk zést tartalmazó totószelvényt! <body> <h1>totó</h1> for (i=1; i<=14; i++){ tipp = Math.floor(Math.random()*3); if (i < 14) document.write(i+". mérk zés: "); else document.write("13+1. mérk zés: "); if (tipp == 0) document.write("x <br>"); else document.write(tipp+"<br>"); </body> with Használatával a gyakran használt objektum nevének a gyakori leírása elkerülhet. with (nev){ window.alert("a név hossza: "+length); nagybetusnev = touppercase(); Date Ez az objektum a dátumokkal kapcsolatos munkát könnyíti meg. sznap = new Date(); sznap = new Date("June 20, :00:00"); sznap = new Date(6, 20, 2003); sznap = new Date(6, 20, 2003, 8, 0, 0); Dátum beállítása setdate() : a nap beállítása setmonth() : a hónap beállítása setfullyear() : az év beállítása settime() : az id t és a dátumot állítja be, az január 1. óta eltelt ezredmásodpercek számát kell megadni sethours, setminutes(), setseconds() : az órát, a percet és a másodpercet állítja be. 13

14 Dátumok lekérdezése getdate() : a napot kérdezi le getmonth() : a hónapot kérdezi le getfullyear() : az évet kérdezi le. gettime(): az id t és a dátumot kérdezi le (az január 1. óta eltelt ezredmásodpercek száma) gethours(), getminutes(), getseconds(), getmilliseconds() : az órát, a percet, a másodpercet és az ezredmásodpercet állítja be. VÉGE 14