From 799f1d56539e5a895d70eb88a86f0379f3a3ae0d Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:31 +0100 Subject: unslug hu: move --- .../index.html" | 19 - .../web/api/document_object_model/index.html | 75 + files/hu/css/css_grid_layout/index.html | 249 --- files/hu/css/font-weight/index.html | 400 ----- files/hu/css/index.html | 92 -- files/hu/css/text-decoration/index.html | 150 -- files/hu/dom/htmlbrelement/index.html | 32 - files/hu/dom/index.html | 75 - files/hu/glossary/bongeszo/index.html | 37 - files/hu/glossary/browser/index.html | 37 + .../hu/glossary/elso_osztalyu_funkciok/index.html | 103 -- files/hu/glossary/first-class_function/index.html | 103 ++ .../learn/getting_started_with_the_web/index.html | 60 + .../installing_basic_software/index.html | 78 + .../what_will_your_website_look_like/index.html | 92 ++ files/hu/learn/html/bevezetes_a_html-be/index.html | 58 - .../hu/learn/html/introduction_to_html/index.html | 58 + .../index.html" | 78 - .../index.html" | 92 -- .../index.html" | 60 - .../els\305\221_l\303\251p\303\251sek/index.html" | 66 - files/hu/learn/javascript/first_steps/index.html | 66 + files/hu/web/api/document_object_model/index.html | 19 + files/hu/web/api/htmlbrelement/index.html | 32 + files/hu/web/api/websockets_api/index.html | 194 +++ files/hu/web/api/window.stop/index.html | 19 - files/hu/web/api/window/stop/index.html | 19 + .../xmlhttprequest/using_xmlhttprequest/index.html | 791 ++++++++++ .../xmlhttprequest_hasznalata/index.html | 791 ---------- .../border-radius_generator/index.html | 1602 ++++++++++++++++++++ files/hu/web/css/css_grid_layout/index.html | 249 +++ files/hu/web/css/font-weight/index.html | 400 +++++ files/hu/web/css/index.html | 92 ++ files/hu/web/css/text-decoration/index.html | 150 ++ .../css/tools/border-radius_bemutato/index.html | 1602 -------------------- files/hu/web/guide/grafika/index.html | 48 - files/hu/web/guide/graphics/index.html | 48 + .../a_javascript_ujboli_bemutatasa/index.html | 948 ------------ .../a_re-introduction_to_javascript/index.html | 948 ++++++++++++ .../javascript/guide/bevezet\303\251s/index.html" | 134 -- .../web/javascript/guide/introduction/index.html | 134 ++ .../reference/errors/unexpected_type/index.html | 70 + .../index.html" | 70 - .../reference/global_objects/function/index.html | 112 ++ .../f\303\274ggv\303\251ny/index.html" | 112 -- files/hu/websockets/index.html | 194 --- 46 files changed, 5429 insertions(+), 5429 deletions(-) delete mode 100644 "files/hu/bevezet\303\251s_a_dokumentumobjektum-modellbe/index.html" create mode 100644 files/hu/conflicting/web/api/document_object_model/index.html delete mode 100644 files/hu/css/css_grid_layout/index.html delete mode 100644 files/hu/css/font-weight/index.html delete mode 100644 files/hu/css/index.html delete mode 100644 files/hu/css/text-decoration/index.html delete mode 100644 files/hu/dom/htmlbrelement/index.html delete mode 100644 files/hu/dom/index.html delete mode 100644 files/hu/glossary/bongeszo/index.html create mode 100644 files/hu/glossary/browser/index.html delete mode 100644 files/hu/glossary/elso_osztalyu_funkciok/index.html create mode 100644 files/hu/glossary/first-class_function/index.html create mode 100644 files/hu/learn/getting_started_with_the_web/index.html create mode 100644 files/hu/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/hu/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html delete mode 100644 files/hu/learn/html/bevezetes_a_html-be/index.html create mode 100644 files/hu/learn/html/introduction_to_html/index.html delete mode 100644 "files/hu/learn/ismerked\303\251s_a_vil\303\241gh\303\241l\303\263val/alapvet\305\221_programok_telep\303\255t\303\251se/index.html" delete mode 100644 "files/hu/learn/ismerked\303\251s_a_vil\303\241gh\303\241l\303\263val/hogy_fog_kin\303\251zni_a_weboldalunk/index.html" delete mode 100644 "files/hu/learn/ismerked\303\251s_a_vil\303\241gh\303\241l\303\263val/index.html" delete mode 100644 "files/hu/learn/javascript/els\305\221_l\303\251p\303\251sek/index.html" create mode 100644 files/hu/learn/javascript/first_steps/index.html create mode 100644 files/hu/web/api/document_object_model/index.html create mode 100644 files/hu/web/api/htmlbrelement/index.html create mode 100644 files/hu/web/api/websockets_api/index.html delete mode 100644 files/hu/web/api/window.stop/index.html create mode 100644 files/hu/web/api/window/stop/index.html create mode 100644 files/hu/web/api/xmlhttprequest/using_xmlhttprequest/index.html delete mode 100644 files/hu/web/api/xmlhttprequest/xmlhttprequest_hasznalata/index.html create mode 100644 files/hu/web/css/css_background_and_borders/border-radius_generator/index.html create mode 100644 files/hu/web/css/css_grid_layout/index.html create mode 100644 files/hu/web/css/font-weight/index.html create mode 100644 files/hu/web/css/index.html create mode 100644 files/hu/web/css/text-decoration/index.html delete mode 100644 files/hu/web/css/tools/border-radius_bemutato/index.html delete mode 100644 files/hu/web/guide/grafika/index.html create mode 100644 files/hu/web/guide/graphics/index.html delete mode 100644 files/hu/web/javascript/a_javascript_ujboli_bemutatasa/index.html create mode 100644 files/hu/web/javascript/a_re-introduction_to_javascript/index.html delete mode 100644 "files/hu/web/javascript/guide/bevezet\303\251s/index.html" create mode 100644 files/hu/web/javascript/guide/introduction/index.html create mode 100644 files/hu/web/javascript/reference/errors/unexpected_type/index.html delete mode 100644 "files/hu/web/javascript/reference/errors/\303\251rv\303\251nytelen_t\303\255pus/index.html" create mode 100644 files/hu/web/javascript/reference/global_objects/function/index.html delete mode 100644 "files/hu/web/javascript/reference/global_objects/f\303\274ggv\303\251ny/index.html" delete mode 100644 files/hu/websockets/index.html (limited to 'files/hu') diff --git "a/files/hu/bevezet\303\251s_a_dokumentumobjektum-modellbe/index.html" "b/files/hu/bevezet\303\251s_a_dokumentumobjektum-modellbe/index.html" deleted file mode 100644 index 25ea440e9c..0000000000 --- "a/files/hu/bevezet\303\251s_a_dokumentumobjektum-modellbe/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Bevezetés a dokumentumobjektum-modellbe -slug: Bevezetés_a_dokumentumobjektum-modellbe -tags: - - DOM - - minden_kategória -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -

Mi a DOM?

-

A Dokumentumobjektum-modell (DOM) egy API HTML és XML dokumentumokhoz. A dokumentum szerkezetét modellezi és lehetővé teszi annak tartalmi és vizulális változtatását. Lényegében összeköttetést képez a weblapok és a script- vagy programozási nyelvek között.

-

Minden tulajdonságot, metódust és eseményt, ami a webfejlesztő számára rendelkezésre áll a weboldalak szerkesztése és változtatása során, objektumokba rendszerez. (pl. a document objektum jelöli a dokumentumot, a table objektum jelöli a HTML táblázatokat, stb.) Ezek az objektumok hozzáférhetőek a script-nyelvek számára az újabb böngészőkben.

-

A DOM-ot leggyakrabban JavaScript-tel együtt használják. Azaz a kód JavaScript-ben van írva, de a DOM-ot használja a weboldalhoz és elemeihez való hozzáférés során.

-

A DOM-ot azonban úgy tervezték hogy független legyen minden programozási nyelvtől, ezért a dokumentum szerkezeti modellje egyetlen, önálló és konzisztens API-ból érhető el. Bár a továbbiakban a JavaScriptre fogunk összpontosítani, a DOM-ot tkp. bármilyen nyelvből elérhetjük.

-

A World Wide Web Consortium (W3C) meghatározta a standard DOM-ot, amit W3C DOM-nak neveznek. Ma már a legfontosabb böngészők ezt támogatják, ezzel lehetővé teszik browserfüggetlen alkalmazások létrehozását.

-

Miért fontos a DOM-támogatás a Mozilla-ban?

-

A "dinamikus HTML" (DHTML) fogalmat szokták használni a HTML, CSS és a scriptek kombinációjára, amivel pl. animációt helyezhetünk el weboldalunkon. A W3C DOM munkacsoportjában keményen dolgoznak azon, hogy nyelvsemleges megoldásokat tudjanak szabványosítani (lásd még W3C FAQ). Mivel a Mozillát webalkalmazás-platformnak ("Web Application Platform") tervezték, a DOM támogatása az egyik leggyakrabban felmerülő követelmény és a elengedhetetlen megfelelni neki, ha a Mozilla életképes alternatíva kíván maradni a többi böngésző mellett.

-

Talán még ennél is fontosabb, hogy a Mozilla (valamint a Firefox és a Thunderbird) felhasználói felülete XUL (XML User interface Language - XML felhasználói felületi nyelv) használatára épül. A Mozilla felhasználói tehát a DOM segítségével dinamikusan változtatni tudják a saját felhasználói felületüket is.

-

{{ languages( { "en": "en/About_the_Document_Object_Model", "es": "es/Acerca_del_Modelo_de_Objetos_del_Documento", "fr": "fr/\u00c0_propos_du_Document_Object_Model", "ja": "ja/About_the_Document_Object_Model", "ko": "ko/About_the_Document_Object_Model", "pl": "pl/O_modelu_obiektowym_dokumentu", "zh-cn": "cn/\u5173\u4e8e\u6587\u6863\u5bf9\u8c61\u6a21\u578b", "ru": "ru/\u041e\u0431_\u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e\u0439_\u043c\u043e\u0434\u0435\u043b\u0438_\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430" } ) }}

diff --git a/files/hu/conflicting/web/api/document_object_model/index.html b/files/hu/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..e6f46bdce1 --- /dev/null +++ b/files/hu/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,75 @@ +--- +title: DOM +slug: DOM +tags: + - DOM + - minden_kategória +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM +--- +
+

A dokumentumobjektum-modell (DOM) egy API a HTML és az XML documentumokhoz.The Document Object Model (DOM) is an API for HTML and XML documents. A dokumentum szerkezetét modellezi és lehetővé teszi annak tartalmi és vizulális változtatását.It provides a structural representation of the document, enabling you to modify its content and visual presentation. Lényegében összeköttetést képez a weblapok és a script- vagy programozási nyelvek között. Essentially, it connects web pages to scripts or programming languages.

+
+ + + + + + + +
+

Dokumetáció

+
+
+ Gecko DOM referencia
+
+ Gecko dokumentumobjektum-modell referencia.
+
+
+
+ Bevezetés a dokumentumobjektum-modellbe
+
+ Rövid bevezetés a DOM-ba.
+
+
+
+ Az XUL-alapú felhasználói felület dinamikus változtatása
+
+ Alapvető ismeretek a XUL felhasználói felület DOM módszerekkel való változtatásáról.
+
+
+
+ A DOM és a JavaScript
+
+ Mi a DOM? Mi a JavaScript? Hogyan tudom együtt használni őket a weboldalamon? Itt ehhez hasonló kérdésekre kaphatsz választ.
+
+
+
+ A dokumentumobjektum-modell a Mozilla böngészőben
+
+ Egy korábbi DOM leírás a mozilla.org site-on.
+
+

Továbbá...

+ 		+

Közösség

+
    +
  • Lásd a Mozilla fórumait...
    • +
+

{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}

+

Eszközök

+ +

További eszközök...

+

Kapcsolódó témák

+
+
+ AJAX, CSS, DHTML, JavaScript
+
+
+

Categories

+

Interwiki Language Links

+

{{ languages( { "en": "en/DOM", "zh-cn": "cn/DOM", "de": "de/DOM", "es": "es/DOM", "fr": "fr/DOM", "ko": "ko/DOM", "ja": "ja/DOM", "nl": "nl/DOM", "pl": "pl/DOM", "pt": "pt/DOM", "ru": "ru/DOM" } ) }}

diff --git a/files/hu/css/css_grid_layout/index.html b/files/hu/css/css_grid_layout/index.html deleted file mode 100644 index 35aa2b57f7..0000000000 --- a/files/hu/css/css_grid_layout/index.html +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: CSS Grid Layout -slug: CSS/CSS_Grid_Layout -translation_of: Web/CSS/CSS_Grid_Layout ---- -

A CSS Grid Layout kiemlekedő feladatot lát el egy adott HTML oldal fő részeinek meghatározásakor, illetve az oldalon elhelyezkező elemek méretének, pozíciójának és egymáshoz való viszonyának definiálasakor.

- -

Ahogyan a táblázatok esetében is, a grid layout lehetővé teszi a szerkesztő számára, hogy az egyes elemeket oszlopokba és sorokba rendezze. Emellett jó tudni, hogy más jellegű felépítések megvalósítása is lehetséges a CSS grid segítségével, még akár könyebben is, mint a táblázatokkal. Például, egy grid konténer gyermek elemei képesek egymást pozícionálni. Ennek következtében képesek egymást fedni, hasonlóan a CSS-sel pozícionált elemekhez.

- -

Egyszerű példa

- -

Az alábbi példa egy három oszlopos felépítést valósít meg, amelyben minden sor automatikusan minimum 100 pixel magas lesz és maximum akkora, mint amekkora helyet automatikusan elfoglalna. A grid rendszeren belül található elemek, mind egyénileg definiált helyet foglalnak el.

- -
- - -

HTML

- -
<div class="wrapper">
-  <div class="one">One</div>
-  <div class="two">Two</div>
-  <div class="three">Three</div>
-  <div class="four">Four</div>
-  <div class="five">Five</div>
-  <div class="six">Six</div>
-</div>
- -

CSS

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: minmax(100px, auto);
-}
-.one {
-  grid-column: 1 / 3;
-  grid-row: 1;
-}
-.two {
-  grid-column: 2 / 4;
-  grid-row: 1 / 3;
-}
-.three {
-  grid-column: 1;
-  grid-row: 2 / 5;
-}
-.four {
-  grid-column: 3;
-  grid-row: 3;
-}
-.five {
-  grid-column: 2;
-  grid-row: 4;
-}
-.six {
-  grid-column: 3;
-  grid-row: 4;
-}
-
- -

{{ EmbedLiveSample('example', '500', '440') }}

-
- -

Referencia

- -

CSS tulajdonságok

- -
- -
- -

CSS funkciók

- -
- -
- -

CSS adattípusok

- -
- -
- -

Szójegyzék

- -
- -
- -

Segédletek

- -
- -
- -

Külső források

- - - -

Specifikációk

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName("CSS Grid 2") }}{{ Spec2("CSS Grid 2") }}Added subgrids.
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.
- - diff --git a/files/hu/css/font-weight/index.html b/files/hu/css/font-weight/index.html deleted file mode 100644 index 6e27ac6341..0000000000 --- a/files/hu/css/font-weight/index.html +++ /dev/null @@ -1,400 +0,0 @@ ---- -title: Betű vastagság -slug: CSS/font-weight -translation_of: Web/CSS/font-weight ---- -
{{CSSRef}}
- -

A betűvastagság (font-weight) CSS tulajdonság beállítja a betűtípus nyomatékosságát, vastagságát (angolul "weight" vagy "boldness"). Az elérhető betűvastagság méretek a beállított betűtípustól ({{cssxref("font-family")}}) függenek.

- -
{{EmbedInteractiveExample("pages/css/font-weight.html")}}
- - - -

Szintaxis

- -
/* Kulcsszavas értékek */
-font-weight: normal; // normál vastagság
-font-weight: bold; // félkövér
-
-/* Kulcsszavas értékek a szülő elemhez viszonyítva */
-font-weight: lighter;
-font-weight: bolder;
-
-/* Numerikus értékek */
-font-weight: 100;
-font-weight: 200;
-font-weight: 300;
-font-weight: 400; // normál
-font-weight: 500;
-font-weight: 600;
-font-weight: 700; // félkövér
-font-weight: 800;
-font-weight: 900;
-
-/* Globális értékek */
-font-weight: inherit;
-font-weight: initial;
-font-weight: unset;
-
- -

A betűvastagság (font-weight) tulajdonság bármely fentebb bemutatott módon beállítható.

- -

Értékek

- -
-
normal
-
Normál betűvastagság. Megegyezik a 400-as értékkel.
-
bold
-
Félkövér. Megegyezik a 700-as értékkel.
-
lighter
-
Relatív betűvastagság, a szülő elem formázásához viszonyít, annál vékonyabb betűvastagságot állít be. Megjegyzés: csupán négy betűvastagságot tartunk számon, melyek relatív értékek. (Bővebben: {{anch("Relatív betűvastagság jelentése")}} bekezdés lentebb.)
-
bolder
-
Relatív betűvastagság, a szülő elem formázásához viszonyít, annál vastagabb betűvastagságot állít be. Megjegyzés: csupán négy betűvastagságot tartunk számon, melyek relatív értékek. (Bővebben: {{anch("Relatív betűvastagság jelentése")}} bekezdés lentebb.)
-
<number>
-
A {{cssxref("<number>")}} (szám) érték 1 és 1000 között megadható (az 1000 is beletartozik az intervallumba). Minél magasabb az érték, annál vastagabb lesz a betű formázás. Néhány gyakran használt érték megfeleltethető betűvastagság elnevezéseknek, bővebben lásd az Általános betűvastagság elnevezések bekezdésnél.
-
- -

A betűvastagság beállítás régebbi verzióiban ez a tulajdonság csak kulcsszavakas értékeket és számokat fogad el (100, 200, 300, 400, 500, 600, 700, 800, és 900). A nem változó betűtípusok csak ezeket az értékeket tudják értelmezni. (Változó betűtípus: egyetlen betűkészlet-fájl, amely több stílusként viselkedik. Bővebben itt tudsz utánaolvasni.) A "finomszemcsés" értékek (pl: 451) a nem változó betűtípusok esetében lefordítódnak a fentebb említett értékek egyikére a {{anch("Fallback weights")}} rendszer segítségével.

- -

A CSS Fonts Level 4 kiterjeszti a szintaxist, és bármely számot el tudja fogadni 1 és 1000 között, illetve bevezeti a Változó betűtípus készleteket ({{anch("Variable fonts")}}), amelyek már tudják használni ezeket a "finomszemcsés" betűvastagság értékeket is.

- -

Alapeset

- -

Hogyha a megadott betűvastagság nem elérhető adott betűtípuson, az alábbi szabály lép életbe, mely eldönti a véglegesen megjelenítendő betűvastagságot:

- - - -

Relatív betűvastagság jelentése

- -

Amikor lighter vagy bolder betűvastagságot határozunk meg, az alábbi táblázat segít megérteni, hogyan dől el, mi lesz a betűvastagságunk abszolút értéke.

- -

Megjegyzés: csupán 4 értéket tartunk számon relatív értékként: vékony, keskeny (thin, 100), normál (normal, 400), félkövér (bold, 700), és vastag (heavy, 900). Ha egy betűtípus család ennél több elérhető értékkel rendelkezik, azok ebben az esetben mellőzve lesznek annak érdekében, hogy a relatív értéket át tudjuk alakítani abszolút értékké.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Örökölt értékbolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
- -

Általános betűvastagság elnevezések

- -

A numerikus értékek 100-tól 900-ig megfeleltethetők az alábbi általános betűvastagság elnevezéseknek. (Bővebben: OpenType specification):

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÉrtékÁltalános betűvastagság elnevezés
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal (Regular)
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
950Extra Black (Ultra Black)
- -

Változó betűtípus útmutató

- -

A legtöbb betűtípusnak van egy bizonyos betűvastagsága, ami a fentebbi Általános betűvastagság elnevezések értékeinek megfeleltethető. Azonban néhány betűtípus, amit változó betűtípusnak nevezünk, ezeknél sokkal pontosabb, aprószemcsés értéket is meg tud jeleníteni, és ez sokkal nagyobb kontrollt adhat egy designernek.

- -

A TrueType vagy OpenType változó betűtípusok a "wght" variációjukkal tudnak implementálni változó szélességet.

- -

Az alábbi példához egy olyan böngészőre lesz szükséged, ami támogatja a CSS Fonts Level 4 szintaxist, amellyel bármilyen értéket meg tudunk adni 1 és 1000 között.

- -
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
- -

HTML

- -
-
<header>
-    <input type="range" id="weight" name="weight" min="1" max="1000" />
-    <label for="weight">Weight</label>
-</header>
-<div class="container">
-    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
-</div>
-
- -

CSS

- -
/*
-Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
-and is used here under the terms of its license:
-https://github.com/LettError/mutatorSans/blob/master/LICENSE
-*/
-
-@font-face {
-  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
-  font-family:'MutatorSans';
-  font-style: normal;
-}
-
-label {
-  font: 1rem monospace;
-  white-space: nowrap;
-}
-
-.container {
-  max-height: 150px;
-  overflow-y: auto;
-}
-
-.sample {
-  text-transform: uppercase;
-  font: 1.5rem 'MutatorSans', sans-serif;
-}
-
- - - -

JavaScript

- -
let weightLabel = document.querySelector('label[for="weight"]');
-let weightInput = document.querySelector('#weight');
-let sampleText = document.querySelector('.sample');
-
-function update() {
-  weightLabel.textContent = `font-weight: ${weightInput.value};`;
-  sampleText.style.fontWeight = weightInput.value;
-}
-
-weightInput.addEventListener('input', update);
-
-update();
-
-
- -

Accessibility concerns

- -

Látási nehézségekkel küzdő emberek számára nehézséget okozhat a 100-as (Thin/Hairline) és 200-as (Extra Light) betűvastagsággal írt szövegek elolvasása, különösképpen ha alacsony a színkontraszt. 

- - - -

Formal definition

- -

{{cssinfo}}

- -

Formal syntax

- -
{{csssyntax}}
- -

Példák

- -

Betűvastagság beállítása

- -

HTML

- -
<p>
-  Alice was beginning to get very tired of sitting by her sister on the
-  bank, and of having nothing to do: once or twice she had peeped into the
-  book her sister was reading, but it had no pictures or conversations in
-  it, "and what is the use of a book," thought Alice "without pictures or
-  conversations?"
-</p>
-
-<div>I'm heavy<br/>
-  <span>I'm lighter</span>
-</div>
-
- -

CSS

- -
/* Set paragraph text to be bold. */
-p {
-  font-weight: bold;
-}
-
-/* Set div text to two steps heavier than
-   normal but less than a standard bold. */
-div {
- font-weight: 600;
-}
-
-/* Set span text to be one step lighter
-   than its parent. */
-span {
-  font-weight: lighter;
-}
- -

Result

- -

{{EmbedLiveSample("Betűvastagság_beállítása","400","300")}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS4 Fonts')}}Defines font-weight to accept any numbers between 1 and 1000.
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}No change.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("css.properties.font-weight")}}

diff --git a/files/hu/css/index.html b/files/hu/css/index.html deleted file mode 100644 index 6717bc7093..0000000000 --- a/files/hu/css/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: CSS -slug: CSS -tags: - - CSS - - Design - - Dizájn - - Stíluslapok - - Stílusok -translation_of: Web/CSS ---- -
-

A Cascading Style Sheets (CSS) egy stíluslap nyelv, mellyel a HTML-ben vagy XML-ben (és más XML nyelveken, mint az XHTML vagy a SVG) írt dokumentumok megjelenítését lehet leírni.

- -

A CSS a nyílt web egyik fő nyelve, amely a W3C specifikációnak megfelelően szabványosítva van a webböngészőkben. Szintenként van fejlesztve, a CSS1 ma már elavult, a CSS2.1 használata az ajánlott, a CSS3 pedig már kisebb modulokra lett osztva, jelenleg is a szabványosítása zajlik.

- - -
- - - - - - - - -
-

CSS Dokumentáció

- -
-
Bevezetés a CSS-be
-
Ez az oldal alapvető információkat nyújt arról, hogyan működik a CSS, azaz bemutatja a szelektorokat és a tulajdonságokat, a CSS szabályok írását, a CSS alkalmazását a HTML-re, a dobozmodell alapjait, valamint a CSS hibakeresést.
-
CSS Referencia
-
A teljeskörű CSS referencia a tapasztalt webes fejlesztők számára a CSS minden tulajdonságát és fogalmát írja le.
-
- -
-
URL-értékek használata a kurzor tulajdonsághoz 
-
A Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) támogatja a CSS 2/2.1 kurzor tulajdonság URL-értékeit. Ez lehetővé teszi tetszőleges képek egér kurzorokként való használatát - bármely Gecko által támogatott képformátum használható.
-
- -
-
CSS3 Oszlopok
-
Rövid bemutató a CSS3 oszlopok használatáról.
-
- -
-
Konzisztens listajelzés
-
A listák behúzásának megkísérlése a CSS-sel trükkösebb, mint amilyennek látszik, de csak azért, mert a CSS-kompatibilis böngészőknek különböznek az alapértelmezései. Ismerd meg, hogyan lehet őket egy vonalba hozni.
-
- -

Összes megtekintése...

- 		-

Segítségkérés a közösségtől

- -

CSS-el kapcsolatos segítségre van szükséged és nem találod a megoldást a dokumentációban?

- - - -

Eszközök a CSS fejlesztéshez

- - - -

Összes megtekintése...

-
- -

Kapcsolódó témakörök

- - diff --git a/files/hu/css/text-decoration/index.html b/files/hu/css/text-decoration/index.html deleted file mode 100644 index 22de3ad153..0000000000 --- a/files/hu/css/text-decoration/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Szöveg díszítés -slug: CSS/text-decoration -tags: - - CSS tulajdonság - - szöveg díszítés -translation_of: Web/CSS/text-decoration ---- -
{{CSSRef}}
- -

A szöveg díszítés (text-decoration) rövidített CSS tulajdonság a szöveget díszítő vonalakat állítja be. Ez a tulajdonság egy rövidítés, amely az alábbi tulajdonságokat foglalja magába: {{cssxref("text-decoration-line")}} (szöveg díszítő vonal), {{cssxref("text-decoration-color")}} (-szín), {{cssxref("text-decoration-style")}} (-stílus), és az újabb {{cssxref("text-decoration-thickness")}} (-vastagság).

- -
{{EmbedInteractiveExample("pages/css/text-decoration.html")}}
- - - -

A szöveg díszítések leszármazott szövegelemekre is érvényesek lesznek. Ez annyit jelent, hogyha egy elemen specifikálunk valamilyen szöveg díszítést, akkor a leszármazott elem nem tudja majd eltávolítani ezt a díszítést. Vegyük például ezt a jelölő nyelvi elemet: <p>Ez a szöveg néhány <em>hangsúlyos, kiemelt szót</em> is tartalmaz.</p>, és ezt a stílus szabályt: p { text-decoration: underline; }. Ez esetben a teljes paragrafusra érvényes lenne az aláhúzás. Az em { text-decoration: none; } stílus szabály nem hozna változást, a teljes bekezdés megmaradna aláhúzottan. Azonban az  em { text-decoration: overline; } egy második szöveg díszítést is bevezetne, és egy felső vonal is megjelenne a kiemelt szavakon ("hangsúlyos, kiemelt szót" szavakon).

- -

A szabályban foglalt tulajdonságok

- -

A text-decoration tulajdonság egy rövidítés, mely magába foglalja az alábbi CSS tulajdonságokat: szín, vonal, stílus, vastagság.

- - - -

Szintaxis

- -

A text-decoration tulajdonságot egy vagy több érték megadásával is létrehozhatjuk, melyeket szóközzel kell elválasztanunk. Ezek az értékek fogják képviselni a fentebb is említett tulajdonságokat, melyeket a text-decoration magába foglal.

- -

Értékek

- -
-
{{cssxref("text-decoration-line")}}
-
Beállítja a díszítő vonal elhelyezését: a szöveg alá, fölé, vagy rá (áthúzás) is kerülhet. (underline, overline vagy line-through).
-
{{cssxref("text-decoration-color")}}
-
Beállítja a díszítő vonal színét.
-
{{cssxref("text-decoration-style")}}
-
Beállítja a díszítő vonal stílusát, például egyszerű vonal, hullámos, vagy szaggatott ( solid, wavy, or dashed).
-
{{cssxref("text-decoration-thickness")}}
-
Beállítja a díszítő vonal vastagságát.
-
- -

Régebbi meghatározás

- -

{{CSSInfo}}

- -

Régebbi szintaxis

- -
{{csssyntax}}
- -

Példák

- -

Szöveg díszítés bemutatása

- -
.under {
-  text-decoration: underline red;
-}
-
-.over {
-  text-decoration: wavy overline lime;
-}
-
-.line {
-  text-decoration: line-through;
-}
-
-.plain {
-  text-decoration: none;
-}
-
-.underover {
-  text-decoration: dashed underline overline;
-}
-
-.thick {
-  text-decoration: solid underline purple 4px;
-}
-
-.blink {
-  text-decoration: blink;
-}
-
- -
<p class="under">Ezen szöveg alatt látható egy vonal.</p>
-<p class="over">Ezen szöveg fölött látható egy vonal.</p>
-<p class="line">Ez a szöveg át van húzva.</p>
-<p>Ez a <a class="plain" href="#">link nincs aláhúzva</a>,
-    mint ahogyan a linkeknél alapvetően látni szoktuk.
-Óvatosan használjuk ezt a formázást a linkeken, hiszen a
-felhasználók sokszor erre az alap formázásra támaszkodnak,
-ha linkeket keresnek a szövegben.</p>
-<p class="underover">Ezen szöveg fölött <em>és</em> alatt is van vonal.</p>
-<p class="thick">Ezen szöveg alatt látható egy vastag lila
-aláhúzás azon böngészőkben, melyek támogatják ezt a formázást.</p>
-<p class="blink">Ez a szöveg villog, ha olyan böngészőt
-használsz, ami támogatja ezt a formázást.</p>
-
- -

