M10. Adatok megjelenítése, űrlapok kezelése és ellenőrzése

TARTALOMJEGYZÉK

1. M10. Adatok megjelenítése, űrlapok kezelése és ellenőrzése 1.1. Adatok megjelenítése és a dokumentum módosítása 1.2. Stíluselemek kezelése 1.3. Űrlapok kezelése és ellenőrzése 1.3.1. Beviteli mezők (input) 1.3.1.1. Egysoros szövegmező (text) 1.3.1.2. Választógomb (radio) 1.3.1.3. Jelölőnégyzet (checkbox) 1.3.1.4. Rejtett mezők (hidden) 1.3.1.5. Állományfeltöltő mezők (file) 1.3.2. Többsoros szövegmező (textarea) 1.3.3. Válsztólista (select, option) 1.4. Űrlapkezelés 1.4.1. Súgószöveg a beviteli mezőkben 1.4.2. Eseménykezelő hozzárendelése kódból 1.4.3. Összes jelölőnégyzet kitöltése

3 3 5 7 7 7 8 9 11 12 13 15 18 18 19 20

2

TARTALOMJEGYZÉK

1. FEJEZET

M10. Adatok megjelenítése, űrlapok kezelése és ellenőrzése Célkitűzés A modul befejezése után a következőket tudja elvégezni: – stílusok kezelése JavaScript -ből – űrlapelemek kezelése – űrlapellenőrzés

1.1. Adatok megjelenítése és a dokumentum módosítása A dokumentum betöltése közben lehetőség van ennek szerkezetét JavaScript-el módosítani. Sőt mi több, a teljes oldal törzsét is kigenerálhatjuk. Erre a document.write metódust használjuk. Az alábbi kód az első 100 páros számot írja ki. Előnye, hogy nem kell a száz számot begépeljük a HTMl kódba és könnyen módosíthatjuk a kiírt tartalmat. Első 100 páros szám: <script language="JavaScript" type="text/javascript"> for(i=0; i<100; i++) document.write( (i*2) + " "); A dokumentumot betöltése után is lehet módosítani. Ezt események lekezelésekor, időzítővel (setTimeout, clearTimeout) vagy periodikusan lefuttatott kóddal (setInterval, clearInterval) lehet megvalósítani. Minden olyan elem amelynek van tartalma (pl.
<span> , stb.) rendelkezik egy innerHTML tulajdonsággal, amely az elem tartalmát tárolja. Ennek módosítása a dokumentum szerkezetének módosítását idézi elő. Ahhoz, hogy egy elemet könnyen tudjuk azonosítani a DOM fában célszerű azt egyedi azonosítóval (id-vel) ellátni. 3

4

1. M10. ADATOK MEGJELENÍTÉSE, ŰRLAPOK KEZELÉSE ÉS ELLENŐRZÉSE

Példa periodikusan lefuttatott kódra: <script type="text/javascript"> cnt = 0; id = null; function startTicker() { id = setInterval(’ticker()’, 1000 ); } function stopTicker() { clearInterval( id ); } function ticker() { cnt++; document.getElementById( ’ticker_display’ ).innerHTML = "Az oldal " + cnt + " másodperce van megnyitva."; } <span id="ticker_display">Az oldal meg van nyitva.

<span onclick="javascript:stopTicker();">[leállít] Mikor a teljes oldal betöltődött (onload esemény) meghívjuk a startTicker függvényt. Ez beállítja, hogy a ticker függvény minden másodperc után hívódjon meg automatikusan. A ticker növeli a cnt számlálót, majd a ticker_display sorelem tartalmát átállítja. A [leállít]-ra kattintva a stopTicker-en keresztül a clearInterval függvénnyel kikapcsoljuk a ticker automatikus meghívását. Időzítő használata: <script type="text/javascript"> id = null; function startTimeout() { id = setTimeout(’stopTimeout()’, 5000 ); } function stopTimeout() { clearTimeout( id ); window.location = "http://www.ms.sapientia.ro"; }

1.2. STÍLUSELEMEK KEZELÉSE

5

