Informatika | Felsőoktatás » Tóth Katalin Tünde - Informatikai szakdolgozat

http://www.doksihu Informatikai szakdolgozat 1 http://www.doksihu Tartalom Tartalom . 2 Bevezetés . 4 Témaválasztás . 5 Az adatbázis felépítése. 6 Oracle . 6 SQL története . 7 SQL nyelv . 7 Adatdefiníciós utasítások . 7 Adatkezelő utasítások . 7 Felhasznált adatbázis objektumok . 9 Táblák . 9 Szekvenciák . 9 Triggerek . 11 Az adatbázis és a weboldalak kapcsolata . 12 IIKS használata . 13 Belépés . 13 Leírás . 15 Kérdéssor felvitele . 16 Témák módosítása . 17 Kérdések módosítása . 18 Válaszok módosítása. 19 IIK használata . 21 Kezdő lap . 21 Statisztika . 22 Gyakorló feladatok . 23 Tudnivalók az MSDN Academic Alliance programról . 26 Program felépítése . 28 Adatbázis kapcsolat . 28 IIKS felépítése . 29 Login.aspx 29 web.config 29 MasterPage.master 30 MasterPage2.master 30 DefaultKerdesSor.aspx 32 DefaultT.aspx 32 DefaultK.aspx 33 DefaultV.aspx 34 IIK felépítése. 36 MasterPage.master 36 A Statiszika.aspx 37 A

gyakorlo.aspx 37 Az IIK alkalmazási lehetőségei . 39 A számítógép és a teszt . 39 Tesztek kialakulása . 40 Tesztek csoportosítása . 41 Értékelés. 43 Fejlesztési lehetőségek:. 44 2 http://www.doksihu ASP.NET 45 A webalkalmazások ASP.NETben 47 Adatmegjelenítő vezérlők . 49 Felhasznált fejlesztő eszközök bemutatása . 50 A WEB-es alkalmazások . 60 A WEB-es alkalmazások fejlődése . 60 Hogyan épül fel egy Webes alkalmazás? . 61 ASP.NET elvek 62 Webfejlesztési tapasztalatim . 63 A PHP . 63 JavaServerPages. 64 JavaScript . 65 A JavaScript tanítása . 66 A C# nyelv . 68 A JavaScript oktatása . 70 Az első anyagrész az alapelemek ismertetése. 70 Kommentek . 72 Értékadás . 73 Elágazás . 75 Ciklus . 77 A második anyagrész a JavaScript Objektumok. 79 Matematikai konstansok és matematikai függvények . 79 Függvény . 80 Tömbök . 85 Dátum. 87 Időzítés . 89 A harmadik anyagrész a html elemek elérése . 90 Felugró ablakok . 90 A html

elem elérése név alapján . 92 A html elem elérése id alapján . 93 JavaScript események . 94 Képkezelés . 95 Checkbox . 98 Radio gomb . 98 Javascript oktatási tapasztalataim . 100 Összegzés . 102 Felhasznált linkek . 103 3 http://www.doksihu Bevezetés Dolgozatom címe az ISKOLAI INFORMÁCIÓS KÖZPONT röviden IIK (későbbiekben így hivatkozom rá). Már a címe is sejteti a jelentését: Az iskolai szó az általános- és középiskolákban, illetve egyetemen való használatot jelenti. Az információs a hasznos adatok gyűjteményére utal. A központ egy egységes arculat az egészet egybefogja minden egy helyen megtalálható. A hasznos információ sok mindent jelenthet általában. A tanárok szempontjából elsődlegesen a tananyag ismeretét, gyakorlását jelenti. Ezt segíti az én programom A IIK-ban jelszóval védetten fel lehet vinni tesztsorokat különböző témakörökben. Hozzáférni viszont jelszó nélkül is lehet. Hasonlít egy egyszerű

iskolai portál felépítésére. Az iskolai honlapok kiegészítéseként használható, ahonnan van egy hivatkozás az én weblapomra. Ezek dinamikusan generált oldalak melyek mögött egységes kezelést és generálást egy szerveren futó program végzi. A témaválasztási szempontok között az elsődleges az volt, hogy a későbbiekben fel tudjam használni a munkám során, hasznos legyen, és hogy új ismeretekhez jussak a program megírása közben. A másik fontos szempontom az, hogy tetszőleges szakot tanító tanárnak segítsen a munkájában, könnyen és egyszerűen kezelhető program legyen. A továbbiakban részletesebben szó lesz a témához kapcsolódó ismereteimről, az IIK program felhasználhatóságáról, működéséről, továbbfejleszthetőségéi lehetőségeiről. És a JavaScript oktatási tapasztalatimról. 4 http://www.doksihu Témaválasztás Az INTERNET, vagy a WEB szóra sokaknak felcsillan a szeme. Az Internet egy nemzetközileg elterjedt,

angol eredetű szó. Magyarul annyit tesz: hálózatok hálózata Azok számára, akik nem ismerik valami misztikus dolgot jelent, ahol bármit lehet csinálni, érdemes megtanulni és használni. (Erre jó példa az édesanyám, aki gyakran megkér, hogy mutassam meg, hogyan kell használni.) Akik már használtak számítógépet, azoknak információforrást és sok szolgáltatást jelent. Egy olyan eszköz, amivel gyorsabb a munka, esetleg élvezetesebb a játék vagy a kommunikáció. Vannak olyan oldalak, ahol percre pontosan a legfrissebb híreket lehet megtudni vagy a felhasználók az üzeneteikre azonnali választ kaphatnak. A felhasználó választhatja meg, hogy milyen információt akar megszerezni. Ugyanígy bárkiből válhat információforrás. A fejlesztők azok, akik azért dolgoznak naponta, hogy egyre tudáséhesebb felhasználók igényeit követve gyorsabb, jobb szolgáltatást tudjanak nyújtani. Szerettem volna jobban megismerkedni a legújabb webfejlesztési

eszközökkel. Ezen belül az ASP.NET-el, és az egyik legújabb nyelvvel a C#-al Elgondolkodtam, hogy "Mi az, amit a legjobban tudok hasznosítani a tanításnál, és webes technológiával megoldható?". Az a cél, hogy mindenki el tudja sajátítani a tananyagot. Egy jó összefoglaló és gyakorló feladat segít az otthoni tanulásban, vagy dolgozatra készülésben. Témakörök szerint célirányosan lehet felvinni tesztsorokat, ami könnyen aktualizálható. Könnyen hozzáférhető, egyszerűen kezelhető felülete legyen és mindenki tudjon kirakni információt, akinek van rá joga. A témaköröket és teszteket adatbázisban tárolva lehet hatékonyan lekérdezni, ami a dinamikus weblap készítéséhez szükséges. Az Oracle az egyik legelterjedtebb adatbázis, aminek legújabb verziója a 10g. Ebben hoztam létre az adattábláimat 5 http://www.doksihu Az adatbázis felépítése Adatbázis: ORACLE 10g Adatbázis neve: SPEEDORADB Hozzáférési jog:

rendszergazda Felhasználó: katica Jelszó: katica Oracle Az oracle szó jelentése orákulum vagy nagy bölcs. Egy angol kifejezés: "to work the oracle - kulisszák mögött működik". Találónak találom az elnevezést, mivel "egy bölcs" nemcsak sok információ és szolgáltatás birtokában van, hanem kérésre megbízható, gyors és pontos adatokat szolgáltat. Az Oracle Grid számítóhálózat olcsó szerverekből épít fel egységes fürtözött rendszert, ahol gyorsabban futnak az alkalmazások, mint a leggyorsabb nagyszámítógépen. Előnye, hogy hardverhiba esetén a nagygép leáll; ezzel szemben az Oracle számítóhálója egy-egy szerver kiesése esetén zavartalanul tovább működik. Az Oracle Database 10g, az első számítóhálózatokhoz készített relációs adatbáziskezelő segítségével az adatok mindig elérhetők és biztonságban vannak. A 10g olyan kiemelkedő biztonsági szolgáltatásokkal rendelkezik, amelyek megfelelnek a

személyes adatok védelmére, a törvényi előírásokra, illetve a központi adatkezelésre vonatkozó követelményeknek, beleértve a táblasor szintű biztonságot, a részletesen szabályozható auditálást és a transzparens adattitkosítást. Az Oracle automatizálta az időigényes és az emberi tévedés veszélyét magában hordozó adminisztratív feladatokat, így az adatbázis-adminisztrátorok a stratégiai fontosságú feladatokra koncentrálhatnak. 6 http://www.doksihu SQL története Az SQL (Structured Query Language) jelentése strukturált lekérdező nyelv. Az SQL alapjait az IBM-nél fektették le, még az 1970-es években. Elvi alapot a relációs adatmodell szolgáltatott, amit Edgar F. Codd híres 12 szabályával írt le először, 1970ben A relációs adatbázis-kezelő egy olyan adatbázis-kezelő rendszer, amelynek komponensei kizárólag a relációs adatmodellek elvén épülnek fel, illetve kérdezhetőek le. Az IBM, az Oracle és más gyártók is

érdekeltek voltak egy szabványos lekérdező nyelv kifejlesztésében, amivel a relációs adatbázisok programozhatók. Az iparági összefogással lerakták az SQL alapjait, és a szabványt az ANSI (American National Standards Institute) 1986-ban jegyezték be. SQL nyelv A nyelvi elemeket szokásos adatdefiníciós (Data Definition Language, DDL) és adatkezelési (Data Manipulation Language, DML) részekre bontani. Adatdefiníciós utasítások CREATE - Adatbázis objektum létrehozása ALTER - Adatbázis-objektum módosítása DROP - Egy adatbázisbeli objektum megszüntetése COMMENT - Megjegyzést fűz egy adatbázis-objektumhoz Adatkezelő utasítások INSERT - Adatokat ad hozzá egy táblához UPDATE - Módosítást hajt végre az adatokon DELETE - Adatokat töröl egy táblából. SELECT - Adatbázis objektum lekérdezése 7 http://www.doksihu Az SQL talán leggyakrabban használt utasítása a select utasítás. Az adatok egy halmazát válogatja ki egy táblázatba a

relációs adatbázisból, és teszi elérhetővé valamilyen technikával a felhasználó számára. A felhasználó csak az eredményhalmaz mezőit és a halmaz felépítésének feltételeit határozza meg, a leválogatási algoritmus elkészítése az adatbázis-kezelő feladata. Az eredmény halmaz szekvenciálisan olvasható egy kurzor segítségével. 8 http://www.doksihu Felhasznált adatbázis objektumok Táblák Táblák létrehozás: create table TTEMA (id integer PRIMARY KEY, tema varchar2(500)); create table TKERDES (id integer PRIMARY KEY, idt integer, kerdes varchar2(500)); create table THELYES ( id integer PRIMARY KEY, idk integer not null, helyes number(2) not null, valasz varchar2(500)); create table TKITOLT (id integer PRIMARY KEY, eredm integer, datum date, nev varchar2(100)); Szekvenciák A készített szekvenciával lehetővé tesszük, hogy az adott adattáblába beszúrásra kerülő rekordok mindig eggyel magasabb indexszel rendelkezzenek, vagyis az id

oszlop értékei mintegy automatikusan inkrementálódjanak. Az Oracle-rendszerben létrehozott adatbázisok tábláinak rendelkezni kell egy oszloppal, mely egyértelműen azonosítja a rekordokat (elsődleges kulcs). Az Oracle-ben van egy igen hasznos technika arra, hogy ezeknek az oszlopoknak az értékeit automatikusan 9 http://www.doksihu növeljük anélkül, hogy a felhasználótól egy konkrét értéket kérnénk be. Jellemzőjük, hogy kezdő értékkel, végértékkel rendelkeznek, valamint meg kell adni, hogy mekkora legyen a lépésköz az egyes ciklusokban. Szintaxisa a következő: CREATE SEQUENCE [séma.]szekvencia név opció(k) Az opciók lehetek: • INCREMENT BY (egész): növelés mértéke • START WITH (egész): kezdőérték • MAXVALUE | NOMAXVALUE (egész): maximum érték • MINVALUE | NOMINVALUE (egész): minimum érték • CYCLE | NOCYCLE: ciklusos legyen a szekvencia A létrehozott szekvenciában akkor kell megadni az opciókat, ha az

alapértelmezéstől eltérő viselkedésre szeretnénk kényszeríteni azt. A szekvencia 1-től indul, maximális értéke nincs. A szekvenciákban az aktuális értéket szekvencia neve.CURRVAL, a következő értéket szekvencia neve.NEXTVAL műveletekkel érhető el Létrehozott szekvenciáim: tema seq, kerdes seq, valasz seq, erdmeny seq CREATE SEQUENCE tema seq START WITH 1 INCREMENT BY 1; CREATE SEQUENCE kerdes seq START WITH 1 INCREMENT BY 1; CREATE SEQUENCE valasz seq START WITH 1 INCREMENT BY 1; CREATE SEQUENCE kitolt seq START WITH 1 INCREMENT BY 1; 10 http://www.doksihu Triggerek A trigger egy táblára vonatkozó utasítás végrehajtásának mellékhatásaként, automatikusan hajtódik végre. A COMMIT, ROLLBACK és SAVEPOINT utasítások használata triggerekben, és a triggerekből meghívott tárolt eljárásokban tilos. Egy trigger működése más triggereket is elindíthat. A triggerek rendelkeznek 4 fő jellegzetességgel: Jellegzetesség Időzítés A trigger