{{EmbedLiveSample('Példák','auto','320')}}

- -

Specifikációk

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecifikációStátuszKomment
{{SpecName('CSS4 Text Decoration')}}{{Spec2('CSS4 Text Decoration')}}A {{cssxref("text-decoration-thickness")}}; tulajdonság hozzáadva. Megjegyzés: ez még hivatalosan nem része a rövidített stílus szabálynak - ez még nincs meghatározva.
{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}{{Spec2('CSS3 Text Decoration')}}Átalakítva rövidített tulajdonsággá. A {{cssxref('text-decoration-style')}} érték támogatása hozzáadva.
{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}{{Spec2('CSS2.1')}}Nincs szignifikáns változtatás.
{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}{{Spec2('CSS1')}}Kezdeti definiálás.
- -

Böngésző kompatibilitás

- - - -

{{Compat("css.properties.text-decoration")}}

- -

Lásd még

- - diff --git a/files/hu/dom/htmlbrelement/index.html b/files/hu/dom/htmlbrelement/index.html deleted file mode 100644 index 8842c0a233..0000000000 --- a/files/hu/dom/htmlbrelement/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: HTMLBRElement -slug: DOM/HTMLBRElement -translation_of: Web/API/HTMLBRElement ---- -
- {{ ApiRef() }}
-

HTML törés elem felület

-

A DOM törés elemek a HTMLBRElement (vagy HTML 4 HTMLBRElement) felületet fejtik ki, amelyek a HTMLElementből öröklődnek, de nem határoz meg további tagokat a {{ HTMLVersionInline(5) }} verzióban. A bevezetett további tulajdonság szintén elavult a {{ HTMLVersionInline(4.01) }} verzióban.

-

Tulajdonságok

- - - - - - - - - - - - - - - -
NévTípusLeírás
clear {{ HTMLVersionInline(4.01) }}, {{ obsolete_inline() }} a {{ HTMLVersionInline(5) }} ótaDOMStringA szöveg körbefuttatását jelzi a lebegő objektumok körül.
-

Lásd még

- -
- {{ languages({ "en": "en/DOM/HTMLBRElement", "hu": "hu/DOM/HTMLBRElement", "ja": "ja/DOM/HTMLBRElement" }) }}
diff --git a/files/hu/dom/index.html b/files/hu/dom/index.html deleted file mode 100644 index e6f46bdce1..0000000000 --- a/files/hu/dom/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: DOM -slug: DOM -tags: - - DOM - - minden_kategória -translation_of: Web/API/Document_Object_Model -translation_of_original: DOM ---- -
-

A dokumentumobjektum-modell (DOM) egy API a HTML és az XML documentumokhoz.The Document Object Model (DOM) is an API for HTML and XML documents. A dokumentum szerkezetét modellezi és lehetővé teszi annak tartalmi és vizulális változtatását.It provides a structural representation of the document, enabling you to modify its content and visual presentation. Lényegében összeköttetést képez a weblapok és a script- vagy programozási nyelvek között. Essentially, it connects web pages to scripts or programming languages.

-
- - - - - - - -
-

Dokumetáció

-
-
- Gecko DOM referencia
-
- Gecko dokumentumobjektum-modell referencia.
-
-
-
- Bevezetés a dokumentumobjektum-modellbe
-
- Rövid bevezetés a DOM-ba.
-
-
-
- Az XUL-alapú felhasználói felület dinamikus változtatása
-
- Alapvető ismeretek a XUL felhasználói felület DOM módszerekkel való változtatásáról.
-
-
-
- A DOM és a JavaScript
-
- Mi a DOM? Mi a JavaScript? Hogyan tudom együtt használni őket a weboldalamon? Itt ehhez hasonló kérdésekre kaphatsz választ.
-
-
-
- A dokumentumobjektum-modell a Mozilla böngészőben
-
- Egy korábbi DOM leírás a mozilla.org site-on.
-
-

Továbbá...

- 		-

Közösség

-
    -
  • Lásd a Mozilla fórumait...
    • -
-

{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}

-

Eszközök

- -

További eszközök...

-

Kapcsolódó témák

-
-
- AJAX, CSS, DHTML, JavaScript
-
-
-

Categories

-

Interwiki Language Links

-

{{ languages( { "en": "en/DOM", "zh-cn": "cn/DOM", "de": "de/DOM", "es": "es/DOM", "fr": "fr/DOM", "ko": "ko/DOM", "ja": "ja/DOM", "nl": "nl/DOM", "pl": "pl/DOM", "pt": "pt/DOM", "ru": "ru/DOM" } ) }}

diff --git a/files/hu/glossary/bongeszo/index.html b/files/hu/glossary/bongeszo/index.html deleted file mode 100644 index 36a13cf1ce..0000000000 --- a/files/hu/glossary/bongeszo/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Böngésző -slug: Glossary/bongeszo -tags: - - Nacigáció - - Szójegyzék -translation_of: Glossary/Browser ---- -

A Webböngésző vagy böngésző egy program, ami a {{Glossary("World Wide Web","webből")}} kinyeri és megjeleníti az oldalakat és lehetővé teszi a felhasználó számára a további oldalakhoz való hozzáférést {{Glossary("hyperlink","hivatkozásokon")}} keresztül. A böngésző a legismertebb {{Glossary("user agent", "hálózati kliens")}}.

- -

Tudj meg többet

- -

Egy böngésző letöltése

- - - - diff --git a/files/hu/glossary/browser/index.html b/files/hu/glossary/browser/index.html new file mode 100644 index 0000000000..36a13cf1ce --- /dev/null +++ b/files/hu/glossary/browser/index.html @@ -0,0 +1,37 @@ +--- +title: Böngésző +slug: Glossary/bongeszo +tags: + - Nacigáció + - Szójegyzék +translation_of: Glossary/Browser +--- +

A Webböngésző vagy böngésző egy program, ami a {{Glossary("World Wide Web","webből")}} kinyeri és megjeleníti az oldalakat és lehetővé teszi a felhasználó számára a további oldalakhoz való hozzáférést {{Glossary("hyperlink","hivatkozásokon")}} keresztül. A böngésző a legismertebb {{Glossary("user agent", "hálózati kliens")}}.

+ +

Tudj meg többet

+ +

Egy böngésző letöltése

+ + + + diff --git a/files/hu/glossary/elso_osztalyu_funkciok/index.html b/files/hu/glossary/elso_osztalyu_funkciok/index.html deleted file mode 100644 index 5a36982129..0000000000 --- a/files/hu/glossary/elso_osztalyu_funkciok/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Elsőrendű függvények -slug: Glossary/Elso_osztalyu_funkciok -tags: - - JavaScript - - Szkriptelés - - Szójegyzék -translation_of: Glossary/First-class_Function ---- -

Egy programnyelvnek Elsőrendű függvényei vannak, ha a nyelv függvényeit úgy kezeljük mint a többi változót. Egy ilyen nyelveben függvényeket adhatunk meg más függvények paramátereként, függvények más függvényeket adhatnak vissza és váltózókhoz is hozzárendelhetjük őket.

- -

Példa | Függvény hozzárendelése változóhoz

- -

JavaScript

- -
const foo = function() {
-   console.log("foobar");
-}
-// Meghívás a változóra való hivatkozással
-foo();
-
- -

Egy Névtelen függvényt rendeltünk egy Váltózóhoz, ezután a változó segítségével meghívtuk a függvényt úgy, hogy zárójelet tettünk () a változónév végére.

- -
-

Ha a függvény el is lenne nevezve, akkor is használhatnánk a változót a meghívására. Az elnevezés segítségünkre lehet a hibakeresésé során, de nem érinti a függvény meghívási módját.

-
- -

Példa | Függvény átadása argumentumként

- -

JavaScript

- -
function koszones() {
-   return "Helló, ";
-}
-function udvozlet(koszont, nev) {
-  console.log(koszont() + nev);
-}
-// `koszones` átadása argumentumként az `udvozlet` függénynek
-udvozlet(koszones, "JavaScript!");
-
- -

A koszones() függvényt adjuk át az udvozlet() függvény argumentumaként, ami magyarázatot ad arra, hogy hogyan tudjuk a függényeket értékként kezelni.

- -
-

A függvényt, aminek egy másik függvényt adunk át argumentumként, Visszahívó Függvénynek nevezzük. koszones egy visszahívó függvény.

-
- -

Példa | Függvény visszatérítése

- -

JavaScript

- -
function koszones() {
-   return function() {
-      console.log("Helló!");
-   }
-}
-
- -

Ebben a példában egy függvényt kell visszatérítenünk egy másik függvényből - Azért tudjuk ezt megtenni, mert a JavaScript a függvényeket értékként kezeli.

- -
-

Azt a függvényt, amely egy másik függnény térít vissza,  Felsőbbrendű Függvénynek nevezzük.

-
- -

Visszatérve a példánkra; most a koszones függvényt kell meghívnunk, amit Névtelen Függvényként kaptunk vissza. Ez kétféle módon lehetséges:

- -

1- Változó használata

- -
const koszones = function() {
-   return function() {
-      console.log("Helló!");
-   }
-}
-const fuggvenyem = koszones();
-fuggvenyem();
-
- -

Így megkapjuk a Helló! üzenetet.

- -
-

Változót kell használnunk. Ha koszonest közvetlenül hívtuk volna meg, a függvényt adta volna vissza anélkül, hogy meghívta volna a visszatérített függvényt.

-
- -

2- Dupla zárójel használata

- -
function koszones() {
-   return function() {
-      console.log("Helló!");
-   }
-}
-koszones()();
-
- -

Dupla zárojelet ()() használunk, hogy meghívjuk a visszatérített függvényt.

- -

Tudjon meg többet

- -

Általános Ismeretek

- - diff --git a/files/hu/glossary/first-class_function/index.html b/files/hu/glossary/first-class_function/index.html new file mode 100644 index 0000000000..5a36982129 --- /dev/null +++ b/files/hu/glossary/first-class_function/index.html @@ -0,0 +1,103 @@ +--- +title: Elsőrendű függvények +slug: Glossary/Elso_osztalyu_funkciok +tags: + - JavaScript + - Szkriptelés + - Szójegyzék +translation_of: Glossary/First-class_Function +--- +

Egy programnyelvnek Elsőrendű függvényei vannak, ha a nyelv függvényeit úgy kezeljük mint a többi változót. Egy ilyen nyelveben függvényeket adhatunk meg más függvények paramátereként, függvények más függvényeket adhatnak vissza és váltózókhoz is hozzárendelhetjük őket.

+ +

Példa | Függvény hozzárendelése változóhoz

+ +

JavaScript

+ +
const foo = function() {
+   console.log("foobar");
+}
+// Meghívás a változóra való hivatkozással
+foo();
+
+ +

Egy Névtelen függvényt rendeltünk egy Váltózóhoz, ezután a változó segítségével meghívtuk a függvényt úgy, hogy zárójelet tettünk () a változónév végére.

+ +
+

Ha a függvény el is lenne nevezve, akkor is használhatnánk a változót a meghívására. Az elnevezés segítségünkre lehet a hibakeresésé során, de nem érinti a függvény meghívási módját.

+
+ +

Példa | Függvény átadása argumentumként

+ +

JavaScript

+ +
function koszones() {
+   return "Helló, ";
+}
+function udvozlet(koszont, nev) {
+  console.log(koszont() + nev);
+}
+// `koszones` átadása argumentumként az `udvozlet` függénynek
+udvozlet(koszones, "JavaScript!");
+
+ +

A koszones() függvényt adjuk át az udvozlet() függvény argumentumaként, ami magyarázatot ad arra, hogy hogyan tudjuk a függényeket értékként kezelni.

+ +
+

A függvényt, aminek egy másik függvényt adunk át argumentumként, Visszahívó Függvénynek nevezzük. koszones egy visszahívó függvény.

+
+ +

Példa | Függvény visszatérítése

+ +

JavaScript

+ +
function koszones() {
+   return function() {
+      console.log("Helló!");
+   }
+}
+
+ +

Ebben a példában egy függvényt kell visszatérítenünk egy másik függvényből - Azért tudjuk ezt megtenni, mert a JavaScript a függvényeket értékként kezeli.

+ +
+

Azt a függvényt, amely egy másik függnény térít vissza,  Felsőbbrendű Függvénynek nevezzük.

+
+ +

Visszatérve a példánkra; most a koszones függvényt kell meghívnunk, amit Névtelen Függvényként kaptunk vissza. Ez kétféle módon lehetséges:

+ +

1- Változó használata

+ +
const koszones = function() {
+   return function() {
+      console.log("Helló!");
+   }
+}
+const fuggvenyem = koszones();
+fuggvenyem();
+
+ +

Így megkapjuk a Helló! üzenetet.

+ +
+

Változót kell használnunk. Ha koszonest közvetlenül hívtuk volna meg, a függvényt adta volna vissza anélkül, hogy meghívta volna a visszatérített függvényt.

+
+ +

2- Dupla zárójel használata

+ +
function koszones() {
+   return function() {
+      console.log("Helló!");
+   }
+}
+koszones()();
+
+ +

Dupla zárojelet ()() használunk, hogy meghívjuk a visszatérített függvényt.

+ +

Tudjon meg többet

+ +

Általános Ismeretek

+ + diff --git a/files/hu/learn/getting_started_with_the_web/index.html b/files/hu/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..38c28abba1 --- /dev/null +++ b/files/hu/learn/getting_started_with_the_web/index.html @@ -0,0 +1,60 @@ +--- +title: Ismerkedés a Világhálóval +slug: Learn/Ismerkedés_a_Világhálóval +tags: + - CSS + - HTML + - Kezdő + - útmutató +translation_of: Learn/Getting_started_with_the_web +--- +
{{LearnSidebar}}
+ +
+

Az Ismerkedés a Világhálóval egy rövid cikksorozat, amelyben a webfejlesztés gyakorlati mibenlétét mutatjuk be. Áttekintjük a szükséges eszközöket, írunk egy egyszerű weboldalt és publikáljuk a munkánkat.

+
+ +

Első weboldalunk születése

+ +

Egy professzionális weboldal elkészítése rengeteg munka, így a tanulást mindenképpen kicsiben érdemes kezdeni. Nem fogunk rögtön egy újabb Facebookot írni, de egy egyszerű weboldal elkészítése meglepően könnyű feladat, úgyhogy ezzel indítunk.

+ +

Az alábbi cikkek úgy vannak összeállítva, hogy sorban haladva segítsenek minket megírni és közzétenni első weboldalunkat, teljesen nulláról. Fogjunk hát hozzá!

+ +

Alapvető programok telepítése

+ +

Számtalan program és eszköz áll rendelkezésre a weboldalak fejlesztéséhez és teszteléséhez.  Az Installing basic software cikkben segítünk eligazodni ezek között és bemutatjuk a kezdés szempontjából legfontosabb eszközöket.

+ +

Hogy fog kinézni a weboldalunk?

+ +

Mielőtt nekilátunk a weboldalunk lekódolásának, meg kell terveznünk azt. Milyen tartalmat akarunk pontosan megjeleníteni? Milyen betűtípust és színeket akarunk használni? A  What will your website look like? cikkben lépésről lépésre végigvezetünk egy alapvető tervezési folyamaton.

+ +

Fájlokkal való munka

+ +

Egy weboldal sok-sok különféle fájlból áll: szöveges fájlok, programkód, síluslapok, képek, videók, és még sorolhatnánk. Hogyan tudjuk ezt a sok fájlt egy összefüggő weboldallá gyúrni? És hogyan rendszerezzük a fájljainkat hatékonyan? Ezekre a kérdésekre válaszol a Dealing with files cikk.

+ +

HTML alapok

+ +

A HTML (Hypertext Markup Language, hiperszöveg jelölőnyelv) kód segítségével strukturálhatjuk a weboldalunk tartalmát, azaz megadhatjuk, hogy melyek a címsorok, hogy a szöveget miként tagoljuk bekezdésekre, felsorolásokra, mit kell táblázatosan megjeleníteni, hova kell képet beilleszteni és így tovább. A HTML basics cikkben a legfontosabb HTML elemeket tekintjük át.

+ +

CSS alapok

+ +

A CSS (Cascading Stylesheets, lépcsőzetes stíluslapok) kód segítségével tudjuk színezni, méretezni, háttérképekkel dísziteni, pozícionálni, egyszóval formázni a weboldalunk tartalmát. A CSS basics cikkben elmagyarázzuk az alapvető fogalmakat és bemutatunk néhány CSS formázási példát.

+ +

JavaScript alapok

+ +

A JavaScript programozási nyelv teszi lehetővé, hogy dinamikus, interaktív weboldalakat hozzunk létre. Néhány példa a JavaScript alkalmazására: komplett játékok, kattintásra megjelenő elemek, űrlapok ellenőrzése, dinamikusan változó színek, animációk. A JavaScript basics cikk ismerteti a JavaScript programozás alapjait és egy példán keresztül bemutatja, mi minden lehetséges a használatával.

+ +

Weboldalunk közzététele

+ +

Miután végeztünk a weboldalunk lekódolásával, elérhetővé kell tennünk az Interneten. A Publishing your sample code cikk bemutatja a lehetőségeinket és segít közzétenni az oldalunkat egy egyszerű módszerrel.

+ +

Hogy működik a Világháló?

+ +

Amikor megnyitunk egy weboldalt, egy sor bonyolult folyamat zajlik a háttérben. A How the web works cikk ezeket a folyamatokat mutatja be nagyvonalakban.

+ +

Lásd még

+ + diff --git a/files/hu/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/hu/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..463216fd9f --- /dev/null +++ b/files/hu/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,78 @@ +--- +title: Alapvető programok telepítése +slug: Learn/Ismerkedés_a_Világhálóval/Alapvető_programok_telepítése +tags: + - Kezdő + - böngésző + - ezközök + - kódszerkesztő + - programok + - szövegszerkesztő +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

Ebben a cikkben megmutatjuk milyen programokra lesz szükségünk egyszerű weboldalak fejlesztéséhez.

+
+ +

Milyen eszközöket használnak a profi webfejlesztők?

+ + + +

Mire van feltétlenül szükségem a kezdéshez?

+ +

Habár a fenti lista elsőre rémisztőnek tűnhet, a jó hír az, hogy ezeknek csupán egy töredéke szükséges a kezdéshez.

+ +

A továbbiakban a két legszükségesebbre fókuszálunk: egy alkalmas szövegszerkesztőre és böngészőkre.

+ +

Kódszerkesztő

+ +

Szinte bizonyos, hogy már van valamilyen kódolásra alkalmas szövegszerkesztő a számítógépünkön. Windowson a Jegyzettömb, macOS esetén a TextEdit elő van telepítve. Linux esetén disztribúciófüggő az alapértelmezett szerkesztő, Ubuntu esetén ez a gedit.

+ +

Habár ezekkel a programokkal lehetséges kódot írni, vannak jobb alternatívák. A Visual Studio Code egy igen népszerű ingyenes kódszerkesztő, kimondottan programozást támogató funkciókkal.

+ +

Modern böngészők

+ +

Tekintsük az operációs rendszerünknek megfelelő böngészők listáját és telepítsük őket a megadott linkek segítségével. Erősen ajánlott  legalább két böngészőt telepíteni, mielőtt elkezdjük a tanulást, de a későbbi teszteléshez javasolt mindegyiknek a telepítése.

+ + + +
+

Figyelem: Az Internet Explorer nem kompatibilis némely modern webes technológiákkal, így előfordulhat, hogy nem tudja futtatni a projektünket. Általánosságban azonban elmondható, hogy nem kell aggódnunk az Internet Explorer miatt, mivel manapság nagyon kevesen használják — ugyanakkor az is előfordulhat, hogy olyan projektbe botlunk, ahol fontos az Internet Explorer támogatása.

+
+ +

Helyben futó webszerver

+ +

Egyes példák futtatásához egy működő webszerverre lesz szükségünk. A How do you set up a local testing server? cikk részletesen bemutatja, hogyan tudunk konfigurálni egyet.

+ +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

+ +

Modul tartalomjegyzék

+ + diff --git a/files/hu/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/hu/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..374aae6c40 --- /dev/null +++ b/files/hu/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,92 @@ +--- +title: Hogy fog kinézni a weboldalunk +slug: Learn/Ismerkedés_a_Világhálóval/Hogy_fog_kinézni_a_weboldalunk +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+ +
+

Ebben a cikkben áttekintjük a weboldalunk kódolása előtt szükséges alapvető tervezési lépéseket. Milyen tartalmat fogunk megjeleníteni? Milyen betűtípusokat és színeket képzelünk el? Egyáltalán, mi a weboldal legfőbb célja?

+
+ +

Első lépés: tervezés

+ +

Miről fog szólni a weboldalunk? Mi lesz a célja? Kezdésnek valami egyszerűre törekedjünk, például egy cím, egy kép és néhány bekezdés valamilyen konkrét dologról.

+ +

Alapvető kérdések:

+ +
    +
  1. Miről szóljon? Mi az ami érdekel? Kutyák? New York? Pac-Man?
    2. +
  2. Mi lesz a konkrét megjelenített tartalom? Írjunk néhány bekezdést, találjunk ki egy címet és keressünk egy képet.
    3. +
  3. Hogy fog kinézni az oldal? Nem kell mindent részletesen kitalálni előre, de jó, ha legalább az elrendezést, a háttérszíneket és a betűstílust nagyvonalakban meghatározzuk. Milyen kisugárzást szeretnénk? Hivatalosat? Vicceset? Figyelemfelhívót? Esetleg valami diszkrétet?
    4. +
+ +
+

Megjegyzés: A komplex projektek tervezése nagyságrendekkel bonyolultabb. Méretek, térközök, fogalmazási stílus, és így tovább. Ezeket az előírásokat egy úgynevezett design systemben (vagy más néven brand bookban) szokás összefoglalni.  Íme egy példa, a Firefox Photon Design System.

+
+ +

Vázlatos arculati terv

+ +

Ragadjunk papírt és ceruzát és skicceljük fel a weboldalunkat. Habár egy kép és néhány bekezdés esetén ez feleslegesnek tűnhet, valójában nagyon sokat segít, ha van egy hozzávetőleges ábránk arról, hogy mit is szeretnénk pontosan, ezért nem árt, ha már most hozzászokunk a folyamathoz.

+ +

+ +
+

Megjegyzés: Még egy nagy, összetett weboldal esetén is gyakran ilyen egyszerű papíros vázlatokkal kezdődik a tervezés és az alapvető elképzelések megszilárdulása után készülnek digitális tervek, kattintható prototípusok.

+ +

A webes csapatoknak sokszor tagja egy grafikus és egy {{Glossary("UX", "user experience")}} (UX, felhaszálói élmény) designer. A grafikus felel a megjelenés részletes megtervezéséért, míg a UX designer a weboldal megjelenési és működési alapvetéseit határozza meg úgy, hogy az felhasználóbarát legyen váljon.

+
+ +

Weboldal elemeinek összeállítása

+ +

Eljött az idő, hogy összeszedjük, pontosan mit is tartalmazzon a weboldalunk.

+ +

Szöveges tartalom

+ +

Írjuk meg a konkrét szöveges tartalmat, ha még nem tettük volna meg.

+ +

Szín téma

+ +

Nyissuk meg az MDN színválasztó segédeszközét és válasszunk egy színt a weboldal általános szín témájának. Miután kiválasztottunk egy színt, egy #660066 alakú kódot fogunk látni. Ez egy hexa-kód (hexadecimális, tizenhatos számrendszerbeli). Ez azonosítja a kiválasztott színt. Írjuk fel valahova.

+ +

+ +

Képek

+ +

Keressünk felhasználható képeket az Interneten (pl. Google Képek segítségével).

+ +
    +
  1. Az egyes képekre kattintva egy előnézetet kapunk, egyéb adatokkal (pl. felbontás)
    2. +
  2. Mentsük el a képet a számítógépre.
    3. +
+ +

+ +

Ne feledjük, hogy a legtöbb kép, így azok is, amelyeket a Google keresőjén keresztül találunk, jogvédettek. Használjuk a kereső licensz szűrőjét, hogy csökkentsük a szerzői jogok megsértésének valószínűségét.

+ +

+ +

Betűtípus

+ +

Látogassunk el a Google Fonts oldalra és keressünk egy nekünk tetsző betűtípust. Használjuk a szűrőbeállításokat a keresés megkönnyítésére.

+ +

+ +

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

+ +

Modul tartalomjegyzék

+ + diff --git a/files/hu/learn/html/bevezetes_a_html-be/index.html b/files/hu/learn/html/bevezetes_a_html-be/index.html deleted file mode 100644 index d5f2c7239a..0000000000 --- a/files/hu/learn/html/bevezetes_a_html-be/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Bevezetés a HTML-be -slug: Learn/HTML/Bevezetes_a_HTML-be -translation_of: Learn/HTML/Introduction_to_HTML ---- -
{{LearnSidebar}}
- -
A {{glossary("HTML")}} alapvetően egy egyszerű nyelv. Olyan elemekből áll, amelyekkel különböző jelentést társíthatunk szövegrészleteknek (például egy bekezdés, egy számozott lista, egy táblázat sora), struktúrálhatjuk a dokumentumot logikai részekre (például fejléc, navigációs sáv, három oszlopos tartalom), vagy beilleszthetünk más tartalmakat az oldalunkba (például képeket vagy videót).
- -
Ez a modul bemutatja ezek közül az első kettőt, és megismertet az alapvető fogalmakkal és a szintaxissal, amiket tudnod kell a HTML megértéséhez.
- -

Előfeltételek

- -

Mielőtt elkezded ezt a modult, tudnod kell pár dolgot.
- A kezdéshez nincs szükséged előzetes HTML ismeretekre, ugyanakkor legalább alapszinten ismerned kell a számítógép és az internet használatát. Létre kell hoznod egy alapvető munkakörnyezetet (amit az Alapvető szoftverek telepítése útmutatónk részletesen ismertet), és tudnod kell, hogyan hozhatsz létre és kezelhetsz fájlokat (amit a Fájlok kezelése útmutatónk részletesen ismertet). Mindkettő része a Kezdő lépések modulnak.

- -
-

Megjegyzés: Ha olyan számítógépen / táblagépen / vagy egyéb eszközön dolgozol, amelyen nem tudsz fájlokat létrehozni, próbáld ki (a legtöbb) példa kódot valamelyik online programban, mint amilyen a JSBin vagy a Thimble.

-
- -

Útmutatók

- -

Ez a modul olyan útmutatókat tartalmaz, amelyek végigvezetnek a HTML nyújtotta összes lehetőségen, és bőséges lehetőséget nyújtanak a képességeid tesztelésére.

- -
-
HTML Alapok
-
Magában foglalja a HTML abszolút alapjait — definiáljuk az elemeket, attribútumokat, és más fontos paramétereket, valamint megmutatjuk hol illeszkednek a nyelvhez. Azt is megmutatjuk, hogy egy tipikus HTML oldal hogyan van struktúrálva illetve egy HTML elem hogyan van struktúrálva, valamint elmagyarázzuk milyen egyéb fontos nyelvi funkciók vannak. Útközben játszunk is egy kicsit a HTML-el, hogy felkeltsük az érdeklődésedet.
-
Mi van a head-ben? Metaadatok HTML-ben
-
A HTML-dokumentum feje (head) az a rész, amely nem jelenik meg a webböngészőben az oldal betöltésekor. Olyan információkat tartalmaz, mint például az oldal címe ({{htmlelement("title")}}), linkek a {{glossary("CSS")}} fájlokra, az egyedi ikonok elérési útvonalai, illetve a metaadatok (adatok a HTML-ről, például arról, hogy ki írta, vagy a dokumentumot leíró fontos kulcsszavakat).
-
HTML szöveg alapjai
-
A HTML egyik fő feladata, hogy jelentést adjon a szövegnek (más néven szematika), hogy a böngésző tudja, hogyan kell helyesen megjeleníteni. Ez a cikk megmutatja hogyan tördelheted fel a szöveget fejlécekre és bekezdésekre, hogyan hangsúlyozhatsz szavakat, vagy készíthesz listákat és egyebeket HTML segítségével..
-
Hivatkozások létrehozása
-
A hivatkozások (hyperlinks) nagyon fontosak — ők teszik az internetet internetté. Ez a cikk egy link elkészítéséhez szükséges szintaxist mutat be, illetve bemutat néhány praktikát.
-
Speciális szövegformázás
-
Rengeteg elem van a HTML-ben a szövegek formázására, amelyeket a HTML szöveg alapjai cikkben nem találsz meg. Ezek az elemek kevésbé ismertek, pedig ismeretük még mindig hasznos lehet. Ebben a cikkben megtanulhatod az idézetek, a leírási listák, a számítógépes kódok és egyéb kapcsolódó szövegek, úgy mint indexek, felső indexek vagy kapcsolati adatok megjelölését.
-
Dokumentum- és weboldalszerkezet
-
Az oldal egyes részeinek (például bekezdés vagy kép) meghatározása mellett a HTML-t arra is használják, hogy meghatározza webhely területeit (például fejléc, lábléc, navigációs sáv, tartalom). Ez a cikk megvizsgálja, hogyan kell megtervezni egy alapvető webhelystruktúrát, illetve hogyan kell megírni HTML-ben.
-
Hibakeresés HTML-ben
-
HTML-t írni szuper, de mi van akkor, ha valamit elromlik és nem találod a hibát? Ez a cikk bemutat néhány eszközt, amely segíthet.
-
- -