Az oldal elköltözött.
Ha az új cím nem jön be 5s alatt, kattintson az alábbi linkre.
[ugrás az új címre] Mikor a teljes oldal betöltődött (onload esemény) meghívjuk a startTimeout függvényt. Ez beállítja, hogy a stopTimeout függvény pontosan 5 másodperc múlva hívódjon meg automatikusan. Ha az 5 másodperc letelte előtt a linkre kattintunk, akkor kikapcsoljuk az időzítőt és betöltjük a megadott oldalt. Ha nem kattintunk a linkre, akkor a megadott oldal 5 másodperc múlva automatikusan betöltődik.

1.2. Stíluselemek kezelése A DOM felépítése közben az oldalelemeknek, létrejön egy style adattagjuk, amely a HTML-ben megadott stílusattribútumokat fogja tartalmazni. Egy elem stílusattribútumai aktuális értékét az elem.style.stílusattribútum formában tudjuk elérni. var p = document.getElementById( ’stilusos_bekezdes’ ); p.style.color = "#00FF00"; Mivel az egyes stílusattribútumok nevében szerepel a - jel ez nem egyezhet meg a CSS-ben használt névvel, amely nem tartalmazhat - jelt. Hogy mégis egyértelmű legyenek a CSS-ben használt nevek JavaScript attribútumként való használata, a következő névátalakítási konvenciót állították fel: – a - nem jelenik meg a JavaScript-benne – Ha épp kitöröltünk egy - jelt akkor a következő betű nagybetűvé válik p.style.fontFamily = "sans-sherif"; p.style.backgroundColor = "#000000"; <script type="text/javascript"> function stilusAllitasa() { var p = document.getElementById( ’stilusos_bekezdes’ ); var tmp =

p.style.color;

p.style.color = p.style.backgroundColor; p.style.backgroundColor = tmp;

6


}
Ez egy stílusos bekezdés
<span onclick="javascript:stilusAllitasa();">Kattints ide

1.1. ábra. A bekezdés kattintás elött és után