által figyelt esemény A trigger típusa A trigger törzse Magyarázat . BEFORE, AFTER INSERT, UPDATE, DELETE Utasítás szintű, Sorszintű Szabályos névtelen PL/SQL blokk A triggerek működésbe lépésének sorrendje független a triggert kiváltó utasítás által érintett sorok számától. • • • • • Utasítás szintű BEFORE trigger működésbe lép. Sor szintű BEFORE trigger működésbe lép. A trigger törzse szerint az oszlop módosul Sor szintű AFTER trigger működésbe lép. Utasítás szintű AFTER trigger működésbe lép. A létrehozás szintaxisa a következő: CREATE [OR REPLACE] TRIGGER <triggernév> [BEFORE|AFTER] [DELETE] [OR INSERT] [OR UPDATE [OF <oszlopnév>]] ON <táblanév> [DECLARE {<lokális változó>}] BEGIN <törzs>; END; Létrehozás: trg tema CREATE OR REPLACE TRIGGER trg tema BEFORE INSERT ON ttema REFERENCING NEW AS new OLD AS old FOR EACH ROW BEGIN SELECT tema seq.NEXTVAL INTO :NEWid FROM DUAL;

END; 11 http://www.doksihu Az adatbázis és a weboldalak kapcsolata Login.aspx DefaultLeiras DefaultT.aspx kérdések, kérdéssorok, válaszok, témák felvitele DefaultK.aspx DefaultV.aspx DefaultKerdes Sor.aspx kérdéssor statisztika lekérdezése eredmények felvitele TTEMA kezdolap.aspx TKITOLT TKERDES gyakorlo.aspx THELYES statisztika.aspx Az adatbázishoz két Web alkalmazás kapcsolódik: Az IIK és az IIKS. Az Iskolai Információs Központ (IIK) statisztikát vagy a kiválasztott témának megfelelően kérdéssort kérdez le az adatbázistól. A témakör módosításakor frissíti a kérdéssort, azaz új tesztet generál. A kitöltött kérdéssorok értékelését visszaküldi az adatokat az adatbázisnak, ami eltárolódik. Az Iskolai Információs Központ Szerkesztő (IIKS) a témák, kérdéssorok, kérdések, válaszok változtatására ad lehetőséget, ami lehet módosítás, törlés és új adat hozzáadása. 12 http://www.doksihu IIKS

használata Belépés Ez az oldal ellenőrzi le, hogy a felhasználónak joga van e belépni és módosítani az adatokat. Akkor van joga belépni, ha tudja a belépési nevet és jelszót Bejelentkezési név: Felhasznalo Jelszó: Pirosalma!123 vagy Bejelentkezési név: Felhasznalo2 Jelszó: Pirosalma!123 13 http://www.doksihu Az ASP.NET Configuration segítségével lehet állítani a jogosultságokat A névtelen felhasználókat ne engedjük be! 14 http://www.doksihu Leírás A kezdő lapon egy rövid leírás található a program használatáról. 15 http://www.doksihu Kérdéssor felvitele Kérdéssorok felvitelére alkalmas oldal. • A kérdéssoroknak megfelelő témakört a TÉMA legördülő menüből válasszuk ki. Ha nem találunk megfelelőt, akkor a Témák módosítása menüpont alatt vegyünk fel új témát. • A kiválasztott témához hozzá lehet adni új kérdést. Az új kérdés felvitelekor 0-4 db választ lehet megadni. Üres kérdés

esetén a válaszokat önmagukban nem lehet bevinni az adatbázisba. • A válaszokat nem kötelező kitölteni ekkor kevesebb válasszal kerül be az adatok közé. Például egy igen/nem válasz pár estén elég a Válasz1 és Választ2-t kitölteni és a helyes választ megjelölni. Üres válasz nem kerül a válaszok közé • A helyes válaszok megjelölésére a sor végén a kis négyzetre kell kattintani, ekkor egy pipa jelenik meg benne. • A kérdéssor felvitelére a Hozzáad gombot kell megnyomni. 16 http://www.doksihu Témák módosítása Témák felvitelére alkalmas oldal. • Hozzá lehet adni új témát. Az új téma felvitelekor nem rendelődik hozzá kérdés, hanem egy új üres témakör keletkezik. Új téma felvitelekor az első szövegmezőbe írjuk be az új téma nevét, és utána a Hozzáad gombot nyomjuk meg. • Egy sort kijelölni úgy lehet, hogy a sor előtti kijelölés szóra kell kattintani (Zöld színnel jelenik meg a kijelölt

sor). A kijelölt sor szövege a módosításnál megjelenik, amit át lehet írni vagy kijavítani. • A kijelölt témát lehet törölni és módosítani. A módosítás nem váltható ki törléssel és új elem felvitelével! Egy témához a kérdések szorosan kapcsolódnak. Módosításkor a második szövegmezőt írjuk át, és utána a Módosít gombot nyomjuk meg illetve törlés esetén a Törlés gombot. 17 http://www.doksihu Kérdések módosítása Kérdések felvitelére alkalmas oldal. • A kérdéssoroknak megfelelő témakört a TÉMA legördülő menüből válasszuk ki. Ha nem találunk megfelelőt, akkor a Témák módosítása menüpont alatt vegyünk fel új témát. • A kiválasztott témához hozzá lehet adni új kérdést. Az új kérdés felvitelekor nem rendelődik hozzá válasz, hanem egy új üres kérdés keletkezik. Új kérdés felvitelekor az első szövegmezőbe írjuk be az új téma nevét, és utána a Hozzáad gombot nyomjuk meg.

• Egy sort kijelölni úgy lehet, hogy a sor előtti kijelölés szóra kell kattintani (Zöld színnel jelenik meg a kijelölt sor). A kijelölt sor szövege a módosításnál megjelenik, amit át lehet írni vagy kijavítani. • A kijelölt kérdést lehet törölni és módosítani. A módosítás nem váltható ki törléssel és új elem felvitelével! Egy kérdéshez a válaszok szorosan kapcsolódnak. Módosításkor a második szövegmezőt írjuk át, és utána a Módosít gombot nyomjuk meg illetve törlés esetén a Törlés gombot 18 http://www.doksihu Válaszok módosítása Válaszok felvitelére alkalmas oldal. • A válasznak megfelelő témakört a TÉMA legördülő menüből válasszuk ki. Ha nem találunk megfelelőt, akkor a Témák módosítása menüpont alatt vegyünk fel új témát. • A válasznak megfelelő kérdést a KÉRDÉS legördülő menüből válasszuk ki. Ha nem találunk megfelelőt, akkor a Kérdések módosítása menüpont

alatt vegyünk fel új témát. • Egy sort kijelölni úgy lehet, hogy a sor előtti kijelölés szóra kell kattintani (Zöld színnel jelenik meg a kijelölt sor). A kijelölt sor szövege a módosításnál megjelenik, amit át lehet írni vagy kijavítani. • A kiválasztott témához és kérdéshez hozzá lehet adni új választ. A helyes válasz megjelölésére a hozzáadás melletti a kis négyzetre kell kattintani, ekkor egy pipa jelenik meg benne. A válasz felvitelére a Hozzáad gombot kell megnyomni • A választ lehet törölni és módosítani. Módosításkor a második szövegmezőt írhatjuk át, illetve helyesség álltásához a hozzá tartozó négyzetet jelölhetjük be megfelelően. A táblázatban a helyes választ 1-es, a helytelent választ 0-val jelöljük. A módosításhoz a Módosít gombot illetve törlés esetén a Törlés gombot nyomjuk meg. • A módosítás kiváltható törléssel és új elem felvitelével! 19 http://www.doksihu

20 http://www.doksihu IIK használata Kezdő lap A kezdő lapon egy rövid leírás található a program használatáról. Ez a bal oldali menüpontban az első elem. A jele . 21 http://www.doksihu Statisztika Az eddig kitöltött tesztek eredményeit lehet megnézni és név, pontszám és dátum szerint növekvő illetve csökkenő sorrendben megjeleníteni. Ez a bal oldali menü középső elemével érhető el a jelnél. 22 http://www.doksihu Gyakorló feladatok A gyakorló oldalon a kiválasztott tesztet lehet kitölteni. A bal oldali Gyakorló feladatok menü pont alatt érhető el. • A témát a TÉMA legördülő menüből válasszuk ki. • A helyesnek gondolt válaszok előtti négyzetet jelöljük be. A bejelöléséhez a kis négyzetre kell kattintani, ekkor egy pipa jelenik meg benne. • Lehet olyan kérdés, amelyre nincs válasz vagy esetleg több válasz is helyes. • A jó válasz +2 pont, a rossz válasz -1 pont. • A teszt végén

meglehet adni a kitöltő nevét, ha nem adunk meg nevet akkor "névtelen" tesztkitöltésként kerül be az adatbázisba. 23 http://www.doksihu Az Értékel gombbal a teszt eredménye értékelődik ki és megjelenik az elért illetve a maximális pontszám. Az értékelés után egy ellenőrzés gomb jelenik meg, amivel a bejelölt válaszaink helyességét lehet ellenőrizni. 24 http://www.doksihu Az ellenőrzés gomb a kijelölt válaszokat leellenőrzi és zöld színű szöveggel jelenik meg ha helyes a válasz, ha helytelen akkor piros színű lesz. Például ennél a tesztnél a harmadik válasz helytelenül lett bejelölve, így ez piros. 25 http://www.doksihu Tudnivalók az MSDN Academic Alliance programról Az MSDN (Microsoft Developer Network - Microsoft Fejlesztői hálózat) létrehozásával a Microsoft célja a fejlesztők Microsoft-technológiákkal való munkájának segítése volt. Az MSDN Academic Alliance az MSDN előfizetés kifejezetten

felsőoktatási intézmények számára kialakított változata. Az előfizető intézmények hozzáférhetnek a Microsoft csaknem összes termékéhez, valamint a kifejezetten a fejlesztőknek szánt cikkeket, leírásokat, példaprogramokat tartalmazó MSDN Library anyagához. A termékekből rendszeres frissítéssel megkapják a legújabb verziókat. Az MSDNAA lehetővé teszi, hogy a Microsoft közel összes szoftverét a ELTE Informatikai Karának oktatói és hallgatói tetszőleges számú példányban felhasználják oktatási és kutatási célra. Ez nemcsak a kész szoftvereket jelenti, hanem a béta és RC (kiadásra jelölt) tesztváltozatokat, a szoftverfejlesztő készleteket (SDK), információs anyagokat és dokumentációkat is. Magyarországon a Campus szerződés keretében a felsőoktatásban résztvevő hallgatók és oktatók ingyenesen használhatják az Office csomagot is, így ténylegesen elérhetővé válik minden fontosabb Microsoft-termék. A szoftverek

minden intézményi számítógépen (oktatói számítógépek, laborok) használható. Ezenfelül az oktatók és azok a hallgatók, akik az adott félévben legalább egy kredit értékű tárgyat hallgatnak az Informatikai Karon, otthoni számítógépükre is telepíthetik a szoftvereket, így kényelmes saját környezetben is dolgozhatnak. Az MSDNAA az alábbi szoftvereket tartalmazza: • Visual Studio .NET Professional (külön tanári és diákeszközökkel) • Windows XP, Windows 2000 és más Microsoft operációs rendszerek • .NET vállalati kiszolgálók (mint például Windows szerverváltozatok, SQL Server, Exchange Server, Commerce Server, BizTalk Server, Host Integration Server, System Management Server, SharePoint Portal Server, és több más kiszolgálószoftver) • Microsoft Project 2003 és Project Server 26 http://www.doksihu • Microsoft Visio, Access, Live Communication Server, és az Office System olyan termékei, amelyek nincsenek benne az

Office Professional csomagban (az Office Professional a Campus szerződés révén elérhető) • Windows CE fejlesztőeszközök és operációs rendszerek • Szoftverfejlesztő készletek (SDK-k), béta szoftverek, új kiadások és frissítések Mindenki akinek hallgatói jogviszonya van a Eötvös Lóránd Tudományegyetem, az ETR kód és e-mail cím segítségével regisztrálhat. Az MSDNAA hivatalos kari honlapja: http://msdn63.e-academycom/elt ik/ 27 http://www.doksihu Program felépítése Adatbázis kapcsolat IIK és az IIKS-ben az adatbázis kapcsolatot a ConnectionString írja le, ami a web.config fájlban található <add name="ConnectionString2" connectionString="Data Source=speedoradb;Persist Security Info=True;User ID=katica;Password=katica;Unicode=True" providerName="System.DataOracleClient" /> Adatbázis kapcsolt varázslóval: Adatbázis: ORACLE Adatbázis neve: SPEEDORADB Felhasználó: katica Jelszó: katica A

"test connection" gombbal a kapcsolatot tudjuk ellenőrizni. Figyeljünk arra, hogy az Oracle adatbázis el legyenek indítva. (OracleServiceORADB Oracle, OraDb10g home1TNSListener) 28 http://www.doksihu IIKS felépítése Login.aspx A belépés oldalon egy "login control"-t helyezem fel, amit a ASP.NET Configuration segítségével lehet állítani a jogosultságokat. A beállított elemek a web.config-ban jelennek meg asp:Login ID="Login1" web.config Az adatbázis kapcsolatot a ConnectionString írja le. <add name="ConnectionString2" connectionString="Data Source=speedoradb;Persist Security Info=True;User ID=katica;Password=katica;Unicode=True" providerName="System.DataOracleClient" /> A weboldalhoz a hozzáférni csak a Felhasználónak van joga. <authentication mode="Forms" /> <roleManager enabled="true" /> <authorization> <deny users="?" /> <allow