Tesztek

- -

Ezekkel a tesztekkel ellenőrizheted, hogy mennyire sikerült megértened a fenti útmutatókban leírtakat.

- -
-
Egy levél írása 
-
Mindannyian megtanulunk egy levelet írni előbb vagy utóbb; ez egy hasznos példa a szövegformázási készségek tesztelésére. Ebben a tesztben egy levelet kell megformázni.
-
Egy tartalom oldalának strukturálása
-
Ez a tesz ellenőrzi hogyan tudsz struktúrálni HTML-el egy oldalt, amely tartalmaz fejlécet, láblécet, navigációs sávot, egy fő tartalmat és egy oldalsávot.
-
- -

Kapcsolódó témakörök

- -
-
A webes műveltség alapjai 1
-
Egy kiváló Mozilla alapítványi tanfolyam, amely a Bevezetés a HTML-be c. útmutatóban bemutatott sok készség vizsgálatára és tesztelésére szolgál. A tanulók megismerkedhetnek az olvasással, az írással és a weben való részvételellel ebben a hat részből álló modulban. Fedezze fel a web alapjait a alkotás és az együttműködés révén.
-
diff --git a/files/hu/learn/html/introduction_to_html/index.html b/files/hu/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..d5f2c7239a --- /dev/null +++ b/files/hu/learn/html/introduction_to_html/index.html @@ -0,0 +1,58 @@ +--- +title: Bevezetés a HTML-be +slug: Learn/HTML/Bevezetes_a_HTML-be +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +
A {{glossary("HTML")}} alapvetően egy egyszerű nyelv. Olyan elemekből áll, amelyekkel különböző jelentést társíthatunk szövegrészleteknek (például egy bekezdés, egy számozott lista, egy táblázat sora), struktúrálhatjuk a dokumentumot logikai részekre (például fejléc, navigációs sáv, három oszlopos tartalom), vagy beilleszthetünk más tartalmakat az oldalunkba (például képeket vagy videót).
+ +
Ez a modul bemutatja ezek közül az első kettőt, és megismertet az alapvető fogalmakkal és a szintaxissal, amiket tudnod kell a HTML megértéséhez.
+ +

Előfeltételek

+ +

Mielőtt elkezded ezt a modult, tudnod kell pár dolgot.
+ A kezdéshez nincs szükséged előzetes HTML ismeretekre, ugyanakkor legalább alapszinten ismerned kell a számítógép és az internet használatát. Létre kell hoznod egy alapvető munkakörnyezetet (amit az Alapvető szoftverek telepítése útmutatónk részletesen ismertet), és tudnod kell, hogyan hozhatsz létre és kezelhetsz fájlokat (amit a Fájlok kezelése útmutatónk részletesen ismertet). Mindkettő része a Kezdő lépések modulnak.

+ +
+

Megjegyzés: Ha olyan számítógépen / táblagépen / vagy egyéb eszközön dolgozol, amelyen nem tudsz fájlokat létrehozni, próbáld ki (a legtöbb) példa kódot valamelyik online programban, mint amilyen a JSBin vagy a Thimble.

+
+ +

Útmutatók

+ +

Ez a modul olyan útmutatókat tartalmaz, amelyek végigvezetnek a HTML nyújtotta összes lehetőségen, és bőséges lehetőséget nyújtanak a képességeid tesztelésére.

+ +
+
HTML Alapok
+
Magában foglalja a HTML abszolút alapjait — definiáljuk az elemeket, attribútumokat, és más fontos paramétereket, valamint megmutatjuk hol illeszkednek a nyelvhez. Azt is megmutatjuk, hogy egy tipikus HTML oldal hogyan van struktúrálva illetve egy HTML elem hogyan van struktúrálva, valamint elmagyarázzuk milyen egyéb fontos nyelvi funkciók vannak. Útközben játszunk is egy kicsit a HTML-el, hogy felkeltsük az érdeklődésedet.
+
Mi van a head-ben? Metaadatok HTML-ben
+
A HTML-dokumentum feje (head) az a rész, amely nem jelenik meg a webböngészőben az oldal betöltésekor. Olyan információkat tartalmaz, mint például az oldal címe ({{htmlelement("title")}}), linkek a {{glossary("CSS")}} fájlokra, az egyedi ikonok elérési útvonalai, illetve a metaadatok (adatok a HTML-ről, például arról, hogy ki írta, vagy a dokumentumot leíró fontos kulcsszavakat).
+
HTML szöveg alapjai
+
A HTML egyik fő feladata, hogy jelentést adjon a szövegnek (más néven szematika), hogy a böngésző tudja, hogyan kell helyesen megjeleníteni. Ez a cikk megmutatja hogyan tördelheted fel a szöveget fejlécekre és bekezdésekre, hogyan hangsúlyozhatsz szavakat, vagy készíthesz listákat és egyebeket HTML segítségével..
+
Hivatkozások létrehozása
+
A hivatkozások (hyperlinks) nagyon fontosak — ők teszik az internetet internetté. Ez a cikk egy link elkészítéséhez szükséges szintaxist mutat be, illetve bemutat néhány praktikát.
+
Speciális szövegformázás
+
Rengeteg elem van a HTML-ben a szövegek formázására, amelyeket a HTML szöveg alapjai cikkben nem találsz meg. Ezek az elemek kevésbé ismertek, pedig ismeretük még mindig hasznos lehet. Ebben a cikkben megtanulhatod az idézetek, a leírási listák, a számítógépes kódok és egyéb kapcsolódó szövegek, úgy mint indexek, felső indexek vagy kapcsolati adatok megjelölését.
+
Dokumentum- és weboldalszerkezet
+
Az oldal egyes részeinek (például bekezdés vagy kép) meghatározása mellett a HTML-t arra is használják, hogy meghatározza webhely területeit (például fejléc, lábléc, navigációs sáv, tartalom). Ez a cikk megvizsgálja, hogyan kell megtervezni egy alapvető webhelystruktúrát, illetve hogyan kell megírni HTML-ben.
+
Hibakeresés HTML-ben
+
HTML-t írni szuper, de mi van akkor, ha valamit elromlik és nem találod a hibát? Ez a cikk bemutat néhány eszközt, amely segíthet.
+
+ +

Tesztek

+ +

Ezekkel a tesztekkel ellenőrizheted, hogy mennyire sikerült megértened a fenti útmutatókban leírtakat.

+ +
+
Egy levél írása 
+
Mindannyian megtanulunk egy levelet írni előbb vagy utóbb; ez egy hasznos példa a szövegformázási készségek tesztelésére. Ebben a tesztben egy levelet kell megformázni.
+
Egy tartalom oldalának strukturálása
+
Ez a tesz ellenőrzi hogyan tudsz struktúrálni HTML-el egy oldalt, amely tartalmaz fejlécet, láblécet, navigációs sávot, egy fő tartalmat és egy oldalsávot.
+
+ +

Kapcsolódó témakörök

+ +
+
A webes műveltség alapjai 1
+
Egy kiváló Mozilla alapítványi tanfolyam, amely a Bevezetés a HTML-be c. útmutatóban bemutatott sok készség vizsgálatára és tesztelésére szolgál. A tanulók megismerkedhetnek az olvasással, az írással és a weben való részvételellel ebben a hat részből álló modulban. Fedezze fel a web alapjait a alkotás és az együttműködés révén.
+
diff --git "a/files/hu/learn/ismerked\303\251s_a_vil\303\241gh\303\241l\303\263val/alapvet\305\221_programok_telep\303\255t\303\251se/index.html" "b/files/hu/learn/ismerked\303\251s_a_vil\303\241gh\303\241l\303\263val/alapvet\305\221_programok_telep\303\255t\303\251se/index.html" deleted file mode 100644 index 463216fd9f..0000000000 --- "a/files/hu/learn/ismerked\303\251s_a_vil\303\241gh\303\241l\303\263val/alapvet\305\221_programok_telep\303\255t\303\251se/index.html" +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Alapvető programok telepítése -slug: Learn/Ismerkedés_a_Világhálóval/Alapvető_programok_telepítése -tags: - - Kezdő - - böngésző - - ezközök - - kódszerkesztő - - programok - - szövegszerkesztő -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
- -
-

Ebben a cikkben megmutatjuk milyen programokra lesz szükségünk egyszerű weboldalak fejlesztéséhez.

-
- -

Milyen eszközöket használnak a profi webfejlesztők?

- - - -

Mire van feltétlenül szükségem a kezdéshez?

- -

Habár a fenti lista elsőre rémisztőnek tűnhet, a jó hír az, hogy ezeknek csupán egy töredéke szükséges a kezdéshez.

- -

A továbbiakban a két legszükségesebbre fókuszálunk: egy alkalmas szövegszerkesztőre és böngészőkre.

- -

Kódszerkesztő

- -

Szinte bizonyos, hogy már van valamilyen kódolásra alkalmas szövegszerkesztő a számítógépünkön. Windowson a Jegyzettömb, macOS esetén a TextEdit elő van telepítve. Linux esetén disztribúciófüggő az alapértelmezett szerkesztő, Ubuntu esetén ez a gedit.

- -

Habár ezekkel a programokkal lehetséges kódot írni, vannak jobb alternatívák. A Visual Studio Code egy igen népszerű ingyenes kódszerkesztő, kimondottan programozást támogató funkciókkal.

- -

Modern böngészők

- -

Tekintsük az operációs rendszerünknek megfelelő böngészők listáját és telepítsük őket a megadott linkek segítségével. Erősen ajánlott  legalább két böngészőt telepíteni, mielőtt elkezdjük a tanulást, de a későbbi teszteléshez javasolt mindegyiknek a telepítése.

- - - -
-

Figyelem: Az Internet Explorer nem kompatibilis némely modern webes technológiákkal, így előfordulhat, hogy nem tudja futtatni a projektünket. Általánosságban azonban elmondható, hogy nem kell aggódnunk az Internet Explorer miatt, mivel manapság nagyon kevesen használják — ugyanakkor az is előfordulhat, hogy olyan projektbe botlunk, ahol fontos az Internet Explorer támogatása.

-
- -

Helyben futó webszerver

- -

Egyes példák futtatásához egy működő webszerverre lesz szükségünk. A How do you set up a local testing server? cikk részletesen bemutatja, hogyan tudunk konfigurálni egyet.

- -

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

- -

Modul tartalomjegyzék

- - diff --git "a/files/hu/learn/ismerked\303\251s_a_vil\303\241gh\303\241l\303\263val/hogy_fog_kin\303\251zni_a_weboldalunk/index.html" "b/files/hu/learn/ismerked\303\251s_a_vil\303\241gh\303\241l\303\263val/hogy_fog_kin\303\251zni_a_weboldalunk/index.html" deleted file mode 100644 index 374aae6c40..0000000000 --- "a/files/hu/learn/ismerked\303\251s_a_vil\303\241gh\303\241l\303\263val/hogy_fog_kin\303\251zni_a_weboldalunk/index.html" +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Hogy fog kinézni a weboldalunk -slug: Learn/Ismerkedés_a_Világhálóval/Hogy_fog_kinézni_a_weboldalunk -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
- -
-

Ebben a cikkben áttekintjük a weboldalunk kódolása előtt szükséges alapvető tervezési lépéseket. Milyen tartalmat fogunk megjeleníteni? Milyen betűtípusokat és színeket képzelünk el? Egyáltalán, mi a weboldal legfőbb célja?

-
- -

Első lépés: tervezés

- -

Miről fog szólni a weboldalunk? Mi lesz a célja? Kezdésnek valami egyszerűre törekedjünk, például egy cím, egy kép és néhány bekezdés valamilyen konkrét dologról.

- -

Alapvető kérdések:

- -
    -
  1. Miről szóljon? Mi az ami érdekel? Kutyák? New York? Pac-Man?
    2. -
  2. Mi lesz a konkrét megjelenített tartalom? Írjunk néhány bekezdést, találjunk ki egy címet és keressünk egy képet.
    3. -
  3. Hogy fog kinézni az oldal? Nem kell mindent részletesen kitalálni előre, de jó, ha legalább az elrendezést, a háttérszíneket és a betűstílust nagyvonalakban meghatározzuk. Milyen kisugárzást szeretnénk? Hivatalosat? Vicceset? Figyelemfelhívót? Esetleg valami diszkrétet?
    4. -
- -
-

Megjegyzés: A komplex projektek tervezése nagyságrendekkel bonyolultabb. Méretek, térközök, fogalmazási stílus, és így tovább. Ezeket az előírásokat egy úgynevezett design systemben (vagy más néven brand bookban) szokás összefoglalni.  Íme egy példa, a Firefox Photon Design System.

-
- -

Vázlatos arculati terv

- -

Ragadjunk papírt és ceruzát és skicceljük fel a weboldalunkat. Habár egy kép és néhány bekezdés esetén ez feleslegesnek tűnhet, valójában nagyon sokat segít, ha van egy hozzávetőleges ábránk arról, hogy mit is szeretnénk pontosan, ezért nem árt, ha már most hozzászokunk a folyamathoz.

- -

- -
-

Megjegyzés: Még egy nagy, összetett weboldal esetén is gyakran ilyen egyszerű papíros vázlatokkal kezdődik a tervezés és az alapvető elképzelések megszilárdulása után készülnek digitális tervek, kattintható prototípusok.

- -

A webes csapatoknak sokszor tagja egy grafikus és egy {{Glossary("UX", "user experience")}} (UX, felhaszálói élmény) designer. A grafikus felel a megjelenés részletes megtervezéséért, míg a UX designer a weboldal megjelenési és működési alapvetéseit határozza meg úgy, hogy az felhasználóbarát legyen váljon.

-
- -

Weboldal elemeinek összeállítása

- -

Eljött az idő, hogy összeszedjük, pontosan mit is tartalmazzon a weboldalunk.

- -

Szöveges tartalom

- -

Írjuk meg a konkrét szöveges tartalmat, ha még nem tettük volna meg.

- -

Szín téma

- -

Nyissuk meg az MDN színválasztó segédeszközét és válasszunk egy színt a weboldal általános szín témájának. Miután kiválasztottunk egy színt, egy #660066 alakú kódot fogunk látni. Ez egy hexa-kód (hexadecimális, tizenhatos számrendszerbeli). Ez azonosítja a kiválasztott színt. Írjuk fel valahova.

- -

- -

Képek

- -

Keressünk felhasználható képeket az Interneten (pl. Google Képek segítségével).

- -
    -
  1. Az egyes képekre kattintva egy előnézetet kapunk, egyéb adatokkal (pl. felbontás)
    2. -
  2. Mentsük el a képet a számítógépre.
    3. -
- -

- -

Ne feledjük, hogy a legtöbb kép, így azok is, amelyeket a Google keresőjén keresztül találunk, jogvédettek. Használjuk a kereső licensz szűrőjét, hogy csökkentsük a szerzői jogok megsértésének valószínűségét.

- -

- -

Betűtípus

- -

Látogassunk el a Google Fonts oldalra és keressünk egy nekünk tetsző betűtípust. Használjuk a szűrőbeállításokat a keresés megkönnyítésére.

- -

- -

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

- -

Modul tartalomjegyzék

- - diff --git "a/files/hu/learn/ismerked\303\251s_a_vil\303\241gh\303\241l\303\263val/index.html" "b/files/hu/learn/ismerked\303\251s_a_vil\303\241gh\303\241l\303\263val/index.html" deleted file mode 100644 index 38c28abba1..0000000000 --- "a/files/hu/learn/ismerked\303\251s_a_vil\303\241gh\303\241l\303\263val/index.html" +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Ismerkedés a Világhálóval -slug: Learn/Ismerkedés_a_Világhálóval -tags: - - CSS - - HTML - - Kezdő - - útmutató -translation_of: Learn/Getting_started_with_the_web ---- -
{{LearnSidebar}}
- -
-

Az Ismerkedés a Világhálóval egy rövid cikksorozat, amelyben a webfejlesztés gyakorlati mibenlétét mutatjuk be. Áttekintjük a szükséges eszközöket, írunk egy egyszerű weboldalt és publikáljuk a munkánkat.

-
- -

Első weboldalunk születése

- -

Egy professzionális weboldal elkészítése rengeteg munka, így a tanulást mindenképpen kicsiben érdemes kezdeni. Nem fogunk rögtön egy újabb Facebookot írni, de egy egyszerű weboldal elkészítése meglepően könnyű feladat, úgyhogy ezzel indítunk.

- -

Az alábbi cikkek úgy vannak összeállítva, hogy sorban haladva segítsenek minket megírni és közzétenni első weboldalunkat, teljesen nulláról. Fogjunk hát hozzá!

- -

Alapvető programok telepítése

- -

Számtalan program és eszköz áll rendelkezésre a weboldalak fejlesztéséhez és teszteléséhez.  Az Installing basic software cikkben segítünk eligazodni ezek között és bemutatjuk a kezdés szempontjából legfontosabb eszközöket.

- -

Hogy fog kinézni a weboldalunk?

- -

Mielőtt nekilátunk a weboldalunk lekódolásának, meg kell terveznünk azt. Milyen tartalmat akarunk pontosan megjeleníteni? Milyen betűtípust és színeket akarunk használni? A  What will your website look like? cikkben lépésről lépésre végigvezetünk egy alapvető tervezési folyamaton.

- -

Fájlokkal való munka

- -

Egy weboldal sok-sok különféle fájlból áll: szöveges fájlok, programkód, síluslapok, képek, videók, és még sorolhatnánk. Hogyan tudjuk ezt a sok fájlt egy összefüggő weboldallá gyúrni? És hogyan rendszerezzük a fájljainkat hatékonyan? Ezekre a kérdésekre válaszol a Dealing with files cikk.

- -

HTML alapok

- -

A HTML (Hypertext Markup Language, hiperszöveg jelölőnyelv) kód segítségével strukturálhatjuk a weboldalunk tartalmát, azaz megadhatjuk, hogy melyek a címsorok, hogy a szöveget miként tagoljuk bekezdésekre, felsorolásokra, mit kell táblázatosan megjeleníteni, hova kell képet beilleszteni és így tovább. A HTML basics cikkben a legfontosabb HTML elemeket tekintjük át.

- -

CSS alapok

- -

A CSS (Cascading Stylesheets, lépcsőzetes stíluslapok) kód segítségével tudjuk színezni, méretezni, háttérképekkel dísziteni, pozícionálni, egyszóval formázni a weboldalunk tartalmát. A CSS basics cikkben elmagyarázzuk az alapvető fogalmakat és bemutatunk néhány CSS formázási példát.

- -

JavaScript alapok

- -

A JavaScript programozási nyelv teszi lehetővé, hogy dinamikus, interaktív weboldalakat hozzunk létre. Néhány példa a JavaScript alkalmazására: komplett játékok, kattintásra megjelenő elemek, űrlapok ellenőrzése, dinamikusan változó színek, animációk. A JavaScript basics cikk ismerteti a JavaScript programozás alapjait és egy példán keresztül bemutatja, mi minden lehetséges a használatával.

- -

Weboldalunk közzététele

- -

Miután végeztünk a weboldalunk lekódolásával, elérhetővé kell tennünk az Interneten. A Publishing your sample code cikk bemutatja a lehetőségeinket és segít közzétenni az oldalunkat egy egyszerű módszerrel.

- -

Hogy működik a Világháló?

- -

Amikor megnyitunk egy weboldalt, egy sor bonyolult folyamat zajlik a háttérben. A How the web works cikk ezeket a folyamatokat mutatja be nagyvonalakban.

- -

Lásd még

- - diff --git "a/files/hu/learn/javascript/els\305\221_l\303\251p\303\251sek/index.html" "b/files/hu/learn/javascript/els\305\221_l\303\251p\303\251sek/index.html" deleted file mode 100644 index 7276a4541c..0000000000 --- "a/files/hu/learn/javascript/els\305\221_l\303\251p\303\251sek/index.html" +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Első lépések JavaScript-ben -slug: Learn/JavaScript/Első_lépések -tags: - - Cikk - - JavaScript - - Kezdő - - Modul - - Operátorok - - Számok - - Tömbök - - Változók - - matek - - stringek - - Érkező - - Értékelés - - útmutató -translation_of: Learn/JavaScript/First_steps ---- -
{{LearnSidebar}}
- -

Az első JavaScript modulunkban, először válaszolunk néhány alapvető kérdésre mint például "mi a JavaScript?", "hogyan is néz ki?", és "mit is csinál?", mielőtt továbblépne az első gyakorlati tapasztalatának megszerzéséhez a JavaScript-ről. Ezután, megvitatunk néhány kulcsfontosságú épitőelemet, mint a változók, stringek, számok és tömbök.

- -

Előfeltételek

- -

A modul elkezdése előtt nem szükséges bármiféle előzetes JavaScript tudás, de ajánlott tisztában lennie a HTML- és CSS-sel. Javasoljuk, hogy nézze át a következő modulokat a JavaScript elkezdése előtt:

- - - -
-

Jegyzet:  Ha olyan számítógépen/tableten/más eszközön dolgozik, ahol nem nem tud saját fájlokat készíteni, akkor ki tudja próbálni (a legtöbb) a kód példákat egy online kódoló programmal, mint a JSBin vagy a Thimble.

-
- -

Útmutatók

- -
-
Mi a JavaScript
-
Üdvözöljük az MDN kezdő JavaScript kurzusán! Ebben az első cikkben a JavaScriptet magas szintről fogjuk megtekinteni, válaszolni kérdésekre, mint "mi ez?", és "mit csinál?", és meggyőződni arról, hogy kényelmes-e a JavaScript szándéka.
-
Az első merülés a JavaScript-be
-
Most, hogy tanult valamit a JavaScript elméletéről, és hogy mit tud vele csinálni, adunk önnek egy "crash" kurzust a JavaScript alapvető tulajdonságairól egy teljes gyakorlati oktatás során. Itt el fog készíteni egy egyszerű "Találd ki a számot" játékot lépésről lépésre.
-
Mi romlott el? Hibaelhárítás JavaScript-ben
-
Amikor elkészítette a "Találd ki a számot" játékot az előző cikkben, talán észrevette hogy nem működik. Sose féljen — ez a cikk arra törekszik, hogy megmentse önt a haj tépéstől az ilyen problémák miatt azzal, hogy ellátja önt néhány egyszerű tippel, hogy hogyan tudja megkeresni, és kijavítani a hibákat JavaScript programokban.
-
Szükséges információk tárolása - Változók
-
Az előző cikkek elolvasása után mostmár tudnia kell mi is a JavaScript, mit tud önért csinálni, hogyan használja azt más webes technológiák mellett, és mik a főbb jellemzői magasabb szintől nézve. Ebben a cikkben leereszkedünk az igazi alapokhoz, és megnézzük hogyan dolgozzunk a JavaScript legalapabb építőelemeivel — Változók.
-
Alapvető matematika JavaScriptben — számok és operátorok
-
A kurzus ezen pontján megvitatjuk a matematikát JavaScript-ben — hogy tudunk kombinálni operátorokat és más jellemzőket, hogy sikeresen manipuláljunk számokat parancsunk végrehajtásához.
-
Szöveg kezelés — stringek JavaScript-ben
-
Ezután a stringekre fordítjuk figyelmünket — ez az, amit szövegnek nevezünk a programozásban. Ebben a cikkben sorra vesszük az összes gyakori dolgot amit valóban tudnia kell a stringekről amikor JavaScript-et tanul, mint például stringet létrehozni, idézőjelek elhagyása stringben, és egyesíteni őket.
-
Hasznos string metódusok(eljárások)
-
Már megnéztük a stringek alapjait, lépjünk egy szinttel feljebb és kezdjünk gondolkodni arról, milyen hasznos eljárásokat tudunk végrehajtani stringeken a beépített methódusokkal, mint megkeresni a hosszát egy szövegnek, egyesíteni és szétválasztani stringeket, helyettesíteni egy karaktert egy stringben egy másikra, és még sok más.
-
Tömbök
-
A modul utolsó cikkében a tömböket vesszük szemügyre — elegáns módja egy lista elemeinek tárolására egy egyszerű változó név alatt. Megnézzük miért is olyan hasznos, ezután felfedezzük hogyan csináljunk tömböket, kapjunk, hozzáadjunk, és töröljünk elemeket amelyek tömbben vannak tárolva, és ezen kívül sok más.
-
- -

Felmérés

- -

A következő felmérés tesztelni fogja, hogy megértette a JavaScript alapjait, amelyeket a fenti útmutatóban lefedünk.

- -
-
Ostoba történet generálása
-
Ebben a felmérésben tesztelve lesz, amelyben szükség lesz a tudására, amelyet elsajátított ennek a modulnak a cikkeiben, hogy ezeket felhasználva készítsen egy vicces app-ot, ami véletleszerűen generál ostoba történeteket. Jó szórakozást!
-
diff --git a/files/hu/learn/javascript/first_steps/index.html b/files/hu/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..7276a4541c --- /dev/null +++ b/files/hu/learn/javascript/first_steps/index.html @@ -0,0 +1,66 @@ +--- +title: Első lépések JavaScript-ben +slug: Learn/JavaScript/Első_lépések +tags: + - Cikk + - JavaScript + - Kezdő + - Modul + - Operátorok + - Számok + - Tömbök + - Változók + - matek + - stringek + - Érkező + - Értékelés + - útmutató +translation_of: Learn/JavaScript/First_steps +--- +
{{LearnSidebar}}
+ +

Az első JavaScript modulunkban, először válaszolunk néhány alapvető kérdésre mint például "mi a JavaScript?", "hogyan is néz ki?", és "mit is csinál?", mielőtt továbblépne az első gyakorlati tapasztalatának megszerzéséhez a JavaScript-ről. Ezután, megvitatunk néhány kulcsfontosságú épitőelemet, mint a változók, stringek, számok és tömbök.

+ +

Előfeltételek

+ +

A modul elkezdése előtt nem szükséges bármiféle előzetes JavaScript tudás, de ajánlott tisztában lennie a HTML- és CSS-sel. Javasoljuk, hogy nézze át a következő modulokat a JavaScript elkezdése előtt:

+ + + +
+

Jegyzet:  Ha olyan számítógépen/tableten/más eszközön dolgozik, ahol nem nem tud saját fájlokat készíteni, akkor ki tudja próbálni (a legtöbb) a kód példákat egy online kódoló programmal, mint a JSBin vagy a Thimble.

+
+ +

Útmutatók

+ +
+
Mi a JavaScript
+
Üdvözöljük az MDN kezdő JavaScript kurzusán! Ebben az első cikkben a JavaScriptet magas szintről fogjuk megtekinteni, válaszolni kérdésekre, mint "mi ez?", és "mit csinál?", és meggyőződni arról, hogy kényelmes-e a JavaScript szándéka.
+
Az első merülés a JavaScript-be
+
Most, hogy tanult valamit a JavaScript elméletéről, és hogy mit tud vele csinálni, adunk önnek egy "crash" kurzust a JavaScript alapvető tulajdonságairól egy teljes gyakorlati oktatás során. Itt el fog készíteni egy egyszerű "Találd ki a számot" játékot lépésről lépésre.
+
Mi romlott el? Hibaelhárítás JavaScript-ben
+
Amikor elkészítette a "Találd ki a számot" játékot az előző cikkben, talán észrevette hogy nem működik. Sose féljen — ez a cikk arra törekszik, hogy megmentse önt a haj tépéstől az ilyen problémák miatt azzal, hogy ellátja önt néhány egyszerű tippel, hogy hogyan tudja megkeresni, és kijavítani a hibákat JavaScript programokban.
+
Szükséges információk tárolása - Változók
+
Az előző cikkek elolvasása után mostmár tudnia kell mi is a JavaScript, mit tud önért csinálni, hogyan használja azt más webes technológiák mellett, és mik a főbb jellemzői magasabb szintől nézve. Ebben a cikkben leereszkedünk az igazi alapokhoz, és megnézzük hogyan dolgozzunk a JavaScript legalapabb építőelemeivel — Változók.
+
Alapvető matematika JavaScriptben — számok és operátorok
+
A kurzus ezen pontján megvitatjuk a matematikát JavaScript-ben — hogy tudunk kombinálni operátorokat és más jellemzőket, hogy sikeresen manipuláljunk számokat parancsunk végrehajtásához.
+
Szöveg kezelés — stringek JavaScript-ben
+
Ezután a stringekre fordítjuk figyelmünket — ez az, amit szövegnek nevezünk a programozásban. Ebben a cikkben sorra vesszük az összes gyakori dolgot amit valóban tudnia kell a stringekről amikor JavaScript-et tanul, mint például stringet létrehozni, idézőjelek elhagyása stringben, és egyesíteni őket.
+
Hasznos string metódusok(eljárások)
+
Már megnéztük a stringek alapjait, lépjünk egy szinttel feljebb és kezdjünk gondolkodni arról, milyen hasznos eljárásokat tudunk végrehajtani stringeken a beépített methódusokkal, mint megkeresni a hosszát egy szövegnek, egyesíteni és szétválasztani stringeket, helyettesíteni egy karaktert egy stringben egy másikra, és még sok más.
+
Tömbök
+
A modul utolsó cikkében a tömböket vesszük szemügyre — elegáns módja egy lista elemeinek tárolására egy egyszerű változó név alatt. Megnézzük miért is olyan hasznos, ezután felfedezzük hogyan csináljunk tömböket, kapjunk, hozzáadjunk, és töröljünk elemeket amelyek tömbben vannak tárolva, és ezen kívül sok más.
+
+ +

Felmérés

+ +

A következő felmérés tesztelni fogja, hogy megértette a JavaScript alapjait, amelyeket a fenti útmutatóban lefedünk.