Ha egy HTML elemnek be volt állítva a class tulajdonság, akkor a belőle létrejött DOM objektumnak is lesz egy className tulajdonsága, az osztály neve értékével. <script type="text/javascript"> function swapButton( obj, active ) { if( active ) obj.className = ’button_act’; else obj.className = ’button_inact’; } <style type="text/css" media="screen"> .button_inact { border: 1px solid #F4A817; background-color: #4C50A9; color: #F4A817; } .button_act { border: 1px solid #F4A817; background-color: #6078D8; cursor: pointer; color: #FFFFFF; } <span class="button_inact" onmouseout="javascript:swapButton( this, false );"

1.3. ŰRLAPOK KEZELÉSE ÉS ELLENŐRZÉSE

7

onmouseover="javascript:swapButton( this, true );" >Menüpont

1.2. ábra. A menüpont "inaktív" és "aktív" állapotban

1.3. Űrlapok kezelése és ellenőrzése Adott a következő űrlap:

Először magát az űrlapot kell kiválasszuk, a document.forms tömbön vagy az űrlap nevén keresztűl. document.forms[ 0 ] document.forms[ ’login_form’ ] document.login_form Az első alak feltételezi, hogy tudjuk az űrlap sorrendjét az oldalon, hisz ha több űrlapunk is van, akkor nem könnyő eldönteni, hogy milyen indexet használjuk. Ritkán használjuk ezt a formát, de ha csak egy űrlap van az oldalon, akkor így is kényelmes a kiválasztás. A második vagy harmadik alak használata intuitívabb. Ha megvan az űrlap objektum, akkor azon belül egy elemre hivatkozhatunk a nevével vagy az elements tömbön keresztül. var ln; ln = document.forms[ ’login_form’ ].elements[ ’loginname’ ]; ln = document.forms[ 0 ].elements[ ’loginname’ ]; ln = document.forms[ 0 ].loginname; ln = document.login_form.loginname; ln = document.login_form.elements[ ’loginname’ ]; 1.3.1. Beviteli mezők (input) 1.3.1.1. Egysoros szövegmező (text)

Ezek a típusú mező egy sor szöveg bevitelére alkalmas. Fontosabb tulajdonságai:

8


– maxLength: a maximálisan bevihető’ karakterek száma. Le lehet kérdezni vagy be lehet állítani. – readOnly: a mező csak olvasható-e. Értéke true vagy false. Le lehet kérdezni vagy be lehet állítani. A csak olvasható mezők el lesznek küldve az űrlappal, de nem lehet a tartalmukat módosítani. – disabled: a mező ki van kapcsolva. Értéke true vagy false. Le lehet kérdezni vagy be lehet állítani. A kikapcsolt mezők nem lesznek elküldve az űrlappal és nem is lehet a tartalmukat módosítani. – value: a mező tartalma. Le lehet kérdezni vagy be lehet állítani. 1.3.1.2. Választógomb (radio)

A választógombok csoportosítva jelennek meg az űrlapon. Ezt úgy érjük el, hogy ugyanazt a nevet adjuk a gomboknak. Egy csoporton belül csak egy gomb lehet egy adott pillanatban bekapcsolva és az űrlap elküldésekor csak ennek értéke fog elmenni. Fontosabb tulajdonságai: – checked: ki van-e jelölve a gomb. – disabled: a mező ki van kapcsolva. Értéke true vagy false. Le lehet kérdezni vagy be lehet állítani. A kikapcsolt mezők nem lesznek elküldve az űrlappal és nem is lehet őket ki vagy bekapcsolni. – value: a mező értéke. Le lehet kérdezni vagy be lehet állítani. Példa szövegmező és választógombok használatára. <script type="text/javascript"> function nemValtoztatas( obj ) { document.szemelyes_adatok.leanykori_nev.disabled = (obj.value == ’M’); if ( document.szemelyes_adatok.leanykori_nev.disabled ) document.szemelyes_adatok.leanykori_nev.value = ’’; }
név:

leanykori név:

nem: no ferfi


9

Mindkét választógomb kattintási eseményét a nemValtoztatas-el kezeljük le: onclick="javascript:nemValtoztatas( this ) Az obj paraméter mindig azt a választógombot fogja jelenteni, amely kiváltotta az eseményt, mivel a this van átadva. A leanykori_nev akkor lesz kikapcsolva, ha ferfi-t választottuk ki, mivel abban az esetben az obj value mezője ’M’ és a feltétel igaz lesz: document.szemelyes_adatok.leanykori_nev.disabled = (obj.value == ’M’); Ha épp kikapcsoltuk a leanykori_nev mezőt, akkor a tartalmát is üresítjük: if ( document.szemelyes_adatok.leanykori_nev.disabled ) document.szemelyes_adatok.leanykori_nev.value = ’’;

1.3. ábra. Választógomb és egysoros szövegmező

1.3.1.3. Jelölőnégyzet (checkbox)

A jelölőnégyzeteket olyankor használjuk, amikor egy adott állapot, adat jelenlétét vagy hiányát akarjuk bevinni. Fontosabb tulajdonságai: – checked: a mező ki van kapcsolva. Értéke true vagy false. Le lehet kérdezni vagy be lehet állítani. A kikapcsolt mezők nem lesznek elküldve az űrlappal és nem is lehet őket ki vagy bekapcsolni. – disabled: a mező ki van kapcsolva. Értéke true vagy false. Le lehet kérdezni vagy be lehet állítani. A kikapcsolt mezők nem lesznek elküldve az űrlappal és nem is lehet őket ki vagy bekapcsolni. – value: a mező értéke. Le lehet kérdezni vagy be lehet állítani.

10


<script type="text/javascript"> function ellenoriz() { if ( document.regisztracio.elfogadva.checked ) { if ( document.regisztracio.nev.value.length > 0 && document.regisztracio.felhasznalonev.value.length > 0 && document.regisztracio.jelszo.value.length > 0 ) return true; else alert( ’A * jelölte mezők kötelezőek!’ ); } else alert("Csak akkor léphet tovább, ha elfogadja a szabályzatot!"); return false; }
név*: felhasználónév*: jelszó*:
Elfogadom a szabályzatot:
Az űrlap elküldése előtt teszteljük, hogy el volt-e fogadva a szabályzat: if ( document.regisztracio.elfogadva.checked ) Ha igen akkor további ellenőrzéseket végzünk és ha mindent rendben találtunk továbbengedjük az űrlapot: if ( document.regisztracio.nev.value.length > 0 && document.regisztracio.felhasznalonev.value.length > 0 && document.regisztracio.jelszo.value.length > 0 ) return true; vagy hibaüzenetet jelenítünk meg és leállítjuk az űrlapot kiküldését.


11

alert( ’A * jelölte mezők kötelezőek!’ ); return false;

1.4. ábra. Jelölőnégyzet

1.3.1.4. Rejtett mezők (hidden)

A rejtett mezők grafikusan nem jelennek meg a böngészőben, viszont értékük bekerül az elküldött űrlapba. Így ezeken keresztül olyan változókat tudunk elküldeni és fogadni az űrlapból, amelyek valamilyen szekvenciát, előzőleg beküldött változókat vagy ellenőrző adatokat tartalmaznak Fontosabb tulajdonságai: – value: a mező értéke. Le lehet kérdezni vagy be lehet állítani. A következő példában egy rejtett mezővel jelöljük a keresési eredmény oldalszámát. <script type="text/javascript"> function ugrasOldalra( idx ) { document.search_form.index.value = idx; document.search_form.submit(); }
<< < 1 2 <strong> 3 4

12


>>
Egy linkre kattintva meghívódik az ugrasOldalra metódust, amely az index rejtett mező értékét átállítja document.search_form.index.value = idx; és elküldi az űrlapot.

1.5. ábra. Rejtett mező lapozáshoz

1.3.1.5. Állományfeltöltő mezők (file)

Ezeket a mezők állományok feltöltésére használjuk. Fontosabb tulajdonságai: – value: a mező értéke. Csak lekérdezni lehet. Ha szkriptből is lehetne állítani, akkor egy rosszindulatú oldallal bármilyen állományt fel lehetne tölteni a szervere, mint például a jelszavakat tartalmazó rendszerállományt. – accept: az elfogadott MIME típusokat tartalmazza. Le lehet kérdezni vagy be lehet állítani. Sajnos egyelőre egyik böngésző se veszi ezt figyelembe, de azért jó megadni. Ha mindenképp le akarjuk ellenőrizni, hogy milyen típusú állományt választott ki a felhasználó, akkor azt JavaScript-ből kell megoldjuk. <script type="text/javascript"> function ellenoriz() { var valid_extensions = ’|jpg|jpeg|gif|png|’; var ok = true; if ( document.upload_form.image.value.length == 0 ) ok = false; else { var extension = document.upload_form.image.value.match( /[.]{1}.{3,4}$/i ); if ( extension == null ) ok = false; else { extension = extension[ 0 ].substr( 1 ); ok = (valid_extensions.indexOf( ’|’ + extension + ’|’ )!=-1); } }


13

if ( !ok ) alert("Válasszon ki a következő MIME típusok\n" + egyikével rendelkező, állományt:\n" + document.upload_form.image.accept ); return ok; }
Elfogadott állományok: jpg, png, gif

Az űrlap elküldése előtt teszteljük, hogy helyes típusú állomány volt-e kiválasztva. Először azt ellenőrizzük, hogy egyáltalán volt-e kiválasztva valami: if ( document.upload_form.image.value.length == 0 ) Utána egy reguláris kifejezéssel levágjuk az állomány kiterjesztését: var extension = document.upload_form.image.value.match( /[.]{1}.{3,4}$/i ); extension = extension[ 0 ].substr( 1 ); Majd megnézzük, hogy ez szerepel-e a megengedett kiterjesztések között: ok = (valid_extensions.indexOf( ’|’ + extension + ’|’ )!=-1); 1.3.2. Többsoros szövegmező (textarea)

Ezzel a mezővel egy hosszabb esetleg többsoros szöveget lehet bevinni. Fontosabb tulajdonságai: – value: a mező tartalma. Le lehet kérdezni vagy be lehet állítani. – readOnly: a mező csak olvasható-e. Értéke true vagy false. Le lehet kérdezni vagy be lehet állítani. A csak olvasható mezők el lesznek küldve az űrlappal, de nem lehet a tartalmukat módosítani. – disabled: a mező ki van kapcsolva. Értéke true vagy false. Le lehet kérdezni vagy be lehet állítani. A kikapcsolt mezők nem lesznek elküldve az űrlappal és nem is lehet a tartalmukat módosítani.

14


1.6. ábra. Állományfeltöltés kiterjesztés ellenőrzéssel

Az input típusú beviteli mezőkkel ellentétben, a textarea-nak nem lehet megadni a maximum méretét. Éppen ezért, ha korlátozni akarjuk a karakterek többet, kell írjunk egy kis JavaScript kódot. A következő példában ezt valósítjuk meg. <script type="text/javascript"> message_max_chars = 100; function ellenoriz() { var txt = document.message_form.message.value; if ( txt.length > message_max_chars ) { if ( confirm( "Túl hosszú szöveget írt be!\n" + "OK: szöveg csonkítása és üzenet elküldése.\n"+ "Cancel: szöveg módosítása." ) ) document.message_form.message.value = txt.substr(0, message_max_chars); else return false; } return true; }
Az ön üzenete (maximum <script type="text/javascript"> document.write(message_max_chars); karakter):


15

Az űrlap elküldése előtt teszteljük, hogy a beírt karakterek száma nem-e túl nagy: var txt = document.message_form.message.value; if ( txt.length > message_max_chars ) Ha túl nagy, akkor választási lehetőséget adunk a felhasználónak: if ( confirm( "Túl hosszú szöveget írt be!\n" + "OK: szöveg csonkítása és üzenet elküldése.\n"+ "Cancel: szöveg módosítása." ) ) – kijavítja és újraküldi az üzenetet (Cancel) return false;

– vagy elfogadja, hogy lecsonkítsuk és elküldjük (Ok). document.message_form.message.value = txt.substr(0, message_max_chars); ... return true;

1.7. ábra. A hosszellenőrzés textarea esetében

1.3.3. Válsztólista (select, option)

A select -el válsztólistát lehet létrehozni. Fontosabb tulajdonságai:

16


– disabled: a mező ki van kapcsolva. Értéke true vagy false. Le lehet kérdezni vagy be lehet állítani. A kikapcsolt mezők nem lesznek elküldve az rlappal és nem is lehet a tartalmukat módosítani. – selectedIndex: az éppen kiváltott listaelem indexe. Csak lekérdezni lehet. – length: az éppen kiváltott listaelem indexe. Csak lekérdezni lehet. – size: az egyszerre megjelenített listaelemek száma. Le lehet kérdezni vagy be lehet állítani. – multiple: az egy vagy több elem kiválasztását lehet vele beállítani. Le lehet kérdezni vagy be lehet állítani. Fontosabb metódusok: – add: opciót lehet vele hozzáadni a listához. – remove: A megadott inexű elemet törli a listából. Válsztólista példa: <script type="text/javascript"> var telepulesek = new Array(); telepulesek[ 0 ] = new Array(); telepulesek[ 1 ] = new Array( new Array( 1, ’Marosvásárhely’ ), new Array( 2, ’Segesvár’ ), new Array( 3, ’Radnót’ ) ); telepulesek[ 2 ] = new Array( new Array( 4, ’Kolozsvár’ ), new Array( 5, ’Torda’ ) ); telepulesek[ 3 ] = new Array( new Array( 6, ’Csíkszereda’ ) ); function ellenoriz() { if ( document.telepules_valasztas.megye.selectedIndex != 0 ) { if ( document.telepules_valasztas.telepules.selectedIndex!=0 ) { document.telepules_valasztas.submit(); return true; } else alert( ’Válasszon ki egy települest!’ ); }


17

else alert( ’Válasszon ki egy megyét!’ ); return false; } function loadTelepulesek( ) { var telepules = document.telepules_valasztas.telepules; var megye = document.telepules_valasztas.megye; while ( telepules.options.length > 1 ) telepules.remove( 1 ); var tlist=telepulesek[ megye.options[ megye.selectedIndex ].value ]; for( var i = 0; i < tlist.length; i++ ) { var o = document.createElement( ’option’ ); o.value = tlist[ i ][ 0 ]; o.text = tlist[ i ][ 1 ]; try { telepules.add( o, null ); } catch( exc ) { telepules.add( o ); } } }
megye: <select name="megye" onchange="javascript:loadTelepulesek();"> település: <select name="telepules">

18


1.4. Űrlapkezelés 1.4.1. Súgószöveg a beviteli mezőkben

Néha célszerű megadni valamilyen grafikus formában, hogy egy adott mezőbe milyen adatot kell a felhasználó beírjon. Ha ezt helyszűke miatt nem lehet a mező címkéje mellé beírni, akkor betehetjük magába a beviteli mezőbe is. Ebben az esetben két helyzetet kell megoldani: – az űrlap elküldésekor nem csak azt kell figyeljük hogy van-e valami beírva, hanem azt is hogy az különbözik a súgószövegtől – A felhasználó ne kelljen külön azzal foglalkozzon, hogy kitörölje a súgószöveget mikor be akar írni valamit. Az elsőt könnyű megoldani, mert csak két karakterláncot kell összehasonlítsunk és máris kiderül, hogy volt-e valamilyen hasznos adat bevíve. A második követelményt teljesíteni már nem ilyen triviális, de amint meglátjuk az is könnyű. Ha visszalapozunk a DOM eseményekhez, akkor láthatjuk, hogy a beviteli mezők esetén a fókusz megszerzése és elveszítése eseményt idéz elő. Így, mikor a mező megszerzi a fókuszt (Focus) és a benne levő érték pont a súgószöveg, akkor azt kitöröljük. Mikor a mező elveszíti a fókuszt (Blur) és a mező üres visszaírjuk a súgószöveget. <script language="JavaScript" type="text/javascript"> var default_text = "kifejezés"; function search() { var keyword = document.search_form.keyword.value; if ( keyword.length == 0 || keyword == default_text ) { alert( "Adjon meg egy kifejezést!" ); return false; } document.search_form.submit(); return true; } function focusKeyword() { if ( document.search_form.keyword.value == default_text ) document.search_form.keyword.value = ""; } function blurKeyword() { if ( document.search_form.keyword.value == "" ) document.search_form.keyword.value = default_text; }

1.4. ŰRLAPKEZELÉS

19

kifejezés: pontos kifejezés: bármelyik szó: mindeggyik szó:

1.8. ábra. onblur/onfocus: üres mező nincs fókusz, fókuszált üres mező, saját szöveg nincs fókusz

1.4.2. Eseménykezelő hozzárendelése kódból

Az eseménykezelőket leggyakrabban a HTML kódban rendeljük egy elemhez, de erre lehetőség van JavaScript kódból is. Az alábbi példában az ablak újraméretezését gátoljuk meg. Az onresize eseménykezelőt a resetWindowSize metódusunkra állítjuk. Így, ha a felhasználó újraméretezi a böngészőt, akkor automatikusan meghívódik ez a metódus amelyben visszaállítjuk az általunk preferált méretre. Az onload eseménykezelőt is a resetWindowSize-ra állítjuk, hogy az oldal betöltésekor állítódjon a megfelelő méretre a böngésző. <script language="JavaScript" type="text/javascript"> onresize=resetWindowSize; function resetWindowSize() { window.resizeTo(800, 600); }

20


1.4.3. Összes jelölőnégyzet kitöltése

Az űrlapok könnyen kezelhetők kell legyenek. Ezért ajánlatos minél több kényelmi funkciót bevinni, de vigyázni kell, nehogy túlzsúfoljuk az oldalt. Egy ilyen funkció az összes jelölőnégyzet kitöltése. Tegyük fel, hogy egy webes emailklienst írunk. Az Inbox-ra kattintva megjelenik a legfrissebb 10 levél feladója, dátuma és témája, valamint mindegyik mellett egy jelölőnégyzet. A felhasználónak lehetősége van kiválasztani egy vagy több emailt majd egy műveletet (törlés, áthelyezés más mappába, stb.) végrehajtani ezekkel. Arra az esetre, mikor a felhasználó az összes levelet be akarja jelölni, célszerű egy olyan jelölőnégyzetet beiktatni amelyre kattintva ezt egyből el tudja végezni. Az alábbi kód ezt valósítja meg. <script language="JavaScript" type="text/javascript"> function selectAllEmails() { var emails = document.email_list[ ’emails[]’ ]; for(var i = 0; i < emails.length; i++ ) emails[i].checked=document.email_list.all_emails.checked; } function setAllEmailsStatus( chechbox ) { if ( chechbox.checked ) { var emails = document.email_list[ ’emails[]’ ]; document.email_list.all_emails.checked = true; for(var i = 0; i < emails.length; i++ ) if ( !emails[ i ].checked ) { document.email_list.all_emails.checked = false; break; } } else document.email_list.all_emails.checked = false; }

email 1
email 2
email 3

1.4. ŰRLAPKEZELÉS

1.9. ábra. összes jelölőnégyzet kezelése: mind, egyik se, néhány

21

M10. Adatok megjelenítése, űrlapok kezelése és ellenőrzése

Recommend Documents