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)
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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)
Szent Angéla – Webprogramozási szakkör (Paksy Patrik) 2
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) 3
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) 4
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);
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);
<pre>
<script type="text/javascript">
document.writeln(”Hello World!”);
</script>
</pre>
Szent Angéla – Webprogramozási szakkör (Paksy Patrik) 5
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):