+ +
+
Ostoba történet generálása
+
Ebben a felmérésben tesztelve lesz, amelyben szükség lesz a tudására, amelyet elsajátított ennek a modulnak a cikkeiben, hogy ezeket felhasználva készítsen egy vicces app-ot, ami véletleszerűen generál ostoba történeteket. Jó szórakozást!
+
diff --git a/files/hu/web/api/document_object_model/index.html b/files/hu/web/api/document_object_model/index.html new file mode 100644 index 0000000000..25ea440e9c --- /dev/null +++ b/files/hu/web/api/document_object_model/index.html @@ -0,0 +1,19 @@ +--- +title: Bevezetés a dokumentumobjektum-modellbe +slug: Bevezetés_a_dokumentumobjektum-modellbe +tags: + - DOM + - minden_kategória +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +--- +

Mi a DOM?

+

A Dokumentumobjektum-modell (DOM) egy API HTML és XML dokumentumokhoz. A dokumentum szerkezetét modellezi és lehetővé teszi annak tartalmi és vizulális változtatását. Lényegében összeköttetést képez a weblapok és a script- vagy programozási nyelvek között.

+

Minden tulajdonságot, metódust és eseményt, ami a webfejlesztő számára rendelkezésre áll a weboldalak szerkesztése és változtatása során, objektumokba rendszerez. (pl. a document objektum jelöli a dokumentumot, a table objektum jelöli a HTML táblázatokat, stb.) Ezek az objektumok hozzáférhetőek a script-nyelvek számára az újabb böngészőkben.

+

A DOM-ot leggyakrabban JavaScript-tel együtt használják. Azaz a kód JavaScript-ben van írva, de a DOM-ot használja a weboldalhoz és elemeihez való hozzáférés során.

+

A DOM-ot azonban úgy tervezték hogy független legyen minden programozási nyelvtől, ezért a dokumentum szerkezeti modellje egyetlen, önálló és konzisztens API-ból érhető el. Bár a továbbiakban a JavaScriptre fogunk összpontosítani, a DOM-ot tkp. bármilyen nyelvből elérhetjük.

+

A World Wide Web Consortium (W3C) meghatározta a standard DOM-ot, amit W3C DOM-nak neveznek. Ma már a legfontosabb böngészők ezt támogatják, ezzel lehetővé teszik browserfüggetlen alkalmazások létrehozását.

+

Miért fontos a DOM-támogatás a Mozilla-ban?

+

A "dinamikus HTML" (DHTML) fogalmat szokták használni a HTML, CSS és a scriptek kombinációjára, amivel pl. animációt helyezhetünk el weboldalunkon. A W3C DOM munkacsoportjában keményen dolgoznak azon, hogy nyelvsemleges megoldásokat tudjanak szabványosítani (lásd még W3C FAQ). Mivel a Mozillát webalkalmazás-platformnak ("Web Application Platform") tervezték, a DOM támogatása az egyik leggyakrabban felmerülő követelmény és a elengedhetetlen megfelelni neki, ha a Mozilla életképes alternatíva kíván maradni a többi böngésző mellett.

+

Talán még ennél is fontosabb, hogy a Mozilla (valamint a Firefox és a Thunderbird) felhasználói felülete XUL (XML User interface Language - XML felhasználói felületi nyelv) használatára épül. A Mozilla felhasználói tehát a DOM segítségével dinamikusan változtatni tudják a saját felhasználói felületüket is.

+

{{ languages( { "en": "en/About_the_Document_Object_Model", "es": "es/Acerca_del_Modelo_de_Objetos_del_Documento", "fr": "fr/\u00c0_propos_du_Document_Object_Model", "ja": "ja/About_the_Document_Object_Model", "ko": "ko/About_the_Document_Object_Model", "pl": "pl/O_modelu_obiektowym_dokumentu", "zh-cn": "cn/\u5173\u4e8e\u6587\u6863\u5bf9\u8c61\u6a21\u578b", "ru": "ru/\u041e\u0431_\u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e\u0439_\u043c\u043e\u0434\u0435\u043b\u0438_\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430" } ) }}

diff --git a/files/hu/web/api/htmlbrelement/index.html b/files/hu/web/api/htmlbrelement/index.html new file mode 100644 index 0000000000..8842c0a233 --- /dev/null +++ b/files/hu/web/api/htmlbrelement/index.html @@ -0,0 +1,32 @@ +--- +title: HTMLBRElement +slug: DOM/HTMLBRElement +translation_of: Web/API/HTMLBRElement +--- +
+ {{ ApiRef() }}
+

HTML törés elem felület

+

A DOM törés elemek a HTMLBRElement (vagy HTML 4 HTMLBRElement) felületet fejtik ki, amelyek a HTMLElementből öröklődnek, de nem határoz meg további tagokat a {{ HTMLVersionInline(5) }} verzióban. A bevezetett további tulajdonság szintén elavult a {{ HTMLVersionInline(4.01) }} verzióban.

+

Tulajdonságok

+ + + + + + + + + + + + + + + +
NévTípusLeírás
clear {{ HTMLVersionInline(4.01) }}, {{ obsolete_inline() }} a {{ HTMLVersionInline(5) }} ótaDOMStringA szöveg körbefuttatását jelzi a lebegő objektumok körül.
+

Lásd még

+ +
+ {{ languages({ "en": "en/DOM/HTMLBRElement", "hu": "hu/DOM/HTMLBRElement", "ja": "ja/DOM/HTMLBRElement" }) }}
diff --git a/files/hu/web/api/websockets_api/index.html b/files/hu/web/api/websockets_api/index.html new file mode 100644 index 0000000000..815c4aebb9 --- /dev/null +++ b/files/hu/web/api/websockets_api/index.html @@ -0,0 +1,194 @@ +--- +title: WebSockets +slug: WebSockets +tags: + - NeedsBrowserCompatibility + - NeedsTranslation + - References + - TopicStub + - WebSockets +translation_of: Web/API/WebSockets_API +--- +

WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

+ +
+
+

Documentation

+ +
+
Writing WebSocket client applications
+
A tutorial guide to writing WebSocket clients to run in the browser.
+
WebSockets reference
+
A reference to the client-side WebSocket API.
+
Writing WebSocket servers (Needs Content)
+
A guide to writing server-side code to handle the WebSocket protocol.
+
+ +

View All...

+
+ +
+

Tools

+ + + + + + +
+
+ +

See also

+ + + +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Version -76 support {{obsolete_inline}}6{{CompatGeckoDesktop("2.0")}}{{CompatNo}}11.00 (disabled)5.0.1
Protocol version 7 support {{obsolete_inline}}{{CompatNo}}{{CompatGeckoDesktop("6.0")}}
+ {{property_prefix("Moz")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
Protocol version 10 support {{obsolete_inline}}14{{CompatGeckoDesktop("7.0")}}
+ {{property_prefix("Moz")}}		HTML5 Labs{{CompatUnknown}}{{CompatUnknown}}
Standard - RFC 6455 Support16{{CompatGeckoDesktop("11.0")}}1012.106.0
Usable in Workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("37.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Version -76 support {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocol version 7 support {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocol version 8 support (IETF draft 10) {{obsolete_inline}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Standard - RFC 6455 Support4.4{{CompatGeckoDesktop("11.0")}}{{CompatUnknown}}12.106.0
Usable in Workers{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Gecko notes

+ +

WebSockets support in Firefox is continuing to track the evolving WebSocket specification. Firefox 6 implements version 7 of the underlying protocol, while Firefox 7 implements version 8 (as specified by IETF draft 10). Firefox mobile received WebSocket support in Firefox mobile 7.0.

+ +

Gecko 6.0

+ +

Prior to Gecko 6.0 {{geckoRelease("6.0")}}, there was, incorrectly, a WebSocket object that some sites were thinking implied that WebSocket services were not prefixed; this object has been renamed to MozWebSocket.

+ +

Gecko 7.0

+ +

Starting in Gecko 7.0 {{geckoRelease("7.0")}}, the network.websocket.max-connections preference is used to determine the maximum number of WebSocket connections that can be open at a time. The default value is 200.

+ +

Gecko 8.0

+ +

Starting in Gecko 8.0 {{geckoRelease("8.0")}}, the deflate-stream extension to the WebSocket protocol has been disabled, since it's been deprecated from the specification drafts. This resolves incompatibilities with some sites.

+ +

Gecko 11.0

+ +

Prior to Gecko 11.0, both incoming and outgoing messages were limited to 16 MB in size. They may now be up to 2 GB in size. Note, however, that memory limitations (especially on mobile devices) make that a theoretical maximum, not a practical one. In reality, transfers of that size will fail on devices that don't have enough memory.

+ +

Additionally, ArrayBuffer send and receive support for binary data has been implemented.

+ +

Starting in Gecko 11.0, the WebSocket API is no longer prefixed.

diff --git a/files/hu/web/api/window.stop/index.html b/files/hu/web/api/window.stop/index.html deleted file mode 100644 index 142a71788d..0000000000 --- a/files/hu/web/api/window.stop/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: window.stop -slug: Web/API/Window.stop -translation_of: Web/API/Window/stop ---- -
-  {{ApiRef}}
-

Összefoglalás

-

Ez az eljárás leállítja az ablak betöltését.

-

Szintaxis

-
window.stop()
-
-

Példa

-
window.stop();
-
-

Megjegyzések

-

A stop() eljárás teljesen megegyezik azzal, amikor a 'megállás/betöltés megszakítása' gombra kattint a böngészőben. Amiatt a szabály miatt, melyben a kódok betöltöttek, a stop() eljárás nem állítja le azt, amit csak betölteni kell (nem letölteni a megjelenítéshez), de megszakítja a nagy képek, új ablakok, és egyéb objektumok betöltését, melynek el van halasztva a betöltése.

-

Tulajdonságok

-

DOM szint: 0. Nem része a tulajdonságoknak.

diff --git a/files/hu/web/api/window/stop/index.html b/files/hu/web/api/window/stop/index.html new file mode 100644 index 0000000000..142a71788d --- /dev/null +++ b/files/hu/web/api/window/stop/index.html @@ -0,0 +1,19 @@ +--- +title: window.stop +slug: Web/API/Window.stop +translation_of: Web/API/Window/stop +--- +
+  {{ApiRef}}
+

Összefoglalás

+

Ez az eljárás leállítja az ablak betöltését.

+

Szintaxis

+
window.stop()
+
+

Példa

+
window.stop();
+
+

Megjegyzések

+

A stop() eljárás teljesen megegyezik azzal, amikor a 'megállás/betöltés megszakítása' gombra kattint a böngészőben. Amiatt a szabály miatt, melyben a kódok betöltöttek, a stop() eljárás nem állítja le azt, amit csak betölteni kell (nem letölteni a megjelenítéshez), de megszakítja a nagy képek, új ablakok, és egyéb objektumok betöltését, melynek el van halasztva a betöltése.

+

Tulajdonságok

+

DOM szint: 0. Nem része a tulajdonságoknak.

diff --git a/files/hu/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/hu/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..14559667cc --- /dev/null +++ b/files/hu/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,791 @@ +--- +title: Az XMLHttpRequest használata +slug: Web/API/XMLHttpRequest/XMLHttpRequest_hasznalata +tags: + - AJAX + - HTTP + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +
{{APIRef("XMLHttpRequest")}}
+ +

Ebben az útmutatóban azt fogjuk körüljárni, hogy miként használhatjuk az {{domxref("XMLHttpRequest")}} objektumot HTTP kérelmek küldésére, annak érdekében, hogy adatokat cserélhessünk a webhely és a szerver között.

+ +

Egy új HTTP kérelem elküldéséhez először hozzunk létre egy új XMLHttpRequest objektumot, nyissuk meg az URL-t, majd küldjük el a kérelmet. Az adatátvitel befejezése után, objektumunk hasznos információkkal szolgálhat, mint a válasz törzs vagy az eredmény HTTP státusz kódja.

+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.addEventListener("load", reqListener);
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();
+ +

Kérelem típusok

+ +

A request made via XMLHttpRequest can fetch the data in one of two ways, asynchronously or synchronously. The type of request is dictated by the optional async argument (the third argument) that is set on the {{domxref("XMLHttpRequest.open()")}} method. If this argument is true or not specified, the XMLHttpRequest is processed asynchronously, otherwise the process is handled synchronously. A detailed discussion and demonstrations of these two types of requests can be found on the synchronous and asynchronous requests page. Do not use synchronous requests outside Web Workers.

+ +
Note: Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
+ +
Note: The constructor function XMLHttpRequest isn't limited to only XML documents. It starts with "XML" because when it was created the main format that was originally used for Asynchronous Data Exchange were XML
+ +

Válasz kezelés

+ +

There are several types of response attributes defined by the living standard specification for the {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} constructor. These tell the client making the XMLHttpRequest important information about the status of the response. Some cases where dealing with non-text response types may involve some manipulation and analysis are outlined in the following sections.

+ +

Analyzing and manipulating the responseXML property

+ +

If you use XMLHttpRequest to get the content of a remote XML document, the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property will be a DOM object containing a parsed XML document. This could prove difficult to manipulate and analyze. There are four primary ways of analyzing this XML document:

+ +
    +
  1. Using XPath to address (or point to) parts of it.
    2. +
  2. Manually Parsing and serializing XML to strings or objects.
    3. +
  3. Using {{domxref("XMLSerializer")}} to serialize DOM trees to strings or to files.
    4. +
  4. {{jsxref("RegExp")}} can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to line breaks. However, this method is a "last resort" since if the XML code changes slightly, the method will likely fail.
    5. +
+ +
+

Note: XMLHttpRequest can now interpret HTML for you using the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property. Read the article about HTML in XMLHttpRequest to learn how to do this.

+
+ +

Processing a responseText property containing an HTML document

+ +

If you use XMLHttpRequest to get the content of a remote HTML webpage, the {{domxref("XMLHttpRequest.responseText", "responseText")}} property is a string containing the raw HTML. This could prove difficult to manipulate and analyze. There are three primary ways to analyze and parse this raw HTML string:

+ +
    +
  1. Use the XMLHttpRequest.responseXML property as covered in the article HTML in XMLHttpRequest.
    2. +
  2. Inject the content into the body of a document fragment via fragment.body.innerHTML and traverse the DOM of the fragment.
    3. +
  3. {{jsxref("RegExp")}} can be used if you always know the content of the HTML responseText beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.
    4. +
+ +

Bináris adatok kezelése

+ +

Although {{domxref("XMLHttpRequest")}} is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an XMLHttpRequest into sending binary data. These involve utilizing the {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} method on the XMLHttpRequest object and is a workable solution.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url);
+// retrieve data unprocessed as a binary string
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

However, more modern techniques are available, since the {{domxref("XMLHttpRequest.responseType", "responseType")}} attribute now supports a number of additional content types, which makes sending and receiving binary data much easier.

+ +

For example, consider this snippet, which uses the responseType of "arraybuffer" to fetch the remote content into a {{jsxref("ArrayBuffer")}} object, which stores the raw binary data.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // not responseText
+  /* ... */
+}
+oReq.open("GET", url);
+oReq.responseType = "arraybuffer";
+oReq.send();
+ +

For more examples check out the Sending and Receiving Binary Data page

+ +

Folyamatok nyomonkövetése

+ +

XMLHttpRequest provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.

+ +

Support for DOM {{event("progress")}} event monitoring of XMLHttpRequest transfers follows the specification for progress events: these events implement the {{domxref("ProgressEvent")}} interface. The actual events you can monitor to determine the state of an ongoing transfer are:

+ +
+
{{event("progress")}}
+
The amount of data that has been retrieved has changed.
+
{{event("load")}}
+
The transfer is complete; all data is now in the response
+
+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress);
+oReq.addEventListener("load", transferComplete);
+oReq.addEventListener("error", transferFailed);
+oReq.addEventListener("abort", transferCanceled);
+
+oReq.open();
+
+// ...
+
+// progress on transfers from the server to the client (downloads)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total * 100;
+    // ...
+  } else {
+    // Unable to compute progress information since the total size is unknown
+  }
+}
+
+function transferComplete(evt) {
+  console.log("The transfer is complete.");
+}
+
+function transferFailed(evt) {
+  console.log("An error occurred while transferring the file.");
+}
+
+function transferCanceled(evt) {
+  console.log("The transfer has been canceled by the user.");
+}
+ +

Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using XMLHttpRequest.

+ +
Note: You need to add the event listeners before calling open() on the request. Otherwise the progress events will not fire.
+ +

The progress event handler, specified by the updateProgress() function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's total and loaded fields. However, if the lengthComputable field is false, the total length is not known and will be zero.

+ +

Progress events exist for both download and upload transfers. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object, as shown below:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress);
+oReq.upload.addEventListener("load", transferComplete);
+oReq.upload.addEventListener("error", transferFailed);
+oReq.upload.addEventListener("abort", transferCanceled);
+
+oReq.open();
+
+ +
Note: Progress events are not available for the file: protocol.
+ +
+

Note: Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.

+
+ +
+

Note: As of {{Gecko("12.0")}}, if your progress event is called with a responseType of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.

+
+ +

One can also detect all three load-ending conditions (abort, load, or error) using the loadend event:

+ +
req.addEventListener("loadend", loadEnd);
+
+function loadEnd(e) {
+  console.log("The transfer finished (although we don't know if it succeeded or not).");
+}
+
+ +

Note there is no way to be certain, from the information received by the loadend event, as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.

+ +

Űrlapok küldése és állományok feltöltése

+ +

Instances of XMLHttpRequest can be used to submit forms in two ways:

+ + + +

Using the FormData API is the simplest and fastest, but has the disadvantage that data collected can not be stringified.
+ Using only AJAX is more complex, but typically more flexible and powerful.

+ +

Using nothing but XMLHttpRequest

+ +

Submitting forms without the FormData API does not require other APIs for most use cases. The only case where you need an additional API is if you want to upload one or more files, where you use the {{domxref("FileReader")}} API.

+ +

A brief introduction to the submit methods

+ +

An html {{ HTMLElement("form") }} can be sent in four ways:

+ + + +

Now, consider the submission of a form containing only two fields, named foo and baz. If you are using the POST method the server will receive a string similar to one of the following three examples, depending on the encoding type you are using:

+ + + +

However, if you are using the GET method, a string like the following will be simply added to the URL:

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

A little vanilla framework

+ +

All these effects are done automatically by the web browser whenever you submit a {{HTMLElement("form")}}. If you want to perform the same effects using JavaScript you have to instruct the interpreter about everything. Therefore, how to send forms in pure AJAX is too complex to be explained here in detail. For this reason, here we place a complete (yet didactic) framework, able to use all four ways to submit, and to upload files:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with pure AJAX &ndash; MDN</title>
+<script type="text/javascript">
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  https://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    console.log(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* console.log(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/,
+          oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" +
+            oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status > 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* How should I treat a text/plain form encoding?
+       What characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ?
+        this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" && oField.files.length > 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile < oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" +
+                oField.name + "\"; filename=\"" + oFile.name +
+                "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or
+             method is GET: files will not be sent! */
+          for (nFile = 0; nFile < oField.files.length;
+              this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        /* NOTE: this will submit _all_ submit buttons. Detecting the correct one is non-trivial. */
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+</script>
+</head>
+<body>
+
+<h1>Sending forms with pure AJAX</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<form action="register.php" method="post" enctype="text/plain"
+    onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      Your name: <input type="text" name="user" />
+    </p>
+    <p>
+      Your message:<br />
+      <textarea name="message" cols="40" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data"
+    onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" />
+      <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" />
+      <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" />
+      <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" />
+      <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +

To test this, create a page named register.php (which is the action attribute of these sample forms), and put the following minimalistic content:

+ +
<?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+
+ +

The syntax to activate this script is simply:

+ +
AJAXSubmit(myForm);
+ +
Note: This framework uses the {{domxref("FileReader")}} API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered an experimental technique. If you do not need to upload binary files, this framework works fine in most browsers.
+ +
Note: The best way to send binary content is via {{jsxref("ArrayBuffer", "ArrayBuffers")}} or {{domxref("Blob", "Blobs")}} in conjuncton with the {{domxref("XMLHttpRequest.send()", "send()")}} method and possibly the {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} method of the FileReader API. But, since the aim of this script is to work with a stringifiable raw data, we used the {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} method in conjunction with the {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} method of the FileReader API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the FormData API.
+ +
Note: The non-standard sendAsBinary method is considered deprecated as of Gecko 31 {{geckoRelease(31)}} and will be removed soon. The standard send(Blob data) method can be used instead.
+ +

Using FormData objects

+ +

The {{domxref("XMLHttpRequest.FormData", "FormData")}} constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primary use is in sending form data, but can also be used independently from a form in order to transmit user keyed data. The transmitted data is in the same format the form's submit() method uses to send data, if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples, and explanations of how one can utilize FormData with XMLHttpRequests, see the Using FormData Objects page. For didactic purposes here is a translation of the previous example transformed to use the FormData API. Note the brevity of the code:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" charset="UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script>
+"use strict";
+
+function ajaxSuccess () {
+  console.log(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ?
+          oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile < oField.files.length;
+            sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
+    oReq.send(null);
+  }
+}
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data"
+    onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" />
+      <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" />
+      <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" />
+      <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" />
+      <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+</body>
+</html>
+
+ +
Note: As we said, {{domxref("FormData")}} objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the {{domxref("FileReader")}} API also: files are automatically loaded and uploaded.
+ +

Utolsó módosítás dátuma

+ +
function getHeaderTime () {
+  console.log(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html");
+oReq.onload = getHeaderTime;
+oReq.send();
+ +

Do something when last modified date changes

+ +

Let's create two functions:

+ +
function getHeaderTime () {
+  var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath));
+  var nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
+  }
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}
+ +

And to test:

+ +
/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});
+ +

If you want to know if the current page has changed, please read the article about {{domxref("document.lastModified")}}.

+ +

Webhelyközi XMLHttpRequest

+ +

Modern browsers support cross-site requests by implementing the Cross-Origin Resource Sharing (CORS) standard. As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work. Otherwise, an INVALID_ACCESS_ERR exception is thrown.

+ +

Gyorsítótár megkerülése

+ +

A cross-browser compatible approach to bypassing the cache is appending a timestamp to the URL, being sure to include a "?" or "&" as appropriate. For example:

+ +
http://foo.com/bar.html -> http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
+
+ +

As the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

+ +

You can automatically adjust URLs using the following code:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime());
+oReq.send(null);
+ +

Biztonság

+ +

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access. This is no longer supported.")}}

+ +

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

+ +

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

+ +

XMLHttpRequests being stopped

+ +

If you conclude with an XMLHttpRequest receiving status=0 and statusText=null, this means the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is subsequently open(). This case can happen, for example, when one has an XMLHttpRequest that gets fired on an onunload event for a window, the expected XMLHttpRequest is created when the window to be closed is still there, and finally sending the request (in otherwords, open()) when this window has lost its focus and another window gains focus. The most effective way to avoid this problem is to set a listener on the new window's {{event("activate")}} event which is set once the terminated window has its {{event("unload")}} event triggered.

+ +

Dolgozók

+ +

Setting overrideMimeType does not work from a {{domxref("Worker")}}.  See {{bug(678057)}} for more details.  Other browsers may handle this differently.

+ +

Specifikációk

+ + + + + + + + + + + + + + + + +
SpecifikációÁllapotMegjegyzés
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Élő szabvány, legfrisebb verzió
+ +

Böngésző támogatás

+ + + +

{{Compat("api.XMLHttpRequest")}}

+ +

Kapcsolódó írások

+ +
    +
  1. MDN AJAX introduction
    2. +
  2. HTML in XMLHttpRequest
    3. +
  3. HTTP access control
    4. +
  4. How to check the security state of an XMLHTTPRequest over SSL
    5. +
  5. XMLHttpRequest - REST and the Rich User Experience
    6. +
  6. Microsoft documentation
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest object: WHATWG specification
    9. +
diff --git a/files/hu/web/api/xmlhttprequest/xmlhttprequest_hasznalata/index.html b/files/hu/web/api/xmlhttprequest/xmlhttprequest_hasznalata/index.html deleted file mode 100644 index 14559667cc..0000000000 --- a/files/hu/web/api/xmlhttprequest/xmlhttprequest_hasznalata/index.html +++ /dev/null @@ -1,791 +0,0 @@ ---- -title: Az XMLHttpRequest használata -slug: Web/API/XMLHttpRequest/XMLHttpRequest_hasznalata -tags: - - AJAX - - HTTP - - XMLHttpRequest -translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest ---- -
{{APIRef("XMLHttpRequest")}}
- -

Ebben az útmutatóban azt fogjuk körüljárni, hogy miként használhatjuk az {{domxref("XMLHttpRequest")}} objektumot HTTP kérelmek küldésére, annak érdekében, hogy adatokat cserélhessünk a webhely és a szerver között.

- -

Egy új HTTP kérelem elküldéséhez először hozzunk létre egy új XMLHttpRequest objektumot, nyissuk meg az URL-t, majd küldjük el a kérelmet. Az adatátvitel befejezése után, objektumunk hasznos információkkal szolgálhat, mint a válasz törzs vagy az eredmény HTTP státusz kódja.

- -
function reqListener () {
-  console.log(this.responseText);
-}
-
-var oReq = new XMLHttpRequest();
-oReq.addEventListener("load", reqListener);
-oReq.open("GET", "http://www.example.org/example.txt");
-oReq.send();
- -

Kérelem típusok

- -

A request made via XMLHttpRequest can fetch the data in one of two ways, asynchronously or synchronously. The type of request is dictated by the optional async argument (the third argument) that is set on the {{domxref("XMLHttpRequest.open()")}} method. If this argument is true or not specified, the XMLHttpRequest is processed asynchronously, otherwise the process is handled synchronously. A detailed discussion and demonstrations of these two types of requests can be found on the synchronous and asynchronous requests page. Do not use synchronous requests outside Web Workers.

- -
Note: Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
- -
Note: The constructor function XMLHttpRequest isn't limited to only XML documents. It starts with "XML" because when it was created the main format that was originally used for Asynchronous Data Exchange were XML
- -

Válasz kezelés

- -

There are several types of response attributes defined by the living standard specification for the {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} constructor. These tell the client making the XMLHttpRequest important information about the status of the response. Some cases where dealing with non-text response types may involve some manipulation and analysis are outlined in the following sections.

- -

Analyzing and manipulating the responseXML property

- -

If you use XMLHttpRequest to get the content of a remote XML document, the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property will be a DOM object containing a parsed XML document. This could prove difficult to manipulate and analyze. There are four primary ways of analyzing this XML document:

- -
    -
  1. Using XPath to address (or point to) parts of it.
    2. -
  2. Manually Parsing and serializing XML to strings or objects.
    3. -
  3. Using {{domxref("XMLSerializer")}} to serialize DOM trees to strings or to files.
    4. -
  4. {{jsxref("RegExp")}} can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to line breaks. However, this method is a "last resort" since if the XML code changes slightly, the method will likely fail.
    5. -
- -
-

Note: XMLHttpRequest can now interpret HTML for you using the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property. Read the article about HTML in XMLHttpRequest to learn how to do this.

-
- -

Processing a responseText property containing an HTML document

- -

If you use XMLHttpRequest to get the content of a remote HTML webpage, the {{domxref("XMLHttpRequest.responseText", "responseText")}} property is a string containing the raw HTML. This could prove difficult to manipulate and analyze. There are three primary ways to analyze and parse this raw HTML string:

- -
    -
  1. Use the XMLHttpRequest.responseXML property as covered in the article HTML in XMLHttpRequest.
    2. -
  2. Inject the content into the body of a document fragment via fragment.body.innerHTML and traverse the DOM of the fragment.
    3. -
  3. {{jsxref("RegExp")}} can be used if you always know the content of the HTML responseText beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.
    4. -
- -

Bináris adatok kezelése

- -

Although {{domxref("XMLHttpRequest")}} is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an XMLHttpRequest into sending binary data. These involve utilizing the {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} method on the XMLHttpRequest object and is a workable solution.

- -
var oReq = new XMLHttpRequest();
-oReq.open("GET", url);
-// retrieve data unprocessed as a binary string
-oReq.overrideMimeType("text/plain; charset=x-user-defined");
-/* ... */
-
- -

However, more modern techniques are available, since the {{domxref("XMLHttpRequest.responseType", "responseType")}} attribute now supports a number of additional content types, which makes sending and receiving binary data much easier.

- -

For example, consider this snippet, which uses the responseType of "arraybuffer" to fetch the remote content into a {{jsxref("ArrayBuffer")}} object, which stores the raw binary data.

- -
var oReq = new XMLHttpRequest();
-
-oReq.onload = function(e) {
-  var arraybuffer = oReq.response; // not responseText
-  /* ... */
-}
-oReq.open("GET", url);
-oReq.responseType = "arraybuffer";
-oReq.send();
- -

For more examples check out the Sending and Receiving Binary Data page

- -

Folyamatok nyomonkövetése

- -

XMLHttpRequest provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.

- -

Support for DOM {{event("progress")}} event monitoring of XMLHttpRequest transfers follows the specification for progress events: these events implement the {{domxref("ProgressEvent")}} interface. The actual events you can monitor to determine the state of an ongoing transfer are:

- -
-
{{event("progress")}}
-
The amount of data that has been retrieved has changed.
-
{{event("load")}}
-
The transfer is complete; all data is now in the response
-
- -
var oReq = new XMLHttpRequest();
-
-oReq.addEventListener("progress", updateProgress);
-oReq.addEventListener("load", transferComplete);
-oReq.addEventListener("error", transferFailed);
-oReq.addEventListener("abort", transferCanceled);
-
-oReq.open();
-
-// ...
-
-// progress on transfers from the server to the client (downloads)
-function updateProgress (oEvent) {
-  if (oEvent.lengthComputable) {
-    var percentComplete = oEvent.loaded / oEvent.total * 100;
-    // ...
-  } else {
-    // Unable to compute progress information since the total size is unknown
-  }
-}
-
-function transferComplete(evt) {
-  console.log("The transfer is complete.");
-}
-
-function transferFailed(evt) {
-  console.log("An error occurred while transferring the file.");
-}
-
-function transferCanceled(evt) {
-  console.log("The transfer has been canceled by the user.");
-}
- -

Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using XMLHttpRequest.

- -
Note: You need to add the event listeners before calling open() on the request. Otherwise the progress events will not fire.
- -

The progress event handler, specified by the updateProgress() function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's total and loaded fields. However, if the lengthComputable field is false, the total length is not known and will be zero.

- -

Progress events exist for both download and upload transfers. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object, as shown below:

- -
var oReq = new XMLHttpRequest();
-
-oReq.upload.addEventListener("progress", updateProgress);
-oReq.upload.addEventListener("load", transferComplete);
-oReq.upload.addEventListener("error", transferFailed);
-oReq.upload.addEventListener("abort", transferCanceled);
-
-oReq.open();
-
- -
Note: Progress events are not available for the file: protocol.
- -
-

Note: Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.

-
- -
-

Note: As of {{Gecko("12.0")}}, if your progress event is called with a responseType of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.

-
- -

One can also detect all three load-ending conditions (abort, load, or error) using the loadend event:

- -
req.addEventListener("loadend", loadEnd);
-
-function loadEnd(e) {
-  console.log("The transfer finished (although we don't know if it succeeded or not).");
-}
-
- -

Note there is no way to be certain, from the information received by the loadend event, as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.

- -

Űrlapok küldése és állományok feltöltése

- -

Instances of XMLHttpRequest can be used to submit forms in two ways:

- - - -

Using the FormData API is the simplest and fastest, but has the disadvantage that data collected can not be stringified.
- Using only AJAX is more complex, but typically more flexible and powerful.

- -

Using nothing but XMLHttpRequest

- -

Submitting forms without the FormData API does not require other APIs for most use cases. The only case where you need an additional API is if you want to upload one or more files, where you use the {{domxref("FileReader")}} API.

- -

A brief introduction to the submit methods

- -

An html {{ HTMLElement("form") }} can be sent in four ways:

- - - -

Now, consider the submission of a form containing only two fields, named foo and baz. If you are using the POST method the server will receive a string similar to one of the following three examples, depending on the encoding type you are using:

- - - -

However, if you are using the GET method, a string like the following will be simply added to the URL:

- -
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
- -

A little vanilla framework

- -

All these effects are done automatically by the web browser whenever you submit a {{HTMLElement("form")}}. If you want to perform the same effects using JavaScript you have to instruct the interpreter about everything. Therefore, how to send forms in pure AJAX is too complex to be explained here in detail. For this reason, here we place a complete (yet didactic) framework, able to use all four ways to submit, and to upload files:

- -
-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>Sending forms with pure AJAX &ndash; MDN</title>
-<script type="text/javascript">
-
-"use strict";
-
-/*\
-|*|
-|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
-\*/
-
-if (!XMLHttpRequest.prototype.sendAsBinary) {
-  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
-    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
-    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
-      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
-    }
-    /* send as ArrayBufferView...: */
-    this.send(ui8Data);
-    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
-  };
-}
-
-/*\
-|*|
-|*|  :: AJAX Form Submit Framework ::
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
-|*|
-|*|  This framework is released under the GNU Public License, version 3 or later.
-|*|  https://www.gnu.org/licenses/gpl-3.0-standalone.html
-|*|
-|*|  Syntax:
-|*|
-|*|   AJAXSubmit(HTMLFormElement);
-\*/
-
-var AJAXSubmit = (function () {
-
-  function ajaxSuccess () {
-    /* console.log("AJAXSubmit - Success!"); */
-    console.log(this.responseText);
-    /* you can get the serialized data through the "submittedData" custom property: */
-    /* console.log(JSON.stringify(this.submittedData)); */
-  }
-
-  function submitData (oData) {
-    /* the AJAX request... */
-    var oAjaxReq = new XMLHttpRequest();
-    oAjaxReq.submittedData = oData;
-    oAjaxReq.onload = ajaxSuccess;
-    if (oData.technique === 0) {
-      /* method is GET */
-      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/,
-          oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
-      oAjaxReq.send(null);
-    } else {
-      /* method is POST */
-      oAjaxReq.open("post", oData.receiver, true);
-      if (oData.technique === 3) {
-        /* enctype is multipart/form-data */
-        var sBoundary = "---------------------------" + Date.now().toString(16);
-        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
-        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" +
-            oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
-      } else {
-        /* enctype is application/x-www-form-urlencoded or text/plain */
-        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
-        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
-      }
-    }
-  }
-
-  function processStatus (oData) {
-    if (oData.status > 0) { return; }
-    /* the form is now totally serialized! do something before sending it to the server... */
-    /* doSomething(oData); */
-    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
-    submitData (oData);
-  }
-
-  function pushSegment (oFREvt) {
-    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
-    this.owner.status--;
-    processStatus(this.owner);
-  }
-
-  function plainEscape (sText) {
-    /* How should I treat a text/plain form encoding?
-       What characters are not allowed? this is what I suppose...: */
-    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
-    return sText.replace(/[\s\=\\]/g, "\\$&");
-  }
-
-  function SubmitRequest (oTarget) {
-    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
-    /* console.log("AJAXSubmit - Serializing form..."); */
-    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
-    this.technique = bIsPost ?
-        this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
-    this.receiver = oTarget.action;
-    this.status = 0;
-    this.segments = [];
-    var fFilter = this.technique === 2 ? plainEscape : escape;
-    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
-      oField = oTarget.elements[nItem];
-      if (!oField.hasAttribute("name")) { continue; }
-      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
-      if (sFieldType === "FILE" && oField.files.length > 0) {
-        if (this.technique === 3) {
-          /* enctype is multipart/form-data */
-          for (nFile = 0; nFile < oField.files.length; nFile++) {
-            oFile = oField.files[nFile];
-            oSegmReq = new FileReader();
-            /* (custom properties:) */
-            oSegmReq.segmentIdx = this.segments.length;
-            oSegmReq.owner = this;
-            /* (end of custom properties) */
-            oSegmReq.onload = pushSegment;
-            this.segments.push("Content-Disposition: form-data; name=\"" +
-                oField.name + "\"; filename=\"" + oFile.name +
-                "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
-            this.status++;
-            oSegmReq.readAsBinaryString(oFile);
-          }
-        } else {
-          /* enctype is application/x-www-form-urlencoded or text/plain or
-             method is GET: files will not be sent! */
-          for (nFile = 0; nFile < oField.files.length;
-              this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
-        }
-      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
-        /* NOTE: this will submit _all_ submit buttons. Detecting the correct one is non-trivial. */
-        /* field type is not FILE or is FILE but is empty */
-        this.segments.push(
-          this.technique === 3 ? /* enctype is multipart/form-data */
-            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
-          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
-            fFilter(oField.name) + "=" + fFilter(oField.value)
-        );
-      }
-    }
-    processStatus(this);
-  }
-
-  return function (oFormElement) {
-    if (!oFormElement.action) { return; }
-    new SubmitRequest(oFormElement);
-  };
-
-})();
-
-</script>
-</head>
-<body>
-
-<h1>Sending forms with pure AJAX</h1>
-
-<h2>Using the GET method</h2>
-
-<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h2>Using the POST method</h2>
-<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
-
-<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: text/plain</h3>
-
-<form action="register.php" method="post" enctype="text/plain"
-    onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      Your name: <input type="text" name="user" />
-    </p>
-    <p>
-      Your message:<br />
-      <textarea name="message" cols="40" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: multipart/form-data</h3>
-
-<form action="register.php" method="post" enctype="multipart/form-data"
-    onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Upload example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" /><br />
-      Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" />
-      <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" />
-      <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
-      What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
-      Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" />
-      <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" />
-      <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-</body>
-</html>
-
- -

To test this, create a page named register.php (which is the action attribute of these sample forms), and put the following minimalistic content:

- -
<?php
-/* register.php */
-
-header("Content-type: text/plain");
-
-/*
-NOTE: You should never use `print_r()` in production scripts, or
-otherwise output client-submitted data without sanitizing it first.
-Failing to sanitize can lead to cross-site scripting vulnerabilities.
-*/
-
-echo ":: data received via GET ::\n\n";
-print_r($_GET);
-
-echo "\n\n:: Data received via POST ::\n\n";
-print_r($_POST);
-
-echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
-if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
-
-echo "\n\n:: Files received ::\n\n";
-print_r($_FILES);
-
-
- -

The syntax to activate this script is simply:

- -
AJAXSubmit(myForm);
- -
Note: This framework uses the {{domxref("FileReader")}} API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered an experimental technique. If you do not need to upload binary files, this framework works fine in most browsers.
- -
Note: The best way to send binary content is via {{jsxref("ArrayBuffer", "ArrayBuffers")}} or {{domxref("Blob", "Blobs")}} in conjuncton with the {{domxref("XMLHttpRequest.send()", "send()")}} method and possibly the {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} method of the FileReader API. But, since the aim of this script is to work with a stringifiable raw data, we used the {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} method in conjunction with the {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} method of the FileReader API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the FormData API.
- -
Note: The non-standard sendAsBinary method is considered deprecated as of Gecko 31 {{geckoRelease(31)}} and will be removed soon. The standard send(Blob data) method can be used instead.
- -

Using FormData objects

- -

The {{domxref("XMLHttpRequest.FormData", "FormData")}} constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primary use is in sending form data, but can also be used independently from a form in order to transmit user keyed data. The transmitted data is in the same format the form's submit() method uses to send data, if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples, and explanations of how one can utilize FormData with XMLHttpRequests, see the Using FormData Objects page. For didactic purposes here is a translation of the previous example transformed to use the FormData API. Note the brevity of the code:

- -
-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" charset="UTF-8" />
-<title>Sending forms with FormData &ndash; MDN</title>
-<script>
-"use strict";
-
-function ajaxSuccess () {
-  console.log(this.responseText);
-}
-
-function AJAXSubmit (oFormElement) {
-  if (!oFormElement.action) { return; }
-  var oReq = new XMLHttpRequest();
-  oReq.onload = ajaxSuccess;
-  if (oFormElement.method.toLowerCase() === "post") {
-    oReq.open("post", oFormElement.action);
-    oReq.send(new FormData(oFormElement));
-  } else {
-    var oField, sFieldType, nFile, sSearch = "";
-    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
-      oField = oFormElement.elements[nItem];
-      if (!oField.hasAttribute("name")) { continue; }
-      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ?
-          oField.getAttribute("type").toUpperCase() : "TEXT";
-      if (sFieldType === "FILE") {
-        for (nFile = 0; nFile < oField.files.length;
-            sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
-      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
-        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
-      }
-    }
-    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
-    oReq.send(null);
-  }
-}
-</script>
-</head>
-<body>
-
-<h1>Sending forms with FormData</h1>
-
-<h2>Using the GET method</h2>
-
-<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h2>Using the POST method</h2>
-<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
-
-<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: text/plain</h3>
-
-<p>The text/plain encoding is not supported by the FormData API.</p>
-
-<h3>Enctype: multipart/form-data</h3>
-
-<form action="register.php" method="post" enctype="multipart/form-data"
-    onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Upload example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" /><br />
-      Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" />
-      <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" />
-      <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
-      What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
-      Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" />
-      <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" />
-      <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-</body>
-</html>
-
- -
Note: As we said, {{domxref("FormData")}} objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the {{domxref("FileReader")}} API also: files are automatically loaded and uploaded.
- -

Utolsó módosítás dátuma

- -
function getHeaderTime () {
-  console.log(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
-}
-
-var oReq = new XMLHttpRequest();
-oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html");
-oReq.onload = getHeaderTime;
-oReq.send();
- -

Do something when last modified date changes

- -

Let's create two functions:

- -
function getHeaderTime () {
-  var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath));
-  var nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
-
-  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
-    window.localStorage.setItem('lm_' + this.filepath, Date.now());
-    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
-  }
-}
-
-function ifHasChanged(sURL, fCallback) {
-  var oReq = new XMLHttpRequest();
-  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL);
-  oReq.callback = fCallback;
-  oReq.filepath = sURL;
-  oReq.onload = getHeaderTime;
-  oReq.send();
-}
- -

And to test:

- -
/* Let's test the file "yourpage.html"... */
-
-ifHasChanged("yourpage.html", function (nModif, nVisit) {
-  console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
-});
- -

If you want to know if the current page has changed, please read the article about {{domxref("document.lastModified")}}.

- -

Webhelyközi XMLHttpRequest

- -

Modern browsers support cross-site requests by implementing the Cross-Origin Resource Sharing (CORS) standard. As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work. Otherwise, an INVALID_ACCESS_ERR exception is thrown.

- -

Gyorsítótár megkerülése

- -

A cross-browser compatible approach to bypassing the cache is appending a timestamp to the URL, being sure to include a "?" or "&" as appropriate. For example:

- -
http://foo.com/bar.html -> http://foo.com/bar.html?12345
-http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
-
- -

As the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

- -

You can automatically adjust URLs using the following code:

- -
var oReq = new XMLHttpRequest();
-
-oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime());
-oReq.send(null);
- -

Biztonság

- -

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access. This is no longer supported.")}}

- -

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

- -

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

- -

XMLHttpRequests being stopped

- -

If you conclude with an XMLHttpRequest receiving status=0 and statusText=null, this means the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is subsequently open(). This case can happen, for example, when one has an XMLHttpRequest that gets fired on an onunload event for a window, the expected XMLHttpRequest is created when the window to be closed is still there, and finally sending the request (in otherwords, open()) when this window has lost its focus and another window gains focus. The most effective way to avoid this problem is to set a listener on the new window's {{event("activate")}} event which is set once the terminated window has its {{event("unload")}} event triggered.

- -

Dolgozók

- -

Setting overrideMimeType does not work from a {{domxref("Worker")}}.  See {{bug(678057)}} for more details.  Other browsers may handle this differently.

- -

Specifikációk

- - - - - - - - - - - - - - - - -
SpecifikációÁllapotMegjegyzés
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Élő szabvány, legfrisebb verzió
- -

Böngésző támogatás

- - - -

{{Compat("api.XMLHttpRequest")}}

- -

Kapcsolódó írások

- -
    -
  1. MDN AJAX introduction
    2. -
  2. HTML in XMLHttpRequest
    3. -
  3. HTTP access control
    4. -
  4. How to check the security state of an XMLHTTPRequest over SSL
    5. -
  5. XMLHttpRequest - REST and the Rich User Experience
    6. -
  6. Microsoft documentation
    7. -
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. -
  8. The XMLHttpRequest object: WHATWG specification
    9. -
diff --git a/files/hu/web/css/css_background_and_borders/border-radius_generator/index.html b/files/hu/web/css/css_background_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..fe31d33429 --- /dev/null +++ b/files/hu/web/css/css_background_and_borders/border-radius_generator/index.html @@ -0,0 +1,1602 @@ +--- +title: Border-radius bemutató +slug: Web/CSS/Tools/Border-radius_bemutato +tags: + - CSS + - Eszközök +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Ez az eszköz CSS3 {{cssxref("border-radius")}} beállítások megjelenítésére használható.

+ +
+

border-radius

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> lekerekített sarok </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> szegély mértékegységei </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

+ +

 

diff --git a/files/hu/web/css/css_grid_layout/index.html b/files/hu/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..35aa2b57f7 --- /dev/null +++ b/files/hu/web/css/css_grid_layout/index.html @@ -0,0 +1,249 @@ +--- +title: CSS Grid Layout +slug: CSS/CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout +--- +

A CSS Grid Layout kiemlekedő feladatot lát el egy adott HTML oldal fő részeinek meghatározásakor, illetve az oldalon elhelyezkező elemek méretének, pozíciójának és egymáshoz való viszonyának definiálasakor.

+ +

Ahogyan a táblázatok esetében is, a grid layout lehetővé teszi a szerkesztő számára, hogy az egyes elemeket oszlopokba és sorokba rendezze. Emellett jó tudni, hogy más jellegű felépítések megvalósítása is lehetséges a CSS grid segítségével, még akár könyebben is, mint a táblázatokkal. Például, egy grid konténer gyermek elemei képesek egymást pozícionálni. Ennek következtében képesek egymást fedni, hasonlóan a CSS-sel pozícionált elemekhez.

+ +

Egyszerű példa

+ +

Az alábbi példa egy három oszlopos felépítést valósít meg, amelyben minden sor automatikusan minimum 100 pixel magas lesz és maximum akkora, mint amekkora helyet automatikusan elfoglalna. A grid rendszeren belül található elemek, mind egyénileg definiált helyet foglalnak el.

+ +
+ + +

HTML

+ +
<div class="wrapper">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+  <div class="five">Five</div>
+  <div class="six">Six</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+
+ +

{{ EmbedLiveSample('example', '500', '440') }}

+
+ +

Referencia

+ +

CSS tulajdonságok

+ +
+ +
+ +

CSS funkciók

+ +
+ +
+ +

CSS adattípusok

+ +
+ +
+ +

Szójegyzék

+ +
+ +
+ +

Segédletek

+ +
+ +
+ +

Külső források

+ + + +

Specifikációk

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName("CSS Grid 2") }}{{ Spec2("CSS Grid 2") }}Added subgrids.
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.
+ + diff --git a/files/hu/web/css/font-weight/index.html b/files/hu/web/css/font-weight/index.html new file mode 100644 index 0000000000..6e27ac6341 --- /dev/null +++ b/files/hu/web/css/font-weight/index.html @@ -0,0 +1,400 @@ +--- +title: Betű vastagság +slug: CSS/font-weight +translation_of: Web/CSS/font-weight +--- +
{{CSSRef}}
+ +

A betűvastagság (font-weight) CSS tulajdonság beállítja a betűtípus nyomatékosságát, vastagságát (angolul "weight" vagy "boldness"). Az elérhető betűvastagság méretek a beállított betűtípustól ({{cssxref("font-family")}}) függenek.

+ +
{{EmbedInteractiveExample("pages/css/font-weight.html")}}
+ + + +

Szintaxis

+ +
/* Kulcsszavas értékek */
+font-weight: normal; // normál vastagság
+font-weight: bold; // félkövér
+
+/* Kulcsszavas értékek a szülő elemhez viszonyítva */
+font-weight: lighter;
+font-weight: bolder;
+
+/* Numerikus értékek */
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400; // normál
+font-weight: 500;
+font-weight: 600;
+font-weight: 700; // félkövér
+font-weight: 800;
+font-weight: 900;
+
+/* Globális értékek */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+
+ +

A betűvastagság (font-weight) tulajdonság bármely fentebb bemutatott módon beállítható.

+ +

Értékek

+ +
+
normal
+
Normál betűvastagság. Megegyezik a 400-as értékkel.
+
bold
+
Félkövér. Megegyezik a 700-as értékkel.
+
lighter
+
Relatív betűvastagság, a szülő elem formázásához viszonyít, annál vékonyabb betűvastagságot állít be. Megjegyzés: csupán négy betűvastagságot tartunk számon, melyek relatív értékek. (Bővebben: {{anch("Relatív betűvastagság jelentése")}} bekezdés lentebb.)
+
bolder
+
Relatív betűvastagság, a szülő elem formázásához viszonyít, annál vastagabb betűvastagságot állít be. Megjegyzés: csupán négy betűvastagságot tartunk számon, melyek relatív értékek. (Bővebben: {{anch("Relatív betűvastagság jelentése")}} bekezdés lentebb.)
+
<number>
+
A {{cssxref("<number>")}} (szám) érték 1 és 1000 között megadható (az 1000 is beletartozik az intervallumba). Minél magasabb az érték, annál vastagabb lesz a betű formázás. Néhány gyakran használt érték megfeleltethető betűvastagság elnevezéseknek, bővebben lásd az Általános betűvastagság elnevezések bekezdésnél.
+
+ +

A betűvastagság beállítás régebbi verzióiban ez a tulajdonság csak kulcsszavakas értékeket és számokat fogad el (100, 200, 300, 400, 500, 600, 700, 800, és 900). A nem változó betűtípusok csak ezeket az értékeket tudják értelmezni. (Változó betűtípus: egyetlen betűkészlet-fájl, amely több stílusként viselkedik. Bővebben itt tudsz utánaolvasni.) A "finomszemcsés" értékek (pl: 451) a nem változó betűtípusok esetében lefordítódnak a fentebb említett értékek egyikére a {{anch("Fallback weights")}} rendszer segítségével.

+ +

A CSS Fonts Level 4 kiterjeszti a szintaxist, és bármely számot el tudja fogadni 1 és 1000 között, illetve bevezeti a Változó betűtípus készleteket ({{anch("Variable fonts")}}), amelyek már tudják használni ezeket a "finomszemcsés" betűvastagság értékeket is.

+ +

Alapeset

+ +

Hogyha a megadott betűvastagság nem elérhető adott betűtípuson, az alábbi szabály lép életbe, mely eldönti a véglegesen megjelenítendő betűvastagságot:

+ + + +

Relatív betűvastagság jelentése

+ +

Amikor lighter vagy bolder betűvastagságot határozunk meg, az alábbi táblázat segít megérteni, hogyan dől el, mi lesz a betűvastagságunk abszolút értéke.

+ +

Megjegyzés: csupán 4 értéket tartunk számon relatív értékként: vékony, keskeny (thin, 100), normál (normal, 400), félkövér (bold, 700), és vastag (heavy, 900). Ha egy betűtípus család ennél több elérhető értékkel rendelkezik, azok ebben az esetben mellőzve lesznek annak érdekében, hogy a relatív értéket át tudjuk alakítani abszolút értékké.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Örökölt értékbolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
+ +

Általános betűvastagság elnevezések

+ +

A numerikus értékek 100-tól 900-ig megfeleltethetők az alábbi általános betűvastagság elnevezéseknek. (Bővebben: OpenType specification):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ÉrtékÁltalános betűvastagság elnevezés
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal (Regular)
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
950Extra Black (Ultra Black)
+ +

Változó betűtípus útmutató

+ +

A legtöbb betűtípusnak van egy bizonyos betűvastagsága, ami a fentebbi Általános betűvastagság elnevezések értékeinek megfeleltethető. Azonban néhány betűtípus, amit változó betűtípusnak nevezünk, ezeknél sokkal pontosabb, aprószemcsés értéket is meg tud jeleníteni, és ez sokkal nagyobb kontrollt adhat egy designernek.

+ +

A TrueType vagy OpenType változó betűtípusok a "wght" variációjukkal tudnak implementálni változó szélességet.

+ +

Az alábbi példához egy olyan böngészőre lesz szükséged, ami támogatja a CSS Fonts Level 4 szintaxist, amellyel bármilyen értéket meg tudunk adni 1 és 1000 között.

+ +
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
+ +

HTML

+ +
+
<header>
+    <input type="range" id="weight" name="weight" min="1" max="1000" />
+    <label for="weight">Weight</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+
+ +

CSS

+ +
/*
+Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
+and is used here under the terms of its license:
+https://github.com/LettError/mutatorSans/blob/master/LICENSE
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
+  font-family:'MutatorSans';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+  white-space: nowrap;
+}
+
+.container {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.sample {
+  text-transform: uppercase;
+  font: 1.5rem 'MutatorSans', sans-serif;
+}
+
+ + + +

JavaScript

+ +
let weightLabel = document.querySelector('label[for="weight"]');
+let weightInput = document.querySelector('#weight');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  weightLabel.textContent = `font-weight: ${weightInput.value};`;
+  sampleText.style.fontWeight = weightInput.value;
+}
+
+weightInput.addEventListener('input', update);
+
+update();
+
+
+ +

Accessibility concerns

+ +

Látási nehézségekkel küzdő emberek számára nehézséget okozhat a 100-as (Thin/Hairline) és 200-as (Extra Light) betűvastagsággal írt szövegek elolvasása, különösképpen ha alacsony a színkontraszt. 

+ + + +

Formal definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Példák

+ +

Betűvastagság beállítása

+ +

HTML

+ +
<p>
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, "and what is the use of a book," thought Alice "without pictures or
+  conversations?"
+</p>
+
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+
+ +

CSS

+ +
/* Set paragraph text to be bold. */
+p {
+  font-weight: bold;
+}
+
+/* Set div text to two steps heavier than
+   normal but less than a standard bold. */
+div {
+ font-weight: 600;
+}
+
+/* Set span text to be one step lighter
+   than its parent. */
+span {
+  font-weight: lighter;
+}
+ +

Result

+ +

{{EmbedLiveSample("Betűvastagság_beállítása","400","300")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS4 Fonts')}}Defines font-weight to accept any numbers between 1 and 1000.
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}No change.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.font-weight")}}

diff --git a/files/hu/web/css/index.html b/files/hu/web/css/index.html new file mode 100644 index 0000000000..6717bc7093 --- /dev/null +++ b/files/hu/web/css/index.html @@ -0,0 +1,92 @@ +--- +title: CSS +slug: CSS +tags: + - CSS + - Design + - Dizájn + - Stíluslapok + - Stílusok +translation_of: Web/CSS +--- +
+

A Cascading Style Sheets (CSS) egy stíluslap nyelv, mellyel a HTML-ben vagy XML-ben (és más XML nyelveken, mint az XHTML vagy a SVG) írt dokumentumok megjelenítését lehet leírni.

+ +

A CSS a nyílt web egyik fő nyelve, amely a W3C specifikációnak megfelelően szabványosítva van a webböngészőkben. Szintenként van fejlesztve, a CSS1 ma már elavult, a CSS2.1 használata az ajánlott, a CSS3 pedig már kisebb modulokra lett osztva, jelenleg is a szabványosítása zajlik.

+ + +
+ + + + + + + + +
+

CSS Dokumentáció

+ +
+
Bevezetés a CSS-be
+
Ez az oldal alapvető információkat nyújt arról, hogyan működik a CSS, azaz bemutatja a szelektorokat és a tulajdonságokat, a CSS szabályok írását, a CSS alkalmazását a HTML-re, a dobozmodell alapjait, valamint a CSS hibakeresést.
+
CSS Referencia
+
A teljeskörű CSS referencia a tapasztalt webes fejlesztők számára a CSS minden tulajdonságát és fogalmát írja le.
+
+ +
+
URL-értékek használata a kurzor tulajdonsághoz 
+
A Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) támogatja a CSS 2/2.1 kurzor tulajdonság URL-értékeit. Ez lehetővé teszi tetszőleges képek egér kurzorokként való használatát - bármely Gecko által támogatott képformátum használható.
+
+ +
+
CSS3 Oszlopok
+
Rövid bemutató a CSS3 oszlopok használatáról.
+
+ +
+
Konzisztens listajelzés
+
A listák behúzásának megkísérlése a CSS-sel trükkösebb, mint amilyennek látszik, de csak azért, mert a CSS-kompatibilis böngészőknek különböznek az alapértelmezései. Ismerd meg, hogyan lehet őket egy vonalba hozni.
+
+ +

Összes megtekintése...

+ 		+

Segítségkérés a közösségtől

+ +

CSS-el kapcsolatos segítségre van szükséged és nem találod a megoldást a dokumentációban?

+ + + +

Eszközök a CSS fejlesztéshez

+ + + +

Összes megtekintése...

+
+ +

Kapcsolódó témakörök

+ + diff --git a/files/hu/web/css/text-decoration/index.html b/files/hu/web/css/text-decoration/index.html new file mode 100644 index 0000000000..22de3ad153 --- /dev/null +++ b/files/hu/web/css/text-decoration/index.html @@ -0,0 +1,150 @@ +--- +title: Szöveg díszítés +slug: CSS/text-decoration +tags: + - CSS tulajdonság + - szöveg díszítés +translation_of: Web/CSS/text-decoration +--- +
{{CSSRef}}
+ +

A szöveg díszítés (text-decoration) rövidített CSS tulajdonság a szöveget díszítő vonalakat állítja be. Ez a tulajdonság egy rövidítés, amely az alábbi tulajdonságokat foglalja magába: {{cssxref("text-decoration-line")}} (szöveg díszítő vonal), {{cssxref("text-decoration-color")}} (-szín), {{cssxref("text-decoration-style")}} (-stílus), és az újabb {{cssxref("text-decoration-thickness")}} (-vastagság).

+ +
{{EmbedInteractiveExample("pages/css/text-decoration.html")}}
+ + + +

A szöveg díszítések leszármazott szövegelemekre is érvényesek lesznek. Ez annyit jelent, hogyha egy elemen specifikálunk valamilyen szöveg díszítést, akkor a leszármazott elem nem tudja majd eltávolítani ezt a díszítést. Vegyük például ezt a jelölő nyelvi elemet: <p>Ez a szöveg néhány <em>hangsúlyos, kiemelt szót</em> is tartalmaz.</p>, és ezt a stílus szabályt: p { text-decoration: underline; }. Ez esetben a teljes paragrafusra érvényes lenne az aláhúzás. Az em { text-decoration: none; } stílus szabály nem hozna változást, a teljes bekezdés megmaradna aláhúzottan. Azonban az  em { text-decoration: overline; } egy második szöveg díszítést is bevezetne, és egy felső vonal is megjelenne a kiemelt szavakon ("hangsúlyos, kiemelt szót" szavakon).

+ +

A szabályban foglalt tulajdonságok

+ +

A text-decoration tulajdonság egy rövidítés, mely magába foglalja az alábbi CSS tulajdonságokat: szín, vonal, stílus, vastagság.