users="Felhasznalo" /> <allow users="Felhasznalo2" /> </authorization> 29 http://www.doksihu MasterPage.master A mester oldalon egységes felületet lehet tervezni. A login.aspx mester oldala A ContentPlaceHolder, ahova a dinamikus tartalom kerül: asp:ContentPlaceHolder ID="ContentPlaceHolder1" MasterPage2.master Az oldalak kinézetének – mivel tanárok számára készítettem – egyszerű, komoly, könnyen kezelhető felületnek terveztem. A legfelső sorban a címsor szerepel. A baloldalon egy menü szerepel a következő elemekkel. (A részletesebb leírás a forráskódban található.) asp:Menu ID="Menu1" asp:MenuItem Text=" Leírás" asp:MenuItem Text=" Új kérdéssor" asp:MenuItem Text=" Témák módosítása" asp:MenuItem Text=" Kérdések módosítása" asp:MenuItem Text=" Válaszok módosítása" A jobb oldalon a ContentPlaceHolder, ahova a dinamikus tartalom

kerül: asp:ContentPlaceHolder ID="ContentPlaceHolder1" 30 http://www.doksihu 31 http://www.doksihu DefaultKerdesSor.aspx A Téma legördülő menü: • DropDownList DropDownList1 ↔ Téma kiválasztása • SqlDataSource SqlDataSourceTema (Select query: SELECT * FROM TTEMA) A kérdés felvitele: • TextBox TB kerdes ↔ Kérdés szövege • SqlDataSource SqlDataSourceKerdes (Insert query: INSERT INTO TKERDES(id,kerdes,idt) VALUES (kerdes seq.nextval, :k ,:t) ) ahol t – DropDownList1.SelectedValue ahol n – TB kerdes.Text A válasz felvitele (hasonlóan a V2, V3, V4 válaszok esetén is.) • TextBox TB V1 ↔ Válasz szövege • CheckBox CheckBox1 ↔ Válasz helyessége • SqlDataSource SqlDataSourceValasz1 (Insert query: INSERT INTO THELYES (id,idk,helyes,valasz) VALUES (valasz seq.nextval, kerdes seqcurrval, :c, :v) ) ahol c – CheckBox1.Checked ahol v – TB kerdes.Text DefaultT.aspx A témák megjelenítése táblázatban: • GridView

GridView1 ↔ Témák • SqlDataSource SqlDataSourceTema (Select query: SELECT * FROM TTEMA) • Label Label1 ↔ Kiválasztott téma ID-ja • TextBox TB ujtema ↔ Új téma szövege • TextBox TB modtema ↔ Módosított téma szövege • SqlDataSource SqlDataSource1 (Select query: SELECT id,tema FROM "TTEMA" where id = :l) ahol l – Label1.Text (Insert query: INSERT INTO TTEMA(TEMA) VALUES ( :t )) ahol t – TB ujtema.Text (Delete query: DELETE FROM TTEMA WHERE (ID = :tid) ) 32 http://www.doksihu ahol tid – GridView1.Selected (Update query: UPDATE TTEMA SET TEMA= :s WHERE (ID = :tid) ahol tid – GridView1.Selected ahol s – TB modtema.Text • Button B uj ↔ Új téma felvitele • Button B mod ↔ Téma módosítása • Button B torol ↔ Téma törlése DefaultK.aspx A Téma legördülő menü: • DropDownList DropDownList1 ↔ Téma kiválasztása • SqlDataSource SqlDataSourceTema (Select query: SELECT * FROM TTEMA) A kérdés

