Webprogramozás szakkör 1. Alkalom (2012.03.06) Megjegyzés: kódot innen Ctrl-C és Ctrl-V parancsokkal ne másoljatok ki, mert nem biztos, hogy működni fog. Vagy írjátok be, vagy használjátok a kiadott.html kiterjesztésű fájlt, és annak a kódját használjátok fel. Mi is az a programozás? Adott egy feladat. Kérdés: hogyan tudjuk leírni az adott feladatot? Elvárás: adott bemenetre adott kimenetet adjon Pl: Írjuk meg a házi feladatot o START o Vegyük elő a könyvet és füzetet UTÁNA o HA volt házi, AKKOR kezdjünk el gondolkozni a feladaton Gondolkozunk, AMÍG meg nem lesz a megoldás o HA megvan a megoldás AKKOR írjuk le HA NEM sikerül 1 óra alatt, akkor hagyjuk o UTÁNA ellenőrizzük le HA hibát találunk, javítsuk o STOP Sokféle megoldás lehetséges! Ezt ábrázolhatjuk egy folyamatábrán (itt csak a folyamatábra elemei láthatóak) Szent Angéla Webprogramozási szakkör (Paksy Patrik) 1
Hogyan programozzuk le? Lépésről lépésre való megvalósítás o A folyamatot modellezzük, felkészülve a hibákra is Nincs megadott recept o Ismerni kell hozzá egy nyelvet + ötlet + gyakorlás o Matematika az alapja Algoritmusok A programozás menete o Specifikáció: a feladat megfogalmazása MIT SZERETNÉNK CSINÁLNI? o Algoritmizálás: tervezés HOGYAN CSINÁLJUK MEG? Módszer a feladat megoldására, véges sok lépésből o Kódolás: megvalósítjuk egy programozási nyelven MEGCSINÁLJUK! o Tesztelés: megvizsgáljuk, hogy helyes-e a működés JÓL CSINÁLTUK MEG? Nyelvek, tematika HTML CSS Szent Angéla Webprogramozási szakkör (Paksy Patrik) 2
JavaScript PHP SQL Most programozás alapok, következő órától célzottan webfejlesztés, de amit ma veszünk a későbbiekben fontos lesz. PHP és JavaScript is erre épít, illetve bármely más nyelv megtanulásánál ezek az alapok kellenek. Egy 2. vagy 3. nyelv tanulása már nem akkora idő, mint a legelsőé, általában csak a szintaxis más, illetve vannak specialitások. Szerkesztő: Minden bonyolultabb (felsőbb szintű) nyelvhez saját szerkesztő társul Az egyszerűbbekhez elég egy jegyzettömb is (mindenhez elég, de sokszor kényelmetlen) o Kódkiegészítés o Szintaxis kiemelése Mi a Notepad++ programot fogjuk használni o Egyszerű, ingyenes Programozás alapok Kiíratás document.write( szöveg ); document.write( szöveg ); document.write(2); // szám document.writeln(66); // új sor kezdést rak a végére (\n) o <pre> tag-el működik csak (előformázott szöveg) Ez egy utasítás, melynek a lezárása egy pontosvessző. Kommentek (tetszőleges megjegyzés beírása a kódba) Egysoros: // ez itt a komment Többsoros: /* ez itt a komment */ Feladat 0: Hello World! Szükséges ismeretek: kiíratás Megoldás: Készítsünk Notepad++ programban egy új file-t (File/New), majd egyből üresen mentsük is el (File/Save as). A név megadásánál válasszuk ki, hogy ez egy HTML fájl legyen (HyperText Markup Language file - *.html, *.htm ). Szent Angéla Webprogramozási szakkör (Paksy Patrik) 3
<pre> <script type="text/javascript"> document.writeln( Hello World! ); </script> </pre> A <script> közti rész a JavaScript kód, ezt mindig meg kell adnunk (ez így nem igaz, de ha.html fájlba dolgozunk, akkor igen). A <pre> pedig azért kell, hogy a document.writeln új sorba kezdése működjön helyesen. Feladat 1 írjuk ki 1-től 10-ig a számokat Szükséges ismeretek: kiíratás // Megoldás 1: document.writeln(1); document.writeln(2); document.writeln(3); document.writeln(4); document.writeln(5); document.writeln(6); document.writeln(7); document.writeln(8); document.writeln(9); document.writeln(10); // Megoldás 2: document.write( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ); document.write(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); Az utasítások egymás utániságát szekvenciának nevezzük. Változók Matematika o x + 4 = 7 x = 3 Típusosság o Egyszerű (szöveg, egész szám, lebegőpontos szám például 10.7542) o Összetett (tömb) o Az általunk használt nyelvek gyengén típusosak lesznek, vagyis nem kell megadni, hogy milyen változót használunk Érték o értékadás (megadjuk, hogy mennyi legyen az értéke a változó a bal oldalon) o kiértékelés (kiolvassuk a változó értékét) Inicializálás (kezdeti értékadás) o var x = 5; o var y = Szöveg ; VAGY var y = Szöveg ; var jelzi, hogy változót adunk meg o nem kötelező, de AJÁNLOTT a használata o más nyelvekben helyette áll a típus, pl: int x = 5; (int jelenti, hogy egész szám típusú a változó) Szent Angéla Webprogramozási szakkör (Paksy Patrik) 4
Definíció o Elnevezzük a változót (és megadjuk a típust, ha a nyelv olyan) o Értékadás o Pl: var x = 5; Operátorok Műveleti: +, -, *, /, %, ++, -- Relációs (összehasonlítás): <, <=, >, >=, =, == (érték egyezés), === (típus és érték egyezés),!= (nem egyenlő) Logikai (and or not, azaz ÉS VAGY NEGÁLÁS): &&,,! Feltételes: változó = (feltétel)? ha igaz : ha hamis; o Ezt nem vettük az órán, példa van rá a kódban Szövegre a + operátor szöveg összefűzését jelenti Feladat 2 műveletek Szükséges ismeretek: kiíratás, változók, operátorok Inicializáljunk (adjunk neki értéket) néhány változót, és írjuk ki a következőket (kifejezéseket): var a = 5; var b = 8; var c = "programozás"; var d; var e = false; var f = true; document.writeln(d = a+b); document.writeln(d); document.writeln(b/a); document.writeln(b*a); document.writeln(a-b); document.writeln(b % 3); a++; document.writeln(a); a--; document.writeln(a); document.writeln(a == c); document.writeln(a!= c); document.writeln(e); document.writeln(!e); document.writeln(e && f); document.writeln(e && e); document.writeln(f && f); document.writeln(e f); document.writeln(e e); document.writeln(f f); document.writeln(e && e); document.writeln(f && f); document.writeln(a + " " + c); document.writeln(a >= 5? "igggaaaz" : "hammiiiis"); document.writeln(a > 5? "igggaaaz" : "hammiiiis"); Szent Angéla Webprogramozási szakkör (Paksy Patrik) 5
Mutassuk meg, hogy nem csak a document.write-ban végezhetjük el a műveleteket (pl. a legelső sor helyett d = a+b;, majd kiírjuk d-t. Nézzük meg, hogy mi történik az alábbi esetekben: document.writeln(d); document.writeln(c % 2); // első sorba téve: undefined // NaN = Not a Number Az első esetben nem adtunk a változónak értéket, így definiálatlan lesz (undefined), a második esetben pedig szövegen próbálunk olyan műveletet végezni, ami számra értelmes (maradékképzés), így jelez, hogy nem számon próbálkozunk. Következtetések: A műveletek sorrendjének változtatása nem ugyanazt az eredményt adja A program soronként fut végig, és az alkalmazott változtatások érvényben maradnak Elágazás If-else Az if kötelező, az else if-ből 0..N darab lehet, az else-ből pedig 0..1 darab. if (feltétel) { ha teljesül else if (feltétel) { ha ez teljesül else { egyébként ez történik Feladat 3 elágazás Szükséges ismeretek: kiíratás, változók, operátorok, elágazás var a = 5; var b = 8; var c = "programozás"; var d; var e = false; var f = true; if (a > 3 && c == "Programozás") { document.writeln("if"); else if (a > 3 && c == "programozás") { document.writeln("elseif"); else { document.writeln("else"); Figyeljünk a kód tördelésére is (space-ek, tabok)! Szent Angéla Webprogramozási szakkör (Paksy Patrik) 6
Switch-case (nem volt róla szó) Ugyanazt valósítja meg, mint az IF-ELSE szerkezet, csak annyi különbséggel, hogy akkor tudjuk ezt használni, ha ugyanaz a kifejezés szerepelne minden feltételben, csak az a kérdés, hogy mi az értéke. IF-ELSE példa: if (n == 1) { document.writeln( ha 1-el egyenlő az n ); else if (n == 2) { document.writeln( ha 2-vel egyenlő az n ); else { document.writeln( ha nem 1 és nem 2 ); UGYANEZ switch-case-el: switch(n) { case 1: document.writeln( ha 1-el egyenlő az n ); break; case 2: document.writeln( ha 2-vel egyenlő az n ); break; default: document.writeln( ha nem 1 és nem 2 ); A break; utasítások azért kellenek, hogy kilépjünk a szerkezetből, és a switch lezáró kapcsos zárójele után folytatódjon a program futása. Ha nem tennénk ki, de belefutnánk például a case 1: ágba, akkor utána megvizsgálja az összes többi ágat is, így olyan lesz, mintha nem a fenti IF-ELSE IF-ELSE szerkezet lenne, hanem az alábbi (két különálló egymás utáni IF): if (n == 1) { ha 1-el egyenlő az n if (n == 2) { ha 2-vel egyenlő az n ha nem 1 és nem 2 Ciklusok For ciklus Adott kezdőértéktől, adott végértékig egy változót növelünk, és ellenőrizzük, hogy mikor teljesül a végérték feltétele. for (ciklusváltozó_neve = kezdőérték; végérték feltétel; ciklusváltozó változtatása) { <minden ciklusban végrehajtandó utasítások> A ciklusváltozót ha a for()-ban deklaráljuk, akkor csak azon belül lesz érvényes. Szent Angéla Webprogramozási szakkör (Paksy Patrik) 7
Feladat 4 írjuk ki 1-től 10-ig a számokat (fejlesszük tovább az 1. feladatot) Szükséges ismeretek: kiíratás, változók, operátorok, for ciklus for (var i = 0; i < 11; i++) { document.writeln(i); Mi is az algoritmusunk? Választunk egy számot (kezdőszám) Választunk egy végső számot Ismételjük, amíg a választott kezdőszám < végsőszám o Kiírjuk a számot o Újsort kezdünk (document.writeln()) o Növeljük a ciklusváltozót 1-el Ismétlés (ciklus) vége Amit most írtunk, azt hívják pszeudokódnak: az algoritmus programszerű leírása érthető nyelven (lehet emberi, matematikai, DE nem maga a programozott leírás) Feladat 5 írjuk ki 1-től 10-ig a páros számokat Szükséges ismeretek: kiíratás, változók, operátorok, for ciklus for (var i = 0; i < 11; i = i+2) { document.writeln(i); Feladat 6 ÖNÁLLÓ FELADAT írjuk ki 1-től 10-ig a páratlan, nem 3-al osztható számokat Szükséges ismeretek: kiíratás, változók, operátorok, elágazás, for ciklus for (var i = 1; i < 11; i = i + 2) { if (i % 3!= 0) { document.writeln(i); While ciklus Egy adott feltétel teljesüléséig megy a ciklus 2 típus o Előltesztelő: 0..N darab futás Megvizsgáljuk a feltételt, és ha nem teljesük, akkor be se lépünk a ciklusba Ha teljesül, akkor addig ismétlünk, amíg a feltétel teljesül o Hátultesztelő: 1..N darab futás Mindenképpen egyszer belépünk, futtatjuk a ciklust, utána megvizsgáljuk a feltételt, és ha IGAZ, akkor folytatjuk a ciklust, ha HAMIS, akkor kilépünk belőle. Szent Angéla Webprogramozási szakkör (Paksy Patrik) 8
Ha folytatjuk, akkor addig megy, amíg IGAZ a feltétel VIGYÁZZUNK! o A feltételnek valamikor hamisnak kell lennie, különben végtelen ciklusba kerülünk, vagyis soha nem fog a program leállni, hanem ismétlődik folyamatosan a megadott parancs // ELÖLTESZTELŐ while (feltétel) { <utasítások> // HÁTULTESZTELŐ do { <utasítások> while (feltétel); Feladat 7 írjuk ki while ciklussal 1-től 10-ig a számokat Szükséges ismeretek: kiíratás, változók, operátorok, while ciklus do { document.writeln(i); i++; while (i <= 10); Próbáljuk ki a kétféle ciklust, milyen feltételre fut az egyik 0-szor, a másik 1-szer? (Pl: i < 0) Ciklusok megtörése (ezt a részt nem vettük) Break Kilépés az adott ciklusból, a ciklus utáni első sorral folytatódik a feldolgozás. Feladat 8/a írjuk ki for ciklussal 1-től 10-ig a számokat, de 3-nál szakítsuk meg a ciklust Szükséges ismeretek: kiíratás, változók, operátorok, for ciklus, break for (i = 0; i <= 10; i++) { if (i == 3) { break; document.writeln("a szám: " + i); Continue Az adott iteráció (a ciklus egy adott értékénél végzett utasítások összessége, vagyis két ciklusváltozó változtatás közti rész) átugrása, folytatás a következő iterációval. Feladat 8/b írjuk ki for ciklussal 1-től 10-ig a számokat, de a 3-at ugorjuk át Szükséges ismeretek: kiíratás, változók, operátorok, for ciklus, continue Szent Angéla Webprogramozási szakkör (Paksy Patrik) 9
for (i = 0; i <= 10; i++) { if (i == 3) { continue; document.writeln("a szám: " + i); Objektumok (tömbök) Egy változóban több érték, összetettebb dolog tárolása. Változó / tömb o Egyszerű változó: 1 darab láda 1 rekesszel o Tömb: 1 darab láda, N rekesszel A tömb egy objektum, melynek tulajdonságai is lehetnek (pl. tomb.length megadja a tömb hosszát) Minden rekesz egy számmal azonosítva o 0-tól N-ig (tetszőleges N) o ezt a számot nevezzük a tömb index-ének o lehetnek különböző típusú értékek az egyes rekeszekben // EDDIG EGYSZERŰ VÁLTOZÓKAT HASZNÁLTUNK var car1="saab"; var car2="volvo"; var car3="bmw"; // MOSTMÁR TÖMBÖKET (ARRAY) SZÁMOZZUK A REKESZEKET, HOGY MELYIKBE TESSZÜK AZ ÉRTÉKET var mycars = new Array(); // new: létrehozás mycars[0]="saab"; mycars[1]="volvo"; mycars[2]="bmw"; // MÁS LEHETŐSÉGEK AZ ÉRTÉKEK MEGADÁSÁRA var mycars = new Array("Saab","Volvo","BMW"); var mycars = ["Saab","Volvo","BMW"]; mycars[0] = "Opel"; document.write(mycars[0]); Feladat 9 hozzunk létre egy számokból álló tömböt, és számoljuk ki az elemeinek átlagát Szükséges ismeretek: kiíratás, változók, operátorok, ciklusok, tömbök numbers = new Array(22, 8, 943, 342, 71, 56, 176); sum = 0; size = 0; while (numbers[size]!= null) { size++; document.writeln("tömb elemeinek száma: " + size); // null-al az ürességet vizsgáljuk for (i = 0; i < size; i++) { sum = sum + numbers[i]; document.writeln("a tömbben található számok összege: " + sum); document.writeln("az átlag: " + (sum/size)); Szent Angéla Webprogramozási szakkör (Paksy Patrik) 10
DE! Nem kell mindent újra feltalálni, sok beépített lehetőség van, például: a tömb elemeinek száma lekérdezhető: tombneve.length numbers = new Array(22, 8, 943, 342, 71, 56, 176); sum = 0; document.writeln("tömb elemeinek száma: " + numbers.length); for (i = 0; i < numbers.length; i++) { sum = sum + numbers[i]; document.writeln("a tömbben található számok összege: " + sum); document.writeln("az átlag: " + (sum/numbers.length)); Kereshetnénk is a tömbben, mi kellhet hozzá? Ciklus, hiszen végig kell járnunk a tömböt. A ciklusváltozó pedig a tömb indexe lesz. Változók elnevezése Ciklusváltozók: egybetűsek, tipikusan: i,j,k Segédváltozó: ideiglenes használat (pl. két változó értékének megcserélése) tmp Egyéb változó: funkciója szerint szoktuk elnevezni (lásd 9. Feladat) Függvények A programozás során előfordul, hogy bizonyos utasítássorozat többször fordul elő. Ez lehet egy egyszerű műveletsor is, de tipikusabb, hogy valamilyen paraméter változik. Feladat 9 adott elem szerepel-e egy tömbben? Szükséges ismeretek: kiíratás, változók, operátorok, ciklusok, tömbök, függvények Példa: kör területe function terulet(radius) { return 3.14 * radius * radius; document.writeln(terulet(5)); var a = terulet(10); document.writeln(a); A function (függvény) kulcsszóval tudunk függvényeket megadni. Utána egy tetszőleges név következik, majd zárójelek () közt a paraméterek felsorolása (több is lehet). A függvényeket a nevükkel, és a megfelelő számú paraméterrel ellátva tudjuk meghívni, hogy hajtódjanak végre (terulet(5)). Egy függvénynek lehet visszatérési értéke, melyet a függvényen belül (a kapcsos zárójelek közt általában a függvény legvégén) kell megadni, return kulcsszó után. Ez a visszatérési érték helyettesítődik be egy az egyben oda, ahol kiadjuk a például terulet(112) parancsot. Így az értéket egy változóba is elmenthetjük (ez is látszik a fenti kódban). Visszatérési értéknek nem feltétlenül kell lennie, ha nincs, akkor csak egyszerűen végrehajtódik, ami a függvényben meg van adva. Szent Angéla Webprogramozási szakkör (Paksy Patrik) 11
Példa: adott elem keresését egy tömbben többször el kell végeznünk: function searchitem(array, item) { for (i = 0; i < array.length; i++) { if (array[i] == item) { return true; return false; numbers = new Array(22, 8, 943, 342, 71, 56, 176); var result1 = searchitem(numbers, 8); document.writeln(result1); document.writeln(searchitem(numbers, 33)); document.writeln(searchitem(numbers, 176)); Kérdés: használtunk már ezelőtt is egy függvényt. Hol? document.writeln(); ez egy beépített JavaScript függvény, amit nem kellett külön megírni, csak meg kell hívni. Összefoglalás Kiíratás: document.writeln( szöveg ) hogy legyen valami kimenetünk Változók: o egyszerű (pl: var x = 5;) o összetett (objektum) tömbök (pl: var myarray = new Array();) Operátorok o műveletek, összehasonlítás o egy változóra használt például:!a o két változóra használt például: a+b A program hogyan futhat le? o Szekvenciálisan: egymás után írt utasítások, azok megadásának sorrendjében futnak le (lásd pl. Feladat 2 egymás utáni kiíratásai) o Elágazások: feltételektől függően döntünk arról, hogy mit hajtson végre a program IF - ELSE IF ELSE SWITCH - CASE o Ismétlések: ciklusokkal egymás után többször hajtunk végre hasonló kódrészleteket (esetleg különböző paraméterekkel) FOR ciklus WHILE ciklus Szent Angéla Webprogramozási szakkör (Paksy Patrik) 12
Otthoni feladatok A pirossal szedett feladatok megoldása erősen ajánlott :) 1. Készíts folyamatábrát a teafőzéshez! 2. Készíts folyamatábrát ahhoz, hogy hogyan tudsz eljutni az iskoládtól egy adott helyig. Legyél kreatív, használj benne váratlan eseményeket (pl. nem jár egy busz) vagy olyan helyre menj, amit nem ismersz, így meg kell tudnod valakitől, hogy jó úton jársz-e? 3. Írj pszeudokódot (az algoritmus programszerű leírása érthető nyelven, mely lehet emberi, matematikai, DE nem maga a programozott leírás) két szám összeadására. 4. Írj pszeudokódot egy szám prímtényezős felbontásának megtalálására. a. Pl: 28 = 2*2*7 5. Írj pszeudokódot két szám legnagyobb közös osztójának megtalálására. 6. Írj programot, mely megcseréli két változó értékét. 7. Írj programot, mely egy számot négyzetre emel. 8. Írj programot, ami meghatározza egy szám faktoriálisát! a. Faktoriális (!): 10! = 1*2*3*4* *9*10 (1-től az adott számig a számok szorzata) b. Helyes megoldás 5-re: 120 ( = 1*2*3*4*5) 9. Írj programot, mely kiírja a Fibonacci-sorozatot 1-től 100-ig. a. Fibonacci sorozat: i. az első két eleme 1 ii. mindegyik elem az előtte lévő kettő összege, így a harmadik az első kettőé, vagyis 1 + 1 = 2 iii. a negyedik: 1 + 2 = 3 iv. az ötödik: 2 + 3 = 5 v. és így tovább b. Helyes megoldás: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 10. Írj programot, mely kiír egy 10*10-es szorzótáblát. 11. Írj programot, mely a következőképpen viselkedik a. Kiírja a számokat 1-től 50-ig sorban, de i. ha 3-al osztható, akkor a szám helyett azt írja, hogy: hahaha ii. ha 5-el osztható, akkor a szám helyett azt írja, hogy: öttött iii. ha 3-al és 5-el is, akkor: JOKER 12. Írj programot, mely kiírja a legkisebb 10 prímszámot. 13. Keressük meg, hogy egy csak számokat tartalmazó tömb elemei közül melyik a legnagyobb! a. Ugyanez megoldható a legkisebb elem keresésére is. 14. Keressük meg, hogy egy csak számokat tartalmazó tömbben melyik elem áll a legközelebb egy megadott elemhez. 15. Próbáljuk meg egy tömb teljes tartalmát átmásolni egy másik tömbbe. Szent Angéla Webprogramozási szakkör (Paksy Patrik) 13
16. Próbáljuk meg egy csak számokból álló tömb elemeit sorba rendezni, és az eredményt kiíratni. Ha szükség van rá, használjunk hozzá egy segédtömböt (tetszőleges, másik tömb) is. a. Segítség: először gondoljuk meg, hogyan lehet a sorba rendezést megvalósítani, ehhez találjunk egy algoritmust, vagyis egy olyan lépéssorozatot, melyet ismételgetve valamilyen feltételekkel a kívánt kimenetet kapjuk eredményül. b. Ha nagyon nem megy, CSAK AKKOR olvasd el ezeket a segítséget: i. Megoldás 1: keressük meg a legkisebb elemet, és tegyük be a segédtömb első helyére (vagy segédtömb nélkül: cseréljük meg a tömb első helyén álló elemmel). Utána a tömb második helyétől kezdődően keressük meg a legkisebb elemet (ami a teljes tömbre nézve a második legkisebb lesz, hiszen a legkisebb már a helyére került), majd ezt is cseréljük meg a második helyen álló elemmel, és így tovább ii. Megoldás 2: gondold meg, hogy mi történik, ha cserélgetéssel próbálkozunk. Ez azt jelenti, hogy fogjuk a tömb első elemét, ha nagyobb, mint a második, akkor megcseréljük vele. Most a 2. és 3. elemet nézzük, és cserélünk, ha a második a nagyobb. Majd megnézzük ezt a 3. és 4. elemekre, és így tovább. Mindig a csere utáni állapotból indulunk tovább, vagyis segédtömb nem kell, az egyetlen tömbön cserélgetjük az elemeket. Ha a tömb utolsó két elemét is megvizsgáltuk, és szükség esetén cseréltünk, akkor a tömb utolsó eleme a legnagyobb érték lesz. Gondoljuk meg, hogy miért! Egyszer végigmentünk, páronként cseréltünk, így vittük előre a legnagyobb elemet. Ezután mi következzen? Újra induljunk el a tömb elejéről, és ismét nézzük át, hogy páronként melyik a kisebb/nagyobb és megfelelően cseréljünk, így helyre áll az utolsó előtti helyre is a második legnagyobb elem, és így tovább. Ezt a rendezési típust buborékrendezésnek nevezik. Szent Angéla Webprogramozási szakkör (Paksy Patrik) 14