+ + + +

Szintaxis

+ +

A text-decoration tulajdonságot egy vagy több érték megadásával is létrehozhatjuk, melyeket szóközzel kell elválasztanunk. Ezek az értékek fogják képviselni a fentebb is említett tulajdonságokat, melyeket a text-decoration magába foglal.

+ +

Értékek

+ +
+
{{cssxref("text-decoration-line")}}
+
Beállítja a díszítő vonal elhelyezését: a szöveg alá, fölé, vagy rá (áthúzás) is kerülhet. (underline, overline vagy line-through).
+
{{cssxref("text-decoration-color")}}
+
Beállítja a díszítő vonal színét.
+
{{cssxref("text-decoration-style")}}
+
Beállítja a díszítő vonal stílusát, például egyszerű vonal, hullámos, vagy szaggatott ( solid, wavy, or dashed).
+
{{cssxref("text-decoration-thickness")}}
+
Beállítja a díszítő vonal vastagságát.
+
+ +

Régebbi meghatározás

+ +

{{CSSInfo}}

+ +

Régebbi szintaxis

+ +
{{csssyntax}}
+ +

Példák

+ +

Szöveg díszítés bemutatása

+ +
.under {
+  text-decoration: underline red;
+}
+
+.over {
+  text-decoration: wavy overline lime;
+}
+
+.line {
+  text-decoration: line-through;
+}
+
+.plain {
+  text-decoration: none;
+}
+
+.underover {
+  text-decoration: dashed underline overline;
+}
+
+.thick {
+  text-decoration: solid underline purple 4px;
+}
+
+.blink {
+  text-decoration: blink;
+}
+
+ +
<p class="under">Ezen szöveg alatt látható egy vonal.</p>
+<p class="over">Ezen szöveg fölött látható egy vonal.</p>
+<p class="line">Ez a szöveg át van húzva.</p>
+<p>Ez a <a class="plain" href="#">link nincs aláhúzva</a>,
+    mint ahogyan a linkeknél alapvetően látni szoktuk.
+Óvatosan használjuk ezt a formázást a linkeken, hiszen a
+felhasználók sokszor erre az alap formázásra támaszkodnak,
+ha linkeket keresnek a szövegben.</p>
+<p class="underover">Ezen szöveg fölött <em>és</em> alatt is van vonal.</p>
+<p class="thick">Ezen szöveg alatt látható egy vastag lila
+aláhúzás azon böngészőkben, melyek támogatják ezt a formázást.</p>
+<p class="blink">Ez a szöveg villog, ha olyan böngészőt
+használsz, ami támogatja ezt a formázást.</p>
+
+ +

{{EmbedLiveSample('Példák','auto','320')}}

+ +

Specifikációk

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecifikációStátuszKomment
{{SpecName('CSS4 Text Decoration')}}{{Spec2('CSS4 Text Decoration')}}A {{cssxref("text-decoration-thickness")}}; tulajdonság hozzáadva. Megjegyzés: ez még hivatalosan nem része a rövidített stílus szabálynak - ez még nincs meghatározva.
{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}{{Spec2('CSS3 Text Decoration')}}Átalakítva rövidített tulajdonsággá. A {{cssxref('text-decoration-style')}} érték támogatása hozzáadva.
{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}{{Spec2('CSS2.1')}}Nincs szignifikáns változtatás.
{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}{{Spec2('CSS1')}}Kezdeti definiálás.
+ +

Böngésző kompatibilitás

+ + + +

{{Compat("css.properties.text-decoration")}}

+ +

Lásd még

+ + diff --git a/files/hu/web/css/tools/border-radius_bemutato/index.html b/files/hu/web/css/tools/border-radius_bemutato/index.html deleted file mode 100644 index fe31d33429..0000000000 --- a/files/hu/web/css/tools/border-radius_bemutato/index.html +++ /dev/null @@ -1,1602 +0,0 @@ ---- -title: Border-radius bemutató -slug: Web/CSS/Tools/Border-radius_bemutato -tags: - - CSS - - Eszközök -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator ---- -

Ez az eszköz CSS3 {{cssxref("border-radius")}} beállítások megjelenítésére használható.

- -
-

border-radius

- -

HTML Content

- -
<div id="container">
-    <div class="group section">
-        <div id="preview" class="col span_12">
-            <div id="subject">
-                <div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top">
-                </div>
-                <div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top">
-                </div>
-                <div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom">
-                </div>
-                <div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom">
-                </div>
-
-                <div id="radius-ui-sliders">
-                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="controls" class="group section">
-
-        <div class="group section">
-            <div id="dimensions">
-                <div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
-
-                <div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
-            </div>
-
-            <div id="output"></div>
-        </div>
-
-        <div class="group section">
-            <div id="radius-lock">
-                <div class="info"> lekerekített sarok </div>
-                <div class="ui-checkbox" data-topic='top-left'></div>
-                <div class="ui-checkbox" data-topic='top-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-left'></div>
-            </div>
-
-            <div id="unit-selection">
-                <div class="info"> szegély mértékegységei </div>
-            </div>
-        </div>
-
-    </div>
-</div>
-
- -

CSS Content

- -
/*  GRID OF TEN
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider-container {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider-container * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 3px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview {
-	height: 500px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	overflow: hidden;
-	position: relative;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#preview input {
-	color: #333;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-#subject {
-	width: 400px;
-	height: 150px;
-	margin: 0 auto;
-	border: 3px solid #C60;
-	background: #FFF;
-	position: relative;
-}
-
-.radius {
-	width: 50%;
-	height: 50%;
-	border: 1px solid #CCC;
-	display: none;
-	position: absolute;
-	z-index: 1;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.handle {
-	width: 16px;
-	height: 16px;
-	position: absolute;
-	z-index: 2;
-}
-
-.handle-top-left {
-	top: -12px;
-	left: -12px;
-	cursor: se-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
-}
-
-.handle-top-right {
-	top: -12px;
-	right: -12px;
-	cursor: sw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
-}
-
-.handle-bottom-right {
-	bottom: -12px;
-	right: -12px;
-	cursor: nw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
-}
-
-.handle-bottom-left {
-	bottom: -12px;
-	left: -12px;
-	cursor: ne-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
-}
-
-
-.radius-container {
-	position: absolute;
-	display : block;
-	z-index: 1;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* TOP LEFT */
-#top-left {
-	top: 0;
-	left: 0;
-}
-
-#top-left .radius {
-	border-top-left-radius: 100%;
-	top: 0;
-	left: 0;
-}
-
-/* TOP RIGHT */
-#top-right {
-	top: 0;
-	right: 0;
-}
-
-#top-right .radius {
-	border-top-right-radius: 100%;
-	top: 0;
-	right: 0;
-}
-
-/* BOTTOM RIGHT */
-#bottom-right {
-	bottom: 0;
-	right: 0;
-}
-
-#bottom-right .radius {
-	border-bottom-right-radius: 100%;
-	bottom: 0;
-	right: 0;
-}
-
-/* BOTTOM lEFT */
-#bottom-left {
-	bottom: 0;
-	left: 0;
-}
-
-#bottom-left .radius {
-	border-bottom-left-radius: 100%;
-	bottom: 0;
-}
-
-/* INPUT SLIDERS */
-
-#preview .ui-input-slider {
-	margin: 10px;
-	position: absolute;
-	z-index: 10;
-}
-
-#radius-ui-sliders {
-	width: 100%;
-	height: 100%;
-	min-height: 75px;
-	min-width: 150px;
-	padding: 20px 50px;
-	top: -20px;
-	left: -50px;
-	position: relative;
-}
-
-#tlr {
-	top: -30px;
-	left: -50px;
-	display: none;
-}
-
-#tlw {
-	top: -30px;
-	left: 30px;
-}
-
-#tlh {
-	top: 20px;
-	left: -50px;
-}
-
-#trr {
-	top: -30px;
-	right: -50px;
-	display: none;
-}
-
-#trw {
-	top: -30px;
-	right: 30px;
-}
-
-#trh {
-	top: 20px;
-	right: -50px;
-}
-
-#brr {
-	bottom: -30px;
-	right: -50px;
-	display: none;
-}
-
-#brw {
-	bottom: -30px;
-	right: 30px;
-}
-
-#brh {
-	bottom: 20px;
-	right: -50px;
-}
-
-#blr {
-	bottom: -30px;
-	left: -50px;
-	display: none;
-}
-
-#blw {
-	bottom: -30px;
-	left: 30px;
-}
-
-#blh {
-	bottom: 20px;
-	left: -50px;
-}
-
-#preview .ui-input-slider-left, #preview .ui-input-slider-right {
-	visibility: hidden;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-left {
-	visibility: visible;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-right {
-	visibility: visible;
-}
-
-/*
- *
- */
-
-#unit-selection {
-	width: 200px;
-	height: 75px;
-	margin: 30px 30px 0 0;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: right;
-}
-
-#unit-selection .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#unit-selection .dropdown {
-	width: 50px;
-	height: 20px;
-	margin: 10px;
-	padding: 0;
-	border-radius: 3px;
-	position: absolute;
-	overflow: hidden;
-}
-
-#unit-selection select {
-	width: 50px;
-	height: 20px;
-	marign: 0;
-	padding: 0 0 0 10px;
-	background: #555;
-	border: 1px solid #555;
-	border: none;
-	color: #FFF;
-	float: left;
-}
-
-#unit-selection select option {
-	background: #FFF;
-	color: #333;
-}
-
-#unit-selection select:hover {
-	cursor: pointer;
-}
-
-#unit-selection .dropdown:before {
-	content: "";
-	width: 18px;
-	height: 20px;
-	display: block;
-	background-color: #555;
-	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	top: 0px;
-	right: 0px;
-	position: absolute;
-	z-index: 1;
-	pointer-events: none;
-}
-
-#unit-selection .unit-top-left {
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-left-w {
-	top: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-top-left-h {
-	top: 20px;
-	left: -37px;
-}
-
-#unit-selection .unit-top-right {
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-right-w {
-	top: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-top-right-h {
-	top: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-right {
-	bottom: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-right-w {
-	bottom: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-bottom-right-h {
-	bottom: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-left {
-	bottom: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-left-w {
-	bottom: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-bottom-left-h {
-	bottom: 20px;
-	left: -37px;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-
-
-#radius-lock {
-	width: 200px;
-	height: 75px;
-	margin: 30px 0 0 30px;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: left;
-}
-
-#radius-lock .ui-checkbox {
-	color: #FFF;
-	position: absolute;
-}
-
-#radius-lock .ui-checkbox > label {
-	height: 20px;
-	width: 34px;
-	padding: 0;
-}
-
-#radius-lock .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#radius-lock [data-topic="top-left"] {
-	top: 10px;
-	left: 10px;
-}
-
-#radius-lock [data-topic="top-right"] {
-	top: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-right"] {
-	bottom: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-left"] {
-	bottom: 10px;
-	left: 10px;
-}
-
-/**
- * Controls
- */
-
-#dimensions {
-	width: 200px;
-	color: #444;
-	float:left;
-}
-
-#dimensions input {
-	background: #555;
-	color: #FFF;
-	border: none;
-	border-radius: 3px;
-}
-
-#output {
-	width: 500px;
-	padding: 10px 0;
-	margin: 10px 0;
-	color: #555;
-	text-align: center;
-	border: 1px dashed #999;
-	border-radius: 3px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-
-	float: right;
-}
-
-
-
- -

JavaScript Content

- -
'use strict';
-
-
-/**
- * UI-InputSliderManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseInt(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		subscribe(obj.topic, function(value) {
-			input.value = value + obj.unit;
-		});
-
-		return input;
-	}
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		});
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		}
-
-		return slider;
-	}
-
-	var InputSlider = function(node) {
-		var min		= node.getAttribute('data-min') | 0;
-		var max		= node.getAttribute('data-max') | 0;
-		var step	= node.getAttribute('data-step') | 0;
-		var value	= node.getAttribute('data-value') | 0;
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-
-		this.min = min;
-		this.max = max > 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-		node.className = 'ui-input-slider ui-input-slider-container';
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	}
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined && send_notify === false) {
-			slider.input.value = value + slider.unit;
-			return;
-		}
-
-		notify.call(slider);
-	}
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	}
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	}
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	}
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	}
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		getNode : getNode,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	}
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	}
-
-	var setValue = function setValue(topic, value) {
-		try {
-			buttons[topic].checkbox.checked = value;
-		}
-		catch(error) {
-			console.log(error);
-		}
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function() {
-	BorderRadius.init();
-});
-
-var BorderRadius = (function BorderRadius() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * Shadow dragging
-	 */
-	var PreviewMouseTracking = (function Drag() {
-		var active = false;
-		var lastX = 0;
-		var lastY = 0;
-		var subscribers = [];
-
-		var init = function init(id) {
-			var elem = getElemById(id);
-			elem.addEventListener('mousedown', dragStart, false);
-			document.addEventListener('mouseup', dragEnd, false);
-		}
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			active = true;
-			lastX = e.clientX;
-			lastY = e.clientY;
-			document.addEventListener('mousemove', mouseDrag, false);
-		}
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			if (active === true) {
-				active = false;
-				document.removeEventListener('mousemove', mouseDrag, false);
-			}
-		}
-
-		var mouseDrag = function mouseDrag(e) {
-			notify(e.clientX - lastX, e.clientY - lastY);
-			lastX = e.clientX;
-			lastY = e.clientY;
-		}
-
-		var subscribe = function subscribe(callback) {
-			subscribers.push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			var index = subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(deltaX, deltaY) {
-			for (var i in subscribers)
-				subscribers[i](deltaX, deltaY);
-		}
-
-		return {
-			init : init,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	var subject;
-	var units = ['px', '%'];
-	var output = null;
-
-	var UnitSelector = function UnitSelector(topic) {
-
-		this.container = document.createElement("div");
-		this.select = document.createElement("select");
-		for (var i in units) {
-			var option = document.createElement("option");
-			option.value = i;
-			option.textContent = units[i];
-			this.select.appendChild(option);
-		}
-
-		this.container.className = 'dropdown ' + 'unit-' + topic;
-		this.container.appendChild(this.select);
-	}
-
-	UnitSelector.prototype.setValue = function setValue(value) {
-		this.salect.value = value;
-	}
-
-
-	var RadiusContainer = function RadiusContainer(node) {
-		var radius = document.createElement('div');
-		var handle = document.createElement('div');
-		var x = node.getAttribute('data-x');
-		var y = node.getAttribute('data-y');
-		var active = false;
-
-		this.id = node.id;
-		this.node = node;
-		this.radius = radius;
-		this.handle = handle;
-		this.width = 100;
-		this.height = 50;
-		this.size = 0;
-		this.rounded = false;
-
-		this.unitX = 0;
-		this.unitY = 0;
-		this.unitR = 0;
-
-		this.maxW = 100;
-		this.maxH = 100;
-		this.maxR = 100;
-
-		this.topic = y + '-' + x;
-
-		var sliderW = InputSliderManager.getNode(this.topic + '-w');
-		var sliderH = InputSliderManager.getNode(this.topic + '-h');
-		var sliderR = InputSliderManager.getNode(this.topic);
-
-		this.setUnitX(this.unitX);
-		this.setUnitY(this.unitY);
-		this.setUnitR(this.unitR);
-
-		this.updateWidth();
-		this.updateHeight();
-		this.updateRadius();
-
-		if (x === 'left')	this.resizeX =  1;
-		if (x === 'right')	this.resizeX = -1;
-		if (y === 'top')	this.resizeY =  1;
-		if (y === 'bottom')	this.resizeY = -1;
-
-		radius.className = 'radius';
-
-		var unit_selector = document.getElementById("unit-selection");
-		var unitW = new UnitSelector(this.topic + '-w');
-		var unitH = new UnitSelector(this.topic + '-h');
-		var unitR = new UnitSelector(this.topic);
-
-		unit_selector.appendChild(unitW.container);
-		unit_selector.appendChild(unitH.container);
-		unit_selector.appendChild(unitR.container);
-		node.appendChild(radius);
-		subject.appendChild(handle);
-
-		unitW.select.addEventListener('change', function(e) {
-			this.setUnitX(e.target.value | 0);
-		}.bind(this));
-
-		unitH.select.addEventListener('change', function(e) {
-			this.setUnitY(e.target.value | 0);
-		}.bind(this));
-
-		unitR.select.addEventListener('change', function(e) {
-			this.setUnitR(e.target.value | 0);
-		}.bind(this));
-
-		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
-
-		handle.addEventListener("mousedown", function(e) {
-			active = true;
-			this.radius.style.display = 'block';
-			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		document.addEventListener("mouseup", function(e) {
-			this.radius.style.display = 'none';
-			if (active === true)
-				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
-		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
-		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
-
-		ButtonManager.subscribe(this.topic, function(value) {
-			this.rounded = value;
-			if (value === true) {
-				unitW.container.style.display = 'none';
-				unitH.container.style.display = 'none';
-				unitR.container.style.display = 'block';
-				sliderW.style.display = 'none';
-				sliderH.style.display = 'none';
-				sliderR.style.display = 'block';
-				this.setUnitR(this.unitR);
-				this.updateRadius();
-			}
-
-			if (value === false) {
-				unitW.container.style.display = 'block';
-				unitH.container.style.display = 'block';
-				unitR.container.style.display = 'none';
-				sliderW.style.display = 'block';
-				sliderH.style.display = 'block';
-				sliderR.style.display = 'none';
-				this.setUnitX(this.unitX);
-				this.setUnitY(this.unitY);
-				this.updateWidth();
-				this.updateHeight();
-			}
-
-			this.updateBorderRadius();
-
-		}.bind(this));
-
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.updateWidth = function updateWidth() {
-		this.node.style.width = this.width + units[this.unitX];
-		var value = Math.round(this.width / 2);
-		InputSliderManager.setValue(this.topic + '-w', value, false);
-	}
-
-	RadiusContainer.prototype.updateHeight = function updateHeight() {
-		this.node.style.height = this.height + units[this.unitY];
-		var value = Math.round(this.height / 2);
-		InputSliderManager.setValue(this.topic + '-h', value, false);
-	}
-
-	RadiusContainer.prototype.updateRadius = function updateRadius() {
-		var value = Math.round(this.size / 2);
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		InputSliderManager.setValue(this.topic, value, false);
-	}
-
-	RadiusContainer.prototype.setWidth = function setWidth(value) {
-		this.radius.style.display = 'block';
-		this.width = 2 * value;
-		this.node.style.width = this.width + units[this.unitX];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setHeight = function setHeight(value) {
-		this.radius.style.display = 'block';
-		this.height = 2 * value;
-		this.node.style.height = this.height + units[this.unitY];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setRadius = function setRadius(value) {
-		this.radius.style.display = 'block';
-		this.size = 2 * value;
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
-		this.unitX = value;
-		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
-		if (this.unitX === 1) this.maxW = 200;
-		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
-		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
-	}
-
-	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
-		this.unitY = value;
-		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
-		if (this.unitY === 1) this.maxH = 200;
-		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
-		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
-	}
-
-	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
-		this.unitR = value;
-
-		if (this.unitR === 0)
-			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
-
-		if (this.unitR === 1)
-			this.maxR = 200;
-
-		InputSliderManager.setUnit(this.topic, units[this.unitR]);
-		InputSliderManager.setMax(this.topic, this.maxR / 2);
-	}
-
-	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
-		if (this.rounded) {
-			this.setUnitR(this.unitR);
-			return;
-		}
-
-		if (unit === 0)
-			this.setUnitX(this.unitX);
-
-		if (unit === 1)
-			this.setUnitY(this.unitY);
-	}
-
-	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
-
-		if (this.rounded === true) {
-			var unit = units[this.unitR];
-			var value = Math.round(this.size / 2);
-			return value + unit;
-		}
-
-		var unitX = units[this.unitX];
-		var unitY = units[this.unitY];
-		var valueX = Math.round(this.width / 2);
-		var valueY = Math.round(this.height / 2);
-
-		if (valueX === valueY && this.unitX === this.unitY)
-			return valueX + unitX;
-
-		return valueX + unitX + ' ' + valueY + unitY;
-	}
-
-	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
-		var radius = this.composeBorderRadius();
-		var corner = 0;
-
-		if (this.topic === 'top-left') {
-			subject.style.borderTopLeftRadius = radius;
-			corner = 0;
-		}
-
-		if (this.topic === 'top-right') {
-			subject.style.borderTopRightRadius = radius;
-			corner = 1;
-		}
-
-		if (this.topic === 'bottom-right') {
-			subject.style.borderBottomRightRadius = radius;
-			corner = 2;
-		}
-
-		if (this.topic === 'bottom-left') {
-			subject.style.borderBottomLeftRadius = radius;
-			corner = 3;
-		}
-
-		Tool.updateOutput(corner, radius);
-	}
-
-	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
-
-		if (this.rounded === true) {
-			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
-			if (this.size < 0)	this.size = 0;
-			if (this.size > this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width < 0)	this.width = 0;
-			if (this.width > this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height < 0) this.height = 0;
-			if (this.height > this.maxH)	this.height = this.maxH;
-			this.updateHeight();
-		}
-
-		if (deltaX || deltaY)
-			this.updateBorderRadius();
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview;
-		var preview_ui;
-		var radius_containers = [];
-		var border_width = 3;
-		var borders1 = [null, null, null, null];
-		var borders2 = [0, 0, 0, 0];
-
-		var updateUIWidth = function updateUIWidth(value) {
-			var pwidth = subject.parentElement.clientWidth;
-			var left = (pwidth - value) / 2;
-			subject.style.width = value + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(0);
-		}
-
-		var updateUIHeight = function updateUIHeight(value) {
-			var pheight = subject.parentElement.clientHeight;
-			var top = (pheight - value) / 2;
-			subject.style.height = value + "px";
-			subject.style.top = top - border_width + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(1);
-		}
-
-		var updatePreviewUIWidth = function updatePreviewUIWidth() {
-			var p = subject.parentElement.clientWidth;
-			var v = preview_ui.clientWidth;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.left = (p - v) / 2 + "px" ;
-		}
-
-		var updatePreviewUIHeight = function updatePreviewUIHeight() {
-			var p = subject.parentElement.clientHeight;
-			var v = preview_ui.clientHeight;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.top = (p - v) / 2 + "px" ;
-		}
-
-		var updateOutput = function updateOutput(corner, radius) {
-			var values = radius.split(" ");
-
-			borders1[corner] = values[0];
-			borders2[corner] = values[0];
-
-			if (values.length === 2)
-				borders2[corner] = values[1];
-
-			var border_1_value = borders1.join(" ");
-			var border_2_value = borders2.join(" ");
-			var border_radius = 'border-radius: ' + border_1_value;
-
-			if (border_2_value !== border_1_value)
-				border_radius += ' / ' + border_2_value;
-
-			border_radius += ';';
-			output.textContent = border_radius;
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-			subject = getElemById("subject");
-			output = getElemById("output");
-			preview_ui = getElemById("radius-ui-sliders");
-
-			var elem = document.querySelectorAll('.radius-container');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				radius_containers[i] = new RadiusContainer(elem[i]);
-
-			InputSliderManager.subscribe("width", updateUIWidth);
-			InputSliderManager.subscribe("height", updateUIHeight);
-
-			InputSliderManager.setValue("width", subject.clientWidth);
-			InputSliderManager.setValue("height", subject.clientHeight);
-		}
-
-		return {
-			init : init,
-			updateOutput : updateOutput
-		}
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		InputSliderManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-
-
- -

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

- -

 

diff --git a/files/hu/web/guide/grafika/index.html b/files/hu/web/guide/grafika/index.html deleted file mode 100644 index c9c2880069..0000000000 --- a/files/hu/web/guide/grafika/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Grafikák az interneten -slug: Web/Guide/Grafika -tags: - - 2D - - 3D - - Canvas - - Grafika - - HTML5 - - SVG - - WebGL - - WebRTC -translation_of: Web/Guide/Graphics ---- -

Gyakran használunk különféle grafikákat a weboldalakon, illetve alkalmazásokban. Statikus képek megjelenítésére egyszerűen használható az {{HTMLElement("img")}} elem, vagy az adott képet beállíthatjuk egy HTML elem hátterének is a {{cssxref("background-image")}} tulajdonság segítségével. Ugyanakkor JavaScript használatával bármikor készíthető új kép, vagy manipulálható egy meglévő. Az alábbi útmutatók segítséget nyújtanak a különféle grafikák használatában.

- -
-
-

2D Grafika

- -
-
Canvas
-
A {{HTMLElement("canvas")}} elemre API-n keresztül 2D-s grafikák rajzolhatók JavaScript használatával.
-
SVG
-
A Scalable Vector Graphics (SVG) vonalak, görbék és más geometriai alakzatok használatával rajzolja ki a kívánt képet. A vektorok használatával olyan képek készíthetők, amelyek bármilyen méretre nagyíthatóak minőségvesztés és torzulás nélkül.
-
- -

Összes megtekintése...

-
- -
-

3D Grafika

- -
-
WebGL
-
Útmutató a WebGL használatához, a webes 3D grafikus API-hoz. Ez a technológia lehetővé teszi a szabványos OpenGL ES használatát a webes tartalomban.
-
- -

Videó

- -
-
HTML5 audió és videó használata
-
Videó és / vagy hang beágyazása egy weboldalra és a lejátszás vezérlése.
-
WebRTC
-
A WebRTC elnevezésben az RTC a "Real-Time Communications" rövidítése. Ez a technológia teszi lehetővé az audio / video streamelést, valamint az adatok megosztását a böngészőkliensek (peerek) között.
-
-
-
diff --git a/files/hu/web/guide/graphics/index.html b/files/hu/web/guide/graphics/index.html new file mode 100644 index 0000000000..c9c2880069 --- /dev/null +++ b/files/hu/web/guide/graphics/index.html @@ -0,0 +1,48 @@ +--- +title: Grafikák az interneten +slug: Web/Guide/Grafika +tags: + - 2D + - 3D + - Canvas + - Grafika + - HTML5 + - SVG + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +

Gyakran használunk különféle grafikákat a weboldalakon, illetve alkalmazásokban. Statikus képek megjelenítésére egyszerűen használható az {{HTMLElement("img")}} elem, vagy az adott képet beállíthatjuk egy HTML elem hátterének is a {{cssxref("background-image")}} tulajdonság segítségével. Ugyanakkor JavaScript használatával bármikor készíthető új kép, vagy manipulálható egy meglévő. Az alábbi útmutatók segítséget nyújtanak a különféle grafikák használatában.

+ +
+
+

2D Grafika

+ +
+
Canvas
+
A {{HTMLElement("canvas")}} elemre API-n keresztül 2D-s grafikák rajzolhatók JavaScript használatával.
+
SVG
+
A Scalable Vector Graphics (SVG) vonalak, görbék és más geometriai alakzatok használatával rajzolja ki a kívánt képet. A vektorok használatával olyan képek készíthetők, amelyek bármilyen méretre nagyíthatóak minőségvesztés és torzulás nélkül.
+
+ +

Összes megtekintése...

+
+ +
+

3D Grafika

+ +
+
WebGL
+
Útmutató a WebGL használatához, a webes 3D grafikus API-hoz. Ez a technológia lehetővé teszi a szabványos OpenGL ES használatát a webes tartalomban.
+
+ +

Videó

+ +
+
HTML5 audió és videó használata
+
Videó és / vagy hang beágyazása egy weboldalra és a lejátszás vezérlése.
+
WebRTC
+
A WebRTC elnevezésben az RTC a "Real-Time Communications" rövidítése. Ez a technológia teszi lehetővé az audio / video streamelést, valamint az adatok megosztását a böngészőkliensek (peerek) között.
+
+
+
diff --git a/files/hu/web/javascript/a_javascript_ujboli_bemutatasa/index.html b/files/hu/web/javascript/a_javascript_ujboli_bemutatasa/index.html deleted file mode 100644 index 89192fcbf4..0000000000 --- a/files/hu/web/javascript/a_javascript_ujboli_bemutatasa/index.html +++ /dev/null @@ -1,948 +0,0 @@ ---- -title: A JavaScript újbóli bemutatása -slug: Web/JavaScript/a_javascript_ujboli_bemutatasa -translation_of: Web/JavaScript/A_re-introduction_to_JavaScript ---- -
{{jsSidebar}}
- -

Hogy miért újboli bemutatása? Azért, mert a {{Glossary("JavaScript")}} a világ legfélreértetteb programozási nyelveként ismert. 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.

- -

É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.

- -

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 Ecma International - 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 ECMAScript edition 3 -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.

- -
-

Az ismertség miatt innentől az ECMAScript helyett a JavaScript megnevezést használjuk.

-
- -

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 Node.js, NoSQL adatbázisok mint a nyílt forrású Apache CouchDB, beágyazott rendszerek, teljes asztali környezetek mint a GNOME (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.

- -

Áttekintés

- -

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 prototypical inheritance és ES2015 classes). 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.

- -

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:

- - - -

... ó, é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:

- - - -

é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.

- -

Számok

- -

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.

- -

Figyelj oda olyan dolgokra, mint:

- -
0.1 + 0.2 == 0.30000000000000004;
-
- -

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.

- -

Támogatottak az alapértelmezett aritmetikai operátorok, 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:

- -
Math.sin(3.5);
-var atmero = 2 * Math.PI * r;
-
- -

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:

- -
parseInt('123', 10); // 123
-parseInt('010', 10); // 10
-
- -

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:

- -
parseInt('010');  //  8
-parseInt('0x10'); // 16
-
- -

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 hexadecimális szemlélet még mindig megengedett, csak az oktális lett eltávolítva.

- -

Ha egy bináris számot szeretnél integerré alakítani, egyszerűen a bázist kell megváltoztatni 2 -re.

- -
parseInt('11', 2); // 3
-
- -

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 parseFloat() mindig 10 -es bázist használ.

- -

Az unáris (egy operandusú) + operátor is használható számok konvertálására:

- -
+ '42';   // 42
-+ '010';  // 10
-+ '0x10'; // 16
-
- -

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.

- -
parseInt('hello', 10); // NaN
-
- -

A NaN veszélyes: Ha egy matematikai művelet egyik operandusaként használjuk, az eredmény is NaN lesz:

- -
NaN + 5; // NaN
-
- -

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 NaN - e:

- -
isNaN(NaN); // true
-
- -

A JavaScript - ben vannak olyan speciális értékek is, mint az {{jsxref("Infinity")}} és a -Infinity:

- -
 1 / 0; //  Infinity
--1 / 0; // -Infinity
-
- -

Az Infinity, -Infinity és NaN értékeket a beépített {{jsxref("Global_Objects/isFinite", "isFinite()")}} függvényekel lehet tesztelni:

- -
isFinite(1 / 0); // false
-isFinite(-Infinity); // false
-isFinite(NaN); // false
-
- -
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 NaN é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.
- -

Karakterláncok

- -

A stringek a JavaScript -ben Unicode karakterek 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.

- -

Egyetlen karakter reprezentálásához egyszerűen egyetlen karaktert használunk.

- -

Egy string hosszát (kód egységekben), a length property -vel (tulajdonság, az objektum tagváltozója) kapjuk meg:

- -
'hello'.length; // 5
-
- -

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:

- -
'hello'.charAt(0); // "h"
-'hello, world'.replace('world', 'mars'); // "hello, mars"
-'hello'.toUpperCase(); // "HELLO"
-
- -

Egyéb típusok

- -

A JavaScript különbséget tesz a {{jsxref("null")}}, ami egy "nem értéket" reprezentál, (és csak a null kulcsszón keresztül érhető el), és az {{jsxref("undefined")}} között, ami egy undefined 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 undefined lesz. Az undefined egy konstans.

- -

A JavaScript -nek van egy boolean típusa, true és false lehetséges értékkekkel (mindkettő ezek közül kulcsszó.) Minden érték boolean - é konvertálható a következő szabályok figyelembevételével:

- -
    -
  1. false, 0, üres stringek (""), NaN, null, és undefined értékekből false lesz.
    2. -
  2. Minden más értékből true lesz.
    3. -
- -

A konverzió közvetlenül a Boolean() függvénnyel hajtható végre:

- -
Boolean('');  // false
-Boolean(234); // true
-
- -

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 if 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 true vagy false lesznek, miután Boolean -é lettek átalakítva. Ezek az értékek másképpen "truthy" és "falsy".

- -

A Boolean műveletek mint például az && (logikai és), || (logikai vagy), és ! (logikai nem) támogatottak (lásd lentebb).

- -

Változók

- -

JavaScript-ben az új változókat három kulcsszóval lehet deklarálni: let, const, vagy var.
-
- A let 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.

- -
let a;
-let name = 'Simon';
-
- -

A következő példa a let kulcsszóval deklarált változó láthatóságát mutatja be.

- -
// 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ó.
-
-
- -

A const kulcsszóval olyan változó deklarálható, aminek az értéke nem változik meg. A változó abból a kód blokkból érhető el, amiben deklarálták.

- -
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
- -


- A var 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 var kulcsszóval deklarált változó abban a függvényben érhető el, amiben azt deklarálták.

- -
var a;
-var name = 'Simon';
- -

A következő példa a var kulcsszóval deklarált változó láthatóságát mutatja be.

- -
// 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ó
-
- -

Ha egy olyan változót deklarálunk, amihez nem lett érték hozzárendelve, a típusa undefined lesz.

- -

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 var kulcsszóval definiálunk változót (például egy if 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 let és const kulcsszóval deklarált változók, lehetővé teszik a scope-ok létrehozását.

- -

Operátorok

- -

A JavaScript's numerikus operátorai a +, -, *, / és % ami a maradék operátor (Ami nem ugyanaz, mint a modulo.) Az értékadás az = használatával történik, és létezik összevont értékadás is mint a += és a -=. Ezek a következőféleképp értelmezendőek:
- x = x operator y.

- -
x += 5;
-x = x + 5;
-
- -

A ++ és -- operátorokat inkrementálásta and dekrementálásra lehet használni. Ezek használhatóak prefix és postfix operátorokként is.

- -

A + operátor stringek egyesítésére is :

- -
'hello' + ' world'; // "hello world"
-
- -

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:

- -
'3' + 4 + 5;  // "345"
- 3 + 4 + '5'; // "75"
-
- -

Egy üres string hozzáadása egy értékhez jó módszer arra, hogy az értéket string-é konvertáljuk.

- -

A JavaScriptben Összehasonlításokat a <, >, <= és >= 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 == operátor típuskonverziót kényszerít ki, ami érdekes eredményekhez vezethet:

- -
123 == '123'; // true
-1 == true; // true
-
- -

A típuskonverzió elkerüléséhez használjuk a === (teljesen egyenlő) operátort:

- -
123 === '123'; // false
-1 === true;    // false
-
- -

Léteznek != és !== operátorok is.

- -

A JavaScript-ben vannak bitszintű műveletek is.

- -

Vezérlő szerkezetek

- -

A JavaScript hasonló a C nyelvcsalád nyelveihez hasonlóvezérlő szerkezetekkel rendelkezik. Feltételes utasítások az if és else kulcsszavakkal hozhatók létre. Ezek összeláncolhatóak:

- -
var name = 'kittens';
-if (name == 'puppies') {
-  name += ' woof';
-} else if (name == 'kittens') {
-  name += ' meow';
-} else {
-  name += '!';
-}
-name == 'kittens meow';
-
- -

A JavaScript-ben vannak while és do-while 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:

- -
while (true) {
-  // végtelen ciklus!
-}
-
-var input;
-do {
-  input = get_input();
-} while (inputIsNotValid(input));
-
- -

A JavaScript for ciklusa ugyanaz mint a C-ben és Java-ban megszokott: A vezérlőinformációk egyetlen sorban megadhatóak.

- -
for (var i = 0; i < 5; i++) {
-  // ötször fut le
-}
-
- -

A JavaScript-ben van két másik népszerű for ciklus is:
- A for...of

- -
for (let value of array) {
-  // value feldolgozása
-}
-
- -

és a for...in:

- -
for (let property in object) {
-  // objektum tulajdonságának feldolgozása
-}
-
- -

A && és || 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:

- -
var name = o && o.getName();
-
- -

vagy értékek cachelésére (ha a falsy értékek érvénytelenek):

- -
var name = cachedName || (cachedName = getName());
-
- -

A JavaScript-ben van egy ternáris operátor, feltételek létrehozásához:

- -
var allowed = (age > 18) ? 'yes' : 'no';
-
- -

A switch többszörös elágazásakhoz használható egy string vagy egy szám tartalmától függően:

- -
switch (action) {
-  case 'draw':
-    drawIt();
-    break;
-  case 'eat':
-    eatIt();
-    break;
-  default:
-    doNothing();
-}
-
- -

Ha nem adunk hozzá break utasítást, a vezérlés átlép a következő case á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:

- -
switch (a) {
-  case 1: // átlép a következőre
-  case 2:
-    eatIt();
-    break;
-  default:
-    doNothing();
-}
-
- -

A default á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 === operátorral történik:

- -
switch (1 + 3) {
-  case 2 + 2:
-    yay();
-    break;
-  default:
-    sosemtortenikmeg();
-}
-
- -

Objektumok

- -

A JavaScript objektumok egyszerű név - érték párokból állnak. Ezek hasonlóak mint a:

- - - -

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!

- -

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.

- -

Egy üres objektum létrehozására két lehetőség van:

- -
var obj = new Object();
-
- -

és:

- -
var obj = {};
-
- -

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.

- -

Az Object literal szintaxis egy átfogó objektum inicializálására használható:

- -
var obj = {
-  name: 'Carrot',
-  for: 'Max', // 'for' egy foglalt szó, használjunk '_for' -t helyette.
-  details: {
-    color: 'orange',
-    size: 12
-  }
-};
-
- -

A tulajdonságok elérése összefűzhető:

- -
obj.details.color; // orange
-obj['details']['size']; // 12
-
- -

A kövekező példa egy  Person prototípust készít, és ezen prototípusnak egy you nevű példányát.

- -
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.
-
-
- -

Példányosítás után, egy objektum tulajdonságait két féle képpen lehet elérni:

- -
// dot notation
-obj.name = 'Simon';
-var name = obj.name;
-
- -

és...

- -
// 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?')
-
- -

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  foglalt szavakat használnak.

- -
obj.for = 'Simon'; // Syntax error, mert a 'for' egy foglalt szó
-obj['for'] = 'Simon'; // működik
-
- -
-

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. Lásd ES5 Spec.

-
- -

További információk az objektumokról, és prototípusokról a Object.prototype cikkben olvashatóak. Az obejktumprototípusok, és az objektumprototípus-láncok  magyarűzatáhpz lásd az Inheritance and the prototype chain cikket.

- -
-

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 {[phoneType]: 12345}, nem csak így:  var userPhone = {}; userPhone[phoneType] = 12345.

-
- -

Tömbök

- -

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 [] szintaxissal érhetőek el) de van egy plusz tulajdonságuk is, a 'length'. Ez mindigy egyel több, mint a legmagasabb index a tömbben.

- -

Egy tömböt a következő képpen lehet létrehozni:

- -
var a = new Array();
-a[0] = 'dog';
-a[1] = 'cat';
-a[2] = 'hen';
-a.length; // 3
-
- -

Még népszerűbb ezen a módon egy literállal.

- -
var a = ['dog', 'cat', 'hen'];
-a.length; // 3
-
- -

Tartsuk észben, hogy az array.length nem feltétlenül az elemek számát jelenti. Nézzük a következő példát:

- -
var a = ['dog', 'cat', 'hen'];
-a[100] = 'fox';
-a.length; // 101
-
- -

Ne feledjük: a tömb hossza (length) mindig a legmagasabb index + 1 értéket jelenti.

- -

Ha egy nem létező indexhez próbálunk hozzáférni, akkor undefined értéket kapunk vissza:

- -
typeof a[90]; // undefined
-
- -

A fenti [] -ket és a length tulajdonságot használva, végiglépkedhetünk a tömbön a következő for ciklus segítségével:

- -
for (var i = 0; i < a.length; i++) {
-  // a[i] feldolgozása
-}
-
- -

Az ES2015 óta a fenti módszernek létezik egy egyszerűbb formája is, a for...of ciklus, ami olyan objektumoknál használható, mint a tömbök:

- -
for (const currentValue of a) {
-  // currentValue feldolgozása
-}
- -

Egy  for...in 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 Array.prototype-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.

- -

Az ECMAScript 5-ben egy másik módszer is adott, hogy végig lépkedjünk egy tömbön, a forEach():

- -
['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
-  // currentValue vagy array[index] feldolgozása
-});
-
- -

Ha egy elemt szeretnénk a tömbhöz hozzáadni, egyszerűen így tehetjük meg:

- -
a.push(item);
- -

Egy tömbnek sok metódusa van. Lásd a full documentation for array methods cikket is.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method nameDescription
a.toString()Egy stringet ad vissza, amiben minden objektum veszzővel van elválasztva. 
a.toLocaleString()Egy stringet ad vissza, amiben minden objektum veszzővel van elválasztva, dátumoknál a helyi idő szerinti formátum
a.concat(item1[, item2[, ...[, itemN]]])Egy új tömböt ad vissza, a hozzáadott elemekkel együtt.
a.join(sep)Egy stringé alakítja át a tömböt, amiben a sep paraméterben megadottal lesznek az egyes elemek elválasztva
a.pop()Eltávolítja az utolsó elemet, és visszaadja azt.
a.push(item1, ..., itemN)A tömb végére hozzáfűz egy elemet
a.reverse()Megfordítja a tömb sorrendjét.
a.shift()Eltávolítja az első elemet, és visszaadja azt.
a.slice(start[, end])Egy altömböt ad vissza.
a.sort([cmpfn])Rendezi a tömböt. Opcionálisan egy függvényt is meg lehet adni.
a.splice(start, delcount[, item1[, ...[, itemN]]])Módosít egy tömböt úgy, hogy egy része törölve, és azok több elemekkel cserélve lesznek.
a.unshift(item1[, item2[, ...[, itemN]]])A tömb elejére elemeket szúr be.
- -

Függvények

- -

Az objektumok mellet, a függvények a JavaScript központi összetevői. Egy egyszerű függvény szintaxisa alig lehetne egyszerűebb:

- -
function add(x, y) {
-  var total = x + y;
-  return total;
-}
-
- -

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 return utasítás bárhol használható értékek visszaadására, és a függvény befejezésére. ha nem használunk return utasítást, (vagy érték nélkül használjuk), a függvény visszatérése undefined lesz.

- -

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 undefined lesz.

- -
add(); // NaN
-// Nem lehet hozzáadást végezni undefined értékekkel
-
- -

You can also pass in more arguments than the function is expecting:

- -
add(2, 3, 4); // 5
-// az első két paraméter össze lesz adva; a 4 figyelmen kívül marad
-
- -

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 arguments-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:

- -
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
-
- -

Ám ez nem hasznosabb annál, mint leírni, hogy 2 + 3 + 4 + 5. Készítsünk egy átlagszámítást végző függvényt:

- -
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
-
- -

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 Rest parameter syntax -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 rest parameter operator a ...variable formátummal írható le, és tartalmazza a függvény számára összes nem megnevezett paramétert. A for ciklus helyett használhatunk for...of ciklust is.

- -
function avg(...args) {
-  var sum = 0;
-  for (let value of args) {
-    sum += value;
-  }
-  return sum / args.length;
-}
-
-avg(2, 3, 4, 5); // 3.5
-
- -
A fenti kódban, az args változó tárolja az összes értéket, amit a függvénynek adtunk át.
-
-It is important to note that wherever the rest parameter operator is placed in a function declaration it will store all arguments after its declaration, but not before. i.e. function avg(firstValue, ...args) will store the first value passed into the function in the firstValue variable and the remaining arguments in args. That's another useful language feature but it does lead us to a new problem. The avg() 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:
- -
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
-
- -

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.

- -
avg.apply(null, [2, 3, 4, 5]); // 3.5
-
- -

The second argument to apply() is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objects too.

- -
-

You can achieve the same result using the spread operator in the function call.

- -

For instance: avg(...numbers)

-
- -

JavaScript lets you create anonymous functions.

- -
var avg = function() {
-  var sum = 0;
-  for (var i = 0, j = arguments.length; i < j; i++) {
-    sum += arguments[i];
-  }
-  return sum / arguments.length;
-};
-
- -

This is semantically equivalent to the function avg() 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:

- -
var a = 1;
-var b = 2;
-
-(function() {
-  var b = 3;
-  a += b;
-})();
-
-a; // 4
-b; // 2
-
- -

JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as those found in the browser DOM.

- -
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;
-}
-
- -

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 IIFEs (Immediately Invoked Function Expressions) as shown below:

- -
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);
-
- -

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.

- -

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.

- -

Custom objects

- -
For a more detailed discussion of object-oriented programming in JavaScript, see Introduction to Object-Oriented JavaScript.
- -

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:

- -
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"
-
- -

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:

- -
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"
-
- -

There's something here we haven't seen before: the this keyword. Used inside a function, this 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 dot notation or bracket notation on an object, that object becomes this. If dot notation wasn't used for the call, this refers to the global object.

- -

Note that this is a frequent cause of mistakes. For example:

- -
var s = makePerson('Simon', 'Willison');
-var fullName = s.fullName;
-fullName(); // undefined undefined
-
- -

When we call fullName() alone, without using s.fullName(), this is bound to the global object. Since there are no global variables called first or last we get undefined for each one.

- -

We can take advantage of the this keyword to improve our makePerson function:

- -
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');
-
- -

We have introduced another keyword: new. new is strongly related to this. It creates a brand new empty object, and then calls the function specified, with this set to that new object. Notice though that the function specified with this does not return a value but merely modifies the this object. It's new that returns the this object to the calling site. Functions that are designed to be called by new are called constructor functions. Common practice is to capitalize these functions as a reminder to call them with new.

- -

The improved function still has the same pitfall with calling fullName() alone.

- -

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?

- -
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;
-}
-
- -

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:

- -
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;
-};
-
- -