megjelenítése táblázatban: • GridView GridView1 ↔ Kérdések • TextBox TB uj ↔ Új kérdés szövege • TextBox TB mod ↔ Módosított kérdés szövege • SqlDataSource SqlDataSourceKerdes (Select query: SELECT DISTINCT TKERDES.ID, TKERDESKERDES FROM TKERDES where (TKERDES.IDT =:t) order by TKERDESID) ahol t – DropDownList1.SelectedValue (Insert query: INSERT INTO TKERDES(id,kerdes,idt) VALUES (kerdes seq.nextval, :k,:tid ) ) ahol t – TB uj.Text ahol tid – DropDownList1.SelectedValue (Delete query: DELETE FROM TKERDES WHERE (ID = :tid)) ahol tid – GridView1.Selected (Update query: UPDATE TKERDES SET KERDES= :s WHERE (ID = :tid)) ahol tid – GridView1.Selected ahol s – TB mod.Text • Label Label1 ↔ Kiválasztott kérdés ID-ja • SqlDataSource SqlDataSource1 (Select query: SELECT TKERDES.ID, TKERDESKERDES FROM 33 http://www.doksihu TKERDES where (TKERDES.ID =:l) ) ahol l – Label1.Text • Button B uj ↔ Új kérdés felvitele •

Button B mod ↔ Kérdés módosítása • Button B torol ↔ Kérdés törlése DefaultV.aspx A Téma legördülő menü: • DropDownList DropDownList1 ↔ Téma kiválasztása • SqlDataSource SqlDataSourceTema (Select query: SELECT * FROM TTEMA) A Kérdes legördülő menü: • DropDownList DropDownList1 ↔ Kérdés kiválasztása • SqlDataSource SqlDataSourceTema (Select query: SELECT DISTINCT TKERDES.ID, TKERDESKERDES FROM TKERDES where (TKERDES.IDT =:t) order by TKERDESID) A Válasz GridView: • GridView GridView1 • TextBox TB ujv • TextBox TB modv • CheckBox CheckBox1 • CheckBox CheckBox2 • SqlDataSource SqlDataSourceValasz (Select query: SELECT DISTINCT THELYES.ID, THELYES.VALASZ,THELYEShelyes FROM THELYES, TKERDES WHERE (THELYES.IDK = :k) AND (TKERDESIDT = :t ) order by THELYES.ID) ahol t – DropDownList1.SelectedValue ahol k – DropDownList2.SelectedValue (Insert query: INSERT INTO THELYES(id,idk,helyes,valasz) VALUES (valasz

seq.nextval, :k, :c, :v) ) ahol v – TB uj.Text ahol c – CheckBox1.checked ahol k – DropDownList1.SelectedValue (Delete query: DELETE FROM THELYES WHERE (ID = :tid) ) 34 http://www.doksihu ahol tid – GridView1.Selected (Update query: UPDATE THELYES SET VALASZ = :s, HELYES = :h WHERE (ID = :tid) ) ahol s – TB modv.Text ahol c – CheckBox2.checked ahol tid – GridView1.Selected • Label Label1 ↔ Kiválasztott kérdés ID-ja • SqlDataSource SqlDataSource1 (Select query: SELECT TKERDES.ID, TKERDESKERDES FROM TKERDES where (TKERDES.ID =:l) ) ahol l – Label1.Text • Button B uj↔ Új válasz felvitele • Button B mod↔ Válasz módosítása • Button B torol↔ Válasz törlése 35 http://www.doksihu IIK felépítése MasterPage.master Az oldalak egységes design miatt a kinézet tervet a mester oldalon készítettem el. Felhasználókat tekintve diákok fogják használni, így egy vidám ábrát terveztem. A legfelső sorban a címsor szerepel. A

baloldalon egy menü szerepel a következő elemekkel. (A részletesebb leírás a forráskódban található.) asp:Menu ID="Menu1" asp:MenuItem Text=" Kezdő lap" asp:MenuItem Text=" Statisztika" asp:MenuItem Text=" Gyakorló feladat" A jobb oldalon a mester oldalnak úgynevezett ContentPlaceHolder része, ahova a dinamikus tartalom kerül: asp:ContentPlaceHolder ID="ContentPlaceHolder1" A mesteroldalt a következő hivatkozással lehet az oldalunkhoz linkelni: <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" %> A közös részt csak a mester lapon lehet módosítani, így ha valamin később változtatni kell (pl: háttérszín), akkor az összes lapon egyszerre módosul. 36 http://www.doksihu A Statiszika.aspx A Téma legördülő menü: • DropDownList DropDownList1 ↔ Téma kiválasztása • SqlDataSource SqlDataSourceTema (Select query: SELECT * FROM TTEMA) Az eredményt

megjelenítő tábla: • GridView GridView1 • SqlDataSource SqlDataSourceKitolt A gyakorlo.aspx A Téma legördülő menü: • DropDownList DropDownList1 ↔ Téma kiválasztása • SqlDataSource SqlDataSourceTema (Select query: SELECT * FROM TTEMA) A teszt felépítése: • n ↔ Kérdések száma SqlDataSource SqlDataSourceN (Select query: SELECT COUNT(DISTINCT ID) AS EXPR1 FROM TKERDES WHERE (IDT = :t ) ) ahol t – DropDownList1.SelectedValue • m ↔ Maximális pontszám SqlDataSource SqlDataSourceM (Select query: SELECT COUNT(THELYES.HELYES) AS EXPR1 FROM THELYES, TKERDES 37 http://www.doksihu WHERE THELYES.IDK = TKERDESID AND (TKERDESIDT = :t ) AND (THELYES.HELYES = 1)) ahol t – DropDownList1.SelectedValue • DatalList DatalListKerdes ↔ Kérdések kiírása • SqlDataSource SqlDataSourceKerdes (Select query: SELECT DISTINCT TKERDES.ID, TKERDESKERDES, TKERDESIDT FROM TKERDES WHERE (TKERDES.IDT =:t) ORDER BY TKERDESID ahol t –

DropDownList1.SelectedValue o CheckBoxList CheckBoxList1 ↔ Válaszok kiírása o SqlDataSource SqlDataSourceKerdes (Select query: SELECT ID, IDK, HELYES, VALASZ FROM THELYES WHERE (IDK = :idk) ) ahol idk – a megfelelő kérdés Label-ja. • SqlDataSource SqlDataSourceN (Select query: SELECT COUNT(DISTINCT ID) AS EXPR1 FROM TKERDES WHERE (IDT = :t ) ) ahol t – DropDownList1.SelectedValue Az eredmény kiértékelése: • Button ButtonErtekel ↔ Kiértékeli a tesztet • Button ButtonEll ↔ Kijelölt elemeket leellenőrzi • TextBox TB nev ↔ Kitöltő neve • Label L er ↔ Elért eredmény pontszáma • SqlDataSource SqlDataSourceKitolt (Insert query: INSERT INTO TKITOLT(ID, EREDM, DATUM, NEV, IDT) VALUES (KITOLT SEQ.NEXTVAL, :er, SYSDATE, :n , :t ) ) ahol t – DropDownList1.SelectedValue ahol n – TB nev ahol er – L er 38 http://www.doksihu Az IIK alkalmazási lehetőségei Az oktatásában felhasználható program elkészítését választottam. IIK

egy feladat összeállító szoftver, ami tesztet generál. A programom a diákoknak és a tanároknak is hasznos segédeszköze lesz. Az oktatott tárgy szinte bármi lehet Mindenhol kéréseket tesznek fel a tudás mérésére, amire az egyik módszer a teszt. Ezért bármilyen szakot tanító tanárok számára jól használható a program. A legkézenfekvőbb példa az írásbeli nyelvvizsga. A különböző nyelvek oktatásban rengeteg nyelvtani teszt szerepel. Tesztek segítségével könnyen be lehet gyakorolni, hogy melyik szabályt kell alkalmazni, melyek a helyes kifejezések illetve a szavaknak mi a jelentésük. A nyelvvizsgákra felkészítő teszteket szívesen kitöltik a diákok. Hasznos funkciónak tartom, hogy a válaszokat ellenőrizni lehet, de nem a megoldást mutatja, így újra próbálkozhat a kiöltéssel. A teszt többszöri kitöltésével jobban rögződnek a helyes válaszok. Ha egy tanuló iskolai teljesítményére vagyunk kíváncsiak, a legkönnyebben

megszerezhető információhoz úgy jutunk, hogy megnézzük, milyen jegyet kap az iskolában. Tudjuk persze, hogy a jegyek felszínesen, nagyon bizonytalanul fejezik csak ki, hogy egy tanuló valójában mit tud. Ha a valódi tudásáról megbízhatóbb képet kívánunk alkotni, tudásszintmérő teszteket használhatunk. A teszt kitöltése rugalmas A kitöltés bárki számára hozzáférhető, nemcsak a tanulók számára, tetszőleges időpontban, és persze bárhol, ahol van Internetezésre alkalmas számítógép. A számítógép és a teszt A tesztek egyike a KRESZ vizsga, ami már számítógépesített formában lehet csak letenni, de ide sorolható különböző felmérések, kérdőívek. Az informatikának alapvető szerepe van a modern teszt-technológia minden szintjén. Segítségével könnyebben tudunk hatékonyabb teszteket előállítani. IIKS is egy ilyen szerkesztő program, ami a kéréssorok felvitelét segít. A válaszok száma változó lehet a kérdés

típusától függően Például, ha eldöntendő kérésünk van, akkor elég az igen/nem vagy igaz/hamis válasz. 39 http://www.doksihu Tesztek kialakulása Tesztelni annyit tesz, mint próbára tenni. Az angol test szó eredeti jelentése próba Az első feladat, ami tesztek alkalmazásához vezetett az értelmi fejlődésben visszamaradt gyermekek kiszűrése volt, hogy kisegítő iskolákba lehessen irányítani őket. Erre a felelősségteljes döntésre egységesített feladatsorokat állítottak össze. Ebből nőttek ki az intelligenciatesztek. Nagy hagyományokkal rendelkező területről van szó, ezért innen ered a legtöbb elméleti meggondolás, modell. A tömeges érettségiztetés kényszerítette ki az egységes vizsgáztatás igényét. A képességvizsgáló tesztekben már a tudásanyagon kívül adottságokat is figyelembe vesznek. A vállalati tesztelés ezen feladatsorokból fejlődött ki Gyakran van szükség arra, hogy az egyéneket a népesség többi

tagjához hasonlítsuk, a társadalom egészére vonatkozó megállapításokat tegyünk. A közvélemény kutatások éppen erre szolgálnak. Teszten manapság Magyarországon elsősorban olyan kérdéssort értünk, melyben minden kérdésére megadnak néhány lehetséges választ és ezek közül kell a helyeset kiválasztani. A többféle válasz lehetősége miatt nevezzük az ilyen teszt kérdéseit multiple choice típusúnak. 40 http://www.doksihu Tesztek csoportosítása Milyen tudást mérünk: • tanulók tantárgyi tesztekkel mért teljesítményeit – leadott anyag visszakérdezése A tanulók iskolai teljesítményeit hivatalosan jellemzik, amelyek kifejezik, hogyan értékelik az iskolák a tanulók tudását, és amely adatok nagyrészt meghatározzák a tanulók iskolai pályafutását is. A magyar iskolarendszerben a jegyek, az osztályzatok felelnek meg a teljesítménynek. Mivel az osztályzatokat a tanárok határozzák meg, ezek a jegyek magukban

foglalják a tanári osztályozás bizonytalanságait, a tanárok szubjektív értékítéleteit. • tudás minőségének jellemzésére szolgáló tesztek, feladatok – a tudás mennyire elmélyült, megalapozott és összefüggő, mennyiben alkalmazható új helyzetekben. A tanulók ráismernek a feladatok típusára, közvetlenül emlékeznek arra, hogy bizonyos típusú feladatokhoz milyen megoldási módok tartoznak. A tanulóknak az elsajátított tudást ugyanabban a kontextusban kell visszaadniuk, ahogy azt megtanulták. Így a tudásszintmérő tesztek arról nem adnak képet, hogyan működne ez a tudás újszerű helyzetekben. A tesztek elvileg ugyanazt a tudást értékelik, amire a tanárok is jegyeket adnak, amíg azonban a jegyekben a tanárok egyéni értékítélete tükröződik, addig a tesztek egy külső, objektív mércét alkalmaznak, mégpedig egységesen minden tanulót ugyanazzal a mércével mérnek. • gondolkodás képességeit vizsgáló tesztek

– új tudás megszerzése, megfigyeléseink, tapasztalataink. 41 http://www.doksihu Egy másik szempont, hogy mihez viszonyítjuk a tudást • Egyének tudását adott viszonylag szűk területen való jártasság mérése. Egy előre meghatározott tudásanyagot kérdeznek vissza. Az értékelésnél ezen előre megadott tudás elsajátításának mértékét díjazzák. • A többi vizsgázó teljesítményéhez viszonyítják, melyek egy általános képességet mérnek. A céljuk nem egy adott, pontosan meghatározott tudás visszakérdezése, hanem annál általánosabb. A teszt feladata felmérni a tanuló képességeit. Ebbe a tesztcsoportba tartoznak azok a tesztek, melyeket a tanár azért irat, hogy lássa a tanuló fejlődését. Csupán az előző teljesítményhez viszonyított változás érdekli. De ilyen tesztnek tekinthető egy széles körben végzett közvélemény-kutatás is, mely a társadalom egy adott szegmensének tudását - vagy véleményét -

kívánja felmérni. 42 http://www.doksihu Értékelés A tesztben több helyes válasz is lehet, esetleg lehet olyan kérdés is, amelyre egyik válasz sem jó. Szerintem a hallgatókat ez jobban elgondolkodtatja, hogy melyiket jelölje be. Erre segítettem rá a pontozással, hogy a rossz válaszokért mínusz pont jár A teszt értékelése automatikus. A jó válasz +2 pont a rossz -1 pont, így 2 válasz bejelölése esetén is van +1pontja. Az azonnali megjelenő eredmény gyors visszajelzést biztosít a tudásról. Én nem szoktam emlékezni a múlt héten megírt dolgozatom részleteire, és utólag kevésbé rögzül az a tudás, hogy miben hibáztam. Ezért általában a dolgozat után szoktam elővenni a füzetemet és kikeresni a jó megoldásokat, hogy legközelebb tudjam. A tudásszintmérő teszteken nyújtott teljesítmények még mindig közvetlenül kötődnek az iskolában elsajátított tudáshoz. A tanulók ráismernek a feladatok típusára, közvetlenül

emlékeznek arra, hogy bizonyos típusú feladatokhoz milyen megoldási módok tartoznak. Mivel a tesztek a tanév során "éberen tartott" többször aktivizált, átismételt anyagra épülnek, a tudás időleges rétegeinek meglétét vizsgálják. A tanulóknak az elsajátított tudást ugyanabban a kontextusban kell visszaadniuk, ahogy azt megtanulták A teszteket megírásuk után értékelni kell. Az ellenőrzés, értékelés alapvető célja, hogy visszajelzést adjon az oktatás eredményességéről. Vizsgálatunkban a tesztek eredményeit a tantárgyi tudás külső, objektív mértékének tekintjük A jegyekben a tanárok egyéni értékítélete tükröződik, addig a tesztek egy külső, objektív mércét alkalmaznak, mégpedig egységesen minden tanulót ugyanazzal a mércével mérnek. A értékelési szempontok, pontozási módszerek szerint a teszt első információs szintjét kapjuk meg. További cél lehet a korábbi tesztek segítségével

megvizsgálni a fejlődését Az eredményeket össze lehetne hasonlítani más területen, hasonló helyzetben készült tesztek eredményével. Vizsgálni lehet az oktatás hatékonyságát 43 http://www.doksihu Fejlesztési lehetőségek: Teszteket sokan sok mindenre használnak, azonban még több helyen alkalmazhatóak volnának. Szeretném a mintatesztet kiegészíteni a legújabb tananyagoknak megfelelő kérdéssorokkal. Alkalmas lehet a későbbiekben a dolgozat íratásra is. Egy "rejtett teszt", amit csak adott időben és jelszóval lehet kitölteni. A kérdéssort egy tanárnak mindenképpen össze kell állítania, de a kijavításával időt spórolhat. A tanárok egyik gyors számonkérési módszere a tesztes feladatsor Speciális vizsgák felviteléhez ábrákkal lehetne kiegészíteni a tesztet. Ilyen alkalmazás például egy KRESZ vizsga is, de a matematikában is jól használható mondjuk függvény ábrázolás vagy geometriai kérdéseknél. Az

IIKS oldalon lehetne kiegészíteni alkalmazások fel illetve letöltésével. Adatbázis módosítást és webalkalmazás fejlesztést igényel. 44 http://www.doksihu ASP.NET A számomra fontosabb elemeket, a platformot és a szolgáltatásait mutatom be, amelyet webfejlesztők mindennapi munkájuk során használnak. A Visual Studio 2005 által előre definiált segédeszközök halmaza nagyon jól használható és jól csoportosított. Hasonlít az egyszerűbb Windows Application fejlesztéshez, ami megkönnyítette az elemek használatának elsajátítását. 45 http://www.doksihu Bejelentkezéskor az első, amivel találkozunk a Start Page azaz a kezdőlap, amin az MSDNből híreket és linkeket tartalmaz. Ez is kikapcsolható, ha valakit zavar, de szerintem sok érdekességre hívhatja fel az olvasó figyelmét. 46 http://www.doksihu A webalkalmazások ASP.NETben A webalkalmazások forráskódjának kezelése Az ASP.NET 20 verziójával megváltozott A

webalkalmazáshoz nem tartozik projekt fájl, az adott könyvtárban található fájlok mind az alkalmazás részét képezik, amely jelentősen megkönnyíti a nem ASP.NET-es állományok verziózott kezelését. Akkor, amikor meg akarunk nyitni egy alkalmazást csak egy mappára kell rámutatnunk nem pedig egy projekt fájlra. Figyelenbe kell venni, hogy ezután a mappában levő összes fájl az alkalmazásunkhoz fog tarozni. Természetesen a projekt fájl nélkül is vannak projekt beállítások, ezek az alkalmazás solution fájljában helyezkednek el. A rendszer néhány szolgáltatását egyszerűen azáltal érhetjük el, hogy speciális könyvtárba helyezzük fájljainkat. Ezek a speciális könyvtárak a következők lehetnek: Mappa neve Tartalma App Browsers Böngésző definíciós állományok (.browser) App Code Kód: segédosztályok, üzleti objektumok (.cs, .vb, xsd) App Data Adatfájlok, adatbázisok (.mdf, mdb, xml) App GlobalResources Alkalmazás szintű

erőforrások (.resx, App LocalResources Oldal- és vezérlőelem szintű erőforrások (.resx, .resources) App Themes* Témák és bőrök (.skin, css) App WebReferences Webszolgáltatásokra mutató hivatkozások, sémák (.wsdl, xsd, disco) bin Lefordított szerelvények (.dll) * A kliens oldalról is elérhető mappa 47 http://www.doksihu Ebben a példában az én speciális könyvtáram az App Data könyvtár az adatfájlok, adatbázisok tárolására szolgál. A Visual Studio 2005 és a Visual Web Developer Express 2005 egyaránt tartalmaz egy beépített fejlesztői webszervert, amely az Internet Information Services konfigurálásával járó terheket veszi le a fejlesztő válláról. Ez a környezet a fejlesztők munkáját nagyban megkönnyíti, s mivel a szerver csak lokális igényeket szolgál ki nincsenek vele biztonsági problémák. 48 http://www.doksihu Adatmegjelenítő vezérlők Egy webalkalmazás feladata az általa kezelt adatok megfelelő

formában történő megjelenítése és manipulálása. Egyazon adat különböző sablonok szerinti megjelenítésének támogatását az ASP.NET 20 az adatmegjelenítő vezérlők használatával támogatja Az ASP.NET az adatok megjelenítésre a beépített detailst, detailsview, formview, gridview elemeket nyújtja. A gridview lapozható, rendezhető több rekord táblázatos megjelenítésére szolgál. Az gridwiew-val szemben a detailsview egy rekord megjelenítésére szolgál A formview űrlap alapú adatkezelésre találták ki. A hierarchikus adatok kezelésére a treeview illetve a menü komponensek állnak rendelkezésünkre. Mindkettő hierarchikus elemek megjelenítésére szolgál, amiben navigálni lehet. A webalkalmazások egyik leggyakoribb felhasználási területe a különböző forrásokból származó adatok egy felületen történő megjelenítése. Bár a megjeleníteni kívánt adatokat egy webalkalmazás egységesen kezeli, függetlenül azok forrásától,

a különböző fizikai adatforrások kezelése teljesen különböző technológiák ismeretét igényli. Az ASPNET 20 adatforrás koncepciójának a lényege, hogy ezeket az alacsonyszintű eltéréseket eltakarja a fejlesztők elől, és egy egységes parancs alapú adatkezeléssé absztrahálja. 49 http://www.doksihu Felhasznált fejlesztő eszközök bemutatása Az egyik leggyakrabban használt webes kontroll a Bejelentkezés. Más nyelvben sokat kell programozni, hogy szépen legyen és működő képes. A másik könnyen kezelhető elem a menürendszer, ami nagyon gyorsan az egyik kedvencemmé vált azzal, hogy könnyen és gyors fejlesztő a tulajdonságok megadásával. (A tulajdonságokat 3 ponttal rövidítettem a jobb olvashatóság érdekében. A szerkesztési nézet: Érdemes megfigyelni, hogy a szerkesztéskor angol feliratok vannak, de mikor futtatjuk, akkor a magyar Windows miatt, magyar szöveg jelenik meg. 50 http://www.doksihu Az IIKS-ben a menü: Az

IIK-ban a menü: A menü szerkezeti felépítése: <asp:Menu ID="Menu1" .> <StaticMenuItemStyle . /> <DynamicHoverStyle . /> <DynamicMenuStyle . /> <DynamicMenuItemStyle . /> <StaticHoverStyle . /> <Items> <asp:MenuItem NavigateUrl="." Text="" Value="" ImageUrl=""> </asp:MenuItem> <asp:MenuItem NavigateUrl="." Text="" Value="" ImageUrl=""> </asp:MenuItem> <asp:MenuItem NavigateUrl="." Text="" Value="" ImageUrl=""> </asp:MenuItem> <asp:MenuItem NavigateUrl="." Text="" Value="" ImageUrl=""> </asp:MenuItem> </Items> <StaticSelectedStyle . /> <DynamicSelectedStyle . /> </asp:Menu> 51 http://www.doksihu A GridView –ra példa. A táblázatokban a kijelölés és a rendezhetőség bemutatására példa

Alatta a forráskódbeli megjelenítési táblázat a típusnak megfelelő default értékekkel. Téma az IIKS-ben Statisztika az IIK-ban: 52 http://www.doksihu A DataList típusú DataListKerdes-et használtam a kérdéssor megjelenítésére. A futáskor az adatbázisból veszi az elemeket. Szerkesztéskor a DataList-ben nincs felöltve. Az Edit Template –el lehet megadni az egyes Itemek kinézetét. Azaz a konkrét esetben egy adott kérdéshez tartozó válaszokat kell kigyűjteni az adatbázisból. Beépített formátumokat az Auto format beállítás alatt lehet, amit igény szerint módosíthatunk, színezhetünk. 53 http://www.doksihu A DropDownList típusú DropDownList1 használtam a téma megjelenítésére. A futáskor az adatbázisból veszi az elemeket. Futás közben dinamikusan lehet a témakörök között kiválasztani a szimpatikus kérdéssort. Ennek a leprogramozásához az adatbázis kapcsolat SqlDataSouceTema Select lekérdezése szükséges. A

tulajdonságokat a Properties ablakban lehet beállítani. Az adatbázis kapcsolatot a SqlDataSourceTema lekérdezés biztosítja. A szöveg az adatbázisból származó témák neve, az értéke az adatbázisbeli azonosítójuk (ID). A témakör választása esetén új kérdéssort kell kiírnunk az oldalra. Ezt az AutoPostBack tulajdonság, ha változik a kijelölt elem, akkor az oldalt frissíti. 54 http://www.doksihu 55 http://www.doksihu Az esemény ASP.NET objektumok eseményeket generálnak Általában van egy default esemény például a gomb megnyomásakor az esemény: Button1 Click. ASPNET a Visual Studio 2005 segítségével meggyorsítja az eseménykezelők bekötését a dupla kattintás. Az események lehetnek default illetve non default események. Minden esemény két paramétert küld: object sender, EventArgs e • Sender az az objektum, aki meghívja ez eseményt • EventArgs az esemény tulajdonságai Egy eseménykezelő képes kiszolgálni több

eseményt, mivel a Sender alapján megtudja őket különböztetni. 56 http://www.doksihu Nézet: Az aspx kierjesztésű oldalakat nézete kétféle lehet: A design nézetben a kódot lehet szerkeszteni, hasonlóan a HMLhez: A design nézetben a tartalom kinézete könnyebben szerkeszthető. 57 http://www.doksihu Mester oldal Mester oldalnak nevezzük azokat az ASP.NET oldalakat, melyek a master kiterjesztéssel rendelkeznek. A Master oldalak, konzisztens, újrahasznosítható kódokat és egyéb tartalmakat kínálnak egyszerre több oldal számára. A Master Page soha nem kerül közvetlen kapcsolatba a böngészővel. Futási időben a Master Page tartalma és a hivatkozott weblap tartalma átlapolódik és az így kialakult tartalom kerül elküldésre a böngésző felé. Az oldal a @Page helyett @Master kulcsszóval kezdődik. Általában egy HTML táblázatot tartalmaz, ami meghatározza az oldal struktúráját. ContentPlaceHolderekkel a tartalom helyét lehet

kijelölni. Futási időben a Master Page-ek a következő módon kerülnek felhasználásra: 1. A felhasználó kér egy oldalt begépelve az oldal URL-jét 2. Az oldalunk MasterPage hivatkozást tartalmaz, akkor együtt veszi elő és a MasterPage tartalma összeadódik a ContentPage tartalmával 3. Az egyes vezérlők tartalma a megfelelő ContentPlaceHolder control helyét veszi át a MasterPage-en 4. A végeredmény egyetlen lapként kerül megjelenítésre a böngészőben Az .aspx fájl a @Page direktívájában a MasterPageFile attribútummal kötődik a MasterPagehez: <%@ Page Language="C#" MasterPageFile="~/MasterPage.master"%> Egy oldal beöltődésekor az események sorrendje: 1. Master page controls Init event 2. Content controls Init event 3. Master page Init event 4. Content page Init event 5. Content page Load event 6. Master page Load event 7. Content controls Load event 58 http://www.doksihu 8. Content page PreRender event 9. Master page

PreRender event 10. Master page controls PreRender event 11. Content controls PreRender event Lehetőség van több MasterPage-et együttesen alkalmazni. A módszer a következő: 1.Master fájl elkészítése 2.Master fájl elkészítése, majd @MasterPage direktívánál megadjuk az 1 oldalt 3.aspx fájl létrehozása majd hivatkozzunk a @MasterPage direktívánál a 2 oldalra 59 http://www.doksihu A WEB-es alkalmazások A WEB-es alkalmazások fejlődése Három nagy korszakot vehetünk észre a webes alkalmazásoknál: Az első generációs WEB szerverek korszaka. Ezen megoldásokra a statikus HTML lapok és az azokba beágyazott képek, grafikák, hangok, később a mozgófilmek voltak a jellemzők. Ezt a világot egészítette ki a böngészőkbe plug-in-ként megjelenő VRML világ, valamint a böngésző oldali scriptek és a JAVA applet-ek lehetősége. Később az Microsoft kidolgozta az applet-ek alternatívájaként funkcionáló ActiveX technológiát. A második

generációs WEB-es alkalmazásokra a dinamizmus megjelenése volt jellemző. A WEB-en szörfölő emberek egyre unalmasabbnak és haszontalanabbnak tartották azokat a WEB helyeket, amik csak egy könyv módjára, statikusan készültek. Ezen technológiák legfőbb képviselői a CGI programok, az SSI-k (Server Side Include). Érdekes kezdeményezés volt az is, hogy a WEB szervereket - hasonlóan más szerverekhez - egy API-val lássák el, aminek legfőbb hátránya az volt, hogy minden WEB szerver más-más API-val rendelkezhetett. A CGI programok mára már nem tekinthetőek korszerű megoldásnak, aminek a főbb okai a következők: nehezen lehet benne a HTTP protokoll állapotmentes jellegéből fakadó korlátokat kiküszöbölni (pl. session kezelés), a CGI scriptek lassúak és sok erőforrást igényelnek, mert minden CGI kérésnél egy teljes értékű process indul el. A harmadik generációs WEB szerver alkalmazások akkor születtek meg, amikor a

fejlesztőeszközöket készítő cégek rájöttek arra, hogy az inter/intranetes helyeket is érdemes lenne hagyományos applikáció-készítő szemléletben kifejleszteni. A végcél persze itt is az, hogy dinamikus HTML, újabban XML lapokat generáljunk a böngésző kliens részére. Ennek a felfogásnak nyilvánvaló előnyei vannak: használhatjuk a már ismert programozási nyelveinket és a vizuális fejlesztőeszközöket. Ennek az irányzatnak talán az első megvalósítása a Microsoft Active Server Pages-en (ASP) alapuló megoldása volt. 60 http://www.doksihu Hogyan épül fel egy Webes alkalmazás? Az aktív tartalommal rendelkező weboldalak készítésének csoportjai: A kliens oldali lehetőség a felhasználó böngészőjén lefutó eljárások az úgynevezett sciptek használata. Második lehetőségben a programok már szerveroldalon futnak le, de még mindig hagyományos script kódok. A harmadik lehetőség az ASP jellegű programozás. Ekkor egy weboldal

"mögött" kód található külön fájlban, amely az oldal használata közben vezérli a kapcsolatot a felhasználóval, megjelenítést, adatbázis elérést vagy a több oldalon keresztülívelő navigációt. Ez a három főbb rész nem választás kérdése. Cél az, hogy a Web-alkalmazás hatékonyabban működjön, ehhez pedig ezt a három programozási formát vegyesen kell használni. Az alkalmazásomban a JavaScript hívásra példa a GridView1-nak a 8. elemének kijelölése A bal alsó sarokban látható a státusz báron megjelenő doPostBack függvény hívása. (Ezt a scriptet a fejlesztő környezet generálta és nem nekem kellet megírni.) 61 http://www.doksihu ASP.NET elvek Annak ellenére, hogy az ASP.NET a nevét a Microsoft korábbi web fejlesztési technológiájáról, az ASP-ről kapta, a két verzió nagyban különbözik. A Microsoft teljes mértékben újratervezte az ASP.NET-et, aminek során a minden Microsoft NET alkalmazás által

közösen használt CLR tulajdonságait tartotta szem előtt. A programozó bármely, a NET Keretrendszer által támogatott nyelven írhat ASP.NET kódot Az ASPNET működése gyorsabb is, mivel az egész weboldalt előfordítja egy vagy több DLL-be a webszerveren, így a weboldal gyorsabban fut a korábbi scriptelési technológiához képest. Az ASP.NET a Windows alkalmazás fejlesztés ismereteim után a webalkalmazás fejlesztésre könnyebb volt áttérni, mivel komponens-alapú fejlesztés hasonló a Windows alkalmazás felületéhez. Egy webes a gomb vagy a címke nagyon hasonlóan működik: a kód módosíthatja a paramétereit és válaszolhat az eseményekre. A vezérlők tudják, hogy hogyan jelenítsék meg saját magukat: ahogyan a Windows vezérlők saját magukat rajzolják a képernyőre, a web vezérlők HTML részleteket állítanak elő a felhasználónak visszaküldendő oldal részeként. Az ASP.NET az eseményvezérelt programozás felé próbálja irányítani

a fejlesztőt a hagyományos scriptelés helyett. Ezért a keretrendszer a meglévő technológiákat kombinálja mint például a JavaScript a belső komponensekkel. A számos NET vezérlő, osztály és eszköz jelentősen lerövidíti a fejlesztési időt, valamint gazdag eszközkészletet nyújt a szokványos programozói feladatokra. A Visual Studio .NET-ben a gazdag vezérlő készlet és osztálykönyvtár lehetővé teszi az alkalmazások gyors fejlesztését. A környezetnek a szerepe, hogy a segítse a programozót előre beépített elemekkel. 62 http://www.doksihu Webfejlesztési tapasztalatim Ebben a félévben az ELTE informatika karán webfejlesztés gyakorlatot tartottam első éves egyetemista hallgatóknak. A hallgatók előző félévben megismerkedtek a HTML szerkesztéssel és a webes elemek szerkezetével. Az volt a feladatom, megismertessem velük, hogy hogyan lehet a "webet programozni". A dinamikus tartalommal rendelkező weboldalak kliens/szerver

oldali programozási lehetősége a sciptek. A tanított nyelvek a JavaScript és a PHP A kliens oldalon a legelterjedtebb és legtámogatottabb script nyelv a JavaScript. Ennek segítségével interaktív HTML oldalt lehet létrehozni. A PHP-nál programok szerveroldalon lefutó script kódok, ami szintén könnyen megtanulható nyelv, jó web-fejlesztés támogatással, és HTML-be ágyazási képességekkel. A nyelv fő célja dinamikusan generált weboldalak gyors készítésére. A diákok azonosítót kaptak az ELTE Apache szerverére, ahol van PHP értelmező. A PHP A PHP elterjedt programozási nyelv, ami saját magára utaló mozaikszó a "PHP: Hypertext Preprocessor" rövidítése. Amikor egy PHP-ben megírt oldalt akarunk elérni, a kiszolgáló először feldolgozza az utasításokat, és csak a kész HTML kimenetet küldi el a böngészőnek, így a programkód nem látható kliens oldalról. A PHP-val sok olyan feladat elvégezhető, amire az ügyféloldali

scriptek nem képesek. Ilyen pl a bejelentkezés, az adatbáziskezelés, fájlkezelés, adatfeldolgozás stb. A PHP-ra egy egyszerű példa: <?php echo "Hello World!"; ?> 63 http://www.doksihu JavaServerPages A Java és a JavaScript két különböző nyelv! A Java bonyolultabb programozási nyelv, amiben szintén van webfejlesztési lehetőség. A JavaServerPages, vagy közismertebb nevén JSP, a Java szervletekhez hasonlóan egy klienstől érkező kérés alapján valamilyen szöveges, leggyakrabban HTML vagy XML formátumú dokumentum dinamikus, szerveroldali előállítására szolgáló technológia. A JSP és a servletek között az a különbség, hogy amíg a servlet Java kódba ültetett HTML addig a JSP HTML-be foglalt JAVA kód. Tehát a JSP tulajdonképpen Java és HTML kód keveréke. A JSP egy template-nyelv, ami azt jelenti, hogy a generálandó tartalomba (HTML lapba) írjuk bele azokat a kóddarabokat, amik a lapot a kérésnek megfelelően

dinamikusan változtatják. A JSP motor ezt a tartalmat Java szervletté fordítja a kulisszák mögött és ez a servlet szolgálja ki valójában a kéréseket. JSP-s egyszerű példa: <% out.println(“Hello World!"); %> 64 http://www.doksihu JavaScript A JavaScriptnek egyszerű a felépítése miatt, könnyen megtanulható. Ez nagyon fontos, mert elsősöknek tanítottam, akik között volt pár meteorológus is, akik még sohasem programoztak semmilyen nyelven és csak az előző félévi HTML ismereteikre támaszkodhattam. A JavaScript egyik tulajdonsága, hogy könnyen lehet a weboldalt kódokkal kiegészíteni, mivel nem kíván bonyolult programozói tudást. A html-be beágyazott JavaScript dinamikusan reagál az eseményekre. Eseménynek minősül az oldal betöltődése, ha valaki megnyom egy gombot vagy bejelöl egy HTML elemet. A JavaScript segítségével el lehet érni a HTML elemek-el és megváltoztatni őket. A kliens oldali programozás az jelenti,

hogy a JavaScript programot a felhasználó böngészője futtatja. Ezért a például JavaScript ellenőrizheti az adatokat mielőtt továbbítja, megkímélve a szervert a hibás adatok felesleges feldolgozásától. (A többfajta böngésző a speciális függvények esetén hátrány, mert nem biztos, hogy le tud futni minden plattformon.) A JavaScriptet bármilyen szövegszerkesztővel lehet fejleszteni. Kezdetben a notepad2exe ingyenesen letölthető szövegszerkesztő használatát ajánlottam. Az előnye a notepadexe-vel szemben, hogy a programozáshoz jól használható sorszámozás és syntax hightlighting (színezés) van benne. Az első alkalmazás a "Hello World!" kiíratása. 65 http://www.doksihu A JavaScript tanítása A JavaScript tanításában is felhasználható a program, amit írtam: 66 http://www.doksihu A megoldáshoz egy rövid magyarázat: A HTM-ben a script alkalmazásokat <script> és </script> tagek közé kell beilleszteni.

A képernyőre kiírni a document.write( ) paranccsal lehet A HTML head és a body részébe is több script írható. A head-be azokat a függvényeket szokták írni, amit az oldal később használ. A body-ba az a rész kerül, ami az oldal generáláshoz, módosításához szükséges. Külső JavaScript meghívása az src paraméter megadásával történik. A JavaScript függvény hívásra pedig egy példa: 67 http://www.doksihu A C# nyelv A C# az új .Net keretrendszer bázisnyelve Tipikusan ehhez a keretrendszerhez tervezték, nem véletlen, hogy a szabványosítási azonosítójuk is egy számmal tér el egymástól. A nyelv teljesen komponens orientált, a fejlesztők számára a C++ hatékonyságát, és a VB fejlesztés gyorsaságát, egyszerűségét ötvözték ebben a fejlesztő eszközben. A C# egy modern objektum-orientált nyelv, kényelmes és gyors lehetőséget biztosítva ahhoz, hogy .NET keretrendszer alá alkalmazásokat készítsünk, legyen az akár

számolás vagy kommunikációs alkalmazás. A C# és a NET keretrendszer alapja a Common Language Infrastructure(CLI) Visual Studio fejlesztőrendszer utalva a hálózati munka integrálására, a fejlesztőeszköz a Visual Studio.NET nevet kapta Forma és jelentés A C++ és a C# formailag nagyon hasonló, azaz megtartotta a megszokott jelölésrendszert, de a jelentése sok helyen eltér, mivel a C# a biztonságosságot és egyszerű kezelhetőséget a jól átgondoltsággal párosította. Ezért van az, hogy sok helyen a Javahoz is hasonlítják, mert jól bevált ötletekből is merített, de a Java következő verziójában is felfedezhetőek a C# hatásai. A C# fejlesztéskor a tervezők törekedtek a biztonságos, modern, egyszerű, objektum központú, tömör nyelv megalkotására. 68 http://www.doksihu A .NET keretrendszer vázlatos szerkezetét mutatja Legalul van az operációs rendszer, e fölött pedig a Common Language Runtime (CLR) futtatórendszer. Ez az a

komponens a keretrendszerből, amelyet nap mint nap használunk, még ha nem is látjuk. A CLR gondoskodik az olyan rendszerszolgáltatásokról, mint az osztálybetöltés, a fordítás, a kivételkezelés, a memóriakezelés, a biztonság stb. Lényegében lehetővé teszi a NET alatti programvégrehajtást. A CLR futtatórendszer felett új osztálykönyvtárak vannak, legalul az alapkönyvtárral, amely olyan közönséges funkciókat nyújt, mint az állomány I/O-, a karakterlánc-, a TCP/IP-kezelés stb. A keretrendszer része az ADO .NET, a korábbi ADO-tól alapvetően különböző, teljesen újratervezett adat-hozzáférési rendszer, amely az XML webszolgáltatásokat is támogatja. Itt található egy teljes XML szolgáltatási rendszer az XML parser-től kezdve a szabványos XML DOM alapú dokumentummodellen keresztül egészen az X-PATH-ig és más, felső szintű XML szabványokig terjedő összetevőkkel. A keretrendszer a kiszolgáló- és az ügyféloldalakon

némileg eltér egymástól. A kiszolgálóoldalon van a Microsoft alkalmazás kiszolgálója, az ASP.NET és a Web Forms, amely az ASP.NET űrlapokon alapuló programozási modellje Támogatja a webszolgáltatásokat és a Mobil Internet Toolkitet is. Ezzel kezelhetők a mobileszközök A kliensoldalon a Windows Forms az, ami a Visual Basic megszokott űrlapos rendszere, és az MFC evolúciója révén mindkét modellből a legjobb tulajdonságokat örökíti át. 69 http://www.doksihu A JavaScript oktatása Az ELTE IK a webfejlesztés 2 nevű tantárgyat tanítottam elsőéves egyetemistáknak, ami JavaScriptet és PHP alapismereteket tartalmaz. A web fejlesztés mindenki számára hasznos, aki programozni tanul. Nekem is volt két meteorológus hallgatóm is, akik speciként végezték a tantárgyat nagy lelkesedéssel. A tanár feladat egy jól használható környezettel megismertetni a hallgatókat. A legegyszerűbb erre a feladatra egy tetszőleges szövegszerkesztőt

bemutatni, amit könnyű használni, de nem igazán segíti a fejlesztőket. A komolyabb programok jobban segítik a munkát, de ekkor az eszköz megismerésére is időt kell szánni. A JavaScript oktatása elképzelhető például notepad és Visual Studio 8 segítségével is. A notepad az első alkalmakra nagyon hasznos, hogy pár soros, egyszerű programokat írjunk. Későbbi órákra viszont a gyorsabb haladás érdekében sokat segít a Visual Studio. Ezt már ismetettem a korábbi fejezetekben. Az áttekinthetőség és olvashatóság nagyon fontos egy programozó számára. A Visual Studio 8 nagy előnye, hogy szép rendezett, tagolt, formázott programot lehet vele szerkeszteni, míg ezt a szövegszerkesztővel tabok és szóközökkel érhetjük csak el. Ezen kívül a beépített help, a dokumentációk, és a kódolás során automatikusan megjelenő súgó (IntelliSense) segítségével gyorsabban és hatékonyabban lehet programozni. Az első anyagrész az alapelemek

ismertetése Ez tartalmazza a formátumok, komment, értékadás, elágazás, ciklus megismertetését és közben a változók, műveletek illetve hasznos ismeretek átadását. A HTML alapismeretek az előző félév tananyaga, de párhuzamosan is elsajátítható ezzel a tárgyal. Az első órákhoz a HTML nyelvből elég megismerni az alap HTML tagek (címke) fogalmát. A html oldalak a <HTML>- vel kezdődnek és </HTML>-el végződnek ez jelzi, hogy html dokumentumunk van. A tageket a < és > jelek jelzik, amik általában párban állnak: egy nyitó - és egy záró címke. A záró címke a nyitó megismétlése egy / jellel kiegészítve 70 http://www.doksihu A fejrész <HEAD> és </HEAD>, a törzs <BODY> és </BODY> között van. A fejrészben szereplő információk nem jelennek meg a böngésző ablakban, míg a törsz igen. A HTML fájlokat .html vagy htm kiterjesztéssel kell elmenteni Példa: <html> <head>

</head> <body> </body> </html> A JavaScript egy script nyelv, ami weblapok vagy web elemek dinamikus programozására alkalmas. A kliens oldali programozás egyik legegyszerűbb nyelve, amit kezdő honlap szerkesztők is egyszerűen elsajátítanak. A HTML oldalakba egyszerűen beágyazható a JavaScript a <script> tagek segítségével. A tageket elhelyezhetjük a head és a body részbe, azaz <script type="text/JavaScript"> .SCRIPT TÖRZSE </script> A scriptek, amelyek függvényeket tartalmaznak általában a head-be írunk, így biztosak lehetünk abban, hogy a script betöltődött mielőtt meghívtuk a függvényt. A törzsbe írt script azon a helyen hajtódik végre ahol a body-ban van. A tagek között JavaScript nyelven érvényesül, míg a tagen kívül HTML. Fontos megemlíteni, hogy a JavaScript kis- és nagybetű érzékeny, a HTML nyelv viszont nem. A document.write a JavaScript egyik alap utasítása, ami kiírja az

oldalra a paraméternek megadott szöveget. <script type="text/JavaScript"> document.write("Hello"); </script> A scriptet külön fájlban is lehet írni ekkor "js" kiterjesztést használjunk: hello.js Ekkor a HTML-be kerülő rész: 71 http://www.doksihu <script type="text/JavaScript" src="hello.js"> </script> Kommentek A HTML komment <!-- HTML megjegyzés --> A JavaScript komment a // megjegyzés illetve a /* több soros megjegyzés/ . Ezt a kettőt kombinálva azok a böngészők, amelyek nem támogatják a scripteket, azok kommentnek értelmezik a törzset, és amelyek tudják értelmezni a scripteket, azok a HTML kommentet tekintik semmisnek. <script type="text/JavaScript"> <!-document.write("Hello World!") //--> </script> Példa: A Hello program: <html> <head> </head> <body> <script language="JavaScript"> <!--hide

document.write("Hello"); //--> </script> <noscript> Ez a bongeszo nem tamogatja a JavaScriptet. </noscript> </body> </html> A továbbiakban a csak a script részt írom le a könnyebb olvashatóság érdekében. Változók: Az adatok tárolására szolgál, aminek a tartalma és típusa is dinamikusan változhat. Egy változó neve betűvel vagy aláhúzással kezdődhet. Két féle képen lehet létrehozni változót: var változó = érték változó = érték 72 http://www.doksihu Ha függvényen belül deklaráljuk a változót, akkor csak a függvény belsejében létezik, és ha kilépünk, akkor megszűnik. Ezt lokális változóknak nevezzük, azaz több függvényben használhatjuk ugyanazt a nevet. Ha a függvényen kívül deklaráljuk a változót, akkor mindegyik függvényből el tudjuk érni és akkor szűnik meg, ha az oldalt bezárjuk. Ezek a globális változók. Értékadás x = y A változóknak az értéke lehet

szöveg, szám, logikai, tömb, dátum, objektum. Példa értékadásra: var szam = 4 var valos = 5.03 var szoveg = Hello var txt = " :) " Szöveg műveletek: Szövegeket összefűzni a + művelettel lehet. var ujszoveg = szoveg + txt //Az ujszoveg tartalma: "Hello :)" Számok műveleti A példában az x=5 és az y=2. Operátor + * / ++ -% Művelet összeadás kivonás Szorzás Osztás növelés csökkentés modulus (maradék képzés) Példa x+y x-y x*y x/y x++ x-x%y Eredmény 7 3 10 2.5 x=6 x=4 1 Egész és valós típusra is alkalmazhatóak. Érdekes megfigyelni, hogy az osztás eredménye valós lesz (más nyelvben az eredmény típusa egészre csonkolódik az egészek osztásakor). Speciális értékadások: Ha a bal oldali kifejezést nem akarjuk megismételni, akkor a műveleteket rövidítve is írhatjuk: Rövid kifejezés: x+=y x-=y Jelentése: x=x+y x=x-y x*=y x/=y x=x*y x=x/y x%=y x=x%y 73 http://www.doksihu Feltételes értékadás: változó

=(feltétel)? érték1 : érték2 Példa feltételes értékadásra: var szam=-2 sign = (szam>=0) ? (1) : (-1) 74 http://www.doksihu Elágazás Az elágazást (if-es kifejezést) használjuk, amikor egy feltételtől függően hajtunk végre kódot. if (feltétel) {kód igaz feltétel esetére} else {kód hamis feltétel esetére} Az else ág elhagyható, ha hamis ágban nincs kód. Feltételbe írható kifejezés logikai eredményétől függ, hogy melyik ágat hajtja végre a program. Az igaz feltétel estén az első ág, míg hamis estén a második ág hajtódik végre. Az if ágak egymásba ágyazhatóak, azaz bármelyik ágba további if-es kifjezés írható. A feltételbe írható kifejezések: Összehasonlító operátorok: A példában az x=5 és az y=2. Operátor == != > < >= <= Művelet egyenlőség nem egyenlő nagyobb kisebb nagyobb egyenlő kisebb egyenlő Példa x= =y x!=y x>y x<y x>=y x<=y Eredmény hamis igaz igaz hamis igaz hamis

Példa (x < 10 && y > 1) (x>5 || y= =5) !(x= =y) Eredmény igaz hamis igaz Logikai műveletek A példában az x=5 és az y=2. Operátor && || ! Művelet és vagy nem A többszörös elágazást (switch-es kifejezést) használjuk, amikor egy egyszerű kifejezéstől (általában változó) függően más-más kódot hajtunk végre. switch(n) { case 1: kód1 break case 2: kód2 break default: kód különben 75 http://www.doksihu } A kifejezés az elején egyszer kiértékelődik és összehasonlítja a case ágak az értékével, ha talál megfelelő ágat, akkor végrehajtja. Fontos tudni, hogyha lemarad a break utasítás, akkor a következő ágakon folytatja a futást a program. Példa elágazásra: <script type="text/JavaScript"> var d = new Date() var ido = d.getHours() if (ido<10){document.write("Jó reggelt!")} else if (ido>10 && ido<16){document.write("Jó napot!")}

else{document.write("Jó estét!")} </script> <script type="text/JavaScript"> // Sunday=0, Monday=1, Tuesday=2, etc. Példa többszörös elágazásra: var d = new Date() theDay=d.getDay() switch (theDay) { case 0: document.write("Vasárnap"); break case 1: document.write("Hétfő"); break case 2: document.write("Kedd"); break case 3: document.write("Szerda"); break case 4: document.write("Csütörtök"); break case 5: document.write("Péntek"); break case 6: document.write("Szombat"); break default: document.write("Nem nap") } </script> Megjegyzés: A dátumról bővebben a következő órákon lesz szó, most csak az időt/napot kérdezzük le a személetes példa érdekében. 76 http://www.doksihu Ciklus A programban lehet olyan rész, amit ismételni kell. Ez két fajta lehet: • adott darabszámú ismétlés – számlálós ciklus -for (vált=kezdőérték;

vált<=végérték; vált=vált+növekmény) { kód } • addig ismételjünk valamit, amíg egy feltétel igaz – feltételes ciklus - while (feltétel){ kód } //elöl tesztelős ciklus - do { kód } while (feltétel) //hátul tesztelős Példa for ciklusra: <script type="text/JavaScript"> var i=0 for (i=0;i<=10;i++) { document.write("A szám " + i) document.write("<br />") } Példa while ciklusra: <script type="text/JavaScript"> var i=0 while (i<=10) { document.write("A szám " + i) document.write("<br />") i=i+1 } </script> Példa do while ciklusra: </script> <script type="text/JavaScript"> var i=0 do { document.write("A szám " + i) document.write("<br />") i=i+1 } while (i<10) </script> A példák kiírják a böngészőbe ciklussal a következőt: A szám 0 A szám 1 A szám 2 A szám 3 A szám 4 77 http://www.doksihu A

szám 5 A szám 6 A szám 7 A szám 8 A szám 9 A szám 10 78 http://www.doksihu A második anyagrész a JavaScript Objektumok Ez az anyagrész feladatokat is tartalmaz. A JavaScript több, előre definiált objektumot tartalmaz. Ezek a következők: • Math (matematikai) • Function (függvény) • Array (tömb) • Date (dátum) • Boolean • Number (szám) • String (karakterlánc) Ezek közül az Math, Function, Array, Date objektumokkal foglalkozunk részletesebben. Matematikai konstansok és matematikai függvények A konstansokat nagy betűkkel jelöljük JavaScriptben. A két legfontosabb konstans: PI E matematikai PI számra (3.14159) Euler konstans (2.718) A matematikai "PI" illetve "E" számra a Math.PI illetve MathE-vel tudunk hivatkozni A Matematikai függvények be vannak építve a JavaScriptbe: sin(x) cos(x) tan(x) asin(x) acos(x) atan(x) exp(x) log(x) floor(x) round(x) abs(x) max(x,y) min(x,y) random() sqrt(x) sinus cosinus tangens

arcsinus arccosinus arctangens (-PI/2 és PI/2 között) radiánsban exponenciális (ex) logaritmus (e alapú) lefelé kerekítés egészre legközelebbi egészre kerekít abszolút értéket x és y közül a nagyobb érték x és y közül a kisbb érték 0 és 1 közötti véletlen szám gyökvonás 79 http://www.doksihu Függvény A függvény valamilyen esemény hatására vagy függvény hívásakor hajtódik végre és nem az oldal betöltésekor. Fontos, hogy a függvényeket még az eseménykezelőkkel ellátott linkek megjelenése előtt letöltse a böngésző. Ha a felhasználó megszakítja a letöltést és a csatolás már látszik, de a függvények még nem jöttek át, akkor az események bekövetkezése hibaüzenethez vezet. Ennek elkerülése érdekében javasolt a függvényeket a HTML oldal fejrészében (<HEAD></HEAD>) tagek közé beépíteni. Ekkor ugyanis még a weblap látható részeinek megjelenése előtt a JavaScript függvények már

átjöttek, így azok biztosan elérhetőek. Függvény létrehozása function függvény név1() { kód } A függvénynek lehet tetszőleges számú paramétere function függvény név2(var1,var2,.,varX) { kód } Péda függvény létrehozására <script type="text/JavaScript"> function osszead(a,b) { x=a+b return x } function Hello() { documnet.write("HELLO") } </script> Függvényt meghívásakor a formális paraméterek helyébe aktuális paraméter éréket helyettesít be és végrehatja a függvény törzset. Példa a függvény meghívására: - JavaScriptből <script type="text/JavaScript"> eredmeny = osszead(2,3) </script> - HTML linkből <body> <A HREF="JavaScript:Hello()">Hello függvény hívás linkje</A> 80 http://www.doksihu </body> - Esemény hatására <body> <form> <input type="button" value="Nyomj meg!" onclick="Hello()" >

</form> </body> A feladatok önállóan a megismert technikák segítségével megoldhatóak. A feladat után ismertetek egy megoldást is. Feladat n faktor kiszámítására Számítsa ki a JavaScript segítségével az n!-t, (n – változó, aminek a kezdeti értéke 10). Megoldása: fakt.html <html> <head> <script language="JavaScript" type="text/JavaScript" src=fakt.js> </script> </head> <body> Ez a JavaScript az n!-t számolja függvénnyel JavaScript fileból olvasva: <br> <script language="JavaScript"> <!--hide document.write(fakt=+fakt(10)); //--> </script> <noscript> Ez a bongeszo nem tamogatja a JavaScriptet. </noscript> </body> </html> fakt.js (ciklussal) function fakt(n) { var eredm=1; for(var i=1; i<=n ; ++i) { eredm *= i; } return eredm; } 81 http://www.doksihu fakt.js (rekurzívan) function fakt1(n) { if (n>1) return n*fakt1(n-1); else

return 1; } 82 http://www.doksihu Feladat másodfokú egyenletre Számítsa ki a JavaScript segítségével a másodfokú egyenletet ax2+bx+c=0, (a,b,c – változó, amiknek a kezdeti értéke tetszőleges). Használd a gyökvonásra a Mathsqrt(szám) függvényt,és az isNaN(szoveg) függvényt, ami hamisat ad, ha a paraméter szám. Megoldása: masodfoku.html <html> <head> <script language="JavaScript" type="text/JavaScript" src="masodfoku.js"> </script> </head> <body> Ez a JavaScript az ax2+bx+c=0 számolja: <br> <script language="JavaScript"> <!--hide var aa=1 var bb=-2 var cc=1 m(aa,bb,cc) //--> </script> <noscript> Ez a bongeszo nem tamogatja a JavaScriptet. </noscript> </body> </html> masodfoku.js function m(a,b,c) { if (!(isNaN(aa) || isNaN(bb) || isNaN(cc)) ) { if (a==0) { if (b==0) { if (c==0){document.write( Minden szám megoldás!)} else

{document.write( Nincs megoldás!)} } else{ x=(-1*b/c); document.write( Kettős gyök x = +x) } } else { var d = b*b-4ac if (d>=0) { 83 http://www.doksihu x1=(-1*b-Math.sqrt(d))/(2*a); document.write( x1 = +x1) x2=(-1*b+Math.sqrt(d))/(2*a); document.write(; x2 = +x2) } else { document.write( A diszkrimináns negativ ezért komplex gyökök vannak!);} } } else { document.write(Nem számok a paraméterek!);} } 84 http://www.doksihu Tömbök A JavaScript Array objektumával (a tömbökkel) ismerkedünk meg. Objektumot a new kulcsszó segítségével lehet definiálni, amikor adatok halmazára akarunk hivatkozni egy közös névvel. A tömbök általában 0 indexel kezdődnek, az elemeit elérni a tömbnév után []-ben megadott index-el lehet. Példa tömb létrehozásra, indexelésre var a = new Array() //üres tömb var b = [] //üres tömb var c = new Array(7) //7 elemű üres tömb var d = new Array(3,4) //2 elemű tömb 0.eleme: 3, 1eleme: 4 var e = [[2,3],[4,5]] var f =

["szia","hello"] var ertek = d[1] d[0]=12 //2 elemű tömb, aminek elemi tömbök //2 elemű tömb, aminek elemi szövegek //ertek = 4 //d = [12,4] tömb új értéke var hossz=c.length //hossz = 2 a tömb hossza a["piros"]=1 //index lehet szöveg is Példa tömbökre – lineáris keresés Az első páros számot indexét jelenítse meg! <html> <head> <script type="text/JavaScript"> function keres(t) { for (i=0;i<t.length && (t[i]%2==1);i++); //a feltétel hamis, ha páros return i+1 } </script> <head> <body> <script type="text/JavaScript"> tomb=new Array(13,101,-3,2,7) document.write(keres(tomb)) </script> </body> </html> Speciális ciklus tömbökre a "for in". Például adjuk össze az arg tömbben levő értékeket 85 http://www.doksihu <html> <body> <script type="text/JavaScript"> var arg = new Array(2,4,3) for (i

in arg) { s += arg [i] } </script> </body> </html> 86 http://www.doksihu Dátum A JavaScript Date objektumával (a dátum és idő kezelésével) ismerkedünk meg. Objektumot a new kulcsszó segítségével lehet definiálni. A dátumunk automatikusan az alkalmazást futtató gép aktuális idejét veszi kezdő értéknek. var myDate=new Date() A dátumot egy számként tárolja, ami megmondja hány másodperc telt el 1970/01/01 óta, ebből számolja ki mindent. Ez azért praktikus, mert másodpercenként 1-el nő a szám és könnyebb dátummakkal műveletet végezni. A dátum objektum lekérdezései get- a beállításai set kulcsszóval kezdődnek általbában. A legfontosabb lekérdezések listája: getYear év getFullYear teljes év getMonth hónap getDate nap(dátum) getDay nap getHour óra getMinute perc lehet 2 illetve 4 számjegyű 4 számjegyű 0-11 ig ad vissza értéket* 1-31 ig ad vissza értéket 0-6 ig ad vissza értéket * 0-23 ig ad vissza

értéket 0-59 ig ad vissza értéket * A hónapoknál a 0. hónap a január 11 a december * A napoknál a 0. a vasárnap, 1 a hétfő és 6 a szombat Hasonlóan működik a set párjuk erre egy példát mutatnék. Példa dátum beállításra <html> <body> <script type="text/JavaScript"> var myDate=new Date() myDate.setFullYear(2010,1,14) document.write(myDate) </script> </body> </html> Ez a példa 2010. február 14-re állítja a dátumot 87 http://www.doksihu Feladat dátum kiírása JavaScript segítségével az aktuális dátumot írja ki a magyar dátum formátumot követve szövegesen az alábbi példához hasonlóan "2007. November 28 Szerda" Megoldása: maidatum.html <html> <head> </head> <body> <script language="javacsript" type="text/JavaScript" src="honap.js"> </script> <script language="javacsript" type="text/JavaScript"

src="het.js"> </script> </body> </html> het.js // Sunday=0, Monday=1, Tuesday=2, etc. var d = new Date() theDay=d.getDay() switch (theDay) { case 0: document.write("Vasárnap"); break case 1: document.write("Hétfő"); break case 2: document.write("Kedd"); break case 3: document.write("Szerda"); break case 4: document.write("Csütörtök"); break case 5: document.write("Péntek"); break case 6: document.write("Szombat"); break default: document.write("Nem nap") } honap.js var d1=new Date() var month=new Array(12) month[0]="Január" month[1]="Február" month[2]="Március" month[3]="Április" month[4]="Május" 88 http://www.doksihu month[5]="Június" month[6]="Július" month[7]="Augusztus" month[8]="Szerptember" month[9]="Október" month[10]="November"

month[11]="December" document.write(d1getYear()+" "+ month[d1getMonth()]+" "+d1getDate()) Időzítés A példánk az eltelt másodpercet számolja, amit be lehet kapcsolni a be gombbal és megállítani a ki gomb segítségével. Az időzítéshez a setTimeout meghívja az ora() függvényt 1 másodper múlva, míg a clearTime(param) leállítja a paraméterben megadott időzítőt. ora.html <html> <title> </title> <script language="JavaScript"> var i=0; var most= new Date(); document.write("kezdés: "+most.getHours()+":"+mostgetMinutes()+":"+mostgetSeconds()); function ora() { document.foramvalue = ++i; idoz = setTimeout("ora()",1000); }; </script> <form name=f> <input type=text name="oram" value="0"> <input type=button value="be" onclick="ora();"> <input type=button value="ki"

onclick="clearTimeout(idoz);"> </form> <body> </body> </html> 89 http://www.doksihu A harmadik anyagrész a html elemek elérése Ebbe a részbe az felugró ablakok, a dinamikus képkezelés és eseménykezelés tartozik, radio gomb és check box használata. Felugró ablakok A felugró ablakokkal a felhasználótól visszajelzést kapunk. A legegyszerűbb, amelyiken csak OK gomb van az alert("kiírt szöveg") box - ezzel csak tájékoztatjuk, de nincs választási lehetősége. A confirm("kiírt szöveg") segítségével felhasználó választhat, hogy elfogadja vagy elutasítja a kiírt szöveget a OK és a CANCEL gombok segítségével. Gyakran szeretnék valamilyen értéket is bekérni a klienstől, akkor a prompt("kiírt szöveg","alap érték") felugró ablakot használjuk. Példa a felugró ablakokra: <html> <head> <script type="text/JavaScript"> function disp alert()

{alert("alert box!")} </script> <script type="text/JavaScript"> function disp confirm() { var r=confirm("Nyoj meg egy gombot!") if (r==true) { document.write("OK!") } else { document.write("Cancel!")} } </script> <script type="text/JavaScript"> function disp prompt() { var name=prompt("Írd be a nevedet: ","Kati") if (name!=null && name!="") { document.write("Hello " + name + "! Hogy vagy?") } } </script> </head> <body> 90 http://www.doksihu <input type="button" onclick="disp alert()" value="alert box" /> <input type="button" onclick="disp confirm()" value="alert box confirm" /> <input type="button" onclick="disp prompt()" value="alert box prompt" /> </body> </html> 91 http://www.doksihu A html elem

elérése név alapján A HTML elemeket dinamikusan lehet kezelni a JavaScript segítségével. A JavaScript futásidejű motorja létrehoz a dokumentum minden form elemének egy FORM objektumot. A FORM objektumokhoz a documentforms tulajdonság használatával, és az objektum name (név) tulajdonságainak használatával férünk hozzá. Az első példában számoljuk ki egy kör kerületét. A form első eleme egy text mezőt sugar néven, amibe beolvassuk a kör sugarát (tetszőleges valós szám – ezt ellenőrizzük is). A számolj gomb lenyomására meghívjuk a JavaScript "szamit()" függvényünket, ami a következő eredm nevű text mezőbe kiírja a kerület értékét. korkerulet.html <html> <head></head> <body> <script language="JavaScript"> function szamit(){ var r= parseFloat(document.fsugarvalue); if (isNaN(r)) {alert("hibás érték");} else { document.feredmvalue= 2*rMath.PI; }; }; </script> <form

name=f> <input type=text name="sugar"> <input type=button value="számolj" onclick="szamit()"> <input tpye=text name="eredm"> </form> </body> </html> 92 http://www.doksihu A html elem elérése id alapján Tetszőleges html elemnek lehet id, és name paramétere, amiknek általában azonos nevet adnak, ha mindkettő szerepel. Az id/name egyértelműen azonosítja az objektumunkat az oldalon belül, ezért ne adjuk két elemnek ugyanazt értékül. A html elemeket elérjük a documentum.getElementById(elem id) vagy a documentumgetElementByName(elem név) segítségével. A példánk egy div elemet jelenít meg illetve tüntet el, a megfelelő linkre kattintással. Kihasználjuk a style visibility tulajdonságát, ezt a nagyon régi böngészők nem értelmezik. hidediv.html <html> <body> <script language=JavaScript type=text/JavaScript> function hidediv() { if (document.getElementById) {

document.getElementById(hideShow)stylevisibility = hidden; } } function showdiv() { if (document.getElementById) { document.getElementById(hideShow)stylevisibility = visible; } } </script> Explorer 5 től Fire Fox működik a tartalim elrejtése! <div id="hideShow" name="hideShow" > VALAMI </div> Ez rejti el: <a href="JavaScript:hidediv()">hide div</a> és ez ujra megmutatja: <a href="JavaScript:showdiv()">show div</a> </body> </html> 93 http://www.doksihu JavaScript események Az "esemény" és annak kezelése a JavaScript-ben az egyik legfontosabb dolog. Esemény hatásra meghívhatunk JavaScript függvényeket vagy utasításokat. Az oldal egészére vonatkozó események Eseménykezelő neve Bekövetkezése onLoad amikor az oldal minden objektuma letöltődött onResize amikor a dokumentumot átméretezik onScroll amikor a dokumentumot görgetik onUnload amikor egy

