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/web/javascript | |
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/web/javascript')
21 files changed, 4159 insertions, 0 deletions
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> |