Person.prototype is an object shared by all instances of Person. It forms part of a lookup chain (that has a special name, "prototype chain"): any time you attempt to access a property of Person that isn't set, JavaScript will check Person.prototype to see if that property exists there instead. As a result, anything assigned to Person.prototype becomes available to all instances of that constructor via the this object.

- -

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:

- -
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"
-
- -

Interestingly, you can also add things to the prototype of built-in JavaScript objects. Let's add a method to String that returns that string in reverse:

- -
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
-
- -

Our new method even works on string literals!

- -
'This can now be reversed'.reversed(); // desrever eb won nac sihT
-
- -

As mentioned before, the prototype forms part of a chain. The root of that chain is Object.prototype, whose methods include toString() — it is this method that is called when you try to represent an object as a string. This is useful for debugging our Person objects:

- -
var s = new Person('Simon', 'Willison');
-s.toString(); // [object Object]
-
-Person.prototype.toString = function() {
-  return '<Person: ' + this.fullName() + '>';
-}
-
-s.toString(); // "<Person: Simon Willison>"
-
- -

Remember how avg.apply() had a null first argument? We can revisit that now. The first argument to apply() is the object that should be treated as 'this'. For example, here's a trivial implementation of new:

- -
function trivialNew(constructor, ...args) {
-  var o = {}; // Create an object
-  constructor.apply(o, args);
-  return o;
-}
-
- -

This isn't an exact replica of new 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, ...args (including the ellipsis) is called the "rest arguments" — as the name implies, this contains the rest of the arguments.

- -

Calling

- -
var bill = trivialNew(Person, 'William', 'Orange');
- -

is therefore almost equivalent to

- -
var bill = new Person('William', 'Orange');
- -

apply() has a sister function named call, which again lets you set this but takes an expanded argument list as opposed to an array.

- -
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
-
- -

Inner functions

- -

JavaScript function declarations are allowed inside other functions. We've seen this once before, with an earlier makePerson() function. An important detail of nested functions in JavaScript is that they can access variables in their parent function's scope:

- -
function parentFunc() {
-  var a = 1;
-
-  function nestedFunc() {
-    var b = 4; // parentFunc can't use this
-    return a + b;
-  }
-  return nestedFunc(); // 5
-}
-
- -

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.

- -

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.

- -

Closures

- -

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?

- -
function makeAdder(a) {
-  return function(b) {
-    return a + b;
-  };
-}
-var x = makeAdder(5);
-var y = makeAdder(20);
-x(6); // ?
-y(7); // ?
-
- -

The name of the makeAdder() 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.

- -

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 do still exist — otherwise, the adder functions would be unable to work. What's more, there are two different "copies" of makeAdder()'s local variables — one in which a is 5 and the other one where a is 20. So the result of that function calls is as follows:

- -
x(6); // returns 11
-y(7); // returns 27
-
- -

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 this and in browsers as window) 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.

- -

So when makeAdder() is called, a scope object is created with one property: a, which is the argument passed to the makeAdder() function. makeAdder() then returns a newly created function. Normally JavaScript's garbage collector would clean up the scope object created for makeAdder() 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 makeAdder() returned.

- -

Scope objects form a chain called the scope chain, similar to the prototype chain used by JavaScript's object system.

- -

A closure 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 several excellent introductions to closures.

diff --git a/files/hu/web/javascript/a_re-introduction_to_javascript/index.html b/files/hu/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..89192fcbf4 --- /dev/null +++ b/files/hu/web/javascript/a_re-introduction_to_javascript/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 +--- +
{{jsSidebar}}
+ +

Hogy miért újboli bemutatása? Azért, mert a {{Glossary("JavaScript")}} a világ legfélreértetteb programozási nyelveként ismert. 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.

+ +

É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.

+ +

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 Ecma International - 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 ECMAScript edition 3 -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.

+ +
+

Az ismertség miatt innentől az ECMAScript helyett a JavaScript megnevezést használjuk.

+
+ +

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 Node.js, NoSQL adatbázisok mint a nyílt forrású Apache CouchDB, beágyazott rendszerek, teljes asztali környezetek mint a GNOME (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.

+ +

Áttekintés

+ +

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 prototypical inheritance és ES2015 classes). 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.

+ +

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:

+ + + +

... ó, é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:

+ + + +

é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.

+ +

Számok

+ +

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.

+ +

Figyelj oda olyan dolgokra, mint:

+ +
0.1 + 0.2 == 0.30000000000000004;
+
+ +

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.

+ +

Támogatottak az alapértelmezett aritmetikai operátorok, 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:

+ +
Math.sin(3.5);
+var atmero = 2 * Math.PI * r;
+
+ +

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:

+ +
parseInt('123', 10); // 123
+parseInt('010', 10); // 10
+
+ +

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:

+ +
parseInt('010');  //  8
+parseInt('0x10'); // 16
+
+ +

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 hexadecimális szemlélet még mindig megengedett, csak az oktális lett eltávolítva.

+ +

Ha egy bináris számot szeretnél integerré alakítani, egyszerűen a bázist kell megváltoztatni 2 -re.

+ +
parseInt('11', 2); // 3
+
+ +

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 parseFloat() mindig 10 -es bázist használ.

+ +

Az unáris (egy operandusú) + operátor is használható számok konvertálására:

+ +
+ '42';   // 42
++ '010';  // 10
++ '0x10'; // 16
+
+ +

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.

+ +
parseInt('hello', 10); // NaN
+
+ +

A NaN veszélyes: Ha egy matematikai művelet egyik operandusaként használjuk, az eredmény is NaN lesz:

+ +
NaN + 5; // NaN
+
+ +

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 NaN - e:

+ +
isNaN(NaN); // true
+
+ +

A JavaScript - ben vannak olyan speciális értékek is, mint az {{jsxref("Infinity")}} és a -Infinity:

+ +
 1 / 0; //  Infinity
+-1 / 0; // -Infinity
+
+ +

Az Infinity, -Infinity és NaN értékeket a beépített {{jsxref("Global_Objects/isFinite", "isFinite()")}} függvényekel lehet tesztelni:

+ +
isFinite(1 / 0); // false
+isFinite(-Infinity); // false
+isFinite(NaN); // false
+
+ +
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 NaN é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.
+ +

Karakterláncok

+ +

A stringek a JavaScript -ben Unicode karakterek 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.

+ +

Egyetlen karakter reprezentálásához egyszerűen egyetlen karaktert használunk.

+ +

Egy string hosszát (kód egységekben), a length property -vel (tulajdonság, az objektum tagváltozója) kapjuk meg:

+ +
'hello'.length; // 5
+
+ +

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:

+ +
'hello'.charAt(0); // "h"
+'hello, world'.replace('world', 'mars'); // "hello, mars"
+'hello'.toUpperCase(); // "HELLO"
+
+ +

Egyéb típusok

+ +

A JavaScript különbséget tesz a {{jsxref("null")}}, ami egy "nem értéket" reprezentál, (és csak a null kulcsszón keresztül érhető el), és az {{jsxref("undefined")}} között, ami egy undefined 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 undefined lesz. Az undefined egy konstans.

+ +

A JavaScript -nek van egy boolean típusa, true és false lehetséges értékkekkel (mindkettő ezek közül kulcsszó.) Minden érték boolean - é konvertálható a következő szabályok figyelembevételével:

+ +
    +
  1. false, 0, üres stringek (""), NaN, null, és undefined értékekből false lesz.
    2. +
  2. Minden más értékből true lesz.
    3. +
+ +

A konverzió közvetlenül a Boolean() függvénnyel hajtható végre:

+ +
Boolean('');  // false
+Boolean(234); // true
+
+ +

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 if 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 true vagy false lesznek, miután Boolean -é lettek átalakítva. Ezek az értékek másképpen "truthy" és "falsy".

+ +

A Boolean műveletek mint például az && (logikai és), || (logikai vagy), és ! (logikai nem) támogatottak (lásd lentebb).

+ +

Változók

+ +

JavaScript-ben az új változókat három kulcsszóval lehet deklarálni: let, const, vagy var.
+
+ A let 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.

+ +
let a;
+let name = 'Simon';
+
+ +

A következő példa a let kulcsszóval deklarált változó láthatóságát mutatja be.

+ +
// 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ó.
+
+
+ +

A const kulcsszóval olyan változó deklarálható, aminek az értéke nem változik meg. A változó abból a kód blokkból érhető el, amiben deklarálták.

+ +
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
+ +


+ A var 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 var kulcsszóval deklarált változó abban a függvényben érhető el, amiben azt deklarálták.

+ +
var a;
+var name = 'Simon';
+ +

A következő példa a var kulcsszóval deklarált változó láthatóságát mutatja be.

+ +
// 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ó
+
+ +

Ha egy olyan változót deklarálunk, amihez nem lett érték hozzárendelve, a típusa undefined lesz.

+ +

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 var kulcsszóval definiálunk változót (például egy if 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 let és const kulcsszóval deklarált változók, lehetővé teszik a scope-ok létrehozását.

+ +

Operátorok

+ +

A JavaScript's numerikus operátorai a +, -, *, / és % ami a maradék operátor (Ami nem ugyanaz, mint a modulo.) Az értékadás az = használatával történik, és létezik összevont értékadás is mint a += és a -=. Ezek a következőféleképp értelmezendőek:
+ x = x operator y.

+ +
x += 5;
+x = x + 5;
+
+ +

A ++ és -- operátorokat inkrementálásta and dekrementálásra lehet használni. Ezek használhatóak prefix és postfix operátorokként is.

+ +

A + operátor stringek egyesítésére is :

+ +
'hello' + ' world'; // "hello world"
+
+ +

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:

+ +
'3' + 4 + 5;  // "345"
+ 3 + 4 + '5'; // "75"
+
+ +

Egy üres string hozzáadása egy értékhez jó módszer arra, hogy az értéket string-é konvertáljuk.

+ +

A JavaScriptben Összehasonlításokat a <, >, <= és >= 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 == operátor típuskonverziót kényszerít ki, ami érdekes eredményekhez vezethet:

+ +
123 == '123'; // true
+1 == true; // true
+
+ +

A típuskonverzió elkerüléséhez használjuk a === (teljesen egyenlő) operátort:

+ +
123 === '123'; // false
+1 === true;    // false
+
+ +

Léteznek != és !== operátorok is.

+ +

A JavaScript-ben vannak bitszintű műveletek is.

+ +

Vezérlő szerkezetek

+ +

A JavaScript hasonló a C nyelvcsalád nyelveihez hasonlóvezérlő szerkezetekkel rendelkezik. Feltételes utasítások az if és else kulcsszavakkal hozhatók létre. Ezek összeláncolhatóak:

+ +
var name = 'kittens';
+if (name == 'puppies') {
+  name += ' woof';
+} else if (name == 'kittens') {
+  name += ' meow';
+} else {
+  name += '!';
+}
+name == 'kittens meow';
+
+ +

A JavaScript-ben vannak while és do-while 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:

+ +
while (true) {
+  // végtelen ciklus!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input));
+
+ +

A JavaScript for ciklusa ugyanaz mint a C-ben és Java-ban megszokott: A vezérlőinformációk egyetlen sorban megadhatóak.

+ +
for (var i = 0; i < 5; i++) {
+  // ötször fut le
+}
+
+ +

A JavaScript-ben van két másik népszerű for ciklus is:
+ A for...of

+ +
for (let value of array) {
+  // value feldolgozása
+}
+
+ +

és a for...in:

+ +
for (let property in object) {
+  // objektum tulajdonságának feldolgozása
+}
+
+ +

A && és || 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:

+ +
var name = o && o.getName();
+
+ +

vagy értékek cachelésére (ha a falsy értékek érvénytelenek):

+ +
var name = cachedName || (cachedName = getName());
+
+ +

A JavaScript-ben van egy ternáris operátor, feltételek létrehozásához:

+ +
var allowed = (age > 18) ? 'yes' : 'no';
+
+ +

A switch többszörös elágazásakhoz használható egy string vagy egy szám tartalmától függően:

+ +
switch (action) {
+  case 'draw':
+    drawIt();
+    break;
+  case 'eat':
+    eatIt();
+    break;
+  default:
+    doNothing();
+}
+
+ +

Ha nem adunk hozzá break utasítást, a vezérlés átlép a következő case á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:

+ +
switch (a) {
+  case 1: // átlép a következőre
+  case 2:
+    eatIt();
+    break;
+  default:
+    doNothing();
+}
+
+ +

A default á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 === operátorral történik:

+ +
switch (1 + 3) {
+  case 2 + 2:
+    yay();
+    break;
+  default:
+    sosemtortenikmeg();
+}
+
+ +

Objektumok

+ +

A JavaScript objektumok egyszerű név - érték párokból állnak. Ezek hasonlóak mint a:

+ + + +

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!

+ +

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.

+ +

Egy üres objektum létrehozására két lehetőség van:

+ +
var obj = new Object();
+
+ +

és:

+ +
var obj = {};
+
+ +

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.

+ +

Az Object literal szintaxis egy átfogó objektum inicializálására használható:

+ +
var obj = {
+  name: 'Carrot',
+  for: 'Max', // 'for' egy foglalt szó, használjunk '_for' -t helyette.
+  details: {
+    color: 'orange',
+    size: 12
+  }
+};
+
+ +

A tulajdonságok elérése összefűzhető:

+ +
obj.details.color; // orange
+obj['details']['size']; // 12
+
+ +

A kövekező példa egy  Person prototípust készít, és ezen prototípusnak egy you nevű példányát.

+ +
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.
+
+
+ +

Példányosítás után, egy objektum tulajdonságait két féle képpen lehet elérni:

+ +
// dot notation
+obj.name = 'Simon';
+var name = obj.name;
+
+ +

és...

+ +
// 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?')
+
+ +

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  foglalt szavakat használnak.

+ +
obj.for = 'Simon'; // Syntax error, mert a 'for' egy foglalt szó
+obj['for'] = 'Simon'; // működik
+
+ +
+

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. Lásd ES5 Spec.

+
+ +

További információk az objektumokról, és prototípusokról a Object.prototype cikkben olvashatóak. Az obejktumprototípusok, és az objektumprototípus-láncok  magyarűzatáhpz lásd az Inheritance and the prototype chain cikket.

+ +
+

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 {[phoneType]: 12345}, nem csak így:  var userPhone = {}; userPhone[phoneType] = 12345.

+
+ +

Tömbök

+ +

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 [] szintaxissal érhetőek el) de van egy plusz tulajdonságuk is, a 'length'. Ez mindigy egyel több, mint a legmagasabb index a tömbben.

+ +

Egy tömböt a következő képpen lehet létrehozni:

+ +
var a = new Array();
+a[0] = 'dog';
+a[1] = 'cat';
+a[2] = 'hen';
+a.length; // 3
+
+ +

Még népszerűbb ezen a módon egy literállal.

+ +
var a = ['dog', 'cat', 'hen'];
+a.length; // 3
+
+ +

Tartsuk észben, hogy az array.length nem feltétlenül az elemek számát jelenti. Nézzük a következő példát:

+ +
var a = ['dog', 'cat', 'hen'];
+a[100] = 'fox';
+a.length; // 101
+
+ +

Ne feledjük: a tömb hossza (length) mindig a legmagasabb index + 1 értéket jelenti.

+ +

Ha egy nem létező indexhez próbálunk hozzáférni, akkor undefined értéket kapunk vissza:

+ +
typeof a[90]; // undefined
+
+ +

A fenti [] -ket és a length tulajdonságot használva, végiglépkedhetünk a tömbön a következő for ciklus segítségével:

+ +
for (var i = 0; i < a.length; i++) {
+  // a[i] feldolgozása
+}
+
+ +

Az ES2015 óta a fenti módszernek létezik egy egyszerűbb formája is, a for...of ciklus, ami olyan objektumoknál használható, mint a tömbök:

+ +
for (const currentValue of a) {
+  // currentValue feldolgozása
+}
+ +

Egy  for...in 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 Array.prototype-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.

+ +

Az ECMAScript 5-ben egy másik módszer is adott, hogy végig lépkedjünk egy tömbön, a forEach():

+ +
['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
+  // currentValue vagy array[index] feldolgozása
+});
+
+ +