dokumentumot eltávolítanak egy ablakból Egéresemények Eseménykezelő neve onClick onMouseDown onMouseUp onMouseOver onMouseMove onMouseOut Bekövetkezése amikor rákattint valaki az adott elemre az egérrel amikor egy egérgombot megnyomnak az adott elem fölött amikor az egérgombot elengedik az adott elem felett amikor az egérmutató az adott elem fölé kerül amikor az egérmutató mozog az adott elem fölött amikor az egérmutató az adott elemet elhagyja Formokra vonatkozó események Eseménykezelő neve Bekövetkezése onBlur amikor az adott elem elveszti a "fókuszt" vagy amikor az oldal minden objektuma letöltődött Érvényes: LABEL, INPUT, SELECT, TEXTAREA, és BUTTON elemekre onChange amikor az adott elem elveszti a beviteli fókuszt, és változás következett be a tartalmában azóta, hogy rákerült a fókusz. Érvényes: INPUT, SELECT, és TEXTAREA elemekre onFocus amikor az adott elem aktívvá válik, vagy az egér, vagy a billentyűzet

segítségével (TAB). Érvényes: LABEL, INPUT, SELECT, TEXTAREA, és BUTTON elemekre onReset amikor FORM reset következik be. Érvényes: Csak FORM elemre onSelect amikor a felhasználó szöveget jelöl ki szöveges (text) mezőben. Érvényes: INPUT, TEXTAREA elemekre onSubmit amikor FORM adatokat elküldenek (submit). Érvényes: Csak FORM elemre onAbort amikor egy képletöltést megszakítanak. Érvényes: objektum elemekre. onError amikor egy kép nem töltődik le teljesen vagy hiba keletkezik a script futása közben. 94 http://www.doksihu Érvényes: OBJEKTUM, BODY, FRAMESET elemekre Képkezelés A képeket a JavaScript Image (kép) objektumán keresztül kezelhetjük. Minden kép egy úgynevezett asszociatív tömbön keresztül érhető el. Az oldalon lévő képek kapnak egy sorszámot. A legelső kép a 0-ás sorszámmal rendelkezik, a második az 1-essel, és így tovább Ha a legelső képre akarunk hivatkozni például egy JavaScript programból, akkor az a

