diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
| commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
| tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/hu | |
| parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
| download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip | |
initial commit
Diffstat (limited to 'files/hu')
98 files changed, 14939 insertions, 0 deletions
diff --git a/files/hu/_redirects.txt b/files/hu/_redirects.txt new file mode 100644 index 0000000000..2e75df04e5 --- /dev/null +++ b/files/hu/_redirects.txt @@ -0,0 +1,14 @@ +# FROM-URL TO-URL +/hu/docs/A_Mozilla_fejleszt%C5%91i_centrum_tartalma /hu/docs/Mozilla_fejleszt%C5%91i_centrum_-_Tartalom +/hu/docs/Developer_Guide /hu/docs/Mozilla/Developer_guide +/hu/docs/Fajlok_hasznalata_webes_alkalmazasokban /hu/docs/Web/API/File/Fajlok_hasznalata_webes_alkalmazasokban +/hu/docs/HTML /hu/docs/Web/HTML +/hu/docs/HTML/Element /hu/docs/Web/HTML/Element +/hu/docs/HTML/Element/br /hu/docs/Web/HTML/Element/br +/hu/docs/JavaScript /hu/docs/Web/JavaScript +/hu/docs/JavaScript_1.5_k%C3%A9zik%C3%B6nyv /hu/docs/Web/JavaScript/Guide +/hu/docs/Kezd%C5%91lap /hu/docs/Web +/hu/docs/Kiterjeszt%C3%A9sek /hu/docs/Mozilla/Add-ons +/hu/docs/MDN/Getting_started /hu/docs/MDN/Contribute/Getting_started +/hu/docs/Web/JavaScript/JavaScript_1.5_k%C3%A9zik%C3%B6nyv /hu/docs/Web/JavaScript/Guide +/hu/docs/en /en-US/ diff --git a/files/hu/_wikihistory.json b/files/hu/_wikihistory.json new file mode 100644 index 0000000000..a768f67f81 --- /dev/null +++ b/files/hu/_wikihistory.json @@ -0,0 +1,566 @@ +{ + "Bevezetés_a_dokumentumobjektum-modellbe": { + "modified": "2019-03-23T23:46:33.058Z", + "contributors": [ + "teoli", + "Csörföly D" + ] + }, + "CSS": { + "modified": "2019-09-11T03:36:12.939Z", + "contributors": [ + "SphinxKnight", + "tetkosimi", + "teoli", + "CsörfölyD" + ] + }, + "CSS/CSS_Grid_Layout": { + "modified": "2019-03-18T21:34:45.745Z", + "contributors": [ + "kecskeskrisztian" + ] + }, + "CSS/font-weight": { + "modified": "2020-11-12T12:54:39.738Z", + "contributors": [ + "evasimonyi" + ] + }, + "CSS/text-decoration": { + "modified": "2020-11-12T10:40:09.368Z", + "contributors": [ + "evasimonyi" + ] + }, + "DOM": { + "modified": "2019-03-24T00:03:55.193Z", + "contributors": [ + "ethertank", + "fscholz", + "Csörföly D" + ] + }, + "DOM/HTMLBRElement": { + "modified": "2019-03-23T23:31:58.209Z", + "contributors": [ + "khalid32", + "urbalazs" + ] + }, + "Glossary": { + "modified": "2020-10-07T11:10:36.306Z", + "contributors": [ + "peterbe", + "SphinxKnight", + "Szelmat", + "wbamberg", + "david_ross" + ] + }, + "Glossary/AJAX": { + "modified": "2020-07-28T09:05:23.645Z", + "contributors": [ + "mmarci72" + ] + }, + "Glossary/API": { + "modified": "2020-03-23T13:25:05.816Z", + "contributors": [ + "Zoldszemesostoros" + ] + }, + "Glossary/Abstraction": { + "modified": "2020-07-27T18:42:18.284Z", + "contributors": [ + "mmarci72" + ] + }, + "Glossary/CSS": { + "modified": "2020-07-28T08:31:28.048Z", + "contributors": [ + "mmarci72" + ] + }, + "Glossary/Callback_function": { + "modified": "2020-11-18T15:57:46.953Z", + "contributors": [ + "evasimonyi" + ] + }, + "Glossary/Elso_osztalyu_funkciok": { + "modified": "2019-03-18T20:56:29.186Z", + "contributors": [ + "Szelmat" + ] + }, + "Glossary/JavaScript": { + "modified": "2020-11-16T15:08:28.654Z", + "contributors": [ + "meskobalazs", + "Szelmat" + ] + }, + "Glossary/Node.js": { + "modified": "2019-03-18T20:56:27.754Z", + "contributors": [ + "Szelmat" + ] + }, + "Glossary/bongeszo": { + "modified": "2020-07-28T08:32:30.144Z", + "contributors": [ + "mmarci72" + ] + }, + "Learn": { + "modified": "2020-11-16T14:42:59.018Z", + "contributors": [ + "meskobalazs", + "Zoldszemesostoros", + "SphinxKnight", + "qcz", + "lacsaba", + "entriek" + ] + }, + "Learn/HTML": { + "modified": "2020-07-16T22:22:18.146Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/HTML/Bevezetes_a_HTML-be": { + "modified": "2020-07-16T22:22:48.153Z", + "contributors": [ + "tetkosimi" + ] + }, + "Learn/Ismerkedés_a_Világhálóval": { + "modified": "2020-07-29T16:23:02.755Z", + "contributors": [ + "szcsl" + ] + }, + "Learn/Ismerkedés_a_Világhálóval/Alapvető_programok_telepítése": { + "modified": "2020-07-31T12:06:30.955Z", + "contributors": [ + "szcsl" + ] + }, + "Learn/Ismerkedés_a_Világhálóval/Hogy_fog_kinézni_a_weboldalunk": { + "modified": "2020-08-02T13:33:58.088Z", + "contributors": [ + "szcsl" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:39.465Z", + "contributors": [ + "entriek" + ] + }, + "Learn/JavaScript/Első_lépések": { + "modified": "2020-07-16T22:29:51.271Z", + "contributors": [ + "Aioiui" + ] + }, + "Learn/Server-side": { + "modified": "2020-07-16T22:35:58.128Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "MDN": { + "modified": "2020-02-19T19:33:49.798Z", + "contributors": [ + "jswisher", + "SphinxKnight", + "wbamberg", + "meskobalazs", + "ziyunfei" + ] + }, + "MDN/Contribute": { + "modified": "2019-01-16T19:05:51.848Z", + "contributors": [ + "wbamberg", + "meskobalazs", + "Mars" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:11:57.281Z", + "contributors": [ + "chrisdavidmills", + "meskobalazs", + "nagyll92", + "wbamberg", + "hu-nemtom", + "bencelaszlo", + "misibacsi", + "zamcsaba" + ] + }, + "MDN/Contribute/Localize": { + "modified": "2019-01-16T22:09:06.657Z", + "contributors": [ + "wbamberg", + "meskobalazs", + "jswisher" + ] + }, + "MDN/Contribute/Localize/Oldalak_fordítása": { + "modified": "2019-12-17T21:18:30.022Z", + "contributors": [ + "wbamberg", + "meskobalazs" + ] + }, + "Mozilla": { + "modified": "2019-03-23T23:33:12.472Z", + "contributors": [ + "evilpie" + ] + }, + "Tools": { + "modified": "2020-07-16T22:44:15.072Z", + "contributors": [ + "SphinxKnight", + "kamryn12" + ] + }, + "Web": { + "modified": "2019-03-23T23:25:29.899Z", + "contributors": [ + "saboarpad", + "Rwin", + "barineveronika", + "csehferi70@gmail.com", + "teoli" + ] + }, + "Web/API": { + "modified": "2020-03-29T19:59:47.494Z", + "contributors": [ + "duduindo", + "teoli", + "Sheppy" + ] + }, + "Web/API/Document": { + "modified": "2020-10-15T22:28:55.605Z", + "contributors": [ + "sideshowbarker" + ] + }, + "Web/API/Document/createTextNode": { + "modified": "2020-10-15T22:28:37.188Z", + "contributors": [ + "sarkiroka" + ] + }, + "Web/API/Fetch_API": { + "modified": "2020-11-30T07:30:25.951Z", + "contributors": [ + "evasimonyi" + ] + }, + "Web/API/File": { + "modified": "2019-03-23T22:02:41.390Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/API/Geolocation": { + "modified": "2019-03-23T22:46:03.917Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/WebXR_Device_API": { + "modified": "2020-10-15T22:31:19.815Z", + "contributors": [ + "Peilei0313" + ] + }, + "Web/API/Window": { + "modified": "2020-10-15T22:20:56.772Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/API/Window.stop": { + "modified": "2019-03-23T23:25:32.999Z", + "contributors": [ + "jsx", + "mark_b" + ] + }, + "Web/API/Window/alert": { + "modified": "2020-10-15T22:20:45.271Z", + "contributors": [ + "sarkiroka" + ] + }, + "Web/API/Worker": { + "modified": "2019-03-23T22:21:12.416Z", + "contributors": [ + "Csucsu734" + ] + }, + "Web/API/XMLHttpRequest": { + "modified": "2020-10-15T21:58:25.775Z", + "contributors": [ + "dominicus-75", + "fscholz" + ] + }, + "Web/API/XMLHttpRequest/XMLHttpRequest_hasznalata": { + "modified": "2020-10-15T22:19:50.902Z", + "contributors": [ + "dominicus-75" + ] + }, + "Web/CSS/Tools": { + "modified": "2019-03-23T22:57:26.063Z", + "contributors": [ + "velvel53" + ] + }, + "Web/CSS/Tools/Border-radius_bemutato": { + "modified": "2019-03-23T22:57:32.009Z", + "contributors": [ + "nemesreviz" + ] + }, + "Web/Guide": { + "modified": "2019-03-23T23:16:53.049Z", + "contributors": [ + "Onsteroids" + ] + }, + "Web/Guide/API": { + "modified": "2019-09-11T09:42:54.699Z", + "contributors": [ + "SphinxKnight", + "Sheppy" + ] + }, + "Web/Guide/Grafika": { + "modified": "2019-05-08T07:13:14.821Z", + "contributors": [ + "tetkosimi" + ] + }, + "Web/HTML": { + "modified": "2019-05-09T07:19:07.882Z", + "contributors": [ + "tetkosimi", + "JLorand", + "teoli", + "dbs" + ] + }, + "Web/HTML/Element": { + "modified": "2019-03-23T23:31:53.992Z", + "contributors": [ + "teoli" + ] + }, + "Web/HTML/Element/article": { + "modified": "2020-10-15T21:59:45.091Z", + "contributors": [ + "parphis" + ] + }, + "Web/HTML/Element/br": { + "modified": "2020-03-29T20:04:13.246Z", + "contributors": [ + "duduindo", + "teoli", + "urbalazs" + ] + }, + "Web/HTML/Element/section": { + "modified": "2020-10-15T21:59:45.803Z", + "contributors": [ + "parphis" + ] + }, + "Web/JavaScript": { + "modified": "2019-03-18T20:56:29.622Z", + "contributors": [ + "Szelmat", + "pannisimai", + "tacsipacsi", + "entonibaba0720", + "bencelaszlo", + "szabopeterakos", + "Ferik355", + "teoli", + "fscholz", + "CsörfölyD" + ] + }, + "Web/JavaScript/Guide": { + "modified": "2020-03-12T19:37:34.357Z", + "contributors": [ + "teoli", + "Csörföly D", + "CsörfölyD" + ] + }, + "Web/JavaScript/Guide/Bevezetés": { + "modified": "2020-03-12T19:43:36.391Z", + "contributors": [ + "RMarcell" + ] + }, + "Web/JavaScript/Reference": { + "modified": "2020-11-19T10:10:24.248Z", + "contributors": [ + "Sealdolphin", + "tomuwhu", + "bencelaszlo", + "Minat" + ] + }, + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:47:09.844Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Errors/Bad_return_or_yield": { + "modified": "2020-03-23T13:33:05.843Z", + "contributors": [ + "Zoldszemesostoros", + "sanyoca" + ] + }, + "Web/JavaScript/Reference/Errors/Stmt_after_return": { + "modified": "2020-03-23T13:42:19.587Z", + "contributors": [ + "Zoldszemesostoros", + "sanyoca" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_token": { + "modified": "2020-03-12T19:47:09.248Z", + "contributors": [ + "dorionka" + ] + }, + "Web/JavaScript/Reference/Errors/Érvénytelen_típus": { + "modified": "2020-04-19T20:35:18.887Z", + "contributors": [ + "tacsipacsi", + "sanyoca" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-03-12T19:45:17.938Z", + "contributors": [ + "Abro" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2019-12-26T16:08:19.491Z", + "contributors": [ + "ferenczcsibiattila", + "kdex" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/keys": { + "modified": "2020-10-15T22:04:22.331Z", + "contributors": [ + "parphis" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/of": { + "modified": "2020-10-15T22:21:12.095Z", + "contributors": [ + "szilijanos" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/sort": { + "modified": "2019-09-04T07:17:17.546Z", + "contributors": [ + "krisz094", + "KissBalazs", + "chvik", + "sonny89", + "brncsk", + "LeFizzy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error": { + "modified": "2020-11-22T11:34:23.222Z", + "contributors": [ + "Sealdolphin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Függvény": { + "modified": "2020-11-16T15:30:24.183Z", + "contributors": [ + "meskobalazs", + "iamdue", + "copas2", + "dorionka" + ] + }, + "Web/JavaScript/Reference/Global_Objects/NaN": { + "modified": "2020-11-19T09:58:46.355Z", + "contributors": [ + "Sealdolphin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2020-10-15T22:17:15.870Z", + "contributors": [ + "Zoldszemesostoros", + "SphinxKnight", + "pfeihun", + "N3U2O" + ] + }, + "Web/JavaScript/Reference/Statements": { + "modified": "2020-03-12T19:41:42.255Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Statements/try...catch": { + "modified": "2020-10-15T22:00:49.343Z", + "contributors": [ + "Zoldszemesostoros", + "suckee86" + ] + }, + "Web/JavaScript/a_javascript_ujboli_bemutatasa": { + "modified": "2020-03-12T19:48:54.218Z", + "contributors": [ + "kisjoke91" + ] + }, + "Web/Reference": { + "modified": "2019-03-23T22:43:43.697Z", + "contributors": [ + "MR-AMIR" + ] + }, + "Web/Reference/API": { + "modified": "2019-03-23T22:43:40.626Z", + "contributors": [ + "barcai" + ] + }, + "WebSockets": { + "modified": "2019-03-23T22:56:13.956Z", + "contributors": [ + "EvanDotPro" + ] + } +}
\ No newline at end of file diff --git a/files/hu/archive/b2g_os/biztonság/index.html b/files/hu/archive/b2g_os/biztonság/index.html new file mode 100644 index 0000000000..e7ace850ae --- /dev/null +++ b/files/hu/archive/b2g_os/biztonság/index.html @@ -0,0 +1,63 @@ +--- +title: Firefox OS security +slug: Archive/B2G_OS/Biztonság +translation_of: Archive/B2G_OS/Security +--- +<p>The following articles cover security-related topics about Firefox OS. This includes overall security features as well as application security and how the install process is kept secure.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Firefox OS security documentation</h2> + <dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model" title="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model">The Firefox OS security model</a></dt> + <dd> + An overview of the Firefox OS security model.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security/System_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model">System security</a></dt> + <dd> + Details of security controls built-in to the FirefoxOS runtime.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security">Application security in Firefox OS</a></dt> + <dd> + An overview of how applications are made secure on Firefox OS.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Installing_and_updating_applications" title="/en-US/docs/Mozilla/Firefox_OS/Security/Installing_and_updating_applications">Securely installing and updating applications</a></dt> + <dd> + How Firefox OS securely installs and updates applications.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Software_permissions" title="/en-US/docs/Mozilla/Firefox_OS/Security/Software_permissions">Software permissions in Firefox OS</a></dt> + <dd> + A guide to what types of software have permission to perform various tasks on Firefox OS.</dd> + <dt> + <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Debugging_and_security_testing" title="/en-US/docs/Mozilla/Firefox_OS/Security/Debugging_and_security_testing#Marionette.3A_A_JavaScript_debugging_shell_for_Firefox_OS"><span style="display: none;"> </span>Debugging and security testing with Firefox OS</a></dt> + <dd> + This guide shows you the basic security testing steps, from opening a remote JavaScript debugger to setting up an intercepting HTTP(S) proxy against a desktop version of Firefox OS</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Getting help from the community</h2> + <p>If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!</p> + <ul> + <li>Consult the Boot to Gecko project forum: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}</li> + </ul> + <ul> + <li>Ask your question on Mozilla's Boot to Gecko IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li> + </ul> + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + <br> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related topics</h2> + <ul> + <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li> + <li><a href="/en-US/docs/Security" title="/en-US/docs/Security">Security</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> +<div id="cke_pastebin" style="position: absolute; top: 483px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> + <br> + Firefox OS</div> diff --git a/files/hu/archive/b2g_os/firefox_os_telepítése/index.html b/files/hu/archive/b2g_os/firefox_os_telepítése/index.html new file mode 100644 index 0000000000..49ffd2f528 --- /dev/null +++ b/files/hu/archive/b2g_os/firefox_os_telepítése/index.html @@ -0,0 +1,70 @@ +--- +title: A Firefox OS telepítése és +slug: Archive/B2G_OS/Firefox_OS_telepítése +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS +--- +<div class="summary"> + <p>Mivel a Firefox OS aktív fejlesztés alatt áll, az új verzió megjelenése előtt a legjobb módja a telepítésének egy olyan verzió, ami a jövőben frissíti magát az újabb változatra. Ez a cikk lépésről-lépésre leírja a Firefox OS (emulátorba, illetve kompatibilis eszközre) vagy a Gaia felhasználói felület (Firefox böngészőben) telepítését.</p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="A_Firefox_OS_letöltése_és_konfigurálása">A Firefox OS letöltése és konfigurálása</h2> + <dl> + <dt> + <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_overview">Firefox OS konfigurációs áttekintés</a></dt> + <dd> + A Firefox OS telepítése és konfigurálása sok időt igényel, az internet sebességének és a számítási teljesítménynek függvényében. Ez az oldal körvonalazza a konfiguráció lépéseit és céljait, hogy segítse a felhasználókat a folyamat során.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="Mozilla/Firefox_OS/Firefox OS build prerequisites">Firefox OS konfigurálási előfeltételek</a></dt> + <dd> + Lépések mielőtt először konfigurálná a Firefox OS-t.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing for your first B2G build">Felkészülés az első Firefox OS konfigurálására</a></dt> + <dd> + Mielőtt konfigurálja a Firefox OS-t, klónoznia kell a tárolót, és konfigurálni az ön telepítését. Ez a cikk elmagyarázza, hogyan kell csinálni.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Building" title="Mozilla/Firefox_OS/Building">Firefox OS konfigurálása</a></dt> + <dd> + Hogyan konfiguráljuk a Firefox OS-t.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Porting" title="/en-US/docs/Mozilla/Firefox_OS/Porting">Firefox OS áthelyezése</a></dt> + <dd> + Információk arról, hogyan helyezzük át a Firefox OS-t új eszközre.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="tag/B2G">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="A_Firefox_OS_ésvagy_Gaia_telepítése">A Firefox OS és/vagy Gaia telepítése</h2> + <dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Choosing_how_to_run_Gaia_or_B2G" title="Mozilla/Firefox_OS/Choosing how to run Gaia or B2G">A Firefox OS vagy Gaia futtatási módjának kiválasztása</a></dt> + <dd> + Használhatja a Gaia-t Firefox-ban, vagy a Firefox OS-t egy mobileszközön illetve PC-alapú szimulátorban. Ez az útmutató segít eldönteni, hogy melyik felel meg a legjobban az Ön igényeinek.</dd> + <dt> + <strong><a href="/en-US/docs/Mozilla/Firefox_OS/Using_Gaia_in_Firefox" title="Mozilla/Firefox_OS/Using Gaia in Firefox">A Gaia használata Firefox-ban</a></strong></dt> + <dd> + Gaia használatának módja egy asztali Firefox böngészőben.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="Mozilla/Firefox_OS/Using the B2G desktop client">A Firefox OS asztali kliens használata</a></dt> + <dd> + Útmutató Firefox OS asztali kliens futtatásához és használatához; ez szimulálja a Gaia környezetet egy asztali alkalmazáson keresztül. Ez pontosabb, mint a Gaia futtatása a Firefoxban, de nem olyan pontos, mint az emulátor.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="Mozilla/Firefox_OS/Using the B2G emulators">Firefox OS emulátorok használata</a></dt> + <dd> + Egy útmutatás a Firefox OS emulátorok konfigurálásához és használatához, és hogy mikor melyik emulátort kell használni.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Installing_on_a_mobile_device" title="Mozilla/Firefox_OS/Installing on a mobile device">Firefox OS telepítése mobileszközre</a></dt> + <dd> + Hogyan telepítsük a Firefox OS-t egy valódi mobileszközre.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Dual_boot_of_B2G_and_Android_on_SGS2" title="Mozilla/Firefox_OS/Dual boot of B2G and Android on SGS2">Firefox OS és Android használata egyszerre (egy SamsungGalaxyS2-n)</a></dt> + <dd> + Hogyan használjuk a Firefox OS-t és az Androidot egyszerre (egy Samsung Galaxy S2-n)</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/hu/archive/b2g_os/index.html b/files/hu/archive/b2g_os/index.html new file mode 100644 index 0000000000..ff622156a2 --- /dev/null +++ b/files/hu/archive/b2g_os/index.html @@ -0,0 +1,85 @@ +--- +title: B2G OS +slug: Archive/B2G_OS +translation_of: Archive/B2G_OS +--- +<p><strong>Firefox OS</strong> (rövidítve <strong>FxOS</strong>) egy új mobil operációs rendszer amit a Mozilla fejleszt. A Linux kernelen alapuló rendszer egy Gecko alapú futtató környezetet töltbe be, ami lehetővé teszi olyan alkalmazások futtatását amik teljes egészében <a href="/hu/docs/HTML" title="hu/docs/HTML">HTML</a>, <a href="/hu/docs/JavaScript" title="hu/docs/JavaScript">JavaScript</a>, és egyéb webes alkalmazás API-k segítségével íródtak.</p> + +<p>A Firefox OS jelenleg számos fejlesztés alatt áll; Folyamatosan azon dolgozunk hogy ön számára könnyebbé váljon a Gaia (alapértelmezett app csomag) használata, és elkészíthesse saját applikációit. Ehhez azonban sok ismeretre van szüksége a Firefox OS működéséről. Alább találhat hasznos leírásokat a Firefox OS-ra való fejlesztésről, tesztelésről, testreszabásról.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">A Firefox OS platform</h2> + + <dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Introduction" title="en-US/docs/Mozilla/Firefox_OS/Introduction">Bevezetés a Firefox OS-be</a></dt> + <dd>Bevezető információk a Firefox OS mivoltáról és működéséről.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips" title="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips">Hasznos tippek</a></dt> + <dd>Rövid tippek melyek megkönnyítik a Firefox OS használatát és fejlesztését.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform" title="/en-US/docs/Mozilla/Firefox_OS/Platform">Firefox OS platform kézikönyv</a></dt> + <dd>Teljes dokumentáció a Firefox OS platformról, magába foglalva a Gonk, Gaia, és egyébcsomagok használatát.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Build and install Firefox OS</a></dt> + <dd>This includes documentation for building and installing the platform onto devices, as well as building the simulator and emulators.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS">Hacking Firefox OS</a></dt> + <dd>Once you're used to the basic Firefox OS process, it's time to start hacking the OS, customizing your builds, getting things the way you think they should be! This section shows you how to get ahead.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting" title="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting">Troubleshooting</a></dt> + <dd>A guide to resolving common problems with Firefox OS.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide" title="/en-US/docs/Mozilla/Firefox_OS/Boot to Gecko developer phone guide">Firefox OS developer phone guide</a></dt> + <dd>A guide to the Firefox OS developer phones Mozilla provides to some developers. This guide also applies if someone installed Firefox OS on your phone for you.</dd> + </dl> + + <h2 class="Documentation" id="Documentation" name="Documentation">Firefox OS Alkalmazás Tervezés és fejlesztés</h2> + + <p>For up-to-date information on Firefox OS App design and development, you should consult our <a href="/en-US/docs/Web/Apps" title="/en-US/docs/Web/Apps">Open Web Apps documentation center</a>. Some other resources are listed below, but probably won't be for long, as they will be integrated into the main apps docs.</p> + + <dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Apps/Tips_and_techniques">Tips and techniques</a></dt> + <dd>An assortment of tips and tricks (as well as workarounds for problems) that our developers have suggested for you!</dd> + <dt><a href="https://marketplace.firefox.com/developers/" title="https://marketplace.firefox.com/developers/">Developer Hub</a></dt> + <dd>A collection of tools, tutorials, and services for Firefox OS app developers.</dd> + </dl> + + <dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="en-US/docs/Mozilla/Firefox_OS/Debugging">Debugging on Firefox OS</a></dt> + <dd>A guide to debugging both your mobile apps and Firefox OS itself.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Performance" title="/en-US/docs/Mozilla/Firefox_OS/Performance">Performance</a></dt> + <dd>Articles about optimizing Firefox OS applications.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Segítség kérése a közösségtől</h2> + + <p>If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!</p> + + <ul> + <li>Ask your question on Mozilla's Boot to Gecko IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li> + </ul> + + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Kapcsolódó TÉmák</h2> + + <ul> + <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li> + <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a></li> + <li><a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a></li> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> + </ul> + + <h2 class="Tools" id="Források">Források</h2> + + <ul> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Geeksphone_FAQ" title="/en-US/docs/Mozilla/Firefox_OS/Geeksphone_FAQ">Geeksphone FAQ</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/hu/archive/b2g_os/quickstart/az_elsö_appod/index.html b/files/hu/archive/b2g_os/quickstart/az_elsö_appod/index.html new file mode 100644 index 0000000000..92b5c36e72 --- /dev/null +++ b/files/hu/archive/b2g_os/quickstart/az_elsö_appod/index.html @@ -0,0 +1,261 @@ +--- +title: Az első appod +slug: Archive/B2G_OS/Quickstart/Az_elsö_appod +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +<article class="brush: js"> +<div class="summary"> +<p>A nyílt webes alkalmazások pontosan azt nyújtják a fejlesztőknek, amire évek óta vágynak: különböző kezelőfelületek egységes környezetét, amit kizárólag HTML, CSS és JavaScript alkalmazásoknak szántak — mindezt az első, nyílt webes felülettel, a Firefox OS-szel. Ez az útmutató egy gyors, alapszintű programozási és alkalmazásépítői instrukciót tartalmaz, hogy létrehozhasd a következő nagyszerű appot.</p> +</div> + +<p>Ha szeretnél minket és ezt az útmutatót követni, letöltheted a <a href="https://github.com/chrisdavidmills/mdn-app-template">gyors applikációkezdő mintánkat</a>. Tudj meg többet ennek tartalmáról, és olvasd el az <a href="/en-US/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#Apps_template">Alkalmazásminták</a> útmutatót (a programozói felületek és programnyelvek angol nyelvtudást igényelnek)</p> + +<h2 id="Az_alkalmazás_felépítése">Az alkalmazás felépítése</h2> + +<h3 id="Csomagolt_vs._Hostolt_alkalmazások">Csomagolt vs. Hostolt alkalmazások</h3> + +<p>A nyílt webes alkalmazásoknak két formájuk van: <code>csomagolt</code> and <code>hostolt</code>. A csomagolt appok alapvetően <code>zip</code> file-ok, melyek minden alkalmazáskiegészítőt tartalmaznak: HTML, CSS, JavaScript, képek, tanúsítványok, stb. A hostolt alkalmazások szerverről futnak, egy megadott domainen, akárcsak egy weboldal. Mindkét alkalmazástípus érvényes tanúsítványt igényel. Mikor eljön a pillanat, hogy feltöltsd az alkalmazásodat a Firefox Piactérre, akkor vagy ezt a zip file-t töltöd fel, vagy a hostolt applikációhoz mutató linket fogod megadni</p> + +<div style="width: 480px; margin: 0 auto;"> +<p>{{EmbedYouTube("Q7x-B13y33Q")}}</p> + +<div class="video-caption"> +<p>Készült a Treehouse társulás jóvoltából: <a class="button" href="http://teamtreehouse.com/?cid=1154">Lesd meg őket!</a></p> +</div> +</div> + +<p>Ezen útmutatón keresztül el fogod készíteni a hostolt alkalmazásodat, amely a te <code>localhost</code> címeden lesz elérhető. Amint az appod készen áll arra, hogy megoszthasd a Firefox Piactéren, eldöntheted, hogy csomagolva, vagy hostolva osztod meg.</p> + +<h3 id="App_Tanúsítványok">App Tanúsítványok</h3> + +<p>Minden Firefox appnak szüksége van egy manifest.webapp file-ra az alkalmazáson belül. A <a href="/en-US/docs/Web/Apps/Manifest"><code>manifest.webapp</code></a> file biztosítja a létszükségletű információkat az appról, úgy, mint verzó, név, leírás, ikon, hely, helyszíni láncolatok, domain, ahonnan az app telepíthető, és még sokminden. Csak a név és verziószám kötelező. A legegyszerűbb tanúsítvány (az alkalmazásmintán belül) a következőképpen néz ki:</p> + +<pre class="brush: js">{ + "version": "0.1", + "name": "Open Web App", + "description": "Your new awesome Open Web App", + "launch_path": "/app-template/index.html", + "icons": { + "16": "/app-template/app-icons/icon-16.png", + "48": "/app-template/app-icons/icon-48.png", + "128": "/app-template/app-icons/icon-128.png" + }, + "developer": { + "name": "Your Name", + "url": "http://yourawesomeapp.com" + }, + "locales": { + "es": { + "description": "Su nueva aplicación impresionante Open Web", + "developer": { + "url": "http://yourawesomeapp.com" + } + }, + "it": { + "description": "La tua nuova fantastica Open Web App", + "developer": { + "url": "http://yourawesomeapp.com" + } + } + }, + "default_locale": "en" +}</pre> + +<div style="width: 480px; margin: 0 auto;"> +<p>{{EmbedYouTube("dgAUgHQOm8M")}}</p> + +<div class="video-caption"> +<p>Készült a Treehouse társulás jóvoltából: <a class="button" href="http://teamtreehouse.com/?cid=1154">lESD MEG ŐKET!</a></p> +</div> +</div> + +<p> </p> + +<p>A kezdéshez egy alap tanúsítványra van szükséged. További részletekért olvasd el az <a href="/en-US/docs/Web/Apps/Manifest">Alkalmazástanúsítványt</a>.</p> + +<h2 id="App_Tervezés_Design">App Tervezés & Design</h2> + +<p>Az appok kinézete kiemelkedően fontossá vált, ahogy a képernyők felbontása egyre jobb színvonalat ért el. Noha az appok fő célterülete a telefonplatformokban van, mint például a Firefox OS, egyéb eszközöknek is lehet hozzáférésük. A <a href="//developer.mozilla.org/docs/CSS/Media_queries">CSS médium lista</a> lehetővé teszi, hogy különböző eszközök megjelenítéséhez igazodj, ahogy azt alábbi CSS példaváz mutatja:</p> + +<pre class="brush: css">/* The following are examples of different CSS media queries */ + +/* Basic desktop/screen width sniff */ +@media only screen and (min-width : 1224px) { + /* styles */ +} + +/* Traditional iPhone width */ +@media + only screen and (-webkit-min-device-pixel-ratio : 1.5), + only screen and (min-device-pixel-ratio : 1.5) { + /* styles */ +} + +/* Device settings at different orientations */ +@media screen and (orientation:portrait) { + /* styles */ +} +@media screen and (orientation:landscape) { + /* styles */ +}</pre> + +<p>Számos JavaScript és CSS keretrendszer elérhető, hogy segítsen a tervezésben és mobil app fejlesztésben (<a href="http://twitter.github.com/bootstrap">Bootstrap</a>, stb.) Válaszd azt, amelyik a legjobban illik a stílusodhoz.</p> + +<h2 id="Web_API-k">Web API-k</h2> + +<p>A JavaScript API-k (alkalmazásprogramozási felületek) legalább olyan gyorsan fejlődnek, mint maguk a készülékek. A Mozilla <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> kezdeményezés temérdek szabvány mobilvázlatot integrál a JavaScript API-kba. A támogatott eszközök listája elérhető a <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> oldalon. A legjobb gyakorlást a JavaScript eszközérzékelő biztosítja, ahogy azt itt mutatjuk:</p> + +<pre class="brush: js">// If this device supports the vibrate API... +if('vibrate' in navigator) { + // ... vibrate for a second + navigator.vibrate(1000); +}</pre> + +<p>A következő példában a <code><div> </code>megjelenítését módosítottuk a készülék töltöttségének függvényében:</p> + +<pre class="brush: java">// Create the battery indicator listeners +(function() { + var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery, + indicator, indicatorPercentage; + + if(battery) { + indicator = document.getElementById('indicator'), + indicatorPercentage = document.getElementById('indicator-percentage'); + + // Set listeners for changes + battery.addEventListener('chargingchange', updateBattery); + battery.addEventListener('levelchange', updateBattery); + + // Update immediately + updateBattery(); + } + + function updateBattery() { + // Update percentage width and text + var level = (battery.level * 100) + '%'; + indicatorPercentage.style.width = level; + indicatorPercentage.innerHTML = 'Battery: ' + level; + // Update charging status + indicator.className = battery.charging ? 'charging' : ''; + } +})();</pre> + +<p>A fenti kódmintában, amint megerősíted a <a href="https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery">Battery API</a> támogatottságot, további eseményfigyelőket adhatsz a <code>chargingchange</code> és a <code>levelchange</code> kódhoz, hogy frissíthesd az elemek megjelenítése. Próbáld meg hozzáadni a mintádhoz, és nézd meg magad a működését.</p> + +<p>Rendszeresen ellenőrizd a <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> oldalt, hogy naprakész legyél az API készülékstátuszokkal.</p> + +<h3 id="API_funkcionálisság_telepítése">API funkcionálisság telepítése</h3> + +<p>Az app kezdőmintánkban elhelyeztünk egy telepítőkapcsolót, amivel megtekintheted az appodat, mint egy mintaweboldalt, mintha az egy telepített alkalmazás lenne a Firefox OS-en. A gomb megjelenésében nincs semmi különös:</p> + +<pre class="brush: html"><button id="install-btn">Install app</button></pre> + +<p>A kapcsoló az API telepítő használatával is működtethető (lásd install.js):</p> + +<pre class="brush: js">var manifest_url = location.href + 'manifest.webapp'; + +function install(ev) { + ev.preventDefault(); + // define the manifest URL + // install the app + var installLocFind = navigator.mozApps.install(manifest_url); + installLocFind.onsuccess = function(data) { + // App is installed, do something + }; + installLocFind.onerror = function() { + // App wasn't installed, info is in + // installapp.error.name + alert(installLocFind.error.name); + }; +}; + +// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button. +var button = document.getElementById('install-btn'); + +var installCheck = navigator.mozApps.checkInstalled(manifest_url); + +installCheck.onsuccess = function() { + if(installCheck.result) { + button.style.display = "none"; + } else { + button.addEventListener('click', install, false); + }; +}; +</pre> + +<p>Összegezzük, mi is történik:</p> + +<ol> + <li>Kapunk egy hivatkozást a telepítőkapcsolóra, amit a <code>button </code>változó alatt tárolunk.</li> + <li>Eztuán a <code>navigator.mozApps.checkInstalled</code> kódot használjuk, hogy ellenőrizzük a tanúsítványban foglalt app (helyileg: <code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp)</code> telepítve van-e az eszközön. Ezt a teszt az <code>installCheck</code> változóban tárolódik.</li> + <li>Miután a teszt sikeresen lefut, létrehoz egy sikeres eseményt, ezáltal az <code>installCheck.onsuccess = function() { ... }</code> fut tovább.</li> + <li>Eztuán tesztet futtatunk az <code>installCheck.result</code> létezésére egy egyszerű <code>if</code> állítás használatával. Ha létezik, ezzel alátámasztva, hogy az app telepítve van, elrejtjük a kapcsolót, mivel ezután erre már nincs szükség.</li> + <li>Ha az app nincs telepítve, egy kattintásfigyelőt adunk a kapcsolóhoz, így az <code>install()</code> funkció fut, amikor arra kattintunk.</li> + <li>Mikor a gombra kattintunk, és az <code>install()</code> funkció fut, eltároljuk a tanúsítvány fájlt egy <code>manifest_url </code>változóban tároljuk, ezután telepítjük az appot a <code>navigator.mozApps.install(manifest_url) </code>használatával, eltárolva ezzel egy hivatkozást az <code>installLocFind</code> változóban. Észrevehetjük, hogy ez a telepítés sikeres és sikertelen eseményeket is létrehoz, így annak függvényében tudsz parancsokat futtatni, hogy a telepítés sikerült-e, vagy sem.</li> +</ol> + +<p>Feltehetőleg igazolni szeretnéd a <a href="/en-US/docs/Web/Apps/JavaScript_API">API teljesítési állapot</a>-ot, mikor először jutsz a telepíthető webalkalmazásokhoz.</p> + +<div class="note"> +<p>Megjegyzés: a telepíthető webalkalmazásokra az "egy app/egy eredet" szabály vonatkozik. Magyarul egy hostolt alkalmazás csak egy helyről származtatható. Ez a tesztelést kissé bonyolítja, de ez megkerülhető, például különbözü sub-domaineken keresztül, Firefox OS szimulátorral, vagy a telepítő működésének Firefox Aurora/Nightly-n keresztüli tesztelésével, amiken keresztül a webalkalmazásokat az asztalodra telepítheted. Olvasd el az <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">app tanúsítványok GYIK-et</a> további információért.</p> +</div> + +<h2 id="WebRT_API-k_(Engedély-alapú_API-k)">WebRT API-k (Engedély-alapú API-k)</h2> + +<p>Sok WebAPI létezik, amelyek ugyan elérhetők, de külön engedély kell egy-egy speciális tartalom eléréséhez. Az appok az engedélykérelmet a <code>manifest.webapp</code> file-ba regisztrálják, a következőképpen:</p> + +<pre class="brush: js">// New key in the manifest: "permissions" +// Request access to any number of APIs +// Here we request permissions to the systemXHR API +"permissions": { + "systemXHR": {} +}</pre> + +<p>Az engedély három szintje a következők:</p> + +<ul> + <li>Normál — API-k, melyek nem ígényelnek különleges elérési engedélyt.</li> + <li>Privilegizált — Ezek elérhetők a fejlesztőknek, hogy használják a saját appjukban, amíg feltüntetik az elérési hozzájárulást a tanúsítványban, és megbízható forráson keresztül terjesztik.</li> + <li>Igazolt — Azok az API-k, amik kritikus eszközfunkciókat használnak, legyen az például tárcsázó, vagy üzenetküldő szolgáltatás. Ezeket általában kívülálló fejlesztők nem használhatják</li> +</ul> + +<p>Az engedélyekről bővebben a <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">Csomagolt apptípusok</a> alatt olvashatsz. Itt többet megtudhatsz az engedélyköteles API-król, és hogy milyen engedélyre van szükséged, nézd meg az <a href="/en-US/docs/Web/Apps/App_permissions">App engedélyek </a>tájékoztatót.</p> + +<div class="note"> +<p>Fontos megjegyezni, hogy nem minden web API-t valósítottunk meg a Firefox OS szimulátoron belül.</p> +</div> + +<h2 id="Eszközök_és_tesztelés">Eszközök és tesztelés</h2> + +<p>A tesztelés rendkívül fontos, amikor az eszköztámogatásról van szó. Számos opció áll rendelkezésre a telepíthető webalkalmazások tesztelésére.</p> + +<h3 id="Firefox_OS_Szimulátor">Firefox OS Szimulátor</h3> + +<p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.</p> + +<h3 id="App_Manager">App Manager</h3> + +<p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.</p> + +<h3 id="Unit_Testing">Unit Testing</h3> + +<p>Unit tests are extremely valuable when testing on different devices and builds. jQuery's <a href="http://qunitjs.com">QUnit</a> is a popular client-side testing utility, but you can use any set of testing tools you'd like.</p> + +<h3 id="Installing_Firefox_OS_on_a_Device">Installing Firefox OS on a Device</h3> + +<p>Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a>.</p> + +<p>Dedicated Firefox OS developer preview devices are also available: read our <a href="https://marketplace.firefox.com/developers/dev_phone">Developer preview phone page</a> for more information.</p> + +<h2 id="App_benyújtása_és_terjesztése">App benyújtása és terjesztése</h2> + +<p>Once your app is complete, you can host it yourself like a standard web site or app (read <a href="/en-US/docs/Web/Apps/Publishing/Self-publishing_Apps">Self-publishing apps</a> for more information), or it can be <a href="https://marketplace.firefox.com/developers/submit/app/manifest">submitted</a> to the <a href="https://marketplace.firefox.com">Firefox Marketplace</a>. Your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.</p> + +<h3 id="More_Marketplace_Listing_Information">More Marketplace & Listing Information</h3> + +<ol> + <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an App to the Firefox OS Marketplace </a></li> + <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace Review Criteria </a></li> + <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false">App Submission Video Walkthrough </a></li> +</ol> +</article> diff --git a/files/hu/archive/b2g_os/quickstart/index.html b/files/hu/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..ebe1f7c220 --- /dev/null +++ b/files/hu/archive/b2g_os/quickstart/index.html @@ -0,0 +1,49 @@ +--- +title: Build +slug: Archive/B2G_OS/Quickstart +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +<div class="summary"> + <p>Quickstart information on coding open web apps.</p> +</div> +<dl> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></dt> + <dd> + What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></dt> + <dd> + This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></dt> + <dd> + An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduction to manifests</a></dt> + <dd> + An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></dt> + <dd> + If you're a web developer, how do open web apps differ from what you're used to? This article explains all.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></dt> + <dd> + If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></dt> + <dd> + This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">Payments</a></dt> + <dd> + How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/App_tools">App tools</a></dt> + <dd> + Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.</dd> +</dl> diff --git a/files/hu/archive/b2g_os/releases/2.0/index.html b/files/hu/archive/b2g_os/releases/2.0/index.html new file mode 100644 index 0000000000..752d0cb316 --- /dev/null +++ b/files/hu/archive/b2g_os/releases/2.0/index.html @@ -0,0 +1,112 @@ +--- +title: Firefox OS 2.0 for developers +slug: Archive/B2G_OS/Releases/2.0 +translation_of: Archive/B2G_OS/Releases/2.0 +--- +<div class="summary"> +<p>This page details the developer features newly implemented in Gecko that are specific to Firefox OS 2.0.</p> +</div> + +<div class="note"> +<p>Firefox OS 2.0's Gecko component is based on Firefox 31/32.</p> +</div> + +<h2 id="New_product_features">New product features</h2> + +<p>This section provides a summary of the new features available in Firefox OS 2.0. For more details on specific platform changes (API additions, etc.), see the <a href="#Platform_additions_in_detail">Platform additions in detail</a> section.</p> + +<dl> + <dt>NFC</dt> + <dd><span class="author-g-x59co88jbi1y2uah b i">This release includes support for device-to-device content sharing support with NFC <span class="author-g-x59co88jbi1y2uah b i">(Near Field Communication)</span>. You can pair your device with another, then <a href="/en-US/docs/Web/API/NFC_API/Using_the_NFC_API#The_P2P_Sharing_UI">swipe to share</a> your contacts, media, or favorite URLs with others.</span></dd> + <dt>Telephony</dt> + <dd><span class="author-g-x59co88jbi1y2uah b i">Firefox OS now supports both IPv4 and IPv6 addresses</span> in the network manager.</dd> + <dt>Find My Device</dt> + <dd><span class="author-g-9k649z122zgh819oqmty">If you’ve lost your Firefox OS smartphone, Find My Device can help you find it (see the <span class="author-g-9k649z122zgh819oqmty url"><a href="http://find.firefox.com">http://find.firefox.com</a> website</span>). You can see it on a map, make it play a sound and have it display a message. You can also remotely lock it or delete your personal info.</span><span class="author-g-9k649z122zgh819oqmty"> To get started, create a Firefox Account (<em>Settings > Firefox Accounts</em> on your device) and enable Find My Device (<span class="author-g-9k649z122zgh819oqmty"><em>Settings > Find My Device</em></span>).</span></dd> + <dt>Media</dt> + <dd><span class="author-g-4iwx7wjdkbf2wjjv b">You can now create your own ringtones using your own music collection, or songs you download from the Web.</span></dd> + <dt>Camera</dt> + <dd><span class="author-g-4iwx7wjdkbf2wjjv b">The Camera app now supports various focus modes: Touch, Continuous Auto and Face tracking</span>.</dd> + <dt>Productivity</dt> + <dd>We've done a visual refresh of the Email, Calender, and Clock apps.</dd> + <dt>Homescreen</dt> + <dd><span class="author-g-4f4wmtjtu8s4fjq7 b i">Firefox OS 2.0 introduces a simpler vertical-scrolling homescreen with larger icons.</span></dd> + <dt>Edge-gesture app switching</dt> + <dd><span class="author-g-4f4wmtjtu8s4fjq7 b i">Edge gestures are now available for switching between apps (swipe your thumb from the left edge of the screen to the right and vice versa, to switch between multiple open apps.)</span></dd> +</dl> + +<h2 id="New_partner_features">New partner features</h2> + +<dl> + <dt>E.ME integration</dt> + <dd>E.ME integration provides direct access to web apps while configurable search providers can search the web at the same time.</dd> +</dl> + +<h2 id="New_DevTools_features">New DevTools features</h2> + +<p>The Firefox <a href="/en-US/docs/Tools">Developer Tools</a> have had a large number of features added in Firefox versions 31 and 32; these aren't Firefox OS-specific, but you can take advantage of them when debugging your Firefox OS apps through <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>. To find out more, read:</p> + +<ul> + <li><a href="https://hacks.mozilla.org/2014/05/editable-box-model-multiple-selection-sublime-text-keys-much-more-firefox-developer-tools-episode-31/">Firefox Developer Tools Episode 31</a></li> + <li><a href="https://hacks.mozilla.org/2014/06/toolbox-inspector-scratchpad-improvements-firefox-developer-tools-episode-32/">Firefox Developer Tools Episode 32</a></li> +</ul> + +<h2 id="Platform_additions_in_detail">Platform additions in detail</h2> + +<div class="note"> +<p><strong>Note</strong>: Our list here includes features most important to Firefox OS. For an expanded list of general Gecko feature additions (which are generally also present in Firefox OS 2.0), consult the <a href="/en-US/docs/Mozilla/Firefox/Releases/31" title="/en-US/docs/Mozilla/Firefox/Releases/31">Firefox 31 release notes for developers</a> and <a href="/en-US/docs/Mozilla/Firefox/Releases/32" title="/en-US/docs/Mozilla/Firefox/Releases/32">Firefox 32 release notes for developers</a>.</p> +</div> + +<h3 id="Web_API">Web API</h3> + +<ul> + <li>The parameters of the <a href="/hu/docs/Web/API/MozMobileNetworkInfo" title="The documentation about this has not yet been written; please consider contributing!"><code>MozMobileNetworkInfo</code></a> constructor have been made nullable (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1026727" title="FIXED: Unknown state is displayed instead of Connected during manual network selection">bug 1026727</a>).</li> + <li>WebRTC: <span class="author-g-41mtsa1hor7b107c i"><a href="/hu/docs/Web/API/MozGetUserMedia" title="The documentation about this has not yet been written; please consider contributing!"><code>mozGetUserMedia</code></a>, <a href="/hu/docs/Web/API/MozRTCPeerConnection" title="The documentation about this has not yet been written; please consider contributing!"><code>mozRTCPeerConnection</code></a>, and <a href="/hu/docs/Web/API/DataChannels" title="The documentation about this has not yet been written; please consider contributing!"><code>DataChannels</code></a> are supported by default</span>.</li> + <li>New constraints for <a href="https://developer.mozilla.org/en-US/docs/Glossary/WebRTC">WebRTC</a>'s <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUserMedia.getUserMedia" title="The documentation about this has not yet been written; please consider contributing!"><code>getUserMedia()</code></a>, <code>width</code>, <code>height</code>, and <code>framerate</code>, have been added, to limit stream dimensions and frame rate (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907352" title="FIXED: Implement width/height/framerate gUM constraints">bug 907352</a>): + <pre class="brush: json language-json"><code class="language-json"><span class="token punctuation">{</span> + mandatory<span class="token punctuation">:</span> <span class="token punctuation">{</span> + width<span class="token punctuation">:</span> <span class="token punctuation">{</span> min<span class="token punctuation">:</span> <span class="token number">640</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + height<span class="token punctuation">:</span> <span class="token punctuation">{</span> min<span class="token punctuation">:</span> <span class="token number">480</span> <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + optional<span class="token punctuation">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">650</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token punctuation">{</span> min<span class="token punctuation">:</span> <span class="token number">650</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> frameRate<span class="token punctuation">:</span> <span class="token number">60</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token punctuation">{</span> max<span class="token punctuation">:</span> <span class="token number">800</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span> +<span class="token punctuation">}</span></code></pre> + </li> + <li>RTSP streaming support is now available (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=929372" title="FIXED: [RTSP][User Story]Support basic RTSP streaming function.">bug 929372</a>).</li> + <li>The Resource Statistics API is implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=951976" title="FIXED: API for Resource Statistics">bug 951976</a>).</li> + <li>The Resource Timing API is implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=822480" title="FIXED: Add in the Resource Timing API">bug 822480</a>).</li> + <li>fastSeek API is now available for media elements (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=778077" title="FIXED: Implement fastSeek API on media elements (and switch the built-in controls over to it)">bug 778077</a>).</li> + <li><span class="author-g-41mtsa1hor7b107c i">The <a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a> is now exposed to Firefox OS (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=960426" title="FIXED: Support Network Information API in Firefox OS">bug 960426</a>).</span></li> + <li><span class="author-g-41mtsa1hor7b107c i"><span class="author-g-41mtsa1hor7b107c i">The Wifi capabilities of the device can now be returned using <code>WifiManager.getCapabilities()</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1002314" title="FIXED: [B2G]To have a webapi providing WIFI capabilities of device">bug 1002314</a>).</span></span></li> + <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.vibrate" title="The Navigator.vibrate() method pulses the vibration hardware on the device, if such hardware exists. If the device doesn't support vibration, this method has no effect. If a vibration pattern is already in progress when this method is called, the previous pattern is halted and the new one begins instead."><code>Navigator.vibrate()</code></a> method behavior has been adapted to the latest specification: too long vibrations are now truncated (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1014581" title="FIXED: Update Vibration API to conform to latest W3C spec">bug 1014581</a>).</li> + <li><span class="author-g-41mtsa1hor7b107c i">The <a href="/en-US/docs/Web/API/Device_Storage_API">Device Storage API</a> now has mount and unmount capabilities (privileged) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=971612" title='FIXED: Implement "mount", "unmount" API for device storage'>bug 971612</a>).</span></li> + <li><span class="author-g-41mtsa1hor7b107c i"><span class="author-g-41mtsa1hor7b107c i">The Feature Detection API is now available (privileged) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=983502" title="FIXED: Implement and expose the feature detection API to privileged apps">bug 983502</a>).</span></span></li> + <li> The <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/MSISDN_Verification_API">MSISDN Verification API</a> has been added (privileged) (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=988469" title="FIXED: MSISDN verification API for privileged apps">bug 988469</a>).</li> + <li>A new CameraControl API is now available (privileged) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=909542" title="FIXED: Camera Control API clean-up/streamline">bug 909542</a>).</li> + <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Data_Store_API">Data Store API</a> has been made available to <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a> (certified) (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=949325" title="FIXED: C++ wrapper to support DataStore API on the worker">bug 949325</a>).</li> + <li>The <a href="/en-US/docs/Web/API/Device_Storage_API">Device Storage API</a> now uses the File System API spec (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=910412" title="FIXED: Change DeviceStorage API to use FileSystem API spec">bug 910412</a>).</li> + <li><span class="author-g-41mtsa1hor7b107c i">The deprecated Audio Data API has been removed</span> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=927245" title="FIXED: Remove deprecated Audio Data API implementation">bug 927245</a>).</li> +</ul> + +<h3 id="CSS">CSS</h3> + +<ul> + <li><code>position:sticky</code> is now supported, and used in Gaia app layout (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=886646" title="FIXED: implement position:sticky">bug 886646</a>).</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow" title="The CSS flex-grow property specifies the flex grow factor of a flex item."><code>flex-grow</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink" title="The CSS flex-shrink property specifies the flex shrink factor of a flex item."><code>flex-shrink</code></a> can now to transition between zero and non-zero values (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=996945" title="FIXED: Allow flex-grow / flex-shrink to transition between zero and nonzero values">bug 996945</a>).</li> +</ul> + +<h3 id="Technology_support_improvements">Technology support improvements</h3> + +<ul> + <li>Firefox OS 2.0 now supports H.264 video hardware, allowing you to create and playback video encoded using this codec much more efficiently. See <a href="https://developer.mozilla.org/en-US/Firefox_OS/Media_support">Media support on Firefox OS</a> for details.</li> +</ul> + +<h2 id="Older_versions">Older versions</h2> + +<p></p><div class="multiColumnList"> +<ul> +<li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.4">Firefox OS 1.4 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.3">Firefox OS 1.3 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.2">Firefox OS 1.2 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.1">Firefox OS 1.1 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li></ul> +</div><p></p> diff --git a/files/hu/archive/b2g_os/releases/index.html b/files/hu/archive/b2g_os/releases/index.html new file mode 100644 index 0000000000..3edbcd4c75 --- /dev/null +++ b/files/hu/archive/b2g_os/releases/index.html @@ -0,0 +1,24 @@ +--- +title: Firefox OS developer release notes +slug: Archive/B2G_OS/Releases +tags: + - Firefox OS + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Releases +--- +<h2 id="Firefox_OS_release_notes_by_version">Firefox OS release notes by version</h2> +<p>This section provides articles covering each new release of Gaia and Gecko for Firefox OS, explaining what features were added and bugs eliminated in each update. There is also a linked summary table showing what APIs are supported by each version of Firefox OS.</p> +<div class="multiColumnList"> + {{ListSubpages("",1,0,1)}}</div> +<h2 id="Other_supporting_information">Other supporting information</h2> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/API_support_table">Firefox OS API support table</a></dt> + <dd> + Lists the different APIs available, and what versions of Firefox have support for them.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a></dt> + <dd> + Lists hosted, privileged and certified APIs, along with information on the permissions they need to have set in the App Manifest of your installable apps, such as the manifest permission name, app type required, description, access property, and default permission.</dd> +</dl> diff --git a/files/hu/archive/b2g_os/simulator/index.html b/files/hu/archive/b2g_os/simulator/index.html new file mode 100644 index 0000000000..96c17a6033 --- /dev/null +++ b/files/hu/archive/b2g_os/simulator/index.html @@ -0,0 +1,88 @@ +--- +title: Firefox OS Simulator +slug: Archive/B2G_OS/Simulator +translation_of: Archive/B2G_OS/Simulator +--- +<div class="note"> +<p>This page describes the Firefox OS Simulator for developers targeting Firefox OS 1.2 or later. If you're developing apps for Firefox OS 1.1, then you should check out the documentation for the <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator">Firefox OS 1.1 Simulator</a> instead.</p> +</div> + +<p><span style="line-height: 1.5;">The Firefox OS Simulator is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. This means that in many cases, you don't need a real device to test and debug your app. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></p> + +<p><span style="line-height: 1.5;">The Simulator is packaged and distributed as a Firefox add-on. Once you've downloaded it and installed it in Firefox, you can run it, push apps to it, and attach the developer tools to it using the <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a> tool or </span><a href="/docs/Tools/WebIDE"><span style="line-height: 1.5;">WebIDE</span></a><span style="line-height: 1.5;">.</span></p> + +<h2 id="Installation"><span style="line-height: 1.5;">Installation</span></h2> + +<p><span style="line-height: 1.5;">To install the simulator, use <a href="/docs/Tools/WebIDE#Adding_a_Simulator">WebIDE's Manage Simulators pane</a> (available as part of Firefox 33 and onwards). Multiple versions are available, and you are advised to install them all, for maximum flexibility.</span></p> + +<p>To start the Simulator, you choose it from WebIDE's runtime list. For more details, see the <a href="/docs/Tools/WebIDE#Selecting_a_runtime" style="font-size: 14px; font-weight: normal; line-height: 1.5;">instructions in the WebIDE documentation</a>. Once the Simulator's running, you can push apps to it and debug them using the WebIDE, just as you can with a real device.</p> + +<p>If you are using the <a href="/Firefox_OS/Using_the_App_Manager">App Manager</a> (an older tool available prior to the WebIDE), you can install a simulator via the following button:</p> + +<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; color: white; text-align: center; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; display: inline-block; background-color: rgb(129, 188, 46); white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.298039) 0px -1px 0px 0px inset;">Install Simulator</a></p> + +<h2 id="The_Simulator_UI" style="line-height: 30px;">The Simulator UI</h2> + +<p><span style="line-height: 22.00800132751465px;">The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels. </span><span style="line-height: 22.00800132751465px;">To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:</span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7173/simulator-1.2.png" style="width: 810px; height: 623px; display: block; margin: 0px auto;"></p> + +<p>The Simulator has two buttons in a toolbar at the bottom:</p> + +<ul> + <li>the button on the left takes you to the Home screen, or switches the Simulator off if you hold it down</li> + <li>the button on the right switches the Simulator between portrait and landscape orientation. This will generate the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/en-US/docs/WebAPI/Detecting_device_orientation">orientationchange</a> event.</li> +</ul> + +<h2 id="Limitations_of_the_Simulator">Limitations of the Simulator</h2> + +<p>Note that the Firefox OS Simulator isn't a perfect simulation.</p> + +<h3 id="Hardware_limitations">Hardware limitations</h3> + +<p>Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.</p> + +<h3 id="Audiovideo_codecs">Audio/video codecs</h3> + +<p>The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:</p> + +<ul> + <li>MP3</li> + <li>AAC</li> + <li>H.264 (MP4)</li> + <li>WebM</li> +</ul> + +<p>This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.</p> + +<h3 id="Unsupported_APIs"><a name="Unsupported-APIs">Unsupported APIs</a></h3> + +<p>Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:</p> + +<ul> + <li><a href="/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li> + <li><a href="/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li> + <li><a href="/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li> + <li><a href="/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li> + <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li> + <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li> + <li><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li> + <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li> +</ul> + +<h2 id="Getting_help"><a name="Simulator-help"></a>Getting help</h2> + +<p><span style="line-height: 1.5;">If you have a question, try asking us on the </span><a href="https://lists.mozilla.org/listinfo/dev-developer-tools" style="line-height: 1.5;">dev-developer-tools mailing list</a><span style="line-height: 1.5;"> or on </span><a href="irc://irc.mozilla.org/#devtools" style="line-height: 1.5;">#devtools on irc.mozilla.org</a><span style="line-height: 1.5;">.</span></p> + +<h3 id="How_to_enable_verbose_logging"><a name="Simulator-verbose-logging"></a>How to enable verbose logging</h3> + +<p>You can see messages logged from your app in the <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, which you can attach to your app using the <a href="/docs/Tools/WebIDE/Troubleshooting">WebIDE</a>. If you want to catch early messages happening during app startup, before the console gets connected and working, you can enable verbose logging in the Simulator.</p> + +<p>Visit about:config and <strong>create</strong> a new preference. The preference name is different for each version of the Simulator:</p> + +<ul> + <li>extensions.fxos_1_3_simulator@mozilla.org.sdk.console.logLevel for Firefox OS 1.3</li> + <li>extensions.fxos_1_2_simulator@mozilla.org.sdk.console.logLevel for Firefox OS 1.2</li> +</ul> + +<p>Set it to the string value "all", and disable, then reenable, the add-on in the Add-on Manager. Now extra messages about the Simulator's operation will appear in the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</p> diff --git a/files/hu/archive/b2g_os/teljesítmény/index.html b/files/hu/archive/b2g_os/teljesítmény/index.html new file mode 100644 index 0000000000..843627ac3c --- /dev/null +++ b/files/hu/archive/b2g_os/teljesítmény/index.html @@ -0,0 +1,146 @@ +--- +title: Teljesítmény +slug: Archive/B2G_OS/Teljesítmény +translation_of: Web/Performance/Fundamentals +--- +<p>Performance is a broad topic. This document gives a brief overview of what Firefox OS was designed and optimized for. It also introduces tools and processes developers can use to improve the performance of their code.</p> +<h2 id="What_is_performance">What is performance?</h2> +<p>Performance is entirely what is perceived by users. Users provide inputs to the system through touch, movement, and speech. In return, they perceive outputs in the form of visual, tactile, and auditory feedback. Performance is the quality of outputs in response to these inputs.</p> +<p>Code that is optimized for a target other than user-perceived performance (hereafter UPP) will lose in competition against code that is, all other things being equal. Users will prefer an application that's responsive and smooth while only processing, say, 1,000 database transactions a second, over another that processes 100,000,000 a second but is choppy and unresponsive.</p> +<p>Of course, that's not to say it's pointless to optimize metrics like the number of database transactions processed per second; it almost always is. The point is that these metrics are secondary, proximate to real UPP targets.</p> +<p>There are a few key performance metrics. The first is "responsiveness". Responsiveness is simply the speed with which the system provides outputs (possibly multiple ones) in response to user inputs. For example, when a user taps the screen, they expect the pixels to change in a certain way. The time elapsed between the "tap" gesture and the change in pixels is the responsiveness metric for that interaction.</p> +<p>Responsiveness sometimes involves multiple stages of feedback. Application launch is one particularly important case, which is discussed in more detail below.</p> +<p>Responsiveness is important for the simple reason that no one wants to be ignored. Every millisecond that elapses between the user providing input to the system and the system finally responding with output is a millisecond that the user is being ignored. Being ignored engenders frustration and anger.</p> +<p>The next key metric is "framerate": the rate at which the system changes pixels displayed to the user. This is a familiar concept; everyone prefers, say, games that display 60 frames per second over ones that display 10 frames per second, even if they can't explain why.</p> +<p>Framerate is important as a "quality of service" metric. Computer displays are designed to "fool" user's eyes, by delivering photons to them that mimic reality. For example, document readers display text by creating arrangements of display pixels that are designed to create photons that strike users' retinas in the same patterns as photons reflected off crisply-struck text on physical paper.</p> +<p>In reality, motion is "continuous" (as inferred by our brains anyway); it's not jerky and discrete, but rather "updates" smoothly. (Strobe lights are fun because they turn that upside down, starving our brains of inputs to create the illusion of discrete reality.) On a computer display, a higher framerate simply allows the display to imitate reality more faithfully.</p> +<p>(An interesting aside is that humans are generally not able to perceive differences in framerate above 60Hz. That's why most modern electronic displays are designed to refresh at that rate. A television probably looks choppy and unrealistic to a hummingbird, for example.)</p> +<p>Memory usage is another key metric. Unlike responsiveness and framerate, users don't directly perceive memory usage. However, memory usage is a close approximation to "user state". An ideal system would maintain 100% of user state at all times: all applications in the system would run simultaneously, and all applications would retain the state created by the user the last time the user interacted with the application. (Application state is stored in computer memory, which is why the approximation is close.)</p> +<p>An important corollary of this is contrary to popular belief: a well-designed system should not be optimized to maximize the amount of <strong>free</strong> memory. Memory is a resource, and free memory is a unused resource. Rather, a well-designed system should be optimized to <strong>use</strong> as much memory as possible in service of maintaining user state, while meeting other UPP goals.</p> +<p>Optimizing a system to use memory doesn't mean it should <strong>waste</strong> memory. Using more memory than is required to maintain some particular user state is wasting a resource that could be used to retain some other user state.</p> +<p>In reality, no system can maintain all user state. Intelligently allocating memory to user state is an important concern that's discussed in more detail below.</p> +<p>The final metric discussed here is power usage. Like memory usage, users don't directly perceive power usage. Users perceive power usage indirectly by their devices being able to maintain all other UPP goals for a longer duration. In service of meeting UPP goals, the system must use only the minimum amount of power required.</p> +<p>The remainder of this document will discuss performance in terms of these metrics.</p> +<h2 id="Platform_performance">Platform performance</h2> +<p>This section provides a brief overview of how Firefox OS contributes to performance generally, below the level of all applications. From a developer's or user's perspective, this answers the question, what does the platform do for you?</p> +<p>This section assumes the reader is familiar with the basic conceptual design of Firefox OS.</p> +<p>Firefox OS is optimized for applications built with web technologies, HTML/CSS/JavaScript and so on. Except for a handful of basic system services, all the code that runs in Firefox OS is web applications and the Gecko engine. Even the operating system window manager is written in HTML/CSS/JS.</p> +<p>Because the core operating system is built with the same web technologies that applications are built with, the performance of those technologies is critical. There's no "escape hatch". This greatly benefits developers because all the optimizations that enable a performant OS window manager, for example, are available to third-party applications as well. There's no "magic performance sauce" available only to preinstalled code.</p> +<p>The web platform provides many tools, some better suited for particular jobs than others. All application logic is written in JavaScript. For displaying graphics, developers can choose between the high-level declarative languages of HTML/CSS, or use low-level imperative interfaces offered by the canvas element.</p> +<p>HTML/CSS greatly increase productivity, sometimes at the cost of pixel-level control over rendering or a few frames per second. Text and images are reflowed automatically, the system theme is applied to UI elements by default, and "built-in" support is provided for some use cases developers may not think about initially, like different-resolution displays or right-to-left languages.</p> +<p>The canvas element offers a pixel buffer directly to developers to draw on. This gives pixel-level control over rendering and precise control of framerate to developers. But it comes at the expense of extra work needed to deal with multiple resolutions and orientations, right-to-left languages, and so forth. Developers draw to canvases using either a familiar 2D drawing API, or WebGL, a "close to the metal" binding that mostly follows OpenGL ES 2.0.</p> +<p>(Somewhere "in between" HTML/CSS and canvas is SVG, which is beyond the scope of this document.)</p> +<p>The Gecko JavaScript engine supports just-in-time (JIT) compilation. This enables application logic to perform comparably to other virtual machines, such as Java virtual machines, and in some cases close to "native code".</p> +<p>The graphics pipeline in Gecko underlying HTML/CSS and canvas is optimized in several ways. The HTML/CSS layout and graphics code in Gecko minimizes invalidation and repainting for common cases likes scrolling; developers get this support "for free". Pixel buffers painted by both Gecko "automatically" and applications to canvas "manually" minimize copies when being drawn to the display framebuffer. This is done by avoiding intermediate surfaces where they would create overhead (such as per-application "back buffers" in many other operating systems), and by using special memory for graphics buffers that can be directly accessed by the compositor hardware. Complex scenes are rendered using the device's GPU for maximum performance. To improve power usage, simple scenes are rendered using special dedicated composition hardware, while the GPU idles or turns off.</p> +<p>Fully static content is the exception rather than the rule for rich applications. Rich applications use dynamic content with animations, transitions, and other effects. Transitions and animations are particularly important to applications. Developers can use CSS to declare even complicated transitions and animations with a simple, high-level syntax. In turn, Gecko's graphics pipeline is highly optimized to render common animations efficiently. Common-case animations are "offloaded" to the system compositor, which can render them both performantly and power efficiently.</p> +<p>The runtime performance of applications is important, but just as important is their startup performance. Firefox OS improves startup experience in several ways.</p> +<p>Gecko is optimized to load a wide variety of content efficiently: the entire Web! Many years of improvements targeting this content, like parallel HTML parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc, translate just as well to improving web applications on Firefox OS. The content is written using the same technologies.</p> +<p>Each web application has its own instance of the Gecko rendering engine. Starting up this large, complicated engine is not free, and because of that, Firefox OS keeps around a preallocated copy of the engine in memory. When an app starts up, it takes over this preallocated copy and can immediately begin loading its application resources.</p> +<p>Applications "start" most quickly when they're already running. To this end, Firefox OS tries to keep as many applications running in the background as possible, while not regressing the user experience in foreground applications. This is implemented by intelligently prioritizing applications, and discarding background applications according to their priorities when memory is low. For example, it's more disruptive to a user if their currently-playing music player is discarded in the background, while their background calculator application keeps running. So, the music player is prioritized above the calculator automatically by Firefox OS and the calculator is discarded first when memory is low.</p> +<p>Firefox OS prevents applications that are running in the background from impacting the user experience of foreground applications through two mechanisms. First, timers created by background apps are "throttled" to run at a low frequency. Second, background applications are given a low CPU priority, so that foreground applications can get CPU time when they need it.</p> +<p>In addition to the above, Firefox OS includes several features designed to improve power usage that are common to mobile operating systems. The Firefox OS kernel will eagerly suspend the device for minimal power usage when the device is idle. Relatedly, ICs like the GPU, cellular radio, and Wifi radio are powered down when not being actively used. Firefox OS also takes advantage of hardware support for media decoding.</p> +<h2 id="Application_performance">Application performance</h2> +<p>This section is intended for developers asking the question: "how can I make my app fast"?</p> +<h3 id="Startup_performance">Startup performance</h3> +<p>Application startup is punctuated by three user-perceived events, generally speaking. The first is the application "first paint": the point at which sufficient application resources have been loaded to paint an initial frame. Second is when the application becomes interactive; for example, users are able to tap a button and the application responds. The final event is "full load", for example when all the user's albums have been listed in a music player.</p> +<p>The key to fast startup is to keep two things in mind: UPP is all that matters, and there's a "critical path" to each user-perceived event above. The critical path is exactly and only the code that must run to produce the event.</p> +<p>For example, to paint an application's first frame that comprises visually some HTML and CSS to style that HTML, (i) the HTML must be parsed; (ii) the DOM for that HTML must be constructed; (iii) resources like images in that part of the DOM have to be loaded and decoded; (iv) the CSS styles must be applied to that DOM; (v) the styled document has to be reflowed. Nowhere in that list is "load the JS file needed for an uncommon menu"; "fetch and decode the image for the High Scores list"; etc. Those work items are not on the critical path to painting the first frame.</p> +<p>It seems obvious, but to reach a user-perceived startup event more quickly, the main "trick" is to just not run code that's off the critical path. Alternatively, shorten the critical path by simplifying the scene.</p> +<p>The web platform is highly dynamic. JavaScript is a dynamically-typed language, and the web platform allows loading code, HTML, CSS, images, and other resources dynamically. These features can be used to defer work at startup that's off the critical path, by loading the unnecessary content "lazily" some time after startup.</p> +<p>Another problem that can delay startup is idle time, caused by waiting on responses to requests like database loads. To avoid this problem, applications can "front load" the work by issuing requests as early as possible in startup. Then when the data is needed later, it's hopefully already been fetched and the application doesn't need to wait.</p> +<p>Relatedly, it's important to separate network requests for dynamic data from static content that can be cached locally. Locally-cached resources can be loaded much more quickly than they can be fetched over high-latency and lower-bandwidth mobile networks. Network requests should never be on the critical path to early application startup. Caching resources locally is also the only way applications can be used when "offline". Firefox OS allows applications to cache resources by either being "packaged" in a compressed ZIP file or "hosted" through HTML5 appcache. How to choose between these options for a particular type of application is beyond the scope of this document, but in general application packages provide optimal load performance; appcache is slower.</p> +<p>A few other hints are listed below:</p> +<ul> + <li> + <p>Don't include scripts or stylesheets that don't participate in the critical path in your startup HTML file. Load them when needed.</p> + </li> + <li> + <p>Use the "defer" or "async" attribute on script tags needed at startup. This allows HTML parsers to process documents more efficiently.</p> + </li> + <li> + <p>Don't force the web engine to construct more DOM than is needed. A "hack" to do this simply is to leave your HTML in the document, but commented out.</p> + <pre><div id="foo"><!-- + <div> ... +--></div></pre> + </li> + <li> + <p>When that part of the document needs to be rendered, load the commented HTML.</p> + <pre>foo.innerHTML = foo.firstChild.nodeValue;</pre> + </li> + <li> + <p>Use Web Worker Threads for background processing. Only the application "main thread" can process user events and render primary UI. But a common use case is to fetch some data, process it, then update the UI. Use Worker Threads for this work and keep the main thread free for interacting with the user.</p> + </li> +</ul> +<h3 id="Framerate">Framerate</h3> +<p>The first important consideration for achieving high framerate is to select the right tool for the job. Mostly static content that's scrolled and infrequently animated is usually best implemented with HTML/CSS. Highly dynamic content like games that need tight control over rendering, and don't need theming, is often best implemented with canvas.</p> +<p>For content drawn using canvas, it's up to the developer to hit framerate targets: they have direct control over what's drawn.</p> +<p>For HTML/CSS content, the path to high framerate is to use the right primitives. Firefox OS is highly optimized to scroll arbitrary content; this is usually not a concern. But often trading some generality and quality for speed, such as using a static rendering instead of a CSS radial gradient, can push scrolling framerate over a target. CSS media queries allow these compromises to be restricted only to devices that need them.</p> +<p>Many applications use transitions or animations through "pages", or "panels". For example, the user taps a "Settings" button to transition into an application configuration screen, or a settings menu "pops up". Firefox OS is highly optimized to transition and animate scenes that</p> +<ul> + <li>Use pages/panels that are approximately the size of the device screen or smaller</li> + <li>Transition/animate the CSS transform and opacity properties</li> +</ul> +<p>Transitions and animations that adhere to these guidelines can be offloaded to the system compositor and run maximally efficiently.</p> +<p>To help diagnose low framerates, see the section below.</p> +<h3 id="Memory_and_power_usage">Memory and power usage</h3> +<p>Improving memory and power usage is a similar problem to speeding up startup: don't do unnecessary work; use efficient data structures; lazily load uncommonly-used UI resources; ensure resources like images are optimized well.</p> +<p>Modern CPUs can enter a lower-power mode when mostly idle. Applications that constantly fire timers or keep unnecessary animations running prevent CPUs from entering low-power mode. Power-efficient applications don't do that.</p> +<p>When applications are sent to the background, a visibilitychange event is fired on their documents. This event is a developer's friend; applications should listen for it. As mentioned above, Firefox OS tries to keep as many applications running simultaneously as it can, but does have to discard applications sometimes. Applications that drop as many loaded resources as possible when sent to the background will use less memory and be less likely to be discarded. This in turn means they will "start up" faster (by virtue of already being running) and have better UPP.</p> +<p>Similarly, applications should prepare for the case when they + <i> + are</i> + discarded. To improve user-perceived memory usage, that is to say, making the user feel that more of their state is being preserved, applications should save the state needed to return the current view if discarded. If the user is editing an entry, for example, the state of the edit should be saved when entering the background.</p> +<h2 id="Measuring_performance_and_diagnosing_problems">Measuring performance and diagnosing problems</h2> +<p>Before beginning to measure and diagnose performance problems, remember this:</p> +<div class="geckoVersionNote"> + <blockquote> + </blockquote> + <blockquote> + Must. Test. On. Device.</blockquote> + <blockquote> + </blockquote> +</div> +<p>A great strength of the web platform is that the same code written for "desktop" web browsers runs on Firefox OS on mobile devices. Developers should use this to improve productivity: develop on "desktops", in comfortable and productive environments, as much as possible.</p> +<p>But when it comes time to test performance, mobile devices must be used. Modern desktops can be more than 100x more powerful than mobile hardware. The lower-end the mobile hardware tested on, the better.</p> +<p>With that caveat, the sections below describe tools and processes for measuring and diagnosing performance issues.</p> +<h3 id="Measuring_performance">Measuring performance</h3> +<p>Firefox OS comes built-in with some convenient and easy-to-use tools that, when used properly, can be used to quickly measure performance. The first tool is the "framerate monitor". This can be enabled in the Firefox OS Settings application.</p> +<p>The framerate monitor continuously reports two numbers. The values reported are an average of recent results within a sliding window, meant to be "instantaneous" but fairly accurate. As such, both numbers are "guesses". The left number is the "composition rate": the estimated number of times per second Firefox OS is drawing frames to the hardware framebuffer. This is an estimate of the user-perceived framerate, and only an estimate. For example, the counter may report 60 compositions per second even if the screen is not changing. In that case the user-perceived framerate would be 0. However, when used with this caveat in mind and corroborated with other measurements, the monitor can be a useful and simple tool.</p> +<p><img alt="Screenshot of fps counter" src="http://people.mozilla.com/~cjones/mdn/enable-fps-counter.png" style="width: 320px; height: 480px;"></p> +<p>The rightmost number is the "layer transaction rate", the estimated number of times per second processes are repainting and notifying the compositor. This number is mostly useful for Gecko platform engineers, but it should be less than or equal to the composition rate number on the left.</p> +<p>Firefox OS also has a tool that can help measure startup time, specifically the "first paint" time described above. This "time-to-load" tool can be enabled using the Settings application. The value shown by the tool is the elapsed time between when the most recent application was launched, and an estimate of the first time that application painted its UI. This number only approximates the real "first paint" time, and in particular underestimates it. However, lowering this number almost always correlates to improvements in real startup time, so it can be useful to quickly measure optimization ideas.</p> +<p><img alt="Screenshot of enabling ttl" src="http://people.mozilla.com/~cjones/mdn/enable-ttl.png" style="width: 320px; height: 480px;"></p> +<p>For accurately measuring both startup times and responsiveness, a high-speed camera is indispensable. "High-speed" means that the camera can record 120 frames per second or above. The higher the capture rate, the more accurate the measurements that can be made. This may sound like exotic technology, but consumer models can be purchased for a few hundred US dollars.</p> +<p><a href="http://people.mozilla.com/~cjones/mdn/hs-example.webm" title="http://people.mozilla.com/~cjones/mdn/hs-example.webm">Link to example video of high-speed capture that I can't upload</a></p> +<p>The measuring process with these cameras is simple: record the action to be studied, and then play back the capture and count the number of frames that elapse between the input (say, a tap gesture) and the desired output (pixels changing in some way). Divide the number of counted frames by the capture rate, and the resulting number is the measured duration.</p> +<p>Mozilla built an automated tool called Eideticker which operates on the same principle as described above. The difference is that Eideticker uses synthetic user input events and HDMI capture to measure durations. The code is available and can be used with any device with an HDMI output.</p> +<p>Measuring power can be more difficult. It's possible to jury-rig measurement apparatus with a soldering iron, but a good approximation of power usage can be gathered by observing CPU load. Simple command-line tools like |top| allow monitoring CPU usage continuously.</p> +<p>In general, when measuring performance, don't be proud! "Primitive technology" like a stopwatch or logging, when used effectively, can provide eminently usable data.</p> +<h3 id="Diagnosing_performance_problems">Diagnosing performance problems</h3> +<p>If performance measurements show an application is below its targets, how can the underlying problem be diagnosed?</p> +<p>The first step of any performance work is to create a reproducible workload and reproducible measurement steps. Then gather baseline measurements, before any code changes are made. It seems obvious, but this is required to determine whether code changes actually improve performance! The measurement process selected isn't too important; what's important is that the process be (i) reproducible; (ii) realistic, in that it measures what users will perceive as closely as possible; (iii) precise as possible; (iv) accurate as possible. Even stopwatch timings can fit this spec.</p> +<p>Firefox OS includes two built-in tools for quickly diagnosing some performance issues. The first is a render mode called "paint flashing". In this mode, every time a region of the screen is painted by Gecko, Gecko blits a random translucent color over the painted region. Ideally, only parts of the screen that visually change between frames will "flash" with a new color. But sometimes more area than is needed is repainted, causing large areas to "flash". This symptom may indicate that application code is forcing too much of its scene to update. It may also indicate bugs in Gecko itself.</p> +<p><img alt="Enable paint flashing" src="http://people.mozilla.com/~cjones/mdn/enable-paint-flashing.png" style="width: 320px; height: 480px;"></p> +<p><img alt="Paint flashing after scrolling down from previous image" src="http://people.mozilla.com/~cjones/mdn/enable-paint-flashing-scroll-down.png" style="width: 320px; height: 480px;"></p> +<p>The second tool is called "animation logging", and can also be enabled in Settings. This tool tries to help developers understand why animations are not offloaded to the compositor to be run efficiently as possible. It reports "bugs" like trying to animate elements that are too large, or trying to animate CSS properties that can't be offloaded.</p> +<p><img alt="Enable animation logging" src="http://people.mozilla.com/~cjones/mdn/enable-log-animations.png" style="width: 320px; height: 480px;"></p> +<p><img alt="Start of animation not offloaded" src="http://people.mozilla.com/~cjones/mdn/enable-log-animations-1.png" style="width: 320px; height: 480px;"></p> +<pre>I/Gecko ( 5644): Performance warning: Async animation disabled because frame size (1280, 410) is bigger than the viewport (360, 518) [div with id 'views'] +</pre> +<p><img alt="End of animation not offloaded" src="http://people.mozilla.com/~cjones/mdn/enable-log-animations-2.png" style="width: 320px; height: 480px;"></p> +<div class="note"> + <p>A common pitfall is to animate left/top/right/bottom properties instead of using CSS transforms to achieve the same effect. For a variety of reasons, the semantics of transforms make them easier to offload, but left/top/right/bottom are much more difficult. Animation logging will report this.</p> +</div> +<p>These tools can help quickly assess a performance problem, but they often show only what developers should be "looking for": hints at deeper problems. When more information is required, the Gecko Profiler can be used. A full description of the profiler is beyond the scope of this document; see <a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">[here]</a>. Briefly, the profiler shows mixed JavaScript/C++ "samples" of what all Firefox OS processes are doing over a rolling time interval. Developers can use these profiles to see what their code and Gecko itself are doing. Warnings are built into the profiler UI for many common pitfalls like excessive garbage collection (caused by creating too many JS objects), and forcing "synchronous reflows". Sync reflows are bad because Gecko is optimized to do expensive work like reflows in big batches, when needed. Forced reflows throw off this "schedule", and can cause more work to be done than necessary.</p> +<p>Similarly, advanced users may wish to use a whole-system profiler like the linux |perf| tool. This is mostly useful for platform engineers, though.</p> +<p>As with measuring performance, don't be proud about tools used to diagnose it! A few well-placed Date.now() calls with logging can often provide a quick and accurate answer.</p> +<p>Finally, the only way to keep improving performance is to not regress it. The only way to not regress performance is to test it, preferably with automated tests. A full discussion of that topic is beyond the scope of this document, though.</p> +<h2 id="Paris_Firefox_OS_Performance_Optimization_Workshop_March_4_-_8_2013">Paris Firefox OS Performance & Optimization Workshop, March 4 - 8, 2013</h2> +<p>To illustrate these concepts here are some videos and slides from the Paris Workshop dedicated to performances and optimizations.</p> +<p>Part 1: Technical basics and more (Gabriele & Thomas)</p> +<ul> + <li>Video : <a href="https://docs.google.com/file/d/0ByB4v6HDNT-ZdHAtam5IdWpWWkE/edit?usp=sharing" title="https://docs.google.com/file/d/0ByB4v6HDNT-ZdHAtam5IdWpWWkE/edit?usp=sharing">Technical considerations</a></li> + <li>Slides : <a href="https://docs.google.com/file/d/0ByB4v6HDNT-ZNGRxS3A1X21tMjQ/edit?usp=sharing" title="https://docs.google.com/file/d/0ByB4v6HDNT-ZNGRxS3A1X21tMjQ/edit?usp=sharing">Presentation</a></li> +</ul> +<p>Part 2: <a href="https://docs.google.com/file/d/0ByB4v6HDNT-ZWFNkRGtyTHd5TUU/edit?usp=sharing" title="https://docs.google.com/file/d/0ByB4v6HDNT-ZWFNkRGtyTHd5TUU/edit?usp=sharing">Performances in a UX point of view</a> (Josh)</p> +<p>Part 3: <a href="https://docs.google.com/file/d/0ByB4v6HDNT-ZdUVadVBmeDlXaW8/edit?usp=sharing" title="https://docs.google.com/file/d/0ByB4v6HDNT-ZdUVadVBmeDlXaW8/edit?usp=sharing">Performances measurement & automation</a> (Julien & Anthony)</p> diff --git a/files/hu/archive/b2g_os/using_the_app_manager/index.html b/files/hu/archive/b2g_os/using_the_app_manager/index.html new file mode 100644 index 0000000000..b18aa26621 --- /dev/null +++ b/files/hu/archive/b2g_os/using_the_app_manager/index.html @@ -0,0 +1,281 @@ +--- +title: Using the App Manager +slug: Archive/B2G_OS/Using_the_App_Manager +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +<div class="summary"> +<p><span class="seoSummary">The App Manager is a tool for Firefox Desktop which provides a number of useful tools to help developers test, deploy and debug HTML5 web apps on Firefox OS phones & Simulator, directly from Firefox browser. This page documents how to use the App Manager.</span></p> + +<p>App Manager is available for Firefox OS 1.2 or later, lower versions are supported in <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator">Firefox OS 1.1 Simulator</a>. The App Manager is being replaced by the <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>, starting from Firefox 33. The WebIDE provides all the features of the App Manager and also features an editing environment to create and develop Firefox OS apps.</p> +</div> + +<p>{{EmbedYouTube("z1Bxg1UJVf0")}}</p> + +<p>The App Manager is composed of:</p> + +<ul> + <li>An <a href="#Apps_panel"><em>Apps panel</em></a>, which manages local apps (app source code located on your computer) and apps hosted externally, allowing you to package and install them on your device or simulator, and debug them using Toolboxes</li> + <li>A <a href="#Device_panel"><em>Device panel</em></a>, which displays information about the connected device including Firefox OS version installed, permissions required for using device APIs on the device, and apps installed</li> + <li><a href="/en-US/docs/Tools_Toolbox"><em>Toolboxes</em></a>, which are are sets of developer tools (web console, inspector, debugger, etc.) that can be connected to a running app via the Apps panel to perform debugging operations</li> +</ul> + +<h2 id="Quick_setup"><a name="Configuring_device">Quick setup</a></h2> + +<p>This section is designed to get you up and running as soon as possible; if you need some more detail please skip forward to the {{ anch("Device and system configuration") }} section and start reading from there. Also see the {{ anch("Troubleshooting") }} section for help if you are having trouble.</p> + +<ol> + <li>Make sure you have Firefox Desktop 26+ installed</li> + <li>Open the App Manager (in the URL bar, type <code>about:app-manager</code>, or go to <em>Tools > Web Developer > App Manager</em> in your Firefox menu.) This should appear in a new browser tab.</li> + <li>If you don't have a real device: + <ol> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the Firefox OS Simulator</a> add-on, then go back to the App Manager tab of your browser.</li> + <li>In App Manager's bottom toolbar, click on <em>Start Simulator</em>, then click on the name of the installed simulator, which should appear there.</li> + </ol> + </li> + <li>If you have a real device: + <ol> + <li>Make sure your device is running Firefox OS 1.2+</li> + <li>On Windows, make sure to install the drivers provided by your phone manufacturer</li> + <li>In the Settings of your device, disable Screen Lock (<code>Settings > Phone lock > <code>Lock Screen</code></code>) and enable Remote Debugging (<code>Settings > Device information > More information > Developer</code>)</li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper</a> add-on in Firefox Desktop</li> + <li>Connect your device to your machine via a USB cable</li> + <li>You should see the name of your device in the App Manager's bottom bar. Click on it.</li> + </ol> + </li> + <li>The bottom bar should show "Connected to: xxx"</li> + <li>Click on the <em>Apps</em> panel and add an app (packaged or hosted)</li> + <li>The <em>Refresh</em> button validates your app and installs it on the Simulator/Device</li> + <li>The <em>Debug</em> button connects the developer tools to the running app</li> + <li><strong>See the {{ anch("Troubleshooting") }} section for help if you are having trouble</strong></li> +</ol> + +<h2 id="Device_and_system_configuration">Device and system configuration</h2> + +<p>The first thing you'll need to do when using the App Manager is make sure your system and phone are set up correctly. This section will run through all the steps required.</p> + +<h3 id="Firefox_OS_1.2_required">Firefox OS 1.2+ required</h3> + +<p>Make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check which version of Firefox OS the device is runing, go to <code>Settings > Device Information > Software</code>.</p> + +<p>If you don't have a high enough version installed, depending on what phone you have you will need to either install an available nightly build of Firefox 1.2+, or configure and build it yourself from source.</p> + +<p>Builds available:</p> + +<ul> + <li><a href="http://downloads.geeksphone.com/">Geeksphone Keon/Peak builds</a> (to find out more about using these, read <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone</a>)</li> + <li>More to follow</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: To build your own Firefox OS 1.2+ distribution, follow the instructions located at <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>, starting with <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p> +</div> + +<h3 id="Remote_debugging">Remote debugging</h3> + +<p>Next, you need to enable remote debugging in Firefox OS. To do so, go to <code>Settings > Device information > More information > Developer</code> and check the Remote Debugging checkbox.</p> + +<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on">ADB or ADB helper</h3> + +<p>The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:</p> + +<ul> + <li> + <p>Let Firefox handle ADB (recommended). <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper add-on</a>, which makes the process easier. With this installed, there's no need to install the ADB, and no need to type the <code>adb forward</code> command: everything is handled by the add-on.</p> + <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;" title="https://addons.mozilla.org">Download ADB Helper Add-on</a></li> + <li>Use ADB manually. You need to have it installed on your computer: download and install <code>adb</code> as explained in <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing ADB</a>. You'll need to enable port forwarding by entering the following command into your terminal: + <pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + Note that you'll need to do this every time the phone is restarted or unplugged then re-plugged.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: There's no need to run this command if you installed the ADB Helper Add-on.</p> +</div> + +<h2 id="Connecting_your_device_to_the_App_Manager">Connecting your device to the App Manager</h2> + +<p>With all your configuration done, it's now time to plug your device into your computer and start the App Manager:</p> + +<ol> + <li>Plug the device into your computer via USB.</li> + <li>Disable Screen lock on your device by going to <code>Settings > Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li>Start the App Manager — In Firefox Desktop select the <code>Tools > Web Developer > App Manager</code> menu option, or type <code>about:app-manager</code> in the URL bar.</li> + <li>At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.</li> + <li>If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="display: block; height: 30px; margin: 0px auto; width: 600px;"></p> + +<div class="note"> +<p><strong>Note</strong>: The other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the {{anch("Enable port forwarding")}} section, above.</p> +</div> + +<h2 id="Using_a_Firefox_OS_Simulator_Add-on"><a name="Simulator">Using a Firefox OS Simulator Add-on</a></h2> + +<p>If you haven't got a real device available to use with App Manager, you can still try it out using a <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> Add-on. To start off, install the simulator with the following button (multiple versions are available; you are advised to install them all, for maximum flexibility):</p> + +<p><a class="download-button external ignore-external" href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" rel="noopener">Install Simulator</a></p> + + +<p>Once you've installed the simulator(s), you need to go to about:app-manager to see the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. At least three buttons will appear:</p> + +<ul> + <li>"Firefox OS 1.3", "Firefox OS 1.2" ... etc. (or something similar): the left-most buttons contain the names of the simulator versions you have installed. Click one to start a connection to a simulator.</li> + <li>"Add": the middle button navigates to the simulator install links in this article, so you can add more Simulators (Firefox OS 1.3, Firefox OS 1.4, etc.)</li> + <li>"Cancel": the right hand button cancels the connection.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: The Firefox OS 1.5 Simulator has been removed, as 1.5 was changed to 2.0. If you have the Firefox OS 1.5 Simulator installed, it won't automatically update to 2.0, so you should uninstall 1.5 and install 2.0 instead. The Firefox OS 2.0 simulator will then automatically update.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: The Firefox OS 1.2 Simulator has been removed, as no phones are likely to be released with version 1.2 installed — this version is therefore of limited value, and it makes more sense to spend your time debugging on other versions.</p> +</div> + +<h2 id="Running_custom_builds_in_the_App_Manager">Running custom builds in the App Manager</h2> + +<p>Note that you can run custom B2G Desktop and Gaia/Gecko builds in the App Manager via the simulator. Read <a href="/en-US/Firefox_OS/Running_custom_builds_in_the_App_Manager">Running custom Firefox OS/Gaia builds in the App Manager</a> for instructions on how to do this.</p> + +<h2 id="Apps_panel_Test_and_debug_Firefox_OS_apps"><a name="Apps_panel">Apps panel</a>: Test and debug Firefox OS apps</h2> + +<p>Now that everything is working, let's review the functionality available inside the App Manager, starting with the Apps panel. From here, you can import an existing app to push onto your device, for testing and debugging:</p> + +<ul> + <li>To install a locally stored app, click on the plus next to the "Add Packaged App" label and use the resulting file chooser dialog to select the directory your app is contained inside.</li> + <li>To install an externally hosted app, enter the absolute URL of the app's manifest file into the text field inside the "Add Hosted App" box, then press the plus button.</li> +</ul> + +<p>Information about your app should appear on the right hand side of the window, as seen below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Manifest_editor">Manifest editor</h3> + +<p>From Firefox 28 onwards, the Apps Panel includes an editor for the app manifest:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6613/apps-panel-fx-28.png" style="display: block; margin: 0px auto; width: 600px;"></p> + +<h3 id="Debugging">Debugging</h3> + +<p>Clicking on <em>"Update"</em> will update (install) the app on the device. Clicking on <em>"debug"</em> will connect a toolbox to the app, allowing you to debug its code directly:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<div class="note"> +<p>You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.</p> +</div> + +<p>Before Firefox 28, the tools are launched in a separate window. From Firefox 28 onwards, the tools are launched in a separate tab in the App Manager itself, alongside the Apps and Device tabs. The tab is given your app's icon so it's easy to find:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6615/toolbox-fx-28.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Errors">Errors</h3> + +<p>If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<p>You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.</p> + +<h2 id="Device_panel_2"><a name="Device_panel">Device panel</a></h2> + +<p>The <em>Device</em> tab displays information about the connected device. From the <em>"</em>Installed Apps<em>"</em> window, apps on the device can be started and debugged.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<div class="note"> +<p>Note: Certified Apps are not listed by default. <a href="#Debugging_Certified_Apps">See how to debug certified apps</a>.</p> +</div> + +<p><a name="permissions"></a>The "Permissions" window shows the required privileges for different <a href="/en-US/docs/WebAPI">Web APIs</a> on the current device:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<p>Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.</p> + +<h2 id="Debugging_Certified_Apps_2"><a name="Debugging_Certified_Apps">Debugging Certified Apps</a></h2> + +<p>Currently only devices running a development build of Firefox OS 1.2+ are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref <code>devtools.debugger.forbid-certified-apps</code> to <code>false</code> in your profile. To do this, follow the steps below:</p> + +<h3 id="Using_a_real_device">Using a real device</h3> + +<ol> + <li> + <p>On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:</p> + + <pre class="brush: bash">adb shell</pre> + + <p>Your prompt should change to <code>root@android</code>.</p> + </li> + <li> + <p>Next, stop B2G running using the following command:</p> + + <pre class="brush: bash">stop b2g</pre> + </li> + <li> + <p>Navigate to the following directory:</p> + + <pre>cd /data/b2g/mozilla/*.default/</pre> + </li> + <li> + <p>Here, update the prefs.js file with the following line:</p> + + <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js</pre> + </li> + <li> + <p>After you've finished editing and saving the file, start B2G again using the following command:</p> + + <pre class="brush: bash">start b2g</pre> + </li> + <li> + <p>Exit the android filesystem using the <code>exit</code> command; this will return you to your normal terminal prompt.</p> + </li> + <li> + <p>Next, reconnect to the App Manager and you should see certified apps appear for debugging.</p> + </li> +</ol> + +<h3 id="Using_the_B2G_desktop_client">Using the B2G desktop client</h3> + +<p class="brush: js">With the B2G desktop client, the preference is already defined in your profile in <code>greprefs.js</code>, located at the root of your B2G desktop client folder. Stop your B2G desktop client and edit the file to turn the <code>devtools.debugger.forbid-certified-apps</code> preference to <code>false</code>. Then restart the B2G client and connect the App Manager. You should now see all applications.</p> + +<div class="note"> +<p>Note: If you want to add this preference to your Gaia build you can run <code>make DEVICE_DEBUG=1 reset-gaia</code>.</p> +</div> + +<h2 id="Troubleshooting_2"><a name="Troubleshooting">Troubleshooting</a></h2> + +<p id="My_device_is_not_recognized">If the device is not recognized:</p> + +<ul> + <li>If clicking the button corresponding to your Firefox OS phone doesn't do anything, make sure you haven't connected an Android phone at the same time as the Firefox OS phone to your computer.</li> + <li>Read the <a href="#Configuring_device">Device and system configuration</a> section thoroughly, and make sure all the steps are followed:</li> + <li>Is your device running at least Firefox OS 1.2?</li> + <li>Don't see all the apps? Do you need to enable <a href="#Debugging_Certified_Apps">Certified Apps debugging</a>?</li> + <li>Did you enable "Remote Debugging" in the settings of your phone?</li> + <li>If you are not using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a>: + <ul> + <li>Did you successfully run the <code>adb forward</code> command?</li> + </ul> + </li> + <li>If you are using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a> and your device is not listed in the bottom toolbar: + <ul> + <li>If you use Linux, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to setup udev correctly</a></li> + <li>If you use Windows, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to install the appropriate drivers</a></li> + <li>You can also enable verbose logging to gather diagnostics: + <ul> + <li>Use about:config to set the pref "<span class="message"><span class="content"><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel"</span></span> to the string value "all"</li> + <li>Disable and re-enable the ADB Helper add-on from the add-ons manager, or restart Firefox</li> + <li>Open the App Manager again</li> + <li>In the <a href="/docs/Tools/Browser_Console">Browser Console</a>, you should now see additional output lines that mention "adbhelper"</li> + <li>If you see them but aren't sure what they mean, stop by the <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools room on IRC</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g_1_1_hd=---&cf_status_b2g_1_2=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox26=---&cf_status_firefox27=---&cf_status_firefox_esr17=---&cf_status_firefox_esr24=---&cf_tracking_b2g18=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox26=---&cf_tracking_firefox27=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_esr24=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Developer%20Tools%3A%20App%20Manager&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-803=X&flag_type-809=X&flag_type-825=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Firefox&qa_contact=developer.tools%40firefox.bugs&rep_platform=x86&requestee_type-203=&requestee_type-41=&requestee_type-5=&requestee_type-607=&requestee_type-748=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=&status_whiteboard=&target_milestone=---&version=Trunk">file a bug</a> with the log output</li> + </ul> + </li> + </ul> + </li> + <li>See <strong>"???????"</strong> instead of the device name on Linux? You have permissions issues. <a href="http://developer.android.com/tools/device.html#setting-up">Make sure to setup udev correctly</a>.</li> + <li>Is your phone screen unlocked?</li> + <li>If the command "adb devices" shows no entries even though the phone is connected and unlocked, you may have to <a href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li> +</ul> + +<p>Can't connect your device to the App Manager or start the simulator? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">Let us know</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g_1_1_hd=---&cf_status_b2g_1_2=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox26=---&cf_status_firefox27=---&cf_status_firefox_esr17=---&cf_status_firefox_esr24=---&cf_tracking_b2g18=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox26=---&cf_tracking_firefox27=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_esr24=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Developer%20Tools%3A%20App%20Manager&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-803=X&flag_type-809=X&flag_type-825=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Firefox&qa_contact=developer.tools%40firefox.bugs&rep_platform=x86&requestee_type-203=&requestee_type-41=&requestee_type-5=&requestee_type-607=&requestee_type-748=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=&status_whiteboard=&target_milestone=---&version=Trunk">file a bug</a>. and</p> diff --git a/files/hu/archive/index.html b/files/hu/archive/index.html new file mode 100644 index 0000000000..0b020071da --- /dev/null +++ b/files/hu/archive/index.html @@ -0,0 +1,20 @@ +--- +title: Archive of obsolete content +slug: Archive +translation_of: Archive +--- +<p>(hu translation)</p> + +<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p> + +<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p> + +<div class="note"> +<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p> +</div> + +<p>{{SubpagesWithSummaries}}</p> + +<h2 id="Subnav">Subnav</h2> + +<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p> diff --git a/files/hu/bevezetés_a_dokumentumobjektum-modellbe/index.html b/files/hu/bevezetés_a_dokumentumobjektum-modellbe/index.html new file mode 100644 index 0000000000..62215dd5d8 --- /dev/null +++ b/files/hu/bevezetés_a_dokumentumobjektum-modellbe/index.html @@ -0,0 +1,18 @@ +--- +title: Bevezetés a dokumentumobjektum-modellbe +slug: Bevezetés_a_dokumentumobjektum-modellbe +tags: + - DOM + - minden_kategória +translation_of: Web/API/Document_Object_Model +--- +<h3 id="Mi_a_DOM.3F" name="Mi_a_DOM.3F">Mi a DOM?</h3> +<p>A <a href="hu/DOM">Dokumentumobjektum-modell</a> (DOM) egy API <a href="hu/HTML">HTML</a> és <a href="hu/XML">XML</a> dokumentumokhoz. A dokumentum szerkezetét modellezi és lehetővé teszi annak tartalmi és vizulális változtatását. Lényegében összeköttetést képez a weblapok és a script- vagy programozási nyelvek között.</p> +<p>Minden tulajdonságot, metódust és eseményt, ami a webfejlesztő számára rendelkezésre áll a weboldalak szerkesztése és változtatása során, <a href="hu/Gecko_DOM_referencia">objektumokba</a> rendszerez. (pl. a document objektum jelöli a dokumentumot, a table objektum jelöli a HTML táblázatokat, stb.) Ezek az objektumok hozzáférhetőek a script-nyelvek számára az újabb böngészőkben.</p> +<p>A DOM-ot leggyakrabban JavaScript-tel együtt használják. Azaz a kód JavaScript-ben van írva, de a DOM-ot használja a weboldalhoz és elemeihez való hozzáférés során.</p> +<p>A DOM-ot azonban úgy tervezték hogy független legyen minden programozási nyelvtől, ezért a dokumentum szerkezeti modellje egyetlen, önálló és konzisztens API-ból érhető el. Bár a továbbiakban a JavaScriptre fogunk összpontosítani, a DOM-ot tkp. <a class="external" href="http://www.w3.org/DOM/Bindings">bármilyen nyelvből</a> elérhetjük.</p> +<p>A <a class="external" href="http://www.w3.org/">World Wide Web Consortium</a> (W3C) meghatározta a <a class="external" href="http://www.w3.org/DOM/">standard DOM</a>-ot, amit W3C DOM-nak neveznek. Ma már a legfontosabb böngészők ezt támogatják, ezzel lehetővé teszik browserfüggetlen alkalmazások létrehozását.</p> +<h3 id="Mi.C3.A9rt_fontos_a__DOM-t.C3.A1mogat.C3.A1s_a__Mozilla-ban.3F" name="Mi.C3.A9rt_fontos_a__DOM-t.C3.A1mogat.C3.A1s_a__Mozilla-ban.3F">Miért fontos a DOM-támogatás a Mozilla-ban?</h3> +<p>A "dinamikus HTML" (<a href="hu/DHTML">DHTML</a>) fogalmat szokták használni a HTML, CSS és a scriptek kombinációjára, amivel pl. animációt helyezhetünk el weboldalunkon. A W3C DOM munkacsoportjában keményen dolgoznak azon, hogy nyelvsemleges megoldásokat tudjanak szabványosítani (lásd még <a class="external" href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). Mivel a Mozillát webalkalmazás-platformnak ("Web Application Platform") tervezték, a DOM támogatása az egyik leggyakrabban felmerülő követelmény és a elengedhetetlen megfelelni neki, ha a Mozilla életképes alternatíva kíván maradni a többi böngésző mellett.</p> +<p>Talán még ennél is fontosabb, hogy a Mozilla (valamint a Firefox és a Thunderbird) felhasználói felülete XUL (XML User interface Language - XML felhasználói felületi nyelv) használatára épül. A Mozilla felhasználói tehát a DOM segítségével dinamikusan változtatni tudják a saját felhasználói felületüket is.</p> +<p>{{ languages( { "en": "en/About_the_Document_Object_Model", "es": "es/Acerca_del_Modelo_de_Objetos_del_Documento", "fr": "fr/\u00c0_propos_du_Document_Object_Model", "ja": "ja/About_the_Document_Object_Model", "ko": "ko/About_the_Document_Object_Model", "pl": "pl/O_modelu_obiektowym_dokumentu", "zh-cn": "cn/\u5173\u4e8e\u6587\u6863\u5bf9\u8c61\u6a21\u578b", "ru": "ru/\u041e\u0431_\u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e\u0439_\u043c\u043e\u0434\u0435\u043b\u0438_\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430" } ) }}</p> diff --git a/files/hu/css/css_grid_layout/index.html b/files/hu/css/css_grid_layout/index.html new file mode 100644 index 0000000000..35aa2b57f7 --- /dev/null +++ b/files/hu/css/css_grid_layout/index.html @@ -0,0 +1,249 @@ +--- +title: CSS Grid Layout +slug: CSS/CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout +--- +<p>A <strong>CSS Grid Layout </strong>kiemlekedő feladatot lát el egy adott HTML oldal fő részeinek meghatározásakor, illetve az oldalon elhelyezkező elemek méretének, pozíciójának és egymáshoz való viszonyának definiálasakor.</p> + +<p>Ahogyan a táblázatok esetében is, a grid layout lehetővé teszi a szerkesztő számára, hogy az egyes elemeket oszlopokba és sorokba rendezze. Emellett jó tudni, hogy más jellegű felépítések megvalósítása is lehetséges a CSS grid segítségével, még akár könyebben is, mint a táblázatokkal. Például, egy grid konténer gyermek elemei képesek egymást pozícionálni. Ennek következtében képesek egymást fedni, hasonlóan a CSS-sel pozícionált elemekhez.</p> + +<h2 id="Basic_Example" name="Basic_Example">Egyszerű példa</h2> + +<p>Az alábbi példa egy három oszlopos felépítést valósít meg, amelyben minden sor automatikusan minimum 100 pixel magas lesz és maximum akkora, mint amekkora helyet automatikusan elfoglalna. A grid rendszeren belül található elemek, mind egyénileg definiált helyet foglalnak el.</p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid rgb(233,171,88); + border-radius: 5px; + background-color: rgba(233,171,88,.5); + padding: 1em; + color: #d9480f; +}</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="wrapper"> + <div class="one">One</div> + <div class="two">Two</div> + <div class="three">Three</div> + <div class="four">Four</div> + <div class="five">Five</div> + <div class="six">Six</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +.one { + grid-column: 1 / 3; + grid-row: 1; +} +.two { + grid-column: 2 / 4; + grid-row: 1 / 3; +} +.three { + grid-column: 1; + grid-row: 2 / 5; +} +.four { + grid-column: 3; + grid-row: 3; +} +.five { + grid-column: 2; + grid-row: 4; +} +.six { + grid-column: 3; + grid-row: 4; +} +</pre> + +<p>{{ EmbedLiveSample('example', '500', '440') }}</p> +</div> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="CSS_tulajdonságok">CSS tulajdonságok</h3> + +<div class="index"> +<ul> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-template")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row")}}</li> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-area")}}</li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-column-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> +</ul> +</div> + +<h3 id="CSS_funkciók">CSS funkciók</h3> + +<div class="index"> +<ul> + <li>{{cssxref("repeat", "repeat()")}}</li> + <li>{{cssxref("minmax", "minmax()")}}</li> + <li>{{cssxref("fit-content", "fit-content()")}}</li> +</ul> +</div> + +<h3 id="CSS_adattípusok">CSS adattípusok</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<flex>")}}</li> +</ul> +</div> + +<h3 id="Szójegyzék">Szójegyzék</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li> +</ul> +</div> + +<h2 id="Segédletek">Segédletek</h2> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li> +</ul> +</div> + +<h2 id="Külső_források">Külső források</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li> + <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li> + <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> + <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> + <li><a href="http://cssgridgarden.com">Grid Garden</a> - A game for learning CSS grid</li> +</ul> + +<h2 id="Specifikációk">Specifikációk</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName("CSS Grid 2") }}</td> + <td>{{ Spec2("CSS Grid 2") }}</td> + <td>Added <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid">subgrids</a>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Grid') }}</td> + <td>{{ Spec2('CSS3 Grid') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/hu/css/font-weight/index.html b/files/hu/css/font-weight/index.html new file mode 100644 index 0000000000..6e27ac6341 --- /dev/null +++ b/files/hu/css/font-weight/index.html @@ -0,0 +1,400 @@ +--- +title: Betű vastagság +slug: CSS/font-weight +translation_of: Web/CSS/font-weight +--- +<div>{{CSSRef}}</div> + +<p>A betűvastagság (<strong><code>font-weight)</code></strong> CSS tulajdonság beállítja a betűtípus nyomatékosságát, vastagságát (angolul "weight" vagy "boldness"). Az elérhető betűvastagság méretek a beállított betűtípustól ({{cssxref("font-family")}}) függenek.</p> + +<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Szintaxis">Szintaxis</h2> + +<pre class="brush:css no-line-numbers notranslate">/* Kulcsszavas értékek */ +font-weight: normal; // normál vastagság +font-weight: bold; // félkövér + +/* Kulcsszavas értékek a szülő elemhez viszonyítva */ +font-weight: lighter; +font-weight: bolder; + +/* Numerikus értékek */ +font-weight: 100; +font-weight: 200; +font-weight: 300; +font-weight: 400; // normál +font-weight: 500; +font-weight: 600; +font-weight: 700; // félkövér +font-weight: 800; +font-weight: 900; + +/* Globális értékek */ +font-weight: inherit; +font-weight: initial; +font-weight: unset; +</pre> + +<p>A betűvastagság (<code>font-weight)</code> tulajdonság bármely fentebb bemutatott módon beállítható.</p> + +<h3 id="Értékek">Értékek</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Normál betűvastagság. Megegyezik a <code>400</code>-as értékkel.</dd> + <dt><code>bold</code></dt> + <dd>Félkövér. Megegyezik a <code>700</code>-as értékkel.</dd> + <dt><code>lighter</code></dt> + <dd>Relatív betűvastagság, a szülő elem formázásához viszonyít, annál vékonyabb betűvastagságot állít be. Megjegyzés: csupán négy betűvastagságot tartunk számon, melyek relatív értékek. (Bővebben: {{anch("Relatív betűvastagság jelentése")}} bekezdés lentebb.)</dd> + <dt><code>bolder</code></dt> + <dd>Relatív betűvastagság, a szülő elem formázásához viszonyít, annál vastagabb betűvastagságot állít be. Megjegyzés: csupán négy betűvastagságot tartunk számon, melyek relatív értékek. (Bővebben: {{anch("Relatív betűvastagság jelentése")}} bekezdés lentebb.)</dd> + <dt><code><number></code></dt> + <dd>A {{cssxref("<number>")}} (szám) érték 1 és 1000 között megadható (az 1000 is beletartozik az intervallumba). Minél magasabb az érték, annál vastagabb lesz a betű formázás. Néhány gyakran használt érték megfeleltethető betűvastagság elnevezéseknek, bővebben lásd az <a href="#Általános_betűvastagság_elnevezések">Általános betűvastagság elnevezések</a> bekezdésnél.</dd> +</dl> + +<p>A betűvastagság beállítás régebbi verzióiban ez a tulajdonság csak kulcsszavakas értékeket és számokat fogad el (100, 200, 300, 400, 500, 600, 700, 800, és 900). A nem változó betűtípusok csak ezeket az értékeket tudják értelmezni. (Változó betűtípus: egyetlen betűkészlet-fájl, amely több stílusként viselkedik. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Bővebben itt tudsz utánaolvasni.</a>) A "finomszemcsés" értékek (pl: 451) a nem változó betűtípusok esetében lefordítódnak a fentebb említett értékek egyikére a {{anch("Fallback weights")}} rendszer segítségével.</p> + +<p>A CSS Fonts Level 4 kiterjeszti a szintaxist, és bármely számot el tudja fogadni 1 és 1000 között, illetve bevezeti a Változó betűtípus készleteket ({{anch("Variable fonts")}}), amelyek már tudják használni ezeket a "finomszemcsés" betűvastagság értékeket is.</p> + +<h3 id="Alapeset">Alapeset</h3> + +<p>Hogyha a megadott betűvastagság nem elérhető adott betűtípuson, az alábbi szabály lép életbe, mely eldönti a véglegesen megjelenítendő betűvastagságot:</p> + +<ul> + <li>Ha a megadott érték <code>400</code> és <code>500</code> között van (ezeket is beleértve): + + <ul> + <li>Elérhető betűvastagság értéket keres a megadott érték és <code>500</code> között, növekvő sorrendben.</li> + <li>Ha nincsen találat, elérhető betűvastagság értéket keres a megadott érték alatt, csökkenő sorrendben.</li> + <li>Ha nincsen találat, elérhető betűvastagság értéket keres <code>500</code> felett, növekvő sorrendben.</li> + </ul> + </li> + <li>Ha a megadott érték <code>400</code> alatti: + <ul> + <li>Elérhető betűvastagság értéket keres a megadott érték alatt, csökkenő sorrendben.</li> + <li>Ha nincsen találat, elérhető betűvastagság értéket keres a megadott érték felett, növekvő sorrendben.</li> + </ul> + </li> + <li>Ha a megadott érték <code>500</code> feletti: + <ul> + <li>Elérhető betűvastagság értéket keres a megadott érték felett, növekvő sorrendben.</li> + <li>Ha nincsen találat, elérhető betűvastagság értéket keres a megadott érték alatt, csökkenő sorrendben.</li> + </ul> + </li> +</ul> + +<h3 id="Relatív_betűvastagság_jelentése">Relatív betűvastagság jelentése</h3> + +<p>Amikor <code>lighter</code> vagy <code>bolder</code> betűvastagságot határozunk meg, az alábbi táblázat segít megérteni, hogyan dől el, mi lesz a betűvastagságunk abszolút értéke.</p> + +<p>Megjegyzés: csupán 4 értéket tartunk számon relatív értékként: vékony, keskeny (thin, 100), normál (normal, 400), félkövér (bold, 700), és vastag (heavy, 900). Ha egy betűtípus család ennél több elérhető értékkel rendelkezik, azok ebben az esetben mellőzve lesznek annak érdekében, hogy a relatív értéket át tudjuk alakítani abszolút értékké.</p> + +<table class="standard-table"> + <thead> + <tr> + <th>Örökölt érték</th> + <th><code>bolder</code></th> + <th><code>lighter</code></th> + </tr> + </thead> + <tbody> + <tr> + <th>100</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>200</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>300</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>400</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>500</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>600</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>700</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>800</th> + <td>900</td> + <td>700</td> + </tr> + <tr> + <th>900</th> + <td>900</td> + <td>700</td> + </tr> + </tbody> +</table> + +<h3 id="Általános_betűvastagság_elnevezések">Általános betűvastagság elnevezések</h3> + +<p>A numerikus értékek <code>100</code>-tól <code>900</code>-ig megfeleltethetők az alábbi általános betűvastagság elnevezéseknek. (Bővebben: <a href="https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass">OpenType specification</a>):</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Érték</th> + <th scope="col">Általános betűvastagság elnevezés</th> + </tr> + </thead> + <tbody> + <tr> + <td>100</td> + <td>Thin (Hairline)</td> + </tr> + <tr> + <td>200</td> + <td>Extra Light (Ultra Light)</td> + </tr> + <tr> + <td>300</td> + <td>Light</td> + </tr> + <tr> + <td>400</td> + <td>Normal (Regular)</td> + </tr> + <tr> + <td>500</td> + <td>Medium</td> + </tr> + <tr> + <td>600</td> + <td>Semi Bold (Demi Bold)</td> + </tr> + <tr> + <td>700</td> + <td>Bold</td> + </tr> + <tr> + <td>800</td> + <td>Extra Bold (Ultra Bold)</td> + </tr> + <tr> + <td>900</td> + <td>Black (Heavy)</td> + </tr> + <tr> + <td>950</td> + <td><a href="https://docs.microsoft.com/en-us/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks">Extra Black (Ultra Black)</a></td> + </tr> + </tbody> +</table> + +<h3 id="Változó_betűtípus_útmutató">Változó betűtípus útmutató</h3> + +<p>A legtöbb betűtípusnak van egy bizonyos betűvastagsága, ami a fentebbi <a href="#Általános_betűvastagság_elnevezések">Általános betűvastagság elnevezések</a> értékeinek megfeleltethető. Azonban néhány betűtípus, amit változó betűtípusnak nevezünk, ezeknél sokkal pontosabb, aprószemcsés értéket is meg tud jeleníteni, és ez sokkal nagyobb kontrollt adhat egy designernek.</p> + +<p>A TrueType vagy OpenType változó betűtípusok a "wght" variációjukkal tudnak implementálni változó szélességet.</p> + +<p>Az alábbi példához egy olyan böngészőre lesz szükséged, ami támogatja a CSS Fonts Level 4 szintaxist, amellyel bármilyen értéket meg tudunk adni 1 és 1000 között.</p> + +<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div> + +<h4 id="HTML">HTML</h4> + +<div id="variable-font-example"> +<pre class="brush: html notranslate"><header> + <input type="range" id="weight" name="weight" min="1" max="1000" /> + <label for="weight">Weight</label> +</header> +<div class="container"> + <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">/* +Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans) +and is used here under the terms of its license: +https://github.com/LettError/mutatorSans/blob/master/LICENSE +*/ + +@font-face { + src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf'); + font-family:'MutatorSans'; + font-style: normal; +} + +label { + font: 1rem monospace; + white-space: nowrap; +} + +.container { + max-height: 150px; + overflow-y: auto; +} + +.sample { + text-transform: uppercase; + font: 1.5rem 'MutatorSans', sans-serif; +} +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">html, body { + max-height: 100vh; + max-width: 100vw; + overflow: hidden; +} + +body { + display: flex; + flex-direction: column; +} + +header { + margin-bottom: 1.5rem; +} + +.container { + flex-grow: 1; +} + +.container > p { + margin-top: 0; + margin-bottom: 0; +} +</pre> +</div> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">let weightLabel = document.querySelector('label[for="weight"]'); +let weightInput = document.querySelector('#weight'); +let sampleText = document.querySelector('.sample'); + +function update() { + weightLabel.textContent = `font-weight: ${weightInput.value};`; + sampleText.style.fontWeight = weightInput.value; +} + +weightInput.addEventListener('input', update); + +update(); +</pre> +</div> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>Látási nehézségekkel küzdő emberek számára nehézséget okozhat a <code>100</code>-as (Thin/Hairline) és <code>200</code>-as (Extra Light) betűvastagsággal írt szövegek elolvasása, különösképpen ha <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/color#Accessibility_concerns">alacsony a színkontraszt</a>. </p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Formal_definition">Formal definition</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Példák</h2> + +<h3 id="Betűvastagság_beállítása">Betűvastagság beállítása</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p> + Alice was beginning to get very tired of sitting by her sister on the + bank, and of having nothing to do: once or twice she had peeped into the + book her sister was reading, but it had no pictures or conversations in + it, "and what is the use of a book," thought Alice "without pictures or + conversations?" +</p> + +<div>I'm heavy<br/> + <span>I'm lighter</span> +</div> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush:css notranslate">/* Set paragraph text to be bold. */ +p { + font-weight: bold; +} + +/* Set div text to two steps heavier than + normal but less than a standard bold. */ +div { + font-weight: 600; +} + +/* Set span text to be one step lighter + than its parent. */ +span { + font-weight: lighter; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Betűvastagság_beállítása","400","300")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td>Defines <code>font-weight</code> to accept any numbers between 1 and 1000.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.font-weight")}}</p> diff --git a/files/hu/css/index.html b/files/hu/css/index.html new file mode 100644 index 0000000000..6717bc7093 --- /dev/null +++ b/files/hu/css/index.html @@ -0,0 +1,92 @@ +--- +title: CSS +slug: CSS +tags: + - CSS + - Design + - Dizájn + - Stíluslapok + - Stílusok +translation_of: Web/CSS +--- +<div> +<p>A <strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) egy stíluslap nyelv, mellyel a HTML-ben vagy XML-ben (és más XML nyelveken, mint az <a href="hu/XHTML">XHTML</a> vagy a <a href="hu/SVG">SVG</a>) írt dokumentumok megjelenítését lehet leírni.</p> + +<p>A CSS a nyílt web egyik fő nyelve, amely a <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specifikációnak </a>megfelelően szabványosítva van a webböngészőkben. Szintenként van fejlesztve, a CSS1 ma már elavult, a CSS2.1 használata az ajánlott, a CSS3 pedig már kisebb modulokra lett osztva, jelenleg is a szabványosítása zajlik.</p> + +<ul class="card-grid"> + <li><span>CSS Bevezetés</span> + + <p>Ha új vagy a webfejlesztésben, olvasd el a <a href="/hu/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS alapismeretek</a> útmutatót, hogy megtudd mi az a CSS és hogyan használd.</p> + </li> + <li><span>CSS Oktatóanyagok</span> + <p><a href="/hu/docs/Learn/CSS">CSS tanulási területünk</a> rengetek oktatóanyagot tartalmaz, amelyek a kezdő szinttől a szakértelemhez vezetnek.</p> + </li> + <li><span>CSS Referenciák</span>A <a href="/hu/docs/Web/CSS/Reference">teljeskörű CSS referencia</a> a tapasztalt webes fejlesztők számára a CSS minden tulajdonságát és fogalmát írja le.</li> +</ul> +</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="Document.C3.A1ci.C3.B3" name="Document.C3.A1ci.C3.B3">CSS Dokumentáció</h2> + + <dl> + <dt><a href="/hu/docs/Learn/CSS/Introduction_to_CSS">Bevezetés a CSS-be</a></dt> + <dd>Ez az oldal alapvető információkat nyújt arról, hogyan működik a CSS, azaz bemutatja a szelektorokat és a tulajdonságokat, a CSS szabályok írását, a CSS alkalmazását a HTML-re, a dobozmodell alapjait, valamint a CSS hibakeresést.</dd> + <dt><a href="/hu/docs/Web/CSS/Reference">CSS Referencia</a></dt> + <dd>A teljeskörű CSS referencia a tapasztalt webes fejlesztők számára a CSS minden tulajdonságát és fogalmát írja le.</dd> + </dl> + + <dl> + <dt><a href="hu/Using_URL_values_for_the_cursor_property">URL-értékek használata a kurzor tulajdonsághoz </a></dt> + <dd><small>A <a href="hu/Gecko">Gecko</a></small> 1.8 (Firefox 1.5, SeaMonkey 1.0) támogatja a <small><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS 2/2.1 kurzor tulajdonság</a></small> URL-értékeit. Ez lehetővé teszi tetszőleges képek egér kurzorokként való használatát - bármely <small><a href="hu/Gecko">Gecko</a></small> által támogatott képformátum használható.</dd> + </dl> + + <dl> + <dt><a href="hu/CSS3_Columns">CSS3 Oszlopok</a></dt> + <dd><small>Rövid bemutató a CSS3 oszlopok használatáról.</small></dd> + </dl> + + <dl> + <dt><a href="hu/Consistent_List_Indentation">Konzisztens listajelzés</a></dt> + <dd><small>A listák behúzásának megkísérlése a CSS-sel trükkösebb, mint amilyennek látszik, de csak azért, mert a CSS-kompatibilis böngészőknek különböznek az alapértelmezései. Ismerd meg, hogyan lehet őket egy vonalba hozni.</small></dd> + </dl> + + <p><span class="alllinks"><a>Összes megtekintése...</a></span></p> + </td> + <td> + <h2 id="K.C3.B6z.C3.B6ss.C3.A9g" name="K.C3.B6z.C3.B6ss.C3.A9g">Segítségkérés a közösségtől</h2> + + <p>CSS-el kapcsolatos segítségre van szükséged és nem találod a megoldást a dokumentációban?</p> + + <ul> + <li>Látogass el a <a href="http://stackoverflow.com/questions/tagged/css" rel="noopener">Stack Overflow</a>-ra, az együttműködéssel kiépített és karbantartott Kérdések és Válaszok oldalra, és nézz utána, hogy megválaszolták-e már a kérdésed. Amennyiben még nem, úgy felteheted azt.</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/css">#css IRC csatorna</a></li> + <li><a class="external" href="http://www.css-discuss.org/">CSS-Discuss site and list</a></li> + </ul> + + <h2 id="Eszk.C3.B6z.C3.B6k" name="Eszk.C3.B6z.C3.B6k">Eszközök a CSS fejlesztéshez</h2> + + <ul> + <li>A <a href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> segítségével ellenőrizheted, hogy a CSS kódod érvényes-e. Ez felbecsülhetetlen hibakereső eszköz.</li> + <li>A <a href="/en-US/docs/Tools">Firefox Developer Tools</a> lehetőséget nyújt megtekinteni és szerkeszteni az oldal élő CSS-ét az <a href="/hu/docs/Tools/Page_Inspector">Inspector</a> és a <a href="/hu/docs/Tools/Style_Editor">Style Editor</a> eszközök segítségével.</li> + <li>A <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer bővítmény</a> lehetővé teszi az élő CSS követését és szerkesztését a megfigyelt webhelyeken.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug bővítmény</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">EditCSS bővítmény</a></li> + </ul> + + <p><span class="alllinks"><a>Összes megtekintése...</a></span></p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Kapcsolódó_témakörök">Kapcsolódó témakörök</h2> + +<ul> + <li><a href="/hu/docs/Web/Demos_of_open_web_technologies#CSS">CSS demók</a>: Kreatív löket a legutóbbi CSS technológiák példáinak felfedezésével.</li> + <li>A webes nyelvek, amelyekre gyakran alkalmazzák a CSS-t: <a href="/hu/docs/Web/HTML">HTML</a>, <a href="/hu/docs/Web/SVG">SVG</a>, <a href="/hu/docs/Web/MathML">MathML</a>, {{Glossary("XHTML", "", 1)}}, és <a href="/hu/docs/XML_introduction">XML</a>.</li> + <li>A Mozilla technológiák, amelyek széles körben használják a CSS-t: <a href="/hu/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/hu/docs/Mozilla/Firefox">Firefox</a>, és <a href="/hu/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/hu/docs/Mozilla/Add-ons">bővítmények</a> és <a href="/hu/docs/Mozilla/Add-ons/Themes">témák</a>.</li> +</ul> diff --git a/files/hu/css/text-decoration/index.html b/files/hu/css/text-decoration/index.html new file mode 100644 index 0000000000..22de3ad153 --- /dev/null +++ b/files/hu/css/text-decoration/index.html @@ -0,0 +1,150 @@ +--- +title: Szöveg díszítés +slug: CSS/text-decoration +tags: + - CSS tulajdonság + - szöveg díszítés +translation_of: Web/CSS/text-decoration +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">A szöveg díszítés (<strong><code>text-decoration)</code></strong> rövidített CSS tulajdonság a szöveget díszítő vonalakat állítja be. Ez a tulajdonság egy rövidítés, amely az alábbi tulajdonságokat foglalja magába:</span> {{cssxref("text-decoration-line")}} (szöveg díszítő vonal), {{cssxref("text-decoration-color")}} (-szín), {{cssxref("text-decoration-style")}} (-stílus), és az újabb {{cssxref("text-decoration-thickness")}} (-vastagság).</p> + +<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div> + + + +<p>A szöveg díszítések leszármazott szövegelemekre is érvényesek lesznek. Ez annyit jelent, hogyha egy elemen specifikálunk valamilyen szöveg díszítést, akkor a leszármazott elem nem tudja majd eltávolítani ezt a díszítést. Vegyük például ezt a jelölő nyelvi elemet: <code><p>Ez a szöveg néhány <em>hangsúlyos, kiemelt szót</em> is tartalmaz.</p></code>, és ezt a stílus szabályt: <code>p { text-decoration: underline; }.</code> Ez esetben a teljes paragrafusra érvényes lenne az aláhúzás. Az <code>em { text-decoration: none; }</code> stílus szabály nem hozna változást, a teljes bekezdés megmaradna aláhúzottan. Azonban az <code>em { text-decoration: overline; }</code> egy második szöveg díszítést is bevezetne, és egy felső vonal is megjelenne a kiemelt szavakon ("<code>hangsúlyos, kiemelt szót</code>" szavakon).</p> + +<h2 id="A_szabályban_foglalt_tulajdonságok">A szabályban foglalt tulajdonságok</h2> + +<p>A text-decoration tulajdonság egy rövidítés, mely magába foglalja az alábbi CSS tulajdonságokat: szín, vonal, stílus, vastagság.</p> + +<ul> + <li><code><a href="/en-US/docs/Web/CSS/text-decoration-color">text-decoration-color</a></code></li> + <li><a href="/en-US/docs/Web/CSS/text-decoration-line"><code>text-decoration-line</code></a></li> + <li><a href="/en-US/docs/Web/CSS/text-decoration-style"><code>text-decoration-style</code></a></li> + <li><a href="/en-US/docs/Web/CSS/text-decoration-thickness"><code>text-decoration-thickness</code></a></li> +</ul> + +<h2 id="Szintaxis">Szintaxis</h2> + +<p id="Values">A <code>text-decoration</code> tulajdonságot egy vagy több érték megadásával is létrehozhatjuk, melyeket szóközzel kell elválasztanunk. Ezek az értékek fogják képviselni a fentebb is említett tulajdonságokat, melyeket a <code>text-decoration </code>magába foglal.</p> + +<h3 id="Értékek">Értékek</h3> + +<dl> + <dt>{{cssxref("text-decoration-line")}}</dt> + <dd>Beállítja a díszítő vonal elhelyezését: a szöveg alá, fölé, vagy rá (áthúzás) is kerülhet. (<code>underline, overline</code> vagy <code>line-through).</code></dd> + <dt>{{cssxref("text-decoration-color")}}</dt> + <dd>Beállítja a díszítő vonal színét.</dd> + <dt>{{cssxref("text-decoration-style")}}</dt> + <dd>Beállítja a díszítő vonal stílusát, például egyszerű vonal, hullámos, vagy szaggatott ( <code>solid</code>, <code>wavy</code>, or <code>dashed).</code></dd> + <dt>{{cssxref("text-decoration-thickness")}}</dt> + <dd>Beállítja a díszítő vonal vastagságát.</dd> +</dl> + +<h2 id="Régebbi_meghatározás">Régebbi meghatározás</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Régebbi_szintaxis">Régebbi szintaxis</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Példák">Példák</h2> + +<h3 id="Szöveg_díszítés_bemutatása">Szöveg díszítés bemutatása</h3> + +<pre class="brush: css notranslate">.under { + text-decoration: underline red; +} + +.over { + text-decoration: wavy overline lime; +} + +.line { + text-decoration: line-through; +} + +.plain { + text-decoration: none; +} + +.underover { + text-decoration: dashed underline overline; +} + +.thick { + text-decoration: solid underline purple 4px; +} + +.blink { + text-decoration: blink; +} +</pre> + +<pre class="brush: html notranslate"><p class="under">Ezen szöveg alatt látható egy vonal.</p> +<p class="over">Ezen szöveg fölött látható egy vonal.</p> +<p class="line">Ez a szöveg át van húzva.</p> +<p>Ez a <a class="plain" href="#">link nincs aláhúzva</a>, + mint ahogyan a linkeknél alapvetően látni szoktuk. +Óvatosan használjuk ezt a formázást a linkeken, hiszen a +felhasználók sokszor erre az alap formázásra támaszkodnak, +ha linkeket keresnek a szövegben.</p> +<p class="underover">Ezen szöveg fölött <em>és</em> alatt is van vonal.</p> +<p class="thick">Ezen szöveg alatt látható egy vastag lila +aláhúzás azon böngészőkben, melyek támogatják ezt a formázást.</p> +<p class="blink">Ez a szöveg villog, ha olyan böngészőt +használsz, ami támogatja ezt a formázást.</p> +</pre> + +<p>{{EmbedLiveSample('Példák','auto','320')}}</p> + +<h2 id="Specifikációk">Specifikációk</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikáció</th> + <th scope="col">Státusz</th> + <th scope="col">Komment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Text Decoration')}}</td> + <td>{{Spec2('CSS4 Text Decoration')}}</td> + <td>A {{cssxref("text-decoration-thickness")}}; tulajdonság hozzáadva. Megjegyzés: ez még hivatalosan nem része a rövidített stílus szabálynak - ez még nincs meghatározva.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>Átalakítva rövidített tulajdonsággá. A {{cssxref('text-decoration-style')}} érték támogatása hozzáadva.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Nincs szignifikáns változtatás.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Kezdeti definiálás.</td> + </tr> + </tbody> +</table> + +<h2 id="Böngésző_kompatibilitás">Böngésző kompatibilitás</h2> + + + +<p>{{Compat("css.properties.text-decoration")}}</p> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li>The individual text-decoration properties are {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, and {{cssxref("text-decoration-style")}}.</li> + <li>The {{cssxref("list-style")}} attribute controls the appearance of items in HTML {{HTMLElement("ol")}} and {{HTMLElement("ul")}} lists.</li> +</ul> diff --git a/files/hu/dom/htmlbrelement/index.html b/files/hu/dom/htmlbrelement/index.html new file mode 100644 index 0000000000..8842c0a233 --- /dev/null +++ b/files/hu/dom/htmlbrelement/index.html @@ -0,0 +1,32 @@ +--- +title: HTMLBRElement +slug: DOM/HTMLBRElement +translation_of: Web/API/HTMLBRElement +--- +<div> + {{ ApiRef() }}</div> +<h2 id="HTML_törés_elem_felület">HTML törés elem felület</h2> +<p>A DOM törés elemek a <a class="external" href="http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element" rel="external nofollow" title="http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element">HTMLBRElement</a> (vagy <span style="border: 1px solid rgb(129, 129, 250); background-color: rgb(174, 218, 229); font-size: x-small; white-space: nowrap; padding: 2px;"><a href="../../../../en/HTML" rel="custom nofollow">HTML 4</a></span> <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56836063" rel="external nofollow" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56836063"><code>HTMLBRElement</code></a>) felületet fejtik ki, amelyek a HTMLElementből öröklődnek, de nem határoz meg további tagokat a {{ HTMLVersionInline(5) }} verzióban. <span class="short_text" id="result_box" lang="hu"><span class="hps">A bevezetett</span> <span class="hps">további</span> <span class="hps">tulajdonság szintén</span> <span class="hps">elavult a</span></span> {{ HTMLVersionInline(4.01) }} verzióban.</p> +<h2 id="Tulajdonságok">Tulajdonságok</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Név</th> + <th scope="col">Típus</th> + <th scope="col">Leírás</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>clear </code>{{ HTMLVersionInline(4.01) }}, {{ obsolete_inline() }} a {{ HTMLVersionInline(5) }} óta</td> + <td><code><a href="/en/DOM/DOMString" title="En/DOM/DOMString">DOMString</a></code></td> + <td>A szöveg körbefuttatását jelzi a lebegő objektumok körül.</td> + </tr> + </tbody> +</table> +<h2 id="Lásd_még">Lásd még</h2> +<ul> + <li>{{ HTMLElement("br") }} HTML elem</li> +</ul> +<div class="noinclude"> + {{ languages({ "en": "en/DOM/HTMLBRElement", "hu": "hu/DOM/HTMLBRElement", "ja": "ja/DOM/HTMLBRElement" }) }}</div> diff --git a/files/hu/dom/index.html b/files/hu/dom/index.html new file mode 100644 index 0000000000..a87a730a58 --- /dev/null +++ b/files/hu/dom/index.html @@ -0,0 +1,74 @@ +--- +title: DOM +slug: DOM +tags: + - DOM + - minden_kategória +translation_of: Web/API/Document_Object_Model +--- +<div> + <p>A dokumentumobjektum-modell (<strong>DOM</strong>) egy API a <a href="/hu/HTML" title="hu/HTML">HTML</a> és az <a href="/hu/XML" title="hu/XML">XML</a> documentumokhoz.<span class="comment">The <strong>Document Object Model</strong> (<strong>DOM</strong>) is an API for <a href="/hu/HTML">HTML</a> and <a href="/hu/XML">XML</a> documents.</span> A dokumentum szerkezetét modellezi és lehetővé teszi annak tartalmi és vizulális változtatását.<span class="comment">It provides a structural representation of the document, enabling you to modify its content and visual presentation.</span> Lényegében összeköttetést képez a weblapok és a script- vagy programozási nyelvek között. <span class="comment">Essentially, it connects web pages to scripts or programming languages.</span></p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id="Dokumet.C3.A1ci.C3.B3" name="Dokumet.C3.A1ci.C3.B3"><a href="/Special:Tags?tag=DOM&language=hu" title="Special:Tags?tag=DOM&language=hu">Dokumetáció</a></h4> + <dl> + <dt> + <a href="/hu/Gecko_DOM_referencia" title="hu/Gecko_DOM_referencia">Gecko DOM referencia</a></dt> + <dd> + <small>Gecko dokumentumobjektum-modell referencia.</small></dd> + </dl> + <dl> + <dt> + <a href="/hu/Bevezetés_a_dokumentumobjektum-modellbe" title="hu/Bevezetés_a_dokumentumobjektum-modellbe">Bevezetés a dokumentumobjektum-modellbe</a></dt> + <dd> + <small>Rövid bevezetés a DOM-ba.</small></dd> + </dl> + <dl> + <dt> + <a href="/hu/Az_XUL-alapú_felhasználói_felület_dinamikus_változtatása" title="hu/Az_XUL-alapú_felhasználói_felület_dinamikus_változtatása">Az XUL-alapú felhasználói felület dinamikus változtatása</a></dt> + <dd> + <small>Alapvető ismeretek a XUL felhasználói felület DOM módszerekkel való változtatásáról.</small></dd> + </dl> + <dl> + <dt> + <a href="/hu/A_DOM_és_a_JavaScript" title="hu/A_DOM_és_a_JavaScript">A DOM és a JavaScript</a></dt> + <dd> + <small>Mi a DOM? Mi a JavaScript? Hogyan tudom együtt használni őket a weboldalamon? Itt ehhez hasonló kérdésekre kaphatsz választ.</small></dd> + </dl> + <dl> + <dt> + <a class="external" href="http://www.mozilla.org/docs/dom/">A dokumentumobjektum-modell a Mozilla böngészőben</a></dt> + <dd> + <small>Egy korábbi DOM leírás a mozilla.org site-on.</small></dd> + </dl> + <p><span class="alllinks"><a href="/Special:Tags?tag=DOM&language=hu" title="Special:Tags?tag=DOM&language=hu">Továbbá...</a></span></p> + </td> + <td> + <h4 id="K.C3.B6z.C3.B6ss.C3.A9g" name="K.C3.B6z.C3.B6ss.C3.A9g">Közösség</h4> + <ul> + <li>Lásd a Mozilla fórumait...</li> + </ul> + <p>{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</p> + <h4 id="Eszk.C3.B6z.C3.B6k" name="Eszk.C3.B6z.C3.B6k">Eszközök</h4> + <ul> + <li><a class="external" href="http://www.getfirebug.com/">Firebug </a></li> + <li><a href="/hu/DOM_Inspector" title="hu/DOM_Inspector">DOM Inspector</a></li> + <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li> + <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark Firefox kiegészítő</a></li> + </ul> + <p><span class="alllinks"><a href="/Special:Tags?tag=DOM:Eszközök&language=hu" title="Special:Tags?tag=DOM:Eszközök&language=hu">További eszközök...</a></span></p> + <h4 id="Kapcsol.C3.B3d.C3.B3_t.C3.A9m.C3.A1k" name="Kapcsol.C3.B3d.C3.B3_t.C3.A9m.C3.A1k">Kapcsolódó témák</h4> + <dl> + <dd> + <a href="/hu/AJAX" title="hu/AJAX">AJAX</a>, <a href="/hu/CSS" title="hu/CSS">CSS</a>, <a href="/hu/DHTML" title="hu/DHTML">DHTML</a>, <a href="/hu/JavaScript" title="hu/JavaScript">JavaScript</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p><span class="comment">Categories</span></p> +<p><span class="comment">Interwiki Language Links</span></p> +<p>{{ languages( { "en": "en/DOM", "zh-cn": "cn/DOM", "de": "de/DOM", "es": "es/DOM", "fr": "fr/DOM", "ko": "ko/DOM", "ja": "ja/DOM", "nl": "nl/DOM", "pl": "pl/DOM", "pt": "pt/DOM", "ru": "ru/DOM" } ) }}</p> diff --git a/files/hu/glossary/abstraction/index.html b/files/hu/glossary/abstraction/index.html new file mode 100644 index 0000000000..bf5dc1b36e --- /dev/null +++ b/files/hu/glossary/abstraction/index.html @@ -0,0 +1,49 @@ +--- +title: Absztrakció +slug: Glossary/Abstraction +tags: + - Absztrakció + - Kódolás + - Programozási Nyelv + - Szójegyzék +translation_of: Glossary/Abstraction +--- +<p>A {{Glossary("computer programming", "számítógépes programozás")}}ban az absztrakció lehetővé teszi a komplex szoftveres rendszerek bonyolultságának csökkentését illetve a hatékony dizájnt és kivitelezést. A bonyolult technikai rendszereket egyszerűbb {{Glossary("API", "API")}}-ok mögé rejti.</p> + +<h2 id="Az_adatabsztrakció_előnyei">Az adatabsztrakció előnyei</h2> + +<ul> + <li>A felhasználónak nem kell alacsony szintű kódot írnia.</li> + <li>Megakadályozza a kódduplázást és megnöveli az újrahasználhatóságot.</li> + <li>A felhasználó érintése nélkül meg tudja változtatni a belső osztályok implementációját.</li> + <li>Segít megnövelni az alkalmazás vagy program biztonságát, mivel csak a legfontosabb részleteket mutatja a felhasználónak.</li> +</ul> + +<h2 id="Példa"><strong>Példa</strong></h2> + +<pre class="brush: js notranslate">class AbsztrakcioBevezetes { + // a belső tagok értékének megváltoztatása + beallit(x, y) { + this.a = x; + this.b = y; + } + + kiiras() { + console.log('a = ' + this.a); + console.log('b = ' + this.b); + } +} + +const obj = new AbsztrakcioBevezetes(); +obj.beallit(10, 20); +obj.kiiras(); +// a = 10 +// b = 20</pre> + +<h2 id="Tudjon_meg_többet"><strong>Tudjon meg többet</strong></h2> + +<h3 id="Általános_ismeretek"><strong>Általános ismeretek</strong></h3> + +<ul> + <li>{{interwiki("wikipedia", "Abstraction (computer science)", "Absztrakció")}} a Wikipédián</li> +</ul> diff --git a/files/hu/glossary/ajax/index.html b/files/hu/glossary/ajax/index.html new file mode 100644 index 0000000000..e7f8a4b6e2 --- /dev/null +++ b/files/hu/glossary/ajax/index.html @@ -0,0 +1,31 @@ +--- +title: Ajax +slug: Glossary/AJAX +tags: + - AJAX + - Infrastruktúra + - Szójegyzék +translation_of: Glossary/AJAX +--- +<p><span class="seoSummary">Az <strong>Ajax</strong> (Asynchronous {{Glossary("JavaScript")}} And {{Glossary("XML")}}), egy programozási gyakorlat komplex és dinamikus weblapok építésére egy {{Glossary("XHR_(XMLHttpRequest)","XMLHttpRequest")}} nevezetű technológiát használva.</span></p> + +<p>Az Ajax lehetővé teszi a {{Glossary("DOM")}} egy részének a frissítését egy {{Glossary("HTML")}} oldalon, teljes oldalfrissítés szükségessége nélkül. Az Ajax lehetővé teszi az aszinkronos munkát, ami azt jelenti, hogy amíg az oldal célzott része megpróbál újratölteni, addig az oldal többi része tovább fut (ezzel ellentétben a szinkronos módszer blokkolja a kód további futását, amíg az oldal célzott része újra nem töltött).</p> + +<p>Az interaktív weboldalakkal és modern internetes szabványokkal, az Ajax-ot szépen lassan felváltják a JavaScript keretrendszereken belüli függvények és az eredeti {{domxref("Fetch API")}} Szabvány.</p> + +<section class="Quick_links" id="Quick_Links"> +<ul> + <li><a href="/en-US/docs/Glossary">Az MDN Web Dokumentáció Szójegyzéke</a>: + + <ul> + <li>{{Glossary("XHR_(XMLHttpRequest)","XMLHttpRequest")}}</li> + </ul> + </li> + <li>{{interwiki("wikipedia", "Ajax")}} a Wikipédián</li> + <li><a href="/en-US/docs/Web/Guide/AJAX">Ajax</a></li> + <li><a href="/en-US/docs/Web/Guide/AJAX/Getting_Started">Ajax - Kezdetek</a></li> + <li>{{DOMxRef("XMLHttpRequest")}}</li> + <li>{{DOMxRef("Fetch API")}}</li> + <li><a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">A Fetch API használata</a></li> +</ul> +</section> diff --git a/files/hu/glossary/api/index.html b/files/hu/glossary/api/index.html new file mode 100644 index 0000000000..a3102d330e --- /dev/null +++ b/files/hu/glossary/api/index.html @@ -0,0 +1,40 @@ +--- +title: API +slug: Glossary/API +tags: + - Glossary +translation_of: Glossary/API +--- +<p>Az API a programozás során előforduló egyik leggyakoribb és legijesztőbb kifejezés. Ennek ellenére nem annyira rettenetes: például ennek a szócikknek az elolvasásával meg is lehet érteni.</p> + +<p>Az API szó az angol Application Programming Interface rövidítése. Egy olyan felületet jelöl, amin keresztül egy külső programot el lehet érni, kommunikálni lehet vele. (Tehát a külső program képességeit más programokból hasznosítani lehet).</p> + +<p>Fontos, hogy az API számítógépek számára készül: programból könnyen összeállítható a bemenete és feldolgozható a kimenete, de emberek számára nehezebben értelmezhető.</p> + +<p>Webfejlesztés során általában kétféle API-val találkozhatunk:</p> + +<ul> + <li>Programkódból elérhető API-k:Igazábol minden olyan utasítás, amit nem mi hoztunk létre, API-nak minősül. Például ha használtuk már (JavaScript-ben) a document.write-t, a document.getElementByID-t vagy a .innerHTML-t, akkor máris a DOM API felhasználói lettünk.</li> + <li>Interneten elérhető API-k: Ezekkel eleinte kevésbé találkozunk. Lényegük, hogy egy weboldal működtetője nem csak ember számára olvasható (HTML-) formátumban teszi elérhetővé a szerver szolgáltatásait. Ebben az esetben a bemeneti adatokat az URL-ben kell elhelyezni, az eredményt pedig valamilyen, jól feldolgozható formátumban (egyszerő szöveg, JSON, XML) kapjuk.</li> +</ul> + +<p>Példák</p> + +<ul> + <li>A MediaWiki API-val a Wikipédia szolgáltatásaihoz férhetünk hozzá. Például a <a href="https://hu.wikipedia.org/w/api.php?action=query&list=search&srsearch=API">hu.wikipedia.org/w/api.php?action=query&list=search&srsearch=API</a> linken azokat azoknak az oldalaknak a listáját kapjuk meg, amelyek tartalmazzák az API szót.</li> + <li>A már említett DOM API az oldal tartalmának JavaScriptből való olvasására/módosítására szolgál.</li> +</ul> + +<h2 id="További_olvasnivaló">További olvasnivaló</h2> + +<h3 id="Általános_tudás">Általános tudás</h3> + +<ul> + <li><a href="https://hu.wikipedia.org/wiki/Alkalmazásprogramozási_felület" title="Alkalmazásprogramozási felület">Alkalmazásprogramozási felület </a>a wikipédián</li> +</ul> + +<h3 id="Technikai_részletek">Technikai részletek</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API">Web API reference</a> (egyenlőre angolul)</li> +</ul> diff --git a/files/hu/glossary/bongeszo/index.html b/files/hu/glossary/bongeszo/index.html new file mode 100644 index 0000000000..36a13cf1ce --- /dev/null +++ b/files/hu/glossary/bongeszo/index.html @@ -0,0 +1,37 @@ +--- +title: Böngésző +slug: Glossary/bongeszo +tags: + - Nacigáció + - Szójegyzék +translation_of: Glossary/Browser +--- +<p>A Webböngésző vagy böngésző egy program, ami a {{Glossary("World Wide Web","webből")}} kinyeri és megjeleníti az oldalakat és lehetővé teszi a felhasználó számára a további oldalakhoz való hozzáférést {{Glossary("hyperlink","hivatkozásokon")}} keresztül. A böngésző a legismertebb {{Glossary("user agent", "hálózati kliens")}}.</p> + +<h2 id="Tudj_meg_többet">Tudj meg többet</h2> + +<h3 id="Egy_böngésző_letöltése">Egy böngésző letöltése</h3> + +<ul> + <li><a href="https://www.mozilla.org/hu/firefox/">Mozilla Firefox</a></li> + <li><a href="https://www.google.com/chrome/" rel="external">Google Chrome</a></li> + <li><a href="https://www.microsoft.com/en-us/edge" rel="external">Microsoft Edge</a></li> + <li><a href="https://www.opera.com/" rel="external">Opera Browser</a></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/hu/docs/Glossary">Az MDN Webes Dokumentáció szójegyzéke</a> + + <ol> + <li>{{Glossary("user agent", "hálózati kliens")}}</li> + </ol> + </li> + <li>Általános tudnivaló + <ol> + <li>{{interwiki("wikipedia", "Webböngésző")}} a Wikipédián</li> + <li><a href="http://www.evolutionoftheweb.com/" rel="external">Az internet fejlődése</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/hu/glossary/callback_function/index.html b/files/hu/glossary/callback_function/index.html new file mode 100644 index 0000000000..36ae03f558 --- /dev/null +++ b/files/hu/glossary/callback_function/index.html @@ -0,0 +1,31 @@ +--- +title: Callback függvény +slug: Glossary/Callback_function +translation_of: Glossary/Callback_function +--- +<p>A callback függvény (vagy visszahívó függvény) egy függvény, amit egy másik függvénynek adunk át argumentumként, ami aztán majd a külső függvényen belül hívódik meg, hogy végrehajtson egy adott eseményt.</p> + +<p>Íme egy példa:</p> + +<pre class="brush: js notranslate">function üdvözlés(név) { + alert('Hello ' + név); +} + +function felhasználóInputFeldolgozása(callback) { + const név = prompt('Kérlek add meg a neved!'); + callback(név); +} + +felhasználóInputFeldolgozása(üdvözlés);</pre> + +<p>A fenti példa egy {{glossary("synchronous")}} (szinkron) callback, mivel azonnal végrehajtódik.</p> + +<p>Megjegyzés: a callback függvények gyakran használatosak arra a célra, hogy folytassák a kód végrehajtását, miután egy {{glossary("asynchronous")}} (aszinkron) művelet végrehajtása befejeződött. Ezeket aszinkron callback-nek nevezzük. Egy jó példa erre a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">.then()</a></code> blokkon belül végrehajtott függvények, miután az adott ígéret (<code>promise</code>) teljesül (<code>fulfill</code>), vagy el lesz utasítva (<code>reject</code>). Ezt a felépítést sok modern web API használja, például a <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> is.</p> + +<h2 id="Tudj_meg_többet"><strong>Tudj meg többet</strong></h2> + +<h3 id="Általános_tudás"><strong>Általános tudás</strong></h3> + +<ul> + <li>{{interwiki("wikipedia", "Callback_(computer_programming)", "Callback")}} on Wikipedia (angol nyelvű szócikk)</li> +</ul> diff --git a/files/hu/glossary/css/index.html b/files/hu/glossary/css/index.html new file mode 100644 index 0000000000..1a4a5ff97f --- /dev/null +++ b/files/hu/glossary/css/index.html @@ -0,0 +1,41 @@ +--- +title: CSS +slug: Glossary/CSS +tags: + - CSS + - Szójegyzék + - Web +translation_of: Glossary/CSS +--- +<p><span class="seoSummary">A<strong> CSS</strong> (Cascading Style Sheets) egy deklaratív nyelv, ami a weblapok kinézetét irányítja a {{glossary("browser", "böngésző")}}ben.</span> A böngésző hozzáilleszti a megfelelő CSS stílusdeklarációt a kiválaszott elemekre, hogy rendesen meg tudja jeleníteni azokat. Egy stílus deklaráció tulajdonságokat és értékeket tartalmaz, amik meghatározzák hogyan fog kinézni egy weboldal.</p> + +<p>A CSS a három leglényegesebb Web technológia egyike, úgy mint a {{Glossary("HTML")}} és {{Glossary("JavaScript")}}. A CSS általában {{Glossary("Element","HTML elemeket")}} díszít, de más jelölőnyelvekkel is lehet használni, mint például az {{Glossary("SVG")}} vagy az {{Glossary("XML")}}.</p> + +<p>Egy CSS szabály {{Glossary("CSS Property","tulajdonságok")}} összessége, amiket egy {{Glossary("CSS selector", "szelektorhoz")}} lehet társítani. Itt egy példa, ami minden HTML bekezdést sárgává fest fekete hátérrel:</p> + +<pre class="brush: css notranslate">/* A "p" szelektor azt jelzi, hogy a dokumentum minden bekezdését érinteni fogja a szabály +p { + /* A "color" tulajdonság határozza meg a szöveg színét, ebben az esetben sárga */ + color: yellow; + + /* A "background-color" tulajdonság a háttérszínt határozza meg, ebben az esetben fekete */ + background-color: black +}</pre> + +<p>A "lépcsőzetesség" arra a szabályra vontakozik, ami meghatározza a szelektorok prioritási sorrendjét. Ez egy nagyon fontos tulajdonság, mivel egy bonyolultabb webodalon több ezernyi CSS szabály is lehet.</p> + +<h2 id="Tudjon_meg_többet">Tudjon meg többet</h2> + +<h3 id="Általános_tudnivalók">Általános tudnivalók</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Learn/CSS">Tanulj CSS-t</a></li> + <li>{{interwiki("wikipedia", "CSS")}} a Wikipédián</li> +</ul> + +<h3 id="Technikai_referenciák">Technikai referenciák</h3> + +<ul> + <li><a href="/hu/docs/CSS">CSS dokumentáció az MDN-en</a></li> + <li><a href="http://www.w3.org/Style/CSS/current-work" rel="external">A CSS munkacsoport jelenleg zajló munkái</a></li> +</ul> diff --git a/files/hu/glossary/elso_osztalyu_funkciok/index.html b/files/hu/glossary/elso_osztalyu_funkciok/index.html new file mode 100644 index 0000000000..5a36982129 --- /dev/null +++ b/files/hu/glossary/elso_osztalyu_funkciok/index.html @@ -0,0 +1,103 @@ +--- +title: Elsőrendű függvények +slug: Glossary/Elso_osztalyu_funkciok +tags: + - JavaScript + - Szkriptelés + - Szójegyzék +translation_of: Glossary/First-class_Function +--- +<p>Egy programnyelvnek <strong>Elsőrendű függvény</strong>ei vannak, ha a nyelv függvényeit úgy kezeljük mint a többi változót. Egy ilyen nyelveben függvényeket adhatunk meg más függvények paramátereként, függvények más függvényeket adhatnak vissza és váltózókhoz is hozzárendelhetjük őket.</p> + +<h2 id="Példa_Függvény_hozzárendelése_változóhoz">Példa | Függvény hozzárendelése változóhoz</h2> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">const foo = function() { + console.log("foobar"); +} +// Meghívás a változóra való hivatkozással +foo(); +</pre> + +<p>Egy <code>Névtelen függvényt</code> rendeltünk egy <code>Váltózóhoz</code>, ezután a változó segítségével meghívtuk a függvényt úgy, hogy zárójelet tettünk <code>()</code> a változónév végére.</p> + +<div class="note"> +<p><strong>Ha a függvény el is lenne nevezve, </strong>akkor is használhatnánk a változót a meghívására. Az elnevezés segítségünkre lehet a hibakeresésé során, <em>de nem érinti a függvény meghívási módját.</em></p> +</div> + +<h2 id="Példa_Függvény_átadása_argumentumként">Példa | Függvény átadása argumentumként</h2> + +<h3 id="JavaScript_2">JavaScript</h3> + +<pre class="brush: js">function koszones() { + return "Helló, "; +} +function udvozlet(koszont, nev) { + console.log(koszont() + nev); +} +// `koszones` átadása argumentumként az `udvozlet` függénynek +udvozlet(koszones, "JavaScript!"); +</pre> + +<p>A <code>koszones()</code> függvényt adjuk át az <code>udvozlet()</code> függvény argumentumaként, ami magyarázatot ad arra, hogy hogyan tudjuk a függényeket <code>érték</code>ként kezelni.</p> + +<div class="note"> +<p>A függvényt, aminek egy másik függvényt adunk át argumentumként, <strong><a href="/en-US/docs/Glossary/Callback_function">Visszahívó Függvénynek</a></strong> nevezzük. <em><code>koszones</code> egy visszahívó függvény.</em></p> +</div> + +<h2 id="Példa_Függvény_visszatérítése">Példa | Függvény visszatérítése</h2> + +<h3 id="JavaScript_3">JavaScript</h3> + +<pre class="brush: js">function koszones() { + return function() { + console.log("Helló!"); + } +} +</pre> + +<p>Ebben a példában egy függvényt kell visszatérítenünk egy másik függvényből - <em>Azért tudjuk ezt megtenni, mert a JavaScript </em><em>a függvényeket </em><em><code>érték</code></em><em>ként kezeli.</em></p> + +<div class="note"> +<p>Azt a függvényt, amely egy másik függnény térít vissza, <strong>Felsőbbrend</strong><strong>ű Függvény</strong>nek nevezzük.</p> +</div> + +<p>Visszatérve a példánkra; most a <code>koszones</code> függvényt kell meghívnunk, amit <code>Névtelen Függvény</code>ként kaptunk vissza. Ez kétféle módon lehetséges:</p> + +<h3 id="1-_Változó_használata">1- Változó használata</h3> + +<pre class="brush: js">const koszones = function() { + return function() { + console.log("Helló!"); + } +} +const fuggvenyem = koszones(); +fuggvenyem(); +</pre> + +<p>Így megkapjuk a <code>Helló!</code> üzenetet.</p> + +<div class="note"> +<p>Változót kell használnunk. Ha <code>koszones</code>t közvetlenül hívtuk volna meg, a függvényt adta volna vissza <strong>anélkül, hogy meghívta volna a visszatérített függvényt</strong>.</p> +</div> + +<h3 id="2-_Dupla_zárójel_használata">2- Dupla zárójel használata</h3> + +<pre class="brush: js">function koszones() { + return function() { + console.log("Helló!"); + } +} +koszones()(); +</pre> + +<p>Dupla zárojelet <code>()()</code> használunk, hogy meghívjuk a visszatérített függvényt.</p> + +<h2 id="Tudjon_meg_többet">Tudjon meg többet</h2> + +<h3 id="Általános_Ismeretek">Általános Ismeretek</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Elsőrendű függvény", "Elsőrendű függvények")}} a Wikipédián</li> +</ul> diff --git a/files/hu/glossary/index.html b/files/hu/glossary/index.html new file mode 100644 index 0000000000..3bb931c888 --- /dev/null +++ b/files/hu/glossary/index.html @@ -0,0 +1,27 @@ +--- +title: Szójegyzék +slug: Glossary +tags: + - Beginner + - Glossary + - Index + - Landing + - NeedsTranslation + - TopicStub +translation_of: Glossary +--- +<div style="max-width: 300px; float: right; margin: 0 0 .5em 1em;">{{LearnBox({"title":"Learn a new term:"})}}</div> + +<p><span class="seoSummary">A Webes technológiák zsargonok és rövidítések hosszú listáját használják dokumentációikban és a fejlesztésük során. Ez a szójegyzék azon szavak és rövidítések definícióját tartalmazza, amelyek ismeretére szükség lehet ahhoz, hogy ön meg tudja érteni és fejleszteni tudja a webet.</span></p> + +<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p> + +<h2 id="Közreműködés_a_szójegyzékben">Közreműködés a szójegyzékben</h2> + +<p>Ez a szójegyzék egy örökösen folyamatban lévő munka. Segíthet a fejlesztésében <a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">új bejegyzések hozzáadásaával</a> vagy a már meglévők javításával. Úgy kezdhet bele a legkönnyebben, ha rákattint az alábbi linkre vagy kiválasztja valamelyik ajánlott kifejezést lentebb.</p> + +<p><strong><a href="/en-US/docs/new?parent=4391">Új bejegyzés hozzáadása a szójegyzékhez</a></strong></p> + +<p>{{GlossaryList({"terms":[], "filter":"notdefined", "css":"multiColumnList"})}}</p> + +<p>Ha többet szeretne megtudni arról, hogyan tud közreműködni a szójegyzékben, látogassa meg <a href="/en-US/docs/MDN/Doc_status/Glossary">a szójegyzék dokumentációjának oldalát</a>.</p> diff --git a/files/hu/glossary/javascript/index.html b/files/hu/glossary/javascript/index.html new file mode 100644 index 0000000000..ab5af7cb3f --- /dev/null +++ b/files/hu/glossary/javascript/index.html @@ -0,0 +1,45 @@ +--- +title: JavaScript +slug: Glossary/JavaScript +tags: + - JavaScript +translation_of: Glossary/JavaScript +--- +<p class="summary"><span class="seoSummary">A JavaScript (vagy „JS”)<strong> </strong>egy programozási nyelv, amelyet leggyakrabban dinamikus, kliensoldali szkriptekhez használnak weblapokon, de gyakran használják {{Glossary("Server","kiszolgáló")}}oldalon is, például a <a href="https://nodejs.org/" rel="external">Node.js</a> futtatókörnyezetben.</span></p> + +<p>A JavaScript <strong>nem összetévesztendő</strong> a <a href="https://hu.wikipedia.org/wiki/Java_(programoz%C3%A1si_nyelv)">Java programozási nyelvvel</a>. Bár a „Java” és a „JavaScript” is az Oracle USA-ban és sok más országban bejegyzett védjegye, a két programozási nyelv szintaktikája, szematikája és alkalmazási köre jelentős mértékben eltér.</p> + +<p>A JavaScriptet elsődlegesn böngészőben használják, és lehetővé teszi, hogy a fejlesztők módosítsák a weboldal tartalmát a {{Glossary("DOM")}}-on keresztül, adatokat kezeljenek {{Glossary("AJAX")}} és {{Glossary("IndexedDB")}} segítségével, grafikákat rajzoljanak a {{Glossary("canvas")}} használatával, különböző {{Glossary("API","API-kkal")}} interakcióba lépjenek a böngészőt futtató eszközzel, és ez még nem minden. A JavaScript egyike a világ leggyakrabban használt nyelveinek, köszönhetően a böngészőkben elérhető {{Glossary("API","API-k")}} jelentős terjedésének és teljesítménybeli fejlesztéseinek.</p> + +<h2 class="column-container" id="Eredet_és_történelem">Eredet és történelem</h2> + +<p>Eredetileg kiszolgálóoldali nyelvként találta ki Brendan Eich (akkor a Netscape Corporation munkatársa), aztán a JavaScript megérkezett a Netscape Navigator 2.0-ban, 1995 szeptemberében. A JavaScript azonnali sikernek örvendett, és 1996 augusztusában az {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} bevezette a JavaScript támogatását, JScript néven.</p> + +<p>1996 novemberében a Netscape elkezdett az ECMA International szabványügyi szervezettel azon dolgozni, ohgy iparági szabvánnyá tegyék a JavaScriptet. Azóta a szabványosított JavaScript neve ECMAScript, és az ECMA-262 alatt specifikált, és amely legfrissebb (tizedik, ES2019) kiadása 2019 júniusa óta érhető el.</p> + +<p>Nemrégiben a JavaScript népszerűsége még tovább nőtt a <a href="https://nodejs.org/" rel="external">Node.js</a> platform sikere miatt – eza legnépszerűbb keresztplatformos JavaScript futtatókörnyezet a böngészőkön kívül. A Node.js – a <a href="https://en.wikipedia.org/wiki/V8_(JavaScript_engine)">Chrome V8 JavaScript-motorjára</a> építve – lehetővé teszi a fejlesztőknek, hogy a fejlesztők JavaScripttel programozzák a számítógépet, és teljes funkcionalitással rendelkező {{Glossary("HTTP", "HTTP-")}} és {{Glossary("Web Sockets", "WebSocket")}}-kiszolgálókat állíthassanak össze.</p> + +<h2 id="További_tudnivalók">További tudnivalók</h2> + +<h3 id="Általános_ismeretek">Általános ismeretek</h3> + +<ul> + <li>{{interwiki("wikipedia", "JavaScript", "JavaScript")}} a Wikipédián</li> +</ul> + +<h3 id="A_JavaScript_megtanulása">A JavaScript megtanulása</h3> + +<ul> + <li>A {{Link("/en-US/docs/Web/JavaScript/Guide")}} az MDN-en</li> + <li><a href="http://nodeschool.io/#workshoppers">A "javascripting" műhely a NodeSchool-on</a></li> + <li><a href="https://www.codecademy.com/tracks/javascript" rel="external">A JavaScript kurzus a codecademy.com-on</a></li> + <li><a href="http://ejohn.org/apps/learn/" rel="external">John Resig <em>Learning Advanced JavaScript </em>könyve</a></li> +</ul> + +<h3 id="Műszaki_referencia">Műszaki referencia</h3> + +<ul> + <li><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" rel="external">A legfrissebb ECMAScript szabvány</a></li> + <li>A {{Link("/en-US/docs/Web/JavaScript/reference")}} az MDN-en</li> + <li><a href="http://eloquentjavascript.net/" rel="external">Az <em>Eloquent JavaScript</em> könyv</a></li> +</ul> diff --git a/files/hu/glossary/node.js/index.html b/files/hu/glossary/node.js/index.html new file mode 100644 index 0000000000..d886cbd416 --- /dev/null +++ b/files/hu/glossary/node.js/index.html @@ -0,0 +1,24 @@ +--- +title: Node.js +slug: Glossary/Node.js +translation_of: Glossary/Node.js +--- +<p>A Node.js egy többplatformú {{Glossary("JavaScript")}} futási környezet melynek segítségével szerveroldali és hálózati alkalmazásokat fejleszthetünk JavaScriptben.</p> + +<h2 id="Tudjon_meg_többet">Tudjon meg többet</h2> + +<h3 id="Általános_Ismeretek">Általános Ismeretek</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Node.js")}} a Wikipédián</li> + <li><a href="https://nodejs.org/">Node.js weboldala (angol)</a></li> +</ul> + +<h3 id="Technical_information">Technical information</h3> + +<ul> + <li><a href="https://nodejs.org/api/">API referencia dokumentáció</a></li> + <li><a href="https://nodejs.org/documentation/tutorials/">Útmutatók</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/hu-HU/docs/Glossary")}}</div> diff --git a/files/hu/kozossegi_api/index.html b/files/hu/kozossegi_api/index.html new file mode 100644 index 0000000000..7ad4528f11 --- /dev/null +++ b/files/hu/kozossegi_api/index.html @@ -0,0 +1,56 @@ +--- +title: Közösségi API +slug: Kozossegi_API +translation_of: Archive/Social_API +--- +<p>A Közösségi API egy új API, hogy a webböngészőknek könnyebb legyen integrálni a közösségi média szolgáltatásokat. Amint egy közösségi szolgáltató bevezetésre kerül a Firefoxban, lehetővé válik a böngésző számára 'in-chrome' felhasználói vezérlők és a szolgáltatáshoz kapcsolodó információk megjelenítése. A következő cikkek leírják, hogyan vezessen be közösségi szolgáltatást.</p> +<div class="note"> + <p><strong>Megjegyzés:</strong> Az aloldalakon lévő tartalom többsége kidolgozott de még nincs átmigrálva ebbe a fastruktúrába; <a href="/en-US/docs/User:Sheppy/Social_API_temp" title="/en-US/docs/User:Sheppy/Social_API_temp">átmenetileg itt találhatja meg</a>.</p> +</div> +<div class="row topic-page"> + <div class="section"> + <h2 class="Documentation" id="Közösségi_API_dokumentáció">Közösségi API dokumentáció</h2> + <p>Ajánlás a közösségi szolgáltatás munkás API-hoz</p> + <p><a href="/en-US/docs/DOM/navigator.mozSocial" title="/en-US/docs/DOM/navigator.mozSocial">Közösségi szolgáltatás tartalom API: MozSocial</a></p> + <p>Ajánlás a közösségi szolgáltatás tartalom API-hoz, amelyet a {{domxref("navigator.MozSocial")}} objektum nyújt.</p> + <p><a href="/en-US/docs/Social_API/Widgets" title="/en-US/docs/Social_API/Widgets">Közösségi szolgáltatás widgetek</a></p> + <p>Útmutató a közösségi szolgáltatás által nyújtott widgetekhez.</p> + <p><a href="/en-US/docs/Social_API/Implementing_chat_functionality" title="/en-US/docs/Social_API/Implementing_chat_functionality">Chat funkció megvalósítása</a></p> + <p>Útmutató a chat jellemzők megvalósításához a Közösségi API használatával</p> + <dl> + <dt> + <a href="/en-US/docs/Social_API/Glossary" title="/en-US/docs/Social_API/Glossary"><span id="cke_bm_71S" style="display: none;"> </span>Közösségi API szójegyzék</a><span id="cke_bm_71E" style="display: none;"> </span></dt> + <dd> + Provides definitions of key terms you'll need to understand when using the Social API.</dd> + <dt> + <a href="/en-US/docs/Social_API/Guide" title="/en-US/docs/Social_API/Guide">Közösségi API és közösségi szolgáltatás útmutató</a></dt> + <dd> + Bevezetés és útmutató a Közösségi API-hoz és a kapcsolodó szolgálgatásokhoz.</dd> + <dt> + <a href="/en-US/docs/Social_API/Manifest" title="/en-US/docs/Social_API/Manifest">Közösségi szolgáltatás jegyzék</a></dt> + <dd> + A jegyzék—(TBD: és útmutató az építéshez)—leírása szükséges.</dd> + <dt> + <a href="/en-US/docs/Social_API/Service_worker_API_reference" title="/en-US/docs/Social_API/Service_worker_reference">Közösségi szolgáltatás munkás API ajánlás</a></dt> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Social" title="/en-US/docs/tag/CSS">Összes megtekintése....</a></span></p> + </div> + <div class="section"> + <p class="Community">Segítség kérése a közösségtől</p> + <p>Segítségre van szüksége a Közösségi API-val összefüggő problémában és nem találja a megoldást a dokumentációban?</p> + <ul> + <li> + <p>Kérdezzen a Mozilla IRC csatornáján<br> + <a href="irc://irc.mozilla.org/socialdev" title="irc://irc.mozilla.org/socialdev">#socialdev</a></p> + </li> + </ul> + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Ne felejtse a netikettet...</a></span></p> + <p class="Tools"><strong>Eszközök és demók</strong></p> + <p><a href="https://github.com/mixedpuppy/socialapi-demo" title="https://github.com/mixedpuppy/socialapi-demo">Egy minta közösségi szolgáltatás a github</a>on.<br> + <a href="/en-US/docs/social_API_Devtools" title="/en-US/">Hogy használja a Firefox Fejlesztői Eszközeit a Közösségi API-val.</a></p> + <p><span class="alllinks"><a href="/en-US/docs/tag/Social" title="/en-US/docs/tag/CSS:Tools">Összes megtekintése...</a></span></p> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Kapcsolodó témakörök</h2> + <p><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Webes alkalmazások megnyitása</a></p> + </div> +</div> +<p> </p> diff --git a/files/hu/learn/html/bevezetes_a_html-be/index.html b/files/hu/learn/html/bevezetes_a_html-be/index.html new file mode 100644 index 0000000000..d5f2c7239a --- /dev/null +++ b/files/hu/learn/html/bevezetes_a_html-be/index.html @@ -0,0 +1,58 @@ +--- +title: Bevezetés a HTML-be +slug: Learn/HTML/Bevezetes_a_HTML-be +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>A {{glossary("HTML")}} alapvetően egy egyszerű nyelv. Olyan <a href="/hu/docs/Glossary/Element">elemekből</a> áll, amelyekkel különböző jelentést társíthatunk szövegrészleteknek (például egy bekezdés, egy számozott lista, egy táblázat sora), struktúrálhatjuk a dokumentumot logikai részekre (például fejléc, navigációs sáv, három oszlopos tartalom), vagy beilleszthetünk más tartalmakat az oldalunkba (például képeket vagy videót).</div> + +<div>Ez a modul bemutatja ezek közül az első kettőt, és megismertet az alapvető fogalmakkal és a szintaxissal, amiket tudnod kell a HTML megértéséhez.</div> + +<h2 id="Előfeltételek">Előfeltételek</h2> + +<p>Mielőtt elkezded ezt a modult, tudnod kell pár dolgot.<br> + A kezdéshez nincs szükséged előzetes HTML ismeretekre, ugyanakkor legalább alapszinten ismerned kell a számítógép és az internet használatát. Létre kell hoznod egy alapvető munkakörnyezetet (amit az <a href="/hu/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Alapvető szoftverek telepítése</a> útmutatónk részletesen ismertet), és tudnod kell, hogyan hozhatsz létre és kezelhetsz fájlokat (amit a <a href="/hu/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Fájlok kezelése</a> útmutatónk részletesen ismertet). Mindkettő része a <a href="/hu/docs/Learn/Getting_started_with_the_web">Kezdő lépések</a> modulnak.</p> + +<div class="note"> +<p><strong>Megjegyzés</strong>: Ha olyan számítógépen / táblagépen / vagy egyéb eszközön dolgozol, amelyen nem tudsz fájlokat létrehozni, próbáld ki (a legtöbb) példa kódot valamelyik online programban, mint amilyen a <a href="http://jsbin.com/">JSBin</a> vagy a <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Útmutatók">Útmutatók</h2> + +<p>Ez a modul olyan útmutatókat tartalmaz, amelyek végigvezetnek a HTML nyújtotta összes lehetőségen, és bőséges lehetőséget nyújtanak a képességeid tesztelésére.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML Alapok</a></dt> + <dd>Magában foglalja a HTML abszolút alapjait — definiáljuk az elemeket, attribútumokat, és más fontos paramétereket, valamint megmutatjuk hol illeszkednek a nyelvhez. Azt is megmutatjuk, hogy egy tipikus HTML oldal hogyan van struktúrálva illetve egy HTML elem hogyan van struktúrálva, valamint elmagyarázzuk milyen egyéb fontos nyelvi funkciók vannak. Útközben játszunk is egy kicsit a HTML-el, hogy felkeltsük az érdeklődésedet.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Mi van a head-ben? Metaadatok HTML-ben</a></dt> + <dd>A HTML-dokumentum feje (<a href="/en-US/docs/Glossary/Head">head</a>) az a rész, amely nem jelenik meg a webböngészőben az oldal betöltésekor. Olyan információkat tartalmaz, mint például az oldal címe ({{htmlelement("title")}}), linkek a {{glossary("CSS")}} fájlokra, az egyedi ikonok elérési útvonalai, illetve a metaadatok (adatok a HTML-ről, például arról, hogy ki írta, vagy a dokumentumot leíró fontos kulcsszavakat).</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML szöveg alapjai</a></dt> + <dd>A HTML egyik fő feladata, hogy jelentést adjon a szövegnek (más néven <a href="/en-US/docs/Glossary/Semantics">szematika</a>), hogy a böngésző tudja, hogyan kell helyesen megjeleníteni. Ez a cikk megmutatja hogyan tördelheted fel a szöveget fejlécekre és bekezdésekre, hogyan hangsúlyozhatsz szavakat, vagy készíthesz listákat és egyebeket HTML segítségével..</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hivatkozások létrehozása</a></dt> + <dd>A hivatkozások (hyperlinks) nagyon fontosak — ők teszik az internetet internetté. Ez a cikk egy link elkészítéséhez szükséges szintaxist mutat be, illetve bemutat néhány praktikát.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Speciális szövegformázás</a></dt> + <dd>Rengeteg elem van a HTML-ben a szövegek formázására, amelyeket a <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML szöveg alapjai</a> cikkben nem találsz meg. Ezek az elemek kevésbé ismertek, pedig ismeretük még mindig hasznos lehet. Ebben a cikkben megtanulhatod az idézetek, a leírási listák, a számítógépes kódok és egyéb kapcsolódó szövegek, úgy mint indexek, felső indexek vagy kapcsolati adatok megjelölését.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Dokumentum- és weboldalszerkezet</a></dt> + <dd>Az oldal egyes részeinek (például bekezdés vagy kép) meghatározása mellett a HTML-t arra is használják, hogy meghatározza webhely területeit (például fejléc, lábléc, navigációs sáv, tartalom). Ez a cikk megvizsgálja, hogyan kell megtervezni egy alapvető webhelystruktúrát, illetve hogyan kell megírni HTML-ben.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Hibakeresés HTML-ben</a></dt> + <dd>HTML-t írni szuper, de mi van akkor, ha valamit elromlik és nem találod a hibát? Ez a cikk bemutat néhány eszközt, amely segíthet.</dd> +</dl> + +<h2 id="Tesztek">Tesztek</h2> + +<p>Ezekkel a tesztekkel ellenőrizheted, hogy mennyire sikerült megértened a fenti útmutatókban leírtakat.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Egy levél írása </a></dt> + <dd>Mindannyian megtanulunk egy levelet írni előbb vagy utóbb; ez egy hasznos példa a szövegformázási készségek tesztelésére. Ebben a tesztben egy levelet kell megformázni.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Egy tartalom oldalának strukturálása</a></dt> + <dd>Ez a tesz ellenőrzi hogyan tudsz struktúrálni HTML-el egy oldalt, amely tartalmaz fejlécet, láblécet, navigációs sávot, egy fő tartalmat és egy oldalsávot.</dd> +</dl> + +<h2 id="Kapcsolódó_témakörök">Kapcsolódó témakörök</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">A webes műveltség alapjai 1</a></dt> + <dd>Egy kiváló Mozilla alapítványi tanfolyam, amely a <a href="https://developer.mozilla.org/hu/docs/Learn/HTML/Bevezetes_a_HTML-be">Bevezetés a HTML-be</a> c. útmutatóban bemutatott sok készség vizsgálatára és tesztelésére szolgál. A tanulók megismerkedhetnek az olvasással, az írással és a weben való részvételellel ebben a hat részből álló modulban. Fedezze fel a web alapjait a alkotás és az együttműködés révén.</dd> +</dl> diff --git a/files/hu/learn/html/index.html b/files/hu/learn/html/index.html new file mode 100644 index 0000000000..df97989e28 --- /dev/null +++ b/files/hu/learn/html/index.html @@ -0,0 +1,58 @@ +--- +title: 'Learning HTML: Guides and tutorials' +slug: Learn/HTML +tags: + - Beginner + - Guide + - HTML + - Intro + - Learn + - NeedsTranslation + - Topic + - TopicStub +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>Ideally, you should start your learning journey by learning HTML. Start by reading <a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>. You may then move on to learning about more advanced topics such as:</p> + +<ul> + <li><a href="/en-US/docs/Learn/CSS">CSS</a>, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)</li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)</li> +</ul> + +<p>Before starting this topic, you should have at least basic familiarity with using computers and using the web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>before attempting this topic, however, it isn't absolutely necessary; much of what is covered in the <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> article is also covered in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, albeit in a lot more detail.</p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> + <dd>This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> + <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt> + <dd>Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt> + <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.</dd> +</dl> + +<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2> + +<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p> + +<h2 id="See_also">See also</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN</dt> + <dd>The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd> +</dl> +</div> diff --git a/files/hu/learn/index.html b/files/hu/learn/index.html new file mode 100644 index 0000000000..55b880bac6 --- /dev/null +++ b/files/hu/learn/index.html @@ -0,0 +1,130 @@ +--- +title: A webfejlesztés megtanulása +slug: Learn +tags: + - CSS + - HTML + - Kezdő + - Tanulás + - Web + - bevezetés + - tartalomjegyzék +translation_of: Learn +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<div> +<p class="summary">Üdvözlünk az MDN tanulórészlegén! Az itt található témakörök elsődleges célja, hogy kezdő fejlesztők könnyedén megtalálhassák azokat az információkat, amelyek szükségesek az egyszerű weboldalak elkészítéséhez.</p> +</div> + +<p>Nem az a célunk, hogy kezdőből szakértőt faragjunk belőled, hanem kezdőből középhaladót. Onnantól kezdve már elindulhatsz a saját utadon, ahonnan már könnyedén tanulhatsz az <a href="https://developer.mozilla.org/en-US/">MDN többi részéből</a> és más középhaladó és haladó anyagokból, amelyekhez már sok előzetes tudás szükséges.</p> + +<p>Ha abszolút kezdő vagy, akkor a webfejlesztés nagy kihívás lehet, de segítünk neked, és biztosítjuk számodra a szükséges információkat ahhoz, hogy kényelmesen és jól megtanuld a különböző témákat. Érezd magad otthon akkor is, ha csak diákként böngészel, ha tananyagot keresel a diákjaidnak, vagy csak hobbiként szeretnél többet megtudni a webes technológiák működéséről!</p> + +<h2 id="Újdonságok">Újdonságok</h2> + +<p>A tanulórészleg tartalma rendszeresen bővül. A változások követéséhez elindítottuk a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Release_notes">Tanulórészleg kiadási megjegyzései</a> oldalt – nézz vissza rendszeresen.</p> + +<p>Ha kérdésed van az itt tárgyalt témákkal kapcsolatban, vagy úgy érzed, hogy valami hiányzik, akkor küldj nekünk egy üzenetet a <a href="https://discourse.mozilla.org/c/mdn">Discourse fórumunkon</a>.</p> + +<h3 id="Front-end_webfejlesztő_szeretnél_lenni">Front-end webfejlesztő szeretnél lenni?</h3> + +<p>Összeraktunk egy oktatóanyagot, amely tartalmazza az összes alapvető információt, amire szükséged lesz a cél elérése érdekében.</p> + +<p><a class="cta primary" href="https://wiki.developer.mozilla.org/docs/Learn/Front-end_web_developer">Fogj hozzá</a></p> + +<h2 id="Hol_kezdjük">Hol kezdjük?</h2> + +<ul class="card-grid"> + <li><span>Teljesen kezdő:</span> Ha abszolút kezdő vagy, akkor ajánljuk neked a <a href="/en-US/docs/Learn/Getting_started_with_the_web">Kezdjük a Webbel</a> modult, amely jó alapot nyújt a webfejlesztés megértéséhez.</li> + <li><span>Az alapokon túl:</span> Ha már kapizsgálod már valamennyire a webfejlesztést, akkor a következő lépés a {{glossary("HTML")}} és a {{glossary("CSS")}} : Kezdd a <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Bevezetés a HTML-be</a> modullal és haladj tovább a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Bevezetés a CSS</a> modullal.</li> + <li><span>Tovább a szkripteléshez:</span> Ha már úgyérzed hogy HTML és CSS a barátod, vagy inkább a kódolás érdekel, akkor haladj tovább a {{glossary("JavaScript")}} vagy kiszolgálóoldali (server-side) fejlesztés felé. Kezdd a <a href="/en-US/docs/Learn/JavaScript/First_steps">Első lépések a JavaScripttel </a> és a <a href="/en-US/docs/Learn/Server-side/First_steps">Első lépések kiszolgálóoldalon</a> modullal.</li> + <li><span>Keretrendszerek és eszközök:</span> Miután elsajátítottad a HTML, CSS és JavaScript alapjait, ismerkedj meg a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">kliensoldali webfejlesztő eszközökkel</a>, és fontold meg, hogy beleásod magad a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">kliensoldali JavaScript keretrendszerekbe</a>, és a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side">kiszolgálóoldali weboldal-programozásba</a>.</li> +</ul> + +<div class="note"> +<p><strong>Megjegyzés</strong>: <a href="/en-US/docs/Glossary">Szószedetünkben</a> megtalálhatod a szaknyelvi definíciókat.<strong> </strong>Emellett pedig ha konkrét kérdésed van a webfejesztésről, akkor a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions">Gyakori kérdések</a> szakaszunk lehet, hogy segíteni fog.</p> +</div> + +<p>{{LearnBox({"title":"Véletlenszerű bejegyzés a szószedetből"})}}</p> + +<h2 id="Lefedett_témakörök">Lefedett témakörök</h2> + +<p>Itt egy lista az MDN tanuló oldal által lefedett témakörökről.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Ismerkedés a webfejlesztéssel</a></dt> + <dd>Gyakorlati bevezető a webfejlesztésbe teljesen kezdőknek.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML – a web szerkezetének kialakítása</a></dt> + <dd>A HTML nyelv segítségével alakítjuk ki oldalaink szerkezetét és adunk jelentést, illetve célt a tartalmunknak. Ez a témakör részletesen bemutatja a HTML nyelvet.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS – a web dizájnolása</a></dt> + <dd>A CSS nyelv segítségével tudjuk a weboldalaink stílusát, elrendezését megadni, valamint viselkedést rendelhetünk oldalunkhoz, például animációkkal. Ez a témakör átfogó képet nyújt a CSS-ről.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript – dinamikus kliensoldali programozás</a></dt> + <dd>A Javascript szkript nyelv dinamikus funkcionalitást ad a weboldalakhoz. Ez a témakör megtanítja azokat az alapvető dolgokat, amelyek ahhoz szükségesek, hogy magabiztosan megértsük és írjunk Javascript kódot.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Akadálymentesítés – tegyük mindenki számára elérhetővé a webet</a></dt> + <dd>Az akadálymentesítés az a gyakorlat, amellyel a webes tartalmakat minél szélesebb rétegek számára elérhetővé tesszük fogyatékosság, használt eszköz, földrajzi elhelyezkedés vagy egyéb megkülönböztető tényezőktől függetlenül. Itt mindent megtanulhatsz, amit tudnod kell erről a témáról.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">Eszközök és tesztelés</a></dt> + <dd>Ebben a témakörben megismerheted a fejlesztők mindennapi munkája során használt eszközöket, mint például a különböző böngészők tesztelésére használt eszközök.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side">Kiszolgálóoldali webfejlesztés</a></dt> + <dd>Még ha a kliensoldali fejlesztés is a fő fókuszod, akkor is érdemes tudnod róla hogyan működnek a kiszolgálók, illetve a kiszolgálóoldali kódok. Ez a témakör általános leírást ad a kiszolgálóoldal működéséről, és részletes bemutatót találhatsz arról, hogyan kell felépíteni egy kiszolgálóoldali alkalmazást két népszerű keretrendszer segítsével: a Djangóval (Python) és az Expressel (node.js).</dd> +</dl> + +<h2 id="Példakódok_megszerzése">Példakódok megszerzése</h2> + +<p>A tanulórészlegen található összes kódpélda <a href="https://github.com/mdn/learning-area/">elérhető GitHubon</a>. Ha le akarod másolni őket a számítógépedra, akkor a legegyszerűbb megoldás a <a href="https://github.com/mdn/learning-area/archive/master.zip">master ág legfrissebb verziójának letöltése ZIP-fájlként</a>.</p> + +<p>Ha inkább a tárolót másolnád le, amely rugalmasabb és lehetővé teszi az automatikus frissítéseket, akkor kövesd a bonyolultabb utasításokat:</p> + +<ol> + <li><a href="https://git-scm.com/downloads">Telepítsd a Gitet</a> a számítógépre. Ez a verziókezelő rendszer, amelyre a GitHub is épít.</li> + <li>Nyisd meg a számítógép <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">parancssorát</a> (Windows) vagy a terminált (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>).</li> + <li>A tanulórészleg tárolójának egy „learning-area” mappába másolásához a jelenlegi munkakönyvtárban, használd a következő parancsot: + <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre> + </li> + <li>Beléphetsz a könyvtárba, és kikeresheted a megfelelő fájlokat (vagy a Finderrel/Fájlkezelővel, vagy a <a href="https://en.wikipedia.org/wiki/Cd_(command)"><code>cd</code> paranccsal</a>).</li> +</ol> + +<p>A következő lépésekkel frissítheted a <code>learning-area</code> tárolót a GitHubon lévő „master” verzió módosításaival:</p> + +<ol> + <li>A parancssorban/terminálban válts a <code>learning-area</code> könyvtárra a <code>cd</code> segítségével. Például, ha a szülőkönyvtárban vagy: + + <pre class="brush: bash notranslate">cd learning-area</pre> + </li> + <li>Frissítsd a tárolót a következő paranccsal: + <pre class="brush: bash notranslate">git pull</pre> + </li> +</ol> + +<h2 id="Lépj_kapcsolatba_velünk">Lépj kapcsolatba velünk</h2> + +<p>Ha szeretnél kapcsolatba lépni velünk bármivel is kapcsolatban, a legjobb módszer arra ha dobsz egy üzenetet a <a href="https://discourse.mozilla.org/c/mdn">Discourse fórumunkra</a>. Ha bármi észrevételed lenne, hiányzik valami az oldalról, valami nem állja meg a helyét, szeretnél egy új témát, nem értesz valamit, vagy bármi, nyugodtan írj nekünk.</p> + +<p>Ha szeretnéd a tartalmat bővíteni, vess egy pillantást a <a href="/en-US/Learn/How_to_contribute">hogyan tudok segíteni</a> oldalra vagy lépj velünk kapcsolatba! Csupa öröm ha felveszitek velünk a kapcsolatot legyél akár tanár, diák, vagy tapasztalt webfejlesztő.</p> + +<h2 id="Lásd_még">Lásd még</h2> + +<dl> + <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla fejlesztői hírlevé developer newsletter</a></dt> + <dd>A hírlevelünk webfejlesztők számára, ami kiváló információforrás minden tapasztalati szinten.</dd> + <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> + <dd>Egy kiváló forrás jövőbeli webfejlesztők számára – a Learn JavaScript egy interaktív környezet, rövid leckékkel és interaktív tesztekkel, melyet automata értékelés segít. Az első 40 lecke ingyenes, a teljes kurzus kis összegű, egyszeri fizetés fejében érhető el.</dd> + <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt> + <dd>Egy nagyszerű videósorozat a web alapjairól, kifejezetten azokat célozva, akik abszolút kezdők a webfejlesztésben. Készítette: <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd> + <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> + <dd>Nagyszerű interaktív oldal programozási nyelvek az alapoktól történő tanulására.</dd> + <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt> + <dd>Alapvető kódoláselmélet játékosított tanulási folyamattal. Főleg kezdőket céloz.</dd> + <dt><a href="https://code.org/">Code.org</a></dt> + <dd>Alapvető kódoláselmélet játékosított tanulási folyamattal. Főleg gyerekeket és teljesen kezdőket céloz.</dd> + <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt> + <dd>Ingynes és nyílt kurzusok műszaki készségek tanításához, mentorálással és projektalapú tanulással.</dd> + <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt> + <dd>Interaktív oldal oktatóanyagokkal és projektekkel a webfejlesztés elsajátításához.</dd> + <dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Webes írástudási térkép</a></dt> + <dd>Egy keretrendszer belépőszintű webes írástudáshoz és 21. századi készségekhez, amelyek kategóriánkénti oktatási tevékenységeket is biztosítanak.</dd> + <dt><a href="https://edabit.com/challenges/javascript">Edabit</a></dt> + <dd>Interaktív JavaScript kihívások ezrei.</dd> +</dl> diff --git a/files/hu/learn/ismerkedés_a_világhálóval/alapvető_programok_telepítése/index.html b/files/hu/learn/ismerkedés_a_világhálóval/alapvető_programok_telepítése/index.html new file mode 100644 index 0000000000..463216fd9f --- /dev/null +++ b/files/hu/learn/ismerkedés_a_világhálóval/alapvető_programok_telepítése/index.html @@ -0,0 +1,78 @@ +--- +title: Alapvető programok telepítése +slug: Learn/Ismerkedés_a_Világhálóval/Alapvető_programok_telepítése +tags: + - Kezdő + - böngésző + - ezközök + - kódszerkesztő + - programok + - szövegszerkesztő +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><span style="">Ebben a cikkben megmutatjuk milyen programokra lesz szükségünk egyszerű weboldalak fejlesztéséhez.</span></p> +</div> + +<h2 id="Milyen_eszközöket_használnak_a_profi_webfejlesztők">Milyen eszközöket használnak a profi webfejlesztők?</h2> + +<ul> + <li><strong>Modern számítógépet</strong>. Némelyeknek magátólértetődőnek tűnhet, de biztosan vannak, akik telefonról vagy könyvtárból olvassák ezt a cikket, ezért le kell szögezzük: a komoly webfejlesztéshez muszáj befektetni egy modern Windows, Linux vagy macOS futtatására képes számítógépbe.</li> + <li><strong>Kódszerkesztőt</strong>. Ez lehet egy egyszerűbb kódszerkesztő (pl. <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://atom.io/">Atom</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, esetleg <a href="https://www.vim.org/">VIM</a>), vagy egy hibrid megoldás (pl. <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver </a>vagy <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). A hétköznapokból ismert irodai szövegszerkesztők nem alkalmasak erre a feladatra, mivel a dokumentum formázásához olyan rejtett adatokat ír a fájlba, amik megzavarják a böngészőket.</li> + <li><strong>Modern böngészőket</strong>, a kód tesztelése. A legelterjedtebb böngészők ma a <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> és a <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. Erősen ajánlott a weboldalunkat különböző mobilkészülékeken, valamint a közönségünk által esetlegesen használt régebbi böngészőkben is tesztelni (például IE 8–10.) A gyengénlátó felhasználók böngészési élményét segíthet feltérképezni a <a href="https://lynx.browser.org/">Lynx</a>, egy grafikus felülettel nem rendelkező, karakter alapú, parancssoros böngésző.</li> + <li><strong>Grafikus szerkesztőt</strong>, mint például a <a href="https://www.gimp.org/">GIMP</a>, <a href="https://www.figma.com/">Figma</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, vagy <a href="https://www.adobe.com/products/xd.html">XD</a>, hogy a weboldalunkra szánt képeket optimalizálni tudjuk a Világhálóra.</li> + <li><strong>Verziókövetőt</strong>, amely segít nyomonkövetni a kód változását és elkerülni, hogy egymás lábára lépjünk a közös munkavégzés során. Jelenleg a <a href="http://git-scm.com/">Git</a> az egyik legnépszerűbb verziókövető, a <a href="https://github.com/">GitHub</a> és <a href="https://gitlab.com">GitLab</a> pedig közkedvelt online Git szolgáltatók.</li> + <li><strong>FTP programot.</strong> Régebbi webtárhelyeken használatos módszer a fájlok kezelésére, manapság egyre jellemzőbb, hogy FTP helyett Gitet használnak speciálisan erre a célra. Számtalan FTP/SFTP program közül választhatunk, például a <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> vagy a <a href="https://filezilla-project.org/">FileZilla</a>.</li> + <li><strong>Automatizációs eszközöket,</strong> mint a <a href="https://webpack.js.org/">Webpack</a>, <a href="http://gruntjs.com/">Grunt</a>, vagy a <a href="http://gulpjs.com/">Gulp</a>. Ezek a szoftvereszközök a fejlesztés során gyakran ismétlődő folyamatok automatizálására valóak, mint például a kódtömörítés (<em>minifying</em>), vagy a tesztek futtatása.</li> + <li>Könyvtárakat, keretrendszereket, egyéb újrafelhasználható szoftvercsomagokat, amelyek felgyorsítják a fejlesztést. A könyvtárak (<em>library</em>) valamilyen hasznos funkciót biztosítanak, amit beépíthetünk az alkalmazásunkba, míg a keretrendszerek (<em>framework</em>) komplett rendszerek, amelyekre a saját alkalmazásunkat alapozzuk.</li> + <li>És még számtalan egyéb, valamilyen konkrét problémát megoldó szoftvereszközt!</li> +</ul> + +<h2 id="Mire_van_feltétlenül_szükségem_a_kezdéshez">Mire van feltétlenül szükségem a kezdéshez?</h2> + +<p>Habár a fenti lista elsőre rémisztőnek tűnhet, a jó hír az, hogy ezeknek csupán egy töredéke szükséges a kezdéshez.</p> + +<p>A továbbiakban a két legszükségesebbre fókuszálunk: egy alkalmas szövegszerkesztőre és böngészőkre.</p> + +<h3 id="Kódszerkesztő">Kódszerkesztő</h3> + +<p>Szinte bizonyos, hogy már van valamilyen kódolásra alkalmas szövegszerkesztő a számítógépünkön. Windowson a <a href="https://hu.wikipedia.org/wiki/Jegyzettömb">Jegyzettömb</a>, macOS esetén a <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a> elő van telepítve. Linux esetén disztribúciófüggő az alapértelmezett szerkesztő, Ubuntu esetén ez a <a href="https://hu.wikipedia.org/wiki/Gedit">gedit</a>.</p> + +<p>Habár ezekkel a programokkal lehetséges kódot írni, vannak jobb alternatívák. A <a href="https://code.visualstudio.com/">Visual Studio Code</a> egy igen népszerű ingyenes kódszerkesztő, kimondottan programozást támogató funkciókkal.</p> + +<h3 id="Modern_böngészők">Modern böngészők</h3> + +<p>Tekintsük az operációs rendszerünknek megfelelő böngészők listáját és telepítsük őket a megadott linkek segítségével. Erősen ajánlott legalább két böngészőt telepíteni, mielőtt elkezdjük a tanulást, de a későbbi teszteléshez javasolt mindegyiknek a telepítése.</p> + +<ul> + <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://brave.com">Brave</a>.</li> + <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a>, <a href="https://brave.com">Brave</a> (Windows 10 esetén az Edge előtelepítve van; Windows 7-től kezdődően telepíthetjük az Internet Explorer 11 verzióját; egyéb esetben válasszunk más böngészőt).</li> + <li>macOS: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="https://brave.com">Brave</a> (macOS és iOS esetén a Safari az alapértelmezett böngésző).</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Figyelem</strong>: Az Internet Explorer nem kompatibilis némely modern webes technológiákkal, így előfordulhat, hogy nem tudja futtatni a projektünket. Általánosságban azonban elmondható, hogy nem kell aggódnunk az Internet Explorer miatt, mivel manapság nagyon kevesen használják — ugyanakkor az is előfordulhat, hogy olyan projektbe botlunk, ahol fontos az Internet Explorer támogatása.</p> +</div> + +<h3 id="Helyben_futó_webszerver">Helyben futó webszerver</h3> + +<p>Egyes példák futtatásához egy működő webszerverre lesz szükségünk. A <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a> cikk részletesen bemutatja, hogyan tudunk konfigurálni egyet.</p> + +<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="Modul_tartalomjegyzék">Modul tartalomjegyzék</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> diff --git a/files/hu/learn/ismerkedés_a_világhálóval/hogy_fog_kinézni_a_weboldalunk/index.html b/files/hu/learn/ismerkedés_a_világhálóval/hogy_fog_kinézni_a_weboldalunk/index.html new file mode 100644 index 0000000000..374aae6c40 --- /dev/null +++ b/files/hu/learn/ismerkedés_a_világhálóval/hogy_fog_kinézni_a_weboldalunk/index.html @@ -0,0 +1,92 @@ +--- +title: Hogy fog kinézni a weboldalunk +slug: Learn/Ismerkedés_a_Világhálóval/Hogy_fog_kinézni_a_weboldalunk +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><span style="">Ebben a cikkben áttekintjük a weboldalunk kódolása előtt szükséges alapvető tervezési lépéseket. Milyen tartalmat fogunk megjeleníteni? Milyen betűtípusokat és színeket képzelünk el? Egyáltalán, mi a weboldal legfőbb célja?</span></p> +</div> + +<h2 id="Első_lépés_tervezés">Első lépés: tervezés</h2> + +<p>Miről fog szólni a weboldalunk? Mi lesz a célja? Kezdésnek valami egyszerűre törekedjünk, például egy cím, egy kép és néhány bekezdés valamilyen konkrét dologról.</p> + +<p>Alapvető kérdések:</p> + +<ol> + <li><strong>Miről szóljon?</strong> Mi az ami érdekel? Kutyák? New York? Pac-Man?</li> + <li><strong>Mi lesz a konkrét megjelenített tartalom?</strong> Írjunk néhány bekezdést, találjunk ki egy címet és keressünk egy képet.</li> + <li><strong>Hogy fog kinézni az oldal?</strong> Nem kell mindent részletesen kitalálni előre, de jó, ha legalább az elrendezést, a háttérszíneket és a betűstílust nagyvonalakban meghatározzuk. Milyen kisugárzást szeretnénk? Hivatalosat? Vicceset? Figyelemfelhívót? Esetleg valami diszkrétet?</li> +</ol> + +<div class="note"> +<p><strong>Megjegyzés</strong>: A komplex projektek tervezése nagyságrendekkel bonyolultabb. Méretek, térközök, fogalmazási stílus, és így tovább. Ezeket az előírásokat egy úgynevezett design systemben (vagy más néven brand bookban) szokás összefoglalni. Íme egy példa, a <a href="https://design.firefox.com/photon/">Firefox Photon Design System</a>.</p> +</div> + +<h2 id="Vázlatos_arculati_terv">Vázlatos arculati terv</h2> + +<p>Ragadjunk papírt és ceruzát és skicceljük fel a weboldalunkat. Habár egy kép és néhány bekezdés esetén ez feleslegesnek tűnhet, valójában nagyon sokat segít, ha van egy hozzávetőleges ábránk arról, hogy mit is szeretnénk pontosan, ezért nem árt, ha már most hozzászokunk a folyamathoz.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> + +<div class="note"> +<p><strong>Megjegyzés</strong>: Még egy nagy, összetett weboldal esetén is gyakran ilyen egyszerű papíros vázlatokkal kezdődik a tervezés és az alapvető elképzelések megszilárdulása után készülnek digitális tervek, kattintható prototípusok.</p> + +<p>A webes csapatoknak sokszor tagja egy grafikus és egy {{Glossary("UX", "user experience")}} (UX, felhaszálói élmény) designer. A grafikus felel a megjelenés részletes megtervezéséért, míg a UX designer a weboldal megjelenési és működési alapvetéseit határozza meg úgy, hogy az felhasználóbarát legyen váljon.</p> +</div> + +<h2 id="Weboldal_elemeinek_összeállítása">Weboldal elemeinek összeállítása</h2> + +<p>Eljött az idő, hogy összeszedjük, pontosan mit is tartalmazzon a weboldalunk.</p> + +<h3 id="Szöveges_tartalom">Szöveges tartalom</h3> + +<p>Írjuk meg a konkrét szöveges tartalmat, ha még nem tettük volna meg.</p> + +<h3 id="Szín_téma">Szín téma</h3> + +<p>Nyissuk meg az MDN színválasztó <a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">segédeszközét</a> és válasszunk egy színt a weboldal általános szín témájának. Miután kiválasztottunk egy színt, egy <code>#660066</code> alakú kódot fogunk látni. Ez egy <em>hexa-kód</em> (hexadecimális, tizenhatos számrendszerbeli). Ez azonosítja a kiválasztott színt. Írjuk fel valahova.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="border-style: solid; border-width: 1px; height: 262px; width: 448px;"></p> + +<h3 id="Képek">Képek</h3> + +<p>Keressünk felhasználható képeket az Interneten (pl. Google Képek segítségével).</p> + +<ol> + <li>Az egyes képekre kattintva egy előnézetet kapunk, egyéb adatokkal (pl. felbontás)</li> + <li>Mentsük el a képet a számítógépre.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16599/updated-google-images.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Ne feledjük, hogy a legtöbb kép, így azok is, amelyeket a Google keresőjén keresztül találunk, jogvédettek. Használjuk a kereső licensz szűrőjét, hogy csökkentsük a szerzői jogok megsértésének valószínűségét.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16598/updated-google-images-licensing.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h3 id="Betűtípus">Betűtípus</h3> + +<p>Látogassunk el a <a href="http://www.google.com/fonts">Google Fonts</a> oldalra és keressünk egy nekünk tetsző betűtípust. Használjuk a szűrőbeállításokat a keresés megkönnyítésére.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style=""></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="border-style: solid; border-width: 1px; height: 608px; width: 600px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="Modul_tartalomjegyzék">Modul tartalomjegyzék</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> diff --git a/files/hu/learn/ismerkedés_a_világhálóval/index.html b/files/hu/learn/ismerkedés_a_világhálóval/index.html new file mode 100644 index 0000000000..38c28abba1 --- /dev/null +++ b/files/hu/learn/ismerkedés_a_világhálóval/index.html @@ -0,0 +1,60 @@ +--- +title: Ismerkedés a Világhálóval +slug: Learn/Ismerkedés_a_Világhálóval +tags: + - CSS + - HTML + - Kezdő + - útmutató +translation_of: Learn/Getting_started_with_the_web +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p>Az Ismerkedés a Világhálóval egy rövid cikksorozat, amelyben a webfejlesztés gyakorlati mibenlétét mutatjuk be. Áttekintjük a szükséges eszközöket, írunk egy egyszerű weboldalt és publikáljuk a munkánkat.</p> +</div> + +<h2 id="Első_weboldalunk_születése">Első weboldalunk születése</h2> + +<p>Egy professzionális weboldal elkészítése rengeteg munka, így a tanulást mindenképpen kicsiben érdemes kezdeni. Nem fogunk rögtön egy újabb Facebookot írni, de egy egyszerű weboldal elkészítése meglepően könnyű feladat, úgyhogy ezzel indítunk.</p> + +<p>Az alábbi cikkek úgy vannak összeállítva, hogy sorban haladva segítsenek minket megírni és közzétenni első weboldalunkat, teljesen nulláról. Fogjunk hát hozzá!</p> + +<h3 id="Alapvető_programok_telepítése"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Alapvető programok telepítése</a></h3> + +<p>Számtalan program és eszköz áll rendelkezésre a weboldalak fejlesztéséhez és teszteléséhez. Az <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> cikkben segítünk eligazodni ezek között és bemutatjuk a kezdés szempontjából legfontosabb eszközöket.</p> + +<h3 id="Hogy_fog_kinézni_a_weboldalunk"><a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Hogy fog kinézni a weboldalunk?</a></h3> + +<p>Mielőtt nekilátunk a weboldalunk lekódolásának, meg kell terveznünk azt. Milyen tartalmat akarunk pontosan megjeleníteni? Milyen betűtípust és színeket akarunk használni? A <a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a> cikkben lépésről lépésre végigvezetünk egy alapvető tervezési folyamaton.</p> + +<h3 id="Fájlokkal_való_munka"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Fájlokkal való munka</a></h3> + +<p>Egy weboldal sok-sok különféle fájlból áll: szöveges fájlok, programkód, síluslapok, képek, videók, és még sorolhatnánk. Hogyan tudjuk ezt a sok fájlt egy összefüggő weboldallá gyúrni? És hogyan rendszerezzük a fájljainkat hatékonyan? Ezekre a kérdésekre válaszol a <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> cikk.</p> + +<h3 id="HTML_alapok"><a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML alapok</a></h3> + +<p>A HTML (Hypertext Markup Language, hiperszöveg jelölőnyelv) kód segítségével strukturálhatjuk a weboldalunk tartalmát, azaz megadhatjuk, hogy melyek a címsorok, hogy a szöveget miként tagoljuk bekezdésekre, felsorolásokra, mit kell táblázatosan megjeleníteni, hova kell képet beilleszteni és így tovább. A <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> cikkben a legfontosabb HTML elemeket tekintjük át.</p> + +<h3 id="CSS_alapok"><a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS alapok</a></h3> + +<p>A CSS (Cascading Stylesheets, lépcsőzetes stíluslapok) kód segítségével tudjuk színezni, méretezni, háttérképekkel dísziteni, pozícionálni, egyszóval formázni a weboldalunk tartalmát. A <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a> cikkben elmagyarázzuk az alapvető fogalmakat és bemutatunk néhány CSS formázási példát.</p> + +<h3 id="JavaScript_alapok"><a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript alapok</a></h3> + +<p>A JavaScript programozási nyelv teszi lehetővé, hogy dinamikus, interaktív weboldalakat hozzunk létre. Néhány példa a JavaScript alkalmazására: komplett játékok, kattintásra megjelenő elemek, űrlapok ellenőrzése, dinamikusan változó színek, animációk. A <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a> cikk ismerteti a JavaScript programozás alapjait és egy példán keresztül bemutatja, mi minden lehetséges a használatával.</p> + +<h3 id="Weboldalunk_közzététele"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Weboldalunk közzététele</a></h3> + +<p>Miután végeztünk a weboldalunk lekódolásával, elérhetővé kell tennünk az Interneten. A <a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your sample code</a> cikk bemutatja a lehetőségeinket és segít közzétenni az oldalunkat egy egyszerű módszerrel.</p> + +<h3 id="Hogy_működik_a_Világháló"><a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Hogy működik a Világháló?</a></h3> + +<p>Amikor megnyitunk egy weboldalt, egy sor bonyolult folyamat zajlik a háttérben. A <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a> cikk ezeket a folyamatokat mutatja be nagyvonalakban.</p> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: Egy kiváló videósorozat a Világháló működéséről, teljesen kezdők részére. <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a> munkája.</li> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a>: Hasznos háttérismeretek a Világháló történetéről és működéséről, a kialakult szabványokról és a jó gyakorlatokról, valamint arról, hogy miért érdemes webfejlesztéssel foglalkozni. </li> +</ul> diff --git a/files/hu/learn/javascript/első_lépések/index.html b/files/hu/learn/javascript/első_lépések/index.html new file mode 100644 index 0000000000..7276a4541c --- /dev/null +++ b/files/hu/learn/javascript/első_lépések/index.html @@ -0,0 +1,66 @@ +--- +title: Első lépések JavaScript-ben +slug: Learn/JavaScript/Első_lépések +tags: + - Cikk + - JavaScript + - Kezdő + - Modul + - Operátorok + - Számok + - Tömbök + - Változók + - matek + - stringek + - Érkező + - Értékelés + - útmutató +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Az első JavaScript modulunkban, először válaszolunk néhány alapvető kérdésre mint például "mi a JavaScript?", "hogyan is néz ki?", és "mit is csinál?", mielőtt továbblépne az első gyakorlati tapasztalatának megszerzéséhez a JavaScript-ről. Ezután, megvitatunk néhány kulcsfontosságú épitőelemet, mint a változók, stringek, számok és tömbök.</p> + +<h2 id="Előfeltételek">Előfeltételek</h2> + +<p>A modul elkezdése előtt nem szükséges bármiféle előzetes JavaScript tudás, de ajánlott tisztában lennie a HTML- és CSS-sel. Javasoljuk, hogy nézze át a következő modulokat a JavaScript elkezdése előtt:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Kezdjünk a Web-el</a> (ami tartalmazza az igazi <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">alap JavaScript bevetést</a>).</li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Bevezetés a HTML-be</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Bevezetés a CSS-be</a>.</li> +</ul> + +<div class="note"> +<p><strong>Jegyzet</strong>: Ha olyan számítógépen/tableten/más eszközön dolgozik, ahol nem nem tud saját fájlokat készíteni, akkor ki tudja próbálni (a legtöbb) a kód példákat egy online kódoló programmal, mint a <a href="http://jsbin.com/">JSBin</a> vagy a <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Útmutatók">Útmutatók</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Mi a JavaScript</a></dt> + <dd>Üdvözöljük az MDN kezdő JavaScript kurzusán! Ebben az első cikkben a JavaScriptet magas szintről fogjuk megtekinteni, válaszolni kérdésekre, mint "mi ez?", és "mit csinál?", és meggyőződni arról, hogy kényelmes-e a JavaScript szándéka.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">Az első merülés a JavaScript-be</a></dt> + <dd>Most, hogy tanult valamit a JavaScript elméletéről, és hogy mit tud vele csinálni, adunk önnek egy "crash" kurzust a JavaScript alapvető tulajdonságairól egy teljes gyakorlati oktatás során. Itt el fog készíteni egy egyszerű "Találd ki a számot" játékot lépésről lépésre.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Mi romlott el? Hibaelhárítás JavaScript-ben</a></dt> + <dd>Amikor elkészítette a "Találd ki a számot" játékot az előző cikkben, talán észrevette hogy nem működik. Sose féljen — ez a cikk arra törekszik, hogy megmentse önt a haj tépéstől az ilyen problémák miatt azzal, hogy ellátja önt néhány egyszerű tippel, hogy hogyan tudja megkeresni, és kijavítani a hibákat JavaScript programokban.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Szükséges információk tárolása - Változók</a></dt> + <dd>Az előző cikkek elolvasása után mostmár tudnia kell mi is a JavaScript, mit tud önért csinálni, hogyan használja azt más webes technológiák mellett, és mik a főbb jellemzői magasabb szintől nézve. Ebben a cikkben leereszkedünk az igazi alapokhoz, és megnézzük hogyan dolgozzunk a JavaScript legalapabb építőelemeivel — Változók.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Alapvető matematika JavaScriptben — számok és operátorok</a></dt> + <dd>A kurzus ezen pontján megvitatjuk a matematikát JavaScript-ben — hogy tudunk kombinálni operátorokat és más jellemzőket, hogy sikeresen manipuláljunk számokat parancsunk végrehajtásához.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Szöveg kezelés — stringek JavaScript-ben</a></dt> + <dd>Ezután a stringekre fordítjuk figyelmünket — ez az, amit szövegnek nevezünk a programozásban. Ebben a cikkben sorra vesszük az összes gyakori dolgot amit valóban tudnia kell a stringekről amikor JavaScript-et tanul, mint például stringet létrehozni, idézőjelek elhagyása stringben, és egyesíteni őket.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Hasznos string metódusok(eljárások)</a></dt> + <dd>Már megnéztük a stringek alapjait, lépjünk egy szinttel feljebb és kezdjünk gondolkodni arról, milyen hasznos eljárásokat tudunk végrehajtani stringeken a beépített methódusokkal, mint megkeresni a hosszát egy szövegnek, egyesíteni és szétválasztani stringeket, helyettesíteni egy karaktert egy stringben egy másikra, és még sok más.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Tömbök</a></dt> + <dd>A modul utolsó cikkében a tömböket vesszük szemügyre — elegáns módja egy lista elemeinek tárolására egy egyszerű változó név alatt. Megnézzük miért is olyan hasznos, ezután felfedezzük hogyan csináljunk tömböket, kapjunk, hozzáadjunk, és töröljünk elemeket amelyek tömbben vannak tárolva, és ezen kívül sok más.</dd> +</dl> + +<h2 id="Felmérés">Felmérés</h2> + +<p>A következő felmérés tesztelni fogja, hogy megértette a JavaScript alapjait, amelyeket a fenti útmutatóban lefedünk.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Ostoba történet generálása</a></dt> + <dd>Ebben a felmérésben tesztelve lesz, amelyben szükség lesz a tudására, amelyet elsajátított ennek a modulnak a cikkeiben, hogy ezeket felhasználva készítsen egy vicces app-ot, ami véletleszerűen generál ostoba történeteket. Jó szórakozást!</dd> +</dl> diff --git a/files/hu/learn/javascript/index.html b/files/hu/learn/javascript/index.html new file mode 100644 index 0000000000..7a81dde404 --- /dev/null +++ b/files/hu/learn/javascript/index.html @@ -0,0 +1,56 @@ +--- +title: JavaScript +slug: Learn/JavaScript +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} egy programozási nyelv, mely segítségével összetett dolgokat hozhatunk létre weboldalakon.— Minden alkalommal mikor a böngésző többet tesz annál hogy csak ül és néz ki a fejéből, valamint statikus információkat jeleníti meg, akkor már JavaScriptről beszélünk.</p> + +<h2 id="A_hosszú_út">A hosszú út</h2> + +<p>JavaScript vitathatatlanul nehezebb megtanulni, mint jóbarátait, <a href="/en-US/docs/Learn/HTML">HTML</a>-t és <a href="/en-US/docs/Learn/CSS">CSS</a>-t. Mielőtt nekivágnál a JavaScript tanulásának, erősen ajánlott hogy ismerd, tudd használni a fent említett web technológiákat. Kezd a következő modulok ismeretének elsajátításával:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Kezdjük a webbel</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Bevezetés a HTML-be</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Bevezetés a CSS-be</a></li> +</ul> + +<p>Ha rendelkezel tapasztalatokkal előző nyelvekből, az csak előnyödre válhat.</p> + +<p>Miután megismerkedtél a JavaScript alapjaival, ajánljuk a következő haladó szintű témakörökkel, mint például.: </p> + +<ul> + <li>JavaScript mélyebben, ahogy tanultuk a <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript útmutatóban</a></li> + <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> +</ul> + +<h2 id="Modulok">Modulok</h2> + +<p>Mostani cikkünk sorrendben tartalmazza azokat a modulokat, amiket érdemes kidolgoznod, átdolgoznod. </p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript első lépések</a></dt> + <dd>Mielőtt belevágnál a gyakorlati tapasztalatszerzének, ebben a cikkben szeretnénk válaszolni pár alapvető kérdésre, mint például "Mi az a JavaScript?", "Hogyan is néz ki?", "Mire használhatom?". Azután, átbeszélünk néhány fontos JavaScript tulajdonságot,jellegzetességet, mint a változók (variables), stringek, számok, és tömbök (arrays).</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript épitő kockák</a></dt> + <dd>Ebben a modulban folytatjuk a JavaScript tulajdonságainak felfedezését, figyelmünket a leggyakrabban előforduló kód blokkok felé irányítjuk, többek között feltételek, állítások, loopok, függvények, és eseményekre.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Bevezetés a JavaScript objektumokba</a></dt> + <dd>A JavaScriptben a legtöbb dolog objektum, az alapvető JavaScript sajátosságoktól kezdve, mint például a stringek, vagy tömbök . Te is elkészítheted a saját objektumodat, objektumjaidat, amiben eltárolhatod az objektumhoz tartozó függvényeidet, változóidat. A JavaScript természetéből adódódan (Objektum orientált) fontos megértenünk, hogy az objektumok ismerete hasznos a hatékony kódok előállításához. Ebben sokat fog segíteni ez a modul. Itt megtanítjuk mindazt ami szükséges számodra az objektumok megértéséhez, többek között a szinktaktikáját, hogyan készíthetsz saját objektumot, valamint elmagyarázzuk mi is az a JSON adat, és hogyan dolgozunk vele.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Kliens oldali web API-k</a></dt> + <dd>Amikor kliens oldali JavaScriptet írsz a weboldalod vagy applikációd számára, biztos lehetsz benne hogy nem fogsz távol állni az API-k használatától - Interfészek a böngésző, valamint az operációs rendszer sajátosságainak manipulálására, vagy akár más adatok használata különböző weboldalakról. Ebben a modulban megismerkedünk az API-kal, valamint azzal, hogy mégis hogyan használjuk őket.</dd> +</dl> + +<h2 id="Gyakran_előforduló_JavaScript_hibák_megoldása">Gyakran előforduló JavaScript hibák megoldása</h2> + +<p><a href="/en-US/docs/Learn/JavaScript/Howto">Használj JavaScriptet gyakori problémák megoldására</a> cikkünk segítségével megértheted, hogyan oldhatsz meg gyakran előforduló hibákat mikor weboldalakat készítesz. </p> + +<h2 id="További_csemege">További csemege</h2> + +<h2 id="JavaScript_on_MDN"><a href="/en-US/docs/Web/JavaScript" style="font-size: 14px;">JavaScript on MDN</a></h2> + +<dl> + <dd>Ütőkártya a JavaScript magjának felkutatására. Itt elég jól kiterjesztett dokumentációt találhatsz minden tulajdonságra, aspektusra, és néhány haladó szintű cikk is jó szívvel említi, és beszél róla.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> + <dd>Hasznos videó alapú gyakorlatok <a href="https://twitter.com/bit101">Keith Peters</a> által, melyek megtanítják azt a matematikát, amit meg kell értened hogy hatékony programozó váljon belőled.</dd> +</dl> diff --git a/files/hu/learn/server-side/index.html b/files/hu/learn/server-side/index.html new file mode 100644 index 0000000000..8fcc639d2c --- /dev/null +++ b/files/hu/learn/server-side/index.html @@ -0,0 +1,59 @@ +--- +title: Server-side website programming +slug: Learn/Server-side +tags: + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - NeedsTranslation + - Server + - Server-side programming + - Topic + - TopicStub +translation_of: Learn/Server-side +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a general introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.</p> + +<p>Most major websites use some kind of server-side technology to dynamically display data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook. Displaying all of these using different static pages would be extremely inefficient, so instead such sites display static templates (built using <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, such as when you want to view a different product on Amazon.</p> + +<p>In the modern world of web development, learning about server-side development is highly recommended.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>Getting started with server-side programming is usually easier than client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.</p> + +<p>Basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".</p> + +<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> +</ul> + +<p>With that basic understanding, you'll be ready to work your way through the modules in this section. </p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks. </p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt> + <dd>This module provides technology-agnostic information about server-side website programming such as "what is it?", "how does it differ from client-side programming?", and "why is it useful?". This module also outlines some of the more popular server-side web frameworks and gives guidance on how to select the best one for your site. Lastly, an introduction to web server security is provided.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> + <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> + <dd>Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt> + <dd>This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.</dd> +</dl> diff --git a/files/hu/mdn/contribute/getting_started/index.html b/files/hu/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..b137d56af4 --- /dev/null +++ b/files/hu/mdn/contribute/getting_started/index.html @@ -0,0 +1,101 @@ +--- +title: Ismerkedés az MDN-nel +slug: MDN/Contribute/Getting_started +translation_of: MDN/Contribute/Getting_started +--- +<div>{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>Mi egy nyílt, fejlesztőkből és szerkesztőkből álló csoport vagyunk, akik egy jobb webet tűztek ki maguk elé célul, márka-, böngésző-, és platformfüggetlenül. Bárki módosíthat az oldalon, és mindenki, aki megteszi, segít nekünk erősebbé válni. Együtt folytathatjuk a fejlesztést jobb, újabb ötletekkel, hogy még többet nyújthassunk. Itt kezdődik, veled.</p> + +<p><span>Az MDN minden része (a weboldal felépítésétől a dokumentációkon keresztül a bemutatókig, szemléltetésekig) fejlesztők és szerkesztők, írók által lett létrehozva. Mindenki hozzá tud adni, és reméljük, Te is így teszel, tehát csatlakozol hozzánk!</span></p> + +<h2 id="Három_egyszerű_lépés_az_MDN_használatához"><span>Három egyszerű lépés az MDN használatához</span></h2> + +<p><span class="seoSummary">Az MDN egy wiki, ahol <strong>bárki </strong>tud szerkeszteni és megjegyzést fűzni. Nem kell sem programozónak, sem tudósnak lenned. Rengeteg tennivaló van még, egyszerű feladatoktól a korrektúrázáson keresztül a komplex feladatokig (ide tartozik az API dokumentációk írása is)</span></p> + +<p>A szerkesztés egyszerű és biztonságos. Ha hibázol, egyszerű javítani; ha egyszerűen nem vagy tisztában mindennel, vagy nem tökéletes a helyesírásod, ne aggódj! Van egy egész csoportunk, aki arra figyel, hogy ez az oldal minnél hitelesebb és minnél jobb legyen. Mindig lesz valaki, aki kijavítja az esetleges hibáidat, és kiszépíti a művedet. Oszd meg mindenkivel, amit tudsz, és bízz a tudásodban és a többiekben, akik segítenek, hogy jobban végezhesd a munkádat.</p> + +<h3 id="1._lépés_Regisztrálj_az_MDN-re">1. lépés: Regisztrálj az MDN-re</h3> + +<p>Hogy elkezdhesd itt a munkádat, szükséged van egy MDN fiókra. A részletekért lásd: <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">Hogyan kell regisztrálni</a>. Megjegyzendő, hogy mielőtt létrehozod a MDN fiókod, szükséged lesz egy <a href="https://github.com/join">GitHub fiókra</a>, mivel a GitHub-ot használjuk azonosításra.</p> + +<h3 id="2._lépés_Válassz_feladatot">2. lépés: Válassz feladatot</h3> + +<p>Válassz feladattípust az alábbi {{anch("Possible task types", "listából")}}, és döntsd el, melyik illik a legjobban hozzád. Bármelyiket választhatod, és utána el is kezdheted a munkát.</p> + +<h3 id="3._lépés_Csináld_is_meg_a_feladatot">3. lépés: Csináld is meg a feladatot</h3> + +<p>Miután eldöntötted, melyik típust szeretnéd, keress egy oldalt, kódrészletet, stb.. ami a témához kapcsolódik, és már szerkesztheted is.</p> + +<p>Ne aggódj a tökéletesség miatt; más MDN szerkesztők itt vannak, hogy kijavítsák a hibákat, melyeken átsiklottál. Ha kérdésed van, menj a <a href="/en-US/docs/MDN/Community">Közösség</a> oldalra információkért (levelezőlisták, csatornák, ahol választ találhatsz)</p> + +<div class="note"> +<p><strong>Fontos: </strong>Ha előbb inkább kísérleteznél, és nem élesben szerkesztenél, van egy <strong><a href="/en-US/docs/Sandbox">homokozó</a></strong> nevű oldalunk számodra, ahol szabadon kísérletezhetsz. Kérlek, azért ne vidd túlzásba. A szükségtelen módosítások csak még több munkát okoznak számunkra.</p> +</div> + +<p>Ha befejezted a feladatot, keress <a href="#Other_things_you_can_do_on_MDN">további feladatok</a>at, melyeket tudsz csinálni.</p> + +<h2 id="Lehetséges_feladattípusok">Lehetséges feladattípusok</h2> + +<p>Sokféle úton tudsz nekünk segíteni, melyek persze függenek a képességeidtől, valamint az érdeklődésedtől. Bár néhány feladat ijesztő lehet, rengeteg egyszerű tevékenység is van. Néhány csak öt percet vesz igénybe. A feladat alatt meg fogod találni azt is, hogy nagyjából mennyi ideig tarthat a feladat általában.</p> + +<h3 id="1._lehetőség_A_szavak_kedvelője_vagyok!">1. lehetőség: A szavak kedvelője vagyok!</h3> + +<p>Ha az írás iránt érdeklődnél, segíthetsz átnézni és szerkeszteni a meglévő dokumentumainkat, és ki tudod javítani a hibákat benne</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">Oldalak leírása</a> (5-15 perc)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Do_an_editorial_review">Szerkesztői véleményezés</a> (5-30 perc)</li> + <li><a href="/en-US/docs/MDN/User_guide/Writing#Editing_an_existing_page">Téma frissítése új adatokkal</a> (5 perc-1 óra)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Új szótárbejegyzés</a> (15 perc-1 óra)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages">Új cikk egy technológiáról vagy API-ról</a> (30 perc-2 óra)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Új cikk a könnyeb tanulás céljára</a> (1-3 óra)</li> +</ul> + +<div class="note"><strong>Megjegyzés:</strong> Ha átnézel egy cikket, vagy esetleg újat írsz, kérjük, hogy kukkants bele a stilizálással kapcsolatos <a href="/en-US/docs/MDN/Contribute/Guidelines/Style_guide">segédlet</a>be. Segíteni fog, hogy minél következetesebb cikkeket írj.</div> + +<h3 id="2._lehetőség_A_kódért_élek-halok">2. lehetőség: A kódért élek-halok</h3> + +<p>Szükségünk van kódrészletelre! Sőt, magát a weboldalunkat is (<a href="/en-US/docs/MDN/Kuma">Kuma</a>) segíthetnél fejleszteni!</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Kódrészletek interaktivizálása</a> (30 perc)</li> + <li><a href="http://kuma.readthedocs.org/en/latest/installation.html">Kuma fejlesztői környezet létrehozása</a> (1 óra)</li> + <li><a href="https://github.com/mozilla/kuma#readme">A változtatás elküldése a Kuma kód-adatbázisába</a> (1 óra)</li> + <li><a href="https://developer.mozilla.org/en-US/demos/submit">Egy új demó létrehozása </a>(1 óra)</li> +</ul> + +<h3 id="3._lehetőség_Szöveg_is_-_kód_is">3. lehetőség: Szöveg is - kód is</h3> + +<p>Vannak feladataink, melyeknél mindkét képességre szükség van, pl. új cikkek írása, technikai megjegyzések, vélemények, új dokumentációk.</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Tag_JavaScript_pages">JavaScript oldalak megjelölése</a> (5 perc)</li> + <li><a href="/en-US/docs/MDN/About/Promote">Reklámozz minket a saját weboldaladon</a> (5 perc)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Do_a_technical_review">Technikai véleményezés</a> (30 perc)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages">Új cikk egy témában, melyet ismersz</a> (1 óra vagy több)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Interaktív feladat az embereknek az internetről való tanulásában segíteni</a> (1 óra vagy több)</li> + <li>Nézd meg az <a href="http://www.joshmatthews.net/bugsahoy/?mdn=1">MDN hibalistáját</a> hogy láthasd az éppen mentorálásra váró, hibás részeket. (1 óra vagy több)</li> +</ul> + +<h3 id="4._lehetőség_Szeretném_a_saját_nyelvemen_olvasni_az_MDN-t">4. lehetőség: Szeretném a saját nyelvemen olvasni az MDN-t</h3> + +<p>Minden fordítás önkéntesek által történik!</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Localize/Translating_pages">Oldalak fordítása</a> (2 óra)</li> + <li>Csatlakozz a többiekhez a <a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">fordítási feladatok</a>ban (30 perc)</li> +</ul> + +<h3 id="5._lehetőség_Hibát_találtam_de_nem_tudom_hogyan_javítsam">5. lehetőség: Hibát találtam, de nem tudom hogyan javítsam</h3> + +<p>Bejelentheted a hibát a <a class="external" href="https://bugzilla.mozilla.org/form.doc">hibabejelentő űrlap</a> segítségével. (5 perc)</p> + +<h2 id="Egyéb_teendők_az_MDN-en">Egyéb teendők az MDN-en</h2> + +<ul> + <li><a href="/en-US/docs/MDN/Community">Lépj be az MDN közösségbe</a>.</li> + <li><a href="/en-US/profile">Töltsd ki a profilod</a>, így mások többet megtudhatnak rólad.</li> + <li>További információ az <a href="/en-US/docs/MDN/Contribute">MDN szerkesztéséről</a>.</li> + <li><a href="/en-US/docs/MDN/Getting_started/Using_MDN_in_education">Az MDN használata tanuláshoz</a></li> +</ul> diff --git a/files/hu/mdn/contribute/index.html b/files/hu/mdn/contribute/index.html new file mode 100644 index 0000000000..d97707a7fe --- /dev/null +++ b/files/hu/mdn/contribute/index.html @@ -0,0 +1,21 @@ +--- +title: Közreműködés az MDN-en +slug: MDN/Contribute +tags: + - Guide + - Landing + - MDN Meta + - útmutató +translation_of: MDN/Contribute +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/hu/docs/MDN")}}</div> + +<p>Üdvözöljük! Az oldal meglátogatásával megtette az első lépést, hogy az MDN közreműködője legyen.</p> + +<p><span class="seoSummary">Az itt található útmutatók lefedik az MDN-en közreműködés minden részét, beleértve a stílus útmutatókat, a szerkesztőnk és az eszközök útmutatóját, és így tovább. Kérjük, olvassa el (és tartsa be) a <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">Mozilla feltételeit</a> mielőtt bármilyen oldalt szerkesztene vagy létrehozna.</span></p> + +<p>Ha eddig még nem működött közre az MDN-en, akkor a <a href="/hu/docs/MDN/Getting_started">Kezdő lépések</a> útmutató segíthet a feladat kiválasztásában.</p> + +<div class="row topicpage-table"> </div> + +<p>{{LandingPageListSubPages()}}</p> diff --git a/files/hu/mdn/contribute/localize/index.html b/files/hu/mdn/contribute/localize/index.html new file mode 100644 index 0000000000..30e05134b4 --- /dev/null +++ b/files/hu/mdn/contribute/localize/index.html @@ -0,0 +1,45 @@ +--- +title: Localizing MDN +slug: MDN/Contribute/Localize +tags: + - Landing + - Localization + - MDN Meta + - l10n +translation_of: MDN/Contribute/Localize +--- +<div>{{MDNSidebar}}</div><div> +<div class="boxed translate-rendered"> +<div>{{IncludeSubnav("/hu-HU/docs/MDN")}}</div> + +<p>Az MDN-t a világ minden táján használják, a webes technológiák - és a Firefox belső működésének - referenciájaként és útmutatójaként. A honosítási közösségek kulcsfontosságú részei a Mozilla projektnek; a dokumentációkon végzett fordítási és honosítási munkájuk segít a nyílt web fejlesztésében, világszerte. Ha szeretne többet megtudni a honosításról, vagy új honosításba kezdene, ez az a hely, ahol nekiláthat.</p> + +<p>{{LandingPageListSubpages}}</p> + +<h2 id="Honosító_közösségek_az_MDN-en">Honosító közösségek az MDN-en</h2> + +<p>Az MDN-en zajló honosítási tevékenységeket független fordítók, és együttműködő csoportok végzik, sokszor egy nagyobb Mozilla honosító közösség részeként. A honosítási projekteket <strong>Honosítási vezetők </strong>vezetik.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Roles/Localization_projects">Honosítási projektek</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Roles/Localization_driver_role">A honosítási vezető szerepe</a></li> +</ul> + +<h2 id="Honosítási_eszközök">Honosítási eszközök</h2> + +<p>Létezik néhány hasznos eszköz, melyet a honosítás során használhat:</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localizing_with_Pontoon" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Pontoon</a></dt> + <dd>A karakterláncok fordítására használt, különböző Mozilla projekteknél, beleértve az MDN felhasználói felületét (valamint a Firefox felhasználói felületét is).</dd> + <dt><a href="http://transvision.mozfr.org/" title="http://transvision.mozfr.org/">Transvision</a></dt> + <dd>Egy segédprogram a franciországi Mozillától, amellyel angol karakteláncokra lehet keresni különféle Mozilla kódokban a kiválasztott célnyelv fordításainak megkeresésére. Hasznos az előnyben részesített fordított szavak és kifejezések megtalálásában.</dd> +</dl> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization" title="/en-US/docs/Mozilla/Localization">Honosítás a Mozillánál</a></li> +</ul> +</div> +</div> diff --git a/files/hu/mdn/contribute/localize/oldalak_fordítása/index.html b/files/hu/mdn/contribute/localize/oldalak_fordítása/index.html new file mode 100644 index 0000000000..32af636546 --- /dev/null +++ b/files/hu/mdn/contribute/localize/oldalak_fordítása/index.html @@ -0,0 +1,56 @@ +--- +title: MDN oldalak fordítása +slug: MDN/Contribute/Localize/Oldalak_fordítása +tags: + - MDN Meta + - fordítás + - honosítás + - l10n + - útmutató +translation_of: MDN/Contribute/Localize/Translating_pages +--- +<div>{{MDNSidebar}}</div> + +<p>Ez a cikk egy alapvető útmutató az MDN-en található tartalom fordításához, amely tartalmazza a fordítási munka menetét, és tanácsokat ad a különböző tartalmak helyes kezeléséhez.</p> + +<h2 id="Új_oldal_fordításának_elkezdése">Új oldal fordításának elkezdése</h2> + +<p>Amikor egy olyan oldallal találkozol, amelyet szeretnél lefordítani a nyelvedre, akkor kövesd ezeket a lépéseket:</p> + +<ol> + <li>Kattints a Nyelvek ikonra a <strong>Nyelvek</strong> menü megnyitásához, és kattints a <strong>Fordítás hozzáadása </strong>gombra. Ekkor megjelenik a Nyelvválasztó oldal.</li> + <li>Válaszd ki a nyelvet, amelyre le akarod fordítani az oldalt. Megjelenik a Cikk fordítása nézet, az eredeti nyelvi szöveggel a bal oldalon.</li> + <li>A <strong>Fordítás leírása </strong>alatt lefordíthatod a címet, és választhatóan, a cikk SEO URL-jét az adott nyelven. A SEO URL az oldal URL-jének a vége (például az „Oldalak_fordítása” ennél a cikknél.) Néhány nyelvi közösség nem fordítja ezt le, ugyanúgy hagyva mint az angolt. Hasonlítsd össze a többi cikket a nyelveden, és határozd meg, hogy mi a bevett gyakorlat. Rákattinthatsz a mínusz jelre a <strong>Fordítás leírása</strong> mellett az információ elrejtéséhez, ha már végeztél vele, hogy több hely maradjon a <strong>Tartalom fordítása </strong>résznek.</li> + <li>A <strong>Tartalom fordítása </strong>alatt fordítsd le az oldal törzsét.</li> + <li>Tölts ki legalább egy <strong>címkét</strong> az oldalhoz</li> + <li>Kattints a <strong>Változtatások mentése</strong> gombra ha végeztél.</li> +</ol> + +<div class="note"><strong>Megjegyzés:</strong> A Cikk fordítása nézet felhasználói felületi elemei először angolul jelennek meg. A későbbi felkeresésekkor a megfelelő nyelven fog megjelenni az oldal, ha létezik honosítás az MDN-en ahhoz a nyelvhez. Az MDN felhasználói felülete a <a href="https://localize.mozilla.org/projects/mdn/" title="https://localize.mozilla.org/projects/mdn/">Pontoon</a> segítségével honosítható. Nézd meg a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Honosítás a Pontoonnal</a> oldalt az eszköz használatának részleteiért.</div> + +<h2 id="Lefordított_oldalak_szerkesztése">Lefordított oldalak szerkesztése</h2> + +<ul> + <li>Egy lefordított oldalon, kattints a <strong>Szerkesztés</strong> gombra (néha megcímkézve a célnyelvvel). Ekkor megnyílik a Cikk fordítása.</li> +</ul> + +<p>Ha az angol verzió megváltozott mióta a fordítást legutóbb frissítettek, akkor a Cikk fordítása nézet megjeleníti a forrás szintű „diff”-et az angol nyelvű verzióban. Ez segít abban, hogy eldöntsd mit kell frissíteni a fordításban.</p> + +<h2 id="Fordítások_címkézése">Fordítások címkézése</h2> + +<p>Fontos, hogy minden oldal meg legyen címkézve legalább egy címkével. Akkor is, ha ez egy fordítás.</p> + +<p>Néhány címke keresési szűrőként használt, vagy közreműködők közti közmegegyezésként. Ezeket nem kell lefordítani. Ezen címkék megismeréséhez olvasd el a <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">címkézési szabványokat</a>. Nyugodtan létrehozhatsz lefordított címkéket is az olyan tartalmak csoportosításához, melyeket nem fed le egy szabványos címke.</p> + + + +<h2 id="Tippek_új_honosítóknak">Tippek új honosítóknak</h2> + +<p>Ha új vagy az MDN honosításában, akkor itt van néhány javaslat:</p> + +<ul> + <li>A <a href="/en-US/docs/Glossary">Szójegyzékben</a> lévő cikkek jók a friss fordítóknak, mert rövidek és egyszerűek.</li> + <li>Az <a href="/en-US/docs/tag/l10n%3Apriority">„l10n:priority” címkéjű cikkek</a> magas prioritásúakként kezeltek a fordítás szempontjából. Általánosságban az oktató és fogalmakkal foglalkozó cikkek nagyobb prioritásúak mint a referencia lapok, mert azoknak az olvasóknak van a legnagyobb szüksége a fordításokra, akik még új fogalmakat tanulnak.</li> + <li>Ha dupla kapcsos zárójek közti szöveget találsz, mint ezt: <code>\{{some-text("more text")}}</code>, akkor hagyd lefordítatlanul, és ne módosíts az írásjeleken sem. Ez egy <a href="/en-US/docs/MDN/Contribute/Structures/Macros">makró</a>, amely valószínűleg az oldal szerkezetéért felelős, vagy valami más hasznos dolgot csinál. Olyan lefordítatlan szöveget is találhatsz, amelyet makró állít elő; ne aggódj emiatt addig, amíg nem szerzel több tapasztalatot az MDN-nel. (Az ilyen szövegek módosításához <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Tools/Template_editing">különleges engedélyek</a> szükségesek, mert a makrók nagyon sok mindenre képesek.) Ha érdekel, akkor nézd meg a <a href="/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">Gyakran használt makrókat</a>, hogy lásd mi mindent tudnak.</li> + <li>Nézd meg a <a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">Lokalizációs projektoldalt</a>, hogy többet tudj meg a területi beállításodhoz tartozó honosításról.</li> +</ul> diff --git a/files/hu/mdn/index.html b/files/hu/mdn/index.html new file mode 100644 index 0000000000..bad49ae770 --- /dev/null +++ b/files/hu/mdn/index.html @@ -0,0 +1,30 @@ +--- +title: Az MDN projekt +slug: MDN +tags: + - Kezdőoldal + - MDN +translation_of: MDN +--- +<div>{{MDNSidebar}}</div> + +<p>A <strong>Mozilla fejlesztői hálózat</strong> (MDN) egy wiki, amelyen a webet, Mozilla technológiákat, a Firefox OS-t, és más fejlesztői témákat dokumentálunk. Bárki bővítheti és szerkesztheti a tartalmat. Nem kell programozónak lennie, vagy sokat tudnia a technológiáról; sok különféle elvégzendő feladat van, az egyszerűtől kezdve (átolvasás, elütések javítása) az összetettig (API dokumentáció írása).</p> + +<div class="summary"> +<p>Az MDN projekt célja a nyílt web, a Mozilla technológiák és Mozilla projektek dokumentálása. Meghívjuk, hogy segítsen!</p> +</div> + +<p>Szükségünk van a segítségére! Könnyű dolga lesz. Ne aggódjon az engedélyek kérése vagy az elkövetett hibák miatt. Emellett ismerje meg az <a href="/en-US/docs/MDN/Community" title="/en-US/docs/MDN/Community">MDN közösséget</a>; azért vagyunk itt, hogy segítsünk! A lenti dokumentáció elég lesz az elinduláshoz, de nyugodtan csatlakozhat a társalgáshoz az <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs</a> csatornán is.</p> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/MDN/Getting_started">Frissen érkezők útmutatója</a></span> + + <p>Új még az MDN-en, és szeretné megtudni hogyan tehetné jobbá? Kezdjen itt!</p> + </li> + <li><span><a href="/en-US/docs/MDN/Contribute">Tapasztalt felhasználó vagyok</a></span> + <p>Olvassa el a teljes, részletes MDN közreműködői útmutatónkat, hogy többet tudjon meg, amint berendezkedett.</p> + </li> + <li><span><a href="/en-US/docs/MDN/Promote">Ossza meg</a></span> + <p>Ha imádja az MDN-t, akkor segítsen a megosztásában! Találjon művészi alkotásokat, eszközöket és útmutatókat az MDN népszerűsítéséhez.</p> + </li> +</ul> diff --git a/files/hu/mozilla/bugzilla/index.html b/files/hu/mozilla/bugzilla/index.html new file mode 100644 index 0000000000..f9a6703385 --- /dev/null +++ b/files/hu/mozilla/bugzilla/index.html @@ -0,0 +1,67 @@ +--- +title: Bugzilla +slug: Mozilla/Bugzilla +tags: + - Bugzilla + - Developing Mozilla + - 'Developing_Mozilla:Tools' + - NeedsTranslation + - QA + - Tools + - TopicStub +translation_of: Mozilla/Bugzilla +--- +<p><a class="link-https" href="https://bugzilla.mozilla.org/"><font><font>A</font></font></a><font><font> bugzilla.mozilla.org (gyakran rövidítve a bmo) a Mozilla.org hibakövetési rendszere, egy adatbázis a hibák rögzítésére és a Firefox, Thunderbird, SeaMonkey, Camino és más mozilla.org projektek fejlesztési kérelmeire.</font></font></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation"><font><font>Dokumentáció a Bmo-ról</font></font></h2> + +<dl> + <dt><a href="/en-US/docs/What_to_do_and_what_not_to_do_in_Bugzilla" title="hu / What_to_do_and_what_not_to_do_in_Bugzilla"><font><font>Mit kell csinálni, és mit nem csinálni Bugzilában</font></font></a></dt> + <dd><font><font>Tippek a Bugzilla használatához, valamint a kerülendő dolgok.</font></font></dd> + <dt><a class="link-https" href="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html"><font><font>Bugzilla-etikett</font></font></a></dt> + <dd><font><font>Útmutató az etiketthez; </font><font>Ez az útmutató segít megérteni, hogyan lehet a legjobban viselkedni a bmo-n, és hogy a megfelelő viselkedés és az udvariasság használata elősegíti, hogy a problémád mielőbb, se később megoldódjon.</font></font></dd> + <dt><a href="http://www.mozilla.org/quality/help/beginning-duplicate-finding.html" title="http://www.mozilla.org/quality/help/beginning-duplicate-finding.html"><font><font>Hogyan tudom megtudni, ha hibát már jelentettek</font></font></a></dt> + <dd><font><font>Hasznos (de nem kötelező), ha ellenőrizni szeretné, hogy a jelentett probléma már nyomon volt-e. </font><font>Ez az útmutató segít abban.</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/QA" title="/en-US/docs/Mozilla/QA"><font><font>Minőségbiztosítás</font></font></a></dt> + <dd><font><font>Dokumentáció a Mozilla minőségbiztosításáról.</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/ En-US / docs / Mozilla / QA / Bug_writing_guidelines"><font><font>Hibaírási útmutató</font></font></a></dt> + <dd><font><font>Útmutató egy jó, érthető hiba elkészítéséhez, amelyet a fejlesztői csapat könnyen követ.</font></font></dd> + <dt><a href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="/ En-US / docs / Developer_Guide / How_to_Submit_a_Patch"><font><font>Hogyan kell beküldeni a javítást</font></font></a></dt> + <dd><font><font>Ha kijavított egy hibát, vagy új funkciót hajtott végre, akkor be kell helyeznie a javítást a fába, hogy ez a termék részévé váljon. </font><font>Ez az útmutató megtanítja, hogyan!</font></font></dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Bugzilla" title="/ hu-Egyesült Államok / docs / tag / CSS"><font><font>Összes megtekintése...</font></font></a></span></p> +</div> + +<div class="section"> +<h2 class="Community" id="Community" name="Community"><font><font>Segítség a közösségtől</font></font></h2> + +<p><font><font>Segítségre van szüksége egy CSS-rel kapcsolatos problémában, és nem talál megoldást a dokumentációban?</font></font></p> + +<ul> + <li><font><font>Látogasson el a </font></font><a href="https://wiki.mozilla.org/BMO/Support" title="https://wiki.mozilla.org/BMO/Support"><font><font>bmo támogatási oldalra</font></font></a><font><font> .</font></font></li> + <li><font><font>Tegye fel kérdését a Mozilla IRC csatornán: </font></font><a class="link-irc" href="irc://irc.mozilla.org/qa"><font><font>#qa</font></font></a></li> +</ul> + +<p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html"><font><font>Ne felejtsd el a </font></font><em><font><font>nettikettet</font></font></em><font><font> ...</font></font></a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics"><font><font>Más anyagok</font></font></h2> + +<ul> + <li><a class="external" href="http://www.bugzilla.org/about/"><font><font>Bevezetés a Bugzillába</font></font></a></li> + <li><a class="external" href="http://blog.johnath.com/2010/02/04/bugzilla-for-humans"><font><font>Bugzilla ember számára</font></font></a></li> + <li><a class="external" href="http://www.squarefree.com/bugzilla/quicksearch-help.html"><font><font>A Bugzilla QuickSearch súgó oldala</font></font></a><font><font> . </font><font>A QuickSearch gyors, egyszerű és nagyon hatékony módszer a bugzilla gyors lekérdezésére.</font></font></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Bugzilla/Testopia" title="https://developer.mozilla.org/en-US/docs/Mozilla/Bugzilla/Testopia"><font><font>Testopia</font></font></a><font><font> - teszt esetkezelési kiterjesztés</font></font></li> + <li><a class="external" href="http://www.bugzilla.org"><font><font>bugzilla.org</font></font></a><font><font> - a projekt oldala</font></font></li> + <li><font><font>{{interwiki ('wikipedia', 'Bugzilla', 'wikipedia: Bugzilla')}} - a Bugzilla általános leírása (nem vonatkozik a Mozilla projektekre)</font></font></li> +</ul> + +<h2 class="Tools" id="Tools" name="Tools"><font><font>Eszközök</font></font></h2> + +<ul> + <li><a href="http://harthur.github.io/bugzilla-todos/" title="http://harthur.github.io/bugzilla-todos/"><font><font>A Bugzilla Todos</font></font></a><font><font> felsorolja az áttekintési és megjelölési kérelmeket, a bejelentkezési javításokat, a másoktól nem teljesített kéréseket és a hozzárendelt hibákat.</font></font></li> +</ul> +</div> +</div> diff --git a/files/hu/mozilla/gecko/index.html b/files/hu/mozilla/gecko/index.html new file mode 100644 index 0000000000..fee760a09e --- /dev/null +++ b/files/hu/mozilla/gecko/index.html @@ -0,0 +1,64 @@ +--- +title: Gecko +slug: Mozilla/Gecko +tags: + - Gecko + - Mozilla +translation_of: Mozilla/Gecko +--- +<div>{{FirefoxSidebar}}</div> + +<p class="summary"><span class="seoSummary">A <strong>Gecko</strong> a Mozilla Projekt keretében fejlesztett böngészőmotor. Az eredeti neve NGLayout volt. A Gecko feladata a webes tartalom (például <a href="/hu/docs/HTML">HTML</a>, <a href="/hu/docs/CSS">CSS</a>, <a href="/hu/docs/XUL">XUL</a> és <a href="/hu/docs/JavaScript">JavaScript</a>) feldolgozása és megjelenítése a felhasználó képernyőjén vagy nyomtatásban. A XUL-alapú alkalmazásokban a Gecko felel az alkalmazás felhasználói felületének megjelenítéséért is.</span></p> + +<p>A Geckót számos alkalmazásban használják, többek között néhány böngészőben, pl. a Firefox és a SeaMonkeyban is (teljesebb listát lásd a <a class="external" href="https://hu.wikipedia.org/wiki/Gecko#Webb%C3%B6ng%C3%A9sz%C5%91k" rel="external">Wikipédia Geckóról szóló szócikkében</a>). A Gecko azonos verzióját használó termékek azonos mértékben támogatják a webes sztenderdeket.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="Dokumentáció">Dokumentáció</h2> + + <dl> + <dt><a href="/hu/docs/Mozilla/Gecko/Chrome">Chrome</a></dt> + <dd>This page contains information specific to browser chrome (not Google Chrome) code running in Gecko.</dd> + <dt><a href="/hu/docs/Gecko_FAQ">Gecko GYIK</a></dt> + <dd>Gyakran ismételt kérdések a Geckóról.</dd> + <dt><a href="/hu/docs/Gecko_DOM_Reference">Gecko DOM referencia</a></dt> + <dd>A DOM referenciaszintű leírása.</dd> + <dt><a href="/hu/docs/Gecko-Specific_DOM_Events">Gecko-esemény-referencia</a></dt> + <dd>Referencia a Geckóban és Mozilla-alkalmazásokban használt eseményekről; a webes sztenderdek által meghatározott DOM-eseményekhez lásd a <a href="/hu/docs/DOM/DOM_event_reference">DOM-esemény-referenciát</a>.</dd> + <dt><a href="/hu/docs/Gecko/Versions">Gecko- és alkalmazásverziók</a></dt> + <dd>A Gecko verziói és az azokat használó alkalmazások.</dd> + <dt><a href="/hu/docs/Introduction_to_Layout_in_Mozilla">Bevezetés a megjelenésbe a Mozillában</a></dt> + <dd>Tech Talk on layout.</dd> + <dt><a href="/hu/docs/Embedding_Mozilla">Mozilla beágyazása</a></dt> + <dd>A Gecko használata saját alkalmazásban.</dd> + <dt><a href="/hu/docs/Character_Sets_Supported_by_Gecko">A Gecko által támogatott karakterkészletek</a></dt> + <dd>A Gecko által támogatott karakterkészletek listája.</dd> + <dt><a href="/hu/docs/Gecko/HTML_parser_threading" title="Gecko/HTML_parser_threading">Többszálú HTML-feldolgozás</a></dt> + <dd>A HTML-feldolgozó többszálú működésének leírása.</dd> + <dt>{{interwiki('wikimo', 'Gecko:Home_Page', 'Gecko-kezdőlap a MozillaWikiben')}}</dt> + <dd>Home for the active developers. Roadmaps and more up-to-date resources.</dd> + </dl> + + <p><span class="alllinks"><a href="/hu/docs/tag/Gecko">Minden kapcsolódó dokumentáció megjelenítése</a></span></p> + </td> + <td> + <h2 id="Közösség">Közösség</h2> + + <ul> + <li>Mozilla-fórumok: {{DiscussionList("dev-tech-layout", "mozilla.dev.tech.layout")}}</li> + </ul> + + <h2 id="Kapcsolódó_témák">Kapcsolódó témák</h2> + + <ul> + <li><a href="/hu/docs/Web_Standards">Webes sztenderdek</a></li> + <li><a href="/hu/docs/XUL">XUL</a></li> + <li><a href="/hu/docs/Embedding_Mozilla">Mozilla beágyazása</a></li> + <li><a href="/hu/docs/Developer_Guide">Mozilla-fejlesztés</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/hu/mozilla/index.html b/files/hu/mozilla/index.html new file mode 100644 index 0000000000..e24ed8a774 --- /dev/null +++ b/files/hu/mozilla/index.html @@ -0,0 +1,13 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +<div> + {{draft}}</div> +<p>This will soon be an awesome landing page for Mozilla internals. For now, it's not.</p> +<div> + {{ListSubpages}}</div> diff --git a/files/hu/tools/index.html b/files/hu/tools/index.html new file mode 100644 index 0000000000..fc51d30559 --- /dev/null +++ b/files/hu/tools/index.html @@ -0,0 +1,218 @@ +--- +title: Firefox Developer Tools +slug: Tools +tags: + - Developing Mozilla + - Guide + - NeedsMarkupWork + - NeedsTranslation + - Tools + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.</p> + +<p>If you are looking for information on using the web developer tools available in Firefox, you've come to the right place — this page provides links to detailed information on all of the core tools and additional tools, and further information such as how to connect to and debug Firefox for Android, how to extend the devtools, and how to debug the browser as a whole.</p> + +<p>Please explore the links found in the sidebar, and further down the page. If you have any feedback or questions about the devtools, send us messages on our mailing list or IRC channel (see the <a href="/en-US/docs/Tools#Join_the_Developer_tools_community">community links near the bottom of the page</a>). If you have any feedback or questions specifically about the documentation, the <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> is a good place to post.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are just getting started with web development and using developer tools, our <a href="/en-US/docs/Learn">learning web development</a> docs will help you — see <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> and <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a> for good starting points.</p> +</div> + +<h2 id="The_Core_Tools">The Core Tools</h2> + +<p>You can open the Firefox Developer Tools from the menu by selecting <em>Tools</em> > <em>Web Developer</em> > <em>Toggle Tools</em> or use the keyboard shortcut <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on macOS.</p> + +<p>The ellipsis menu on the right-hand side of Developer Tools, contains several commands that let you perform actions or change tool settings.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></p> + +<table class="standard-table" style="height: 178px; width: 840px;"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> + <td>This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> + <td>Click this button to take a screenshot of the current page. (<strong>Note:</strong> This feature is not turned on by default and must be enabled in settings before the icon will appear.)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> + <td>Toggles Responsive Design Mode.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> + <td>Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> + <td>Closes the Developer Tools</td> + </tr> + </tbody> +</table> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Page_Inspector">Page Inspector</h3> + +<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.</p> +</div> + +<div class="column-half"> +<h3 id="Web_Console">Web Console</h3> + +<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See messages logged by a web page and interact with the page using JavaScript.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="JavaScript_Debugger">JavaScript Debugger</h3> + +<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Stop, step through, examine, and modify the JavaScript running in a page.</p> +</div> + +<div class="column-half"> +<h3 id="Network_Monitor">Network Monitor</h3> + +<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See the network requests made when a page is loaded.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Performance_Tools">Performance Tools</h3> + +<p><a href="/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Analyze your site's general responsiveness, JavaScript, and layout performance.</p> +</div> + +<div class="column-half"> +<h3 id="Responsive_Design_Mode">Responsive Design Mode</h3> + +<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See how your website or app will look and behave on different devices and network types.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Accessibility_inspector">Accessibility inspector</h3> + +<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.</p> +</div> + +<div class="column-half"></div> +</div> + +<div class="note"> +<p><strong>Note</strong>: The collective term for the UI inside which the DevTools all live is the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>.</p> +</div> + +<h2 id="More_Tools">More Tools</h2> + +<p>These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Memory">Memory</a></dt> + <dd>Figure out which objects are keeping memory in use.</dd> + <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt> + <dd>Inspect cookies, local storage, indexedDB, and session storage present in a page.</dd> + <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt> + <dd>Inspect the page's DOM properties, functions, etc.</dd> + <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> + <dd>Select a color from the page.</dd> + <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt> + <dd>A text editor built into Firefox that lets you write and execute JavaScript.</dd> + <dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt> + <dd>View and edit CSS styles for the current page.</dd> + <dt><a href="/en-US/docs/Tools/Screenshot_tool">Taking screenshots</a></dt> + <dd>Take a screenshot of the entire page or of a single element.</dd> + <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Measure a portion of the page</a></dt> + <dd>Measure a specific area of a web page.</dd> + <dt><a href="/en-US/docs/Tools/Rulers">Rulers</a></dt> + <dd>Overlay horizontal and vertical rulers on a web page</dd> +</dl> +</div> + +<div class="column-container"> +<div class="column-third"> +<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> + +<p style="text-align: center;">For the latest developer tools and features, try Firefox Developer Edition.</p> + +<p><a href="https://www.mozilla.org/en-US/firefox/developer/" style="width: 300px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p> +</div> + +<div class="column-third"></div> +</div> + +<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2> + +<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcuts</a> or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt> + <dd>Debug add-ons, content tabs, and workers running in the browser.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt> + <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd> + <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt> + <dd>Connect the developer tools to a specific iframe in the current page.</dd> + <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt> + <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd> +</dl> +</div> + +<h2 id="Debugging_the_browser">Debugging the browser</h2> + +<p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt> + <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd> + <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> + <dd>Attach the Developer Tools to the browser itself.</dd> +</dl> +</div> + +<h2 id="Extending_the_devtools">Extending the devtools</h2> + +<p>For information on extending the Firefox DevTools, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> over in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a> section of MDN.</p> + +<h2 id="Migrating_from_Firebug">Migrating from Firebug</h2> + +<p>Firebug has come to the end of its lifespan (see <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrating from Firebug</a>.</p> + +<h2 id="Contribute">Contribute</h2> + +<p>If you want to help improve the developer tools, these resources will get you started.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="https://docs.firefox-dev.tools/">Get Involved</a></dt> + <dd>Our developer documentation explains how to get involved.</dd> + <dt><a href="http://bugs.firefox-dev.tools/">bugs.firefox-dev.tools</a></dt> + <dd>A tool helping to find bugs to work on.</dd> +</dl> +</div> diff --git a/files/hu/web/api/document/createtextnode/index.html b/files/hu/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..6fc2489f34 --- /dev/null +++ b/files/hu/web/api/document/createtextnode/index.html @@ -0,0 +1,82 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Document + - Method + - Reference + - Szöveg + - creatTextNode +translation_of: Web/API/Document/createTextNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>Készít egy új {{domxref("Text")}} node-ot. Ezt a metódust használhatod arra hogy escape-eld a HTML karaktereket a szövegből, mint pl "<" vagy "&"</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>textNode</var> = document.createTextNode(<var>text</var>); +</pre> + +<ul> + <li><var>textNode</var> egy új {{domxref("Text")}} node.</li> + <li><var>text</var> egy <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">szöveg</a> amit szeretnénk a textNode-ba elhelyezni.</li> +</ul> + +<h2 id="Példa">Példa</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>createTextNode example</title> +<script> +function addTextNode(text) { + var newtext = document.createTextNode(text), + p1 = document.getElementById("p1"); + + p1.appendChild(newtext); +} +</script> +</head> + +<body> + <button onclick="addTextNode('IGEN! ');">IGEN!</button> + <button onclick="addTextNode('NEM! ');">NEM!</button> + <button onclick="addTextNode('ESCAPE <strong>BOLD</strong> AND &bull; ENTITIES! ');">ESCAPE <strong>BOLD</strong> AND &bull; ENTITIES!</button> + + <hr /> + + <p id="p1">First line of paragraph.</p> +</body> +</html> + +</pre> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-createtextnode', 'Document: createTextNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Document.createTextNode")}}</p> diff --git a/files/hu/web/api/document/index.html b/files/hu/web/api/document/index.html new file mode 100644 index 0000000000..a8181b06b7 --- /dev/null +++ b/files/hu/web/api/document/index.html @@ -0,0 +1,665 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Document + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Document +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">The <strong><code>Document</code></strong> interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core">DOM tree</a>.</span> The DOM tree includes elements such as {{HTMLElement("body")}} and {{HTMLElement("table")}}, among <a href="/en-US/docs/Web/HTML/Element">many others</a>. It provides functionality globally to the document, like how to obtain the page's URL and create new elements in the document.</p> + +<p>{{InheritanceDiagram}}</p> + +<p>The <code>Document</code> interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. <a href="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/XML">XML</a>, SVG, …), a larger API is available: HTML documents, served with the <code>"text/html"</code> content type, also implement the {{DOMxRef("HTMLDocument")}} interface, whereas XML and SVG documents implement the {{DOMxRef("XMLDocument")}} interface.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{DOMxRef("Document.Document", "Document()")}}</dt> + <dd>Creates a new <code>Document</code> object.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface also inherits from the {{DOMxRef("Node")}} and {{DOMxRef("EventTarget")}} interfaces.</em></p> + +<dl> + <dt>{{DOMxRef("Document.anchors")}}{{ReadOnlyInline}}</dt> + <dd>Returns a list of all of the anchors in the document.</dd> + <dt>{{DOMxRef("Document.body")}}</dt> + <dd>Returns the {{HTMLElement("body")}} or {{htmlelement("frameset")}} node of the current document.</dd> + <dt>{{DOMxRef("Document.characterSet")}}{{ReadOnlyInline}}</dt> + <dd>Returns the character set being used by the document.</dd> + <dt>{{DOMxRef("Document.compatMode")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> + <dd>Indicates whether the document is rendered in <em>quirks</em> or <em>strict</em> mode.</dd> + <dt>{{DOMxRef("Document.contentType")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the Content-Type from the MIME Header of the current document.</dd> + <dt>{{DOMxRef("Document.doctype")}}{{ReadOnlyInline}}</dt> + <dd>Returns the Document Type Definition (DTD) of the current document.</dd> + <dt>{{DOMxRef("Document.documentElement")}}{{ReadOnlyInline}}</dt> + <dd>Returns the {{DOMxRef("Element")}} that is a direct child of the document. For HTML documents, this is normally the {{DOMxRef("HTMLHtmlElement")}} object representing the document's {{HTMLElement("html")}} element.</dd> + <dt>{{DOMxRef("Document.documentURI")}}{{ReadOnlyInline}}</dt> + <dd>Returns the document location as a string.</dd> + <dt>{{DOMxRef("Document.embeds")}}{{ReadOnlyInline}}</dt> + <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd> + <dt>{{DOMxRef("Document.fonts")}}</dt> + <dd>Returns the {{DOMxRef("FontFaceSet")}} interface of the current document.</dd> + <dt>{{DOMxRef("Document.forms")}}{{ReadOnlyInline}}</dt> + <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd> + <dt>{{DOMxRef("Document.head")}}{{ReadOnlyInline}}</dt> + <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd> + <dt>{{DOMxRef("Document.hidden")}}{{ReadOnlyInline}}</dt> + <dd>Returns a Boolean value indicating if the page is considered hidden or not.</dd> + <dt>{{DOMxRef("Document.images")}}{{ReadOnlyInline}}</dt> + <dd>Returns a list of the images in the current document.</dd> + <dt>{{DOMxRef("Document.implementation")}}{{ReadOnlyInline}}</dt> + <dd>Returns the DOM implementation associated with the current document.</dd> + <dt>{{DOMxRef("Document.lastStyleSheetSet")}}{{ReadOnlyInline}}</dt> + <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{DOMxRef("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <dt>{{DOMxRef("Document.links")}}{{ReadOnlyInline}}</dt> + <dd>Returns a list of all the hyperlinks in the document.</dd> + <dt>{{DOMxRef("Document.mozSyntheticDocument")}} {{Non-standard_Inline}}</dt> + <dd>Returns a {{JSxRef("Boolean")}} that is <code>true</code> only if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd> + <dt>{{DOMxRef("Document.plugins")}}{{ReadOnlyInline}}</dt> + <dd>Returns a list of the available plugins.</dd> + <dt>{{DOMxRef("Document.featurePolicy")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the {{DOMxRef("FeaturePolicy")}} interface which provides a simple API for introspecting the feature policies applied to a specific document.</dd> + <dt>{{DOMxRef("Document.preferredStyleSheetSet")}}{{ReadOnlyInline}}</dt> + <dd>Returns the preferred style sheet set as specified by the page author.</dd> + <dt>{{DOMxRef("Document.scripts")}}{{ReadOnlyInline}}</dt> + <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd> + <dt>{{DOMxRef("Document.scrollingElement")}}{{ReadOnlyInline}}</dt> + <dd>Returns a reference to the {{DOMxRef("Element")}} that scrolls the document.</dd> + <dt>{{DOMxRef("Document.selectedStyleSheetSet")}}</dt> + <dd>Returns which style sheet set is currently in use.</dd> + <dt>{{DOMxRef("Document.styleSheetSets")}}{{ReadOnlyInline}}</dt> + <dd>Returns a list of the style sheet sets available on the document.</dd> + <dt>{{DOMxRef("Document.timeline")}}{{ReadOnlyInline}}</dt> + <dd>Returns timeline as a special instance of {{domxref("DocumentTimeline")}} that is automatically created on page load.</dd> + <dt>{{DOMxRef("Document.undoManager")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> + <dd>…</dd> + <dt>{{DOMxRef("Document.visibilityState")}}{{ReadOnlyInline}}</dt> + <dd>Returns a <code>string</code> denoting the visibility state of the document. Possible values are <code>visible</code>, <code>hidden</code>, <code>prerender</code>, and <code>unloaded</code>.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{DOMxRef("ParentNode")}} interface:</p> + +<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> + +<h3 id="Extensions_for_HTMLDocument">Extensions for HTMLDocument</h3> + +<p><em>The <code>Document</code> interface for HTML documents inherits from the {{DOMxRef("HTMLDocument")}} interface or, since HTML5, is extended for such documents.</em></p> + +<dl> + <dt>{{DOMxRef("Document.cookie")}}</dt> + <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd> + <dt>{{DOMxRef("Document.defaultView")}}{{ReadOnlyInline}}</dt> + <dd>Returns a reference to the window object.</dd> + <dt>{{DOMxRef("Document.designMode")}}</dt> + <dd>Gets/sets the ability to edit the whole document.</dd> + <dt>{{DOMxRef("Document.dir")}}{{ReadOnlyInline}}</dt> + <dd>Gets/sets directionality (rtl/ltr) of the document.</dd> + <dt>{{DOMxRef("Document.domain")}}</dt> + <dd>Gets/sets the domain of the current document.</dd> + <dt>{{DOMxRef("Document.lastModified")}}{{ReadOnlyInline}}</dt> + <dd>Returns the date on which the document was last modified.</dd> + <dt>{{DOMxRef("Document.location")}}{{ReadOnlyInline}}</dt> + <dd>Returns the URI of the current document.</dd> + <dt>{{DOMxRef("Document.readyState")}}{{ReadOnlyInline}}</dt> + <dd>Returns loading status of the document.</dd> + <dt>{{DOMxRef("Document.referrer")}}{{ReadOnlyInline}}</dt> + <dd>Returns the URI of the page that linked to this page.</dd> + <dt>{{DOMxRef("Document.title")}}</dt> + <dd>Sets or gets the title of the current document.</dd> + <dt>{{DOMxRef("Document.URL")}}{{ReadOnlyInline}}</dt> + <dd>Returns the document location as a string.</dd> +</dl> + +<h3 id="Properties_included_from_DocumentOrShadowRoot">Properties included from DocumentOrShadowRoot</h3> + +<p><em>The <code>Document</code> interface includes the following properties defined on the {{DOMxRef("DocumentOrShadowRoot")}} mixin. Note that this is currently only implemented by Chrome; other browsers still implement them directly on the {{DOMxRef("Document")}} interface.</em></p> + +<dl> + <dt>{{DOMxRef("DocumentOrShadowRoot.activeElement")}}{{ReadOnlyInline}}</dt> + <dd>Returns the {{DOMxRef('Element')}} within the shadow tree that has focus.</dd> + <dt>{{DOMxRef("Document.fullscreenElement")}}{{ReadOnlyInline}}</dt> + <dd>The element that's currently in full screen mode for this document.</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef('StyleSheetList')}} of {{DOMxRef('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a document.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{DOMxRef("Document.onafterscriptexecute")}} {{Non-standard_Inline}}</dt> + <dd>Represents the event handling code for the {{event("afterscriptexecute")}} event.</dd> + <dt>{{DOMxRef("Document.onbeforescriptexecute")}} {{Non-standard_Inline}}</dt> + <dd>Represents the event handling code for the {{event("beforescriptexecute")}} event.</dd> + <dt>{{DOMxRef("Document.oncopy")}} {{Non-standard_Inline}}</dt> + <dd>Represents the event handling code for the {{event("copy")}} event.</dd> + <dt>{{DOMxRef("Document.oncut")}} {{Non-standard_Inline}}</dt> + <dd>Represents the event handling code for the {{event("cut")}} event.</dd> + <dt>{{DOMxRef("Document.onfullscreenchange")}}</dt> + <dd>Is an {{DOMxRef("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd> + <dt>{{DOMxRef("Document.onfullscreenerror")}}</dt> + <dd>Is an {{DOMxRef("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd> + <dt>{{DOMxRef("Document.onpaste")}} {{Non-standard_Inline}}</dt> + <dd>Represents the event handling code for the {{event("paste")}} event.</dd> + <dt>{{DOMxRef("Document.onreadystatechange")}}</dt> + <dd>Represents the event handling code for the {{event("readystatechange")}} event.</dd> + <dt>{{DOMxRef("Document.onselectionchange")}} {{Experimental_Inline}}</dt> + <dd>Is an {{DOMxRef("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{DOMxRef("Document.onvisibilitychange")}}</dt> + <dd>Is an {{DOMxRef("EventHandler")}} representing the code to be called when the {{event("visibilitychange")}} event is raised.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{DOMxRef("GlobalEventHandlers")}} interface:</p> + +<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}</p> + +<h3 id="Deprecated_properties">Deprecated properties</h3> + +<dl> + <dt>{{DOMxRef("Document.alinkColor")}} {{Deprecated_Inline}}</dt> + <dd>Returns or sets the color of active links in the document body.</dd> + <dt>{{DOMxRef("Document.all")}} {{Deprecated_Inline}} {{Non-standard_Inline}}</dt> + <dd>Provides access to all elements in the document — it returns an {{DOMxRef('HTMLAllCollection')}} rooted at the document node. This is a legacy, non-standard property and should not be used.</dd> + <dt>{{DOMxRef("Document.applets")}} {{Deprecated_Inline}}{{ReadOnlyInline}}</dt> + <dd>Returns an ordered list of the applets within a document.</dd> + <dt>{{DOMxRef("Document.bgColor")}} {{Deprecated_Inline}}</dt> + <dd>Gets/sets the background color of the current document.</dd> + <dt>{{DOMxRef("Document.charset")}} {{Deprecated_Inline}}{{ReadOnlyInline}}</dt> + <dd>Alias of {{DOMxRef("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{DOMxRef("Document.domConfig")}} {{Deprecated_Inline}}</dt> + <dd>Should return a {{DOMxRef("DOMConfiguration")}} object.</dd> + <dt>{{DOMxRef("Document.fgColor")}} {{Deprecated_Inline}}</dt> + <dd>Gets/sets the foreground color, or text color, of the current document.</dd> + <dt>{{DOMxRef("Document.fullscreen")}} {{Obsolete_Inline}}</dt> + <dd><code>true</code> when the document is in {{DOMxRef("Using_full-screen_mode","full-screen mode")}}.</dd> + <dt>{{DOMxRef("Document.height")}} {{Non-standard_Inline}} {{Obsolete_Inline}}</dt> + <dd>Gets/sets the height of the current document.</dd> + <dt>{{DOMxRef("Document.inputEncoding")}} {{Deprecated_Inline}}{{ReadOnlyInline}}</dt> + <dd>Alias of {{DOMxRef("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{DOMxRef("Document.linkColor")}} {{Deprecated_Inline}}</dt> + <dd>Gets/sets the color of hyperlinks in the document.</dd> + <dt>{{DOMxRef("Document.vlinkColor")}} {{Deprecated_Inline}}</dt> + <dd>Gets/sets the color of visited hyperlinks.</dd> + <dt>{{DOMxRef("Document.width")}} {{Non-standard_Inline}} {{Obsolete_Inline}}</dt> + <dd>Returns the width of the current document.</dd> + <dt>{{DOMxRef("Document.xmlEncoding")}} {{Deprecated_Inline}}</dt> + <dd>Returns the encoding as determined by the XML declaration.</dd> + <dt>{{DOMxRef("Document.xmlStandalone")}} {{Obsolete_Inline("Gecko10")}}</dt> + <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd> + <dt>{{DOMxRef("Document.xmlVersion")}} {{Obsolete_Inline("Gecko10")}}</dt> + <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface also inherits from the {{DOMxRef("Node")}} and {{DOMxRef("EventTarget")}} interfaces.</em></p> + +<dl> + <dt>{{DOMxRef("Document.adoptNode()")}}</dt> + <dd>Adopt node from an external document.</dd> + <dt>{{DOMxRef("Document.captureEvents()")}} {{Deprecated_Inline}}</dt> + <dd>See {{DOMxRef("Window.captureEvents")}}.</dd> + <dt>{{DOMxRef("Document.caretRangeFromPoint()")}} {{Non-standard_Inline}}</dt> + <dd>Gets a {{DOMxRef("Range")}} object for the document fragment under the specified coordinates.</dd> + <dt>{{DOMxRef("Document.createAttribute()")}}</dt> + <dd>Creates a new {{DOMxRef("Attr")}} object and returns it.</dd> + <dt>{{DOMxRef("Document.createAttributeNS()")}}</dt> + <dd>Creates a new attribute node in a given namespace and returns it.</dd> + <dt>{{DOMxRef("Document.createCDATASection()")}}</dt> + <dd>Creates a new CDATA node and returns it.</dd> + <dt>{{DOMxRef("Document.createComment()")}}</dt> + <dd>Creates a new comment node and returns it.</dd> + <dt>{{DOMxRef("Document.createDocumentFragment()")}}</dt> + <dd>Creates a new document fragment.</dd> + <dt>{{DOMxRef("Document.createElement()")}}</dt> + <dd>Creates a new element with the given tag name.</dd> + <dt>{{DOMxRef("Document.createElementNS()")}}</dt> + <dd>Creates a new element with the given tag name and namespace URI.</dd> + <dt>{{DOMxRef("Document.createEntityReference()")}} {{Obsolete_Inline}}</dt> + <dd>Creates a new entity reference object and returns it.</dd> + <dt>{{DOMxRef("Document.createEvent()")}}</dt> + <dd>Creates an event object.</dd> + <dt>{{DOMxRef("Document.createNodeIterator()")}}</dt> + <dd>Creates a {{DOMxRef("NodeIterator")}} object.</dd> + <dt>{{DOMxRef("Document.createProcessingInstruction()")}}</dt> + <dd>Creates a new {{DOMxRef("ProcessingInstruction")}} object.</dd> + <dt>{{DOMxRef("Document.createRange()")}}</dt> + <dd>Creates a {{DOMxRef("Range")}} object.</dd> + <dt>{{DOMxRef("Document.createTextNode()")}}</dt> + <dd>Creates a text node.</dd> + <dt>{{DOMxRef("Document.createTouch()")}} {{Deprecated_Inline}}</dt> + <dd>Creates a {{DOMxRef("Touch")}} object.</dd> + <dt>{{DOMxRef("Document.createTouchList()")}}</dt> + <dd>Creates a {{DOMxRef("TouchList")}} object.</dd> + <dt>{{DOMxRef("Document.createTreeWalker()")}}</dt> + <dd>Creates a {{DOMxRef("TreeWalker")}} object.</dd> + <dt>{{DOMxRef("Document.enableStyleSheetsForSet()")}}</dt> + <dd>Enables the style sheets for the specified style sheet set.</dd> + <dt>{{DOMxRef("Document.exitPointerLock()")}} {{Experimental_Inline}}</dt> + <dd>Release the pointer lock.</dd> + <dt>{{DOMxRef("Document.getAnimations()")}} {{Experimental_Inline}}</dt> + <dd>Returns an array of all {{DOMxRef("Animation")}} objects currently in effect, whose target elements are descendants of the <code>document</code>.</dd> + <dt>{{DOMxRef("Document.getElementsByClassName()")}}</dt> + <dd>Returns a list of elements with the given class name.</dd> + <dt>{{DOMxRef("Document.getElementsByTagName()")}}</dt> + <dd>Returns a list of elements with the given tag name.</dd> + <dt>{{DOMxRef("Document.getElementsByTagNameNS()")}}</dt> + <dd>Returns a list of elements with the given tag name and namespace.</dd> + <dt>{{DOMxRef("Document.hasStorageAccess()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} that resolves with a boolean value indicating whether the document has access to its first-party storage.</dd> + <dt>{{DOMxRef("Document.importNode()")}}</dt> + <dd>Returns a clone of a node from an external document.</dd> + <dt>{{DOMxRef("Document.normalizeDocument()")}} {{Obsolete_Inline}}</dt> + <dd>Replaces entities, normalizes text nodes, etc.</dd> + <dt>{{DOMxRef("Document.releaseCapture()")}} {{Non-standard_Inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Releases the current mouse capture if it's on an element in this document.</dd> + <dt>{{DOMxRef("Document.releaseEvents()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> + <dd>See {{DOMxRef("Window.releaseEvents()")}}.</dd> + <dt>{{DOMxRef("Document.requestStorageAccess()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} that resolves if the access to first-party storage was granted, and rejects if access was denied.</dd> + <dt>{{DOMxRef("Document.routeEvent()")}} {{Non-standard_Inline}} {{Obsolete_Inline("Gecko24")}}</dt> + <dd>See {{DOMxRef("Window.routeEvent()")}}.</dd> + <dt>{{DOMxRef("Document.mozSetImageElement()")}} {{Non-standard_Inline}}</dt> + <dd>Allows you to change the element being used as the background image for a specified element ID.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{DOMxRef("ParentNode")}} interface:</p> + +<dl> + <dt>{{DOMxRef("Document.getElementById","document.getElementById(String id)")}}</dt> + <dd>Returns an object reference to the identified element.</dd> + <dt>{{DOMxRef("Document.querySelector()")}}</dt> + <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd> + <dt>{{DOMxRef("Document.querySelectorAll()")}}</dt> + <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{DOMxRef("XPathEvaluator")}} interface:</p> + +<dl> + <dt>{{DOMxRef("Document.createExpression()")}}</dt> + <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd> + <dt>{{DOMxRef("Document.createNSResolver()")}}</dt> + <dd>Creates an {{DOMxRef("XPathNSResolver")}} object.</dd> + <dt>{{DOMxRef("Document.evaluate()")}}</dt> + <dd>Evaluates an XPath expression.</dd> +</dl> + +<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3> + +<p>The <code>Document</code> interface for HTML documents inherit from the {{DOMxRef("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p> + +<dl> + <dt>{{DOMxRef("Document.clear()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> + <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> + <dt>{{DOMxRef("Document.close()")}}</dt> + <dd>Closes a document stream for writing.</dd> + <dt>{{DOMxRef("Document.execCommand()")}}</dt> + <dd>On an editable document, executes a formating command.</dd> + <dt>{{DOMxRef("Document.getElementsByName()")}}</dt> + <dd>Returns a list of elements with the given name.</dd> + <dt>{{DOMxRef("Document.hasFocus()")}}</dt> + <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> + <dt>{{DOMxRef("Document.open()")}}</dt> + <dd>Opens a document stream for writing.</dd> + <dt>{{DOMxRef("Document.queryCommandEnabled()")}}</dt> + <dd>Returns true if the formating command can be executed on the current range.</dd> + <dt>{{DOMxRef("Document.queryCommandIndeterm()")}}</dt> + <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> + <dt>{{DOMxRef("Document.queryCommandState()")}}</dt> + <dd>Returns true if the formating command has been executed on the current range.</dd> + <dt>{{DOMxRef("Document.queryCommandSupported()")}}</dt> + <dd>Returns true if the formating command is supported on the current range.</dd> + <dt>{{DOMxRef("Document.queryCommandValue()")}}</dt> + <dd>Returns the current value of the current range for a formating command.</dd> + <dt>{{DOMxRef("Document.write()")}}</dt> + <dd>Writes text in a document.</dd> + <dt>{{DOMxRef("Document.writeln()")}}</dt> + <dd>Writes a line of text in a document.</dd> +</dl> + +<h3 id="Methods_included_from_DocumentOrShadowRoot">Methods included from DocumentOrShadowRoot</h3> + +<p><em>The <code>Document</code> interface includes the following methods defined on the {{DOMxRef("DocumentOrShadowRoot")}} mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the {{DOMxRef("Document")}} interface.</em></p> + +<dl> + <dt>{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}</dt> + <dd>Returns a {{DOMxRef('Selection')}} object representing the range of text selected by the user, or the current position of the caret.</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</dt> + <dd>Returns the topmost element at the specified coordinates.</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</dt> + <dd>Returns an array of all elements at the specified coordinates.</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt> + <dd>Returns a {{DOMxRef('CaretPosition')}} object containing the DOM node containing the caret, and caret's character offset within that node.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt>{{DOMxRef("Document/scroll_event", "scroll")}}</dt> + <dd>Fired when the document view or an element has been scrolled.<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.</dd> + <dt>{{DOMxRef("Document/visibilitychange_event", "visibilitychange")}}</dt> + <dd>Fired when the content of a tab has become visible or has been hidden.<br> + Also available via the {{DOMxRef("Document.onvisibilitychange", "onvisibilitychange")}} property.</dd> + <dt>{{DOMxRef("Document/wheel_event","wheel")}}</dt> + <dd>Fired when the user rotates a wheel button on a pointing device (typically a mouse).<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} property.</dd> +</dl> + +<h3 id="Animation_events">Animation events</h3> + +<dl> + <dt>{{DOMxRef("Document/animationcancel_event", "animationcancel")}}</dt> + <dd>Fired when an animation unexpectedly aborts.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} property.</dd> + <dt>{{DOMxRef("Document/animationend_event", "animationend")}}</dt> + <dd>Fired when an animation has completed normally.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onanimationend", "onanimationend")}} property.</dd> + <dt>{{DOMxRef("Document/animationiteration_event", "animationiteration")}}</dt> + <dd>Fired when an animation iteration has completed.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onanimationiteration", "onanimationiteration")}} property.</dd> + <dt>{{DOMxRef("Document/animationstart_event", "animationstart")}}</dt> + <dd>Fired when an animation starts.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onanimationstart", "onanimationstart")}} property.</dd> +</dl> + +<h3 id="Clipboard_events">Clipboard events</h3> + +<dl> + <dt>{{DOMxRef("Document/copy_event", "copy")}}</dt> + <dd>Fired when the user initiates a copy action through the browser's user interface.<br> + Also available via the {{DOMxRef("HTMLElement/oncopy", "oncopy")}} property.</dd> + <dt>{{DOMxRef("Document/cut_event", "cut")}}</dt> + <dd>Fired when the user initiates a cut action through the browser's user interface.<br> + Also available via the {{DOMxRef("HTMLElement/oncut", "oncut")}} property.</dd> + <dt>{{DOMxRef("Document/paste_event", "paste")}}</dt> + <dd>Fired when the user initiates a paste action through the browser's user interface.<br> + Also available via the {{DOMxRef("HTMLElement/onpaste", "onpaste")}} property.</dd> +</dl> + +<h3 id="Drag_drop_events">Drag & drop events</h3> + +<dl> + <dt>{{DOMxRef("Document/drag_event", "drag")}}</dt> + <dd>Fired every few hundred milliseconds as an element or text selection is being dragged by the user.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ondrag", "ondrag")}} property.</dd> + <dt>{{DOMxRef("Document/dragend_event", "dragend")}}</dt> + <dd>Fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ondragend", "ondragend")}} property.</dd> + <dt>{{DOMxRef("Document/dragenter_event", "dragenter")}}</dt> + <dd>Fired when a dragged element or text selection enters a valid drop target.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ondragenter", "ondragenter")}} property.</dd> + <dt>{{DOMxRef("Document/dragexit_event", "dragexit")}}</dt> + <dd>Fired when an element is no longer the drag operation's immediate selection target.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ondragexit", "ondragexit")}} property.</dd> + <dt>{{DOMxRef("Document/dragleave_event", "dragleave")}}</dt> + <dd>Fired when a dragged element or text selection leaves a valid drop target.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ondragleave", "ondragleave")}} property.</dd> + <dt>{{DOMxRef("Document/dragover_event", "dragover")}}</dt> + <dd>Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ondragover", "ondragover")}} property.</dd> + <dt>{{DOMxRef("Document/dragstart_event", "dragstart")}}</dt> + <dd>Fired when the user starts dragging an element or text selection.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ondragstart", "ondragstart")}} property.</dd> + <dt>{{DOMxRef("Document/drop_event", "drop")}}</dt> + <dd>Fired when an element or text selection is dropped on a valid drop target.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ondrop", "ondrop")}} property.</dd> +</dl> + +<h3 id="Fullscreen_events">Fullscreen events</h3> + +<dl> + <dt>{{DOMxRef("Document/fullscreenchange_event", "fullscreenchange")}}</dt> + <dd>Fired when the <code>Document</code> transitions into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br> + Also available via the {{DOMxRef("Document.onfullscreenchange", "onfullscreenchange")}} property.</dd> + <dt><code><a href="/en-US/docs/Web/Events/fullscreenerror">fullscreenerror</a></code></dt> + <dd>Fired if an error occurs while attempting to switch into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br> + Also available via the {{DOMxRef("Document.onfullscreenerror", "onfullscreenerror")}} property.</dd> + <dt> + <h3 id="Keyboard_events">Keyboard events</h3> + </dt> + <dt>{{DOMxRef("Document/keydown_event", "keydown")}}</dt> + <dd>Fired when a key is pressed.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onkeydown", "onkeydown")}} property.</dd> + <dt>{{DOMxRef("Document/keypress_event", "keypress")}}</dt> + <dd>Fired when a key that produces a character value is pressed down. {{Deprecated_Inline}}<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onkeypress", "onkeypress")}} property.</dd> + <dt>{{DOMxRef("Document/keyup_event", "keyup")}}</dt> + <dd>Fired when a key is released.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onkeyup", "onkeyup")}} property.</dd> +</dl> + +<h3 id="Load_unload_events">Load & unload events</h3> + +<dl> + <dt>{{DOMxRef("Document/DOMContentLoaded_event", "DOMContentLoaded")}}</dt> + <dd>Fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.</dd> + <dt>{{DOMxRef("Document/readystatechange_event", "readystatechange")}}</dt> + <dd>Fired when the {{DOMxRef("Document/readyState", "readyState")}} attribute of a document has changed.<br> + Also available via the <code>onreadystatechange</code> property.</dd> +</dl> + +<h3 id="Pointer_events">Pointer events</h3> + +<dl> + <dt>{{DOMxRef("Document/gotpointercapture_event", "gotpointercapture")}}</dt> + <dd>Fired when when an element captures a pointer using <code><a href="/en-US/docs/Web/API/Element/setPointerCapture">setPointerCapture()</a></code>.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ongotpointercapture", "ongotpointercapture")}} property.</dd> + <dt>{{DOMxRef("Document/lostpointercapture_event", "lostpointercapture")}}</dt> + <dd>Fired when a <a href="/en-US/docs/Web/API/Pointer_events#Pointer_capture">captured pointer</a> is released.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onlostpointercapture", "onlostpointercapture")}} property.</dd> + <dt>{{DOMxRef("Document/pointercancel_event", "pointercancel")}}</dt> + <dd>Fired when a pointer event is canceled.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onpointercancel", "onpointercancel")}} property.</dd> + <dt>{{DOMxRef("Document/pointerdown_event", "pointerdown")}}</dt> + <dd>Fired when a pointer becomes active.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onpointerdown", "onpointerdown")}} property.</dd> + <dt>{{DOMxRef("Document/pointerenter_event", "pointerenter")}}</dt> + <dd>Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onpointerenter", "onpointerenter")}} property.</dd> + <dt>{{DOMxRef("Document/pointerleave_event", "pointerleave")}}</dt> + <dd>Fired when a pointer is moved out of the hit test boundaries of an element.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onpointerleave", "onpointerleave")}} property.</dd> + <dt>{{DOMxRef("Document/pointerlockchange_event", "pointerlockchange")}}</dt> + <dd>Fired when the pointer is locked/unlocked.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onpointerlockchange", "onpointerlockchange")}} property.</dd> + <dt>{{DOMxRef("Document/pointerlockerror_event", "pointerlockerror")}}</dt> + <dd>Fired when locking the pointer failed.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onpointerlockerror", "onpointerlockerror")}} property.</dd> + <dt>{{DOMxRef("Document/pointermove_event", "pointermove")}}</dt> + <dd>Fired when a pointer changes coordinates.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onpointermove", "onpointermove")}} property.</dd> + <dt>{{DOMxRef("Document/pointerout_event", "pointerout")}}</dt> + <dd>Fired when a pointer is moved out of the <em>hit test</em> boundaries of an element (among other reasons).<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onpointerout", "onpointerout")}} property.</dd> + <dt>{{DOMxRef("Document/pointerover_event", "pointerover")}}</dt> + <dd>Fired when a pointer is moved into an element's hit test boundaries.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onpointerover", "onpointerover")}} property.</dd> + <dt>{{DOMxRef("Document/pointerup_event", "pointerup")}}</dt> + <dd>Fired when a pointer is no longer active.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onpointerup", "onpointerup")}} property.</dd> +</dl> + +<h3 id="Selection_events">Selection events</h3> + +<dl> + <dt>{{DOMxRef("Document/selectionchange_event", "selectionchange")}}</dt> + <dd>Fired when the current text selection on a document is changed.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onselectionchange", "onselectionchange")}} property.</dd> + <dt>{{DOMxRef("Document/selectstart_event", "selectstart")}}</dt> + <dd>Fired when the user begins a new selection.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onselectstart", "onselectstart")}} property.</dd> +</dl> + +<h3 id="Touch_events">Touch events</h3> + +<dl> + <dt>{{DOMxRef("Document/touchcancel_event", "touchcancel")}}</dt> + <dd>Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.</dd> + <dt>{{DOMxRef("Document/touchend_event", "touchend")}}</dt> + <dd>Fired when one or more touch points are removed from the touch surface.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ontouchend", "ontouchend")}} property</dd> + <dt>{{DOMxRef("Document/touchmove_event", "touchmove")}}</dt> + <dd>Fired when one or more touch points are moved along the touch surface.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property</dd> + <dt>{{DOMxRef("Document/touchstart_event", "touchstart")}}</dt> + <dd>Fired when one or more touch points are placed on the touch surface.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property</dd> +</dl> + +<h3 id="Transition_events">Transition events</h3> + +<dl> + <dt>{{DOMxRef("Document/transitioncancel_event", "transitioncancel")}}</dt> + <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is canceled.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ontransitioncancel", "ontransitioncancel")}} property.</dd> + <dt>{{DOMxRef("Document/transitionend_event", "transitionend")}}</dt> + <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has completed.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ontransitionend", "ontransitionend")}} property.</dd> + <dt>{{DOMxRef("Document/transitionrun_event", "transitionrun")}}</dt> + <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is first created.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} property.</dd> + <dt>{{DOMxRef("Document/transitionstart_event", "transitionstart")}}</dt> + <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has actually started.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} property.</dd> +</dl> + +<h2 id="Non-standard_extensions_Non-standard_Inline">Non-standard extensions {{Non-standard_Inline}}</h2> + +<div>{{non-standard_header}}</div> + +<h3 id="Firefox_notes">Firefox notes</h3> + +<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> + +<dl> + <dt>{{DOMxRef("Document.currentScript")}} {{Non-standard_Inline}}</dt> + <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd> + <dt>{{DOMxRef("Document.documentURIObject")}}</dt> + <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> + <dt>{{DOMxRef("Document.popupNode")}}</dt> + <dd>Returns the node upon which a popup was invoked.</dd> + <dt>{{DOMxRef("Document.tooltipNode")}}</dt> + <dd>Returns the node which is the target of the current tooltip.</dd> +</dl> + +<p>Mozilla also define some non-standard methods:</p> + +<dl> + <dt>{{DOMxRef("Document.execCommandShowHelp()")}}{{Obsolete_Inline("Gecko14")}}</dt> + <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> + <dt>{{DOMxRef("Document.getBoxObjectFor()")}} {{Obsolete_Inline}}</dt> + <dd>Use the {{DOMxRef("Element.getBoundingClientRect()")}} method instead.</dd> + <dt>{{DOMxRef("Document.loadOverlay()")}}{{Obsolete_Inline("Gecko61")}}</dt> + <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> + <dt>{{DOMxRef("Document.queryCommandText()")}}{{Obsolete_Inline("Gecko14")}}</dt> + <dd>This method never did anything but throw an exception, and was removed in Gecko 14 {{GeckoRelease("14")}}.</dd> +</dl> + +<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3> + +<p>Microsoft defines some non-standard properties:</p> + +<dl> + <dt>{{DOMxRef("Document.fileSize")}}* {{Non-standard_Inline}} {{Obsolete_Inline}}</dt> + <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> +</dl> + +<p>Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</p> + +<dl> + <dt>{{DOMxRef("Document.contains")}}</dt> + <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#interface-document", "Document")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#the-document-object", "Document")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Turn the {{DOMxRef("HTMLDocument")}} interface into a <code>Document</code> extension.</td> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName("Pointer Lock", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("Pointer Lock")}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName("Page Visibility API", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("Page Visibility API")}}</td> + <td>Extend the <code>Document</code> interface with the <code>visibilityState</code> and <code>hidden</code> attributes and the <code>onvisibilitychange</code> event listener.</td> + </tr> + <tr> + <td>{{SpecName("Selection API", "#extensions-to-document-interface", "Document")}}</td> + <td>{{Spec2("Selection API")}}</td> + <td>Adds <code>getSelection()</code>, <code>onselectstart</code> and <code>onselectionchange</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-document", "Document")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator", "XPathEvaluator")}}</td> + <td>{{Spec2("DOM3 XPath")}}</td> + <td>Define the {{DOMxRef("XPathEvaluator")}} interface which extend document.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>Initial definition for the interface</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Document")}}</p> diff --git a/files/hu/web/api/fetch_api/index.html b/files/hu/web/api/fetch_api/index.html new file mode 100644 index 0000000000..807bb11054 --- /dev/null +++ b/files/hu/web/api/fetch_api/index.html @@ -0,0 +1,107 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +translation_of: Web/API/Fetch_API +--- +<div>{{DefaultAPISidebar("Fetch API")}}</div> + +<p class="summary"><span class="seoSummary">A Fetch API egy interfészt biztosít számunkra adatok lekéréséhez (beleértve a hálózaton keresztüli kéréseket is). Ismerősnek fog hatni mindazok számára, akik már használtak {{DOMxRef("XMLHttpRequest")}}-et, de ez az újabb API jóval erőteljesebb és rugalmasabb eszközökkel áll rendelkezésre.</span></p> + +<h2 id="Concepts_and_usage">Concepts and usage</h2> + +<p>Fetch provides a generic definition of {{DOMxRef("Request")}} and {{DOMxRef("Response")}} objects (and other things involved with network requests). This will allow them to be used wherever they are needed in the future, whether it’s for service workers, Cache API, and other similar things that handle or modify requests and responses, or any kind of use case that might require you to generate your responses programmatically (that is, the use of computer program or personal programming instructions).</p> + +<p>It also defines related concepts such as CORS and the HTTP Origin header semantics, supplanting their separate definitions elsewhere.</p> + +<p>For making a request and fetching a resource, use the {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} method. It is implemented in multiple interfaces, specifically {{DOMxRef("Window")}} and {{DOMxRef("WorkerGlobalScope")}}. This makes it available in pretty much any context you might want to fetch resources in.</p> + +<p>The <code>fetch()</code> method takes one mandatory argument, the path to the resource you want to fetch. It returns a {{DOMxRef("Promise")}} that resolves to the {{DOMxRef("Response")}} to that request, whether it is successful or not. You can also optionally pass in an <code>init</code> options object as the second argument (see {{DOMxRef("Request")}}).</p> + +<p>Once a {{DOMxRef("Response")}} is retrieved, there are a number of methods available to define what the body content is and how it should be handled (see {{DOMxRef("Body")}}).</p> + +<p>You can create a request and response directly using the {{DOMxRef("Request.Request", "Request()")}} and {{DOMxRef("Response.Response", "Response()")}} constructors, but it's uncommon to do this directly. Instead, these are more likely to be created as results of other API actions (for example, {{DOMxRef("FetchEvent.respondWith()")}} from service workers).</p> + +<h3 id="Differences_from_jQuery">Differences from jQuery</h3> + +<p>The <code>fetch</code> specification differs from <code>jQuery.ajax()</code> in three main ways:</p> + +<ul> + <li>The Promise returned from <code>fetch()</code> <strong>won’t reject on HTTP error status</strong> even if the response is an HTTP <code>404</code> or <code>500</code>. Instead, it will resolve normally (with <code>ok</code> status set to <code>false</code>), and it will only reject on network failure or if anything prevented the request from completing.</li> + <li><code>fetch()</code> <strong><s>won't</s> can receive cross-site cookies; </strong>you <s>can’t</s> can establish a cross site session using fetch. <s><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a></code> headers from other sites are silently ignored.</s></li> + <li><code>fetch()</code> <strong>won’t send cookies</strong>, unless you set <code>credentials: 'same-origin'</code>. + <ul> + <li>In <a href="https://github.com/whatwg/fetch/pull/585" rel="nofollow noopener">August 2017</a>, the spec changed the default credentials policy to <code>'same-origin'</code>. The following browsers shipped and outdated native fetch, and were updated in these versions: + <ul> + <li>Firefox version 61.0b13.</li> + <li>Safari version 12.</li> + <li>Chrome version 68.</li> + </ul> + </li> + <li>If you are targetting older versions of these browsers, be sure to include <code>credentials: 'same-origin'</code> <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init option</a> on all api requests that may be affected by cookies/user login state.</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Find out more about using the Fetch API features in <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a>, and study concepts in <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>.</p> +</div> + +<h3 id="Aborting_a_fetch">Aborting a fetch</h3> + +<p>Browsers have started to add experimental support for the {{DOMxRef("AbortController")}} and {{DOMxRef("AbortSignal")}} interfaces (aka The Abort API), which allow operations like Fetch and XHR to be aborted if they have not already completed. See the interface pages for more details.</p> + +<h2 id="Fetch_Interfaces">Fetch Interfaces</h2> + +<dl> + <dt>{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>The <code>fetch()</code> method used to fetch a resource.</dd> + <dt>{{DOMxRef("Headers")}}</dt> + <dd>Represents response/request headers, allowing you to query them and take different actions depending on the results.</dd> + <dt>{{DOMxRef("Request")}}</dt> + <dd>Represents a resource request.</dd> + <dt>{{DOMxRef("Response")}}</dt> + <dd>Represents the response to a request.</dd> +</dl> + +<h2 id="Fetch_mixin">Fetch mixin</h2> + +<dl> + <dt>{{DOMxRef("Body")}}</dt> + <dd>Provides methods relating to the body of the response/request, allowing you to declare what its content type is and how it should be handled.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Fetch")}}</td> + <td>{{Spec2("Fetch")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> + <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li> + <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li> +</ul> diff --git a/files/hu/web/api/file/index.html b/files/hu/web/api/file/index.html new file mode 100644 index 0000000000..ce77a8fc63 --- /dev/null +++ b/files/hu/web/api/file/index.html @@ -0,0 +1,226 @@ +--- +title: File +slug: Web/API/File +translation_of: Web/API/File +--- +<div>{{APIRef}}</div> + +<p>ONGOING The <strong><code>File</code></strong> interface provides information about files and allows JavaScript in a web page to access their content.</p> + +<p><code>File</code> objects are generally retrieved from a {{domxref("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{domxref("DataTransfer")}} object, or from the <code>mozGetAsFile()</code> API on an {{domxref("HTMLCanvasElement")}}. In Gecko, privileged code can create <code>File</code> objects representing any local file without user interaction (see {{anch("Implementation notes")}} for more information.)</p> + +<p>A <code>File</code> object is a specific kind of a {{domxref("Blob")}}, and can be used in any context that a Blob can. In particular, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, and {{domxref("XMLHttpRequest", "", "send()")}} accept both <code>Blob</code>s and <code>File</code>s.</p> + +<p>See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for more information and examples.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("File.File", "File()")}}</dt> + <dd>Returns a newly constructed <code>File</code>.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("File.lastModified")}} {{readonlyinline}}</dt> + <dd>Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).</dd> + <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}</dt> + <dd>Returns the last modified <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code> of the file referenced by the <code>File</code> object.</dd> + <dt>{{domxref("File.name")}} {{readonlyinline}}</dt> + <dd>Returns the name of the file referenced by the <code>File</code> object.</dd> + <dt>{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}</dt> + <dd>Returns the path the URL of the {{domxref("File")}} is relative to.</dd> +</dl> + +<p><code>File</code> implements {{domxref("Blob")}}, so it also has the following properties available to it:</p> + +<dl> + <dt>{{domxref("File.size")}} {{readonlyinline}}</dt> + <dd>Returns the size of the file.</dd> + <dt>{{domxref("File.type")}} {{readonlyinline}}</dt> + <dd>Returns the <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME </a>type of the file.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The <code>File</code> interface doesn't define any methods, but inherits methods from the {{domxref("Blob")}} interface:</em></p> + +<dl> + <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt> + <dd>Returns a new <code>Blob</code> object containing the data in the specified range of bytes of the source <code>Blob</code>.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('File API')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>13</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("7")}}</td> + <td>10.0</td> + <td>11.5</td> + <td>6.0</td> + </tr> + <tr> + <td><code>name</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>11.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lastModifiedDate</code> {{deprecated_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("15")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>webkitRelativePath</code> {{non-standard_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("49")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>size</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>11.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9")}}[1]<br> + {{CompatGeckoMobile("7")}}</td> + <td>{{CompatNo}}</td> + <td>11.1</td> + <td>6.0</td> + </tr> + <tr> + <td><code>name</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lastModifiedData</code> {{deprecated_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("15")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>webkitRelativePath</code> {{non-standard_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("49")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + <tr> + <td>size</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Non-standard implementation.</p> + +<h3 id="Implementation_notes">Implementation notes</h3> + +<ul> + <li>In Gecko, you can use this API from within chrome code. See <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> for details. To use it from chrome code, JSM and Bootstrap scope, you have to import it using <code><a href="/en-US/docs/Components.utils.importGlobalProperties">Cu.importGlobalProperties</a>(['File']);</code></li> + <li>Starting from Gecko 6.0 {{geckoRelease("6.0")}}, privileged code (such as extensions) can pass an {{interface("nsIFile")}} object to the DOM <code>File</code> constructor to specify the file to reference.</li> + <li>Starting from Gecko 8.0 {{geckoRelease("8.0")}}, you can use <code>new File</code> to create <code>File</code> objects from XPCOM component code instead of having to instantiate the {{interface("nsIDOMFile")}} object directly. The constructor takes, in contrast to {{domxref("Blob")}}, as second argument the filename. The filename can be any String. + <pre class="syntaxbox">new File( + Array parts, + String filename, + BlobPropertyBag properties +);</pre> + </li> + <li>The following non-standard properties and methods were removed in Gecko 7 {{geckoRelease("7.0")}}: {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Standard properties {{domxref("File.name")}}, {{domxref("Blob.size")}}, and methods on {{domxref("FileReader")}} should be used instead.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li> + <li>{{domxref("FileReader")}}</li> + <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> (for privileged code running in Gecko, such as Firefox add-ons)</li> +</ul> diff --git a/files/hu/web/api/geolocation/index.html b/files/hu/web/api/geolocation/index.html new file mode 100644 index 0000000000..81d4548549 --- /dev/null +++ b/files/hu/web/api/geolocation/index.html @@ -0,0 +1,118 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +tags: + - API + - Advanced + - Geolocation API + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Geolocation +--- +<div>{{APIRef("Geolocation API")}}</div> + +<p>The <code><strong>Geolocation</strong></code> interface represents an object able to programmatically obtain the position of the device. It gives Web content access to the location of the device. This allows a Web site or app to offer customized results based on the user's location.</p> + +<p>An object with this interface is obtained using the {{domxref("NavigatorGeolocation.geolocation")}} property implemented by the {{domxref("Navigator")}} object.</p> + +<div class="note"> +<p><strong>Note:</strong> For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.</p> +</div> + +<h2 id="Properties">Properties</h2> + +<p><em>The <code>Geolocation</code> interface neither implements, nor inherits any property.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em><em>The <code>Geolocation</code> interface doesn't inherit any </em>method</em>.</p> + +<dl> + <dt>{{domxref("Geolocation.getCurrentPosition()")}}</dt> + <dd>Determines the device's current location and gives back a {{domxref("Position")}} object with the data.</dd> + <dt>{{domxref("Geolocation.watchPosition()")}}</dt> + <dd>Returns a <code>long</code> value representing the newly established callback function to be invoked whenever the device location changes.</dd> + <dt>{{domxref("Geolocation.clearWatch()")}}</dt> + <dd>Removes the particular handler previously installed using <code>watchPosition()</code>.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Geolocation')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60<br> + Removed in 15.0<br> + Reintroduced in 16.0</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>{{CompatUnknown()}}</td> + <td>10.60</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li> +</ul> diff --git a/files/hu/web/api/index.html b/files/hu/web/api/index.html new file mode 100644 index 0000000000..14bc9a0a46 --- /dev/null +++ b/files/hu/web/api/index.html @@ -0,0 +1,18 @@ +--- +title: Web API interfaces +slug: Web/API +tags: + - API + - Landing + - NeedsTranslation + - Reference + - TopicStub + - Web + - WebAPI +translation_of: Web/API +--- +<p>When writing code for the Web using JavaScript, there are a great many APIs available. Below is a list of all the interfaces (that is, types of objects) that you may be able to use while developing your Web app or site. For a list of the APIs that contain each of these interfaces, see <a href="/en-US/docs/Web/Reference/API" title="/en-US/docs/Web/Reference/API">Web API reference</a>.</p> + +<div> +<div>{{APIListAlpha}}</div> +</div> diff --git a/files/hu/web/api/webxr_device_api/index.html b/files/hu/web/api/webxr_device_api/index.html new file mode 100644 index 0000000000..0e5c140113 --- /dev/null +++ b/files/hu/web/api/webxr_device_api/index.html @@ -0,0 +1,197 @@ +--- +title: WebXR Device API +slug: Web/API/WebXR_Device_API +translation_of: Web/API/WebXR_Device_API +--- +<p>{{DefaultAPISidebar("WebXR Device API")}}</p> + +<p><span class="seoSummary"><strong>WebXR</strong> is a group of standards which are used together to support rendering 3D scenes to hardware designed for presenting virtual worlds (<strong>virtual reality</strong>, or <strong>VR</strong>), or for adding graphical imagery to the real world, (<strong>augmented reality</strong>, or <strong>AR</strong>).</span> The <strong>WebXR Device API</strong> implements the core of the WebXR feature set, managing the selection of output devices, render the 3D scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers.</p> + +<p>WebXR-compatible devices include fully-immersive 3D headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery.</p> + +<p>To accomplish these things, the WebXR Device API provides the following key capabilities:</p> + +<ul> + <li>Find compatible VR or AR output devices</li> + <li>Render a 3D scene to the device at an appropriate frame rate</li> + <li>(Optionally) mirror the output to a 2D display</li> + <li>Create vectors representing the movements of input controls</li> +</ul> + +<p>At the most basic level, a scene is presented in 3D by computing the perspective to apply to the scene in order to render it from the viewpoint of each of the user's eyes by computing the position of each eye and rendering the scene from that position, looking in the direction the user is currently facing. Each of these two images is rendered into a single framebuffer, with the left eye's rendered image on the left and the right eye's viewpoint rendered into the right half of the buffer. Once both eyes' perspectives on the scene have been rendered, the resulting framebuffer is delivered to the WebXR device to be presented to the user through their headset or other appropriate display device.</p> + +<h2 id="WebXR_Device_API_concepts_and_usage">WebXR Device API concepts and usage</h2> + +<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 20em; margin-bottom: 1em; margin-right: 2em; float: left;"> +<figcaption><strong>Example WebXR hardware setup</strong></figcaption> +<img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png"></figure> + +<p>While the older <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> was designed solely to support Virtual Reality (VR), WebXR provides support for both VR and Augmented Reality (AR) on the web. Support for AR functionality is added by the WebXR Augmented Reality Module.</p> + +<p>A typical XR device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor.</p> + +<p>The equipment may also include an accelerometer, barometer, or other sensors which are used to sense when the user moves through space, rotates their head, or the like.</p> + +<h2 id="Accessing_the_WebXR_API">Accessing the WebXR API</h2> + +<p>To gain access to the WebXR API within the context of a given window, use the {{domxref("navigator.xr")}} property, which returns an {{domxref("XRSystem")}} object through which the entire WebXR Device APi is then exposed.</p> + +<dl> + <dt>{{domxref("navigator.xr")}} {{ReadOnlyInline}}</dt> + <dd>This property, added to the {{domxref("Navigator")}} interface, returns the {{domxref("XRSystem")}} object through which the WebXR API is exposed. If this property is missing or <code>null</code>, WebXR is not available.</dd> +</dl> + +<h2 id="WebXR_interfaces">WebXR interfaces</h2> + +<dl> + <dt>{{DOMxRef("XR")}}</dt> + <dd>The {{domxref("Navigator.xr", "navigator.xr")}} property returns the window's instance of {{domxref("XRSystem")}}, which is the mechanism by which your code accesses the WebXR API. Using the <code>XRSystem</code> interface, you can create {{domxref("XRSession")}}s to represent actual AR and/or VR sessions.</dd> + <dt>{{DOMxRef("XRFrame")}}</dt> + <dd>While presenting an XR session, the state of all tracked objects which make up the session are represented by an <code>XRFrame</code>. To get an <code>XRFrame</code>, call the session's {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} method, providing a callback which will be called with the <code>XRFrame</code> once available. Events which communicate tracking states will also use <code>XRFrame</code> to contain that information.</dd> + <dt>{{DOMxRef("XRRenderState")}}</dt> + <dd>Provides a set of configurable properties which change how the imagery output by an <code>XRSession</code> is composited.</dd> + <dt>{{DOMxRef("XRSession")}}</dt> + <dd>Provides the interface for interacting with XR hardware. Once an <code>XRSession</code> is obtained from {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, the session can be used to check the position and orientation of the viewer, query the device for environment information, and present the virtual or augmented world to the user.</dd> + <dt>{{DOMxRef("XRSpace")}}</dt> + <dd><code>XRSpace</code> is an opaque base class on which all virtual coordinate system interfaces are based. Positions in WebXR are always expressed in relation to a particular <code>XRSpace</code> at the time at which a particular {{domxref("XFrame")}} takes place. The space's coordinate system has its origin at the a given physical position.</dd> + <dt>{{DOMxRef("XRReferenceSpace")}}</dt> + <dd>A subclass of {{domxref("XRSpace")}} which is used to identify a spatial relationship in relation to the user's physical environment. The <code>XRReferenceSpace</code> coordinate system is expected to remain unchanged through the lifespan of the {{domxref("XRSession")}}.The world has no boundaries and extends infinitely in every direction.</dd> + <dt>{{DOMxRef("XRBoundedReferenceSpace")}}</dt> + <dd><code>XRBoundedReferenceSpace</code> extends the {{domxref("XRReferenceSpace")}} coordinate system to further include support for a finite world with set boundaries. Unlike <code>XRReferenceSpace</code>, the origin must be located on the floor (that is, <em>y</em> = 0 at the floor). The x and z components of the origin are typically presumed to be located at or near the center of the room or surface.</dd> + <dt>{{DOMxRef("XRView")}}</dt> + <dd>Represents a single view into the XR scene for a particular frame. Each <code>XRView</code> corresponds to the video display surface used to present the scene to the user. For example, a given XR device might have two views: one for the left eye and one for the right. Each view has an offset used to shift the position of the view relative to the camera, in order to allow for creating stereographic effects.</dd> + <dt>{{DOMxRef("XRViewport")}}</dt> + <dd>Describes a viewport. A viewport is a rectangular portion of a graphic surface. In WebXR, a viewport represents the area of a drawing surface corresponding to a particular {{domxref("XRView")}}, such as the portion of the WebGL framebuffer used to render one of the two eyes' perspectives on the scene.</dd> + <dt>{{DOMxRef("XRRigidTransform")}}</dt> + <dd>A transform defined using a position and orientation in the virtual space's coordinate system as described by the {{domxref("XRSpace")}}.</dd> + <dt>{{DOMxRef("XRPose")}}</dt> + <dd>Describes a position and orientation in space relative to an {{domxref("XRSpace")}}.</dd> + <dt>{{DOMxRef("XRViewerPose")}}</dt> + <dd>Based on {{domxref("XRPose")}}, <code>XRViewerPose</code> specifies the state of a viewer of the WebXR scene as indicated by the XR device. Included is an array of {{domxref("XRView")}} objects, each representing one perspective on the scene. For example, it takes two views to create the stereoscopic view as perceived by human vision—one for the left eye and a second for the right eye. One view is offset to the left slightly from the viewer's position, and the other view is offset to the right by the same distance. The view list can also be used to represent the perspectives of each of the spectators of a scene, in a multi-user environment.</dd> + <dt>{{DOMxRef("XRInputSource")}}</dt> + <dd>Represents any input device the user can use to perform targeted actions within the same virtual space as the viewer. Input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the XR device. Other input devices such as keyboards, mice, and gamepads are not presented as <code>XRInputSource</code> instances.</dd> + <dt>{{DOMxRef("XRWebGLLayer")}}</dt> + <dd>A layer which serves as a <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> frame buffer into which a scene's view is rendered. Using WebGL to render the scene gains substantial performance benefits due to graphics acceleration.</dd> +</dl> + +<h3 id="Event_interfaces">Event interfaces</h3> + +<p>The following interfaces are used to represent the events used by the WebXR API.</p> + +<dl> + <dt>{{domxref("XRInputSourceEvent")}}</dt> + <dd>Sent when the state of an {{domxref("XRInputSource")}} changes. This can happen, for example, when the position and/or orientation of the device changes, or when buttons are pressed or released.</dd> + <dt>{{domxref("XRInputSourcesChangeEvent")}}</dt> + <dd>Sent to indicate that the set of available input sources has changed for the {{domxref("XRSession")}}.</dd> + <dt>{{domxref("XRReferenceSpaceEvent")}}</dt> + <dd>Sent when the state of an {{domxref("XRReferenceSpace")}} changes.</dd> + <dt>{{domxref("XRSessionEvent")}}</dt> + <dd>Sent to indicate that the state of an {{domxref("XRSession")}} has changed. For example, if the position and/or orient</dd> +</dl> + +<h2 id="Extensions_to_the_WebGL_API">Extensions to the WebGL API</h2> + +<p>The WebGL API is extended by the WebXR specification to augment the WebGL context to allow it to be used to render views for display by a WebXR device.</p> + +<dl> + <dt>{{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}}</dt> + <dd>Configures the WebGL context to be compatible with WebXR. If the context was not initially created with the {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} property set to <code>true</code>, you must call <code>makeXRCompatible()</code> prior to attempting to use the WebGL context for WebXR rendering. Returns a {{jsxref("Promise")}} which resolves once the context has been prepared, or is rejected if the context cannot be configured for use by WebXR.</dd> +</dl> + +<h2 id="Guides_and_tutorials">Guides and tutorials</h2> + +<p>The following guides and tutorials are a great resource to learn how to comprehend WebXR and the underlying 3D and VR/AR graphics concepts.</p> + +<h3 id="Foundations_and_basics">Foundations and basics</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Fundamentals">Fundamentals of WebXR</a></dt> + <dd>Before diving into the details of how to create content using WebXR, it may be helpful to read this overview of the technology, which includes introductions to terminology that may be unfamiliar to you, or which may be used in a new way.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt> + <dd>A guide covering how matrices can be used on the web, including both for CSS transforms and for WebGL purposes, as well as to handle the positioning and orientation of objects in WebXR contexts.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Lifecycle">WebXR application life cycle </a></dt> + <dd>An overview of the overall life cycle of a WebXR application, from startup to shutdown. This article serves as an introduction to the basics of what's involved in creating a WebXR experience without diving into the code in detail. It's a good way to prepare for the next steps.</dd> +</dl> + +<h3 id="Creating_a_mixed_reality_experience">Creating a mixed reality experience</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown">Starting up and shutting down a WebXR session</a></dt> + <dd>Before actually presenting a scene using an XR device such as a headset or goggles, you need to create a WebXR session bound to a rendering layer that draws the scene for presentation in each of the XR device's displays so that the 3D effect can be presented to the user. This guide covers how to create and stop WebXR sessions.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Geometry">Geometry and reference spaces in WebXR</a></dt> + <dd>In this guide, the required concepts of 3D geometry are briefly reviewed, and the fundamentals of how that geometry is represented in WebXR are detailed. Learn how reference spaces are used to position objects—and the viewer—and the differences among the available types of reference space, as well as their use cases.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Spatial_tracking">Spatial tracking in WebXR</a></dt> + <dd>This guide describes how objects—including the user's body and its parts—are located in space, and how their movement and orientation relative to one another is monitored and managed over time. This article explains the relationship between spaces, poses, viewers, and views.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Rendering">Rendering and the WebXR frame animation callback</a></dt> + <dd>Starting with how you schedule frames to be rendered, this guide then continues to cover how to determine the placement of objects in the view and how to then render them into the WebGL buffer used for each of the two eyes' views of the scene.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Cameras">Viewpoints and viewers: Simulating cameras in WebXR </a></dt> + <dd>WebGL (and therefore WebXR) doesn't really have a concept of a camera, which is the traditional concept used to represent a viewpoint in 3D graphics. In this article, we see how to simulate a camera and how to create the illusion of moving a viewer through a world in which the viewer doesn't really move.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Lighting">Lighting a WebXR setting</a></dt> + <dd>Since WebXR rendering is based upon WebGL, the same lighting techniques used for any 3D application are applied to WebXR scenes. However, there are issues specific to creating augmented and virtual reality settings that need to be considered when writing your lighting code. This article discusses those issues.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces">Using bounded reference spaces</a></dt> + <dd>In this article, we examine how to use a <code>bounded-floor</code> reference space to define the boundaries of where the viewer can safely move about without leaving the area tracked by their XR hardware or colliding with a physical obstacle. On devices which support it, <code>bounded-floor</code> can be a useful tool in your repertoire.</dd> +</dl> + +<h3 id="Making_it_interactive">Making it interactive</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Movement_and_motion">Movement, orientation, and motion: A WebXR example</a></dt> + <dd>In this example and tutorial, we use information learned throughout the WebXR documentation to create a scene containing a rotating cube which the user can move around using both VR headset and keyboard and mouse.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Inputs">Inputs and input sources</a></dt> + <dd>A guide to input sources and how to efficiently manage the input devices being used to control the WebXR session, and how to receive and process user inputs from those devices.</dd> + <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Targeting">Targeting and hit detection </a></dt> + <dd>How to use an input source's targeting ray mode and targeting ray space to display a targeting ray, identify targeted surfaces or objects, and perform related tasks.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Input_profiles">Using WebXR input profiles</a></dt> + <dd>A guide to interpreting the {{Glossary("JSON")}} data provided by the <a href="https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry">WebXR Input Profiles Registry</a>, which can be used to determine what options and controls are available on the user's available input devices.</dd> + <dt><a href="/en-US/docs/Web/WebXR_Device_API/Gamepads">Supporting advanced controllers and gamepads in WebXR applications</a></dt> + <dd>WebXR uses the {{domxref("Gamepad")}} object to describe the controls available on complex input devices (such as hand controllers with multiple buttons and/or axes) and gamepad-like devices. In this guide, learn how to make use of these devices' controls.</dd> +</dl> + +<h3 id="Performance_and_security">Performance and security</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Performance">WebXR performance guide</a></dt> + <dd>Recommendations and tips to help you optimize the performance of your WebXR application.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Permissions_and_security">Permissions and security for WebXR</a></dt> + <dd>The WebXR Device API has several areas of security to contend with, from establishing feature-policy to ensuring the user intends to use the mixed reality presentation before activating it.</dd> +</dl> + +<h3 id="Including_other_media">Including other media</h3> + +<dl> + <dt><a href="/en-US/docs/Web/Media/3D_audio">Positional audio in a 3D environment</a></dt> + <dd>In 3D environments, which may either be 3D scenes rendered to the screen or a mixed reality experience experienced using a headset, it's important for audio to be performed so that it sounds like it's coming from the direction of its source. This guide covers how to accomplish this.</dd> + <dt><a href="/en-US/docs/Web/Media/3D_video">Playing video in a 3D environment</a></dt> + <dd>In this guide, we examine how to play video into a 3D scene. This technique can be used in both standard <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> applications presented on a flat computer screen, or in a <a href="/en-US/docs/Web/API/WebXR_Device_API">WebXR</a>-generated virtual or augmented reality environment.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("WebXR")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("api.Navigator.xr")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> + <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>: Accelerated 2D and 3D graphics on the web</li> + <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>: 2D drawing for the web</li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li> +</ul> diff --git a/files/hu/web/api/window.stop/index.html b/files/hu/web/api/window.stop/index.html new file mode 100644 index 0000000000..142a71788d --- /dev/null +++ b/files/hu/web/api/window.stop/index.html @@ -0,0 +1,19 @@ +--- +title: window.stop +slug: Web/API/Window.stop +translation_of: Web/API/Window/stop +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">Összefoglalás</h2> +<p>Ez az eljárás leállítja az ablak betöltését.</p> +<h2 id="Syntax" name="Syntax">Szintaxis</h2> +<pre class="syntaxbox">window.stop() +</pre> +<h2 id="Example" name="Example">Példa</h2> +<pre class="brush:js">window.stop(); +</pre> +<h2 id="Notes" name="Notes">Megjegyzések</h2> +<p>A stop() eljárás teljesen megegyezik azzal, amikor a 'megállás/betöltés megszakítása' gombra kattint a böngészőben. Amiatt a szabály miatt, melyben a kódok betöltöttek, a stop() eljárás nem állítja le azt, amit csak betölteni kell (nem letölteni a megjelenítéshez), de megszakítja a nagy képek, új ablakok, és egyéb objektumok betöltését, melynek el van halasztva a betöltése.</p> +<h2 id="Specification" name="Specification">Tulajdonságok</h2> +<p>DOM szint: 0. Nem része a tulajdonságoknak.</p> diff --git a/files/hu/web/api/window/alert/index.html b/files/hu/web/api/window/alert/index.html new file mode 100644 index 0000000000..3861de7f10 --- /dev/null +++ b/files/hu/web/api/window/alert/index.html @@ -0,0 +1,72 @@ +--- +title: Window.alert() +slug: Web/API/Window/alert +tags: + - API + - DOM + - Függvény + - Referencia + - Window + - alert +translation_of: Web/API/Window/alert +--- +<p>{{ APIRef }}</p> + +<p>A <strong><code>window.alert()</code></strong> függvény megjelenít egy alert ablakot a megadott opcionális szöveggel és egy OK gombbal.</p> + +<h2 id="Syntax" name="Syntax">Szintaxis</h2> + +<pre class="syntaxbox">window.alert(<em>uzenet</em>);</pre> + +<h3 id="Paraméterek">Paraméterek</h3> + +<dl> + <dt><code>uzenet</code> {{optional_inline}}</dt> + <dd>Az üzenet az a szöveg amit meg szeretnél jeleníteni az alert dobozban.</dd> +</dl> + +<h2 id="Example" name="Example">Példa</h2> + +<pre class="brush: js">window.alert("Hello world!"); +alert("Hello world!");</pre> + +<p>Mindkettő kimenete:</p> + +<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p> + +<h2 id="Notes" name="Notes">Megjegyzések</h2> + +<p>Az alertet olyan helyeken kell használni, ahol nem szükséges visszajelzés a felhasználótól, de szeretnénk őt értesíteni valamiről.</p> + +<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.confirm</span> Ez egy modális ablak - megakadályozza a felhasználót, hogy elérje a felületet, amíg be nem zárja azt. Éppen ezért nem ajánlott a túlhasználata.</p> + +<h2 id="Specifikáció">Specifikáció</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikáció</th> + <th scope="col">Állapot</th> + <th scope="col">Megjegyzés</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-alert', 'alert()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Böngésző_kompatibilitás">Böngésző kompatibilitás</h2> + + + +<p>{{Compat("api.Window.alert")}}</p> + +<h2 id="See_also" name="See_also">Lásd még</h2> + +<ul> + <li>{{domxref("window.confirm","confirm")}}</li> + <li>{{domxref("window.prompt","prompt")}}</li> + <li>For <a href="/en-US/docs/Chrome" title="/en-US/docs/Chrome">Mozilla Chrome</a> see {{ifmethod("nsIPromptService","alert")}} and {{ifmethod("nsIPromptService","alertCheck")}}</li> +</ul> diff --git a/files/hu/web/api/window/index.html b/files/hu/web/api/window/index.html new file mode 100644 index 0000000000..9fc6f57e24 --- /dev/null +++ b/files/hu/web/api/window/index.html @@ -0,0 +1,729 @@ +--- +title: Window +slug: Web/API/Window +tags: + - API + - Browser + - DOM + - Interface + - JavaScript + - NeedsTranslation + - Reference + - Tab + - TopicStub + - Window + - global + - global scope + - scope +translation_of: Web/API/Window +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">The <strong><code>Window</code></strong> interface represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/Web/API/Document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{domxref("document.defaultView")}} property.</p> + +<p>A global variable, <code>window</code>, representing the window in which the script is running, is exposed to JavaScript code.</p> + +<p>The <code>Window</code> interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window. However, the <code>Window</code> interface is a suitable place to include these items that need to be globally available. Many of these are documented in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a> and the <a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a>.</p> + +<p>In a tabbed browser, each tab is represented by its own <code>Window</code> object; the global <code>window</code> seen by JavaScript code running within a given tab always represents the tab in which the code is running. That said, even in a tabbed browser, some properties and methods still apply to the overall window that contains the tab, such as {{Domxref("Window.resizeTo", "resizeTo()")}} and {{Domxref("Window.innerHeight", "innerHeight")}}. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Constructors">Constructors</h2> + +<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> + +<dl> + <dt>{{domxref("DOMParser")}}</dt> + <dd><code>DOMParser</code> can parse XML or HTML source stored in a string into a DOM <a href="https://developer.mozilla.org/en-US/docs/DOM/document" title="document">Document</a>. <code>DOMParser</code> is specified in <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</dd> + <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Image")}}</dt> + <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> + <dt>{{domxref("Option")}}</dt> + <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> + <dt>{{domxref("Window.QueryInterface")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref('StaticRange.StaticRange','StaticRange()')}} constructor which creates a {{domxref('StaticRange')}} object.</dd> + <dt>{{domxref("Worker")}}</dt> + <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> + <dt>{{domxref("Window.XMLSerializer")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p> + +<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p> + +<dl> + <dt>{{domxref("Window.closed")}} {{Non-standard_inline}} {{readOnlyInline}}</dt> + <dd>This property indicates whether the current window is closed or not.</dd> + <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd> + <dt>{{domxref("Window.content")}} and <code>Window._content</code> {{Non-standard_inline}} {{obsolete_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.</dd> + <dt>{{domxref("Window.controllers")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns the XUL controller objects for the current chrome window.</dd> + <dt>{{domxref("Window.customElements")}} {{ReadOnlyInline}}</dt> + <dd>returns a reference to the {{domxref("CustomElementRegistry")}} object, which can be used to register new <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a> and get information about previously registered custom elements.</dd> + <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> + <dd>Returns the browser crypto object.</dd> + <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> + <dd>Gets/sets the status bar text for the given window.</dd> + <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> + <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt> + <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd> + <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> + <dd>Synonym of {{domxref("window.personalbar")}}</dd> + <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the document that the window contains.</dd> + <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.</dd> + <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd> + <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.</dd> + <dt>{{domxref("Window.event")}} {{ReadOnlyInline}}</dt> + <dd>Returns the <strong>current event</strong>, which is the event currently being handled by the JavaScript code's context, or <code>undefined</code> if no event is currently being handled. The {{domxref("Event")}} object passed directly to event handlers should be used instead whenever possible.</dd> + <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> + <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> + <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> + <dd>Returns an array of the subframes in the current window.</dd> + <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>This property indicates whether the window is displayed in full screen or not.</dd> + <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> + <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br> + Was: Multiple storage objects that are used for storing data across multiple pages.</dd> + <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the history object.</dd> + <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> + <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> + <dt>{{domxref("Window.isSecureContext")}} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Indicates whether a context is capable of using features that require secure contexts.</dd> + <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> + <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> + <dt>{{domxref("Window.location")}}</dt> + <dd>Gets/sets the location, or current URL, of the window object.</dd> + <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> + <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt> + <dd>The time in milliseconds since epoch at which the current animation cycle began. Use {{domxref("Animation.startTime")}} instead.</dd> + <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}} {{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd> + <dt>{{domxref("Window.name")}}</dt> + <dd>Gets/sets the name of the window.</dd> + <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the navigator object.</dd> + <dt>{{domxref("Window.opener")}}</dt> + <dd>Returns a reference to the window that opened this current window.</dd> + <dt>{{domxref("Window.orientation")}} {{non-standard_inline}} {{deprecated_inline}} {{readOnlyInline}}</dt> + <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd> + <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the outside of the browser window.</dd> + <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the outside of the browser window.</dd> + <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollX")}}.</dd> + <dt>{{domxref("Window.scrollY","Window.pageYOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollY")}}</dd> + <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the parent of the current window or subframe.</dd> + <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing <a href="/en-US/docs/Navigation_timing">performance-related</a> data. See also <a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</dd> + <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> + <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> + <dd>Formerly provided access to install and remove PKCS11 modules.</dd> + <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt> + <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> + <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the screen object associated with the window.</dd> + <dt>{{domxref("Window.screenX")}} and {{domxref("Window.screenLeft")}} {{readOnlyInline}}</dt> + <dd>Both properties return the horizontal distance from the left border of the user's browser viewport to the left side of the screen.</dd> + <dt>{{domxref("Window.screenY")}} and {{domxref("Window.screenTop")}} {{readOnlyInline}}</dt> + <dd>Both properties return the vertical distance from the top border of the user's browser viewport to the top side of the screen.</dd> + <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> + <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> + <dt>{{domxref("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> + <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> + <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> + <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> + <dd>Returns an object reference to the window object itself.</dd> + <dt>{{domxref("Window.sessionStorage")}}</dt> + <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the window object of the sidebar.</dd> + <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> + <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd> + <dt>{{domxref("Window.status")}}</dt> + <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> + <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> + <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> + <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> + <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.</dd> + <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the current window.</dd> + <dt><code>window[0]</code>, <code>window[1]</code>, etc.</dt> + <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> +</dl> + +<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> + <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> + <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> + <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> + <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("Window.alert()")}}</dt> + <dd>Displays an alert dialog.</dd> + <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves back one in the window history. This method is obsolete; you should instead use {{domxref("History.back", "window.history.back()")}}.</dd> + <dt>{{domxref("Window.blur()")}}</dt> + <dd>Sets focus away from the window.</dd> + <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd> + <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd> + <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>Registers the window to capture all events of the specified type.</dd> + <dt>{{domxref("Window.clearImmediate()")}}</dt> + <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> + <dt>{{domxref("Window.close()")}}</dt> + <dd>Closes the current window.</dd> + <dt>{{domxref("Window.confirm()")}}</dt> + <dd>Displays a dialog with a message that the user needs to respond to.</dd> + <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.dispatchEvent()")}}</dt> + <dd>Used to trigger an event.</dd> + <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt> + <dd>Writes a message to the console.</dd> + <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.find()")}}</dt> + <dd>Searches for a given string in a window.</dd> + <dt>{{domxref("Window.focus()")}}</dt> + <dd>Sets focus on the current window.</dd> + <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves the window one document forward in the history. This method is obsolete; you should instead use {{domxref("History.forward", "window.history.forward()")}}.</dd> + <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Flashes the application icon.</dd> + <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.getComputedStyle()")}}</dt> + <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> + <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> + <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> + <dt>{{domxref("Window.getSelection()")}}</dt> + <dd>Returns the selection object representing the selected item(s).</dd> + <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the browser to the home page.</dd> + <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> + <dt>{{domxref("Window.maximize()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> + <dd>Minimizes the window.</dd> + <dt>{{domxref("Window.moveBy()")}}</dt> + <dd>Moves the current window by a specified amount.</dd> + <dt>{{domxref("Window.moveTo()")}}</dt> + <dd>Moves the window to the specified coordinates.</dd> + <dt>{{domxref("Window.open()")}}</dt> + <dd>Opens a new window.</dd> + <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Opens a new dialog window.</dd> + <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt> + <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd> + <dt>{{domxref("Window.print()")}}</dt> + <dd>Opens the Print Dialog to print the current document.</dd> + <dt>{{domxref("Window.prompt()")}}</dt> + <dd>Returns the text entered by the user in a prompt dialog.</dd> + <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>Releases the window from trapping events of a specific type.</dd> + <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.</dd> + <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables the scheduling of tasks during a browser's idle periods.</dd> + <dt>{{domxref("Window.resizeBy()")}}</dt> + <dd>Resizes the current window by a certain amount.</dd> + <dt>{{domxref("Window.resizeTo()")}}</dt> + <dd>Dynamically resizes window.</dd> + <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.scroll()")}}</dt> + <dd>Scrolls the window to a particular place in the document.</dd> + <dt>{{domxref("Window.scrollBy()")}}</dt> + <dd>Scrolls the document in the window by the given amount.</dd> + <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt> + <dd>Scrolls the document by the given number of lines.</dd> + <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt> + <dd>Scrolls the current document by the specified number of pages.</dd> + <dt>{{domxref("Window.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates in the document.</dd> + <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt> + <dd>Changes the cursor for the current window</dd> + <dt>{{domxref("Window.setImmediate()")}}</dt> + <dd>Executes a function after the browser has finished other heavy tasks</dd> + <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt> + <dd>Toggles a user's ability to resize a window.</dd> + <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt> + <dd>Sizes the window according to its content.</dd> + <dt>{{domxref("Window.stop()")}}</dt> + <dd>This method stops window loading.</dd> + <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt> + <dd>Updates the state of commands of the current chrome window (UI).</dd> +</dl> + +<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler to a specific event type on the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> + <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> + <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>Starts the process of fetching a resource from the network.</dd> + <dt>{{domxref("EventTarget.removeEventListener")}}</dt> + <dd>Removes an event listener from the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> + <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> + <dd>Schedules a function to execute in a given amount of time.</dd> +</dl> + +<h3 id="Obsolete_methods">Obsolete methods</h3> + +<dl> + <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt> + <dd>Displays a modal dialog. <strong>This method was removed completely in Chrome 43, and Firefox 55.</strong></dd> +</dl> + +<h2 id="Event_handlers">Event handlers</h2> + +<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p> + +<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> +</div> + +<dl> + <dt>{{domxref("Window.onappinstalled")}}</dt> + <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd> + <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> + <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd> + <dt>{{domxref("Window.ondevicelight")}}</dt> + <dd>An event handler property for any ambient light levels changes</dd> + <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called if accelerometer detects a change (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called when the orientation is changed (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt> + <dd>An event handler property for any device orientation changes.</dd> + <dt>{{domxref("Window.ondeviceproximity")}}</dt> + <dd>An event handler property for device proximity event</dd> + <dt>{{domxref("Window.ongamepadconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd> + <dt>{{domxref("Window.ongamepaddisconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd> + <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> + <dt>{{domxref("Window.onpaint")}}</dt> + <dd>An event handler property for paint events on the window.</dd> + <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> + <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("Window.onuserproximity")}}</dt> + <dd>An event handler property for user proximity events.</dd> + <dt>{{domxref("Window.onvrdisplayconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplayactivate")}}</dt> + <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd> + <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt> + <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd> + <dt>{{domxref("Window.onvrdisplayblur")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd> + <dt>{{domxref("Window.onvrdisplayfocus")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt> + <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd> +</dl> + +<h3 id="Event_handlers_implemented_from_elsewhere">Event handlers implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>An event handler property for before-unload events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Called after the window loses focus, such as due to a popup.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>An event handler property for change events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Called after the ANY mouse button is pressed & released</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Called when a double click is made with ANY mouse button.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Called after the window is closed</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Called when the RIGHT mouse button is pressed</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> + <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> + <dd>Called when the value of an <input> element changes</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> + <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd> + <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Called when ANY mouse button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Called continously when the mouse is moved inside the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Called when the pointer leaves the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Called when the pointer enters the window</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Called when ANY mouse button is released</dd> + <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> + <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>Called when network connection is established. See {{event("online")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Called when a back button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Called when a form is reset</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>Called continuously as you are resizing the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> + <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> + <dd>Called when the mouse wheel is rotated around any axis</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Called after text in an input field is selected</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> + <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Called when a form is submitted</dd> + <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> + <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>Called when the user navigates away from the page.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/error_event">error</a></code></dt> + <dd>Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.<br> + Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/languagechange_event">languagechange</a></code></dt> + <dd>Fired at the global scope object when the user's preferred language changes.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onlanguagechange">onlanguagechange</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/orientationchange_event">orientationchange</a></code></dt> + <dd>Fired when the orientation of the device has changed.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onorientationchange">onorientationchange</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/devicemotion_event">devicemotion</a></code></dt> + <dd>Fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if available.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/deviceorientation_event">deviceorientation</a></code></dt> + <dd>Fired when fresh data is available from the magnetometer orientation sensor about the current orientation of the device as compared to the Earth coordinate frame.</dd> + <dt><code>{{domxref("Document/defaultView/resize_event", "resize")}}</code></dt> + <dd>Fired when the window has been resized.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onresize">onresize</a></code> property.</dd> + <dt><code>{{domxref("Document/defaultView/storage_event", "storage")}}</code></dt> + <dd>Fired when a storage area (<code>localStorage</code> or <code>sessionStorage</code>) has been modified in the context of another document.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onstorage">onstorage</a></code> property.</dd> +</dl> + +<h3 id="Animation_events">Animation events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/animationcancel_event">animationcancel</a></code></dt> + <dd>Fired when an animation unexpectedly aborts.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel">onanimationcancel</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/animationend_event">animationend</a></code></dt> + <dd>Fired when an animation has completed normally.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationend">onanimationend</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/animationiteration_event">animationiteration</a></code></dt> + <dd>Fired when an animation iteration has completed.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationiteration">onanimationiteration</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/animationstart_event">animationstart</a></code></dt> + <dd>Fired when an animation starts.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart">onanimationstart</a></code> property.</dd> +</dl> + +<h3 id="Clipboard_events">Clipboard events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/clipboardchange_event">clipboardchange</a></code></dt> + <dd>Fired when the system clipboard content changes.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/copy_event">copy</a></code></dt> + <dd>Fired when the user initiates a copy action through the browser's user interface.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy"><code>oncopy</code></a> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/cut_event">cut</a></code></dt> + <dd>Fired when the user initiates a cut action through the browser's user interface.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut"><code>oncut</code></a> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/paste_event">paste</a></code></dt> + <dd>Fired when the user initiates a paste action through the browser's user interface.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste"><code>onpaste</code></a> property.</dd> +</dl> + +<h3 id="Connection_events">Connection events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/offline_event">offline</a></code></dt> + <dd>Fired when the browser has lost access to the network and the value of <code>navigator.onLine</code> has switched to <code>false</code>.<br> + Also available via the {{domxref("WindowEventHandlers.onoffline", "onoffline")}} property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/online_event">online </a></code></dt> + <dd>Fired when the browser has gained access to the network and the value of <code>navigator.onLine</code> has switched to <code>true</code>.<br> + Also available via the {{domxref("WindowEventHandlers.ononline", "ononline")}} property.</dd> +</dl> + +<h3 id="Focus_events">Focus events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/blur_event">blur</a></code></dt> + <dd>Fired when an element has lost focus.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur"><code>onblur</code></a> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/focus_event">focus</a></code></dt> + <dd>Fired when an element has gained focus.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onfocus"><code>onfocus</code></a> property</dd> +</dl> + +<h3 id="Gamepad_events">Gamepad events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/gamepadconnected_event">gamepadconnected</a></code></dt> + <dd>Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/ongamepadconnected">ongamepadconnected</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/gamepaddisconnected_event">gamepaddisconnected</a></code></dt> + <dd>Fired when the browser detects that a gamepad has been disconnected.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/ongamepaddisconnected">ongamepaddisconnected</a></code> property</dd> +</dl> + +<h3 id="History_events">History events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/hashchange_event">hashchange</a></code></dt> + <dd>Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the <code>#</code> symbol).<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onhashchange">onhashchange</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/pagehide_event">pagehide</a></code></dt> + <dd>Sent when the browser hides the current document while in the process of switching to displaying in its palce a different document from the session's history. This happens, for example, when the user clicks the Back button or when they click the Forward button to move ahead in session history.<br> + Also available through the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpagehide">onpagehide</a></code> event handler property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/pageshow_event">pageshow</a></code></dt> + <dd>Sent when the browser makes the document visible due to navigation tasks, including not only when the page is first loaded, but also situations such as the user navigating back to the page after having navigated to another within the same tab.<br> + Also available using the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpageshow">onpageshow</a></code> event handler property.</dd> + <dt><code>{{domxref("Document/defaultView/popstate_event", "popstate")}}</code></dt> + <dd>Fired when the active history entry changes.<br> + Also available using the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onpopstate">onpopstate</a></code> event handler property.</dd> +</dl> + +<h3 id="Load_unload_events">Load & unload events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/beforeunload_event">beforeunload</a></code></dt> + <dd>Fired when the window, the document and its resources are about to be unloaded.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload">onbeforeunload</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded</a></code></dt> + <dd>Fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code></dt> + <dd>Fired when the whole page has loaded, including all dependent resources such as stylesheets images.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/unload_event">unload</a></code></dt> + <dd>Fired when the document or a child resource is being unloaded.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onunload">onunload</a></code> property.</dd> +</dl> + +<h3 id="Manifest_events">Manifest events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/appinstalled_event">appinstalled</a></code></dt> + <dd>Fired when the browser has successfully installed a page as an application.<br> + Also available via the <a href="/en-US/docs/Web/API/Window/onappinstalled">onappinstalled</a> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/beforeinstallprompt_event">beforeinstallprompt</a></code></dt> + <dd>Fired when a user is about to be prompted to install a web application.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onbeforeinstallprompt">onbeforeinstallprompt</a></code> property.</dd> +</dl> + +<h3 id="Messaging_events">Messaging events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/message_event">message</a></code></dt> + <dd>Fired when the window receives a message, for example from a call to <code><a href="/en-US/docs/Web/API/Window/postMessage">Window.postMessage()</a></code> from another browsing context.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/messageerror_event">messageerror</a></code></dt> + <dd>Fired when a <code>Window</code> object receives a message that can't be deserialized.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessageerror">onmessageerror</a></code> property.</dd> +</dl> + +<h3 id="Print_events">Print events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/afterprint_event">afterprint</a></code></dt> + <dd>Fired after the associated document has started printing or the print preview has been closed.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onafterprint"><code>onafterprint</code></a> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/beforeprint_event">beforeprint</a></code></dt> + <dd>Fired when the associated document is about to be printed or previewed for printing.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint"><code>onbeforeprint</code></a> property.</dd> +</dl> + +<h3 id="Promise_rejection_events">Promise rejection events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></code></dt> + <dd>Sent every time a JavaScript {{jsxref("Promise")}} is rejected, regardless of whether or not there is a handler in place to catch the rejection.<br> + Also available through the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onrejectionhandled">onrejectionhandled</a></code> event handler property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></code></dt> + <dd>Sent when a JavaScript {{jsxref("Promise")}} is rejected but there is no handler in place to catch the rejection.<br> + Also available using the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onunhandledrejection">onunhandledrejection</a></code> event handler property.</dd> +</dl> + +<h3 id="Transition_events">Transition events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/transitioncancel_event">transitioncancel</a></code></dt> + <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is canceled.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitioncancel">ontransitioncancel</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/transitionend_event">transitionend</a></code></dt> + <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has completed.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/transitionrun_event">transitionrun</a></code></dt> + <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is first created.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionrun">ontransitionrun</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/transitionstart_event">transitionstart</a></code></dt> + <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has actually started.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionstart">ontransitionstart</a></code> property.</dd> +</dl> + +<h3 id="WebVR_events">WebVR events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplayactivate_event">vrdisplayactivate</a></code></dt> + <dd>Fired when a VR display becomes available to be presented to, for example if an HMD has been moved to bring it out of standby, or woken up by being put on.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplayactivate">onvrdisplayactivate</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplayblur_event">vrdisplayblur</a></code></dt> + <dd>Fired when presentation to a VR display has been paused for some reason by the browser, OS, or VR hardware.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplayblur">onvrdisplayblur</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplayconnect_event">vrdisplayconnect</a></code></dt> + <dd>Fired when a compatible VR display is connected to the computer.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect">onvrdisplayconnect</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaydeactivate_event">vrdisplaydeactivate</a></code></dt> + <dd>Fired when a VR display can no longer be presented to, for example if an HMD has gone into standby or sleep mode due to a period of inactivity.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaydeactivate">onvrdisplaydeactivate</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaydisconnect_event">vrdisplaydisconnect</a></code></dt> + <dd>Fired when a compatible VR display is disconnected from the computer.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplayfocus_event">vrdisplayfocus</a></code></dt> + <dd>Fired when presentation to a VR display has resumed after being blurred.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplayfocus">onvrdisplayfocus</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaypresentchange_event">vrdisplaypresentchange</a></code></dt> + <dd>fired when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange">onvrdisplaypresentchange</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaypointerrestricted_event">vrdisplaypointerrestricted</a></code></dt> + <dd>Fired when the VR display's pointer input is restricted to consumption via a <a href="/en-US/docs/Web/API/Pointer_Lock_API">pointerlocked element</a>.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypointerrestricted">onvrdisplaypointerrestricted</a></code> property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaypointerunrestricted_event">vrdisplaypointerunrestricted</a></code></dt> + <dd>Fired when the VR display's pointer input is no longer restricted to consumption via a <a href="/en-US/docs/Web/API/Pointer_Lock_API">pointerlocked element</a>.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypointerunrestricted">onvrdisplaypointerunrestricted</a></code> property.</dd> +</dl> + +<h2 id="Interfaces">Interfaces</h2> + +<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> +</ul> diff --git a/files/hu/web/api/worker/index.html b/files/hu/web/api/worker/index.html new file mode 100644 index 0000000000..706c2b3935 --- /dev/null +++ b/files/hu/web/api/worker/index.html @@ -0,0 +1,147 @@ +--- +title: Worker +slug: Web/API/Worker +translation_of: Web/API/Worker +--- +<p>{{APIRef("Web Workers API")}}</p> + +<p>The <strong><code>Worker</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the <code>Worker()</code> constructor and specifying a script to be run in the worker thread.</p> + +<p>Workers may in turn spawn new workers as long as those workers are hosted within the same <a href="/en-US/docs/Web/Security/Same-origin_policy">origin</a> as the parent page (Note: nested workers are <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU">currently not implemented in Blink</a>). In addition workers may use <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> for network I/O, with the stipulation that the <code>responseXML</code> and <code>channel</code> attributes on <code>XMLHttpRequest</code> always return <code>null</code>.</p> + +<p><a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">Not all interfaces and functions are available</a> to the script associated with a <code>Worker</code>.</p> + +<p>In Firefox, if you want to use workers in extensions and would like to have access to <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a>, you should use the {{ domxref("ChromeWorker") }} object instead.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.</em></p> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("AbstractWorker.onerror")}}</dt> + <dd>An {{ domxref("EventListener") }} called whenever an {{domxref("ErrorEvent")}} of type <code>error</code> bubbles through to the worker. This is inherited from {{domxref("AbstractWorker")}}.</dd> + <dt>{{domxref("Worker.onmessage")}}</dt> + <dd>An {{ domxref("EventListener") }} called whenever a {{domxref("MessageEvent")}} of type <code>message</code> bubbles through the worker — i.e. when a message is sent to the parent document from the worker via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. The message is stored in the event's {{domxref("MessageEvent.data", "data")}} property.</dd> +</dl> + +<h2 id="Constructors">Constructors</h2> + +<dl> + <dt>{{domxref("Worker.Worker", "Worker()")}}</dt> + <dd>Creates a dedicated web worker that executes the script at the specified URL. Workers can also be constructed using <a href="/en-US/docs/Web/API/Blob">Blobs</a>.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.</em></p> + +<dl> + <dt>{{domxref("Worker.postMessage()")}}</dt> + <dd>Sends a message — which can consist of <code>any</code> JavaScript object — to the worker's inner scope.</dd> + <dt>{{domxref("Worker.terminate()")}}</dt> + <dd>Immediately terminates the worker. This does not offer the worker an opportunity to finish its operations; it is simply stopped at once. ServiceWorker instances do not support this method.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>The following code snippet shows creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor and usage of the object:</p> + +<pre class="brush: js">var myWorker = new Worker("worker.js"); +var first = document.querySelector('#number1'); +var second = document.querySelector('#number2'); + +first.onchange = function() { + myWorker.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +}</pre> + +<p>For a full example, see our<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName("Web Workers")}}.</td> + </tr> + <tr> + <td>{{SpecName('Web Workers', "#worker", "Worker")}}</td> + <td>{{Spec2('Web Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>Support varies for different types of workers. See each worker type's page for specifics.</p> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>3.5</td> + <td>10.0</td> + <td>10.6</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4</td> + <td>3.5</td> + <td>1.0.1</td> + <td>10.0</td> + <td>11.5</td> + <td>5.1</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="internal" href="/En/Using_web_workers" title="en/Using DOM workers">Using web workers</a></li> + <li><a href="/En/DOM/Worker/Functions_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Functions available to workers</a></li> + <li>Other kind of workers: {{ domxref("SharedWorker") }} and <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li> + <li>Non-standard, Gecko-specific workers: {{ domxref("ChromeWorker") }}, used by extensions.</li> +</ul> diff --git a/files/hu/web/api/xmlhttprequest/index.html b/files/hu/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..6caf14a9ae --- /dev/null +++ b/files/hu/web/api/xmlhttprequest/index.html @@ -0,0 +1,235 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +<div>{{APIRef("XMLHttpRequest")}}</div> + +<div> </div> + +<p>Az <span class="seoSummary"><code>XMLHttpRequest</code> <a href="https://developer.mozilla.org/hu/docs/Web/Reference/API">API</a> a szerverrel való direkt kommunikációra használható, a teljes oldal újratöltése nélkül. Ez lehetővé teszi a weboldalak bizonyos adatainak frissítését, a nélkül, hogy a felhasználónak meg kéne szakítania azt, amit éppen csinál.</span> Az <code>XMLHttpRequest</code> az <a href="/hu/docs/AJAX">Ajax</a> alapja.</p> + +<p>{{InheritanceDiagram}}</p> + +<h5 id="Történet">Történet</h5> + +<p>Az <code>XMLHttpRequest</code> objektumot eredetileg a Microsoft alkotta meg, később átvette a Mozilla, az Apple, és a Google is. Mára általánosan elfogadott <a class="external" href="https://xhr.spec.whatwg.org/">szabvány lett a <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a> által. A neve ellenére, az <code>XMLHttpRequest</code> több adattípussal képes dolgozni, nem csupán az XML-el, és a <a href="/hu/docs/Web/HTTP">HTTP</a> mellett más protokollokat is támogat (beleértve a <code>file</code> és az <code>ftp</code> protokollt is).</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt> + <dd>A konstruktor létrehoz egy üres XMLHttpRequest objektumot. Ez szükséges előfeltétele annak, hogy az objektum eljárásait meghívhassunk. + <pre class="brush: js"> var xhr = new XMLHttpRequest(); + </pre> + </dd> +</dl> + +<h2 id="Tulajdonságok">Tulajdonságok</h2> + +<p><em>Az <code>XMLHttpRequest</code> <a href="https://developer.mozilla.org/hu/docs/Web/Reference/API">API</a> az {{domxref("XMLHttpRequestEventTarget")}} és az {{domxref("EventTarget")}} tulajdonságait is örökli.</em></p> + +<dl> + <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt> + <dd>Ez az {{domxref("EventHandler")}} (eseménykezelő) mindig meghívódik, amikor a <code>readyState</code> tulajdonság értéke megváltozik, így – szükség szerint – minden állapothoz külön esemény vagy eljárás rendelhető. Az alábbi példában minden állapotváltozásról tájékoztatjuk a felhasználót: + <pre class="brush: js"> xhr.onreadystatechange = function () { + switch(xhr.readyState) { + case 0: alert("A kérelem nem inicializált"); + break; + case 1: alert("A kapcsolat létrejött"); + break; + case 2: alert("A kérelem fogadva"); + break; + case 3: alert("A kérelem feldolgozása folyamatban"); + break; + default: alert("A kérelem feldolgozva, válasz kész"); + } + }; + </pre> + A gyakorlatban erre azonban ritkán van szükség. Praktikusabb, ha csak a feldolgozott kérelemre érkező válaszra reagálunk (az alábbi példában kiírjuk a válasz szövegét):</dd> + <dd> + <pre class="brush: js"> xhr.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + alert(this.responseText); + } + }; + </pre> + </dd> + <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt> + <dd>A kérelem állapotát jelző <code>előjel nélküli számmal</code> tér vissza, amely lehet: + <ol start="0"> + <li>- ha a kérés nem inicializált</li> + <li>- ha a kapcsolat létrejött a szerverrel</li> + <li>- ha a kérés fogadva</li> + <li>- ha a kérés feldolgozása folyamatban</li> + <li>- ha a kérés kész, válasz kész</li> + </ol> + </dd> + <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt> + <dd>A válasz törzsét tartalmazza, melynek típusát a {{domxref("XMLHttpRequest.responseType")}} tulajdonság értéke határozza meg.</dd> + <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt> + <dd>Visszatérési értéke lehet {{domxref("DOMString")}} amely egyszerű szövegként tartalmazza a választ az elküldött kérelemre, vagy <code>null,</code>ha a kérelem sikertelen volt.</dd> + <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt> + <dd>A válasz típusát határozza meg, amely lehet: + <ul> + <li>üres sztring (alapértelmezett)</li> + <li>{{domxref("ArrayBuffer")}} objektum</li> + <li>{{domxref("Blob")}} objektum</li> + <li>{{domxref("Document")}}</li> + <li>JavaScript objektum (JSON)</li> + <li>{{domxref("DOMString")}}</li> + </ul> + </dd> + <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt> + <dd>Visszatérési értéke a válasz szerializált URL-je, vagy üres sztring, ha az URL értéke null.</dd> + <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt> + <dd>Egy {{domxref("Document")}}-el tér vissza, amely tartalmazza a kérelemre kapott választ XML formátumban, vagy <code>null</code>-t, ha a kérés sikertelen, nem lehetett elküldeni, illetve a válasz nem jeleníthető meg XML formátumban. Not available in workers.</dd> + <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt> + <dd>A szerver által a kérelemre küldött válasz HTTP státusz-kódját adja vissza, <code>előjel nélküli, háromjegyű szám</code> formátumban (pl. 200, ha a kérelem elfogadva, 404, ha a kért erőforrás nem található a szerveren - bővebben a HTTP státusz kódokról <a href="https://www.rackhost.hu/tudasbazis/informatikai-alapok/http-hibakodok/">itt</a>).</dd> + <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt> + <dd>A szerver által küldött válasz státusz-kódjához tartozó szöveggel (response message) tér vissza (pl. "<code>200 OK</code>", siker esetén, bővebben lásd fent).</dd> +</dl> + +<div class="note"> +<p><strong>Megjegyzés:</strong> a HTTP/2 specifikáció alapján (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">Response Pseudo-Header Fields</a>) HTTP/2 válaszokat egy :status pseudo-header mező határozza meg, amely tartalmazza a HTTP státusz kód mezőt is. A HTTP/2 nem határozza meg, hogy a verzió és más kifejezések hogy jelenjenek meg a válasz HTTP/1.1 állapot-sorában.</p> +</div> + +<dl> + <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt> + <dd>Egy <code>előjel nélküli egész szám</code>, amely megadja a várakozási időt (ezredmásodpercben) a kapcsolat automatikus lezárásig.</dd> + <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt> + <dd>Ez egy {{domxref("EventHandler")}} (eseménykezelő), amely a {{domxref("XMLHttpRequest.timeout")}} tulajdonságban megadott idő túllépése esetén mindig meghívódik. {{gecko_minversion_inline("12.0")}} + <pre class="brush: js">xhr.timeout = 4000; //Időtúllépés beállítása 4 másodpercre +xhr.ontimeout = function () { alert("Időtúllépés!!!"); } +/* Időtúllépés esetén az eseménykezelő egy névtelen + függvényt hív meg, amely egy felugró ablakban tájékoztatja + a felhasználót az időtúllépésről */ + </pre> + </dd> + <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt> + <dd>Minden XMLHttpRequest objektumhoz rendelkezik egy {{domxref("XMLHttpRequestUpload")}} objektummal, amely adatátviteli információk összegyűjtésére használható, amikor az adatok átkerülnek a kiszolgálóra. Az <code>upload</code> tulajdonság ezt adja vissza.</dd> + <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt> + <dd>Logikai érték ({{domxref("Boolean")}}), that indicates whether or not cross-site <code>Access-Control</code> requests should be made using credentials such as cookies or authorization headers.</dd> +</dl> + +<h3 id="Nem_szabványos_tulajdonságok">Nem szabványos tulajdonságok</h3> + +<dl> + <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt> + <dd>Is a {{Interface("nsIChannel")}}. The channel used by the object when performing the request.</dd> + <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt> + <dd>Logikai érték ({{domxref("Boolean")}}). Ha értéke igaz (true), akkor a kérelem sütik és azonosító fejlécek nélkül lesz elküldve.</dd> + <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt> + <dd>Logikai érték ({{domxref("Boolean")}}). If true, the same origin policy will not be enforced on the request.</dd> + <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt> + <dd>Logikai érték ({{domxref("Boolean")}}). It indicates whether or not the object represents a background service request.</dd> + <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt> + <dd>Egy <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a> </code> objektum. A válasz a kérelemre egy JavaScript-stílusú tömb lesz.</dd> + <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt> + <dd><strong>This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22.</strong> Please use <a href="/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/Web/API/WebSockets_API">Web Sockets</a>, or <code>responseText</code> from progress events instead.</dd> +</dl> + +<h3 id="Eseménykezelők">Eseménykezelők</h3> + +<p>Az <code>onreadystatechange</code> az <code>XMLHttpRequest</code> objektum olyan tulajdonsága, amely mindig meghívódik, amikor a <code>readyState</code> tulajdonság értéke megváltozik. Ezt az eseménykezelőt az összes böngésző támogatja.</p> + +<p>A különböző böngészők által támogatott eseménykezelők száma egyre nagyobb (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, stb.). Ezeket a Firefox is mind támogatja. További információk az <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequestEventTarget" title="">nsIXMLHttpRequestEventTarget</a></code> objektumról és az <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest</a> használatáról.</p> + +<p>Az újabb böngészők (mint a Firefox is), támogatják az <code>XMLHttpRequest</code> események szabványos <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> általi figyelését. Az <a href="https://developer.mozilla.org/hu/docs/Web/Reference/API">API</a> ezen felül bekapcsolt (<code>on*</code>) értékre állítja a tulajdonságokat a kezelő függvényben.</p> + +<h2 id="Metódusok">Metódusok</h2> + +<dl> + <dt>{{domxref("XMLHttpRequest.abort()")}}</dt> + <dd>Megszakítja az aktuális kérelmet.</dd> + <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt> + <dd>A válasz összes fejlécét adja vissza egyszerű szövegként, <code>\r\n</code> (<a href="https://developer.mozilla.org/en-US/docs/Glossary/CRLF">CRLF</a>) sorvég karakterekkel elválasztva. Ha nem érkezett válasz a kérelemre, <code>null</code> értékkel tér vissza.</dd> + <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt> + <dd>A paraméterül kapott fejléc szöveges értékével tér vissza siker esetén, vagy <code>null</code>-al, ha nem érkezett válasz a kérelemre vagy a kért fejléc nem található a válaszban. + <pre class="brush: js"> xhr.getResponseHeader("Content-Type"); + </pre> + </dd> + <dt>{{domxref("XMLHttpRequest.open()")}}</dt> + <dd>Inicializálja az elküldendő kérelmet. Beállítja a kérelem továbbítására használt metódust (ez lehet post vagy get), a cél URL-t (a kérelmet fogadó/feldolgozó távoli állomány elérési útját) és az aszinkron kapcsolót (true = aszinkron[alapértelmezett], false = szinkron). Opcionálisan megadható paraméterek: felhasználónév és jelszó. Ezt az eljárást JavaScript kódból lehet meghívni, natív kódból az <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> eljárás ajánlott helyette. + <pre class="brush: js"> xhr.open("POST","feldolgoz.php", true); + </pre> + </dd> + <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt> + <dd>Felülbírálja a kiszolgáló által visszaadott MIME típust.</dd> + <dt>{{domxref("XMLHttpRequest.send()")}}</dt> + <dd>Kérelem elküldése. Ha a kérelem aszinkron (ez az alapértelmezett), az eljárás visszatér, amint a kérelem el lett küldve.</dd> + <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt> + <dd>A post metódussal elküldött HTTP kérelem fejlécét állítja be. Két bemeneti paramétert vár: a fejléc nevét és értékét. A <code>setRequestHeader()</code> eljárást az <a href="#open"><code>open()</code></a> után, de a <code>send()</code> előtt kell meghívni. + <pre class="brush: js"> xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + </pre> + </dd> +</dl> + +<h3 id="Nem_szabványos_metódusok">Nem szabványos metódusok</h3> + +<dl> + <dt>{{domxref("XMLHttpRequest.init()")}}</dt> + <dd>C++ kódból történő használatra inicializálja az objektumot.</dd> +</dl> + +<div class="warning"><strong>Figyelmeztetés:</strong> Ezt a metódust <em>nem</em> szabad JavaScript-ből meghívni.</div> + +<dl> + <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt> + <dd>Inicializálja a kérelmet. Ezt az eljárást natív kódból lehet használni a kérelem inicializálására, az <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> helyett. További részletek az <code>open()</code> leírásában.</dd> + <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt> + <dd>A <code>send()</code> egy változata, ami bináris adatokat küld.</dd> +</dl> + +<h2 id="Specifikációk">Specifikációk</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikáció</th> + <th scope="col">Állapot</th> + <th scope="col">Megjegyzés</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Hatályos szabvány, aktuális változat</td> + </tr> + </tbody> +</table> + +<h2 id="Böngésző_támogatottság">Böngésző támogatottság</h2> + + + +<div>{{Compat("api.XMLHttpRequest")}}</div> + +<h2 id="Hivatkozások">Hivatkozások</h2> + +<ul> + <li>MDN útmutatók az XMLHttpRequest-hez (angol): + <ul> + <li><a href="/en-US/docs/AJAX/Getting_Started">Ajax — fogjunk hozzá</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Az XMLHttpRequest használata</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML az XMLHttpRequest-ben</a></li> + <li><a href="/en-US/docs/Web/API/FormData"><code>FormData</code></a></li> + </ul> + </li> + <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — Új trükkök az XMLHttpRequest2-ben</a></li> + <li><a href="https://www.w3schools.com/xml/ajax_xmlhttprequest_create.asp">The XMLHttpRequest Object</a></li> + <li><a href="https://www.xul.fr/en-xml-ajax.html#request-step-by-step">Kérelem létrehozása lépésről lépésre</a></li> + <li><code>Chrome scope availability</code> — hozzáférés az XMLHttpRequest-hez JSM modulokból, amelyek nem rendelkeznek DOM-hozzáféréssel (angol) + <ul> + <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> + <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">nsIXMLHttpRequest</a></li> + </ul> + </li> + <li>Magyar nyelvű útmutatók, cikkek: + <ul> + <li><a href="https://hu.wikipedia.org/wiki/XMLHttpRequest">Wikipédia-szócikk</a></li> + <li><a href="http://szit.hu/doku.php?id=oktatas:web:javascript:javascript_ajax">SzitWiki</a></li> + <li><a href="http://bbkmoodle.bbksoft.hu/henger/kliens_server_web/ecceobs.eu/tananyag/wf2/lecke19_lap1.html#hiv6">Az XMLHttpRequest objektum</a></li> + <li><a href="http://www.dotnetszeged.hu/mic/?p=1652">Webes alapok kutatása #4 (AJAX + JSON)</a></li> + </ul> + </li> +</ul> diff --git a/files/hu/web/api/xmlhttprequest/xmlhttprequest_hasznalata/index.html b/files/hu/web/api/xmlhttprequest/xmlhttprequest_hasznalata/index.html new file mode 100644 index 0000000000..14559667cc --- /dev/null +++ b/files/hu/web/api/xmlhttprequest/xmlhttprequest_hasznalata/index.html @@ -0,0 +1,791 @@ +--- +title: Az XMLHttpRequest használata +slug: Web/API/XMLHttpRequest/XMLHttpRequest_hasznalata +tags: + - AJAX + - HTTP + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +<div>{{APIRef("XMLHttpRequest")}}</div> + +<p><span class="seoSummary">Ebben az útmutatóban azt fogjuk körüljárni, hogy miként használhatjuk az {{domxref("XMLHttpRequest")}} objektumot <a href="/en-US/docs/Web/HTTP">HTTP</a> kérelmek küldésére, annak érdekében, hogy adatokat cserélhessünk a webhely és a szerver között.</span></p> + +<p>Egy új HTTP kérelem elküldéséhez először hozzunk létre egy új <code>XMLHttpRequest</code> objektumot, nyissuk meg az URL-t, majd küldjük el a kérelmet. Az adatátvitel befejezése után, objektumunk hasznos információkkal szolgálhat, mint a válasz törzs vagy az eredmény <a href="/en-US/docs/Web/HTTP/Status">HTTP státusz</a> kódja.</p> + +<pre class="brush: js">function reqListener () { + console.log(this.responseText); +} + +var oReq = new XMLHttpRequest(); +oReq.addEventListener("load", reqListener); +oReq.open("GET", "http://www.example.org/example.txt"); +oReq.send();</pre> + +<h2 id="Kérelem_típusok">Kérelem típusok</h2> + +<p>A request made via <code>XMLHttpRequest</code> can fetch the data in one of two ways, asynchronously or synchronously. The type of request is dictated by the optional <code>async</code> argument (the third argument) that is set on the {{domxref("XMLHttpRequest.open()")}} method. If this argument is <code>true</code> or not specified, the <code>XMLHttpRequest</code> is processed asynchronously, otherwise the process is handled synchronously. A detailed discussion and demonstrations of these two types of requests can be found on the <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">synchronous and asynchronous requests</a> page. Do not use synchronous requests outside Web Workers.</p> + +<div class="note"><strong>Note:</strong> Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.</div> + +<div class="note"><strong>Note:</strong> The constructor function <code>XMLHttpRequest</code> isn't limited to only XML documents. It starts with <strong>"XML"</strong> because when it was created the main format that was originally used for Asynchronous Data Exchange were XML</div> + +<h2 id="Válasz_kezelés">Válasz kezelés</h2> + +<p>There are several types of <a href="https://xhr.spec.whatwg.org/">response attributes</a> defined by the living standard specification for the {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} constructor. These tell the client making the <code>XMLHttpRequest</code> important information about the status of the response. Some cases where dealing with non-text response types may involve some manipulation and analysis are outlined in the following sections.</p> + +<h3 id="Analyzing_and_manipulating_the_responseXML_property">Analyzing and manipulating the <code>responseXML</code> property</h3> + +<p>If you use <code>XMLHttpRequest</code> to get the content of a remote XML document, the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property will be a DOM object containing a parsed XML document. This could prove difficult to manipulate and analyze. There are four primary ways of analyzing this XML document:</p> + +<ol> + <li>Using <a href="/en-US/docs/Web/XPath">XPath</a> to address (or point to) parts of it.</li> + <li>Manually <a href="/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a> to strings or objects.</li> + <li>Using {{domxref("XMLSerializer")}} to serialize <strong>DOM trees to strings or to files</strong>.</li> + <li>{{jsxref("RegExp")}} can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use <code>RegExp</code> to scan with regard to line breaks. However, this method is a "last resort" since if the XML code changes slightly, the method will likely fail.</li> +</ol> + +<div class="note"> +<p><strong>Note:</strong> <code>XMLHttpRequest</code> can now interpret HTML for you using the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property. Read the article about <a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> to learn how to do this.</p> +</div> + +<h3 id="Processing_a_responseText_property_containing_an_HTML_document">Processing a <code>responseText</code> property containing an HTML document</h3> + +<p>If you use <code>XMLHttpRequest</code> to get the content of a remote HTML webpage, the {{domxref("XMLHttpRequest.responseText", "responseText")}} property is a string containing the raw HTML. This could prove difficult to manipulate and analyze. There are three primary ways to analyze and parse this raw HTML string:</p> + +<ol> + <li>Use the <code>XMLHttpRequest.responseXML</code> property as covered in the article <a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a>.</li> + <li>Inject the content into the body of a <a href="/en-US/docs/Web/API/DocumentFragment">document fragment</a> via <code>fragment.body.innerHTML</code> and traverse the DOM of the fragment.</li> + <li>{{jsxref("RegExp")}} can be used if you always know the content of the HTML <code>responseText</code> beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.</li> +</ol> + +<h2 id="Bináris_adatok_kezelése">Bináris adatok kezelése</h2> + +<p>Although {{domxref("XMLHttpRequest")}} is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an <code>XMLHttpRequest</code> into sending binary data. These involve utilizing the {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} method on the <code>XMLHttpRequest</code> object and is a workable solution.</p> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); +oReq.open("GET", url); +// retrieve data unprocessed as a binary string +oReq.overrideMimeType("text/plain; charset=x-user-defined"); +/* ... */ +</pre> + +<p>However, more modern techniques are available, since the {{domxref("XMLHttpRequest.responseType", "responseType")}} attribute now supports a number of additional content types, which makes sending and receiving binary data much easier.</p> + +<p>For example, consider this snippet, which uses the <code>responseType</code> of <code>"arraybuffer"</code> to fetch the remote content into a {{jsxref("ArrayBuffer")}} object, which stores the raw binary data.</p> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.onload = function(e) { + var arraybuffer = oReq.response; // not responseText + /* ... */ +} +oReq.open("GET", url); +oReq.responseType = "arraybuffer"; +oReq.send();</pre> + +<p>For more examples check out the <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a> page</p> + +<h2 id="Folyamatok_nyomonkövetése">Folyamatok nyomonkövetése</h2> + +<p><code>XMLHttpRequest</code> provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.</p> + +<p>Support for DOM {{event("progress")}} event monitoring of <code>XMLHttpRequest</code> transfers follows the <a href="https://xhr.spec.whatwg.org/#interface-progressevent">specification for progress events</a>: these events implement the {{domxref("ProgressEvent")}} interface. The actual events you can monitor to determine the state of an ongoing transfer are:</p> + +<dl> + <dt>{{event("progress")}}</dt> + <dd>The amount of data that has been retrieved has changed.</dd> + <dt>{{event("load")}}</dt> + <dd>The transfer is complete; all data is now in the <code>response</code></dd> +</dl> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.addEventListener("progress", updateProgress); +oReq.addEventListener("load", transferComplete); +oReq.addEventListener("error", transferFailed); +oReq.addEventListener("abort", transferCanceled); + +oReq.open(); + +// ... + +// progress on transfers from the server to the client (downloads) +function updateProgress (oEvent) { + if (oEvent.lengthComputable) { + var percentComplete = oEvent.loaded / oEvent.total * 100; + // ... + } else { + // Unable to compute progress information since the total size is unknown + } +} + +function transferComplete(evt) { + console.log("The transfer is complete."); +} + +function transferFailed(evt) { + console.log("An error occurred while transferring the file."); +} + +function transferCanceled(evt) { + console.log("The transfer has been canceled by the user."); +}</pre> + +<p>Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using <code>XMLHttpRequest</code>.</p> + +<div class="note"><strong>Note:</strong> You need to add the event listeners before calling <code>open()</code> on the request. Otherwise the <code>progress</code> events will not fire.</div> + +<p>The progress event handler, specified by the <code>updateProgress()</code> function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's <code>total</code> and <code>loaded</code> fields. However, if the <code>lengthComputable</code> field is false, the total length is not known and will be zero.</p> + +<p>Progress events exist for both download and upload transfers. The download events are fired on the <code>XMLHttpRequest</code> object itself, as shown in the above sample. The upload events are fired on the <code>XMLHttpRequest.upload</code> object, as shown below:</p> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.upload.addEventListener("progress", updateProgress); +oReq.upload.addEventListener("load", transferComplete); +oReq.upload.addEventListener("error", transferFailed); +oReq.upload.addEventListener("abort", transferCanceled); + +oReq.open(); +</pre> + +<div class="note"><strong>Note:</strong> Progress events are not available for the <code>file:</code> protocol.</div> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> As of {{Gecko("12.0")}}, if your progress event is called with a <code>responseType</code> of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.</p> +</div> + +<p>One can also detect all three load-ending conditions (<code>abort</code>, <code>load</code>, or <code>error</code>) using the <code>loadend</code> event:</p> + +<pre class="brush:js">req.addEventListener("loadend", loadEnd); + +function loadEnd(e) { + console.log("The transfer finished (although we don't know if it succeeded or not)."); +} +</pre> + +<p>Note there is no way to be certain, from the information received by the <code>loadend</code> event, as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.</p> + +<h2 id="Űrlapok_küldése_és_állományok_feltöltése">Űrlapok küldése és állományok feltöltése</h2> + +<p>Instances of <code>XMLHttpRequest</code> can be used to submit forms in two ways:</p> + +<ul> + <li>using only AJAX</li> + <li>using the {{domxref("XMLHttpRequest.FormData", "FormData")}} API</li> +</ul> + +<p>Using the <code>FormData</code> API is the simplest and fastest, but has the disadvantage that data collected can not be <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringified</a>.<br> + Using only AJAX is more complex, but typically more flexible and powerful.</p> + +<h3 id="Using_nothing_but_XMLHttpRequest">Using nothing but <code>XMLHttpRequest</code></h3> + +<p>Submitting forms without the <code>FormData</code> API does not require other APIs for most use cases. The only case where you need an additional API is <strong>if you want to upload one or more files</strong>, where you use the {{domxref("FileReader")}} API.</p> + +<h4 id="A_brief_introduction_to_the_submit_methods">A brief introduction to the submit methods</h4> + +<p>An html {{ HTMLElement("form") }} can be sent in four ways:</p> + +<ul> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>application/x-www-form-urlencoded</code> (default);</li> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>text/plain</code>;</li> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>multipart/form-data</code>;</li> + <li>using the <code>GET</code> method (in this case the <code>enctype</code> attribute will be ignored).</li> +</ul> + +<p>Now, consider the submission of a form containing only two fields, named <code>foo</code> and <code>baz</code>. If you are using the <code>POST</code> method the server will receive a string similar to one of the following three examples, depending on the encoding type you are using:</p> + +<ul> + <li> + <p>Method: <code>POST</code>; Encoding type: <code>application/x-www-form-urlencoded</code> (default):</p> + + <pre class="brush:plain">Content-Type: application/x-www-form-urlencoded + +foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A</pre> + </li> + <li> + <p>Method: <code>POST</code>; Encoding type: <code>text/plain</code>:</p> + + <pre class="brush:plain">Content-Type: text/plain + +foo=bar +baz=The first line. +The second line.</pre> + </li> + <li> + <p>Method: <code>POST</code>; Encoding type: <code><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">multipart/form-data</a></code>:</p> + + <pre class="brush:plain">Content-Type: multipart/form-data; boundary=---------------------------314911788813839 + +-----------------------------314911788813839 +Content-Disposition: form-data; name="foo" + +bar +-----------------------------314911788813839 +Content-Disposition: form-data; name="baz" + +The first line. +The second line. + +-----------------------------314911788813839--</pre> + </li> +</ul> + +<p>However, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p> + +<pre class="brush:plain">?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> + +<h4 id="A_little_vanilla_framework">A little vanilla framework</h4> + +<p>All these effects are done automatically by the web browser whenever you submit a {{HTMLElement("form")}}. If you want to perform the same effects using JavaScript you have to instruct the interpreter about <em>everything</em>. Therefore, how to send forms in <em>pure</em> AJAX is too complex to be explained here in detail. For this reason, here we place <strong>a complete (yet didactic) framework</strong>, able to use all four ways to <em>submit</em>, and to <strong>upload files</strong>:</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Sending forms with pure AJAX &ndash; MDN</title> +<script type="text/javascript"> + +"use strict"; + +/*\ +|*| +|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() +\*/ + +if (!XMLHttpRequest.prototype.sendAsBinary) { + XMLHttpRequest.prototype.sendAsBinary = function(sData) { + var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); + for (var nIdx = 0; nIdx < nBytes; nIdx++) { + ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; + } + /* send as ArrayBufferView...: */ + this.send(ui8Data); + /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ + }; +} + +/*\ +|*| +|*| :: AJAX Form Submit Framework :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest +|*| +|*| This framework is released under the GNU Public License, version 3 or later. +|*| https://www.gnu.org/licenses/gpl-3.0-standalone.html +|*| +|*| Syntax: +|*| +|*| AJAXSubmit(HTMLFormElement); +\*/ + +var AJAXSubmit = (function () { + + function ajaxSuccess () { + /* console.log("AJAXSubmit - Success!"); */ + console.log(this.responseText); + /* you can get the serialized data through the "submittedData" custom property: */ + /* console.log(JSON.stringify(this.submittedData)); */ + } + + function submitData (oData) { + /* the AJAX request... */ + var oAjaxReq = new XMLHttpRequest(); + oAjaxReq.submittedData = oData; + oAjaxReq.onload = ajaxSuccess; + if (oData.technique === 0) { + /* method is GET */ + oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, + oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); + oAjaxReq.send(null); + } else { + /* method is POST */ + oAjaxReq.open("post", oData.receiver, true); + if (oData.technique === 3) { + /* enctype is multipart/form-data */ + var sBoundary = "---------------------------" + Date.now().toString(16); + oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary); + oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n"); + } else { + /* enctype is application/x-www-form-urlencoded or text/plain */ + oAjaxReq.setRequestHeader("Content-Type", oData.contentType); + oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); + } + } + } + + function processStatus (oData) { + if (oData.status > 0) { return; } + /* the form is now totally serialized! do something before sending it to the server... */ + /* doSomething(oData); */ + /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ + submitData (oData); + } + + function pushSegment (oFREvt) { + this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; + this.owner.status--; + processStatus(this.owner); + } + + function plainEscape (sText) { + /* How should I treat a text/plain form encoding? + What characters are not allowed? this is what I suppose...: */ + /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ + return sText.replace(/[\s\=\\]/g, "\\$&"); + } + + function SubmitRequest (oTarget) { + var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; + /* console.log("AJAXSubmit - Serializing form..."); */ + this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; + this.technique = bIsPost ? + this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; + this.receiver = oTarget.action; + this.status = 0; + this.segments = []; + var fFilter = this.technique === 2 ? plainEscape : escape; + for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { + oField = oTarget.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE" && oField.files.length > 0) { + if (this.technique === 3) { + /* enctype is multipart/form-data */ + for (nFile = 0; nFile < oField.files.length; nFile++) { + oFile = oField.files[nFile]; + oSegmReq = new FileReader(); + /* (custom properties:) */ + oSegmReq.segmentIdx = this.segments.length; + oSegmReq.owner = this; + /* (end of custom properties) */ + oSegmReq.onload = pushSegment; + this.segments.push("Content-Disposition: form-data; name=\"" + + oField.name + "\"; filename=\"" + oFile.name + + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); + this.status++; + oSegmReq.readAsBinaryString(oFile); + } + } else { + /* enctype is application/x-www-form-urlencoded or text/plain or + method is GET: files will not be sent! */ + for (nFile = 0; nFile < oField.files.length; + this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); + } + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + /* NOTE: this will submit _all_ submit buttons. Detecting the correct one is non-trivial. */ + /* field type is not FILE or is FILE but is empty */ + this.segments.push( + this.technique === 3 ? /* enctype is multipart/form-data */ + "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n" + : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */ + fFilter(oField.name) + "=" + fFilter(oField.value) + ); + } + } + processStatus(this); + } + + return function (oFormElement) { + if (!oFormElement.action) { return; } + new SubmitRequest(oFormElement); + }; + +})(); + +</script> +</head> +<body> + +<h1>Sending forms with pure AJAX</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<form action="register.php" method="post" enctype="text/plain" + onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + Your name: <input type="text" name="user" /> + </p> + <p> + Your message:<br /> + <textarea name="message" cols="40" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" + onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> + <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> + <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> + <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> + <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +</body> +</html></pre> +</div> + +<p>To test this, create a page named <strong>register.php</strong> (which is the <code>action</code> attribute of these sample forms), and put the following <em>minimalistic</em> content:</p> + +<pre class="brush: php"><?php +/* register.php */ + +header("Content-type: text/plain"); + +/* +NOTE: You should never use `print_r()` in production scripts, or +otherwise output client-submitted data without sanitizing it first. +Failing to sanitize can lead to cross-site scripting vulnerabilities. +*/ + +echo ":: data received via GET ::\n\n"; +print_r($_GET); + +echo "\n\n:: Data received via POST ::\n\n"; +print_r($_POST); + +echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n"; +if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; } + +echo "\n\n:: Files received ::\n\n"; +print_r($_FILES); + +</pre> + +<p>The syntax to activate this script is simply:</p> + +<pre class="syntaxbox">AJAXSubmit(myForm);</pre> + +<div class="note"><strong>Note:</strong> This framework uses the {{domxref("FileReader")}} API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered <strong>an experimental technique</strong>. If you do not need to upload binary files, this framework works fine in most browsers.</div> + +<div class="note"><strong>Note:</strong> The best way to send binary content is via {{jsxref("ArrayBuffer", "ArrayBuffers")}} or {{domxref("Blob", "Blobs")}} in conjuncton with the {{domxref("XMLHttpRequest.send()", "send()")}} method and possibly the {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} method of the <code>FileReader</code> API. But, since the aim of this script is to work with a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, we used the {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} method in conjunction with the {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} method of the <code>FileReader</code> API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the <code>FormData</code> API.</div> + +<div class="note"><strong>Note:</strong> The non-standard <code>sendAsBinary</code> method is considered deprecated as of Gecko 31 {{geckoRelease(31)}} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div> + +<h3 id="Using_FormData_objects">Using FormData objects</h3> + +<p>The {{domxref("XMLHttpRequest.FormData", "FormData")}} constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primary use is in sending form data, but can also be used independently from a form in order to transmit user keyed data. The transmitted data is in the same format the form's <code>submit()</code> method uses to send data, if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an <code>XMLHttpRequest</code>. For examples, and explanations of how one can utilize FormData with XMLHttpRequests, see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Using FormData Objects</a> page. For didactic purposes here is <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework">the previous example</a> transformed to use the <code>FormData</code> API</strong>. Note the brevity of the code:</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" charset="UTF-8" /> +<title>Sending forms with FormData &ndash; MDN</title> +<script> +"use strict"; + +function ajaxSuccess () { + console.log(this.responseText); +} + +function AJAXSubmit (oFormElement) { + if (!oFormElement.action) { return; } + var oReq = new XMLHttpRequest(); + oReq.onload = ajaxSuccess; + if (oFormElement.method.toLowerCase() === "post") { + oReq.open("post", oFormElement.action); + oReq.send(new FormData(oFormElement)); + } else { + var oField, sFieldType, nFile, sSearch = ""; + for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { + oField = oFormElement.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? + oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE") { + for (nFile = 0; nFile < oField.files.length; + sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); + } + } + oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); + oReq.send(null); + } +} +</script> +</head> +<body> + +<h1>Sending forms with FormData</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<p>The text/plain encoding is not supported by the FormData API.</p> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" + onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> + <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> + <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> + <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> + <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> +</body> +</html></pre> +</div> + +<div class="note"><strong>Note:</strong> As we said,<strong> {{domxref("FormData")}} objects are not <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> objects</strong>. If you want to stringify a submitted data, use <a href="#A_little_vanilla_framework">the previous <em>pure</em>-AJAX example</a>. Note also that, although in this example there are some <code>file</code> {{ HTMLElement("input") }} fields, <strong>when you submit a form through the <code>FormData</code> API you do not need to use the {{domxref("FileReader")}} API also</strong>: files are automatically loaded and uploaded.</div> + +<h2 id="Utolsó_módosítás_dátuma">Utolsó módosítás dátuma</h2> + +<pre class="brush: js">function getHeaderTime () { + console.log(this.getResponseHeader("Last-Modified")); /* A valid GMTString date or null */ +} + +var oReq = new XMLHttpRequest(); +oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html"); +oReq.onload = getHeaderTime; +oReq.send();</pre> + +<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3> + +<p>Let's create two functions:</p> + +<pre class="brush: js">function getHeaderTime () { + var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)); + var nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); + + if (isNaN(nLastVisit) || nLastModif > nLastVisit) { + window.localStorage.setItem('lm_' + this.filepath, Date.now()); + isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); + } +} + +function ifHasChanged(sURL, fCallback) { + var oReq = new XMLHttpRequest(); + oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL); + oReq.callback = fCallback; + oReq.filepath = sURL; + oReq.onload = getHeaderTime; + oReq.send(); +}</pre> + +<p>And to test:</p> + +<pre class="brush: js">/* Let's test the file "yourpage.html"... */ + +ifHasChanged("yourpage.html", function (nModif, nVisit) { + console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!"); +});</pre> + +<p>If you want to know <strong><em>if</em> <em>the current page</em> has changed</strong>, please read the article about {{domxref("document.lastModified")}}.</p> + +<h2 id="Webhelyközi_XMLHttpRequest">Webhelyközi XMLHttpRequest</h2> + +<p>Modern browsers support cross-site requests by implementing the <a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> (CORS) standard. As long as the server is configured to allow requests from your web application's origin, <code>XMLHttpRequest</code> will work. Otherwise, an <code>INVALID_ACCESS_ERR</code> exception is thrown.</p> + +<h2 id="Gyorsítótár_megkerülése">Gyorsítótár megkerülése</h2> + +<p>A cross-browser compatible approach to bypassing the cache is appending a timestamp to the URL, being sure to include a "?" or "&" as appropriate. For example:</p> + +<pre class="brush:plain">http://foo.com/bar.html -> http://foo.com/bar.html?12345 +http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345 +</pre> + +<p>As the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.</p> + +<p>You can automatically adjust URLs using the following code:</p> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime()); +oReq.send(null);</pre> + +<h2 id="Biztonság">Biztonság</h2> + +<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> to <code>allAccess</code> to give specific sites cross-site access. This is no longer supported.")}}</p> + +<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p> + +<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin</code> HTTP header in the response to the XMLHttpRequest.</p> + +<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3> + +<p>If you conclude with an XMLHttpRequest receiving <code>status=0</code> and <code>statusText=null</code>, this means the request was not allowed to be performed. It was <code><a href="https://xhr.spec.whatwg.org/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="https://www.w3.org/TR/2010/CR-XMLHttpRequest-20100803/#xmlhttprequest-origin"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is subsequently <code>open()</code>. This case can happen, for example, when one has an XMLHttpRequest that gets fired on an onunload event for a window, the expected XMLHttpRequest is created when the window to be closed is still there, and finally sending the request (in otherwords, <code>open()</code>) when this window has lost its focus and another window gains focus. The most effective way to avoid this problem is to set a listener on the new window's {{event("activate")}} event which is set once the terminated window has its {{event("unload")}} event triggered.</p> + +<h2 id="Dolgozók">Dolgozók</h2> + +<p>Setting <code>overrideMimeType</code> does not work from a {{domxref("Worker")}}. See {{bug(678057)}} for more details. Other browsers may handle this differently.</p> + +<h2 id="Specifikációk">Specifikációk</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikáció</th> + <th scope="col">Állapot</th> + <th scope="col">Megjegyzés</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Élő szabvány, legfrisebb verzió</td> + </tr> + </tbody> +</table> + +<h2 id="Böngésző_támogatás">Böngésző támogatás</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.XMLHttpRequest")}}</p> + +<h2 id="Kapcsolódó_írások">Kapcsolódó írások</h2> + +<ol> + <li><a href="/en-US/docs/AJAX/Getting_Started">MDN AJAX introduction</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control</a></li> + <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li> + <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> + <li><a href="https://msdn.microsoft.com/library/ms535874">Microsoft documentation</a></li> + <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> + <li><a href="https://xhr.spec.whatwg.org/">The <code>XMLHttpRequest</code> object: WHATWG specification</a></li> +</ol> diff --git a/files/hu/web/css/tools/border-radius_bemutato/index.html b/files/hu/web/css/tools/border-radius_bemutato/index.html new file mode 100644 index 0000000000..fe31d33429 --- /dev/null +++ b/files/hu/web/css/tools/border-radius_bemutato/index.html @@ -0,0 +1,1602 @@ +--- +title: Border-radius bemutató +slug: Web/CSS/Tools/Border-radius_bemutato +tags: + - CSS + - Eszközök +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +<p>Ez az eszköz CSS3 {{cssxref("border-radius")}} beállítások megjelenítésére használható.</p> + +<div style="display: none;"> +<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div id="container"> + <div class="group section"> + <div id="preview" class="col span_12"> + <div id="subject"> + <div id="top-left" class="radius-container" + data-X="left" data-Y="top"> + </div> + <div id="top-right" class="radius-container" + data-X="right" data-Y="top"> + </div> + <div id="bottom-right" class="radius-container" + data-X="right" data-Y="bottom"> + </div> + <div id="bottom-left" class="radius-container" + data-X="left" data-Y="bottom"> + </div> + + <div id="radius-ui-sliders"> + <div id="tlr" class="ui-input-slider" data-topic="top-left" + data-unit=" px" data-sensivity="2"></div> + + <div id="tlw" class="ui-input-slider" data-topic="top-left-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="tlh" class="ui-input-slider" data-topic="top-left-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="trr" class="ui-input-slider" data-topic="top-right" + data-unit=" px" data-sensivity="2"></div> + + <div id="trw" class="ui-input-slider" data-topic="top-right-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="trh" class="ui-input-slider" data-topic="top-right-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="brr" class="ui-input-slider" data-topic="bottom-right" + data-unit=" px" data-sensivity="2"></div> + + <div id="brw" class="ui-input-slider" data-topic="bottom-right-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="brh" class="ui-input-slider" data-topic="bottom-right-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="blr" class="ui-input-slider" data-topic="bottom-left" + data-unit=" px" data-sensivity="2"></div> + + <div id="blw" class="ui-input-slider" data-topic="bottom-left-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="blh" class="ui-input-slider" data-topic="bottom-left-h" + data-unit=" px" data-sensivity="2"></div> + </div> + </div> + </div> + </div> + <div id="controls" class="group section"> + + <div class="group section"> + <div id="dimensions"> + <div class="ui-input-slider" data-topic="width" data-info="width" + data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> + + <div class="ui-input-slider" data-topic="height" data-info="height" + data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> + </div> + + <div id="output"></div> + </div> + + <div class="group section"> + <div id="radius-lock"> + <div class="info"> lekerekített sarok </div> + <div class="ui-checkbox" data-topic='top-left'></div> + <div class="ui-checkbox" data-topic='top-right'></div> + <div class="ui-checkbox" data-topic='bottom-right'></div> + <div class="ui-checkbox" data-topic='bottom-left'></div> + </div> + + <div id="unit-selection"> + <div class="info"> szegély mértékegységei </div> + </div> + </div> + + </div> +</div> +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* GRID OF TEN + * ========================================================================== */ + +.span_12 { + width: 100%; +} + +.span_11 { + width: 91.46%; +} + +.span_10 { + width: 83%; +} + +.span_9 { + width: 74.54%; +} + +.span_8 { + width: 66.08%; +} + +.span_7 { + width: 57.62%; +} + +.span_6 { + width: 49.16%; +} + +.span_5 { + width: 40.7%; +} + +.span_4 { + width: 32.24%; +} + +.span_3 { + width: 23.78%; +} + +.span_2 { + width: 15.32%; +} + +.span_1 { + width: 6.86%; +} + + + + +/* SECTIONS + * ========================================================================== */ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* GROUPING + * ========================================================================== */ + + +.group:before, .group:after { + content: ""; + display: table; +} + +.group:after { + clear:both; +} + +.group { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +/* GRID COLUMN SETUP + * ========================================================================== */ + +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} + +.col:first-child { + margin-left: 0; +} /* all browsers except IE6 and lower */ + + +/* + * UI Component + */ + +.ui-input-slider-container { + height: 20px; + margin: 10px 0; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider-container * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/* + * UI Component + */ + +/* Checkbox */ + +.ui-checkbox { + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #FFF; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-checkbox > input { + display: none; +} + +.ui-checkbox > label { + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; + + background-color: #888; + background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); + background-position: center center; + background-repeat: no-repeat; + + color: #FFF; + border-radius: 3px; + font-weight: bold; + float: left; +} + +.ui-checkbox .text { + padding-left: 34px; + background-position: center left 10px; +} + +.ui-checkbox .left { + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; +} + +.ui-checkbox > label:hover { + cursor: pointer; +} + +.ui-checkbox > input:checked + label { + background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); + background-color: #379B4A; +} + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/******************************************************************************/ +/******************************************************************************/ +/* + * Preview Area + */ + +#preview { + height: 500px; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + overflow: hidden; + position: relative; +} + +#preview .content { + width: 100%; + height: 100%; + display: block; +} + +#preview input { + color: #333; + border: 1px solid #CCC; + border-radius: 3px; +} + +#subject { + width: 400px; + height: 150px; + margin: 0 auto; + border: 3px solid #C60; + background: #FFF; + position: relative; +} + +.radius { + width: 50%; + height: 50%; + border: 1px solid #CCC; + display: none; + position: absolute; + z-index: 1; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.handle { + width: 16px; + height: 16px; + position: absolute; + z-index: 2; +} + +.handle-top-left { + top: -12px; + left: -12px; + cursor: se-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat; +} + +.handle-top-right { + top: -12px; + right: -12px; + cursor: sw-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat; +} + +.handle-bottom-right { + bottom: -12px; + right: -12px; + cursor: nw-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat; +} + +.handle-bottom-left { + bottom: -12px; + left: -12px; + cursor: ne-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat; +} + + +.radius-container { + position: absolute; + display : block; + z-index: 1; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +/* TOP LEFT */ +#top-left { + top: 0; + left: 0; +} + +#top-left .radius { + border-top-left-radius: 100%; + top: 0; + left: 0; +} + +/* TOP RIGHT */ +#top-right { + top: 0; + right: 0; +} + +#top-right .radius { + border-top-right-radius: 100%; + top: 0; + right: 0; +} + +/* BOTTOM RIGHT */ +#bottom-right { + bottom: 0; + right: 0; +} + +#bottom-right .radius { + border-bottom-right-radius: 100%; + bottom: 0; + right: 0; +} + +/* BOTTOM lEFT */ +#bottom-left { + bottom: 0; + left: 0; +} + +#bottom-left .radius { + border-bottom-left-radius: 100%; + bottom: 0; +} + +/* INPUT SLIDERS */ + +#preview .ui-input-slider { + margin: 10px; + position: absolute; + z-index: 10; +} + +#radius-ui-sliders { + width: 100%; + height: 100%; + min-height: 75px; + min-width: 150px; + padding: 20px 50px; + top: -20px; + left: -50px; + position: relative; +} + +#tlr { + top: -30px; + left: -50px; + display: none; +} + +#tlw { + top: -30px; + left: 30px; +} + +#tlh { + top: 20px; + left: -50px; +} + +#trr { + top: -30px; + right: -50px; + display: none; +} + +#trw { + top: -30px; + right: 30px; +} + +#trh { + top: 20px; + right: -50px; +} + +#brr { + bottom: -30px; + right: -50px; + display: none; +} + +#brw { + bottom: -30px; + right: 30px; +} + +#brh { + bottom: 20px; + right: -50px; +} + +#blr { + bottom: -30px; + left: -50px; + display: none; +} + +#blw { + bottom: -30px; + left: 30px; +} + +#blh { + bottom: 20px; + left: -50px; +} + +#preview .ui-input-slider-left, #preview .ui-input-slider-right { + visibility: hidden; +} + +#preview .ui-input-slider-container:hover .ui-input-slider-left { + visibility: visible; +} + +#preview .ui-input-slider-container:hover .ui-input-slider-right { + visibility: visible; +} + +/* + * + */ + +#unit-selection { + width: 200px; + height: 75px; + margin: 30px 30px 0 0; + padding: 30px; + border: 3px solid #555; + border-radius: 10px; + position: relative; + float: right; +} + +#unit-selection .info { + height: 20%; + width: 100%; + line-height: 20%; + font-size: 20px; + text-align: center; + position: relative; + top: 40%; +} + +#unit-selection .dropdown { + width: 50px; + height: 20px; + margin: 10px; + padding: 0; + border-radius: 3px; + position: absolute; + overflow: hidden; +} + +#unit-selection select { + width: 50px; + height: 20px; + marign: 0; + padding: 0 0 0 10px; + background: #555; + border: 1px solid #555; + border: none; + color: #FFF; + float: left; +} + +#unit-selection select option { + background: #FFF; + color: #333; +} + +#unit-selection select:hover { + cursor: pointer; +} + +#unit-selection .dropdown:before { + content: ""; + width: 18px; + height: 20px; + display: block; + background-color: #555; + background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png"); + background-position: center center; + background-repeat: no-repeat; + top: 0px; + right: 0px; + position: absolute; + z-index: 1; + pointer-events: none; +} + +#unit-selection .unit-top-left { + top: 0; + left: 0; + display: none; +} + +#unit-selection .unit-top-left-w { + top: -22px; + left: 30px; +} + +#unit-selection .unit-top-left-h { + top: 20px; + left: -37px; +} + +#unit-selection .unit-top-right { + top: 0; + right: 0; + display: none; +} + +#unit-selection .unit-top-right-w { + top: -22px; + right: 30px; +} + +#unit-selection .unit-top-right-h { + top: 20px; + right: -37px; +} + +#unit-selection .unit-bottom-right { + bottom: 0; + right: 0; + display: none; +} + +#unit-selection .unit-bottom-right-w { + bottom: -22px; + right: 30px; +} + +#unit-selection .unit-bottom-right-h { + bottom: 20px; + right: -37px; +} + +#unit-selection .unit-bottom-left { + bottom: 0; + left: 0; + display: none; +} + +#unit-selection .unit-bottom-left-w { + bottom: -22px; + left: 30px; +} + +#unit-selection .unit-bottom-left-h { + bottom: 20px; + left: -37px; +} + +/******************************************************************************/ +/******************************************************************************/ + + +#radius-lock { + width: 200px; + height: 75px; + margin: 30px 0 0 30px; + padding: 30px; + border: 3px solid #555; + border-radius: 10px; + position: relative; + float: left; +} + +#radius-lock .ui-checkbox { + color: #FFF; + position: absolute; +} + +#radius-lock .ui-checkbox > label { + height: 20px; + width: 34px; + padding: 0; +} + +#radius-lock .info { + height: 20%; + width: 100%; + line-height: 20%; + font-size: 20px; + text-align: center; + position: relative; + top: 40%; +} + +#radius-lock [data-topic="top-left"] { + top: 10px; + left: 10px; +} + +#radius-lock [data-topic="top-right"] { + top: 10px; + right: 10px; +} + +#radius-lock [data-topic="bottom-right"] { + bottom: 10px; + right: 10px; +} + +#radius-lock [data-topic="bottom-left"] { + bottom: 10px; + left: 10px; +} + +/** + * Controls + */ + +#dimensions { + width: 200px; + color: #444; + float:left; +} + +#dimensions input { + background: #555; + color: #FFF; + border: none; + border-radius: 3px; +} + +#output { + width: 500px; + padding: 10px 0; + margin: 10px 0; + color: #555; + text-align: center; + border: 1px dashed #999; + border-radius: 3px; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; + + float: right; +} + + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js"><code class="language-js">'use strict'; + + +/** + * UI-InputSliderManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseInt(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + subscribe(obj.topic, function(value) { + input.value = value + obj.unit; + }); + + return input; + } + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + document.addEventListener("mousemove", sliderMotion); + }); + + document.addEventListener("mouseup", function(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }); + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + } + + return slider; + } + + var InputSlider = function(node) { + var min = node.getAttribute('data-min') | 0; + var max = node.getAttribute('data-max') | 0; + var step = node.getAttribute('data-step') | 0; + var value = node.getAttribute('data-value') | 0; + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + + this.min = min; + this.max = max > 0 ? max : 100; + this.step = step === 0 ? 1 : step; + this.topic = topic; + this.node = node; + this.unit = unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + node.className = 'ui-input-slider ui-input-slider-container'; + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + } + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + if (send_notify !== undefined && send_notify === false) { + slider.input.value = value + slider.unit; + return; + } + + notify.call(slider); + } + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + } + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + } + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + } + + var getNode = function getNode(topic) { + return sliders[topic].node; + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + } + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + getNode : getNode, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + +/** + * UI-ButtonManager + */ + +var ButtonManager = (function CheckBoxManager() { + + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute('data-topic'); + var state = node.getAttribute('data-state'); + var name = node.getAttribute('data-label'); + var align = node.getAttribute('data-text-on'); + + state = (state === "true"); + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = 'checkbox-' + topic; + checkbox.id = id; + checkbox.setAttribute('type', 'checkbox'); + checkbox.checked = state; + + label.setAttribute('for', id); + if (name) { + label.className = 'text'; + if (align) + label.className += ' ' + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener('change', function(e) { + notify.call(this); + }.bind(this)); + + buttons[topic] = this; + } + + var getNode = function getNode(topic) { + return buttons[topic].node; + } + + var setValue = function setValue(topic, value) { + try { + buttons[topic].checkbox.checked = value; + } + catch(error) { + console.log(error); + } + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-checkbox'); + var size = elem.length; + for (var i = 0; i < size; i++) + new CheckBox(elem[i]); + } + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + + +window.addEventListener("load", function() { + BorderRadius.init(); +}); + +var BorderRadius = (function BorderRadius() { + + function getElemById(id) { + return document.getElementById(id); + } + + /** + * Shadow dragging + */ + var PreviewMouseTracking = (function Drag() { + var active = false; + var lastX = 0; + var lastY = 0; + var subscribers = []; + + var init = function init(id) { + var elem = getElemById(id); + elem.addEventListener('mousedown', dragStart, false); + document.addEventListener('mouseup', dragEnd, false); + } + + var dragStart = function dragStart(e) { + if (e.button !== 0) + return; + + active = true; + lastX = e.clientX; + lastY = e.clientY; + document.addEventListener('mousemove', mouseDrag, false); + } + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + if (active === true) { + active = false; + document.removeEventListener('mousemove', mouseDrag, false); + } + } + + var mouseDrag = function mouseDrag(e) { + notify(e.clientX - lastX, e.clientY - lastY); + lastX = e.clientX; + lastY = e.clientY; + } + + var subscribe = function subscribe(callback) { + subscribers.push(callback); + } + + var unsubscribe = function unsubscribe(callback) { + var index = subscribers.indexOf(callback); + subscribers.splice(index, 1); + } + + var notify = function notify(deltaX, deltaY) { + for (var i in subscribers) + subscribers[i](deltaX, deltaY); + } + + return { + init : init, + subscribe : subscribe, + unsubscribe : unsubscribe + } + + })(); + + var subject; + var units = ['px', '%']; + var output = null; + + var UnitSelector = function UnitSelector(topic) { + + this.container = document.createElement("div"); + this.select = document.createElement("select"); + for (var i in units) { + var option = document.createElement("option"); + option.value = i; + option.textContent = units[i]; + this.select.appendChild(option); + } + + this.container.className = 'dropdown ' + 'unit-' + topic; + this.container.appendChild(this.select); + } + + UnitSelector.prototype.setValue = function setValue(value) { + this.salect.value = value; + } + + + var RadiusContainer = function RadiusContainer(node) { + var radius = document.createElement('div'); + var handle = document.createElement('div'); + var x = node.getAttribute('data-x'); + var y = node.getAttribute('data-y'); + var active = false; + + this.id = node.id; + this.node = node; + this.radius = radius; + this.handle = handle; + this.width = 100; + this.height = 50; + this.size = 0; + this.rounded = false; + + this.unitX = 0; + this.unitY = 0; + this.unitR = 0; + + this.maxW = 100; + this.maxH = 100; + this.maxR = 100; + + this.topic = y + '-' + x; + + var sliderW = InputSliderManager.getNode(this.topic + '-w'); + var sliderH = InputSliderManager.getNode(this.topic + '-h'); + var sliderR = InputSliderManager.getNode(this.topic); + + this.setUnitX(this.unitX); + this.setUnitY(this.unitY); + this.setUnitR(this.unitR); + + this.updateWidth(); + this.updateHeight(); + this.updateRadius(); + + if (x === 'left') this.resizeX = 1; + if (x === 'right') this.resizeX = -1; + if (y === 'top') this.resizeY = 1; + if (y === 'bottom') this.resizeY = -1; + + radius.className = 'radius'; + + var unit_selector = document.getElementById("unit-selection"); + var unitW = new UnitSelector(this.topic + '-w'); + var unitH = new UnitSelector(this.topic + '-h'); + var unitR = new UnitSelector(this.topic); + + unit_selector.appendChild(unitW.container); + unit_selector.appendChild(unitH.container); + unit_selector.appendChild(unitR.container); + node.appendChild(radius); + subject.appendChild(handle); + + unitW.select.addEventListener('change', function(e) { + this.setUnitX(e.target.value | 0); + }.bind(this)); + + unitH.select.addEventListener('change', function(e) { + this.setUnitY(e.target.value | 0); + }.bind(this)); + + unitR.select.addEventListener('change', function(e) { + this.setUnitR(e.target.value | 0); + }.bind(this)); + + if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left' + if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right'; + if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right'; + if (x === 'left' && y == 'bottom') handle.className = 'handle handle-bottom-left'; + + handle.addEventListener("mousedown", function(e) { + active = true; + this.radius.style.display = 'block'; + PreviewMouseTracking.subscribe(this.updateContainer.bind(this)); + }.bind(this)); + + document.addEventListener("mouseup", function(e) { + this.radius.style.display = 'none'; + if (active === true) + PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this)); + }.bind(this)); + + InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this)); + InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this)); + InputSliderManager.subscribe(this.topic, this.setRadius.bind(this)); + + ButtonManager.subscribe(this.topic, function(value) { + this.rounded = value; + if (value === true) { + unitW.container.style.display = 'none'; + unitH.container.style.display = 'none'; + unitR.container.style.display = 'block'; + sliderW.style.display = 'none'; + sliderH.style.display = 'none'; + sliderR.style.display = 'block'; + this.setUnitR(this.unitR); + this.updateRadius(); + } + + if (value === false) { + unitW.container.style.display = 'block'; + unitH.container.style.display = 'block'; + unitR.container.style.display = 'none'; + sliderW.style.display = 'block'; + sliderH.style.display = 'block'; + sliderR.style.display = 'none'; + this.setUnitX(this.unitX); + this.setUnitY(this.unitY); + this.updateWidth(); + this.updateHeight(); + } + + this.updateBorderRadius(); + + }.bind(this)); + + this.updateBorderRadius(); + } + + RadiusContainer.prototype.updateWidth = function updateWidth() { + this.node.style.width = this.width + units[this.unitX]; + var value = Math.round(this.width / 2); + InputSliderManager.setValue(this.topic + '-w', value, false); + } + + RadiusContainer.prototype.updateHeight = function updateHeight() { + this.node.style.height = this.height + units[this.unitY]; + var value = Math.round(this.height / 2); + InputSliderManager.setValue(this.topic + '-h', value, false); + } + + RadiusContainer.prototype.updateRadius = function updateRadius() { + var value = Math.round(this.size / 2); + this.node.style.width = this.size + units[this.unitR]; + this.node.style.height = this.size + units[this.unitR]; + InputSliderManager.setValue(this.topic, value, false); + } + + RadiusContainer.prototype.setWidth = function setWidth(value) { + this.radius.style.display = 'block'; + this.width = 2 * value; + this.node.style.width = this.width + units[this.unitX]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setHeight = function setHeight(value) { + this.radius.style.display = 'block'; + this.height = 2 * value; + this.node.style.height = this.height + units[this.unitY]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setRadius = function setRadius(value) { + this.radius.style.display = 'block'; + this.size = 2 * value; + this.node.style.width = this.size + units[this.unitR]; + this.node.style.height = this.size + units[this.unitR]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setUnitX = function setUnitX(value) { + this.unitX = value; + if (this.unitX === 0) this.maxW = 2 * subject.clientWidth; + if (this.unitX === 1) this.maxW = 200; + InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]); + InputSliderManager.setMax(this.topic + '-w', this.maxW / 2); + } + + RadiusContainer.prototype.setUnitY = function setUnitY(value) { + this.unitY = value; + if (this.unitY === 0) this.maxH = 2 * subject.clientHeight; + if (this.unitY === 1) this.maxH = 200; + InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]); + InputSliderManager.setMax(this.topic + '-h', this.maxH / 2); + } + + RadiusContainer.prototype.setUnitR = function setUnitR(value) { + this.unitR = value; + + if (this.unitR === 0) + this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth); + + if (this.unitR === 1) + this.maxR = 200; + + InputSliderManager.setUnit(this.topic, units[this.unitR]); + InputSliderManager.setMax(this.topic, this.maxR / 2); + } + + RadiusContainer.prototype.updateUnits = function updateUnits(unit) { + if (this.rounded) { + this.setUnitR(this.unitR); + return; + } + + if (unit === 0) + this.setUnitX(this.unitX); + + if (unit === 1) + this.setUnitY(this.unitY); + } + + RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () { + + if (this.rounded === true) { + var unit = units[this.unitR]; + var value = Math.round(this.size / 2); + return value + unit; + } + + var unitX = units[this.unitX]; + var unitY = units[this.unitY]; + var valueX = Math.round(this.width / 2); + var valueY = Math.round(this.height / 2); + + if (valueX === valueY && this.unitX === this.unitY) + return valueX + unitX; + + return valueX + unitX + ' ' + valueY + unitY; + } + + RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () { + var radius = this.composeBorderRadius(); + var corner = 0; + + if (this.topic === 'top-left') { + subject.style.borderTopLeftRadius = radius; + corner = 0; + } + + if (this.topic === 'top-right') { + subject.style.borderTopRightRadius = radius; + corner = 1; + } + + if (this.topic === 'bottom-right') { + subject.style.borderBottomRightRadius = radius; + corner = 2; + } + + if (this.topic === 'bottom-left') { + subject.style.borderBottomLeftRadius = radius; + corner = 3; + } + + Tool.updateOutput(corner, radius); + } + + RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) { + + if (this.rounded === true) { + this.size += this.resizeX * deltaX + this.resizeY * deltaY; + if (this.size < 0) this.size = 0; + if (this.size > this.maxR) this.size = this.maxR; + this.updateRadius(); + this.updateBorderRadius(); + return; + } + + if (deltaX) { + this.width += this.resizeX * deltaX; + if (this.width < 0) this.width = 0; + if (this.width > this.maxW) this.width = this.maxW; + this.updateWidth(); + } + + if (deltaY) { + this.height += this.resizeY * deltaY; + if (this.height < 0) this.height = 0; + if (this.height > this.maxH) this.height = this.maxH; + this.updateHeight(); + } + + if (deltaX || deltaY) + this.updateBorderRadius(); + } + + + /** + * Tool Manager + */ + var Tool = (function Tool() { + var preview; + var preview_ui; + var radius_containers = []; + var border_width = 3; + var borders1 = [null, null, null, null]; + var borders2 = [0, 0, 0, 0]; + + var updateUIWidth = function updateUIWidth(value) { + var pwidth = subject.parentElement.clientWidth; + var left = (pwidth - value) / 2; + subject.style.width = value + "px"; + + for (var i = 0; i < 4; i++) + radius_containers[i].updateUnits(0); + } + + var updateUIHeight = function updateUIHeight(value) { + var pheight = subject.parentElement.clientHeight; + var top = (pheight - value) / 2; + subject.style.height = value + "px"; + subject.style.top = top - border_width + "px"; + + for (var i = 0; i < 4; i++) + radius_containers[i].updateUnits(1); + } + + var updatePreviewUIWidth = function updatePreviewUIWidth() { + var p = subject.parentElement.clientWidth; + var v = preview_ui.clientWidth; + console.log(p, v, (p - v ) / 2); + preview_ui.style.left = (p - v) / 2 + "px" ; + } + + var updatePreviewUIHeight = function updatePreviewUIHeight() { + var p = subject.parentElement.clientHeight; + var v = preview_ui.clientHeight; + console.log(p, v, (p - v ) / 2); + preview_ui.style.top = (p - v) / 2 + "px" ; + } + + var updateOutput = function updateOutput(corner, radius) { + var values = radius.split(" "); + + borders1[corner] = values[0]; + borders2[corner] = values[0]; + + if (values.length === 2) + borders2[corner] = values[1]; + + var border_1_value = borders1.join(" "); + var border_2_value = borders2.join(" "); + var border_radius = 'border-radius: ' + border_1_value; + + if (border_2_value !== border_1_value) + border_radius += ' / ' + border_2_value; + + border_radius += ';'; + output.textContent = border_radius; + } + + var init = function init() { + preview = getElemById("preview"); + subject = getElemById("subject"); + output = getElemById("output"); + preview_ui = getElemById("radius-ui-sliders"); + + var elem = document.querySelectorAll('.radius-container'); + var size = elem.length; + for (var i = 0; i < size; i++) + radius_containers[i] = new RadiusContainer(elem[i]); + + InputSliderManager.subscribe("width", updateUIWidth); + InputSliderManager.subscribe("height", updateUIHeight); + + InputSliderManager.setValue("width", subject.clientWidth); + InputSliderManager.setValue("height", subject.clientHeight); + } + + return { + init : init, + updateOutput : updateOutput + } + + })(); + + /** + * Init Tool + */ + var init = function init() { + ButtonManager.init(); + InputSliderManager.init(); + PreviewMouseTracking.init("preview"); + Tool.init(); + } + + return { + init : init + } + +})(); + + +</code></pre> +</div> + +<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p> + +<p> </p> diff --git a/files/hu/web/css/tools/index.html b/files/hu/web/css/tools/index.html new file mode 100644 index 0000000000..12b96335ce --- /dev/null +++ b/files/hu/web/css/tools/index.html @@ -0,0 +1,18 @@ +--- +title: Tools +slug: Web/CSS/Tools +tags: + - CSS + - NeedsContent + - NeedsTranslation + - TopicStub +translation_of: Web/CSS/Tools +--- +<div> + {{Draft}}</div> +<p>CSS offers a number of powerful features that can be tricky to use, or have a number of parameters that it's helpful to be able to visualize while you work. This page offers links to a number of useful tools that will help you build the CSS to style your content using these features.</p> +<p>{{LandingPageListSubpages}}</p> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li> +</ul> diff --git a/files/hu/web/guide/api/index.html b/files/hu/web/guide/api/index.html new file mode 100644 index 0000000000..950affd971 --- /dev/null +++ b/files/hu/web/guide/api/index.html @@ -0,0 +1,25 @@ +--- +title: Guide to Web APIs +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide/API +--- +<p>Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.</p> +<h2 id="Web_APIs_from_A_to_Z">Web APIs from A to Z</h2> + +<p>{{ListGroups}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li> + <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li> + <li><a href="/en-US/docs/Learn">Learning web development</a></li> +</ul> diff --git a/files/hu/web/guide/grafika/index.html b/files/hu/web/guide/grafika/index.html new file mode 100644 index 0000000000..c9c2880069 --- /dev/null +++ b/files/hu/web/guide/grafika/index.html @@ -0,0 +1,48 @@ +--- +title: Grafikák az interneten +slug: Web/Guide/Grafika +tags: + - 2D + - 3D + - Canvas + - Grafika + - HTML5 + - SVG + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +<p><span class="seoSummary">Gyakran használunk különféle grafikákat a weboldalakon, illetve alkalmazásokban.</span> Statikus képek megjelenítésére egyszerűen használható az {{HTMLElement("img")}} elem, vagy az adott képet beállíthatjuk egy HTML elem hátterének is a {{cssxref("background-image")}} tulajdonság segítségével. Ugyanakkor <a href="/en-US/docs/Web/JavaScript">JavaScript</a> használatával bármikor készíthető új kép, vagy manipulálható egy meglévő. Az alábbi útmutatók segítséget nyújtanak a különféle grafikák használatában.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="2D_Grafika">2D Grafika</h2> + +<dl> + <dt><a href="/hu/docs/HTML/Canvas">Canvas</a></dt> + <dd>A {{HTMLElement("canvas")}} elemre API-n keresztül 2D-s grafikák rajzolhatók JavaScript használatával.</dd> + <dt><a href="/hu/docs/Web/SVG">SVG</a></dt> + <dd>A Scalable Vector Graphics (SVG) vonalak, görbék és más geometriai alakzatok használatával rajzolja ki a kívánt képet. A vektorok használatával olyan képek készíthetők, amelyek bármilyen méretre nagyíthatóak minőségvesztés és torzulás nélkül.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Összes megtekintése...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="3D_Grafika">3D Grafika</h2> + +<dl> + <dt><a href="/hu/docs/Web/WebGL">WebGL</a></dt> + <dd>Útmutató a WebGL használatához, a webes 3D grafikus API-hoz. Ez a technológia lehetővé teszi a szabványos OpenGL ES használatát a webes tartalomban.</dd> +</dl> + +<h2 id="Videó">Videó</h2> + +<dl> + <dt><a href="/hu/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">HTML5 audió és videó használata</a></dt> + <dd>Videó és / vagy hang beágyazása egy weboldalra és a lejátszás vezérlése.</dd> + <dt><a href="/hu/docs/WebRTC">WebRTC</a></dt> + <dd>A WebRTC elnevezésben az RTC a "Real-Time Communications" rövidítése. Ez a technológia teszi lehetővé az audio / video streamelést, valamint az adatok megosztását a böngészőkliensek (peerek) között.</dd> +</dl> +</div> +</div> diff --git a/files/hu/web/guide/index.html b/files/hu/web/guide/index.html new file mode 100644 index 0000000000..415bd14d23 --- /dev/null +++ b/files/hu/web/guide/index.html @@ -0,0 +1,27 @@ +--- +title: Web developer guide +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +<p>These articles provide how-to information to help you make use of specific technologies and APIs.</p> +<div class="note"> + <p><strong>Note:</strong> This page is going to be a mess for a little while until we finish migrating content. Our apologies!</p> +</div> +<div> + {{LandingPageListSubpages}}</div> +<dl> + <dt> + <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> + <dd> + JavaScript is the powerful scripting language used to create applications for the Web.</dd> +</dl> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li> +</ul> diff --git a/files/hu/web/html/element/article/index.html b/files/hu/web/html/element/article/index.html new file mode 100644 index 0000000000..025121f8e8 --- /dev/null +++ b/files/hu/web/html/element/article/index.html @@ -0,0 +1,133 @@ +--- +title: '<article>: The Article Contents element' +slug: Web/HTML/Element/article +translation_of: Web/HTML/Element/article +--- +<p>{{HTMLRef}}</p> + +<p>A <strong>HTML <code><article></code> elem</strong> önálló egység egy dokumentumon, egy lapon, egy alkalmazáson, vagy egy oldalon belül, melynek célja a tartalom független megoszthatósága vagy újrafelhasználhatósága (lásd például a hírügynökségeknél). Ilyen például egy fórum bejegyzés, magazin - vagy újságcikk, illetve blogbejegyzés.</p> + +<table class="properties" style="height: 414px; width: 824px;"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Tartalmi kategóriák</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Folytatólagos (flow) tartalom</a>, szakaszoló tartalom, megfogható tartalom.</td> + </tr> + <tr> + <th scope="row">Megengedett tartalom</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Folytatólagos (flow) tartalom</a>.</td> + </tr> + <tr> + <th scope="row">Tag kihagyás</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Megengedett szülők</th> + <td>Bármilyen elem, ami megengedi a <a href="/en-US/docs/HTML/Content_categories#Flow_content">folytatólagos tartalmat</a>. Megjegyzendő, hogy egy <code><article></code> elem nem lehet egy {{HTMLElement("address")}} elem leszármazottja.</td> + </tr> + <tr> + <th scope="row">Megengedett ARIA szerepek</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td> + </tr> + <tr> + <th scope="row">DOM interfész</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribútumok">Attribútumok</h2> + +<p>Ez az elem csak a <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globális attribútumokat tartalmazza</a>.</p> + +<h2 id="Megjegyzések_a_használathoz">Megjegyzések a használathoz</h2> + +<ul> + <li>Minden <code><article></code> elemet illene azonosítani egy belőle származtatott cím (heading) elemmel (<a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><code><h1></code>-<code><h6></code></a> elemek).</li> + <li>Beágyazott <code><article></code> elem esetén, a belső cikk a külsőhöz tartozik. Példa lehet erre, ha a hozzászólások <code><article></code> elemekként vannak beágyazva egy blogbejegyzéshez, mely szintén <code><article></code> elemként jelenik meg.</li> + <li>Egy <code><article></code> elem szerzői adatait a {{HTMLElement("address")}} elemmel lehet megadni, de a beágyazott cikkek szerzőit külön is meg kell adni.</li> + <li>Egy <code><article></code> elem publikálási idejét a {{HTMLElement("time")}} elem {{htmlattrxref("datetime", "time")}} attribútumával lehet megadni. <em>Megjegyzendő, hogy a {{HTMLElement("time")}} elem {{htmlattrxref("pubdate", "time")}} attribútuma már nem része a W3C HTML 5 szabványnak.</em></li> +</ul> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: html"><article class="film_review"> + <header> + <h2>Jurassic Park</h2> + </header> + <section class="main_review"> + <p>A dínók klasszak!</p> + </section> + <section class="user_reviews"> + <article class="user_review"> + <p>Túl félelmetes nekem.</p> + <footer> + <p> + Ekkor: + <time datetime="2015-05-16 19:00">Május 16</time> + Lisa írta. + </p> + </footer> + </article> + <article class="user_review"> + <p>Egyetértek, a dínók a kedvenceim.</p> + <footer> + <p> + Ekkor: + <time datetime="2015-05-17 19:00">Május 17</time> + Tom írta. + </p> + </footer> + </article> + </section> + <footer> + <p> + Ekkor + <time datetime="2015-05-15 19:00">Május 15</time> + Staff írta. + </p> + </footer> +</article> +</pre> + +<h2 id="Specifikációk">Specifikációk</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikáció</th> + <th scope="col">Állapot</th> + <th scope="col">Megjegyzés</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Böngésző_kompatibilitás">Böngésző kompatibilitás</h2> + +<div class="hidden">A kompatibilitási táblázat struktúrált adatokból jön létre ezen a lapon. Ha szeretnél hozzájárulni az adatokhoz, akkor kérjük, hogy töltsd le innen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> és küldj egy pull request-et!</div> + +<p>{{Compat("html.elements.article")}}</p> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li>Egyéb, a szakaszokra osztáshoz kapcsolódó elemek: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Egy HTML5 dokumentum szakaszai és külleme</a></li> +</ul> diff --git a/files/hu/web/html/element/br/index.html b/files/hu/web/html/element/br/index.html new file mode 100644 index 0000000000..fe45867643 --- /dev/null +++ b/files/hu/web/html/element/br/index.html @@ -0,0 +1,136 @@ +--- +title: <br> +slug: Web/HTML/Element/br +translation_of: Web/HTML/Element/br +--- +<h2 id="Summary" name="Summary">Összefoglalás</h2> + +<p>A <strong>HTML <code><br></code> elem</strong> (vagy <em>HTML sortörés elem</em>) egy sortörést hoz létre a szövegben (kocsi-vissza). Hasznos versek és olyan címek írásakor, ahol a sorok felosztása fontos.</p> + +<p>Ne használja a <code><br></code> elemet a szöveg sorai között lévő térköz növelésére. Használja a <a href="/hu/docs/CSS" title="CSS">CSS</a> {{cssxref('margin')}} tulajdonságot vagy a {{HTMLElement("p")}} elemet.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Tartalom kategóriák</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Folyam tartalom</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">kifejezés tartalom</a>.</li> + <li><dfn>Engedélyezett tartalom</dfn> Semmi, ez egy üres elem.</li> + <li><dfn>Címke elhagyás</dfn> Lennie kell kezdő címkének és tilos a záró címke. Az XHTML dokumentumokban így írja ezt az elemet: <code><br /></code>.</li> + <li><dfn>Engedélyezett szülő elemek</dfn> Bármely elem, amely elfogadja a <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">kifejezés tartalmat</a>.</li> + <li><dfn>DOM felület</dfn> {{domxref("HTMLBRElement")}}</li> +</ul> + +<h2 id="Attributes" name="Attributes">Attribútumok</h2> + +<p><span style="line-height: 21px;">Ez az elem a </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globális attribútumokkal</a><span style="line-height: 21px;"> rendelkezik.</span></p> + +<dl> + <dt>{{htmlattrdef("clear")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Azt jelzi, hogy hol kezdődjön a következő sor a törés után. + <div class="note"> + <p><strong>Használati megjegyzés: </strong>Ez az attribútum elavult a {{HTMLVersionInline(5)}} óta és <strong>a szerzők nem használhatják</strong>. Használja helyette a CSS {{CSSxref('clear')}} tulajdonságot.</p> + </div> + </dd> +</dl> + +<h2 id="Example" name="Example">Példa</h2> + +<pre class="brush: html">Mozilla Foundation<br> +1981 Landings Drive<br> +Building K<br> +Mountain View, CA 94043-0801<br> +USA +</pre> + +<p>A fenti HTML kimenete:</p> + +<p>Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA</p> + +<h2 id="Specifications" name="Specifications">Specifikációk</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikáció</th> + <th scope="col">Állapot</th> + <th scope="col">Megjegyzés</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-br-element.html#the-b-element', '<br>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Böngésző kompatibilitás</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Szolgáltatás</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Alap támogatás</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Szolgáltatás</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Alap támogatás</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Lásd még</h2> + +<ul> + <li>{{HTMLElement("address")}} elem</li> + <li>{{HTMLElement("p")}} elem</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/hu/web/html/element/index.html b/files/hu/web/html/element/index.html new file mode 100644 index 0000000000..7711b85207 --- /dev/null +++ b/files/hu/web/html/element/index.html @@ -0,0 +1,213 @@ +--- +title: HTML elements reference +slug: Web/HTML/Element +tags: + - HTML + - 'HTML:Element Reference' + - NeedsTranslation + - TopicStub +translation_of: Web/HTML/Element +--- +<p>This HTML reference lists all <strong>HTML elements</strong>, defined in HTML5 or in a previous specification. When enclosed within angle brackets, they form <em>HTML tags</em>: <code><elementname>.</code> Elements are entities specifying how HTML documents should be built, and what kind of content should be placed in what part of an <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a> document.</p> +<p>This page lists all standard HTML5 tags, but also older, obsolete and deprecated ones, as well as non-standard ones that browsers may support. Elements that were introduced in <a href="/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a> are often referred as the new HTML5 elements, even though the other standard elements also are valid in HTML5.</p> +<p>In an HTML document, an element is defined by a <em>starting tag</em>. If the element contains other content, it ends with a <em>closing tag</em>, where the element name is preceded by a forward slash: <code></elementname></code>. Some elements don't need to be closed, such as image elements. These are known as <em>void</em> elements. HTML documents contain a tree of these elements. Each is named to represent what it does. For example, the <code><title></code> element represents the title of the document. Below is an alphabetical list of the HTML Elements.</p> +<div class="index widgeted"> + <span id="A">A</span> + <ul> + <li>{{ HTMLElement("a") }}</li> + <li>{{ HTMLElement("abbr") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("acronym") }}</s></li> + <li>{{ HTMLElement("address") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("applet") }}</s></li> + <li>{{ HTMLElement("area") }}</li> + <li class="html5">{{ HTMLElement("article") }}</li> + <li class="html5">{{ HTMLElement("aside") }}</li> + <li class="html5">{{ HTMLElement("audio") }}</li> + </ul> + <span id="B">B</span> + <ul> + <li>{{ HTMLElement("b") }}</li> + <li>{{ HTMLElement("base") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("basefont") }}</s></li> + <li class="html5">{{ HTMLElement("bdi") }}</li> + <li>{{ HTMLElement("bdo") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("bgsound") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("big") }}</s></li> + <li><s class="nonStdElement">{{ HTMLElement("blink") }}</s></li> + <li>{{ HTMLElement("blockquote") }}</li> + <li>{{ HTMLElement("body") }}</li> + <li>{{ HTMLElement("br") }}</li> + <li>{{ HTMLElement("button") }}</li> + </ul> + <span id="C">C</span> + <ul> + <li class="html5">{{ HTMLElement("canvas") }}</li> + <li>{{ HTMLElement("caption") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("center") }}</s></li> + <li>{{ HTMLElement("cite") }}</li> + <li>{{ HTMLElement("code") }}</li> + <li>{{ HTMLElement("col") }}</li> + <li>{{ HTMLElement("colgroup") }}</li> + <li class="html5">{{ HTMLElement("command") }}</li> + </ul> + <span id="D">D</span> + <ul> + <li class="html5">{{ HTMLElement("data") }}</li> + <li class="html5">{{ HTMLElement("datalist") }}</li> + <li>{{ HTMLElement("dd") }}</li> + <li>{{ HTMLElement("del") }}</li> + <li class="html5">{{ HTMLElement("details") }}</li> + <li>{{ HTMLElement("dfn") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("dir") }}</s></li> + <li>{{ HTMLElement("div") }}</li> + <li>{{ HTMLElement("dl") }}</li> + <li>{{ HTMLElement("dt") }}</li> + </ul> + <span id="E">E</span> + <ul> + <li>{{ HTMLElement("em") }}</li> + <li class="html5">{{ HTMLElement("embed") }}</li> + </ul> + <span id="F">F</span> + <ul> + <li>{{ HTMLElement("fieldset") }}</li> + <li class="html5">{{ HTMLElement("figcaption") }}</li> + <li class="html5">{{ HTMLElement("figure") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("font") }}</s></li> + <li class="html5">{{ HTMLElement("footer") }}</li> + <li>{{ HTMLElement("form") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("frame") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("frameset") }}</s></li> + </ul> + <span id="G">G H</span> + <ul> + <li>{{ HTMLElement("h1") }}</li> + <li>{{ HTMLElement("h2") }}</li> + <li>{{ HTMLElement("h3") }}</li> + <li>{{ HTMLElement("h4") }}</li> + <li>{{ HTMLElement("h5") }}</li> + <li>{{ HTMLElement("h6") }}</li> + <li>{{ HTMLElement("head") }}</li> + <li class="html5">{{ HTMLElement("header") }}</li> + <li class="html5">{{ HTMLElement("hgroup") }}</li> + <li>{{ HTMLElement("hr") }}</li> + <li>{{ HTMLElement("html") }}</li> + </ul> + <span id="I">I</span> + <ul> + <li>{{ HTMLElement("i") }}</li> + <li>{{ HTMLElement("iframe") }}</li> + <li>{{ HTMLElement("img") }}</li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("ins") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("isindex") }}</s></li> + </ul> + <span id="J">J K</span> + <ul> + <li>{{ HTMLElement("kbd") }}</li> + <li class="html5">{{ HTMLElement("keygen") }}</li> + </ul> + <span id="L">L</span> + <ul> + <li>{{ HTMLElement("label") }}</li> + <li>{{ HTMLElement("legend") }}</li> + <li>{{ HTMLElement("li") }}</li> + <li>{{ HTMLElement("link") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("listing") }}</s></li> + </ul> + <span id="M">M</span> + <ul> + <li class="html5">{{HTMLElement("main")}}</li> + <li>{{ HTMLElement("map") }}</li> + <li class="html5">{{ HTMLElement("mark") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("marquee") }}</s></li> + <li class="html5">{{ HTMLElement("menu") }}</li> + <li>{{ HTMLElement("meta") }}</li> + <li class="html5">{{ HTMLElement("meter") }}</li> + </ul> + <span id="N">N</span> + <ul> + <li class="html5">{{ HTMLElement("nav") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("nobr") }}</s></li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("noframes") }}</s></li> + <li>{{ HTMLElement("noscript") }}</li> + </ul> + <span id="O">O</span> + <ul> + <li>{{ HTMLElement("object") }}</li> + <li>{{ HTMLElement("ol") }}</li> + <li>{{ HTMLElement("optgroup") }}</li> + <li>{{ HTMLElement("option") }}</li> + <li class="html5">{{ HTMLElement("output") }}</li> + </ul> + <span id="P">P</span> + <ul> + <li>{{ HTMLElement("p") }}</li> + <li>{{ HTMLElement("param") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("plaintext") }}</s></li> + <li>{{ HTMLElement("pre") }}</li> + <li class="html5">{{ HTMLElement("progress") }}</li> + </ul> + <span id="Q">Q</span> + <ul> + <li>{{ HTMLElement("q") }}</li> + </ul> + <span id="R">R</span> + <ul> + <li class="html5">{{ HTMLElement("rp") }}</li> + <li class="html5">{{ HTMLElement("rt") }}</li> + <li class="html5">{{ HTMLElement("ruby") }}</li> + </ul> + <span id="S">S</span> + <ul> + <li>{{ HTMLElement("s") }}</li> + <li>{{ HTMLElement("samp") }}</li> + <li>{{ HTMLElement("script") }}</li> + <li class="html5">{{ HTMLElement("section") }}</li> + <li>{{ HTMLElement("select") }}</li> + <li>{{ HTMLElement("small") }}</li> + <li class="html5">{{ HTMLElement("source") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("spacer") }}</s></li> + <li>{{ HTMLElement("span") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("strike") }}</s></li> + <li>{{ HTMLElement("strong") }}</li> + <li>{{ HTMLElement("style") }}</li> + <li>{{ HTMLElement("sub") }}</li> + <li class="html5">{{ HTMLElement("summary") }}</li> + <li>{{ HTMLElement("sup") }}</li> + </ul> + <span id="T">T</span> + <ul> + <li>{{ HTMLElement("table") }}</li> + <li>{{ HTMLElement("tbody") }}</li> + <li>{{ HTMLElement("td") }}</li> + <li>{{ HTMLElement("textarea") }}</li> + <li>{{ HTMLElement("tfoot") }}</li> + <li>{{ HTMLElement("th") }}</li> + <li>{{ HTMLElement("thead") }}</li> + <li class="html5">{{ HTMLElement("time") }}</li> + <li>{{ HTMLElement("title") }}</li> + <li>{{ HTMLElement("tr") }}</li> + <li class="html5">{{ HTMLElement("track") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("tt") }}</s></li> + </ul> + <span id="U">U</span> + <ul> + <li>{{ HTMLElement("u") }}</li> + <li>{{ HTMLElement("ul") }}</li> + </ul> + <span id="V">V</span> + <ul> + <li>{{ HTMLElement("var") }}</li> + <li class="html5">{{ HTMLElement("video") }}</li> + </ul> + <span id="W">W</span> + <ul> + <li class="html5">{{ HTMLElement("wbr") }}</li> + </ul> + <span id="X">X Y Z </span> + <ul> + <li><span id="X"><s class="obsoleteElement deprecatedElement">{{ HTMLElement("xmp") }}</s></span></li> + </ul> +</div> +<p>The symbol <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="width: 16px; height: 16px; vertical-align: middle;" title="This element has been added in HTML5"></a> indicates that the element has been added in HTML5. Note that other elements listed here may have been modified or extended by the HTML5 specification. Dimmed elements are non-standard, obsolete, or deprecated; they must not be used in new Web sites, and should gradually be removed from existing ones to avoid unwanted results.</p> diff --git a/files/hu/web/html/element/section/index.html b/files/hu/web/html/element/section/index.html new file mode 100644 index 0000000000..61b3ac6922 --- /dev/null +++ b/files/hu/web/html/element/section/index.html @@ -0,0 +1,128 @@ +--- +title: '<section>: The Generic Section element' +slug: Web/HTML/Element/section +translation_of: Web/HTML/Element/section +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">A <strong>HTML <code><section></code> elem</strong> egy olyan önálló rész egy HTML dokumentumon belül, amelynek nem létezik egy azt jobban leíró szemantikai eleme. </span>Egy szekciónak általában van egy fejléce is.</p> + +<p>Egy navigációs menüt egy {{htmlelement("nav")}} elembe kellene ágyazni, míg például keresési eredmények egy listáját vagy egy térképet és annak vezérlőit egy <code><section></code> elembe, mivel ezeknek nincsenek külön meghatározott, összefoglaló elemei.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Tartalmi kategóriák</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Folytatólagos tartalom</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">Szakaszoló tartalom</a>, megfogható tartalom.</td> + </tr> + <tr> + <th scope="row">Megengedett tartalom</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Folytatólagos tartalom</a>.</td> + </tr> + <tr> + <th scope="row">Tag kihagyás</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Megengedett szülők</th> + <td>Bármilyen elem, ami megengedi a <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">folytatólagos tartalmat</a>. Megjegyzendő, hogy egy {{HTMLElement("section")}} elem nem lehet egy {{HTMLElement("address")}} elem leszármazottja.</td> + </tr> + <tr> + <th scope="row">Megengedett ARIA szerepek</th> + <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td> + </tr> + <tr> + <th scope="row">DOM interfész</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribútumok">Attribútumok</h2> + +<p>Ez az elem csak a <a href="/en-US/docs/Web/HTML/Global_attributes">globális attribútumokat tartalmazza</a>.</p> + +<h2 id="Megjegyzések_a_használathoz">Megjegyzések a használathoz</h2> + +<ul> + <li>Minden <code><section></code> elemet illene azonosítani egy belőle származtatott cím (heading) elemmel ({{HTMLElement('h1')}}-{{HTMLElement('h6')}} elemek).</li> + <li>Ha érdemes egy {{HTMLElement("section")}} elem tartalmát elkülönülten tárolni, illetve megosztani, akkor a {{HTMLElement("article")}} elemet használd helyette.</li> + <li>Ne használd a {{HTMLElement("section")}} elemet általános tárolóként, hiszen arra való a {{HTMLElement("div")}}. Különösen igaz ez akkor, ha a részekre osztásnak csak a külalaknál van szerepe. A gyakorlati szabály az, hogy egy <code><section></code> elem logikailag kellene, hogy tagolja a dokumentumot.</li> +</ul> + +<h2 id="1._példa">1. példa</h2> + +<h3 id="Előtte">Előtte</h3> + +<pre class="brush: html"><div> + <h1>Cím</h1> + <p>Egy rakás klassz dolog</p> +</div></pre> + +<h3 id="Utána">Utána</h3> + +<pre class="brush: html"><section> + <h1>Cím</h1> + <p>Egy rakás klassz dolog</p> +</section> +</pre> + +<h2 id="2._példa">2. példa</h2> + +<h3 id="Előtte_2">Előtte</h3> + +<pre class="brush: html"><div> + <h2>Cím</h2> + <img src="bird.jpg" alt="madár"> +</div> +</pre> + +<h3 id="Utána_2">Utána</h3> + +<pre class="brush: html"><section> + <h2>Cím</h2> + <img src="bird.jpg" alt="madár"> +</section> +</pre> + +<h2 id="Specifikációk">Specifikációk</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikáció</th> + <th scope="col">Állapot</th> + <th scope="col">Tartalom</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Böngésző_kompatibilitás">Böngésző kompatibilitás</h2> + +<div class="hidden">A kompatibilitási táblázat struktúrált adatokból jön létre ezen a lapon. Ha szeretnél hozzájárulni az adatokhoz, akkor kérjük, hogy töltsd le innen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> és küldj egy pull request-et!</div> + +<p>{{Compat("html.elements.section")}}</p> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li>Egyéb, a szakaszokra osztáshoz kapcsolódó elemek : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a class="deki-ns current" href="/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Egy HTML5 dokumentum szakaszai és külleme</a></li> +</ul> diff --git a/files/hu/web/html/index.html b/files/hu/web/html/index.html new file mode 100644 index 0000000000..b2313a0aa3 --- /dev/null +++ b/files/hu/web/html/index.html @@ -0,0 +1,84 @@ +--- +title: HTML +slug: Web/HTML +tags: + - HTML + - HTML5 + - Markup + - Referenciák +translation_of: Web/HTML +--- +<div class="callout-box"> +<div style="font: normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif; text-transform: uppercase;">HTML5 DemÓK</div> + +<p>Egy <a href="https://developer.mozilla.org/en-US/demos/tag/tech:html5">demó kollekció</a>, amely megmutatja a legfrissebb HTML technológiákat működés közben.</p> + +<p><a href="/en-US/docs/HTML/HTML5" title="html5"><img alt="The logo of HTML" class="default" src="/files/3563/HTML5_Logo_128.png" style="height: 128px; width: 128px;"></a></p> +</div> + +<p><strong>HyperText Markup Language (</strong><em><strong>HTML</strong></em><strong>)</strong> a weboldalak és más böngészőben megjelenő dokumentumok elkészítéséhez használt nyelv. Pontosabban, a HTML az a nyelv, amely a dokumentum struktúráját és a szemantikus tartalmát jellemzi. A tartalom olyan HTML elemekkel van megjelölve, mint például: {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, és még sok más.</p> + +<p>HTML egy nemzetközi szabvány, amelynek a leírása a <a href="http://www.w3.org/">World Wide Web Konzorcium</a> és a <a href="http://www.whatwg.org/">WHATWG</a> által karbantartott.</p> + +<p>A HTML egy élő szabvány, amely technikailag folyamatos fejlesztés alatt áll. A jelenlegi HTML szabvány verziójára <strong>HTML5</strong> ként hivatkozunk.</p> + +<div class="cleared topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">HTML Dokumentáció</h2> + +<dl> + <dt><a href="/hu/docs/Learn/HTML/Bevezetes_a_HTML-be">Bevezetés a HTML-be</a></dt> + <dd>Ez az oldal alapvető információkat nyújt a HTML oldalak (dokumentumok) szintaktikájáról és szemantikájáról. Olyan alapvető tájékoztatást, amelyek a HTML dokumentumok fejlesztéséhez szükségesek.</dd> + <dt><a href="/hu/docs/HTML/Element">HTML elemek referenciája</a></dt> + <dd>Részletes leírás a különböző böngészők által támogatott elemekről.</dd> + <dt><a href="/hu/docs/HTML/Attributes" title="HTML/Attributes">HTML attribútum lista</a></dt> + <dd>Tekintsd meg az összes attribútumot és azt, hogy ezek mely elemekhez tartoznak.</dd> + <dt><a href="/hu/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a></dt> + <dd>Ismerd meg az új HTML5 API-kat, elemeket és velük együtt a támogatottságukat.</dd> + <dt><a href="/hu/docs/HTML/Forms" title="HTML/Forms">HTML Form útmutató</a></dt> + <dd>A HTML űrlapok komplex összetevőit képezik a HTML-nek. Ez az útmutató segítséget nyújt leküzdeni őket, a struktúrától a dizájnolásig, illetve a böngésző támogatástól az egyedi kontrolokig.</dd> + <dt><a href="/hu/docs/Web_development/Historical_artifacts_to_avoid" title="HTML/Bad_copy_pasting_habits">Helytelen copy-paste szokások</a></dt> + <dd>A web technológiák nagyon sűrűn a meglévő oldalak forrásainak kimásolásával kerülnek elsajátításra. Azonban, ez gyakran a rossz szokások fenttartásával jár. A következő oldal pár ilyen helytelen berögződést listáz ki és megmutatja, hogy hogyan lehet elérni helyesen az általuk képviselt célt.</dd> + <dt><a href="/hu/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Képek rajzolása Canvas segítségével</a></dt> + <dd>Egy új HTML elem a programozott grafikához. A <canvas>-t képek renderelésére, UI elemekre és számos más egyedi grafikára lehet felhasználni kliens oldalon.</dd> + <dt><a href="/hu/docs/HTML/Tips_for_authoring_fast-loading_HTML_pages" title="HTML/Tips for authoring fast-loading HTML pages">Tippek gyors HTML oldalak authorizálásához</a></dt> + <dd>Egy optimalizált weboldal nem csak több reszponzivitást nyújt a látogatók számára, de a webszervereken és az internet kapcsolaton is csökkenti a terheket.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/HTML" title="Article tagged: HTML">Összes megtekintése...</a></span></p> +</div> + +<div class="section"> +<h2 class="Community" id="Community" name="Community">Segítségkérés a közösségtől</h2> + +<p>HTML-lel kapcsolatos segítségre van szükséged és nem találod a megoldást a dokumentációban?</p> + +<ul> + <li>Egyeztess az erre a célra hivatott Mozilla fórumon</li> + <li>Látogass el a <a href="http://stackoverflow.com/questions/tagged/html">Stack Overflow</a>-ra, az együttműködéssel kiépített és karbantartott Kérdések és Válaszok oldalra, és nézz utána, hogy megválaszolták-e már a kérdésed. Amennyiben még nem, úgy felteheted azt.</li> +</ul> + +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html">Ne feledkezz meg a netikettről...</a></span></p> + +<h2 class="Tools" id="Tools" name="Tools">Eszközök, amelyek megkönnyítik a HTML fejlesztést</h2> + +<ul> + <li>A Firefox jelenlegi verziói beépített <a href="/hu/docs/Tools#Integrated_into_Firefox">Web Fejlesztői eszközöket</a> tartalmaznak, mint például: <a href="/hu/docs/Tools/Web_Console">Web Console</a>, <a href="/hu/docs/Tools/Page_Inspector">Page Inspector</a>, <a href="/hu/docs/Tools/Style_Editor">Style Editor</a>, és <a href="/hu/docs/Tools/Style_Editor">Responsive Design View</a>, amelyek segítséget nyújtanak a fejlesztésben, hibakeresésben és a weboldalak tovább fejlesztésében.</li> + <li>Firefox-nak a <a href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a> kiegészítője egy elterjedt kiegészítője a navigátornak, amely lehetővé teszi a CSS szerkesztését élőben a meglátogatott oldalakon .</li> + <li><a class="external" href="http://validator.w3.org/">HTML Validator</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer Extension</a></li> + <li><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a></li> + <li><a class="external" href="http://prettydiff.com/?html">Pretty Diff</a></li> +</ul> + +<p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Tools" title="Article tagged: HTML:Tools">Összes megtekintése...</a></span></p> +</div> +</div> + +<h2 id="Kapcsolódó_témakörök">Kapcsolódó témakörök</h2> + +<ul> + <li><a href="/hu/docs/CSS" title="CSS">Cascading Style Sheets (CSS)</a> a HTML oldalak dizájnolásához használatos.</li> + <li><a href="/hu/docs/Document_Object_Model_(DOM)" title="Document Object Model (DOM)">Document Object Model (DOM)</a> a HTML dokumentum fa szerkezetének ábrázolásához.</li> + <li><a href="/hu/docs/XHTML" title="XHTML">XHTML</a> a nyelv <a href="/hu/docs/XML" title="XML">XML</a> verziója.</li> +</ul> diff --git a/files/hu/web/index.html b/files/hu/web/index.html new file mode 100644 index 0000000000..2bed7ddf10 --- /dev/null +++ b/files/hu/web/index.html @@ -0,0 +1,53 @@ +--- +title: Web technology for developers +slug: Web +tags: + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web +--- +<p>The open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find links to our Web technology documentation.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Dokumentáció Webfejlesztők számára</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Reference">Web Developer Reference</a></dt> + <dd>A list of all references for Web technologies, including those for HTML, CSS, and so on.</dd> + <dt><a href="/en-US/docs/Web/Guide">Web Developer Guide</a></dt> + <dd>The Web Developer Guide provides useful how-to content to help you actually use Web technologies to do what you want or need to do.</dd> + <dt><a href="/en-US/docs/Web/Tutorials">Tutorials for Web developers</a></dt> + <dd>A list of tutorials to take you step-by-step through learning APIs, technologies, or broad topic areas.</dd> + <dt><a href="/en-US/docs/Web/Apps">Developing Web applications</a></dt> + <dd>Documentation for Web application developers; Web apps are true write-once, deploy anywhere apps for mobile, desktop, and Firefox OS.</dd> + <dt><a href="/en-US/docs/Code_snippets">Code snippets</a></dt> + <dd>This is a quick list of useful code snippets (small code samples) available for developers of extensions for the various Mozilla applications. Many of these samples can also be used in <a href="/en-US/docs/XULRunner">XULRunner</a> applications, as well as in actual Mozilla code itself.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Web">View All...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Webtechnológiai hivatkozások</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Reference/API">Web APIs</a></dt> + <dd>Reference material for each of the individual APIs that comprise the Web's powerful scriptability, including the <a href="/en-US/docs/DOM">DOM</a> and all of the related APIs and interfaces you can use to build Web content and apps.</dd> + <dt><a href="/en-US/docs/Web/HTML">HTML</a></dt> + <dd>HyperText Markup Language is the language used to describe and define the content of a Web page.</dd> + <dt><a href="/en-US/docs/Web/CSS">CSS</a></dt> + <dd>Cascading Style Sheets are used to describe the appearance of Web content.</dd> + <dt><a href="/en-US/docs/SVG">SVG</a></dt> + <dd>Scalable Vector Graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.</dd> + <dt><a href="/en-US/docs/Web/MathML">MathML</a></dt> + <dd>The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.</dd> + <dt><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML {{HTMLElement("canvas")}} elements</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/hu/web/javascript/a_javascript_ujboli_bemutatasa/index.html b/files/hu/web/javascript/a_javascript_ujboli_bemutatasa/index.html new file mode 100644 index 0000000000..89192fcbf4 --- /dev/null +++ b/files/hu/web/javascript/a_javascript_ujboli_bemutatasa/index.html @@ -0,0 +1,948 @@ +--- +title: A JavaScript újbóli bemutatása +slug: Web/JavaScript/a_javascript_ujboli_bemutatasa +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +<div>{{jsSidebar}}</div> + +<p>Hogy miért újboli bemutatása? Azért, mert a {{Glossary("JavaScript")}} <a href="http://javascript.crockford.com/javascript.html">a világ legfélreértetteb programozási nyelveként ismert</a>. Gyakran lebecsülik mint egyfajta játékszert, de az egyszerűsége mellett, erőteljes nyelvi eszközökkel rendelkezik. A JavaScript -et manapság rengeteg fontos alkalmazásban használják, ami azt mutatja, hogy ennek a technológiának a tudása minden web - és mobilalkalmazás fejlesztőnek egy fontos tulajdonsága.</p> + +<p>Érdemes a nyelv történetének áttekintésével kezdeni. A JavaScript -et Brendan Eich tervezte 1995 -ben, aki a Netscape - nél volt mérnök. A JavaScript először a Netscape 2 -vel lett kiadva 1996 elején. A nyelvet eredetileg LiveScript - nek nevezték, de egy szerencsétlen marketingdöntés miatt átnevezték, amivel a Sun Microsystems nyelvének, a Java -nak a népszerűségét akarták a hasznukra fordítani, noha a két nyelvben kevés közös dolog volt. Ez máig az összezavarodottság egyik forrása.</p> + +<p>Néhány hónappal később Microsoft bemutatta a JScript - et az Internet Explorer 3 kiadásakor. Ez egy nagymértékben JavaScript kompatibilis nyelv volt. Néhány hónap elteltével a Netscape átadta a JavaScript - et az <a class="external" href="http://www.ecma-international.org/">Ecma International</a> - nek, és ez az európai szabványosító szervezet még ebben az évben nyilvánosságra hozta az {{Glossary("ECMAScript")}} első verzióját . A szabvány 1999 - ben jelentős frissitést kapott a <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a> -al, és azóta nagyon stabil. A szabvány negyedik kiadása a politikai nézeteltérések, és a nyelv növekvő komplexitása miatt megszűnt. A negyedik verzió sok eleme képezte alapját a szabvány ötödik, és hatodik kiadásának, amiket 2009. decemberében, valamint 2015 Júniusában adtak ki.</p> + +<div class="note"> +<p>Az ismertség miatt innentől az ECMAScript helyett a JavaScript megnevezést használjuk.</p> +</div> + +<p>A legtöbb programozásinyelvtől eltérően, a JavaScript - ben nincs terv a standard ki - és bemenetre. A JavaScript arra lett tervezve, hogy egy szkriptként fusson egy hoszt környezetben, így ezen környezet mechanizmusainak feladata a külvilággal való kapcsolat biztosítása. A leggyakrabban erre használt hoszt környezet a böngésző, ám sok más alkalmazásban is található értelmező, mint a <a href="http://nodejs.org/">Node.js</a>, NoSQL adatbázisok mint a nyílt forrású <a href="http://couchdb.apache.org/">Apache CouchDB</a>, beágyazott rendszerek, teljes asztali környezetek mint a <a href="http://www.gnome.org/">GNOME</a> (A GNU/Linux operációs rendszerek számára az egyik a legnépszerűbb grafikus felhasználói interfészek közül), és még sok más.</p> + +<h2 id="Áttekintés">Áttekintés</h2> + +<p>A JavaScript multi-paradigmájú nyelv, típusokkal, operátorokkal, beépített standard objektumokkal, és metódusokkal. A szintaxisa a Java és a C nyelvekel alapul — sok struktúra lett ezekből a nyelvekből a JavaScript - be átvéve. A JavaScript osztályok helyett prototípus objektumokkal támogatja az objektumorintáltságot (többet erről <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain" title="prototypical inheritance">prototypical inheritance</a> és ES2015 <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a>). A JavaScript a funkcionális programozást is támogatja — a függvények objektumok, lehetővé teszik a végrehajtható kód tárolását, és a függvények, mint minden objektum, továbbadhatóak.</p> + +<p>Kezdjük a nyelv éíptőköveinek szemlélésével. A JavaScript programok értékeket manipulálnak, és minden értéknek van egy meghatározott típusa. JavaScript típusok a:</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Symbol")}} (new in ES2015)</li> +</ul> + +<p>... ó, és {{jsxref("undefined")}} és a {{jsxref("null")}}, amik egy kissé speciálisak, az {{jsxref("Array")}}, ami egy különleges fajtájú objektum, a {{jsxref("Date")}} és a {{jsxref("RegExp")}}, amiket csak úgy kapsz. Ha pontosak akarunk lenni, a függvények is egy fajta objektumok. Tehát a típusok felsorolása inkább így néz ki:</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}} (Az ES2015 - ben új)</li> + <li>{{jsxref("Object")}} + <ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Date")}}</li> + <li>{{jsxref("RegExp")}}</li> + </ul> + </li> + <li>{{jsxref("null")}}</li> + <li>{{jsxref("undefined")}}</li> +</ul> + +<p>és van még néhány előre definiált {{jsxref("Error")}} típus. Az egyszerűség kedvéért most csak az első felsorolásra korlátozódunk.</p> + +<h2 id="Számok">Számok</h2> + +<p>A számok a JavaScript - ben a specifikáció szerint "dupla precíz 64-bit formátumú IEEE 754 értékek". Ennek van néhány érdekes következménye. JavaScript - ben nincs olyasmihez hasonlítható, mint az integer, ami miatt óvatosan kell az aritmetikával bánni, ha a matematikát úgy alkalmazzuk mint a C -ben, vagy Java -ban.</p> + +<p>Figyelj oda olyan dolgokra, mint:</p> + +<pre class="brush: js">0.1 + 0.2 == 0.30000000000000004; +</pre> + +<p>A gyakolatban az integer értékek 32-Bit -es integerként vannak kezelve, és egyes implemetációk még úgy is tárolják őket, amíg egy olyan utasítást kell végrehajtsanak ami egy számra, de nem egy integerre érvényes. Ez például a bitműveleteknél lehet fontos.</p> + +<p>Támogatottak az alapértelmezett <a href="/en-US/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators">aritmetikai operátorok</a>, beleértve az összeadást, kivonást, modulo (maradék), és így tovább. Ezenkívül létezik még egy {{jsxref("Math")}} objektum, ami olyan matematikai funkciókat nyújt, amik fent még nem lettek említve:</p> + +<pre class="brush: js">Math.sin(3.5); +var atmero = 2 * Math.PI * r; +</pre> + +<p>Egy stringet a beépített {{jsxref("Global_Objects/parseInt", "parseInt()")}} funkcióval integerré lehet konvertálni. A funkció megkapja a használt számrendszer alapját, ez a második opcionális paraméter, ami mindig meg kell legyen adva:</p> + +<pre class="brush: js">parseInt('123', 10); // 123 +parseInt('010', 10); // 10 +</pre> + +<p>Régebbi böngészőkön a 0 -val kezdődő sztringek oktális számként értelmeződnek (8 -as alapú), de ez 2013 óta már nincs így. Ha nem vagyunk biztosak a string formátumban, a régebbi böngészők meglepő ereményhez vezethetnek:</p> + +<pre class="brush: js">parseInt('010'); // 8 +parseInt('0x10'); // 16 +</pre> + +<p>Itt látható, hogy a {{jsxref("Global_Objects/parseInt", "parseInt()")}} függvény a 0 előtag miatt az első stringet oktális számként, a második stringet a "0x" előtag miatt hexadecimális számként értelmezi. A <em>hexadecimális szemlélet még mindig megengedett,</em> csak az oktális lett eltávolítva.</p> + +<p>Ha egy bináris számot szeretnél integerré alakítani, egyszerűen a bázist kell megváltoztatni 2 -re.</p> + +<pre class="brush: js">parseInt('11', 2); // 3 +</pre> + +<p>Ezzel a módszerrel lebegőpontos számokat is konvertálhatunk a {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} függvény segítségével. A {{jsxref("Global_Objects/parseInt", "parseInt()")}} függvénnyel ellentétben, a <code>parseFloat()</code> mindig 10 -es bázist használ.</p> + +<p>Az unáris (egy operandusú) <code>+</code> operátor is használható számok konvertálására:</p> + +<pre class="brush: js">+ '42'; // 42 ++ '010'; // 10 ++ '0x10'; // 16 +</pre> + +<p>Ha egy string nem tartalmaz numerikus értékeet, egy speciális érték a {{jsxref("NaN")}} (A "Not a Number" rövidítése) adódik vissza.</p> + +<pre class="brush: js">parseInt('hello', 10); // NaN +</pre> + +<p>A <code>NaN</code> veszélyes: Ha egy matematikai művelet egyik operandusaként használjuk, az eredmény is <code>NaN</code> lesz:</p> + +<pre class="brush: js">NaN + 5; // NaN +</pre> + +<p>A beépített {{jsxref("Global_Objects/isNaN", "isNaN()")}} függvény segítségével lehet megállapítani, hogy egy változó értéke <code>NaN</code> - e:</p> + +<pre class="brush: js">isNaN(NaN); // true +</pre> + +<p>A JavaScript - ben vannak olyan speciális értékek is, mint az {{jsxref("Infinity")}} és a <code>-Infinity</code>:</p> + +<pre class="brush: js"> 1 / 0; // Infinity +-1 / 0; // -Infinity +</pre> + +<p>Az <code>Infinity</code>, <code>-Infinity</code> és <code>NaN</code> értékeket a beépített {{jsxref("Global_Objects/isFinite", "isFinite()")}} függvényekel lehet tesztelni:</p> + +<pre class="brush: js">isFinite(1 / 0); // false +isFinite(-Infinity); // false +isFinite(NaN); // false +</pre> + +<div class="note">A {{jsxref("Global_Objects/parseInt", "parseInt()")}} és a {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} addig olvassák a stringet, amíg nem találnak egy olyan karaktert, ami a számrendszerben nem található, és csak az eddig beolvasott számokat adja vissza értékül. Az unáris "+" viszont egyszerűen <code>NaN</code> értéket ad vissza, ha a string egy nem érvényes karaktert tartalmaz. Próbáld meg értelmezni a konzolban a "10.2abc" stringet, hogy jobban megérthesd a köztük lévő különbségeket.</div> + +<h2 id="Karakterláncok">Karakterláncok</h2> + +<p>A stringek a JavaScript -ben <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode karakterek</a> sorozata. Ez mindenki számára örvendetes lehet, akik több nyelvű szoftvereken dolgoznak. Még pontosabban fogalmazva, a stringek UTF-16 kódegységek sorozata; mindegy egyes egység egy 16-bites számmal van reprezentálva. Minden Unicode karakter egy, vagy két kódegységből áll.</p> + +<p>Egyetlen karakter reprezentálásához egyszerűen egyetlen karaktert használunk.</p> + +<p>Egy string hosszát (kód egységekben), a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length">length</a></code> property -vel (tulajdonság, az objektum tagváltozója) kapjuk meg:</p> + +<pre class="brush: js">'hello'.length; // 5 +</pre> + +<p>Ez az első találkozásunk egy JavaScript objektummal! Említettük már, hogy a stringeket úgy használhatjuk, mint az {{jsxref("Object", "objektumokat", "", 1)}} ? Vannak nekik {{jsxref("String", "metódusaik", "#Methods", 1)}} is, amiknek segítségével megváltoztathatjuk a stringet, és információkat kaphatunk róla:</p> + +<pre class="brush: js">'hello'.charAt(0); // "h" +'hello, world'.replace('world', 'mars'); // "hello, mars" +'hello'.toUpperCase(); // "HELLO" +</pre> + +<h2 id="Egyéb_típusok">Egyéb típusok</h2> + +<p>A JavaScript különbséget tesz a {{jsxref("null")}}, ami egy "nem értéket" reprezentál, (és csak a <code>null</code> kulcsszón keresztül érhető el), és az {{jsxref("undefined")}} között, ami egy <code>undefined</code> típus, és egy nem inicializált értéket jelez, tehát hogy még nem lett a változónak érték adva. A változókról még később szó lesz, de a JavaScript -ben lehet úgy változókat deklarálni, hogy nem rendelünk hozzá értéket. Ha így teszel, a változó típusa <code>undefined</code> lesz. Az <code>undefined</code> egy konstans.</p> + +<p>A JavaScript -nek van egy boolean típusa, <code>true</code> és <code>false</code> lehetséges értékkekkel (mindkettő ezek közül kulcsszó.) Minden érték boolean - é konvertálható a következő szabályok figyelembevételével:</p> + +<ol> + <li><code>false</code>, <code>0</code>, üres stringek (<code>""</code>), <code>NaN</code>, <code>null</code>, és <code>undefined</code> értékekből <code>false</code> lesz.</li> + <li>Minden más értékből <code>true</code> lesz.</li> +</ol> + +<p>A konverzió közvetlenül a <code>Boolean()</code> függvénnyel hajtható végre:</p> + +<pre class="brush: js">Boolean(''); // false +Boolean(234); // true +</pre> + +<p>Viszont ez alig szükséges, mivel a JavaScript automatikusan elvégzi a konverziót,ha boolean értéket vár, mint például az <code>if</code> utasítás esetén (lásd lentebb). Ezen ok miatt gyakran beszélünk "true értékekről" és "false értékekről," ami alatt azt értjük, hogy az értékek <code>true</code> vagy <code>false</code> lesznek, miután Boolean -é lettek átalakítva. Ezek az értékek másképpen "truthy" és "falsy".</p> + +<p>A Boolean műveletek mint például az <code>&&</code> (logikai <em>és</em>), <code>||</code> (logikai <em>vagy</em>), és <code>!</code> (logikai <em>nem</em>) támogatottak (lásd lentebb).</p> + +<h2 id="Változók">Változók</h2> + +<p>JavaScript-ben az új változókat három kulcsszóval lehet deklarálni: <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, vagy <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var" title="/en/JavaScript/Reference/Statements/var">var</a></code>.<br> + <br> + A <strong><code>let</code> </strong>kulcsszóval blokk szintű változókat lehet deklarálni. Az így deklarált változó abból a kód blokkból érhető el, ahol azt definiálták.</p> + +<pre class="brush: js">let a; +let name = 'Simon'; +</pre> + +<p>A következő példa a <code><strong>let</strong></code> kulcsszóval deklarált változó láthatóságát mutatja be.</p> + +<pre class="brush: js">// A myLetVariable itt *NEM* látható. + +for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { + // A myLetVariable csak itt elérhető +} + +// A myLetVariable itt *NEM* látható. + +</pre> + +<p>A <strong><code>const</code> </strong>kulcsszóval olyan változó deklarálható, aminek az értéke nem változik meg. A változó abból a <em>kód blokkból</em> érhető el, amiben deklarálták.</p> + +<pre class="brush: js">const Pi = 3.14; // A Pi változó értékének megadása +Pi = 1; // kivételt fog dobni, mivel egy konstans értéke nem változtatható meg</pre> + +<p><br> + A <strong><code>var</code></strong> a leghasználatosabb deklaratív kulcsszó, nincsenek olyan korlátozásai mint a másik kettőnek. Ennek az az oka, hogy hagyományosan ez volt az egyetlen mód egy változó deklarálására a JavaScriptben. A <strong><code>var</code> </strong>kulcsszóval deklarált változó abban a <em>függvényben</em> érhető el, amiben azt deklarálták.</p> + +<pre class="brush: js">var a; +var name = 'Simon';</pre> + +<p>A következő példa a <code><strong>var</strong></code> kulcsszóval deklarált változó láthatóságát mutatja be.</p> + +<pre class="brush: js">// A myVarVariable itt látható + +for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { + // A myVarVariable látható az egész függvényben +} + +// A myVarVariable itt is látható +</pre> + +<p>Ha egy olyan változót deklarálunk, amihez nem lett érték hozzárendelve, a típusa <code>undefined</code> lesz.</p> + +<p>Egy fontos különbség a JavaScript és más nyelvek között (pl. a Java), hogy a JavaScript-ben a blokkoknak nincsen érvényességi területük (scope), Csak a függvényeknek. Szóval, ha egy <code>var</code> kulcsszóval definiálunk változót (például egy <code>if</code> vezérlőszerkezeten belül), Akkor az az egész függvényben látható lesz. Azonban az ECMAScript 2015-ös verziójától, a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> és <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> kulcsszóval deklarált változók, lehetővé teszik a scope-ok létrehozását.</p> + +<h2 id="Operátorok">Operátorok</h2> + +<p>A JavaScript's numerikus operátorai a <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> és <code>%</code> ami a maradék operátor (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_%28%29">Ami nem ugyanaz, mint a modulo</a>.) Az értékadás az <code>=</code> használatával történik, és létezik összevont értékadás is mint a <code>+=</code> és a <code>-=</code>. Ezek a következőféleképp értelmezendőek:<br> + <code>x = x <em>operator</em> y</code>.</p> + +<pre class="brush: js">x += 5; +x = x + 5; +</pre> + +<p>A <code>++</code> és <code>--</code> operátorokat inkrementálásta and dekrementálásra lehet használni. Ezek használhatóak prefix és postfix operátorokként is.</p> + +<p>A <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="/en/JavaScript/Reference/Operators/String_Operators"><code>+</code> operátor</a> stringek egyesítésére is :</p> + +<pre class="brush: js">'hello' + ' world'; // "hello world" +</pre> + +<p>Ha egy stringet és egy számot (vagy más értéket) összeadunk, először minden string-é konvertálódik. Ez néha problémák forrása:</p> + +<pre class="brush: js">'3' + 4 + 5; // "345" + 3 + 4 + '5'; // "75" +</pre> + +<p>Egy üres string hozzáadása egy értékhez jó módszer arra, hogy az értéket string-é konvertáljuk.</p> + +<p>A JavaScriptben <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en/JavaScript/Reference/Operators/Comparison_Operators">Összehasonlításokat</a> a <code><</code>, <code>></code>, <code><=</code> és <code>>=</code> operátorok használatával lehet elvégezni. Ezek stringek és számok esetén használhatóak. Az egyenlőség egy kicsit bonyolultabb. Az <code>==</code> operátor típuskonverziót kényszerít ki, ami érdekes eredményekhez vezethet:</p> + +<pre class="brush: js">123 == '123'; // true +1 == true; // true +</pre> + +<p>A típuskonverzió elkerüléséhez használjuk a <code>===</code> (teljesen egyenlő) operátort:</p> + +<pre class="brush: js">123 === '123'; // false +1 === true; // false +</pre> + +<p>Léteznek <code>!=</code> és <code>!==</code> operátorok is.</p> + +<p>A JavaScript-ben vannak <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en/JavaScript/Reference/Operators/Bitwise_Operators">bitszintű műveletek</a> is.</p> + +<h2 id="Vezérlő_szerkezetek">Vezérlő szerkezetek</h2> + +<p>A JavaScript hasonló a C nyelvcsalád nyelveihez hasonlóvezérlő szerkezetekkel rendelkezik. Feltételes utasítások az <code>if</code> és <code>else</code> kulcsszavakkal hozhatók létre. Ezek összeláncolhatóak:</p> + +<pre class="brush: js">var name = 'kittens'; +if (name == 'puppies') { + name += ' woof'; +} else if (name == 'kittens') { + name += ' meow'; +} else { + name += '!'; +} +name == 'kittens meow'; +</pre> + +<p>A JavaScript-ben vannak <code>while</code> és <code>do-while</code> ciklusok. Az egyszerű alkalmas egyszerű ciklusok létrehozására; a második olyan ciklusok létrehozására használatos, ahol biztosítani kívánjuk, hogy a ciklus tartalma (ciklusmag) legalább egyszer lefusson:</p> + +<pre class="brush: js">while (true) { + // végtelen ciklus! +} + +var input; +do { + input = get_input(); +} while (inputIsNotValid(input)); +</pre> + +<p>A JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> ciklusa</a> ugyanaz mint a C-ben és Java-ban megszokott: A vezérlőinformációk egyetlen sorban megadhatóak.</p> + +<pre class="brush: js">for (var i = 0; i < 5; i++) { + // ötször fut le +} +</pre> + +<p>A JavaScript-ben van két másik népszerű for ciklus is:<br> + A <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a></p> + +<pre class="brush: js">for (let value of array) { + // value feldolgozása +} +</pre> + +<p>és a <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>:</p> + +<pre class="brush: js">for (let property in object) { + // objektum tulajdonságának feldolgozása +} +</pre> + +<p>A <code>&&</code> és <code>||</code> operátorok a rövidzár logikát alkalmazzák, ami azt jelenti, hogy a második operandus végrehajtása az eslő operandustól függ. Ez hasznos null objektumok ellenőrzésére, mielőtt megpróbálnánk hozzáférni az attributúmaihoz:</p> + +<pre class="brush: js">var name = o && o.getName(); +</pre> + +<p>vagy értékek cachelésére (ha a falsy értékek érvénytelenek):</p> + +<pre class="brush: js">var name = cachedName || (cachedName = getName()); +</pre> + +<p>A JavaScript-ben van egy ternáris operátor, feltételek létrehozásához:</p> + +<pre class="brush: js">var allowed = (age > 18) ? 'yes' : 'no'; +</pre> + +<p>A <code>switch</code> többszörös elágazásakhoz használható egy string vagy egy szám tartalmától függően:</p> + +<pre class="brush: js">switch (action) { + case 'draw': + drawIt(); + break; + case 'eat': + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>Ha nem adunk hozzá <code>break</code> utasítást, a vezérlés átlép a következő <code>case</code> ágra. Ezt ritka esetekben használják — ilyenkor megéri egy kommentet hozzáfűzni, hogy a későbbi hibakeresést megkönnyítse:</p> + +<pre class="brush: js">switch (a) { + case 1: // átlép a következőre + case 2: + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>A <code>default</code> ág nem kötelező. Ha szeretnénk a switch részben, és az case részben is lehetnek utasítások; Az összehasonlítás a kettő között a <code>===</code> operátorral történik:</p> + +<pre class="brush: js">switch (1 + 3) { + case 2 + 2: + yay(); + break; + default: + sosemtortenikmeg(); +} +</pre> + +<h2 id="Objektumok">Objektumok</h2> + +<p>A JavaScript objektumok egyszerű név - érték párokból állnak. Ezek hasonlóak mint a:</p> + +<ul> + <li>Python Szótárak.</li> + <li>Perl és Ruby Hash-ek.</li> + <li>C és C++ Hash táblák.</li> + <li>Java HashMaps .</li> + <li>PHP asszociatív tömbök .</li> +</ul> + +<p>Az a tény, hogy ezt az adatstruktúrát olyan széles körben alkalmazzák, a sokoldalúságát bizonyítja. Mivel a JavaScriptben minden (a tiszta core típusok) egy objektum, úgy természetesen minden JavaScript program egy csomó keresési műveletet végez el a hash-táblákban. Jó hogy ezek ilyen gyorsak!</p> + +<p>A "név" rész az egy JavaScript string, az érték viszont bármilyen JavaScript érték lehet, beleértve más objektumokat is. Ez lehetővé teszi a tetszőlegesen összetett adatstruktúrák létrehozását.</p> + +<p>Egy üres objektum létrehozására két lehetőség van:</p> + +<pre class="brush: js">var obj = new Object(); +</pre> + +<p>és:</p> + +<pre class="brush: js">var obj = {}; +</pre> + +<p>Ezek szemantikailag egyformák; a másodikat object literal szintaxisnak hívják, és elterjedtebb. Ez a szintaxis a magja a JSON formátumnak is.</p> + +<p>Az Object literal szintaxis egy átfogó objektum inicializálására használható:</p> + +<pre class="brush: js">var obj = { + name: 'Carrot', + for: 'Max', // 'for' egy foglalt szó, használjunk '_for' -t helyette. + details: { + color: 'orange', + size: 12 + } +}; +</pre> + +<p>A tulajdonságok elérése összefűzhető:</p> + +<pre class="brush: js">obj.details.color; // orange +obj['details']['size']; // 12 +</pre> + +<p>A kövekező példa egy <code>Person</code> prototípust készít, és ezen prototípusnak egy <code>you</code> nevű példányát.</p> + +<pre class="brush: js">function Person(name, age) { + this.name = name; + this.age = age; +} + +// Define an object +var you = new Person('You', 24); +// We are creating a new person named "You" aged 24. + +</pre> + +<p><strong>Példányosítás után</strong>, egy objektum tulajdonságait két féle képpen lehet elérni:</p> + +<pre class="brush: js">// dot notation +obj.name = 'Simon'; +var name = obj.name; +</pre> + +<p>és...</p> + +<pre class="brush: js">// bracket notation +obj['name'] = 'Simon'; +var name = obj['name']; +// egy változó használható kulcs létrehozására +var user = prompt('what is your key?') +obj[user] = prompt('what is its value?') +</pre> + +<p>Ezek szemantikailag egyformák. A második módszer előnye, hogy a tulajdonság nevét stringként lehet megadni, ami azt jelenti, hogy futási időben dől el. Ám ez a módszer megakadályozza néhány JavaScript motor és minifier optimalizáció végrehajtását. Ez a módszer arra is alkalmazható, hogy olyan tulajdoságokat létrehozhassunk, és elérjünk amik <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords" title="/en/JavaScript/Reference/Reserved_Words">foglalt szavakat</a> használnak.</p> + +<pre class="brush: js">obj.for = 'Simon'; // Syntax error, mert a 'for' egy foglalt szó +obj['for'] = 'Simon'; // működik +</pre> + +<div class="note"> +<p>Az ECMAScript 5-től kezdve, a foglalt szavak is használhatóak az objektumliterálokban. ez azt jelenti, hogy nem kell "idézőjelek kozé" tenni. <a href="http://es5.github.io/#x7.6.1">Lásd ES5 Spec</a>.</p> +</div> + +<p>További információk az objektumokról, és prototípusokról a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a> cikkben olvashatóak. Az obejktumprototípusok, és az objektumprototípus-láncok magyarűzatáhpz lásd az <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a> cikket.</p> + +<div class="note"> +<p>Az ECMAScript 5-től kezdve, az objektumok névpárját (kulcsait) szögletes zárójelek közé tett változóval is lehet használni <code>{[phoneType]: 12345}</code>, nem csak így: <code>var userPhone = {}; userPhone[phoneType] = 12345</code>.</p> +</div> + +<h2 id="Tömbök">Tömbök</h2> + +<p>A tömbök a JavaScriptben az objektumok egy különleges fajtája. Messzemenőkig úgy működnek mint a normális objektumok, (A numerikus tulajdonságok csak a <code>[]</code> szintaxissal érhetőek el) de van egy plusz tulajdonságuk is, a '<code>length</code>'. Ez mindigy egyel több, mint a legmagasabb index a tömbben.</p> + +<p>Egy tömböt a következő képpen lehet létrehozni:</p> + +<pre class="brush: js">var a = new Array(); +a[0] = 'dog'; +a[1] = 'cat'; +a[2] = 'hen'; +a.length; // 3 +</pre> + +<p>Még népszerűbb ezen a módon egy literállal.</p> + +<pre class="brush: js">var a = ['dog', 'cat', 'hen']; +a.length; // 3 +</pre> + +<p>Tartsuk észben, hogy az <code>array.length</code> nem feltétlenül az elemek számát jelenti. Nézzük a következő példát:</p> + +<pre class="brush: js">var a = ['dog', 'cat', 'hen']; +a[100] = 'fox'; +a.length; // 101 +</pre> + +<p>Ne feledjük: a tömb hossza (length) mindig a legmagasabb index + 1 értéket jelenti.</p> + +<p>Ha egy nem létező indexhez próbálunk hozzáférni, akkor <code>undefined</code> értéket kapunk vissza:</p> + +<pre class="brush: js">typeof a[90]; // undefined +</pre> + +<p>A fenti <code>[]</code> -ket és a <code>length</code> tulajdonságot használva, végiglépkedhetünk a tömbön a következő <code>for</code> ciklus segítségével:</p> + +<pre class="brush: js">for (var i = 0; i < a.length; i++) { + // a[i] feldolgozása +} +</pre> + +<p>Az ES2015 óta a fenti módszernek létezik egy egyszerűbb formája is, a <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> ciklus, ami olyan objektumoknál használható, mint a tömbök:</p> + +<pre class="brush:js">for (const currentValue of a) { + // currentValue feldolgozása +}</pre> + +<p>Egy <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="/en/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a> ciklussal is végig lehet lépkedni egy tömbön, ám ez nem a tömb elemein lépked végig, hanem a tömb indexein. Továbbá, ha valaki új tulajdonságokat ad hozzá az <code>Array.prototype</code>-hoz, akkor azokon is egy ilyen ciklus lépkedne végig. Emiatt ez a fajta ciklus nem ajánlott tömbök iterálására.</p> + +<p>Az ECMAScript 5-ben egy másik módszer is adott, hogy végig lépkedjünk egy tömbön, a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a></code>:</p> + +<pre class="brush: js">['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) { + // currentValue vagy array[index] feldolgozása +}); +</pre> + +<p>Ha egy elemt szeretnénk a tömbhöz hozzáadni, egyszerűen így tehetjük meg:</p> + +<pre class="brush: js">a.push(item);</pre> + +<p>Egy tömbnek sok metódusa van. Lásd a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">full documentation for array methods</a> cikket is.</p> + +<table> + <thead> + <tr> + <th scope="col">Method name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>a.toString()</code></td> + <td>Egy stringet ad vissza, amiben minden objektum veszzővel van elválasztva. </td> + </tr> + <tr> + <td><code>a.toLocaleString()</code></td> + <td>Egy stringet ad vissza, amiben minden objektum veszzővel van elválasztva, dátumoknál a helyi idő szerinti formátum</td> + </tr> + <tr> + <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td> + <td>Egy új tömböt ad vissza, a hozzáadott elemekkel együtt.</td> + </tr> + <tr> + <td><code>a.join(sep)</code></td> + <td>Egy stringé alakítja át a tömböt, amiben a <code>sep</code> paraméterben megadottal lesznek az egyes elemek elválasztva</td> + </tr> + <tr> + <td><code>a.pop()</code></td> + <td>Eltávolítja az utolsó elemet, és visszaadja azt.</td> + </tr> + <tr> + <td><code>a.push(item1, ..., itemN)</code></td> + <td>A tömb végére hozzáfűz egy elemet</td> + </tr> + <tr> + <td><code>a.reverse()</code></td> + <td>Megfordítja a tömb sorrendjét.</td> + </tr> + <tr> + <td><code>a.shift()</code></td> + <td>Eltávolítja az első elemet, és visszaadja azt.</td> + </tr> + <tr> + <td><code>a.slice(start[, end])</code></td> + <td>Egy altömböt ad vissza.</td> + </tr> + <tr> + <td><code>a.sort([cmpfn])</code></td> + <td>Rendezi a tömböt. Opcionálisan egy függvényt is meg lehet adni.</td> + </tr> + <tr> + <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td> + <td>Módosít egy tömböt úgy, hogy egy része törölve, és azok több elemekkel cserélve lesznek.</td> + </tr> + <tr> + <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td> + <td>A tömb elejére elemeket szúr be.</td> + </tr> + </tbody> +</table> + +<h2 id="Függvények">Függvények</h2> + +<p>Az objektumok mellet, a függvények a JavaScript központi összetevői. Egy egyszerű függvény szintaxisa alig lehetne egyszerűebb:</p> + +<pre class="brush: js">function add(x, y) { + var total = x + y; + return total; +} +</pre> + +<p>Ez egy egyszerű függvényt mutat be. Egy JavaScript függvénynek 0 vagy több megnevezett paramétere lehet. A függvény törzse tetszüleges számú utasítást tartalmazhat, és egyéni lokális változók is deklarálhatóak benne. A <code>return</code> utasítás bárhol használható értékek visszaadására, és a függvény befejezésére. ha nem használunk <code>return</code> utasítást, (vagy érték nélkül használjuk), a függvény visszatérése <code>undefined</code> lesz.</p> + +<p>A megnevezett paraméterek inkább ajánlás, mint kötelezően megadandó adatok. A függvények meghívhatóak a várt paraméterek nélkül is, ez esetben azok értéke <code>undefined</code> lesz.</p> + +<pre class="brush: js">add(); // NaN +// Nem lehet hozzáadást végezni undefined értékekkel +</pre> + +<p>You can also pass in more arguments than the function is expecting:</p> + +<pre class="brush: js">add(2, 3, 4); // 5 +// az első két paraméter össze lesz adva; a 4 figyelmen kívül marad +</pre> + +<p>Talán egy kicsit furcsának tűnhet, de a függvények a függvénytörzsben hozzáférnek egy plusz változóhoz is, az <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="/en/JavaScript/Reference/Functions_and_function_scope/arguments"><code>arguments</code></a>-hez, ami egy tömb szerű objektum, és a megadott paramétereket tartalmazza. Írjuk újra a függvényt úgy hogy tetszőleges számú paramétert dolgozzon fel:</p> + +<pre class="brush: js">function add() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum; +} + +add(2, 3, 4, 5); // 14 +</pre> + +<p>Ám ez nem hasznosabb annál, mint leírni, hogy <code>2 + 3 + 4 + 5</code>. Készítsünk egy átlagszámítást végző függvényt:</p> + +<pre class="brush: js">function avg() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<p>Ez nagyon hasznos, mégis egy kicsit hosszúnak látszik. Hogy lerövidíthessük egy kicsit jobban a kódot, az arguments tömb használatát a <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameter syntax</a> -ra is cserélhetjük, így tetszőleges sok paraméter adható át, és a kód minimális marad. A függvényekben a <strong>rest parameter operator</strong> a <strong>...variable</strong> formátummal írható le, és tartalmazza a függvény számára összes nem megnevezett paramétert. A <strong>for</strong> ciklus helyett használhatunk <strong>for...of</strong> ciklust is.</p> + +<pre class="brush: js">function avg(...args) { + var sum = 0; + for (let value of args) { + sum += value; + } + return sum / args.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<div class="note">A fenti kódban, az <strong>args</strong> változó tárolja az összes értéket, amit a függvénynek adtunk át.<br> +<br> +It is important to note that wherever the rest parameter operator is placed in a function declaration it will store all arguments <em>after</em> its declaration, but not before. <em>i.e. function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em><strong> </strong>will store the first value passed into the function in the <strong>firstValue </strong>variable and the remaining arguments in <strong>args</strong>. That's another useful language feature but it does lead us to a new problem. The <code>avg()</code> function takes a comma-separated list of arguments — but what if you want to find the average of an array? You could just rewrite the function as follows:</div> + +<pre class="brush: js">function avgArray(arr) { + var sum = 0; + for (var i = 0, j = arr.length; i < j; i++) { + sum += arr[i]; + } + return sum / arr.length; +} + +avgArray([2, 3, 4, 5]); // 3.5 +</pre> + +<p>But it would be nice to be able to reuse the function that we've already created. Luckily, JavaScript lets you call a function with an arbitrary array of arguments, using the {{jsxref("Function.apply", "apply()")}} method of any function object.</p> + +<pre class="brush: js">avg.apply(null, [2, 3, 4, 5]); // 3.5 +</pre> + +<p>The second argument to <code>apply()</code> is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objects too.</p> + +<div class="note"> +<p>You can achieve the same result using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> in the function call.</p> + +<p>For instance: <code>avg(...numbers)</code></p> +</div> + +<p>JavaScript lets you create anonymous functions.</p> + +<pre class="brush: js">var avg = function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +}; +</pre> + +<p>This is semantically equivalent to the <code>function avg()</code> form. It's extremely powerful, as it lets you put a full function definition anywhere that you would normally put an expression. This enables all sorts of clever tricks. Here's a way of "hiding" some local variables — like block scope in C:</p> + +<pre class="brush: js">var a = 1; +var b = 2; + +(function() { + var b = 3; + a += b; +})(); + +a; // 4 +b; // 2 +</pre> + +<p>JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as those found in the browser DOM.</p> + +<pre class="brush: js">function countChars(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += countChars(child); + } + return count; +} +</pre> + +<p>This highlights a potential problem with anonymous functions: how do you call them recursively if they don't have a name? JavaScript lets you name function expressions for this. You can use named <a href="/en-US/docs/Glossary/IIFE">IIFEs (Immediately Invoked Function Expressions)</a> as shown below:</p> + +<pre class="brush: js">var charsInBody = (function counter(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += counter(child); + } + return count; +})(document.body); +</pre> + +<p>The name provided to a function expression as above is only available to the function's own scope. This allows more optimizations to be done by the engine and results in more readable code. The name also shows up in the debugger and some stack traces, which can save you time when debugging.</p> + +<p>Note that JavaScript functions are themselves objects — like everything else in JavaScript — and you can add or change properties on them just like we've seen earlier in the Objects section.</p> + +<h2 id="Custom_objects">Custom objects</h2> + +<div class="note">For a more detailed discussion of object-oriented programming in JavaScript, see <a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a>.</div> + +<p>In classic Object Oriented Programming, objects are collections of data and methods that operate on that data. JavaScript is a prototype-based language that contains no class statement, as you'd find in C++ or Java (this is sometimes confusing for programmers accustomed to languages with a class statement). Instead, JavaScript uses functions as classes. Let's consider a person object with first and last name fields. There are two ways in which the name might be displayed: as "first last" or as "last, first". Using the functions and objects that we've discussed previously, we could display the data like this:</p> + +<pre class="example-bad brush: js">function makePerson(first, last) { + return { + first: first, + last: last + }; +} +function personFullName(person) { + return person.first + ' ' + person.last; +} +function personFullNameReversed(person) { + return person.last + ', ' + person.first; +} + +var s = makePerson('Simon', 'Willison'); +personFullName(s); // "Simon Willison" +personFullNameReversed(s); // "Willison, Simon" +</pre> + +<p>This works, but it's pretty ugly. You end up with dozens of functions in your global namespace. What we really need is a way to attach a function to an object. Since functions are objects, this is easy:</p> + +<pre class="brush: js">function makePerson(first, last) { + return { + first: first, + last: last, + fullName: function() { + return this.first + ' ' + this.last; + }, + fullNameReversed: function() { + return this.last + ', ' + this.first; + } + }; +} + +var s = makePerson('Simon', 'Willison'); +s.fullName(); // "Simon Willison" +s.fullNameReversed(); // "Willison, Simon" +</pre> + +<p>There's something here we haven't seen before: the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this" title="/en/JavaScript/Reference/Operators/this">this</a></code> keyword. Used inside a function, <code>this</code> refers to the current object. What that actually means is specified by the way in which you called that function. If you called it using <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Accessing_properties" title="/en/JavaScript/Reference/Operators/Member_Operators">dot notation or bracket notation</a> on an object, that object becomes <code>this</code>. If dot notation wasn't used for the call, <code>this</code> refers to the global object.</p> + +<p>Note that <code>this</code> is a frequent cause of mistakes. For example:</p> + +<pre class="brush: js">var s = makePerson('Simon', 'Willison'); +var fullName = s.fullName; +fullName(); // undefined undefined +</pre> + +<p>When we call <code>fullName()</code> alone, without using <code>s.fullName()</code>, <code>this</code> is bound to the global object. Since there are no global variables called <code>first</code> or <code>last</code> we get <code>undefined</code> for each one.</p> + +<p>We can take advantage of the <code>this</code> keyword to improve our <code>makePerson</code> function:</p> + +<pre class="brush: js">function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = function() { + return this.first + ' ' + this.last; + }; + this.fullNameReversed = function() { + return this.last + ', ' + this.first; + }; +} +var s = new Person('Simon', 'Willison'); +</pre> + +<p>We have introduced another keyword: <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="/en/JavaScript/Reference/Operators/new">new</a></code>. <code>new</code> is strongly related to <code>this</code>. It creates a brand new empty object, and then calls the function specified, with <code>this</code> set to that new object. Notice though that the function specified with <code>this</code> does not return a value but merely modifies the <code>this</code> object. It's <code>new</code> that returns the <code>this</code> object to the calling site. Functions that are designed to be called by <code>new</code> are called constructor functions. Common practice is to capitalize these functions as a reminder to call them with <code>new</code>.</p> + +<p>The improved function still has the same pitfall with calling <code>fullName()</code> alone.</p> + +<p>Our person objects are getting better, but there are still some ugly edges to them. Every time we create a person object we are creating two brand new function objects within it — wouldn't it be better if this code was shared?</p> + +<pre class="brush: js">function personFullName() { + return this.first + ' ' + this.last; +} +function personFullNameReversed() { + return this.last + ', ' + this.first; +} +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = personFullName; + this.fullNameReversed = personFullNameReversed; +} +</pre> + +<p>That's better: we are creating the method functions only once, and assigning references to them inside the constructor. Can we do any better than that? The answer is yes:</p> + +<pre class="brush: js">function Person(first, last) { + this.first = first; + this.last = last; +} +Person.prototype.fullName = function() { + return this.first + ' ' + this.last; +}; +Person.prototype.fullNameReversed = function() { + return this.last + ', ' + this.first; +}; +</pre> + +<p><code>Person.prototype</code> is an object shared by all instances of <code>Person</code>. It forms part of a lookup chain (that has a special name, "prototype chain"): any time you attempt to access a property of <code>Person</code> that isn't set, JavaScript will check <code>Person.prototype</code> to see if that property exists there instead. As a result, anything assigned to <code>Person.prototype</code> becomes available to all instances of that constructor via the <code>this</code> object.</p> + +<p>This is an incredibly powerful tool. JavaScript lets you modify something's prototype at any time in your program, which means you can add extra methods to existing objects at runtime:</p> + +<pre class="brush: js">var s = new Person('Simon', 'Willison'); +s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function + +Person.prototype.firstNameCaps = function() { + return this.first.toUpperCase(); +}; +s.firstNameCaps(); // "SIMON" +</pre> + +<p>Interestingly, you can also add things to the prototype of built-in JavaScript objects. Let's add a method to <code>String</code> that returns that string in reverse:</p> + +<pre class="brush: js">var s = 'Simon'; +s.reversed(); // TypeError on line 1: s.reversed is not a function + +String.prototype.reversed = function() { + var r = ''; + for (var i = this.length - 1; i >= 0; i--) { + r += this[i]; + } + return r; +}; + +s.reversed(); // nomiS +</pre> + +<p>Our new method even works on string literals!</p> + +<pre class="brush: js">'This can now be reversed'.reversed(); // desrever eb won nac sihT +</pre> + +<p>As mentioned before, the prototype forms part of a chain. The root of that chain is <code>Object.prototype</code>, whose methods include <code>toString()</code> — it is this method that is called when you try to represent an object as a string. This is useful for debugging our <code>Person</code> objects:</p> + +<pre class="brush: js">var s = new Person('Simon', 'Willison'); +s.toString(); // [object Object] + +Person.prototype.toString = function() { + return '<Person: ' + this.fullName() + '>'; +} + +s.toString(); // "<Person: Simon Willison>" +</pre> + +<p>Remember how <code>avg.apply()</code> had a null first argument? We can revisit that now. The first argument to <code>apply()</code> is the object that should be treated as '<code>this</code>'. For example, here's a trivial implementation of <code>new</code>:</p> + +<pre class="brush: js">function trivialNew(constructor, ...args) { + var o = {}; // Create an object + constructor.apply(o, args); + return o; +} +</pre> + +<p>This isn't an exact replica of <code>new</code> as it doesn't set up the prototype chain (it would be difficult to illustrate). This is not something you use very often, but it's useful to know about. In this snippet, <code>...args</code> (including the ellipsis) is called the "<a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>" — as the name implies, this contains the rest of the arguments.</p> + +<p>Calling</p> + +<pre class="brush: js">var bill = trivialNew(Person, 'William', 'Orange');</pre> + +<p>is therefore almost equivalent to</p> + +<pre class="brush: js">var bill = new Person('William', 'Orange');</pre> + +<p><code>apply()</code> has a sister function named <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="/en/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, which again lets you set <code>this</code> but takes an expanded argument list as opposed to an array.</p> + +<pre class="brush: js">function lastNameCaps() { + return this.last.toUpperCase(); +} +var s = new Person('Simon', 'Willison'); +lastNameCaps.call(s); +// Is the same as: +s.lastNameCaps = lastNameCaps; +s.lastNameCaps(); // WILLISON +</pre> + +<h3 id="Inner_functions">Inner functions</h3> + +<p>JavaScript function declarations are allowed inside other functions. We've seen this once before, with an earlier <code>makePerson()</code> function. An important detail of nested functions in JavaScript is that they can access variables in their parent function's scope:</p> + +<pre class="brush: js">function parentFunc() { + var a = 1; + + function nestedFunc() { + var b = 4; // parentFunc can't use this + return a + b; + } + return nestedFunc(); // 5 +} +</pre> + +<p>This provides a great deal of utility in writing more maintainable code. If a called function relies on one or two other functions that are not useful to any other part of your code, you can nest those utility functions inside it. This keeps the number of functions that are in the global scope down, which is always a good thing.</p> + +<p>This is also a great counter to the lure of global variables. When writing complex code it is often tempting to use global variables to share values between multiple functions — which leads to code that is hard to maintain. Nested functions can share variables in their parent, so you can use that mechanism to couple functions together when it makes sense without polluting your global namespace — "local globals" if you like. This technique should be used with caution, but it's a useful ability to have.</p> + +<h2 id="Closures">Closures</h2> + +<p>This leads us to one of the most powerful abstractions that JavaScript has to offer — but also the most potentially confusing. What does this do?</p> + +<pre class="brush: js">function makeAdder(a) { + return function(b) { + return a + b; + }; +} +var x = makeAdder(5); +var y = makeAdder(20); +x(6); // ? +y(7); // ? +</pre> + +<p>The name of the <code>makeAdder()</code> function should give it away: it creates new 'adder' functions, each of which, when called with one argument, adds it to the argument that it was created with.</p> + +<p>What's happening here is pretty much the same as was happening with the inner functions earlier on: a function defined inside another function has access to the outer function's variables. The only difference here is that the outer function has returned, and hence common sense would seem to dictate that its local variables no longer exist. But they <em>do</em> still exist — otherwise, the adder functions would be unable to work. What's more, there are two different "copies" of <code>makeAdder()</code>'s local variables — one in which <code>a</code> is 5 and the other one where <code>a</code> is 20. So the result of that function calls is as follows:</p> + +<pre class="brush: js">x(6); // returns 11 +y(7); // returns 27 +</pre> + +<p>Here's what's actually happening. Whenever JavaScript executes a function, a 'scope' object is created to hold the local variables created within that function. It is initialized with any variables passed in as function parameters. This is similar to the global object that all global variables and functions live in, but with a couple of important differences: firstly, a brand new scope object is created every time a function starts executing, and secondly, unlike the global object (which is accessible as <code>this</code> and in browsers as <code>window</code>) these scope objects cannot be directly accessed from your JavaScript code. There is no mechanism for iterating over the properties of the current scope object, for example.</p> + +<p>So when <code>makeAdder()</code> is called, a scope object is created with one property: <code>a</code>, which is the argument passed to the <code>makeAdder()</code> function. <code>makeAdder()</code> then returns a newly created function. Normally JavaScript's garbage collector would clean up the scope object created for <code>makeAdder()</code> at this point, but the returned function maintains a reference back to that scope object. As a result, the scope object will not be garbage-collected until there are no more references to the function object that <code>makeAdder()</code> returned.</p> + +<p>Scope objects form a chain called the scope chain, similar to the prototype chain used by JavaScript's object system.</p> + +<p>A <strong>closure</strong> is the combination of a function and the scope object in which it was created. Closures let you save state — as such, they can often be used in place of objects. You can find <a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">several excellent introductions to closures</a>.</p> diff --git a/files/hu/web/javascript/guide/bevezetés/index.html b/files/hu/web/javascript/guide/bevezetés/index.html new file mode 100644 index 0000000000..3e87f3d12b --- /dev/null +++ b/files/hu/web/javascript/guide/bevezetés/index.html @@ -0,0 +1,134 @@ +--- +title: Bevezetés +slug: Web/JavaScript/Guide/Bevezetés +translation_of: Web/JavaScript/Guide/Introduction +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> + +<p class="summary"><span id="result_box" lang="hu"><span>Ez a fejezet</span> <span>bemutatja</span> <span>a JavaScript-et és</span> hozzá kapcsolódó<span> néhány</span> <span>alapvető</span> <span>fogalmat</span><span>.</span></span></p> + +<h2 id="Amire_szükséged_lesz_a_megértéshez"><span class="short_text" id="result_box" lang="hu"><span>Amire szükséged lesz a megértéshez</span></span></h2> + +<p><span id="result_box" lang="hu"><span>Ez az útmutató</span> <span>feltételezi, hogy</span> <span>a</span> <span>következő alapvető</span> <span>háttérrel rendelkezel</span><span>:</span></span></p> + +<ul> + <li><span id="result_box" lang="hu"><span>Általános</span> <span>ismeret az internet</span> <span>és a World</span> <span>Wide</span> <span>Web</span></span> ({{Glossary("WWW")}}) működéséről.</li> + <li><span class="short_text" id="result_box" lang="hu"><span class="alt-edited">Megfelelő gyakorlati ismeretek a</span></span> HyperText Markup Language, az az ({{Glossary("HTML")}}) nyelvet kapcsolatban.</li> + <li><span id="result_box" lang="hu"><span>Alapszintű</span> <span>programozási tapasztalat</span><span>.</span> <span class="alt-edited">Amennyiben</span> <span>kezdő</span> <span>programozó vagy,</span> <span class="alt-edited">akkor próbálkozz meg az</span> <span class="alt-edited">oktatóanyagokkal a</span><span> fő oldalon</span> </span><a href="/en-US/docs/Web/JavaScript">JavaScript</a>.</li> +</ul> + +<h2 id="További_információk_a_JavaScript-ről">További információk a JavaScript-ről</h2> + +<p><span id="result_box" lang="hu"><span>A</span> <span>JavaScript</span> <span>dokumentáció</span> <span>a következőket tartalmazza:</span></span></p> + +<ul> + <li><a href="/en-US/Learn">Tanulás az interneten</a> <span id="result_box" lang="hu"><span>információt nyújt</span> <span>a kezdőknek</span><span>, és bemutatja</span> <span>az alapvető fogalmakat</span> <span>a programozással</span> <span>és az internettel kapcsolatban.</span></span></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Útmutató</a> (ez) <span id="result_box" lang="hu"><span>áttekintést ad</span> <span>a</span> <span>JavaScript</span> <span>nyelvhez</span><span>.</span></span></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Referencia</a> <span id="result_box" lang="hu"><span>részletes</span> <span>referencia anyag</span> a <span>JavaScript</span></span>-hez.</li> +</ul> + +<p>Ha kezdő JavaScript programozó vagy, akkor jó helyen jársz, a <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Útmutatóban</a> elsajátíthatod a keresett tudást. Ha már alap szinten ismered a nyelvet, egyszerűbb lehet számodra a <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Referencia</a>, ahol szakmai információkat olvashatsz.</p> + +<h2 id="Mi_az_a_JavaScript">Mi az a JavaScript?</h2> + +<p>A JavaScript egy platform független (cross-platform), objektum orientált script nyelv. Beépített környezetben fut (általában egy web böngésző), JavaScript képes kapcsolódni más objektum környezettel (DOM, lásd később), ezáltal tudja manipulálni azt.</p> + +<p><span id="result_box" lang="hu"><span>JavaScript</span> <span>tartalmaz</span> <span>egy szabványos</span> objektum <span>könyvtárat</span><span>,</span></span> <span id="result_box" lang="hu"><span>mint például a</span></span>z <code>Array</code>, <code>Date</code>, és <code>Math</code>, <span id="result_box" lang="hu"><span>és</span> <span>alapvető</span> <span>nyelvi</span> <span>elemeket, például az</span> operátorokat és <span>vezérlési szerkezeteket</span></span>. <span id="result_box" lang="hu"><span>JavaScript</span>-et <span>lehet bővíteni</span><span> különböző célokra</span> <span>történő kiegészítéssel, annak speciális igényeivel, p</span><span>éldául:</span></span></p> + +<ul> + <li><em>Kliens oldali JavaScript</em> <span id="result_box" lang="hu"><span>kiterjeszti</span> <span>az alapvető</span> <span>nyelvi</span> elemeket olyan <span>objektumokkal</span>, mely képes e<span>gy</span> <span>böngészőben manipulálni a </span><span>Document</span> <span>Object</span> <span>Model-t</span> <span>(</span><span>HTML DOM)</span></span>. <span id="result_box" lang="hu"><span>Például</span><span>, </span></span> <span id="result_box" lang="hu"><span>lehetővé teszi</span></span><span lang="hu"><span>, </span></span>hogy <span id="result_box" lang="hu"><span>egy HTML űrlapon </span></span><span lang="hu"><span>reagál a felhasználó</span>i <span>eseményekre, mint a</span> <span>kattintás vagy a</span><span> bevitt adatok ellenőrzése</span><span>.</span></span></li> + <li><em>Szerver oldali JavaScript</em> <span id="result_box" lang="hu"><span>kiterjeszti</span> <span>az alapvető</span> <span>nyelvi</span> elemeket olyan <span>objektumokkal</span>, mely érdemessé teszi, hogy fusson egy szerveren</span>. <span id="result_box" lang="hu"><span>Például</span><span>,</span></span> <span id="result_box" lang="hu"><span>lehetővé teszi</span></span><span lang="hu"><span>, </span></span>hogy <span id="result_box" lang="hu"><span>kommunikáljon</span> egy <span>adatbázissal</span>, <span>vagy</span> <span>végezhessen fájl</span><span>manipulációkat</span> <span>a szerveren</span><span>.</span></span></li> +</ul> + +<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript and Java</h2> + +<p>JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.</p> + +<p>In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods.</p> + +<p>JavaScript is a very free-form language compared to Java. You do not have to declare all variables, classes, and methods. You do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces. Variables, parameters, and function return types are not explicitly typed.</p> + +<p>Java is a class-based programming language designed for fast execution and type safety. Type safety means, for instance, that you can't cast a Java integer into an object reference or access private memory by corrupting Java bytecodes. Java's class-based model means that programs consist exclusively of classes and their methods. Java's class inheritance and strong typing generally require tightly coupled object hierarchies. These requirements make Java programming more complex than JavaScript programming.</p> + +<p>In contrast, JavaScript descends in spirit from a line of smaller, dynamically typed languages such as HyperTalk and dBASE. These scripting languages offer programming tools to a much wider audience because of their easier syntax, specialized built-in functionality, and minimal requirements for object creation.</p> + +<table class="standard-table"> + <caption>JavaScript compared to Java</caption> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td>Object-oriented. No distinction between types of objects. Inheritance is through the prototype mechanism, and properties and methods can be added to any object dynamically.</td> + <td>Class-based. Objects are divided into classes and instances with all inheritance through the class hierarchy. Classes and instances cannot have properties or methods added dynamically.</td> + </tr> + <tr> + <td>Variable data types are not declared (dynamic typing).</td> + <td>Variable data types must be declared (static typing).</td> + </tr> + <tr> + <td>Cannot automatically write to hard disk.</td> + <td>Can automatically write to hard disk.</td> + </tr> + </tbody> +</table> + +<p>For more information on the differences between JavaScript and Java, see the chapter <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a>.</p> + +<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript and the ECMAScript specification</h2> + +<p>JavaScript is standardized at <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — the European association for standardizing information and communication systems (ECMA was formerly an acronym for the European Computer Manufacturers Association) to deliver a standardized, international programming language based on JavaScript. This standardized version of JavaScript, called ECMAScript, behaves the same way in all applications that support the standard. Companies can use the open standard language to develop their implementation of JavaScript. The ECMAScript standard is documented in the ECMA-262 specification. See <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">New in JavaScript</a> to learn more about different versions of JavaScript and ECMAScript specification editions.</p> + +<p>The ECMA-262 standard is also approved by the <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) as ISO-16262. You can also find the specification on <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">the Ecma International website</a>. The ECMAScript specification does not describe the Document Object Model (DOM), which is standardized by the <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> and/or <a href="https://whatwg.org">WHATWG (Web Hypertext Application Technology Working Group)</a>. The DOM defines the way in which HTML document objects are exposed to your script. To get a better idea about the different technologies that are used when programming with JavaScript, consult the article <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript documentation versus the ECMAScript specification</h3> + +<p>The ECMAScript specification is a set of requirements for implementing ECMAScript; it is useful if you want to implement standards-compliant language features in your ECMAScript implementation or engine (such as SpiderMonkey in Firefox, or v8 in Chrome).</p> + +<p>The ECMAScript document is not intended to help script programmers; use the JavaScript documentation for information on writing scripts.</p> + +<p>The ECMAScript specification uses terminology and syntax that may be unfamiliar to a JavaScript programmer. Although the description of the language may differ in ECMAScript, the language itself remains the same. JavaScript supports all functionality outlined in the ECMAScript specification.</p> + +<p>The JavaScript documentation describes aspects of the language that are appropriate for a JavaScript programmer.</p> + +<h2 id="Getting_started_with_JavaScript">Getting started with JavaScript</h2> + +<p>Getting started with JavaScript is easy: all you need is a modern Web browser. This guide includes some JavaScript features which are only currently available in the latest versions of Firefox, so using the most recent version of Firefox is recommended.</p> + +<p>There are two tools built into Firefox that are useful for experimenting with JavaScript: the Web Console and Scratchpad.</p> + +<h3 id="The_Web_Console">The Web Console</h3> + +<p>The <a href="/en-US/docs/Tools/Web_Console">Web Console</a> shows you information about the currently loaded Web page, and also includes a <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">command line</a> that you can use to execute JavaScript expressions in the current page.</p> + +<p>To open the Web Console (Ctrl+Shift+K), select "Web Console" from the "Developer" menu, which is under the "Tools" menu in Firefox. It appears at the bottom of the browser window. Along the bottom of the console is a command line that you can use to enter JavaScript, and the output appears in the pane above:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Scratchpad">Scratchpad</h3> + +<p>The Web Console is great for executing single lines of JavaScript, but although you can execute multiple lines, it's not very convenient for that, and you can't save your code samples using the Web Console. So for more complex examples <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> is a better tool.</p> + +<p>To open Scratchpad (Shift+F4), select "Scratchpad" from the "Developer" menu, which is under the menu in Firefox. It opens in a separate window and is an editor that you can use to write and execute JavaScript in the browser. You can also save scripts to disk and load them from disk.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Hello_world">Hello world</h3> + +<p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p> + +<pre class="brush: js">function greetMe(yourName) { + alert("Hello " + yourName); +} + +greetMe("World"); +</pre> + +<p>Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!</p> + +<p>In the following pages, this guide will introduce you to the JavaScript syntax and language features, so that you will be able to write more complex applications.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> diff --git a/files/hu/web/javascript/guide/index.html b/files/hu/web/javascript/guide/index.html new file mode 100644 index 0000000000..be58db535b --- /dev/null +++ b/files/hu/web/javascript/guide/index.html @@ -0,0 +1,122 @@ +--- +title: JavaScript kézikönyv +slug: Web/JavaScript/Guide +tags: + - AJAX + - JavaScript + - JavaScript_Guide + - NeedsMarkupWork +translation_of: Web/JavaScript/Guide +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary">The JavaScript Guide shows you how to use <a href="/hu/docs/Web/JavaScript">JavaScript</a> and gives an overview of the language. If you want to get started with JavaScript or programming in general, consult the articles in the <a href="/hu/Learn">learning area</a>. If you need exhaustive information about a language feature, have a look at the <a href="/hu/docs/Web/JavaScript/Reference">JavaScript reference</a>.</p> + +<ul class="card-grid"> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Introduction">Introduction</a></span> + + <p><a href="/hu/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">About this guide</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript.3F">About JavaScript</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript and Java</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Tools</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p> + </li> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Grammar_and_types">Grammar and types</a></span> + <p><a href="/hu/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Basic syntax & comments</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declarations</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Variable scope</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Variable hoisting</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Data structures and types</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> + </li> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></span> + <p><code><a href="/hu/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/hu/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/hu/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> + </li> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></span> + <p><code><a href="/hu/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/hu/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Functions">Functions</a></span> + + <p><a href="/hu/docs/Web/JavaScript/Guide/Functions#Defining_functions">Defining functions</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Functions#Calling_functions">Calling functions</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Functions#Function_scope">Function scope</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/hu/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> + </li> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></span> + <p><a href="/hu/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assignment</a> & <a href="/hu/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparisons</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Arithmetic operators</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitwise</a> & <a href="/hu/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logical operators</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p> + </li> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></span><a href="/hu/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Number literals</a> + <p><a href="/hu/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> object</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> + <a href="https://developer.mozilla.org/hu/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> + </li> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Text_formatting">Text formatting</a></span> + <p><a href="/hu/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String literals</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_strings">Template strings</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalization</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></span> + + <p><a href="/hu/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Indexed_collections#Array_comprehensions">Array comprehensions</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p> + </li> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Keyed_collections">Keyed collections</a></span> + <p><code><a href="/hu/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/hu/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/hu/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/hu/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Working_with_Objects">Working with objects</a></span> + <p><a href="/hu/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Objects and properties</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creating objects</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Defining methods</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> + </li> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a></span> + <p><a href="/hu/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototype-based OOP</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creating object hierarchies</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Inheritance</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> + + <p><a href="/hu/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iterators</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generator_comprehensions">Generator comprehensions</a></p> + </li> + <li><span><a href="/hu/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> + <p><code><a href="/hu/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/hu/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlers and traps</a><br> + <a href="/hu/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br> + <code><a href="/hu/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/hu/web/javascript/index.html b/files/hu/web/javascript/index.html new file mode 100644 index 0000000000..10ef5cc33c --- /dev/null +++ b/files/hu/web/javascript/index.html @@ -0,0 +1,110 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - Főoldal + - JavaScript + - Tanulás + - 'l10n:priority' +translation_of: Web/JavaScript +--- +<p class="summary"><span class="seoSummary">A <strong>JavaScript</strong> (<strong>JS</strong>) egy kis erőforrás-igényű, értelmezett vagy JIT-fordított programozási nyelv {{Glossary("Első osztályú funkciók", "elsőrendű függvényekkel")}}. Bár legtöbben weboldalak parancsnyelveként ismerik, sok webböngészőn kívüli környezetben is használják. Ilyen a <a href="/en-US/docs/Glossary/Node.js">node.js</a>, az <a class="external" href="https://couchdb.apache.org/">Apache CouchDB</a> és az <a class="external" href="http://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a>.</span> A JavaScript egy {{Glossary("Prototype-based programming", "prototípus-alapú")}}, többparadigmás, dinamikus nyelv, ami támogatja az objektumorientált, imperatív és deklaratív (pl. funkcionális) programozási stílusokat. Többet <a href="/en-US/docs/Web/JavaScript/About_JavaScript">itt</a> olvashat a JavaScriptről.</p> + +<p>Az oldal ezen része magáról a JavaScript nyelvről szól, nem a különböző weboldalaktól és környezetektől függő részekről. A weboldalaktól függő {{Glossary("API","API")}}-król lásd: <a href="/en-US/docs/Web/API">Web-API-k</a> és a <a href="/en-US/docs/Glossary/DOM">DOM</a>.</p> + +<p>A JavaScript szabványa az <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. 2012-től kezdődően, mindegyik <a href="https://kangax.github.io/compat-table/es5/">modern böngésző</a> támogatja az ECMAScript 5.1.-et. Régebbi böngészők legalább az ECMAScript 3-at támogatják. 2015. június 17-én az <a href="https://www.ecma-international.org">ECMA International</a> kiadta az ECMAScript hatodik jelentősebb verzióját, amit hivatalosan ECMAScript 2015-nek neveznek, de eleinte az ECMAScript 6 és az ES6 nevekkel illették. Azóta az ECMAScript szabványokat éves ciklusokban adják ki. Ez a dokumentáció a legújabb tervezetre vonatkozik, ami jelenleg az <a href="https://tc39.github.io/ecma262/">ECMAScript 201</a>9.</p> + +<p>A JavaScript nem összetévesztendő a <a href="https://hu.wikipedia.org/wiki/Java_(programoz%C3%A1si_nyelv)"> Java programozási nyev</a>vel. A "Java" és a "JavaScript" is az Oracle USA-ban és sok más országban regisztrált védjegye. Ettől függetlenül a két programozási nyelv szintaktikája, szematikája és alkalmazása jelentős mértékben eltér.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Oktatóanyagok">Oktatóanyagok</h2> + +<p>Tanulja meg a JavaScript-ben történő programozást útmutatók és bemutatók segítségével.</p> + +<h3 id="Teljes_kezdőknek">Teljes kezdőknek</h3> + +<p>Látogassa meg a <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">Tanulási területünk JavaScript tárgyát</a> ha nem rendekezik JavaScript vagy másféle programozási tapasztalattal. Ott megtalálhatóak az alábbi modulok:</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">JavaScript első lépések</a></dt> + <dd>Az olyan kérdések megválaszolása, mint "mi a JavaScript?", "hogy néz ki?", és "mire képes?", emellett a JavaScript fő funkciójainak ismertetése, mint a változók, stringek, számok és tömbök.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript építőkockák</a></dt> + <dd>Folytatja a JavaScript alapvető fő funkcióinak beszámolóját a figyelmet a gyakran előforduló típusú kód blokkok felé fordítva, mint az elágazások, ciklusok, függvények, és az esetek.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">A JavaScript objektumok bemutatása</a></dt> + <dd>A JavaScript objektumorientált jellegének megértése fontos, ha további tudást szeretne szerezni a nyelvről és ha hatékonyabb kódot szeretne írni. Ezért hoztuk létre ezt a modult, hogy segítsünk.</dd> +</dl> + +<h3 id="JavaScript_útmutató">JavaScript útmutató</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript útmutató</a></dt> + <dd>Egy sokkal részletesebb útmutató a JavaScript nyelvhez, amit olyanoknak szántunk, akik rendelkeznek már JavaScript vagy más programozási tapasztalattal.</dd> +</dl> + +<h3 id="Középszint">Középszint</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">A JavaScript újbóli bemutatása</a></dt> + <dd>Egy áttekintés azoknak, akik azt <em>gondolják</em> hogy ismerik JavaScript-et.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">JavaScript adatstruktúrák</a></dt> + <dd>A JavaScript-ben elérhető adatstruktúrák áttekintése.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Egyenlőség és azonosság</a></dt> + <dd>A JavaScript-ben háromféle értékösszehasonító műveletet érhetünk el: a szigorú egyenlőséget a <code>=== </code>hasznlatával, a laza egyenlőséget a <code>== </code>használatával, és az {{jsxref("Global_Objects/Object/is", "Object.is()")}} függvényt.</dd> +</dl> + +<h3 id="Haladó">Haladó</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Öröklődés és a prototípus lánc</a></dt> + <dd>A széleskörben félreértett és alábecsült prototípus alapú öröklődés értelmezése.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">Szigorú mód</a></dt> + <dd>A szigorú mód meghatározza, hogy nem lehet használni egy változót az inicializálását megelőzően. Ez az ECMAScript 5 egy korlátozott változata, a gyorsabb teljesítmény és könnyebb hibakeresés érdekében.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript tipizált tömbök</a></dt> + <dd>A JavaScript tipizált tömbök lehetővé teszik a nyers bináris adatok elérését.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management">Memóriakezelés</a></dt> + <dd>A memória életciklus és a szemétgyűjtés JavaScript-ben.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop">A párhuzamos modell és az eseményciklus</a></dt> + <dd>JavaScript-ben van egy párhuzamos modell, ami egy "eseménycikluson" alapszik.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Referencia">Referencia</h2> + +<p>A <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">JavaScript referencia</a> documentáció böngészése.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects">Az alapértelmezett objektumok</a></dt> + <dd>Ismerje meg az alapértelmezett beépített objektumokat: {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}, és másokat.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators">Kifejezések és operátorok</a></dt> + <dd>Tudjon meg többet a JavaScript operátoroktól: {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, az <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operátor elsőbbségről</a>, és másokról.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements">Állítások</a></dt> + <dd>Ismerje meg, hogyan működnek a {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}}, és más JavaScript állítások és kulcsszavak.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Függvények</a></dt> + <dd>Ismerje meg a JavaScript függvényeivel történő munkát alkalmazásfejlesztés során.</dd> +</dl> + +<h2 id="Eszközök_és_források">Eszközök és források</h2> + +<p>Hasznos eszközök <strong>JavaScript </strong>kód írásához és hibakereséséhez.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Fejlesztői Eszközök</a></dt> + <dd><a href="https://developer.mozilla.org/en-US/docs/Tools/Scratchpad">Jegyzettömb</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Web Konzol</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, hibakereső, és mások.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Shells">JavaScript Héjak</a></dt> + <dd>A JavaScript héjak lehetővé teszik JavaScript kódrészletek gyors tesztelését.</dd> + <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd>Együttműkösdés egyszerűen. Ha hozzáadja a TogetherJS-t az oldalához, a felhasználók valós időben segíthetnek egymásnak az oldalon.</dd> + <dt><a href="https://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>Stack Overflow kérdések "JavaScript" címkével.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript verziók és kiadási megjegyzések</a></dt> + <dd>Böngéssze a JavaScript's funkciótörténetét és végrehajtási státuszát.</dd> + <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt> + <dd>Szerkesszen JavaScript-et, CSS-t, HTML-t és kapjon élő eredményeket. Használjon külső forrásokat és működjön együtt a csapatával online.</dd> +</dl> +</div> +</div> diff --git a/files/hu/web/javascript/reference/errors/bad_return_or_yield/index.html b/files/hu/web/javascript/reference/errors/bad_return_or_yield/index.html new file mode 100644 index 0000000000..2892367f9a --- /dev/null +++ b/files/hu/web/javascript/reference/errors/bad_return_or_yield/index.html @@ -0,0 +1,54 @@ +--- +title: 'Hibaleírás: SyntaxError: return not in function' +slug: Web/JavaScript/Reference/Errors/Bad_return_or_yield +tags: + - Error +translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Üzenet">Üzenet</h2> + +<pre class="syntaxbox">SyntaxError: 'return' statement outside of function (Edge) +SyntaxError: return not in function (Firefox) +SyntaxError: yield not in function (Firefox) +</pre> + +<h2 id="Hiba_típusa">Hiba típusa</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="Mi_történt">Mi történt?</h2> + +<p>Egy <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> vagy <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> utasítás szerepel <a href="/en-US/docs/Web/JavaScript/Guide/Functions">function</a>-ön kívül. Lehet, hogy egy kapcsos zárójel hiányzik? A <code>return</code> és <code>yield</code> utasításoknak függvényen belül kell szerepelniük, mert csak itt értelmezhetőek. (Megszakítják illetve megállítják-folytatják a proramrész futását, és opcionálisan értékrt adnak vissza.)</p> + +<h2 id="Példák">Példák</h2> + +<pre class="brush: js example-bad">var cheer = function(score) { + if (score === 147) + return 'Maximum!'; + }; + if (score > 100) { + return 'Century!'; + } +} + +// SyntaxError: return not in function</pre> + +<p>A kapcsos zárójelek első ránézésre jól vannak rendezve, de a kódrészletből hiányzik egy <code>{</code> az első <code>if</code> utasítás után. A helyes kód így nézne ki:</p> + +<pre class="brush: js example-good">var cheer = function(score) { + if (score === 147) { + return 'Maximum!'; + } + if (score > 100) { + return 'Century!'; + } +};</pre> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code></li> +</ul> diff --git a/files/hu/web/javascript/reference/errors/index.html b/files/hu/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..c295fccea6 --- /dev/null +++ b/files/hu/web/javascript/reference/errors/index.html @@ -0,0 +1,31 @@ +--- +title: JavaScript error reference +slug: Web/JavaScript/Reference/Errors +tags: + - Debugging + - Error + - Errors + - Exception + - JavaScript + - NeedsTranslation + - TopicStub + - exceptions +translation_of: Web/JavaScript/Reference/Errors +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the {{jsxref("Error")}} object, and has a <code>name</code> and a <code>message</code>.</p> + +<p>Errors displayed in the Web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code.</p> + +<h2 id="List_of_errors">List of errors</h2> + +<p>In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!</p> + +<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>: Beginner's introductory tutorial on fixing JavaScript errors.</li> +</ul> diff --git a/files/hu/web/javascript/reference/errors/stmt_after_return/index.html b/files/hu/web/javascript/reference/errors/stmt_after_return/index.html new file mode 100644 index 0000000000..038658955c --- /dev/null +++ b/files/hu/web/javascript/reference/errors/stmt_after_return/index.html @@ -0,0 +1,67 @@ +--- +title: 'Hibaleírás: Warning: unreachable code after return statement' +slug: Web/JavaScript/Reference/Errors/Stmt_after_return +translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Üzenet">Üzenet</h2> + +<pre class="syntaxbox">Warning: unreachable code after return statement (Firefox) +</pre> + +<h2 id="Hiba_típusa">Hiba típusa</h2> + +<p>Figyelmeztetés</p> + +<h2 id="Mi_történt">Mi történt?</h2> + +<p>A return utasítás befejezi a függvény végrehajtását, és opcionálisan értéket ad vissza. Ha <code>return</code> szerepel a függvényben közvetlenül (tehát nem <code>if</code>-be ágyazva), akkor a return mindig végrehajtódik. Ez esetben, ha a return után van még valamilyen kód, az soha nem fog végrehajtódni. Ezt jelzi a figyelmeztetés.</p> + +<p>Ha a return után nincs pontosvessző, majd a következő sorban egy kifejezés (szám, string, ...) szerepel, a figyelmezetés akkor is megjelenik. A JavaScript ugyanis bizonyos esetekben az entert is pontosvesszőnek értelmezi, így a return utasítás lefut, a mögötte található kifejezés pedig nem lesz értelmezve.</p> + +<p>Nem jelenik meg figyelmeztetés a pontosvessző nélküli returnre, ha az alábbi utasítások valamelyike követi:</p> + +<ul> + <li>{{jsxref("Statements/throw", "throw")}}</li> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/var", "var")}}</li> + <li>{{jsxref("Statements/function", "function")}}</li> +</ul> + +<h2 id="Példák">Példák</h2> + +<h3 id="Hibás_használatok">Hibás használatok</h3> + +<pre class="brush: js example-bad">function f() { + var x = 3; + x += 4; + return x; // a return azonnal visszatér a függvényből + x -= 3; // tehát ez a sor soha nem fog lefutni; nem elérhető +} + +function f() { + return // ez 'return'-ként értelmeződik + 3 + 4; // tehát a funkció visszatér és ezt a sort soha nem éri el +} +</pre> + +<h3 id="Helyes_használat">Helyes használat</h3> + +<pre class="brush: js example-good">function f() { + var x = 3; + x += 4; + x -= 3; + return x; // OK: visszatér minden más utasítás után +} + +function f() { + return 3 + 4 // OK: pontosvessző nélküli return, kifejezéssel ugyanazon sorban +} +</pre> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li>{{jsxref("Statements/return", "Automatic Semicolon Insertion", "#Automatic_Semicolon_Insertion", 1)}}</li> +</ul> diff --git a/files/hu/web/javascript/reference/errors/unexpected_token/index.html b/files/hu/web/javascript/reference/errors/unexpected_token/index.html new file mode 100644 index 0000000000..6e6640b551 --- /dev/null +++ b/files/hu/web/javascript/reference/errors/unexpected_token/index.html @@ -0,0 +1,46 @@ +--- +title: 'SyntaxError: Unexpected token' +slug: Web/JavaScript/Reference/Errors/Unexpected_token +translation_of: Web/JavaScript/Reference/Errors/Unexpected_token +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Üzenet">Üzenet</h2> + +<pre class="syntaxbox">SyntaxError: expected expression, got "x" +SyntaxError: expected property name, got "x" +SyntaxError: expected target, got "x" +SyntaxError: expected rest argument name, got "x" +SyntaxError: expected closing parenthesis, got "x" +SyntaxError: expected '=>' after argument list, got "x" +</pre> + +<h2 id="Hiba_Típusa">Hiba Típusa</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="Mi_nem_jó">Mi nem jó?</h2> + +<p>A nyelv specifikációja várna egy bizonyos nyelvi formát, de az nem teljesül. Valószínűleg ez egy egyszerű elírás.</p> + +<h2 id="Példák">Példák</h2> + +<h3 id="Várható_kifejezések">Várható kifejezések</h3> + +<p>Például, ha egy függvény egy lezáró vesszővel hívünk meg, ez nem helyes. Ugyanis a JavaScript egy argumentumot vár ilyenkor, ami bármilyen bárilyen kifejezés is lehet.</p> + +<pre class="brush: js example-bad">Math.max(2, 42,); +// SyntaxError: expected expression, got ')' +</pre> + +<p>Correct would be omitting the comma or adding another argument:</p> + +<pre class="brush: js example-good">Math.max(2, 42); +Math.max(2, 42, 13 + 37); +</pre> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li>{{jsxref("Math.max()")}}</li> +</ul> diff --git a/files/hu/web/javascript/reference/errors/érvénytelen_típus/index.html b/files/hu/web/javascript/reference/errors/érvénytelen_típus/index.html new file mode 100644 index 0000000000..1fd4e782de --- /dev/null +++ b/files/hu/web/javascript/reference/errors/érvénytelen_típus/index.html @@ -0,0 +1,70 @@ +--- +title: 'Típushiba: "x" (nem) "y"' +slug: Web/JavaScript/Reference/Errors/Érvénytelen_típus +translation_of: Web/JavaScript/Reference/Errors/Unexpected_type +--- +<div>{{jsSidebar("Errors")}}</div> + +<div>Az „<var>x</var> (nem) <var>y</var>” JavaScript-kivétel akkor keletkezik, ha egy váratlan típus fordul elő. Ez leginkább váratlan {{jsxref("undefined")}} vagy {{jsxref("null")}} értéket jelent.</div> + +<h2 id="Üzenet">Üzenet</h2> + +<pre class="syntaxbox">TypeError: Unable to get property {x} of undefined or null reference (Edge) +TypeError: "x" is (not) "y" (Firefox) + +Példák: +TypeError: "x" is undefined +TypeError: "x" is null +TypeError: "undefined" is not an object +TypeError: "x" is not an object or null +TypeError: "x" is not a symbol +</pre> + +<h2 id="Hiba_típusa">Hiba típusa</h2> + +<p>{{jsxref("TypeError")}}.</p> + +<h2 id="Mi_történt">Mi történt?</h2> + +<p>Váratlan típus fordult elő a végrehajtás során. Ez leginkább {{jsxref("undefined")}} vagy {{jsxref("null")}} értékek esetén történik.</p> + +<p>Ugyanígy bizonyos metódusok – mint például az {{jsxref("Object.create()")}} vagy a {{jsxref("Symbol.keyFor()")}} – paraméterként egy meghatározott típust várnak.</p> + +<h2 id="Példák">Példák</h2> + +<h3 id="Hibás_használatok">Hibás használatok</h3> + +<pre class="brush: js example-bad">// nem definiált és null értékű paraméterek használata, amiknek esetén a substring metódus nem működik +var foo = undefined; +foo.substring(1); // TypeError: foo nincs definiálva + +var foo = null; +foo.substring(1); // TypeError: foo értéke null + + +// Bizonyos metódusok meghatározott típust várnak el +var foo = {} +Symbol.keyFor(foo); // TypeError: foo nem szimbólum + +var foo = 'bar' +Object.create(foo); // TypeError: "foo" nem objektum vagy null értékű +</pre> + +<h3 id="A_hiba_javítása">A hiba javítása</h3> + +<p>Az <code>undefined</code> értékek kiszűrésére például a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a> operátort lehet használni.</p> + +<pre class="brush: js">if (foo !== undefined) { + // Most, hogy tudjuk foo definiálva van, léphetünk tovább. +} +if (typeof foo !== 'undefined') { + // Ugyanaz a jó ötlet, de nem használandó implementáció – problémákat tud okozni + // a ténylegesen definiálatlan és a deklarálatlan változók közötti kavarodás miatt. +}</pre> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}}</li> +</ul> diff --git a/files/hu/web/javascript/reference/global_objects/array/index.html b/files/hu/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..2feb1828f9 --- /dev/null +++ b/files/hu/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,538 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - Example + - Global Objects + - JavaScript + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<p>Tömbök, amelyek magas-szintű lista jellegű objektumok, létrehozásához használatos a JavaScript <strong><code>Array</code></strong> objektum.</p> + +<h2 id="Leírás">Leírás</h2> + +<p>A tömbök listaszerű objektumok amelyek prototípusa olyan metódusokat tartalmaz amelyekkel bejárhatóak és mutálhatóak. A JavaScipt tömbnek sem a hossza, sem az elemeinek típusa sem fix. A tömbön belül az adatok nem folytonos módon tárolhatóak, így mivel a tömb hossza bármikor megváltozhat a Javascript tömbök sürűsége nem garantált, ez a programozó által választott felhasználási módtól függ. Általánosságban ezek kényelmes tulajdonságok de ha ezek a jellemzők nem kívánatosak az ön számára érdemes lehet inkább típusos tömböket használni. A tömbök nem használhatnak stringeket elem indexként (mint egy <a href="https://en.wikipedia.org/wiki/Associative_array">asszociatív tömbben</a>) csak kötelezően integereket. Ha a <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">zárójel jelölés</a> (vagy <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">pont jelölés</a>) segítségével nem-integert állítunk be vagy férünk hozzá akkor nem a tömb elemét fogjuk megkapni hanem a tömb <a href="/en-US/docs/Web/JavaScript/Data_structures#Properties">objektum tulajdonság kollekciójának</a> változóját. A tömb elemeinek listája és a tömb objektum tulajdonságai különböznek és a <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_methods">tömb bejáró és mutáló operátorait</a> nem használhatjuk ezekhez az elnevezett tulajdonságokhoz.</p> + +<h3 id="Gyakori_műveletek">Gyakori műveletek</h3> + +<p><strong>Array létrehozása</strong></p> + +<pre class="brush: js">var fruits = ["Apple", "Banana"]; + +console.log(fruits.length); +// 2 +</pre> + +<p><strong>Egy Array elem elérése (indexelése)</strong></p> + +<pre class="brush: js">var first = fruits[0]; +// Apple + +var last = fruits[fruits.length - 1]; +// Banana +</pre> + +<p><strong>Array bejárása</strong></p> + +<pre class="brush: js">fruits.forEach(function (item, index, array) { + console.log(item, index); +}); +// Apple 0 +// Banana 1 +</pre> + +<p><strong>Hozzáadás egy Array végéhez</strong></p> + +<pre class="brush: js">var newLength = fruits.push("Orange"); +// ["Apple", "Banana", "Orange"] +</pre> + +<p><strong>Array végéről elem eltávolítása</strong></p> + +<pre class="brush: js">var last = fruits.pop(); // Orange eltávolítása (a végéről) +// ["Apple", "Banana"]; +</pre> + +<p><strong>Array elejéről elem eltávolítása</strong></p> + +<pre class="brush: js">var first = fruits.shift(); // eltávolítja az Apple elemet az elejéről +// ["Banana"]; +</pre> + +<p><strong>Array elejéhez hozzáadás</strong></p> + +<pre class="brush: js">var newLength = fruits.unshift("Strawberry") // hozzáadás az elejéhez +// ["Strawberry", "Banana"]; +</pre> + +<p><strong>Array elem indexének megkeresése </strong></p> + +<pre class="brush: js">fruits.push("Mango"); +// ["Strawberry", "Banana", "Mango"] + +var pos = fruits.indexOf("Banana"); +// 1 +</pre> + +<p><strong>Index pozició alapján elem eltávolítása</strong></p> + +<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // így távolítunk el egy elemet + +// ["Strawberry", "Mango"]</pre> + +<p><strong>Index pozició alapján elemek eltávolítása</strong></p> + +<pre><code>let vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'] +console.log(vegetables) +// ["Cabbage", "Turnip", "Radish", "Carrot"] + +let pos = 1 +let n = 2 + +let removedItems = vegetables.splice(pos, n) +// this is how to remove items, n defines the number of items to be removed, +// from that position(pos) onward to the end of array. + +console.log(vegetables) +// ["Cabbage", "Carrot"] (the original array is changed) + +console.log(removedItems) +// ["Turnip", "Radish"]</code></pre> + +<p><strong>Array másolása</strong></p> + +<pre class="brush: js">var shallowCopy = fruits.slice(); // this is how to make a copy +// ["Strawberry"] +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>A JavaScript array is initialized with the given elements, except in the case where a single argument is passed to the <code>Array</code> constructor and that argument is a number (see the arrayLength parameter below). Note that this special case only applies to JavaScript arrays created with the <code>Array</code> constructor, not array literals created with the bracket syntax.</dd> + <dt><code>arrayLength</code></dt> + <dd>If the only argument passed to the <code>Array</code> constructor is an integer between 0 and 2<sup>32</sup>-1 (inclusive), this returns a new JavaScript array with length set to that number. If the argument is any other number, a {{jsxref("RangeError")}} exception is thrown.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.</p> + +<p>Some people think that <a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">you shouldn't use an array as an associative array</a>. In any case, you can use plain {{jsxref("Global_Objects/Object", "objects")}} instead, although doing so comes with its own caveats. See the post <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html">Lightweight JavaScript dictionaries with arbitrary keys</a> as an example.</p> + +<h3 id="Accessing_array_elements">Accessing array elements</h3> + +<p>JavaScript arrays are zero-indexed: the first element of an array is at index <code>0</code>, and the last element is at the index equal to the value of the array's {{jsxref("Array.length", "length")}} property minus 1.</p> + +<pre class="brush: js">var arr = ['this is the first element', 'this is the second element']; +console.log(arr[0]); // logs 'this is the first element' +console.log(arr[1]); // logs 'this is the second element' +console.log(arr[arr.length - 1]); // logs 'this is the second element' +</pre> + +<p>Array elements are object properties in the same way that <code>toString</code> is a property, but trying to access an element of an array as follows throws a syntax error, because the property name is not valid:</p> + +<pre class="brush: js">console.log(arr.0); // a syntax error +</pre> + +<p>There is nothing special about JavaScript arrays and the properties that cause this. JavaScript properties that begin with a digit cannot be referenced with dot notation; and must be accessed using bracket notation. For example, if you had an object with a property named <code>'3d'</code>, it can only be referenced using bracket notation. E.g.:</p> + +<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // a syntax error +console.log(years[0]); // works properly +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'character.png'); // a syntax error +renderer['3d'].setTexture(model, 'character.png'); // works properly +</pre> + +<p>Note that in the <code>3d</code> example, <code>'3d'</code> had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., <code>years['2']</code> instead of <code>years[2]</code>), although it's not necessary. The 2 in <code>years[2]</code> is coerced into a string by the JavaScript engine through an implicit <code>toString</code> conversion. It is for this reason that <code>'2'</code> and <code>'02'</code> would refer to two different slots on the <code>years</code> object and the following example could be <code>true</code>:</p> + +<pre class="brush: js">console.log(years['2'] != years['02']); +</pre> + +<p>Similarly, object properties which happen to be reserved words(!) can only be accessed as string literals in bracket notation(but it can be accessed by dot notation in firefox 40.0a2 at least):</p> + +<pre class="brush: js">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['array']); +</pre> + +<h3 id="Relationship_between_length_and_numerical_properties">Relationship between <code>length</code> and numerical properties</h3> + +<p>A JavaScript array's {{jsxref("Array.length", "length")}} property and numerical properties are connected. Several of the built-in array methods (e.g., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, etc.) take into account the value of an array's {{jsxref("Array.length", "length")}} property when they're called. Other methods (e.g., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, etc.) also result in updates to an array's {{jsxref("Array.length", "length")}} property.</p> + +<pre class="brush: js">var fruits = []; +fruits.push('banana', 'apple', 'peach'); + +console.log(fruits.length); // 3 +</pre> + +<p>When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's {{jsxref("Array.length", "length")}} property accordingly:</p> + +<pre class="brush: js">fruits[5] = 'mango'; +console.log(fruits[5]); // 'mango' +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6 +</pre> + +<p>Increasing the {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<p>Decreasing the {{jsxref("Array.length", "length")}} property does, however, delete elements.</p> + +<pre class="brush: js">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2 +</pre> + +<p>This is explained further on the {{jsxref("Array.length")}} page.</p> + +<h3 id="Creating_an_array_using_the_result_of_a_match">Creating an array using the result of a match</h3> + +<p>The result of a match between a regular expression and a string can create a JavaScript array. This array has properties and elements which provide information about the match. Such an array is returned by {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. To help explain these properties and elements, look at the following example and then refer to the table below:</p> + +<pre class="brush: js">// Match one d followed by one or more b's followed by one d +// Remember matched b's and the following d +// Ignore case + +var myRe = /d(b+)(d)/i; +var myArray = myRe.exec('cdbBdbsbz'); +</pre> + +<p>The properties and elements returned from this match are as follows:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Property/Element</td> + <td class="header">Description</td> + <td class="header">Example</td> + </tr> + <tr> + <td><code>input</code></td> + <td>A read-only property that reflects the original string against which the regular expression was matched.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>A read-only property that is the zero-based index of the match in the string.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>A read-only element that specifies the last matched characters.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>The <code>Array</code> constructor's length property whose value is 1.</dd> + <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Allows the addition of properties to all array objects.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>Creates a new <code>Array</code> instance from an array-like or iterable object.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Returns true if a variable is an array, if not false.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>Creates a new <code>Array</code> instance with a variable number of arguments, regardless of number or type of the arguments.</dd> +</dl> + +<h2 id="Array_instances"><code>Array</code> instances</h2> + +<p>All <code>Array</code> instances inherit from {{jsxref("Array.prototype")}}. The prototype object of the <code>Array</code> constructor can be modified to affect all <code>Array</code> instances.</p> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Mutator_methods">Mutator methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> + +<h4 id="Accessor_methods">Accessor methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> + +<h4 id="Iteration_methods">Iteration methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div> + +<h2 id="Array_generic_methods"><code>Array</code> generic methods</h2> + +<div class="warning"> +<p><strong>Array generics are non-standard, deprecated and will get removed in the near future</strong>. Note that you can not rely on them cross-browser. However, there is a <a href="https://github.com/plusdude/array-generics">shim available on GitHub</a>.</p> +</div> + +<p>Sometimes you would like to apply array methods to strings or other array-like objects (such as function {{jsxref("Functions/arguments", "arguments", "", 1)}}). By doing this, you treat a string as an array of characters (or otherwise treat a non-array as an array). For example, in order to check that every character in the variable <var>str</var> is a letter, you would write:</p> + +<pre class="brush: js">function isLetter(character) { + return character >= 'a' && character <= 'z'; +} + +if (Array.prototype.every.call(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:</p> + +<pre class="brush: js">if (Array.every(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("String")}}.</p> + +<p>These are <strong>not</strong> part of ECMAScript standards (though the ES2015 {{jsxref("Array.from()")}} can be used to achieve this). The following is a shim to allow its use in all browsers:</p> + +<pre class="brush: js">// Assumes Array extras already present (one may use polyfills for these as well) +(function() { + 'use strict'; + + var i, + // We could also build the array of methods with the following, but the + // getOwnPropertyNames() method is non-shimable: + // Object.getOwnPropertyNames(Array).filter(function(methodName) { + // return typeof Array[methodName] === 'function' + // }); + methods = [ + 'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift', + 'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf', + 'forEach', 'map', 'reduce', 'reduceRight', 'filter', + 'some', 'every', 'find', 'findIndex', 'entries', 'keys', + 'values', 'copyWithin', 'includes' + ], + methodCount = methods.length, + assignArrayGeneric = function(methodName) { + if (!Array[methodName]) { + var method = Array.prototype[methodName]; + if (typeof method === 'function') { + Array[methodName] = function() { + return method.call.apply(method, arguments); + }; + } + } + }; + + for (i = 0; i < methodCount; i++) { + assignArrayGeneric(methods[i]); + } +}()); +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Creating_an_array">Creating an array</h3> + +<p>The following example creates an array, <code>msgArray</code>, with a length of 0, then assigns values to <code>msgArray[0]</code> and <code>msgArray[99]</code>, changing the length of the array to 100.</p> + +<pre class="brush: js">var msgArray = []; +msgArray[0] = 'Hello'; +msgArray[99] = 'world'; + +if (msgArray.length === 100) { + console.log('The length is 100.'); +} +</pre> + +<h3 id="Creating_a_two-dimensional_array">Creating a two-dimensional array</h3> + +<p>The following creates a chess board as a two dimensional array of strings. The first move is made by copying the 'p' in (6,4) to (4,4). The old position (6,4) is made blank.</p> + +<pre class="brush: js">var board = [ + ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r'] ]; + +console.log(board.join('\n') + '\n\n'); + +// Move King's Pawn forward 2 +board[4][4] = board[6][4]; +board[6][4] = ' '; +console.log(board.join('\n')); +</pre> + +<p>Here is the output:</p> + +<pre class="eval">R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +</pre> + +<h3 id="Using_an_array_to_tabulate_a_set_of_values">Using an array to tabulate a set of values</h3> + +<pre class="brush: js">values=[]; +for (x=0; x<10; x++){ + values.push([ + 2**x, + 2*x**2 + ]) +}; +console.table(values)</pre> + +<p>Results in</p> + +<pre class="eval">0 1 0 +1 2 2 +2 4 8 +3 8 18 +4 16 32 +5 32 50 +6 64 72 +7 128 98 +8 256 128 +9 512 162</pre> + +<p>(First column is the (index))</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>New methods added: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New methods added: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>New method added: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li> +</ul> diff --git a/files/hu/web/javascript/reference/global_objects/array/keys/index.html b/files/hu/web/javascript/reference/global_objects/array/keys/index.html new file mode 100644 index 0000000000..2f7c0cebef --- /dev/null +++ b/files/hu/web/javascript/reference/global_objects/array/keys/index.html @@ -0,0 +1,77 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Reference/Global_Objects/Array/keys +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Prototype + - kulcs + - metódus + - tömb +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +<div>{{JSRef}}</div> + +<p>A <code><strong>keys()</strong></code> metódus egy új <code><strong>Array Iterator</strong></code> objektummal tér vissza, amely a tömb indexeihez tartozó kulcsokat tartalmazza.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</div> + +<p class="hidden">Az ehhez az interaktív példához tartozó forrás egy GitHub repozitoriban található. Ha szeretnél közreműködni az interaktív példa projektben, kérjük, klónozd a <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> repozitorit és küldj egy pull request-et.</p> + +<h2 id="Szintaxis">Szintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.keys()</pre> + +<h3 id="Visszatérési_érték">Visszatérési érték</h3> + +<p>Egy új {{jsxref("Array")}} iterátor objektum.</p> + +<h2 id="Példák">Példák</h2> + +<h3 id="A_kulcs_iterátor_nem_hagyja_figyelmen_kívül_az_üres_helyeket">A kulcs iterátor nem hagyja figyelmen kívül az üres helyeket</h3> + +<pre class="brush: js">var arr = ['a', , 'c']; +var sparseKeys = Object.keys(arr); +var denseKeys = [...arr.keys()]; +console.log(sparseKeys); // ['0', '2'] +console.log(denseKeys); // [0, 1, 2] +</pre> + +<h2 id="Specifikációk">Specifikációk</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikáció</th> + <th scope="col">Státusz</th> + <th scope="col">Megjegyzés</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Kezdeti definíció.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Böngésző_kompatibilitás">Böngésző kompatibilitás</h2> + +<div> +<div class="hidden">Az itt található kompatibilitási táblázat struktúrált adatok alapján lett létrehozva. Ha szeretnél hozzájárulni az adatokhoz, akkor töltsd le a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> repozitorit, és küldj egy pull request-et.</div> + +<p>{{Compat("javascript.builtins.Array.keys")}}</p> +</div> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iterációs protokollok</a></li> +</ul> diff --git a/files/hu/web/javascript/reference/global_objects/array/of/index.html b/files/hu/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..ff3af4288a --- /dev/null +++ b/files/hu/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,94 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +tags: + - tömb +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<p>Az <code><strong>Array.of()</strong></code> metódus egy új <code>Array</code> példányt hoz létre változó számú argumentumokból, azok számától és típusától függetlenül.</p> + +<p>Az <code><strong>Array.of()</strong></code> és az <code><strong>Array</strong></code> konstruktor működése között az a különbség, hogy máshogy hasznája az argumentumként megadott egész számokat: az <code><strong>Array.of(7)</strong></code> létrehoz egy új tömböt, melynek az egyetlen eleme a <code>7</code>, ezzel szemben az <code><strong>Array(7)</strong></code> egy olyan üres tömböt hoz létre, melynek a <code>length</code> property-je: 7 (<strong>Megjegyzés:</strong> ez valójában egy <code>7</code> üres elemű (empty) tömböt jelent, nem olyat, melynek az elemei ténylegesen <code>undefined</code> értékeket tartalmaznának).</p> + +<pre class="brush: js">Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // 7 üres elemű tömb: [empty × 7] +Array(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Szintakszis">Szintakszis</h2> + +<pre class="syntaxbox">Array.of(<var>elem0</var>[, <var>elem1</var>[, ...[, <var>elemN</var>]]])</pre> + +<h3 id="Paraméterek">Paraméterek</h3> + +<dl> + <dt><code>elem<em>N</em></code></dt> + <dd>Elemek, melyeket a tömb tartalmazni fog</dd> +</dl> + +<h3 id="Visszatérési_érték">Visszatérési érték</h3> + +<p>Egy új {{jsxref("Array")}} példány.</p> + +<h2 id="Leírás">Leírás</h2> + +<p>Ez a függvény szabványos az ECMAScript 2015 óta. További részletekért lásd az <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> és az <code>Array.from</code> proposal</a>-t és a <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a>-t.</p> + +<h2 id="Példák">Példák</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>A következő kód lefuttatása után az <code>Array.of()</code> hasznáható lesz, amennyiben a kliens ezt natíven nem támogatja.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + }; +} +</pre> + +<h2 id="Specifikációk">Specifikációk</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Kezdeti definíció.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Böngésző_kompatibilitás">Böngésző kompatibilitás</h2> + +<div> +<div class="hidden">A kompatibilitási táblázat ezen az oldalon struktúrált adatokból generált. Amennyiben hozzá kívánsz járulni ezen adatok frissítéséhez, kérlek látogasd meg a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> repository-t és küldj nekünk egy pull requestet.</div> + +<p>{{Compat("javascript.builtins.Array.of")}}</p> +</div> + +<h2 id="Lásd_még">Lásd még:</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/hu/web/javascript/reference/global_objects/array/sort/index.html b/files/hu/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..408507ddd8 --- /dev/null +++ b/files/hu/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,294 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Global_Objects/Array/sort +tags: + - Prototípus + - Rendezés + - metódus + - tömb +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +<div>{{JSRef}}</div> + +<p>A <code><strong>sort()</strong></code> eljárás egy tömb elemeit rendezi <em>helyben, és visszaadja a tömböt.</em> Egy rendezés nem teljesen <a href="https://en.wikipedia.org/wiki/Sorting_algorithm#Stability">stabil</a>. Az alapértelmezett rendezési sorrend függ a sztring Unicode táblában való elhelyezkedésétől.</p> + +<pre class="brush: js">var fruits = ['cherries', 'apples', 'banana']; +fruits.sort(); // ['apple', 'banana', 'cherries'] + +var scores = [1, 10, 21, 2]; +scores.sort(); // [1, 10, 2, 21] +// Figyeld meg,hogy a 10 a 2 előtt jön, +// mivel a '10' hamarabb van,mint '2' a Unicode sorolás szerint. + +var things = ['word', 'Word', '1 Word', '2 Words']; +things.sort(); // ['1 Word', '2 Words', 'Word', 'word'] +// A Unicode-ban, a számok hamarabb kerülnek sorra mint a nagybetűk, +// de, azok hamarabb vannak,mint a kisbetűk. +</pre> + +<h2 id="Szintaxis">Szintaxis</h2> + +<pre class="syntaxbox"><em>arr</em>.sort() <em>arr</em>.sort(<var>compareFunction</var>) +</pre> + +<h3 id="Paraméterek">Paraméterek</h3> + +<dl> + <dt><code>compareFunction</code> {{optional_inline}}</dt> + <dd>Meghatároz egy függvényt, amely definiálja a rendezési sorrendet. Ha elhagyjuk, a tömb rendezése az egyes betűk <a href="https://developer.mozilla.org/hu/docs/Web/JavaScript/Guide/Grammar_and_types">Unicode</a> táblában való elhelyezkedése alapján történik meg.</dd> +</dl> + +<h3 id="Visszatérési_érték">Visszatérési érték</h3> + +<p>A rendezett tömb. Vegyük figyelembe, hogy a rendezés helyben történt és nem készült másolat a tömbről.</p> + +<h2 id="Leírás">Leírás</h2> + +<p><code>Ha a compareFunction</code> nem mellékelt, akkor az elemek rendezése úgy zajlik, hogy először átkonvertálja sztringgé, majd összehasonlítja a Unicode karakter sorrendet. Például, "Banana" hamarabb lesz,mint "cherry". Szám-sorrendben a 9 hamarabb lesz 80-nál, de mivel a számok átkonvertálódnak sztringgé, "80" hamarabb lesz "9"-nél a Unicode sorolás szerint.</p> + +<p>Ha <code>compareFunction</code> mellékelt, a tömb elemei rendezésre kerülnek az összehasonlító függvény visszatérési értéke alapján. Ha a és b elemek összehasonlításra kerülnek:</p> + +<ul> + <li>Ha <code>compareFunction(a, b)</code> kisebb mint 0, akkor a kisebb indexet kap,mint <code>b</code>, szóval a előre kerül.</li> + <li>Ha <code>compareFunction(a, b)</code> 0-t ad vissza, akkor a-t és b-t hagyjuk változatlanul,de a többi elemet rendezzük. Megjegyzés: az ECMAscript szabvány nem garantálja ezt a viselkedést,és hogy nem minden böngésző (például: Mozilla verziók,melyek 2003 körüliek) támogatja.</li> + <li>Ha <code>compareFunction(a, b)</code> nagyobb mint 0, rendezze b-t kisebb indexre mint a.</li> + <li><code>compareFunction(a, b)</code> mindig ugyanazt az értéket kellene visszaadja, amikor a jellemző a-b párost kapja meg paraméterként. Ha következetlen értéket ad vissza, akkor a rendezési sorrend "undefined".</li> +</ul> + +<p>Szóval, az összehasonlító függvény így néz ki:</p> + +<pre class="brush: js">function compare(a, b) { + if (a kisebb mint b a sorrend kritéria szerint) { + return -1; + } + if (a nagyobb mint b a sorrend kritéria szerint) { + return 1; + } + // a-nak egyenlőnek kell lennie b-vel + return 0; +} +</pre> + +<p>To compare numbers instead of strings, the compare function can simply subtract <code>b</code> from <code>a</code>. The following function will sort the array ascending (if it doesn't contain <code>Infinity</code> and <code>NaN</code>):</p> + +<pre class="brush: js">function compareNumbers(a, b) { + return a - b; +} +</pre> + +<p>The <code>sort</code> method can be conveniently used with {{jsxref("Operators/function", "function expressions", "", 1)}} (and <a href="/en-US/docs/Web/JavaScript/Guide/Closures">closures</a>):</p> + +<pre class="brush: js">var numbers = [4, 2, 5, 1, 3]; +numbers.sort(function(a, b) { + return a - b; +}); +console.log(numbers); + +// [1, 2, 3, 4, 5] +</pre> + +<p>Objektumok is rendezhetőek, ha megadjuk az egyik tulajdonságát.</p> + +<pre class="brush: js">var items = [ + { name: 'Edward', value: 21 }, + { name: 'Sharpe', value: 37 }, + { name: 'And', value: 45 }, + { name: 'The', value: -12 }, + { name: 'Magnetic', value: 13 }, + { name: 'Zeros', value: 37 } +]; + +// sort by value +items.sort(function (a, b) { + return a.value - b.value; +}); + +// sort by name +items.sort(function(a, b) { + var nameA = a.name.toUpperCase(); // nagybetűk és kisbetűk elhagyása + var nameB = b.name.toUpperCase(); // nagybetűk és kisbetűk elhagyása + if (nameA < nameB) { + return -1; + } + if (nameA > nameB) { + return 1; + } + + // a neveknek egyeznie kell + return 0; +});</pre> + +<h2 id="Példák">Példák</h2> + +<h3 id="Tömbök_készítésemegjelenítése_és_rendezése">Tömbök készítése,megjelenítése és rendezése</h3> + +<p>A következő példa négy tömböt készít, megjeleníti az eredeti tömböt, majd a rendezett tömböket. A numerikus tömbök először nem,azután használva a compare függvényt rendezésre kerülnek.</p> + +<pre class="brush: js">var stringArray = ['Blue', 'Humpback', 'Beluga']; +var numericStringArray = ['80', '9', '700']; +var numberArray = [40, 1, 5, 200]; +var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200]; + +function compareNumbers(a, b) { + return a - b; +} + +console.log('stringArray:', stringArray.join()); +console.log('Sorted:', stringArray.sort()); + +console.log('numberArray:', numberArray.join()); +console.log('Sorted without a compare function:', numberArray.sort()); +console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers)); + +console.log('numericStringArray:', numericStringArray.join()); +console.log('Sorted without a compare function:', numericStringArray.sort()); +console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers)); + +console.log('mixedNumericArray:', mixedNumericArray.join()); +console.log('Sorted without a compare function:', mixedNumericArray.sort()); +console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers)); +</pre> + +<p>This example produces the following output. As the output shows, when a compare function is used, numbers sort correctly whether they are numbers or numeric strings.</p> + +<pre>stringArray: Blue,Humpback,Beluga +Sorted: Beluga,Blue,Humpback + +numberArray: 40,1,5,200 +Sorted without a compare function: 1,200,40,5 +Sorted with compareNumbers: 1,5,40,200 + +numericStringArray: 80,9,700 +Sorted without a compare function: 700,80,9 +Sorted with compareNumbers: 9,80,700 + +mixedNumericArray: 80,9,700,40,1,5,200 +Sorted without a compare function: 1,200,40,5,700,80,9 +Sorted with compareNumbers: 1,5,9,40,80,200,700 +</pre> + +<h3 id="Nem-ASCII_karakterek_rendezése">Nem-ASCII karakterek rendezése</h3> + +<p>For sorting strings with non-ASCII characters, i.e. strings with accented characters (e, é, è, a, ä, etc.), strings from languages other than English: use {{jsxref("String.localeCompare")}}. This function can compare those characters so they appear in the right order.</p> + +<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; +items.sort(function (a, b) { + return a.localeCompare(b); +}); + +// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé'] +</pre> + +<h3 id="Rendezés_map-al">Rendezés map-al</h3> + +<p>The <code>compareFunction</code> can be invoked multiple times per element within the array. Depending on the <code>compareFunction</code>'s nature, this may yield a high overhead. The more work a <code>compareFunction</code> does and the more elements there are to sort, the wiser it may be to consider using a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> for sorting. The idea is to walk the array once to extract the actual values used for sorting into a temporary array, sort the temporary array and then walk the temporary array to achieve the right order.</p> + +<pre class="brush: js">// the array to be sorted +var list = ['Delta', 'alpha', 'CHARLIE', 'bravo']; + +// temporary array holds objects with position and sort-value +var mapped = list.map(function(el, i) { + return { index: i, value: el.toLowerCase() }; +}) + +// sorting the mapped array containing the reduced values +mapped.sort(function(a, b) { + return +(a.value > b.value) || +(a.value === b.value) - 1; +}); + +// container for the resulting order +var result = mapped.map(function(el){ + return list[el.index]; +}); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Böngésző_kompatibilitás">Böngésző kompatibilitás</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funkció</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Alap támogatás</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funkció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Alap támogátás</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> +</ul> diff --git a/files/hu/web/javascript/reference/global_objects/error/index.html b/files/hu/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..f27374e30c --- /dev/null +++ b/files/hu/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,218 @@ +--- +title: Error +slug: Web/JavaScript/Reference/Global_Objects/Error +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +<div>{{JSRef}}</div> + +<p>Az <code>Error</code> objektumok futásidejű hiba során keletkeznek. Továbbá ezek az alapjai a saját készítésű hibaobjektumoknak is. Később olvashatsz a beépített hiba típusokról is.</p> + +<h2 id="Leírás">Leírás</h2> + +<p>A futásidejű hibák során <code>Error</code> objektumok keletkezhetnek, illetve érkezhetnek.</p> + +<h3 id="Hiba_típusok">Hiba típusok</h3> + +<p>A generikus <code>Error</code> konstruktor mellett, A JavaScript-ben más hiba konstruktorok is léteznek. A kliens-oldali kivételek listájához, lásd, a <a href="/en-US/docs/Web/JavaScript/Guide/Statements#Exception_handling_statements">Kivételek kezelése</a> fejezetet.</p> + +<dl> + <dt>{{JSxRef("EvalError")}}</dt> + <dd>Egy olyan hibaobjektum példányát hozza létre, ami az {{JSxRef("eval", "eval()")}} globális függvénnyel kapcsolatos.</dd> + <dt>{{JSxRef("RangeError")}}</dt> + <dd>Egy olyan hibaobjektum példányát hozza létre, ami akkor történik, ha valamelyik szám típusú változó az érvényes értékkészleten kívűlre esik.</dd> + <dt>{{JSxRef("ReferenceError")}}</dt> + <dd>Egy olyan hibaobjektum példányát hozza létre, ami akkor történik, ha érvénytelen hivatkozásra történik hivatkozás.</dd> + <dt>{{JSxRef("SyntaxError")}}</dt> + <dd>Egy olyan hibaobjektum példányát hozza létre, ami egy szintaktikai hibát jelez.</dd> + <dt>{{JSxRef("TypeError")}}</dt> + <dd>Egy olyan hibaobjektum példányát hozza létre, ami akkor keletkezik, ha a változó, vagy paraméter típusa nem megfelelő, vagy érvénytelen.</dd> + <dt>{{JSxRef("URIError")}}</dt> + <dd>Egy olyan hibaobjektum példányát hozza létre, ami akkor keletkezik, ha az {{JSxRef("encodeURI", "encodeURI()")}}, vagy a {{JSxRef("decodeURI", "decodeURI()")}} függvények érvénytelen bemeneti paramétereket kapnak.</dd> + <dt>{{JSxRef("AggregateError")}}</dt> + <dd>Egy olyan hibaobjektum példányát hozza létre, ami egyszerre több hibát foglal magába. Ilyen objektum akkor jön létre, amikor egy függvényben egyidejűleg több hiba is történik. Például.: {{JSxRef("Promise.any()")}}.</dd> + <dt>{{JSxRef("InternalError")}} {{non-standard_inline}}</dt> + <dd>Egy olyan hibaobjektum példányát hozza létre, ami akkor jön létre, amikor a JavaScript motorjában belső hiba keletkezik. Pl.: "too much recursion" ("Túl sok rekurzió").</dd> +</dl> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Error"><code>Error()</code></a></dt> + <dd>Egy új <code>Error</code> objektumot hoz létre.</dd> +</dl> + +<h2 id="Statikus_függvények">Statikus függvények</h2> + +<dl> + <dt>{{JSxRef("Error.captureStackTrace()")}}</dt> + <dd>Egy nem-standard <strong>V8</strong> függvény, ami létrehoz egy {{JSxRef("Error.prototype.stack", "stack")}} tagváltozót az Error példányon.</dd> +</dl> + +<h2 id="Példány_tagváltozói">Példány tagváltozói</h2> + +<dl> + <dt>{{jsxref("Error.prototype.message")}}</dt> + <dd>Rövid hibaüzenet.</dd> + <dt>{{jsxref("Error.prototype.name")}}</dt> + <dd>A hiba neve.</dd> + <dt>{{jsxref("Error.prototype.description")}}</dt> + <dd>Egy nem-standard Microsoft tagváltozó a hiba leírásához. Hasonlít a {{jsxref("Error.prototype.message", "message")}}-hez.</dd> + <dt>{{jsxref("Error.prototype.number")}}</dt> + <dd>Egy nem-standard Microsoft tagváltozó a hiba számához.</dd> + <dt>{{jsxref("Error.prototype.fileName")}}</dt> + <dd>Egy nem-standard Mozilla tagváltozó, ami a hibát okozó fájl útvonalát tartalmazza.</dd> + <dt>{{jsxref("Error.prototype.lineNumber")}}</dt> + <dd>Egy nem-standard Mozilla tagváltozó, ami a hibát okozó fájl azon sorát jelöli, ahonnan a hiba származik.</dd> + <dt>{{jsxref("Error.prototype.columnNumber")}}</dt> + <dd>Egy nem-standard Mozilla tagváltozó, ami a hibát tartalmazó sor azon oszlopát (karakterét) jelöli, ahonnan a hiba származik.</dd> + <dt>{{jsxref("Error.prototype.stack")}}</dt> + <dd>Egy nem-standard Mozilla tagváltozó ami a stacktrace-t tartalmazza (A hiba nyomonkövetése a veremen).</dd> +</dl> + +<h2 id="Példány_függvények">Példány függvények</h2> + +<dl> + <dt>{{jsxref("Error.prototype.toString()")}}</dt> + <dd>Egy string-gel tér vissza, ami leírja az objektumot. Ez a függvény felüldefiniálja a {{jsxref("Object.prototype.toString()")}} fügvényt.</dd> +</dl> + +<h2 id="Példák">Példák</h2> + +<h3 id="Generikus_hiba_keletkezése">Generikus hiba keletkezése</h3> + +<p>Az <code>Error</code> objektumot általában akkor érdemes létrehozni, ha azt utána használjuk, vagy eldobjuk a {{JSxRef("Statements/throw", "throw")}} kulcsszó segítségével. Az ilyen hibákat a {{JSxRef("Statements/try...catch", "try...catch")}} szerkezettel lehet könnyedén kezelni:</p> + +<pre class="brush: js; notranslate">try { + throw new Error('Whoops!') +} catch (e) { + console.error(e.name + ': ' + e.message) +} +</pre> + +<h3 id="Különleges_hibák_kezelése">Különleges hibák kezelése</h3> + +<p>A hiba objektum {{JSxRef("Object.prototype.constructor", "constructor")}} tagváltozójával, illetve modern JavaScript motor használata esetén, a {{JSxRef("Operators/instanceof", "instanceof")}} kulcsszóval lehetséges a hiba objektum konkrét típusát is lekérdezni. Ezzel leszűkíthető a hibakezelés konkrét hibatípusokra:</p> + +<pre class="brush: js; notranslate">try { + foo.bar() +} catch (e) { + if (e instanceof EvalError) { + console.error(e.name + ': ' + e.message) + } else if (e instanceof RangeError) { + console.error(e.name + ': ' + e.message) + } + // ... etc +} +</pre> + +<h3 id="Saját_hiba_típusok">Saját hiba típusok</h3> + +<p>Elképzelhető, hogy saját hibatípust szereténk készíteni, ami az <code>Error</code> objektumból származik. Ezáltal tudjuk használni a <code>throw new MyError()</code> kifejezést a hiba jelzéséhez, és az <code>instanceof MyError</code> -t a különleges hiba kezeléséhez. Ezzel biztosítható a szebb és konzisztensebb hibakezelés. </p> + +<p>A kérdéskörről olvashatsz bővebben a <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript">"What's a good way to extend Error in JavaScript?"</a> című téma alatt a StackOverflow fórumán.</p> + +<h4 id="ES6_Saját_Error_Osztály">ES6 Saját Error Osztály</h4> + +<div class="blockIndicator warning"> +<p>7-es, vagy régebbi Babel verziók képesek a <code>CustomError</code> osztályfüggvények kezelésére, de csak akkor, ha azokat at <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a>-vel megfelelően deklarálták. Máskülönben, a Babel régebbi verziói és más fordítók nem tudják kezelni az alábbi kódrészletet <a href="https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend">hozzáadott konfiguráció</a> nélkül.</p> +</div> + +<div class="blockIndicator note"> +<p>Egyes böngészőkben előfordul a <code>CustomError</code> konstruktor a stacktrace-ben, ha ES2015-ös osztályokat használunk.</p> +</div> + +<pre class="brush: js notranslate">class CustomError extends Error { + constructor(foo = 'bar', ...params) { + // Pass remaining arguments (including vendor specific ones) to parent constructor + super(...params) + + // Maintains proper stack trace for where our error was thrown (only available on V8) + if (Error.captureStackTrace) { + Error.captureStackTrace(this, CustomError) + } + + this.name = 'CustomError' + // Custom debugging information + this.foo = foo + this.date = new Date() + } +} + +try { + throw new CustomError('baz', 'bazMessage') +} catch(e) { + console.error(e.name) //CustomError + console.error(e.foo) //baz + console.error(e.message) //bazMessage + console.error(e.stack) //stacktrace +}</pre> + +<h4 id="ES5_Saját_Error_Objektumok">ES5 Saját Error Objektumok</h4> + +<div class="warning"> +<p><strong>Minden</strong> böngészőben előfordul a <code>CustomError</code> konstruktor a stacktrace-ben, ha prototípus alapján deklaráljuk azt.</p> +</div> + +<pre class="brush: js notranslate">function CustomError(foo, message, fileName, lineNumber) { + var instance = new Error(message, fileName, lineNumber); + instance.name = 'CustomError'; + instance.foo = foo; + Object.setPrototypeOf(instance, Object.getPrototypeOf(this)); + if (Error.captureStackTrace) { + Error.captureStackTrace(instance, CustomError); + } + return instance; +} + +CustomError.prototype = Object.create(Error.prototype, { + constructor: { + value: Error, + enumerable: false, + writable: true, + configurable: true + } +}); + +if (Object.setPrototypeOf){ + Object.setPrototypeOf(CustomError, Error); +} else { + CustomError.__proto__ = Error; +} + +try { + throw new CustomError('baz', 'bazMessage'); +} catch(e){ + console.error(e.name); //CustomError + console.error(e.foo); //baz + console.error(e.message); //bazMessage +}</pre> + +<h2 id="Specifikációk">Specifikációk</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Böngészőkompatibilitás">Böngészőkompatibilitás</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Error")}}</p> +</div> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li>{{JSxRef("Statements/throw", "throw")}}</li> + <li>{{JSxRef("Statements/try...catch", "try...catch")}}</li> +</ul> diff --git a/files/hu/web/javascript/reference/global_objects/függvény/index.html b/files/hu/web/javascript/reference/global_objects/függvény/index.html new file mode 100644 index 0000000000..2e1f19b7c6 --- /dev/null +++ b/files/hu/web/javascript/reference/global_objects/függvény/index.html @@ -0,0 +1,112 @@ +--- +title: Függvény +slug: Web/JavaScript/Reference/Global_Objects/Függvény +tags: + - Függvény + - JavaScript + - Osztály +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p>Minden JavaScript függvény tulajdonképpen egy <code>Function</code> objektum. Ez látható a következő kódnál, amely igazat ad vissza: <code>(function(){}).constructor === Function</code>.</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{jsxref("Function/Function", "Function()")}}</dt> + <dd>Létrehoz egy új <code>Function</code> objektumot. A konstruktor közvetlen meghívásával dinamikusan hozhatók létre függvények, de ez biztonsági és az {{jsxref("eval")}}hoz hasonló (de sokkal kevésbé jelentős) teljesítménybeli problémáktól szenved. Viszont, az evaltól ellentétben, a <code>Function</code> konstruktor olyan függvényeket hoz létre, melyek mindig a globális hatókörben hajtódnak végre.</dd> +</dl> + +<h2 id="Példánytulajdonságok">Példánytulajdonságok</h2> + +<dl> + <dt>{{jsxref("Function.arguments")}}</dt> + <dd>A függvénynek átadott argumentumokból álló tömb.<br> + A {{jsxref("Function")}} elavult tulajdonsága. Helyette az {{jsxref("Functions/arguments", "arguments")}} objektum (a függvényen belül érhető el) használandó.</dd> + <dt>{{jsxref("Function.caller")}}</dt> + <dd>A jelenleg futó függvényt meghívó függvényt adja meg.<br> + Ez a tulajdonság elavult, és csak egyes nem szigorú függvényekben működik.</dd> + <dt>{{jsxref("Function.displayName")}}</dt> + <dd>A függvény megjelenítendő neve.</dd> + <dt>{{jsxref("Function.length")}}</dt> + <dd>Megadja a függvény által várt argumentumok számát.</dd> + <dt>{{jsxref("Function.name")}}</dt> + <dd>A függvény neve.</dd> +</dl> + +<h2 id="Példánymetódusok">Példánymetódusok</h2> + +<dl> + <dt>{{jsxref("Function.prototype.apply()", "Function.prototype.apply(<var>thisArg</var> [, <var>argsArray</var>])")}}</dt> + <dd>Meghív egy függvényt, és beállítja a <code>this</code> értékét a megadott <code><var>thisArg</var></code> értékre. Az argumentumok {{jsxref("Array")}} objektumként adhatók át.</dd> + <dt>{{jsxref("Function.prototype.bind()", "Function.prototype.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]]])")}}</dt> + <dd>Létrehoz egy új függvényt, amely meghívásakor beállítja a <code>this</code> értékét a megadott <code><var>thisArg</var></code> értékre. Az opcionálisan megadható argumentumsor az új függvény meghívásakor átadott argumentumok elé lesz fűzve.</dd> + <dt>{{jsxref("Function.prototype.call()", "Function.prototype.call(<var>thisArg</var>[, <var>arg1</var>, <var>arg2</var>, ...<var>argN</var>])")}}</dt> + <dd>Meghív egy függvényt, és beállítja a <code>this</code> értékét a megadott értékre. Az argumentumok egyszerűen átadhatók.</dd> + <dt>{{jsxref("Function.prototype.toString()", "Function.prototype.toString()")}}</dt> + <dd>Visszaadja a függvény forráskódját ábrázáló karakterláncot.<br> + Felülírja a {{jsxref("Object.prototype.toString")}} metódust.</dd> +</dl> + +<h2 id="Példák">Példák</h2> + +<h3 id="Különbség_a_Function_konstruktor_és_a_függvénydeklaráció_között">Különbség a Function konstruktor és a függvénydeklaráció között</h3> + +<p>A <code>Function</code> konstruktorral létrehozott függvények nem hoznak létre zárványt a létrehozási környezetükhöz, mindig a globális hatókörbe kerülnek. Futtatáskor csak a saját helyi változóit és a globálisakat éri el, a <code>Function</code> konstruktor meghívásakor aktív hatókörben szereplőket nem. Ez különbözik az {{jsxref("eval")}} függvénykifejezésen történő használatától.</p> + +<pre class="brush: js notranslate">var x = 10; + +function createFunction1() { + var x = 20; + return new Function('return x;'); // az |x| a globális |x|-et jelenti +} + +function createFunction2() { + var x = 20; + function f() { + return x; // ez az |x| a fent lévő helyi |x|-et jelenti + } + return f; +} + +var f1 = createFunction1(); +console.log(f1()); // 10 +var f2 = createFunction2(); +console.log(f2()); // 20 +</pre> + +<p>A kód működik a webböngészőkben, de az <code>f1()</code> <code>ReferenceError</code> hibát okoz Node.js-ben, mert az <code>x</code> nem található. Ez azért van, mert a Node legfelső szintű hatóköre nincs a globális hatókörben, és az <code>x</code> a modulra nézve helyi változó lesz.</p> + +<h2 id="Specifikációk">Specifikációk</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Böngészőkompatibilitás">Böngészőkompatibilitás</h2> + +<div> +<div class="hidden">Az oldalon lévő kompatibilitási táblázat strukturált adatokból készül. Ha közreműködnél az adatokban, akkor keresd fel a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> tárolót, és küldj beolvasztási kérést.</div> + +<p>{{Compat("javascript.builtins.Function")}}</p> +</div> + +<h2 id="Lásd_még">Lásd még:</h2> + +<ul> + <li>{{jsxref("Functions", "Függvények és függvényhatókör")}}</li> + <li>{{jsxref("Statements/function", "function utasítás")}}</li> + <li>{{jsxref("Operators/function", "function kifejezés")}}</li> + <li>{{jsxref("Statements/function*", "function* utasítás")}}</li> + <li>{{jsxref("Operators/function*", "function* kifejezés")}}</li> + <li>{{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/hu/web/javascript/reference/global_objects/index.html b/files/hu/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..10b4e99123 --- /dev/null +++ b/files/hu/web/javascript/reference/global_objects/index.html @@ -0,0 +1,192 @@ +--- +title: Standard built-in objects +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.</p> + +<div class="onlyinclude"> +<p>The term "global objects" (or standard built-in objects) here is not to be confused with the <strong>global object</strong>. Here, global objects refer to <strong>objects in the global scope</strong> (but only if ECMAScript 5 strict mode is not used; in that case it returns {{jsxref("undefined")}}). The <strong>global object</strong> itself can be accessed using the {{jsxref("Operators/this", "this")}} operator in the global scope. In fact, the global scope <strong>consists of</strong> the properties of the global object, including inherited properties, if any.</p> + +<p>Other objects in the global scope are either <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">created by the user script</a> or provided by the host application. The host objects available in browser contexts are documented in the <a href="/en-US/docs/Web/API/Reference">API reference</a>. For more information about the distinction between the <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> and core <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h2 id="Standard_objects_by_category">Standard objects by category</h2> + +<h3 id="Value_properties">Value properties</h3> + +<p>These global properties return a simple value; they have no properties or methods.</p> + +<ul> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}} literal</li> +</ul> + +<h3 id="Function_properties">Function properties</h3> + +<p>These global functions—functions which are called globally rather than on an object—directly return their results to the caller.</p> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li> + <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li> +</ul> + +<h3 id="Fundamental_objects">Fundamental objects</h3> + +<p>These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general objects, functions, and errors.</p> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}}</li> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError")}}</li> + <li>{{jsxref("InternalError")}}</li> + <li>{{jsxref("RangeError")}}</li> + <li>{{jsxref("ReferenceError")}}</li> + <li>{{jsxref("SyntaxError")}}</li> + <li>{{jsxref("TypeError")}}</li> + <li>{{jsxref("URIError")}}</li> +</ul> + +<h3 id="Numbers_and_dates">Numbers and dates</h3> + +<p>These are the base objects representing numbers, dates, and mathematical calculations.</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("Math")}}</li> + <li>{{jsxref("Date")}}</li> +</ul> + +<h3 id="Text_processing">Text processing</h3> + +<p>These objects represent strings and support manipulating them.</p> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("RegExp")}}</li> +</ul> + +<h3 id="Indexed_collections">Indexed collections</h3> + +<p>These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.</p> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Int8Array")}}</li> + <li>{{jsxref("Uint8Array")}}</li> + <li>{{jsxref("Uint8ClampedArray")}}</li> + <li>{{jsxref("Int16Array")}}</li> + <li>{{jsxref("Uint16Array")}}</li> + <li>{{jsxref("Int32Array")}}</li> + <li>{{jsxref("Uint32Array")}}</li> + <li>{{jsxref("Float32Array")}}</li> + <li>{{jsxref("Float64Array")}}</li> +</ul> + +<h3 id="Keyed_collections">Keyed collections</h3> + +<p>These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.</p> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> + +<h3 id="Vector_collections">Vector collections</h3> + +<p>{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.</p> + +<ul> + <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> + <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li> + <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint8x16", "SIMD.Uint8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint16x8", "SIMD.Uint16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint32x4", "SIMD.Uint32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool8x16", "SIMD.Bool8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool16x8", "SIMD.Bool16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool32x4", "SIMD.Bool32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool64x2", "SIMD.Bool64x2")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Structured_data">Structured data</h3> + +<p>These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li> + <li>{{jsxref("Atomics")}} {{experimental_inline}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="Control_abstraction_objects">Control abstraction objects</h3> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Generator")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{experimental_inline}} {{jsxref("AsyncFunction")}}</li> +</ul> + +<h3 id="Reflection">Reflection</h3> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Proxy")}}</li> +</ul> + +<h3 id="Internationalization">Internationalization</h3> + +<p>Additions to the ECMAScript core for language-sensitive functionalities.</p> + +<ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> +</ul> + +<h3 id="Non-standard_objects">Non-standard objects</h3> + +<ul> + <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li> + <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li> + <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</li> +</ul> + +<h3 id="Other">Other</h3> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> +</ul> +</div> + +<p> </p> diff --git a/files/hu/web/javascript/reference/global_objects/nan/index.html b/files/hu/web/javascript/reference/global_objects/nan/index.html new file mode 100644 index 0000000000..16d2c13c79 --- /dev/null +++ b/files/hu/web/javascript/reference/global_objects/nan/index.html @@ -0,0 +1,96 @@ +--- +title: NaN +slug: Web/JavaScript/Reference/Global_Objects/NaN +tags: + - JavaScript + - NaN + - Referencia + - Változó +translation_of: Web/JavaScript/Reference/Global_Objects/NaN +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>A globális <code><strong>NaN</strong></code> egy olyan változó, ami a Not-A-Number típusú értéket reprezentálja.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Leírás">Leírás</h2> + +<p>A <code>NaN</code> a <em>globális objektum </em>része. Más szavakkal a globális scope egyik változója.</p> + +<p>A <code>NaN</code> eredeti jelentése: Not-A-Number (nem szám). Értéke a {{jsxref("Number.NaN")}}-nal egyenlő. Modern böngészőkben a <code>NaN</code> nem beállítható, nem írható változó. Ellenkező esetben sem tanácsolt felüldefiniálni. A <code>NaN</code> közvetlen használata egy programban igen ritka.</p> + +<p>Öt különböző típusú műveletet különböztethetünk meg, aminek az eredménye <code>NaN</code>:</p> + +<ul> + <li>A szám nem értelmezhető (pl.: <code>parseInt("blabla")</code> vagy <code>Number(undefined)</code>)</li> + <li>Olyan matematikai művelet, ahol a végeredmény nem valós szám (pl.: <code>Math.sqrt(-1)</code>)</li> + <li>Olyan művelet, ahol bármelyik operandus maga is <code>NaN</code> (pl.: <code>7 ** NaN</code>)</li> + <li>Nem meghatározható alak (pl.: <code>0 * Infinity</code>, vagy <code>undefined + undefined</code>)</li> + <li>Bármilyen művelet, ami szöveggel operál és nem összeadás, vagy hozzáfűzés (pl.: <code>"foo" / 3</code>)</li> +</ul> + +<h2 id="Példák">Példák</h2> + +<h3 id="Tesztelés_NaN_esetre">Tesztelés NaN esetre</h3> + +<p>A <code>NaN</code> nem összehasonlítható (az <code>==</code>, <code>!=</code>, <code>===</code>, és <code>!==</code> operátorokkal) semmilyen más értékkel. -- beleértve magát a <code>NaN</code> értéket. Ahhoz, hogy valamiről biztosan eldöntsük, hogy <code>NaN</code> a {{jsxref("Number.isNaN()")}}, illetve a {{jsxref("Global_Objects/isNaN", "isNaN()")}} függvényeket használhatjuk. Alternatívaként összehasonlíthatjuk a változót saját magával, mert a <code>NaN</code>, és csak is a <code>NaN</code> az az érték, ami nem egyenlő önmagával.</p> + +<pre class="brush: js notranslate">NaN === NaN; // false +Number.NaN === NaN; // false +isNaN(NaN); // true +isNaN(Number.NaN); // true +Number.isNaN(NaN); // true + +function valueIsNaN(v) { return v !== v; } +valueIsNaN(1); // false +valueIsNaN(NaN); // true +valueIsNaN(Number.NaN); // true +</pre> + +<p>Fontos felhívni a figyelmet az <code>isNaN()</code> és a <code>Number.isNaN()</code> közötti különbséget: míg az előbbi <code>true</code>-val tér vissza akkor is, ha az érték éppen <code>NaN</code>, és akkor is ha az a kiértékelés után <code>NaN</code>-ná válik, úgy az utóbbi csak akkor tér vissza <code>true</code>-val, ha az érték éppen <code>NaN</code>:</p> + +<pre class="brush: js notranslate">isNaN('hello world'); // true +Number.isNaN('hello world'); // false +</pre> + +<p>Továbbá, bizonyos tömbfüggvények nem használhatók a <code>NaN</code> keresésére, míg vannak, amik igen.</p> + +<pre class="brush: js notranslate">let arr = [2, 4, NaN, 12]; +arr.indexOf(NaN); // -1 (false) +arr.includes(NaN); // true +arr.findIndex(n => Number.isNaN(n)); // 2 +</pre> + +<h2 id="Specifikáció">Specifikáció</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikáció</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Böngésző_kompatibilitás">Böngésző kompatibilitás</h2> + + + +<p>{{Compat("javascript.builtins.NaN")}}</p> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li>{{jsxref("Number.NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> + <li>{{jsxref("isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/hu/web/javascript/reference/global_objects/string/index.html b/files/hu/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..4f91f13008 --- /dev/null +++ b/files/hu/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,307 @@ +--- +title: String +slug: Web/JavaScript/Reference/Global_Objects/String +tags: + - húzáskérvény +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef}}</div> + +<p>A String konstruktorral létrehozhatunk karakterláncokat (szövegek szinte mindenhol jelenlévő reprezentációja)</p> + +<h2 id="Szintaxis">Szintaxis</h2> + +<p>A sztringliterálok a következő formájúak:</p> + +<pre class="syntaxbox">'sztring szöveg' +"sztring szöveg" +"中文 español Deutsch English देवनागरी العربية português বাংলা русский 日本語 norsk bokmål ਪੰਜਾਬੀ 한국어 தமிழ் עברית"</pre> + +<p>Sztringeket létrehozhatunk a <code>String</code> globális objektummal közvetlenül:</p> + +<pre class="syntaxbox">String(valami)</pre> + +<h3 id="Paraméterek">Paraméterek</h3> + +<dl> + <dt><code>valami</code></dt> + <dd>Bármi, ami sztringgé alakítható.</dd> +</dl> + +<h3 id="Sablon_literálok">Sablon literálok</h3> + +<p>Az ECMAScript 2015-tel kezdődően, a sztringliterálok ún. <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literal</a>-ok is lehetnek:</p> + +<pre class="syntaxbox">`hello világ` +`hello! + world!` +`hello ${who}` +tag `<a>${who}</a>`</pre> + +<p>Itt a ${who} helyére a megfelelő érték fog behelyettsítődni.</p> + +<h3 id="Escape_jelölés">Escape jelölés</h3> + +<p>Egyes karakterek összezavarhatnák a JavaScript értelmezőt. Például egy " karakterről hogyan tufná megállapítani, hogy a karakterlánc végét jelöli, vagy annak része? Erre találták ki az escape jelölést, aminek segítségével jelölhetjük, hogy egy karakternek nincs speciális szerepe, nem kell programkódként értelmezni. Lényegében az történik, hogy a feldolgozott karakterláncban az escape karakter (például a \") helyére az annak megfelelő kimenet (") kerül.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Kód</th> + <th scope="col">Kimenet</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\XXX</code></td> + <td>oktális Latin-1 karakter.</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>egyszeres idézőjel</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>idézőjel</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>backslash</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>új sor (soremelés)</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>kocsi-vissza</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>függőleges tabulátor</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>tabulátor</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>lapdobás</td> + </tr> + <tr> + <td><code>\uXXXX</code></td> + <td>unicode kódpont</td> + </tr> + <tr> + <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td> + <td>unicode kódpont {{experimental_inline}}</td> + </tr> + <tr> + <td><code>\xXX</code></td> + <td>hexadecimális Latin-1 karakter</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Más nyelvekkel ellentétben a JavaScript nem különbözteti meg az egyszeres, illetve a kettős idézőjelekkel hivatkozott sztringeket; ezért a fenti escape szekvenciák mind az egyszeres, mind a kettős idézőjelekkel létrehozott sztringek esetén működnek.</p> +</div> + +<h3 id="Hosszú_sztring_literálok">Hosszú sztring literálok</h3> + +<p>Időnként a kódban szerepelhetnek nagyon hosszú sztringek. Vég nélkül folytatódó, illetve a szerkesztőprogram kénye-kedve szerint megtört sorok helyett lehetséges a sztringek több sorba tördelése a tartalom meghagyásával. Erre két mód van.</p> + +<p>Használhatjuk a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition_()">+</a> operátort több füzér összefűzéséhez, így:</p> + +<pre class="brush: js">let longString = "Ez egy elég hosszú String ahhoz " + + "hogy több sorba rendezzem, mert " + + "máskülönben a kód nem olvasható."; +</pre> + +<p>Vagy használható a backslash karakter ("\") az összes sor végén, jelölve, hogy a sztring a következő sorban folytatódik. Győződjünk meg róla, hogy nincs szóköz vagy más karakter a backslash után (soremelés kivételével), akár bekezdésként, különben nem fog működni. Ennek formája a kövekező:</p> + +<pre class="brush: js">let longString = "This is a very long string which needs \ +to wrap across multiple lines because \ +otherwise my code is unreadable."; +</pre> + +<p>Mindkét forma a példában azonos sztringek létrehozását eredményezi.</p> + +<h2 id="Leírás">Leírás</h2> + +<p>A stringek szöveges formában ábrázolt adatok tárolására használhatók. A leggyakoribb sztringműveletek közé tartozik a {{jsxref("String.length", "hossz")}} vizsgálata, azok felépítése és összefűzése a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">+ és += sztring operátor</a>okkal, alfüzérek meglétének és helyének vizsgálata a {{jsxref("String.prototype.indexOf()", "indexOf()")}} metódussal, illetve alfüzérek lekérdezése a {{jsxref("String.prototype.substring()", "substring()")}} metódussal.</p> + +<h3 id="Karakter_hozzáférés">Karakter hozzáférés</h3> + +<p>Kétféle mód van egy sztringben az egyes karakterekhez vakó hozzáféréshez. Az egyik a {{jsxref("String.prototype.charAt()", "charAt()")}} metódus:</p> + +<pre class="brush: js">return 'macska'.charAt(1); // "a"-val tér vissza +</pre> + +<p>A másik mód (bevezetve az ECMAScript 5-ben) tömbszerű objektumként kezeli a sztringet, ahol az egyes karaktereknem számindexek felelnek meg:</p> + +<pre class="brush: js">return 'macska'[1]; // "a"-val tér vissza +</pre> + +<p>Törölni vagy megváltoztatni e tulajdonságokat karakter hozzáféréssel nem lehet a szögletes zárójeles jelölés esetén. A szóban forgó tulajdonságok nem írhatók és nem is konfigurálhatók. (Lásd a {{jsxref("Object.defineProperty()")}} cikket további információért.)</p> + +<h3 id="Sztringek_összehasonlítása">Sztringek összehasonlítása</h3> + +<p>C fejlesztőknek ismerős lehet a <code>strcmp()</code> függvény sztringek összehasonlításához. A JavaScript-ben a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">kisebb és nagyobb operátorok</a> használhatók:</p> + +<pre class="brush: js">var a = 'a'; +var b = 'b'; +if (a < b) { // true + console.log(a + ' kisebb, mint ' + b); +} else if (a > b) { + console.log(a + ' nagyobb, mint ' + b); +} else { + console.log(a + ' és ' + b + ' egyenlők.'); +} +</pre> + +<p>Hasonlót eredményez a {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} metódus, amelyet a <code>String</code> példányok örökölnek.</p> + +<h3 id="Sztring_primitívek_és_String_objektumok_megkülönböztetése">Sztring primitívek és <code>String</code> objektumok megkülönböztetése</h3> + +<p>Jegyezzük meg, hogy a JavaScript különbséget tesz <code>String</code> objektumok és primitív sztring értékek között. (Ugyanez igaz {{jsxref("Boolean")}} és {{jsxref("Global_Objects/Number", "Number")}} objektumokra.)</p> + +<p>Sztringliterálok (egyszeri vagy kettős idézőjellel jelölve) és a <code>String</code> hívásából visszatérő, nem konstruktor kontextusból (azaz, nem a {{jsxref("Operators/new", "new")}} kulcsszó használatával) kapott sztringek primitív sztringek. A JavaScript automatikusan <code>String</code> objektumokká alakítja a primitíveket, hogy eképpen a <code>String</code> objektum metódusai primitív sztringeken is használhatók legyenek. Amikor primitív sztringen hívódik metódus vagy tulajdonság lekérdezés, a JavaScript automatikusan String objektummá alakítja a sztringet és így hívja meg a metódust, illetve a lekérdezést.</p> + +<pre class="brush: js">var s_prim = 'foo'; +var s_obj = new String(s_prim); + +console.log(typeof s_prim); // Konzol kimenet: "string" +console.log(typeof s_obj); // Konzol kimenet: "object" +</pre> + +<p>Sztring primitívek és <code>String</code> objektumok az {{jsxref("Global_Objects/eval", "eval()")}} használatakor is különböző eredményt adnak. Az <code>eval</code> számára átadott primitívek forráskódként vannak kezelve, míg a <code>String</code> objektumok, mint bármely más átadott objektum esetén, az objektum visszaadását eredményezik. Például:</p> + +<pre class="brush: js">var s1 = '2 + 2'; // létrehoz egy sztring primitívet +var s2 = new String('2 + 2'); // létrehoz egy String objektumot +console.log(eval(s1)); // a 4 számmal tér vissza +console.log(eval(s2)); // a "2 + 2" sztringgel tér vissza +</pre> + +<p>Ezen okok miatt a kód hibás működését okozhatja, amikor <code>String</code> a kód String objektumot kap, miközben primitív sztringet vár, bár általában nem szükséges a fejlesztőknek ezzel törődni.</p> + +<p>Egy <code>String</code> objektum mindig átalakítható a primitív megfelelőjére a {{jsxref("String.prototype.valueOf()", "valueOf()")}} metódussal.</p> + +<pre class="brush: js">console.log(eval(s2.valueOf())); // 4-et ad vissza +</pre> + +<div class="note"><strong>Megjegyzés:</strong> Egy másik JavaScript-ben lehetséges megközelítésére a sztringeknek, lásd a <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a> cikket.</div> + +<h2 id="Tulajdonságok">Tulajdonságok</h2> + +<dl> + <dt>{{jsxref("String.prototype")}}</dt> + <dd>Tulajdonságok hozzáadását engedélyezi egy <code>String</code> objektumhoz.</dd> +</dl> + +<h2 id="Metódusok">Metódusok</h2> + +<dl> + <dt>{{jsxref("String.fromCharCode()")}}</dt> + <dd>Unicode értékek meghatározott sorozatával megadott sztringgel tér vissza.</dd> + <dt>{{jsxref("String.fromCodePoint()")}}</dt> + <dd>Kódpontok meghatározott sorozatával megadott sztringgel tér vissza.</dd> + <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt> + <dd>Nyers sablon sztring szerint létrehozott sztringgel tér vissza.</dd> +</dl> + +<h2 id="String_generikus_metódusok"><code>String</code> generikus metódusok</h2> + +<div class="warning"> +<p><strong>A String generikusok nem szabványosak, elavultak és a közeljövőben törlésre kerülnek</strong>.</p> +</div> + +<p>A <code>String</code> példánymetódusok a JavaScript 1.6 óta elérhetők Firefox-ban (<strong>nem</strong> része az ECMAScript szabványnak) a <code>String</code> objektumon bármely objektumon <code>String</code> metódusok alkalmazására:</p> + +<pre class="brush: js">var num = 15; +console.log(String.replace(num, "5", "2")); +</pre> + +<p>A String generikusokról való áttéréshez lásd a <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_string_generics">Warning: String.x is deprecated; use String.prototype.x instead</a> cikket.</p> + +<p>Tömbök generikusai ({{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}}) a tömb ({{jsxref("Array")}}) metódusokra is elérhetők.</p> + +<h2 id="String_példányok"><code>String</code> példányok</h2> + +<h3 id="Tulajdonságok_2">Tulajdonságok</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Tulajdonságok')}}</div> + +<h3 id="Metódusok_2">Metódusok</h3> + +<h4 id="HTML-hez_nem_kapcsolódó_metódusok">HTML-hez nem kapcsolódó metódusok</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</div> + +<h4 id="HTML_wrapper_methods">HTML wrapper methods</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</div> + +<h2 id="Példák">Példák</h2> + +<h3 id="String_konverzió">String konverzió</h3> + +<p>A <code>String</code> használható egy biztonságosabb {{jsxref("String.prototype.toString()", "toString()")}} alternatívaként, mivel {{jsxref("null")}}, {{jsxref("undefined")}}, és {{jsxref("Symbol", "symbol")}} objektumokra is használható. Például:</p> + +<pre class="brush: js">var outputStrings = []; +for (var i = 0, n = inputValues.length; i < n; ++i) { + outputStrings.push(String(inputValues[i])); +} +</pre> + +<h2 id="Specifikációk">Specifikációk</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificáció</th> + <th scope="col">Státusz</th> + <th scope="col">Megjegyzés</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Kezdeti definíció.</td> + </tr> + </tbody> +</table> + +<h2 id="Böngésző_kompatibilitás">Böngésző kompatibilitás</h2> + +<div class="hidden">Ezen az oldalon egy strukturált adatokból generált kompatibilitási táblázat van. Ha hozzájárulnál adatokkal, a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> címen küldj nekünk egy pull request-et.</div> + +<p>{{Compat("javascript.builtins.String",2)}}</p> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li>{{domxref("DOMString")}}</li> + <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a></li> + <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> +</ul> diff --git a/files/hu/web/javascript/reference/index.html b/files/hu/web/javascript/reference/index.html new file mode 100644 index 0000000000..08006f6ab5 --- /dev/null +++ b/files/hu/web/javascript/reference/index.html @@ -0,0 +1,197 @@ +--- +title: JavaScript reference +slug: Web/JavaScript/Reference +tags: + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference +--- +<div>{{JsSidebar}}</div> + +<p>Ez a része a JavaScript szekciónak ténylek tárolójaként szolgál a JavaScript nyelvről az MDN szerverein. Olvass tovább <a href="/en-US/docs/Web/JavaScript/Reference/About">erről a hivatkozásról</a>.</p> + +<h2 id="Globális_objektumok">Globális objektumok</h2> + +<p>Ez a fejezet dokumentálja a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript összes szabványos, beépített objektumait</a>, a metódusaikkal és tulajdonságaikkal együtt.</p> + +<div>{{page('/hu/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}</div> + +<div></div> + +<div> +<h3 id="Értéket_kifejező_objektumok">Értéket kifejező objektumok</h3> + +<ul> + <li>{{JSxRef("Infinity")}}</li> + <li>{{JSxRef("Global_Objects/NaN","NaN")}}</li> + <li>{{JSxRef("undefined")}}</li> + <li>{{JSxRef("globalThis")}}</li> +</ul> + +<h3 id="Függvény_objektumok">Függvény objektumok</h3> + +<ul> + <li>{{JSxRef("Global_Objects/eval", "eval()")}}</li> + <li>{{JSxRef("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{JSxRef("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{JSxRef("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{JSxRef("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{JSxRef("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{JSxRef("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{JSxRef("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{JSxRef("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> +</ul> + +<h3 id="Alapvető_objektumok">Alapvető objektumok</h3> + +<ul> + <li>{{JSxRef("Object")}}</li> + <li>{{JSxRef("Function")}}</li> + <li>{{JSxRef("Boolean")}}</li> + <li>{{JSxRef("Symbol")}}</li> +</ul> + +<h3 id="Hiba_objektumok">Hiba objektumok</h3> + +<ul> + <li>{{JSxRef("Error")}}</li> + <li>{{JSxRef("AggregateError")}}</li> + <li>{{JSxRef("EvalError")}}</li> + <li>{{JSxRef("InternalError")}}</li> + <li>{{JSxRef("RangeError")}}</li> + <li>{{JSxRef("ReferenceError")}}</li> + <li>{{JSxRef("SyntaxError")}}</li> + <li>{{JSxRef("TypeError")}}</li> + <li>{{JSxRef("URIError")}}</li> +</ul> + +<h3 id="Számok_és_Dátumok">Számok és Dátumok</h3> + +<ul> + <li>{{JSxRef("Number")}}</li> + <li>{{JSxRef("BigInt")}}</li> + <li>{{JSxRef("Math")}}</li> + <li>{{JSxRef("Date")}}</li> +</ul> + +<h3 id="Szövegkezelés">Szövegkezelés</h3> + +<ul> + <li>{{JSxRef("String")}}</li> + <li>{{JSxRef("RegExp")}}</li> +</ul> + +<h3 id="Számozott_gyűjtemények_tömbök">Számozott gyűjtemények (tömbök)</h3> + +<ul> + <li>{{JSxRef("Array")}}</li> + <li>{{JSxRef("Int8Array")}}</li> + <li>{{JSxRef("Uint8Array")}}</li> + <li>{{JSxRef("Uint8ClampedArray")}}</li> + <li>{{JSxRef("Int16Array")}}</li> + <li>{{JSxRef("Uint16Array")}}</li> + <li>{{JSxRef("Int32Array")}}</li> + <li>{{JSxRef("Uint32Array")}}</li> + <li>{{JSxRef("Float32Array")}}</li> + <li>{{JSxRef("Float64Array")}}</li> + <li>{{JSxRef("BigInt64Array")}}</li> + <li>{{JSxRef("BigUint64Array")}}</li> +</ul> + +<h3 id="Referált_gyűjtemények_leképezések">Referált gyűjtemények (leképezések)</h3> + +<ul> + <li>{{JSxRef("Map")}}</li> + <li>{{JSxRef("Set")}}</li> + <li>{{JSxRef("WeakMap")}}</li> + <li>{{JSxRef("WeakSet")}}</li> +</ul> + +<h3 id="Adatstruktúrák">Adatstruktúrák</h3> + +<ul> + <li>{{JSxRef("ArrayBuffer")}}</li> + <li>{{JSxRef("SharedArrayBuffer")}}</li> + <li>{{JSxRef("Atomics")}}</li> + <li>{{JSxRef("DataView")}}</li> + <li>{{JSxRef("JSON")}}</li> +</ul> + +<h3 id="Control_absztrakció">Control absztrakció</h3> + +<ul> + <li>{{JSxRef("GeneratorFunction")}}</li> + <li>{{JSxRef("AsyncGeneratorFunction")}}</li> + <li>{{JSxRef("Generator")}}</li> + <li>{{JSxRef("AsyncGenerator")}}</li> + <li>{{JSxRef("AsyncFunction")}}</li> + <li>{{JSxRef("Promise")}}</li> +</ul> + +<h3 id="Reflexió">Reflexió</h3> + +<ul> + <li>{{JSxRef("Reflect")}}</li> + <li>{{JSxRef("Proxy")}}</li> +</ul> + +<h3 id="Nemzetközi_szabványok">Nemzetközi szabványok</h3> + +<ul> + <li>{{JSxRef("Intl")}}</li> + <li>{{JSxRef("Global_Objects/Intl/Collator", "Intl.Collator")}}</li> + <li>{{JSxRef("Global_Objects/Intl/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{JSxRef("Global_Objects/Intl/DisplayNames", "Intl.DisplayNames")}}</li> + <li>{{JSxRef("Global_Objects/Intl/ListFormat", "Intl.ListFormat")}}</li> + <li>{{JSxRef("Global_Objects/Intl/Locale", "Intl.Locale")}}</li> + <li>{{JSxRef("Global_Objects/Intl/NumberFormat", "Intl.NumberFormat")}}</li> + <li>{{JSxRef("Global_Objects/Intl/PluralRules", "Intl.PluralRules")}}</li> + <li>{{JSxRef("Global_Objects/Intl/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li> +</ul> + +<h3 id="Webfejlesztés">Webfejlesztés</h3> + +<ul> + <li>{{JSxRef("WebAssembly")}}</li> + <li>{{JSxRef("WebAssembly.Module")}}</li> + <li>{{JSxRef("WebAssembly.Instance")}}</li> + <li>{{JSxRef("WebAssembly.Memory")}}</li> + <li>{{JSxRef("WebAssembly.Table")}}</li> + <li>{{JSxRef("WebAssembly.CompileError")}}</li> + <li>{{JSxRef("WebAssembly.LinkError")}}</li> + <li>{{JSxRef("WebAssembly.RuntimeError")}}</li> +</ul> +</div> + +<h2 id="Utasítások">Utasítások</h2> + +<p>Ez a fejezet dokumentálja az összes <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript utasítást és deklarációt</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 id="Kifejezések_és_operátorok">Kifejezések és operátorok</h2> + +<p>Ez a fejezet dokumentálja az összes <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript kifejezést és operátort</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 id="Függvények">Függvények</h2> + +<p>Ezen fejezet dokumentációja megmutatja, hogyan dolgozz <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript függvényekkel</a> a saját alkalmazásaid fejlesztéséhez.</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li> +</ul> + +<h2 id="További_referencia_oldalak">További referencia oldalak</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li> +</ul> diff --git a/files/hu/web/javascript/reference/statements/index.html b/files/hu/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..368977efc8 --- /dev/null +++ b/files/hu/web/javascript/reference/statements/index.html @@ -0,0 +1,131 @@ +--- +title: Statements and declarations +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - statements +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.</p> + +<h2 id="Statements_and_declarations_by_category">Statements and declarations by category</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Control_flow">Control flow</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.</dd> + <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>Throws a user-defined exception.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd> +</dl> + +<h3 id="Declarations">Declarations</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Declares a variable, optionally initializing it to a value.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> + <dd>Declares a block scope local variable, optionally initializing it to a value.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> + <dd>Declares a read-only named constant.</dd> +</dl> + +<h3 id="Functions_and_classes">Functions and classes</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>Declares a function with the specified parameters.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/function*", "function*")}}</dt> + <dd>Generators functions enable writing <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Specifies the value to be returned by a function.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/class", "class")}}</dt> + <dd>Declares a class.</dd> +</dl> + +<h3 id="Iterations">Iterations</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd> + <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>Iterates over iterable objects (including <a href="https://developer.mozilla.org/en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="Array">arrays</a>, array-like objects, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="Iterators and generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.</dd> +</dl> + +<h3 id="Others">Others</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/export", "export")}}</dt> + <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/import", "import")}}</dt> + <dd>Used to import functions exported from an external module, another script.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd> +</dl> + +<dl> + <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd>Extends the scope chain for a statement.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: function*, let, for...of, yield, class</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> diff --git a/files/hu/web/javascript/reference/statements/try...catch/index.html b/files/hu/web/javascript/reference/statements/try...catch/index.html new file mode 100644 index 0000000000..4efd7b1278 --- /dev/null +++ b/files/hu/web/javascript/reference/statements/try...catch/index.html @@ -0,0 +1,321 @@ +--- +title: try...catch +slug: Web/JavaScript/Reference/Statements/try...catch +translation_of: Web/JavaScript/Reference/Statements/try...catch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>A <strong><code>try...catch</code> </strong>szerkezet utasítások futtatására, majd a keletkező kivételek érzékelésére, kezelésére való.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}</div> + +<div>Megjegyzés: ebben a cikkben a kivétel szó az angol szaknyelvi exception, blokk pedig a block vagy clause szó fordítása.</div> + +<p class="hidden">Az interaktív példa forrása egy GitHub gyűjteményben található. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Szerkezet">Szerkezet</h2> + +<pre class="syntaxbox">try { + <em>try_statements</em> +} +[catch (<em>exception_var_1</em> if <em>condition_1</em>) { // nem szabványos + <em>catch_statements_1</em> +}] +... +[catch (<em>exception_var_2</em>) { + <em>catch_statements_2</em> +}] +[finally { + <em>finally_statements</em> +}]</pre> + +<dl> + <dt><code>try_statements</code></dt> + <dd>Azok az utasítások, amelyek kivételt válthatnak ki.</dd> +</dl> + +<dl> + <dt><code>catch_statements_1</code>, <code>catch_statements_2</code></dt> + <dd>Azok az utasítások, amelyek akkor hajtódnak végre, ha valami kivételt vált ki a <code>try</code> blokkban.</dd> +</dl> + +<dl> + <dt><code>exception_var_1</code>, <code>exception_var_2</code></dt> + <dd>Annak a változónak a neve, amelyben az utána következő <code>catch</code> blokkban elérhető lesz a kivételobjektum (<code>Exception</code>).</dd> +</dl> + +<dl> + <dt><code>condition_1</code></dt> + <dd>Valamilyen feltétel (mint egy if() kifejezésben).</dd> +</dl> + +<dl> + <dt><code>finally_statements</code></dt> + <dd>Azok az utasítások, amelyeket a <code>try</code> blokk után le kell futtatni, tehát ezek attól függetlenül végrehajtódnak, hogy a <code>try</code> blokkban történt-e kivétel.</dd> +</dl> + +<h2 id="Kifejtés">Kifejtés</h2> + +<p>A <code>try</code> szerkezetnek 3 megjelenési formája van:</p> + +<ol> + <li><code>try...catch</code></li> + <li><code>try...finally</code></li> + <li><code>try...catch...finally</code></li> +</ol> + +<p>A <code>try</code>, a <code>catch</code> és a <code>finally</code> blokk egy vagy több utasításból állhat. A kapcsos zárójelek használata kötelező, még akkor is, ha egy utasításból áll csak a blokk. A <code>try</code> blokk után legalább egy <code>catch</code> vagy <code>finally</code> blokknak kell lennie.:</p> + +<p>A <code>catch</code> blokk tartalmazza azokat az utasításokat, amelyek akkor hajtódnak végre, ha valami kivételt vált ki a <code>try</code> blokkban. Ha valami kivételt vált ki, a try blokk végrehajtása azonnal megszakad, és a catch blokk hajtódik végre. Ha nem történik kivétel, a catch blokk nem hajtódik végre.</p> + +<p>A finally blokk végrehajtása a try és a catch blokk(ok) végrehajtása után, közvetlenül a blokk utáni utasítások előtt. Mindig végrehajtódik, attól függetlenül, hogy a try blokk sikeres volt-e.</p> + +<p>A try szerkezetek egymásba ágyazhatóak. Ha egy beágyazott try blokkhoz nem tartozik catch blokk, az azt tartalmazó try blokkhoz tartozó catch/finally fog végrehajtódni.</p> + +<p>A try szerkezettel a JavaScript kivételeit is lehet kezelni. További információ róluk: <a href="/en-US/docs/Web/JavaScript/Guide" title="en/JavaScript/Guide">JavaScript Guide</a>.</p> + +<h3 id="Feltétel_nélküli_catch_blokk">Feltétel nélküli catch blokk</h3> + +<p>Egyszerű, feltétel nélküli catch blokk esetén bármilyen kivétel váltódik ki, ugyanaz a blokk fog végrehajtódni. Például</p> + +<pre class="brush: js">try { + throw 'myException'; // generates an exception +} +catch (e) { + // statements to handle any exceptions + logMyErrors(e); // pass exception object to error handler +} +</pre> + +<p>A catch blokk használata során meg kell adnunk egy változónevet, ez a változó fogja tárolni a kivételobjektumot. A catch blokkban megadott változó élettartama eltér a szokásostól: a változó a catch blokk végrehajtása előtt jön létre, és a végrehajtás után nem elérhető.</p> + +<h3 id="Feltételes_catch_blokk">Feltételes catch blokk</h3> + +<p>You can also use one or more conditional <code>catch</code> clauses to handle specific exceptions. In this case, the appropriate <code>catch</code> clause is entered when the specified exception is thrown. In the following example, code in the <code>try</code> block can potentially throw three exceptions: {{jsxref("TypeError")}}, {{jsxref("RangeError")}}, and {{jsxref("EvalError")}}. When an exception occurs, control transfers to the appropriate <code>catch</code> clause. If the exception is not one of the specified exceptions and an unconditional <code>catch</code> clause is found, control transfers to that <code>catch</code> clause.</p> + +<p>If you use an unconditional <code>catch</code> clause with one or more conditional <code>catch</code> clauses, the unconditional <code>catch</code> clause must be specified last. Otherwise, the unconditional <code>catch</code> clause will intercept all types of exception before they can reach the conditional ones.</p> + +<p>Emlékeztető: ez a lehetőség nem az ECMAScript szabvány része.</p> + +<pre class="brush: js">try { + myroutine(); // may throw three types of exceptions +} catch (e if e instanceof TypeError) { + // statements to handle TypeError exceptions +} catch (e if e instanceof RangeError) { + // statements to handle RangeError exceptions +} catch (e if e instanceof EvalError) { + // statements to handle EvalError exceptions +} catch (e) { + // statements to handle any unspecified exceptions + logMyErrors(e); // pass exception object to error handler +} +</pre> + +<p>Here is the same "Conditional catch clauses" using code that conforms to ECMAScript specification (obviously it's more verbose, but works everywhere):</p> + +<pre class="brush: js">try { + myroutine(); // may throw three types of exceptions +} catch (e) { + if (e instanceof TypeError) { + // statements to handle TypeError exceptions + } else if (e instanceof RangeError) { + // statements to handle RangeError exceptions + } else if (e instanceof EvalError) { + // statements to handle EvalError exceptions + } else { + // statements to handle any unspecified exceptions + logMyErrors(e); // pass exception object to error handler + } +} +</pre> + +<h3 id="The_exception_identifier">The exception identifier</h3> + +<p>When an exception is thrown in the <code>try</code> block, <em><code>exception_var</code></em> (e.g. the <code>e</code> in <code>catch (e)</code>) holds the value specified by the <code>throw</code> statement. You can use this identifier to get information about the exception that was thrown. As of Firefox 58, when the exception is unused, the identifier can be omitted, as in</p> + +<pre class="brush: js">function isValidJSON(text) { + try { + JSON.parse(text); + return true; + } catch { + return false; + } +} +</pre> + +<p>This identifier is local to the <code>catch</code> clause. That is, it is created when the <code>catch</code> clause is entered, and after the <code>catch</code> clause finishes executing, the identifier is no longer available.</p> + +<h3 id="A_finally_blokk">A <code>finally</code> blokk</h3> + +<p>A finally blokk azokat az utasításokat tartalmazza, amelyeket a catch blokk(ok) után, de a try-catch-finally szerkezet előtt kell végrehajtani. Mindenképpen végrehajtódik, attól függetlenül, hogy a try blokkban váltódott-e ki kivétel. A finally blokk megléte elfogadhatóvá teszi a catch blokk hiányát, de a kivételek megjelennek a blokkon kívül is. Amennyiben hiányzik a catch blokk, először a try-ban kiváltódott kivételek jelennek meg, majd ezután hajtódik végre a finally blokk.</p> + +<p>A finally blokkot gyakran használják a program hiba esetén történő leállása előtti feladatok elvégzésére.</p> + +<p>Enyhén szólva furcsának tűnhet, hogy a JavaScript kivételekhez kapcsolódó részében szerepel egy olyan ág is, ami attól függetlenül végrehajtódik, hogy váltódott-e ki kivétel. Ennek azomban, a látszattal ellentétben van értelme. A hangsúly nem azon van, hogy a finally blokk mindig végrehajtódik, hanem hogy az azt követő utasítások nem feltétlenül.</p> + +<p>Például ha egy másik kivétel váltódik ki egy try-catch blokkon belül, semmilyen más kód ugyanabban a külső try-catch blokkban nem fog végrehajtódni.</p> + +<p>For instance, if another exception occurs inside a try's catch-block, any remaining code in the same outer try-block enclosing that try..catch (or in the main flow, if not in an outer try-block) , will not get executed, since control is immediately transferred to the outer try's catch-block (or the internal error-generator, if not in a try-block). </p> + +<p>Thus, any routine cleanup code done in that enclosed (or the main) section before it exits, will be skipped. However, If the try-block has a finally-block, then that finally-block code will be executed first to permit any such cleanup, and THEN the other try's catch-block (or the error-generator) will get control to handle the second exception. </p> + +<p>Now, if that routine cleanup must be done whether or not the try..catch code succeeds, then if the finally-block only executed after an exception, the same cleanup code would have to be duplicated both inside and outside the finally-block, and therefore there is no reason not to have just the finally-block alone, and let it execute regardless of exceptions or not.</p> + +<p>The following example opens a file and then executes statements that use the file (server-side JavaScript allows you to access files). If an exception is thrown while the file is open, the <code>finally</code> clause closes the file before the script fails. The code in <code>finally</code> also executes upon explicitly returning from <code>try</code> or <code>catch</code> block.</p> + +<pre class="brush: js">openMyFile(); +try { + // tie up a resource + writeMyFile(theData); +} +finally { + closeMyFile(); // always close the resource +} +</pre> + +<h2 id="Példák">Példák</h2> + +<h3 id="Beágyazott_try_blokkok">Beágyazott try blokkok</h3> + +<p>Először is, nézzük meg ezt:</p> + +<pre class="brush: js">try { + try { + throw new Error('hoppácska'); + } + finally { + console.log('finally blokk'); + } +} +catch (ex) { + console.error('külső catch blokk', ex.message); +} + +// Kimenet: +// "finally blokk" +// "külső catch blokk" "hoppácska" +</pre> + +<p>Now, if we already caught the exception in the inner try-block by adding a catch block</p> + +<pre class="brush: js">try { + try { + throw new Error('hoppácska'); + } + catch (ex) { + console.error('belső catch blokk', ex.message); + } + finally { + console.log('finally blokk'); + } +} +catch (ex) { + console.error('outer', ex.message); +} + +// Kimenet: +// "belső catch blokk" "hoppácska" +// "finally blokk" +</pre> + +<p>Most pedig dobjuk tovább a kivételt:</p> + +<pre class="brush: js">try { + try { + throw new Error('hoppácska'); + } + catch (ex) { + console.error('belső catck blokk', ex.message); + throw ex; + } + finally { + console.log('finally blokk'); + } +} +catch (ex) { + console.error('külső catck blokk', ex.message); +} + +// Output: +// "belső catck blokk" "hoppácska" +// "finally blokk" +// "külső catck blokk" "hoppácska" +</pre> + +<p>Minden kivételt csak a legközelebbi catch blokk fog elkapni, kivéve ha innen tovább dobjuk. Ez esetben a belső catch blokkból dobott kivételt a külső try-hez tartozó catch blokk fogja elkapni.</p> + +<h3 id="return_használata_a_finally_blokkban"><code>return</code> használata a finally blokkban</h3> + +<p>Ha a finally blokk értéket ad vissza, ez az érték a teljes try-catch-finally szerkezet vissszatérési értékévé válik, a try és catch blokkokban lévő return utasításoktól függetlenül. Ebbe beletartoznak a catch blokkon belül dobott kivételek is.</p> + +<pre class="brush: js">(function() { + try { + try { + throw new Error('hoppácska'); + } + catch (ex) { + console.error('belső catch blokk', ex.message); + throw ex; + } + finally { + console.log('finally blokk'); + return; + } + } + catch (ex) { + console.error('külső', ex.message); + } +})(); + +// Kimenet: +// "belső catch blokk" "hoppácska" +// "finally blokk"</pre> + +<p>The outer "oops" is not thrown because of the return in the finally block. The same would apply to any value returned from the catch block.</p> + +<h2 id="Specifikációk">Specifikációk</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikáció</th> + <th scope="col">Státusz</th> + <th scope="col">Megjegyzés</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> + <p>Az első leírás. A JavaScript 1.4-ben lett megvalósítva.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.14', 'try statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-try-statement', 'try statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Nem része a jelenleg ECMA-262 szabványnak: Több catch blokk és feltételes bokkok (SpiderMonkey kiterjesztés, JavaScript 1.5).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements.try_catch")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> +</ul> diff --git a/files/hu/web/reference/api/index.html b/files/hu/web/reference/api/index.html new file mode 100644 index 0000000000..37a5f4f1cd --- /dev/null +++ b/files/hu/web/reference/api/index.html @@ -0,0 +1,65 @@ +--- +title: Web Alkalmazásprogramozási Felület Referencia +slug: Web/Reference/API +tags: + - API + - Referencia + - Web + - Web dizájn + - Webfejlesztés +translation_of: Web/Reference/API +--- +<p><span class="seoSummary">A Web az alkalmazásprogramozási felületek (API-ok) széles skáláját kínálja sok különböző hasznos feladat elvégzéséhez segítséget nyújtva. Ezekhez hozzájuthatsz JavaScript kódon keresztül és segítségükkel bármilyen változtatást végrehajthatsz a {{domxref("window")}} -tól és {{domxref("element")}} -tól kezdve egészén bonyolult web grafikák és audio effektekig olyan API-ok segítségével, mint a <a href="/en-US/docs/Web/WebGL">WebGL</a> és a <a href="/en-US/docs/Web_Audio_API">Web Audio</a>.</span></p> + +<p>Minden egyes interfész az összes API-on keresztül megtalálható az <a href="/en-US/docs/Web/API">index-ben.</a></p> + +<p>Ezen kívül még van egy <a href="/en-US/docs/Web/Reference/Events">lista az összes lehetséges eseményről</a> az esemény referenciában.</p> + +<div class="cleared topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/DOM">Dokumentum Objektum Model</a></dt> + <dd>A DOM egy API ami hozzáférést és változtatási lehetőséget nyújt a jelenlegi dokumentumban. Engedélyezi, hogy manipuláld a {{domxref("Node")}}-t és a {{domxref("Element")}}-t. A HTML, az XML és az SVG kiterjesztették, hogy manipulálhass egy adott részüket.</dd> + <dt>Eszköz API-ok</dt> + <dd>Ezek az API-ok segítséget nyújtanak abban, hogy hozzáférést nyerj a hardware különböző funkcióihoz, melyek elérhetőek a Weboldalak és applikációk számára. Pl.: <a href="/en-US/docs/WebAPI/Using_Light_Events">Környezeti Fényérzékelő API</a>, <a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Akkumulátor Állapor API</a>, <a href="/en-US/docs/Using_geolocation" title="Using_geolocation">Földrajzi Helymeghatározó API</a>, <a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Egér Zároló API</a>, <a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a>, <a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Eszköz Orientációs API</a>, <a href="/en-US/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Képernyő Orientációs API</a>, <a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibrációs API</a>.</dd> + <dt>Kommunikációs API-ok</dt> + <dd>Ezek az API-ok engedélyezik a weboldalaknak vagy applikációknak, hogy más oldalakkal vagy eszközökkel kommunikáljanak. Pl.: <a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Hálózati Információs API</a>, <a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Web Értesítések</a>, <a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a>.</dd> + <dt id="Data_management_APIs">Adatkezelő API-ok</dt> + <dd>Felhasználói adat tárolható és kezelhető ezen API-ok segítségével. Pl.: <a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a>, <a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd> +</dl> + +<p>Ezen API-okon kívül, amelyek minden Weboldalnak és applikációnak elérhetők, sokoldaló Mozzila API-ok is elérhetők a kiemelt és hitelesített alkalmazásoknak.</p> + +<dl> + <dt>Kiemelt API-ok</dt> + <dd>Egy kiemelt alkalmazás egy olyan feltelepített app, aminek a felhasználó adott bizonyos jogokat. A kiemelt API-ok közé tartozik: <a href="/en-US/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a>, <a href="/en-US/docs/WebAPI/Contacts" title="WebAPI/Contacts">Kapcsolatok API</a>, <a href="/en-US/docs/WebAPI/Device_Storage_API" title="WebAPI/Device_Storage_API">Eszköz Tárhely API</a>, <a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">Böngésző API</a>, <a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">Kamera API</a>.</dd> + <dt>Hitelesített API-ok</dt> + <dd>Egy hiteles applikació egy alacsony szintű applikáció, ami kritikus operációkat hajt végre operációs rendszerek esetében mint a Firefox OS. Kevésbé kiemelt alkalmazások kommunikálnak ezekkel az alkalmazásokkal a <a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> segítségével. Hitelesített API-ok közé tartozik:<a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth"> Bluetooth API</a>, <a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a>, <a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a>, <a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a>, <a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a>, <a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a>, <a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API</a>, <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>, <a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a>, <a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a>, <a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a>.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Community" id="Közösség">Közösség</h2> + +<p>Csatlakozz a Web API közösséghez a levelező listánkon vagy hírcsoportunkon keresztül:</p> + +<ul> + <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">levelező listán keresztül</a></li> + <li><a href="news://news.mozilla.org/mozilla.dev.webapi">hírcsoporton keresztül</a></li> + <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">Google Group-on keresztül</a></li> + <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">Webhírcsatornán keresztül</a></li> +</ul> + +<p>Illetve csatlakozz az élő értekezésünkhöz a <a href="irc://irc.mozilla.org/webapi">#webapi</a> csatornán az <a class="external" href="https://wiki.mozilla.org/IRC">IRC-n</a>.</p> + +<h2 class="Related_Topics" id="Kapcsolódó_témák">Kapcsolódó témák</h2> + +<p>Ezek a témák esetlek még érdekelhetnek:</p> + +<ul> + <li><a href="/en-US/docs/Web/API">Az összes Web API interfész indexelve</a></li> +</ul> +</div> +</div> + +<p> </p> diff --git a/files/hu/web/reference/index.html b/files/hu/web/reference/index.html new file mode 100644 index 0000000000..6d1867a6f3 --- /dev/null +++ b/files/hu/web/reference/index.html @@ -0,0 +1,28 @@ +--- +title: Web technology reference +slug: Web/Reference +tags: + - Landing + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/Reference +--- +<p>The open Web is built using a number of technologies. Below you'll find links to our reference material for each of them.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Core_Web_technologies">Core Web technologies</h2> + +<p>{{ Page ("Web", "Web technologies") }}</p> +</div> + +<div class="section"> +<p>{{draft()}}</p> + +<p>This page <a href="/en-US/docs/Project:MDN/Plans_and_status/Web_platform">is meant to be</a> the landing page for the "Web Platform Reference"; this would offer links to the landing pages for each of the APIs that comprise the Web platform (but would not itself have subpages).</p> +</div> +</div> + +<p> </p> diff --git a/files/hu/websockets/index.html b/files/hu/websockets/index.html new file mode 100644 index 0000000000..815c4aebb9 --- /dev/null +++ b/files/hu/websockets/index.html @@ -0,0 +1,194 @@ +--- +title: WebSockets +slug: WebSockets +tags: + - NeedsBrowserCompatibility + - NeedsTranslation + - References + - TopicStub + - WebSockets +translation_of: Web/API/WebSockets_API +--- +<p>WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications" title="WebSockets/Writing WebSocket client applications">Writing WebSocket client applications</a></dt> + <dd>A tutorial guide to writing WebSocket clients to run in the browser.</dd> + <dt><a href="/en-US/docs/WebSockets/WebSockets_reference" title="WebSockets/WebSockets reference">WebSockets reference</a></dt> + <dd>A reference to the client-side WebSocket API.</dd> + <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers" title="WebSockets/Writing WebSocket servers">Writing WebSocket servers (Needs Content)</a></dt> + <dd>A guide to writing server-side code to handle the WebSocket protocol.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/WebSockets" title="tag/WebSockets">View All...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Tools</h2> + +<ul> + <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: A powerful cross-platform WebSocket API for <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: A WebSocket server API implementation for <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a href="http://www.totaljs.com">Total.js</a>: Web application framework for <a href="http://www.nodejs.org">Node.js</a> (Example: <a href="https://github.com/totaljs/examples/tree/master/websocket">WebSocket chat</a>)</li> + <li><a href="http://ajf.me/websocket/#libs" title="http://websocket.us/#libs">A more extensive list of frameworks and libraries here</a></li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + +<ul> + <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li> +</ul> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - The WebSocket Protocol</a></li> + <li><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket API Specification</a></li> + <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a></li> +</ul> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Version -76 support {{obsolete_inline}}</td> + <td>6</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>11.00 (disabled)</td> + <td>5.0.1</td> + </tr> + <tr> + <td>Protocol version 7 support {{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("6.0")}}<br> + {{property_prefix("Moz")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Protocol version 10 support {{obsolete_inline}}</td> + <td>14</td> + <td>{{CompatGeckoDesktop("7.0")}}<br> + {{property_prefix("Moz")}}</td> + <td>HTML5 Labs</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Standard - RFC 6455 Support</td> + <td>16</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>10</td> + <td>12.10</td> + <td>6.0</td> + </tr> + <tr> + <td>Usable in Workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Version -76 support {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Protocol version 7 support {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Protocol version 8 support (IETF draft 10) {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Standard - RFC 6455 Support</td> + <td>4.4</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>12.10</td> + <td>6.0</td> + </tr> + <tr> + <td>Usable in Workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>WebSockets support in Firefox is continuing to track the evolving WebSocket specification. Firefox 6 implements version 7 of the underlying protocol, while Firefox 7 implements version 8 (as specified by IETF draft 10). Firefox mobile received WebSocket support in Firefox mobile 7.0.</p> + +<h4 id="Gecko_6.0">Gecko 6.0</h4> + +<p>Prior to Gecko 6.0 {{geckoRelease("6.0")}}, there was, incorrectly, a <code>WebSocket</code> object that some sites were thinking implied that <code>WebSocket</code> services were not prefixed; this object has been renamed to <code>MozWebSocket</code>.</p> + +<h4 id="Gecko_7.0">Gecko 7.0</h4> + +<p>Starting in Gecko 7.0 {{geckoRelease("7.0")}}, the <code>network.websocket.max-connections</code> preference is used to determine the maximum number of WebSocket connections that can be open at a time. The default value is 200.</p> + +<h4 id="Gecko_8.0">Gecko 8.0</h4> + +<p>Starting in Gecko 8.0 {{geckoRelease("8.0")}}, the deflate-stream extension to the WebSocket protocol has been disabled, since it's been deprecated from the specification drafts. This resolves incompatibilities with some sites.</p> + +<h4 id="Gecko_11.0">Gecko 11.0</h4> + +<p>Prior to Gecko 11.0, both incoming and outgoing messages were limited to 16 MB in size. They may now be up to 2 GB in size. Note, however, that memory limitations (especially on mobile devices) make that a theoretical maximum, not a practical one. In reality, transfers of that size will fail on devices that don't have enough memory.</p> + +<p>Additionally, ArrayBuffer send and receive support for binary data has been implemented.</p> + +<p>Starting in Gecko 11.0, the WebSocket API is no longer prefixed.</p> diff --git a/files/hu/zones/index.html b/files/hu/zones/index.html new file mode 100644 index 0000000000..4fb47ab48c --- /dev/null +++ b/files/hu/zones/index.html @@ -0,0 +1,70 @@ +--- +title: Zones +slug: Zones +translation_of: Zones +--- +<p><font><font>MDN zónák az Ön egyablakos információkhoz való hozzáférést meghatározott témakörökben vagy termékeket. </font><font>Itt egy lista az összes zóna áll az Ön rendelkezésére.</font></font></p> +<div class="row topicpage-table"> + <div class="section"> + <h2 id="Web_és_alkalmazás_fejlesztés"><font><font>Web és alkalmazás fejlesztés</font></font></h2> + <dl> + <dt> + <a href="/en-US/Apps"><font><font>App Center</font></font></a></dt> + <dd> + <font><font>Megtanulják, hogyan kell létrehozni a nyílt webes alkalmazások gazdag tapasztalatokat, hogy halad át több eszköz és forma tényező, ugyanazt a webes szabványok és a nyílt technológiák már tudod.</font></font></dd> + <dt> + <a href="/en-US/docs/Tools"><font><font>Fejlesztői eszközök</font></font></a></dt> + <dd> + <font><font>Ismerje meg, hogyan kell használni a Firefox fejlesztői eszközöket, hogy hibakeresés, teszt, és optimalizálja a webes alkalmazások és a webhelyek.</font></font></dd> + <dt> + <a href="/en-US/Marketplace"><font><font>Firefox Marketplace</font></font></a></dt> + <dd> + <font><font>Egy nyílt, nem védett internetes piactér webes alkalmazások HTML, CSS, JavaScript és. </font><font>Küldje el az alkalmazások számára, a Firefox Marketplace, vagy használja a kódot, hogy a saját piacán.</font></font></dd> + <dt> + <a href="/en-US/docs/Games"><font><font>Játék fejlesztés</font></font></a></dt> + <dd> + <font><font>Ismerje meg, hogyan lehet fejleszteni játékok az interneten, hogyan lehet a meglévő kikötő játékok webes technológiákat, és hogyan kapcsolja be a játék a webes alkalmazások.</font></font></dd> + <dt> + <a href="/en-US/docs/Mozilla/Developer_Program"><font><font>Mozilla Developer Program</font></font></a></dt> + <dd> + <font><font>Tudjon meg többet a Mozilla Developer Program, ahol akkor iratkozzon fel a tagság a programban, iratkozzon fel hírlevelünkre, és elérheti a növekvő sor z webfejlesztőknek.</font></font></dd> + </dl> + </div> + <div class="section"> + <h2 id="Products" name="Products"><font><font>Termékek és projektek</font></font></h2> + <dl> + <dt> + <a href="/en-US/docs/Emscripten"><font><font>Emscripten</font></font></a></dt> + <dd> + <font><font>Egy LLVM JavaScript fordító; </font><font>ez lehetővé teszi, hogy lefordítani, például a C ++ kódot JavaScript kódot, amely lehet futtatni bármely webböngészőben.</font></font></dd> + <dt> + <a href="/en-US/docs/L20n"><font><font>L20n</font></font></a></dt> + <dd> + <font><font>A JavaScript lokalizáció keretrendszer kibontakoztatásához a természetes nyelv erejét egyszerű kódot.</font></font></dd> + <dt> + <a href="/en-US/docs/Project:MDN"><font><font>A projekt MDN</font></font></a></dt> + <dd> + <font><font>A Mozilla Developer Network (ezen az oldalon) támaszkodik közössége az olvasók és a közreműködők növekedni és fejlődni. </font><font>Meg lehet tanulni, hogyan kell segíteni itt, használat, hozzájárulnak, és épít a kód mögött MDN! 1</font></font></dd> + <dt> + <a href="/en-US/Persona"><font><font>Személy</font></font></a></dt> + <dd> + <font><font>Egy új, egyszerű, magánjellegű single-megjelölés által kifejlesztett Mozilla amely lehetővé teszi a felhasználók jelentkezzen be a webhely használatával az e-mail címét, megkímélve a felhasználót jelszó kezelése.</font></font></dd> + </dl> + <h2 id="Mozilla_technológiák"><font><font>Mozilla technológiák</font></font></h2> + <dl> + <dt> + <a href="/en-US/Add-ons"><font><font>Kiegészítőket</font></font></a></dt> + <dd> + <font><font>Megtanulják, hogyan kell építeni és telepíteni bővítményeket, témákat, és plug-inek Mozilla-alapú szoftver, köztük a népszerű Firefox böngésző.</font></font></dd> + <dt> + <a href="/en-US/Firefox"><font><font>Firefox</font></font></a></dt> + <dd> + <font><font>Tudjon meg mindent a Firefox, a hogyan építeni, és felülvizsgálja, hogyan kell építeni kiegészítőket kifejezetten azt.</font></font></dd> + <dt> + <a href="/en-US/Firefox_OS"><font><font>Firefox OS</font></font></a></dt> + <dd> + <font><font>Az új mobil operációs rendszer által kifejlesztett Mozilla amely lehetővé teszi a felhasználók telepíteni és futtatni a nyílt webes alkalmazások segítségével létrehozott HTML, CSS, JavaScript és.</font></font></dd> + </dl> + </div> +</div> +<p> </p> |