Webprogramozás szakkörpatrik.what.hu/web/szta_prog/eloadas1.pdf · Szent Angéla – Webprogramozási szakkör (Paksy Patrik) 1 Webprogramozás szakkör 1. Alkalom (2012.03.06)

Szent Angéla – Webprogramozási szakkör (Paksy Patrik) 1

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)


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


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…).


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

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ó)

// Megoldás 1:

document.writeln(1);










// 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);

<pre>

<script type="text/javascript">

document.writeln(”Hello World!”);

</script>

</pre>


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 == 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");


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:

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

Figyeljünk a kód tördelésére is (space-ek, tabok)!

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");

}

document.writeln(d); // első sorba téve: undefined

document.writeln(c % 2); // NaN = Not a Number


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:

UGYANEZ switch-case-el:

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):

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.

A ciklusváltozót ha a for()-ban deklaráljuk, akkor csak azon belül lesz érvényes.

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>

}

if (n == 1) {

ha 1-el egyenlő az „n”

}

if (n == 2) {

ha 2-vel egyenlő az „n”

}

ha nem 1 és nem 2

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”);

}

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”);

}


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

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

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

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.

for (var i = 1; i < 11; i = i + 2) {

if (i % 3 != 0) {

document.writeln(i);

}

}

for (var i = 0; i < 11; i = i+2) {


}

for (var i = 0; i < 11; i++) {


}


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

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

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

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

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

if (i == 3) {

break;

}

document.writeln("A szám: " + i);

}

do {


i++;

} while (i <= 10);

// ELÖLTESZTELŐ

while (feltétel) {

<utasítások>

}

// HÁTULTESZTELŐ

do {

<utasítások>

} while (feltétel);


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

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) { // null-al az „ürességet” vizsgáljuk

size++;

}

document.writeln("Tömb elemeinek száma: " + size);

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));

// 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]);

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

if (i == 3) {

continue;

}

document.writeln("A szám: " + i);

}


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

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

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.

function terulet(radius) {

return 3.14 * radius * radius;

}

document.writeln(terulet(5));

var a = terulet(10);



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));


Példa: adott elem keresését egy tömbben többször el kell végeznünk:

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

function searchItem(array, item) {

for (i = 0; i < array.length; i++) {

if (array[i] == item) {

return true;

}

}

return false;

}


var result1 = searchItem(numbers, 8);

document.writeln(result1);

document.writeln(searchItem(numbers, 33));

document.writeln(searchItem(numbers, 176));


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.


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.

Documents

Webprogramozás szakkörpatrik.what.hu/web/szta_prog/eloadas1.pdf · Szent Angéla – Webprogramozási szakkör (Paksy Patrik) 1 Webprogramozás szakkör 1. Alkalom (2012.03.06)