Ha egy elemt szeretnénk a tömbhöz hozzáadni, egyszerűen így tehetjük meg:

+ +
a.push(item);
+ +

Egy tömbnek sok metódusa van. Lásd a full documentation for array methods cikket is.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method nameDescription
a.toString()Egy stringet ad vissza, amiben minden objektum veszzővel van elválasztva. 
a.toLocaleString()Egy stringet ad vissza, amiben minden objektum veszzővel van elválasztva, dátumoknál a helyi idő szerinti formátum
a.concat(item1[, item2[, ...[, itemN]]])Egy új tömböt ad vissza, a hozzáadott elemekkel együtt.
a.join(sep)Egy stringé alakítja át a tömböt, amiben a sep paraméterben megadottal lesznek az egyes elemek elválasztva
a.pop()Eltávolítja az utolsó elemet, és visszaadja azt.
a.push(item1, ..., itemN)A tömb végére hozzáfűz egy elemet
a.reverse()Megfordítja a tömb sorrendjét.
a.shift()Eltávolítja az első elemet, és visszaadja azt.
a.slice(start[, end])Egy altömböt ad vissza.
a.sort([cmpfn])Rendezi a tömböt. Opcionálisan egy függvényt is meg lehet adni.
a.splice(start, delcount[, item1[, ...[, itemN]]])Módosít egy tömböt úgy, hogy egy része törölve, és azok több elemekkel cserélve lesznek.
a.unshift(item1[, item2[, ...[, itemN]]])A tömb elejére elemeket szúr be.
+ +

Függvények

+ +

Az objektumok mellet, a függvények a JavaScript központi összetevői. Egy egyszerű függvény szintaxisa alig lehetne egyszerűebb:

+ +
function add(x, y) {
+  var total = x + y;
+  return total;
+}
+
+ +

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 return utasítás bárhol használható értékek visszaadására, és a függvény befejezésére. ha nem használunk return utasítást, (vagy érték nélkül használjuk), a függvény visszatérése undefined lesz.

+ +

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 undefined lesz.

+ +
add(); // NaN
+// Nem lehet hozzáadást végezni undefined értékekkel
+
+ +

You can also pass in more arguments than the function is expecting:

+ +
add(2, 3, 4); // 5
+// az első két paraméter össze lesz adva; a 4 figyelmen kívül marad
+
+ +

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 arguments-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:

+ +
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
+
+ +

Ám ez nem hasznosabb annál, mint leírni, hogy 2 + 3 + 4 + 5. Készítsünk egy átlagszámítást végző függvényt:

+ +
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
+
+ +

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 Rest parameter syntax -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 rest parameter operator a ...variable formátummal írható le, és tartalmazza a függvény számára összes nem megnevezett paramétert. A for ciklus helyett használhatunk for...of ciklust is.

+ +
function avg(...args) {
+  var sum = 0;
+  for (let value of args) {
+    sum += value;
+  }
+  return sum / args.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+
+ +
A fenti kódban, az args változó tárolja az összes értéket, amit a függvénynek adtunk át.
+
+It is important to note that wherever the rest parameter operator is placed in a function declaration it will store all arguments after its declaration, but not before. i.e. function avg(firstValue, ...args) will store the first value passed into the function in the firstValue variable and the remaining arguments in args. That's another useful language feature but it does lead us to a new problem. The avg() 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:
+ +
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
+
+ +

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.

+ +
avg.apply(null, [2, 3, 4, 5]); // 3.5
+
+ +

The second argument to apply() is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objects too.

+ +
+

You can achieve the same result using the spread operator in the function call.

+ +

For instance: avg(...numbers)

+
+ +

JavaScript lets you create anonymous functions.

+ +
var avg = function() {
+  var sum = 0;
+  for (var i = 0, j = arguments.length; i < j; i++) {
+    sum += arguments[i];
+  }
+  return sum / arguments.length;
+};
+
+ +

This is semantically equivalent to the function avg() 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:

+ +
var a = 1;
+var b = 2;
+
+(function() {
+  var b = 3;
+  a += b;
+})();
+
+a; // 4
+b; // 2
+
+ +

JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as those found in the browser DOM.

+ +
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;
+}
+
+ +

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 IIFEs (Immediately Invoked Function Expressions) as shown below:

+ +
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);
+
+ +

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.

+ +

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.

+ +

Custom objects

+ +
For a more detailed discussion of object-oriented programming in JavaScript, see Introduction to Object-Oriented JavaScript.
+ +

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:

+ +
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"
+
+ +

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:

+ +
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"
+
+ +

There's something here we haven't seen before: the this keyword. Used inside a function, this 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 dot notation or bracket notation on an object, that object becomes this. If dot notation wasn't used for the call, this refers to the global object.

+ +

Note that this is a frequent cause of mistakes. For example:

+ +
var s = makePerson('Simon', 'Willison');
+var fullName = s.fullName;
+fullName(); // undefined undefined
+
+ +

When we call fullName() alone, without using s.fullName(), this is bound to the global object. Since there are no global variables called first or last we get undefined for each one.

+ +

We can take advantage of the this keyword to improve our makePerson function:

+ +
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');
+
+ +

We have introduced another keyword: new. new is strongly related to this. It creates a brand new empty object, and then calls the function specified, with this set to that new object. Notice though that the function specified with this does not return a value but merely modifies the this object. It's new that returns the this object to the calling site. Functions that are designed to be called by new are called constructor functions. Common practice is to capitalize these functions as a reminder to call them with new.

+ +

The improved function still has the same pitfall with calling fullName() alone.

+ +

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?

+ +
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;
+}
+
+ +

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:

+ +
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;
+};
+
+ +

Person.prototype is an object shared by all instances of Person. It forms part of a lookup chain (that has a special name, "prototype chain"): any time you attempt to access a property of Person that isn't set, JavaScript will check Person.prototype to see if that property exists there instead. As a result, anything assigned to Person.prototype becomes available to all instances of that constructor via the this object.

+ +

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:

+ +
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"
+
+ +

Interestingly, you can also add things to the prototype of built-in JavaScript objects. Let's add a method to String that returns that string in reverse:

+ +
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
+
+ +

Our new method even works on string literals!

+ +
'This can now be reversed'.reversed(); // desrever eb won nac sihT
+
+ +

As mentioned before, the prototype forms part of a chain. The root of that chain is Object.prototype, whose methods include toString() — it is this method that is called when you try to represent an object as a string. This is useful for debugging our Person objects:

+ +
var s = new Person('Simon', 'Willison');
+s.toString(); // [object Object]
+
+Person.prototype.toString = function() {
+  return '<Person: ' + this.fullName() + '>';
+}
+
+s.toString(); // "<Person: Simon Willison>"
+
+ +

Remember how avg.apply() had a null first argument? We can revisit that now. The first argument to apply() is the object that should be treated as 'this'. For example, here's a trivial implementation of new:

+ +
function trivialNew(constructor, ...args) {
+  var o = {}; // Create an object
+  constructor.apply(o, args);
+  return o;
+}
+
+ +

This isn't an exact replica of new 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, ...args (including the ellipsis) is called the "rest arguments" — as the name implies, this contains the rest of the arguments.

+ +

Calling

+ +
var bill = trivialNew(Person, 'William', 'Orange');
+ +

is therefore almost equivalent to

+ +
var bill = new Person('William', 'Orange');
+ +

apply() has a sister function named call, which again lets you set this but takes an expanded argument list as opposed to an array.

+ +
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
+
+ +

Inner functions

+ +

JavaScript function declarations are allowed inside other functions. We've seen this once before, with an earlier makePerson() function. An important detail of nested functions in JavaScript is that they can access variables in their parent function's scope:

+ +
function parentFunc() {
+  var a = 1;
+
+  function nestedFunc() {
+    var b = 4; // parentFunc can't use this
+    return a + b;
+  }
+  return nestedFunc(); // 5
+}
+
+ +

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.

+ +

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.

+ +

Closures

+ +

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?

+ +
function makeAdder(a) {
+  return function(b) {
+    return a + b;
+  };
+}
+var x = makeAdder(5);
+var y = makeAdder(20);
+x(6); // ?
+y(7); // ?
+
+ +

The name of the makeAdder() 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.

+ +

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 do still exist — otherwise, the adder functions would be unable to work. What's more, there are two different "copies" of makeAdder()'s local variables — one in which a is 5 and the other one where a is 20. So the result of that function calls is as follows:

+ +
x(6); // returns 11
+y(7); // returns 27
+
+ +

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 this and in browsers as window) 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.

+ +

So when makeAdder() is called, a scope object is created with one property: a, which is the argument passed to the makeAdder() function. makeAdder() then returns a newly created function. Normally JavaScript's garbage collector would clean up the scope object created for makeAdder() 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 makeAdder() returned.

+ +

Scope objects form a chain called the scope chain, similar to the prototype chain used by JavaScript's object system.

+ +

A closure 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 several excellent introductions to closures.

diff --git "a/files/hu/web/javascript/guide/bevezet\303\251s/index.html" "b/files/hu/web/javascript/guide/bevezet\303\251s/index.html" deleted file mode 100644 index 3e87f3d12b..0000000000 --- "a/files/hu/web/javascript/guide/bevezet\303\251s/index.html" +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Bevezetés -slug: Web/JavaScript/Guide/Bevezetés -translation_of: Web/JavaScript/Guide/Introduction ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
- -

Ez a fejezet bemutatja a JavaScript-et és hozzá kapcsolódó néhány alapvető fogalmat.

- -

Amire szükséged lesz a megértéshez

- -

Ez az útmutató feltételezi, hogy a következő alapvető háttérrel rendelkezel:

- - - -

További információk a JavaScript-ről

- -

A JavaScript dokumentáció a következőket tartalmazza:

- - - -

Ha kezdő JavaScript programozó vagy, akkor jó helyen jársz, a JavaScript Útmutatóban elsajátíthatod a keresett tudást. Ha már alap szinten ismered a nyelvet, egyszerűbb lehet számodra a JavaScript Referencia, ahol szakmai információkat olvashatsz.

- -

Mi az a JavaScript?

- -

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.

- -

JavaScript tartalmaz egy szabványos objektum könyvtárat, mint például az Array, Date, és Math, és alapvető nyelvi elemeket, például az operátorokat és vezérlési szerkezeteket. JavaScript-et lehet bővíteni különböző célokra történő kiegészítéssel, annak speciális igényeivel, például:

- - - -

JavaScript and Java

- -

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.

- -

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.

- -

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.

- -

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.

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - -
JavaScript compared to Java
JavaScriptJava
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.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.
Variable data types are not declared (dynamic typing).Variable data types must be declared (static typing).
Cannot automatically write to hard disk.Can automatically write to hard disk.
- -

For more information on the differences between JavaScript and Java, see the chapter Details of the object model.

- -

JavaScript and the ECMAScript specification

- -

JavaScript is standardized at Ecma International — 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 New in JavaScript to learn more about different versions of JavaScript and ECMAScript specification editions.

- -

The ECMA-262 standard is also approved by the ISO (International Organization for Standardization) as ISO-16262. You can also find the specification on the Ecma International website. The ECMAScript specification does not describe the Document Object Model (DOM), which is standardized by the World Wide Web Consortium (W3C) and/or WHATWG (Web Hypertext Application Technology Working Group). 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 JavaScript technologies overview.

- -

JavaScript documentation versus the ECMAScript specification

- -

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).

- -

The ECMAScript document is not intended to help script programmers; use the JavaScript documentation for information on writing scripts.

- -

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.

- -

The JavaScript documentation describes aspects of the language that are appropriate for a JavaScript programmer.

- -

Getting started with JavaScript

- -

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.

- -

There are two tools built into Firefox that are useful for experimenting with JavaScript: the Web Console and Scratchpad.

- -

The Web Console

- -

The Web Console shows you information about the currently loaded Web page, and also includes a command line that you can use to execute JavaScript expressions in the current page.

- -

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:

- -

- -

Scratchpad

- -

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 Scratchpad is a better tool.

- -

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.

- -

- -

Hello world

- -

To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:

- -
function greetMe(yourName) {
-  alert("Hello " + yourName);
-}
-
-greetMe("World");
-
- -

Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!

- -

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.

- -

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git a/files/hu/web/javascript/guide/introduction/index.html b/files/hu/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..3e87f3d12b --- /dev/null +++ b/files/hu/web/javascript/guide/introduction/index.html @@ -0,0 +1,134 @@ +--- +title: Bevezetés +slug: Web/JavaScript/Guide/Bevezetés +translation_of: Web/JavaScript/Guide/Introduction +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
+ +

Ez a fejezet bemutatja a JavaScript-et és hozzá kapcsolódó néhány alapvető fogalmat.

+ +

Amire szükséged lesz a megértéshez

+ +

Ez az útmutató feltételezi, hogy a következő alapvető háttérrel rendelkezel:

+ + + +

További információk a JavaScript-ről

+ +

A JavaScript dokumentáció a következőket tartalmazza:

+ + + +

Ha kezdő JavaScript programozó vagy, akkor jó helyen jársz, a JavaScript Útmutatóban elsajátíthatod a keresett tudást. Ha már alap szinten ismered a nyelvet, egyszerűbb lehet számodra a JavaScript Referencia, ahol szakmai információkat olvashatsz.

+ +

Mi az a JavaScript?

+ +

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.

+ +

JavaScript tartalmaz egy szabványos objektum könyvtárat, mint például az Array, Date, és Math, és alapvető nyelvi elemeket, például az operátorokat és vezérlési szerkezeteket. JavaScript-et lehet bővíteni különböző célokra történő kiegészítéssel, annak speciális igényeivel, például:

+ + + +

JavaScript and Java

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + +
JavaScript compared to Java
JavaScriptJava
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.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.
Variable data types are not declared (dynamic typing).Variable data types must be declared (static typing).
Cannot automatically write to hard disk.Can automatically write to hard disk.
+ +

For more information on the differences between JavaScript and Java, see the chapter Details of the object model.

+ +

JavaScript and the ECMAScript specification

+ +

JavaScript is standardized at Ecma International — 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 New in JavaScript to learn more about different versions of JavaScript and ECMAScript specification editions.

+ +

The ECMA-262 standard is also approved by the ISO (International Organization for Standardization) as ISO-16262. You can also find the specification on the Ecma International website. The ECMAScript specification does not describe the Document Object Model (DOM), which is standardized by the World Wide Web Consortium (W3C) and/or WHATWG (Web Hypertext Application Technology Working Group). 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 JavaScript technologies overview.

+ +

JavaScript documentation versus the ECMAScript specification

+ +

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).

+ +

The ECMAScript document is not intended to help script programmers; use the JavaScript documentation for information on writing scripts.

+ +

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.

+ +

The JavaScript documentation describes aspects of the language that are appropriate for a JavaScript programmer.

+ +

Getting started with JavaScript

+ +

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.

+ +

There are two tools built into Firefox that are useful for experimenting with JavaScript: the Web Console and Scratchpad.

+ +

The Web Console

+ +

The Web Console shows you information about the currently loaded Web page, and also includes a command line that you can use to execute JavaScript expressions in the current page.

+ +

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:

+ +

+ +

Scratchpad

+ +

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 Scratchpad is a better tool.

+ +

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.

+ +

+ +

Hello world

+ +

To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:

+ +
function greetMe(yourName) {
+  alert("Hello " + yourName);
+}
+
+greetMe("World");
+
+ +

Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!

+ +

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.

+ +

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git a/files/hu/web/javascript/reference/errors/unexpected_type/index.html b/files/hu/web/javascript/reference/errors/unexpected_type/index.html new file mode 100644 index 0000000000..1fd4e782de --- /dev/null +++ b/files/hu/web/javascript/reference/errors/unexpected_type/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 +--- +
{{jsSidebar("Errors")}}
+ +
Az „x (nem) y” 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.
+ +

Üzenet

+ +
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
+
+ +

Hiba típusa

+ +

{{jsxref("TypeError")}}.

+ +

Mi történt?

+ +

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.

+ +

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éldák

+ +

Hibás használatok

+ +
// 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ű
+
+ +

A hiba javítása

+ +

Az undefined értékek kiszűrésére például a typeof operátort lehet használni.

+ +
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.
+}
+ +

Lásd még

+ + diff --git "a/files/hu/web/javascript/reference/errors/\303\251rv\303\251nytelen_t\303\255pus/index.html" "b/files/hu/web/javascript/reference/errors/\303\251rv\303\251nytelen_t\303\255pus/index.html" deleted file mode 100644 index 1fd4e782de..0000000000 --- "a/files/hu/web/javascript/reference/errors/\303\251rv\303\251nytelen_t\303\255pus/index.html" +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: 'Típushiba: "x" (nem) "y"' -slug: Web/JavaScript/Reference/Errors/Érvénytelen_típus -translation_of: Web/JavaScript/Reference/Errors/Unexpected_type ---- -
{{jsSidebar("Errors")}}
- -
Az „x (nem) y” 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.
- -

Üzenet

- -
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
-
- -

Hiba típusa

- -

{{jsxref("TypeError")}}.

- -

Mi történt?

- -

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.

- -

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éldák

- -

Hibás használatok

- -
// 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ű
-
- -

A hiba javítása

- -

Az undefined értékek kiszűrésére például a typeof operátort lehet használni.

- -
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.
-}
- -

Lásd még

- - diff --git a/files/hu/web/javascript/reference/global_objects/function/index.html b/files/hu/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..2e1f19b7c6 --- /dev/null +++ b/files/hu/web/javascript/reference/global_objects/function/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 +--- +
{{JSRef}}
+ +

Minden JavaScript függvény tulajdonképpen egy Function objektum. Ez látható a következő kódnál, amely igazat ad vissza: (function(){}).constructor === Function.

+ +

Konstruktor

+ +
+
{{jsxref("Function/Function", "Function()")}}
+
Létrehoz egy új Function 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 Function konstruktor olyan függvényeket hoz létre, melyek mindig a globális hatókörben hajtódnak végre.
+
+ +

Példánytulajdonságok

+ +
+
{{jsxref("Function.arguments")}}
+
A függvénynek átadott argumentumokból álló tömb.
+ A {{jsxref("Function")}} elavult tulajdonsága. Helyette az {{jsxref("Functions/arguments", "arguments")}} objektum (a függvényen belül érhető el) használandó.
+
{{jsxref("Function.caller")}}
+
A jelenleg futó függvényt meghívó függvényt adja meg.
+ Ez a tulajdonság elavult, és csak egyes nem szigorú függvényekben működik.
+
{{jsxref("Function.displayName")}}
+
A függvény megjelenítendő neve.
+
{{jsxref("Function.length")}}
+
Megadja a függvény által várt argumentumok számát.
+
{{jsxref("Function.name")}}
+
A függvény neve.
+
+ +

Példánymetódusok

+ +
+
{{jsxref("Function.prototype.apply()", "Function.prototype.apply(thisArg [, argsArray])")}}
+
Meghív egy függvényt, és beállítja a this értékét a megadott thisArg értékre. Az argumentumok {{jsxref("Array")}} objektumként adhatók át.
+
{{jsxref("Function.prototype.bind()", "Function.prototype.bind(thisArg[, arg1[, arg2[, ...argN]]])")}}
+
Létrehoz egy új függvényt, amely meghívásakor beállítja a this értékét a megadott thisArg értékre. Az opcionálisan megadható argumentumsor az új függvény meghívásakor átadott argumentumok elé lesz fűzve.
+
{{jsxref("Function.prototype.call()", "Function.prototype.call(thisArg[, arg1, arg2, ...argN])")}}
+
Meghív egy függvényt, és beállítja a this értékét a megadott értékre. Az argumentumok egyszerűen átadhatók.
+
{{jsxref("Function.prototype.toString()", "Function.prototype.toString()")}}
+
Visszaadja a függvény forráskódját ábrázáló karakterláncot.
+ Felülírja a {{jsxref("Object.prototype.toString")}} metódust.
+
+ +

Példák

+ +

Különbség a Function konstruktor és a függvénydeklaráció között

+ +

A Function 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 Function 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.

+ +
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
+
+ +

A kód működik a webböngészőkben, de az f1() ReferenceError hibát okoz Node.js-ben, mert az x nem található. Ez azért van, mert a Node legfelső szintű hatóköre nincs a globális hatókörben, és az x a modulra nézve helyi változó lesz.

+ +

Specifikációk

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}
+ +

Böngészőkompatibilitás

+ +
+ + +

{{Compat("javascript.builtins.Function")}}

+
+ +

Lásd még:

+ + diff --git "a/files/hu/web/javascript/reference/global_objects/f\303\274ggv\303\251ny/index.html" "b/files/hu/web/javascript/reference/global_objects/f\303\274ggv\303\251ny/index.html" deleted file mode 100644 index 2e1f19b7c6..0000000000 --- "a/files/hu/web/javascript/reference/global_objects/f\303\274ggv\303\251ny/index.html" +++ /dev/null @@ -1,112 +0,0 @@ ---- -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 ---- -
{{JSRef}}
- -

Minden JavaScript függvény tulajdonképpen egy Function objektum. Ez látható a következő kódnál, amely igazat ad vissza: (function(){}).constructor === Function.

- -

Konstruktor

- -
-
{{jsxref("Function/Function", "Function()")}}
-
Létrehoz egy új Function 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 Function konstruktor olyan függvényeket hoz létre, melyek mindig a globális hatókörben hajtódnak végre.
-
- -

Példánytulajdonságok

- -
-
{{jsxref("Function.arguments")}}
-
A függvénynek átadott argumentumokból álló tömb.
- A {{jsxref("Function")}} elavult tulajdonsága. Helyette az {{jsxref("Functions/arguments", "arguments")}} objektum (a függvényen belül érhető el) használandó.
-
{{jsxref("Function.caller")}}
-
A jelenleg futó függvényt meghívó függvényt adja meg.
- Ez a tulajdonság elavult, és csak egyes nem szigorú függvényekben működik.
-
{{jsxref("Function.displayName")}}
-
A függvény megjelenítendő neve.
-
{{jsxref("Function.length")}}
-
Megadja a függvény által várt argumentumok számát.
-
{{jsxref("Function.name")}}
-
A függvény neve.
-
- -

Példánymetódusok

- -
-
{{jsxref("Function.prototype.apply()", "Function.prototype.apply(thisArg [, argsArray])")}}
-
Meghív egy függvényt, és beállítja a this értékét a megadott thisArg értékre. Az argumentumok {{jsxref("Array")}} objektumként adhatók át.
-
{{jsxref("Function.prototype.bind()", "Function.prototype.bind(thisArg[, arg1[, arg2[, ...argN]]])")}}
-
Létrehoz egy új függvényt, amely meghívásakor beállítja a this értékét a megadott thisArg értékre. Az opcionálisan megadható argumentumsor az új függvény meghívásakor átadott argumentumok elé lesz fűzve.
-
{{jsxref("Function.prototype.call()", "Function.prototype.call(thisArg[, arg1, arg2, ...argN])")}}
-
Meghív egy függvényt, és beállítja a this értékét a megadott értékre. Az argumentumok egyszerűen átadhatók.
-
{{jsxref("Function.prototype.toString()", "Function.prototype.toString()")}}
-
Visszaadja a függvény forráskódját ábrázáló karakterláncot.
- Felülírja a {{jsxref("Object.prototype.toString")}} metódust.
-
- -

Példák

- -

Különbség a Function konstruktor és a függvénydeklaráció között

- -

A Function 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 Function 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.

- -
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
-
- -

A kód működik a webböngészőkben, de az f1() ReferenceError hibát okoz Node.js-ben, mert az x nem található. Ez azért van, mert a Node legfelső szintű hatóköre nincs a globális hatókörben, és az x a modulra nézve helyi változó lesz.

- -

Specifikációk

- - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}
- -

Böngészőkompatibilitás

- -
- - -

{{Compat("javascript.builtins.Function")}}

-
- -

Lásd még:

- - diff --git a/files/hu/websockets/index.html b/files/hu/websockets/index.html deleted file mode 100644 index 815c4aebb9..0000000000 --- a/files/hu/websockets/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: WebSockets -slug: WebSockets -tags: - - NeedsBrowserCompatibility - - NeedsTranslation - - References - - TopicStub - - WebSockets -translation_of: Web/API/WebSockets_API ---- -

WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

- -
-
-

Documentation

- -
-
Writing WebSocket client applications
-
A tutorial guide to writing WebSocket clients to run in the browser.
-
WebSockets reference
-
A reference to the client-side WebSocket API.
-
Writing WebSocket servers (Needs Content)
-
A guide to writing server-side code to handle the WebSocket protocol.
-
- -

View All...

-
- -
-

Tools

- - - - - - -
-
- -

See also

- - - -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Version -76 support {{obsolete_inline}}6{{CompatGeckoDesktop("2.0")}}{{CompatNo}}11.00 (disabled)5.0.1
Protocol version 7 support {{obsolete_inline}}{{CompatNo}}{{CompatGeckoDesktop("6.0")}}
- {{property_prefix("Moz")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
Protocol version 10 support {{obsolete_inline}}14{{CompatGeckoDesktop("7.0")}}
- {{property_prefix("Moz")}}		HTML5 Labs{{CompatUnknown}}{{CompatUnknown}}
Standard - RFC 6455 Support16{{CompatGeckoDesktop("11.0")}}1012.106.0
Usable in Workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("37.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Version -76 support {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocol version 7 support {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocol version 8 support (IETF draft 10) {{obsolete_inline}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Standard - RFC 6455 Support4.4{{CompatGeckoDesktop("11.0")}}{{CompatUnknown}}12.106.0
Usable in Workers{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Gecko notes

- -

WebSockets support in Firefox is continuing to track the evolving WebSocket specification. Firefox 6 implements version 7 of the underlying protocol, while Firefox 7 implements version 8 (as specified by IETF draft 10). Firefox mobile received WebSocket support in Firefox mobile 7.0.

- -

Gecko 6.0

- -

Prior to Gecko 6.0 {{geckoRelease("6.0")}}, there was, incorrectly, a WebSocket object that some sites were thinking implied that WebSocket services were not prefixed; this object has been renamed to MozWebSocket.

- -

Gecko 7.0

- -

Starting in Gecko 7.0 {{geckoRelease("7.0")}}, the network.websocket.max-connections preference is used to determine the maximum number of WebSocket connections that can be open at a time. The default value is 200.

- -

Gecko 8.0

- -

Starting in Gecko 8.0 {{geckoRelease("8.0")}}, the deflate-stream extension to the WebSocket protocol has been disabled, since it's been deprecated from the specification drafts. This resolves incompatibilities with some sites.

- -

Gecko 11.0

- -

Prior to Gecko 11.0, both incoming and outgoing messages were limited to 16 MB in size. They may now be up to 2 GB in size. Note, however, that memory limitations (especially on mobile devices) make that a theoretical maximum, not a practical one. In reality, transfers of that size will fail on devices that don't have enough memory.

- -

Additionally, ArrayBuffer send and receive support for binary data has been implemented.

- -

Starting in Gecko 11.0, the WebSocket API is no longer prefixed.

-- cgit v1.2.3-54-g00ecf