document.images[0] hivatkozáson keresztül lehetséges Minden képet az Image objektum egy példányának tekintünk, ezért hivatkozással megváltoztathatjuk az oldalunkon lévő képek paramétereit, illetve magát a képet is. Képek tulajdonsága például: name a kép neve src a kép helye, az a cím, ahonnan betöltjük width szélessége height magassága border keret mérete Létrehozni egy kép objektumot A következő kóddal lehet képet a memóriába beölteni. kep = new Image(); kep.src = "kepemgif"; Szinte minden szebb oldalon megjelennek olyan gombok, amelyek benyomódnak vagy más színben jelennek meg, ha az egér mutatót fölé visszük. Ezt két eseménykezelővel valósíthatjuk meg. Az onMouseOver esetén betöltjük az új képet, míg az onMouseOut eseménynél visszaállítjuk a régit. Az itt bemutatásra kerülő JavaScript a dinamikus menüvezérlést mutatja be. A menü esetünkben egy kép (jpg fájl), amihez egy onClick eseményt rendeltünk.

Ha az egeret a kép felé visszük, akkor annak helyén egy másik kép jelenik meg a böngészőben. Példa képek cseréjére A két kép legyen például a következő g1.jpg g2.jpg 95 http://www.doksihu kepcsere.html <html> <head></head> <body> <script language="JavaScript"> var kepek=new Array(2); for (i=0; i<2; i++){ kepek[i]=new Image(); kepek[i].src="g"+(i+1)+"jpg"; }; </script> <form name=f> <img src="g2.jpg" name="kep" onmouseover="kepsrc=kepek[0]src" onmouseout="kep.src=kepek[1]src"> </form> </body> </html> A képre kattintáskor random szám felhasználásával cserélgeti a képeket. Ehhez a feladathoz 3 kép szükséges: kep1.bmp kep2bmp kep3bmp kepsor.html <html> <head></head> <body> <script language=JavaScript> var melyik=0; var kepek=new Array(3); for (i=0;i<3;i++){ kepek[i]=new Image();

kepek[i].src="kep"+itoString()+"bmp"; }; function kovetkezo(){ melyik=Math.floor(Mathrandom()*3); document.fkepsrc=kepek[melyik]src; } </script> <form name=f> <img src="kep0.bmp" name="kep" onclick="kovetkezo()" > </form> </body> 96 http://www.doksihu </html> 97 http://www.doksihu Checkbox Egy egyszerű bevásárló listás alkalmazást fejlesztünk mobilra. Van rajta 3 bevásárolandó termék és egy ellenőrző gomb, hogy minden megvan-e, ez az oke függvényünket hívja meg ami a checkboxok checked tulajdonságát ellenőrzi. <html> <body> <form name=form1 > <input type=checkbox name=c1 value=c1 >Krumpli <br> <input type=checkbox name=c2 value=c2 >Kenyér <br> <input type=checkbox name=c3 value=c3 >Tej <br><br> <input type=button value=Minden meg van? onclick=oke();> </form> <script language=JavaScript>

function oke() { if (document.form1c1checked && documentform1c2checked && document.form1c3checked ) {alert(Minden megvan);}else {alert(Nincs minden meg);} } </script> </body> </html> Radio gomb A radio gombokra kiválasztásával különböző kép jelenik meg. A radio gombok akkor tartoznak a html nyelvben egy csoportba, ha azonos a nevük. Itt a csoport neve "radiobutton", amiben mindegyik gomb egy-egy kép betöltésért felel. A példát 2 gombbal egészítettem ki aminek hatására egyel lépteti a képeket előre vagy hátra. A feladathoz szükség van 9 darab képre: wow1.jpg wow9jpg néven (a képek a world of warcraft ingyenesen letölthető háttérképei átnevezve) (megtalálható a http://people.infeltehu/tkt/webf 4 wow/ címen) 98 http://www.doksihu wow3.html <html> <body bgcolor="gray"> <center> <form name=form1 action=alma.html method=get> <input type=radio name=radiobutton value=0

onclick="Betolt(0)" checked >0. Kép <input type=radio name=radiobutton value=1 onclick="Betolt(1)">1. Kép <input type=radio name=radiobutton value=2 onclick="Betolt(2)">2. Kép <input type=radio name=radiobutton value=3 onclick="Betolt(3)">3. Kép <input type=radio name=radiobutton value=4 onclick="Betolt(4)">4. Kép <input type=radio name=radiobutton value=5 onclick="Betolt(5)">5. Kép <input type=radio name=radiobutton value=6 onclick="Betolt(6)">6. Kép <input type=radio name=radiobutton value=7 onclick="Betolt(7)">7. Kép <input type=radio name=radiobutton value=8 onclick="Betolt(8)">8. Kép <input type=radio name=radiobutton value=9 onclick="Betolt(9)">9. Kép <input type=button value=" << " onclick="elozo()"> <input type=button value=" >> "

onclick="kovetkezo()"> <img src="wow0.jpg" name="wowkep"> <br> </form> <script language=JavaScript> var index=0; var kepek=new Array(10); for (i=0;i<10;i++) { kepek[i]=new Image(); kepek[i].src="wow"+i+"jpg"; }; function Betolt(i) { document.form1wowkepsrc=kepek[i]src; 99 http://www.doksihu index=i; } function elozo() { if (index==0){ index=kepek.length-1; } else { --index; }; document.form1wowkepsrc=kepek[index]src; document.form1elements[index]checked=true; } function kovetkezo() { if (index==kepek.length-1){ index=0; } else { ++index ; }; document.form1wowkepsrc=kepek[index]src; document.form1elements[index]checked=true; } </script> </body> </html> Javascript oktatási tapasztalataim Az első és második anyagrészre tanítására minimum 4órát (2 dupla órát) szántam, a harmadikra 6 órát (3 dupla órát) számtam. Az első anyagrész nagyon fontos, mert itt sajátítják

el a nyelv programozási alapjait, e nélkül nem lehet tovább menni. A második részben a JavaScript objektumok megismerésével bonyolultabb programok írására van lehetőség. A harmadik rész a leglátványosabb és ezt szeretik a legjobban programozni. Ez a rész lényegében az összes programozási elemet használja, ha megfelelő feladatot találunk ki. Az anyagrészek sorrendje nem kötött (kivéve az elsőt), és volt pár lelkes diákom, akik kérdezgettek, ilyenkor át kell gondolni az anyagot, és ha bele illik a témába, akkor előbb elmondani egy példát. 100 http://www.doksihu Érdemes érdekes példákon magyarázni, nekem például a "World of Warcraft"-os képek nagy sikert arattak, mert egy olyan játék háttérképei, amit sokan ismernek. A JavaScript oktatás eredményességét a beadandókon lehet lemérni, ami egy JavaScript nyelven megírt játék beadása. A diákok lelkesen kérdeztek vagy az interneten utána néztek annak, ami a

beadandót sokkal szebbé teheti. 101 http://www.doksihu Összegzés A webfejlesztésre egyre nagyobb szükség van, legyen az egy egyszerű JavaScriptes honlap vagy egy bonyolult adatbázist kezelő dinamikus oldal. A célom az volt, hogy felvázoljam azokat a problémákat, amelyekkel a webes alkalmazásokat készítő fejlesztők szembesülnek, miközben dinamikusan állítanak elő HTML oldalakat az ASP.NET segítségével vagy esetleg JavaScriptettel Örülnék, ha a szakdolgozatom olvasásával sok hasznos információhoz jutna minden olvasó a webfejlesztéssel kapcsolatban. Úgy érzem az ISKOLAI INFORMÁCIÓS KÖZPONT megvalósításával egy jól használható és hasznos eszközt készítettem. Már jelen állapotában is alkalmas tesztek kitöltésére, de a tárgyalt továbbfejlesztési lehetőségek implementálásával teljes értékű számonkérési illetve tanulási eszközzé alakítható. Örülök, hogy egy ilyen érdekes és szakmába vágó feladatot

készíthettem el. Remélem a közeljövőben kipróbálhatom programomat a munkám során is. Végezetül köszönöm Illés Zoltán tanár úr tanácsait és segítségét. 102 http://www.doksihu Felhasznált linkek Adatbázis letöltése és dokumentációja: http://www.oraclecom/technology/software/products/database/oracle10g/indexhtml http://www.oraclecom/pls/db10g/ Szoftverek: http://msdnaa.eltehu/ (A szoftverek az egyetemen keresztül ingyenesen letölthetőek) http://www.flos-freewarech/notepad2html notepad2exe letöltése Programozás: http://www.SoftwareOnlinehu/ http://www.w3schoolscom/defaultasp http://www.msportalhu/ Teszt: http://lab.analogicsztakihu/~balya/bme/balya ikttpdf http://www.hikhu/tankonyvtar/site/books/b101/ch03s02s01html SPEED nevű számítógépem: 1 GB memóriával 100GB kapacitású merevlemezzel Microsoft Windows XP operációs rendszerrel ORACLE 10g adatbázissal Microsoft Visual Studio 8 103