diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
| commit | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch) | |
| tree | d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/bg | |
| parent | 33058f2b292b3a581333bdfb21b8f671898c5060 (diff) | |
| download | translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip | |
initial commit
Diffstat (limited to 'files/bg')
79 files changed, 12100 insertions, 0 deletions
diff --git a/files/bg/_wikihistory.json b/files/bg/_wikihistory.json new file mode 100644 index 0000000000..87d394b691 --- /dev/null +++ b/files/bg/_wikihistory.json @@ -0,0 +1,505 @@ +{ + "Learn": { + "modified": "2020-09-14T03:55:26.353Z", + "contributors": [ + "SphinxKnight", + "po9true", + "svarlamov", + "kberov", + "stoyanster" + ] + }, + "Learn/HTML": { + "modified": "2020-10-05T18:21:48.024Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-10-05T18:21:48.306Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/HTML/Introduction_to_HTML/Getting_started": { + "modified": "2020-10-05T18:21:51.229Z", + "contributors": [ + "kartelov" + ] + }, + "Learn/Да_започнем_с_Мрежата": { + "modified": "2020-07-16T22:33:49.451Z", + "contributors": [ + "kberov", + "mduchev", + "angelinag" + ] + }, + "Learn/Да_започнем_с_Мрежата/Инсталиране_на_основния_софтуер": { + "modified": "2020-07-16T22:34:05.697Z", + "contributors": [ + "kberov", + "mduchev", + "angelinag" + ] + }, + "Learn/Да_започнем_с_Мрежата/Основи_на_HTML": { + "modified": "2020-07-16T22:34:42.357Z", + "contributors": [ + "kberov", + "petya5q" + ] + }, + "MDN": { + "modified": "2020-02-19T19:28:26.629Z", + "contributors": [ + "jswisher", + "SphinxKnight", + "wbamberg" + ] + }, + "MDN/Getting_started": { + "modified": "2019-03-18T21:35:03.859Z", + "contributors": [ + "wbamberg", + "L37sg0" + ] + }, + "Mozilla": { + "modified": "2020-12-03T03:31:35.286Z", + "contributors": [ + "alispivak" + ] + }, + "Web": { + "modified": "2019-03-23T22:13:53.027Z", + "contributors": [ + "kberov", + "yoshipaulbrophy" + ] + }, + "Web/CSS": { + "modified": "2020-06-10T23:08:15.210Z", + "contributors": [ + "tokich6", + "SphinxKnight", + "yisibl" + ] + }, + "Web/CSS/:first-child": { + "modified": "2020-10-15T21:53:39.613Z", + "contributors": [ + "venimus", + "kberov" + ] + }, + "Web/CSS/:nth-child": { + "modified": "2020-10-15T22:04:48.062Z", + "contributors": [ + "mduchev", + "kberov" + ] + }, + "Web/CSS/CSS_Transitions": { + "modified": "2019-03-18T21:34:16.793Z", + "contributors": [ + "petya5q2", + "mfluehr" + ] + }, + "Web/CSS/CSS_Transitions/Using_CSS_transitions": { + "modified": "2019-03-18T21:34:11.983Z", + "contributors": [ + "petya5q2" + ] + }, + "Web/CSS/Pseudo-classes": { + "modified": "2019-03-23T22:05:04.626Z", + "contributors": [ + "mduchev", + "venimus", + "kberov", + "Flinstone87" + ] + }, + "Web/CSS/transition": { + "modified": "2020-10-15T22:05:22.127Z", + "contributors": [ + "petya5q2" + ] + }, + "Web/CSS/transition-delay": { + "modified": "2020-10-15T22:05:19.614Z", + "contributors": [ + "petya5q2" + ] + }, + "Web/Guide": { + "modified": "2019-03-23T22:06:38.930Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/Guide/Графики": { + "modified": "2019-03-23T22:06:42.140Z", + "contributors": [ + "rorinka" + ] + }, + "Web/HTML": { + "modified": "2019-09-10T15:18:10.244Z", + "contributors": [ + "SphinxKnight", + "TTeRzY", + "kberov", + "TornadoIDS" + ] + }, + "Web/HTML/Element": { + "modified": "2019-03-23T22:07:36.627Z", + "contributors": [ + "mduchev", + "kberov", + "petya5q", + "sideshowbarker" + ] + }, + "Web/HTML/Element/i": { + "modified": "2020-10-15T21:56:35.791Z", + "contributors": [ + "mduchev", + "kberov", + "petya5q" + ] + }, + "Web/HTML/Element/main": { + "modified": "2020-10-15T21:58:29.256Z", + "contributors": [ + "petya5q" + ] + }, + "Web/HTTP": { + "modified": "2019-03-23T22:04:48.594Z", + "contributors": [ + "sideshowbarker" + ] + }, + "Web/HTTP/Headers": { + "modified": "2019-03-23T22:04:40.517Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/HTTP/Headers/Last-Modified": { + "modified": "2020-10-15T21:58:03.704Z", + "contributors": [ + "kberov" + ] + }, + "Web/HTTP/Methods": { + "modified": "2020-10-15T21:58:03.098Z", + "contributors": [ + "kberov" + ] + }, + "Web/HTTP/Status": { + "modified": "2019-03-23T22:04:46.089Z", + "contributors": [ + "mgold" + ] + }, + "Web/HTTP/Status/100": { + "modified": "2020-10-15T21:58:10.676Z", + "contributors": [ + "kberov" + ] + }, + "Web/HTTP/Status/101": { + "modified": "2019-03-23T22:04:50.402Z", + "contributors": [ + "kberov" + ] + }, + "Web/HTTP/Status/200": { + "modified": "2020-10-15T21:58:03.825Z", + "contributors": [ + "kberov" + ] + }, + "Web/HTTP/Status/201": { + "modified": "2020-10-15T21:58:15.897Z", + "contributors": [ + "kberov" + ] + }, + "Web/HTTP/Status/404": { + "modified": "2020-10-15T22:04:14.681Z", + "contributors": [ + "mduchev", + "kberov" + ] + }, + "Web/HTTP/Status/405": { + "modified": "2019-03-23T22:01:12.914Z", + "contributors": [ + "mduchev", + "kberov" + ] + }, + "Web/HTTP/Status/417": { + "modified": "2019-03-23T22:04:36.123Z", + "contributors": [ + "kberov" + ] + }, + "Web/JavaScript": { + "modified": "2020-05-15T08:53:58.611Z", + "contributors": [ + "dplamenov", + "SphinxKnight", + "TTeRzY", + "sideshowbarker" + ] + }, + "Web/JavaScript/Guide": { + "modified": "2020-03-12T19:46:58.408Z", + "contributors": [ + "kberov" + ] + }, + "Web/JavaScript/Guide/Text_formatting": { + "modified": "2020-08-25T20:14:34.277Z", + "contributors": [ + "duduindo", + "hanjimj000" + ] + }, + "Web/JavaScript/Inheritance_and_the_prototype_chain": { + "modified": "2020-05-15T08:51:57.487Z", + "contributors": [ + "dplamenov" + ] + }, + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:46:54.060Z", + "contributors": [ + "kberov", + "sideshowbarker" + ] + }, + "Web/JavaScript/Reference/Classes": { + "modified": "2020-10-15T22:13:39.437Z", + "contributors": [ + "neilkakkar" + ] + }, + "Web/JavaScript/Reference/Classes/constructor": { + "modified": "2020-10-15T22:13:36.654Z", + "contributors": [ + "TTeRzY" + ] + }, + "Web/JavaScript/Reference/Classes/extends": { + "modified": "2020-10-15T22:13:34.470Z", + "contributors": [ + "TTeRzY" + ] + }, + "Web/JavaScript/Reference/Classes/static": { + "modified": "2020-10-15T22:13:27.551Z", + "contributors": [ + "TTeRzY" + ] + }, + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:46:54.366Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_type": { + "modified": "2020-03-12T19:46:51.252Z", + "contributors": [ + "stoyanster", + "kberov" + ] + }, + "Web/JavaScript/Reference/Functions": { + "modified": "2020-10-15T22:13:38.758Z", + "contributors": [ + "snek" + ] + }, + "Web/JavaScript/Reference/Functions/Arrow_functions": { + "modified": "2020-10-15T22:13:30.042Z", + "contributors": [ + "gpandurov", + "TTeRzY" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-03-12T19:49:09.760Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2020-12-07T20:30:07.237Z", + "contributors": [ + "peterschussheim" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/splice": { + "modified": "2020-10-15T22:27:43.945Z", + "contributors": [ + "dplamenov", + "kberov" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { + "modified": "2020-10-15T22:28:50.861Z", + "contributors": [ + "kopa4a" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2020-10-15T22:20:34.896Z", + "contributors": [ + "TTeRzY" + ] + }, + "Web/JavaScript/Reference/Operators": { + "modified": "2020-12-06T21:30:56.241Z" + }, + "Web/JavaScript/Reference/Operators/Arithmetic_Operators": { + "modified": "2020-10-15T22:29:49.563Z", + "contributors": [ + "dplamenov" + ] + }, + "Web/JavaScript/Reference/Operators/разпределящ_синтаксис": { + "modified": "2020-10-15T22:23:17.971Z", + "contributors": [ + "kopa4a", + "kberov", + "ksimeonova" + ] + }, + "Web/SVG": { + "modified": "2019-03-18T21:32:18.223Z", + "contributors": [ + "ExE-Boss" + ] + }, + "Web/SVG/Element": { + "modified": "2019-03-18T21:32:19.811Z", + "contributors": [ + "Jeremie" + ] + }, + "Web/SVG/Element/svg": { + "modified": "2020-10-15T22:06:12.436Z", + "contributors": [ + "petya5q2" + ] + }, + "Web/SVG/Ръководство": { + "modified": "2019-03-18T21:32:33.959Z", + "contributors": [ + "petya5q2" + ] + }, + "Речник": { + "modified": "2020-10-07T11:06:15.491Z", + "contributors": [ + "peterbe", + "SphinxKnight", + "wbamberg", + "kberov" + ] + }, + "Речник/404": { + "modified": "2019-03-18T21:35:09.380Z", + "contributors": [ + "kberov", + "venimus" + ] + }, + "Речник/Browser": { + "modified": "2019-03-23T22:04:50.137Z", + "contributors": [ + "kberov", + "stoyanster" + ] + }, + "Речник/CSS": { + "modified": "2019-03-23T22:03:48.968Z", + "contributors": [ + "kberov" + ] + }, + "Речник/ECMA": { + "modified": "2019-03-18T21:15:32.098Z", + "contributors": [ + "kberov" + ] + }, + "Речник/HTML": { + "modified": "2019-03-23T22:13:43.475Z", + "contributors": [ + "kberov", + "stoyanster" + ] + }, + "Речник/HTTP": { + "modified": "2019-03-23T22:04:23.041Z", + "contributors": [ + "kberov" + ] + }, + "Речник/Hypertext": { + "modified": "2019-03-23T22:04:02.582Z", + "contributors": [ + "kberov" + ] + }, + "Речник/Internet": { + "modified": "2019-03-23T22:03:43.619Z", + "contributors": [ + "kberov" + ] + }, + "Речник/JSON": { + "modified": "2019-03-23T22:04:00.137Z", + "contributors": [ + "kberov", + "tatarski" + ] + }, + "Речник/JavaScript": { + "modified": "2019-03-23T22:04:32.960Z", + "contributors": [ + "_serendipity_", + "kberov" + ] + }, + "Речник/Server": { + "modified": "2019-03-23T22:04:25.240Z", + "contributors": [ + "kberov" + ] + }, + "Речник/World_Wide_Web": { + "modified": "2019-03-23T22:04:45.195Z", + "contributors": [ + "kberov", + "dafo" + ] + }, + "Речник/array": { + "modified": "2019-03-23T22:04:38.875Z", + "contributors": [ + "kberov" + ] + } +}
\ No newline at end of file diff --git a/files/bg/learn/html/index.html b/files/bg/learn/html/index.html new file mode 100644 index 0000000000..46508b0e52 --- /dev/null +++ b/files/bg/learn/html/index.html @@ -0,0 +1,67 @@ +--- +title: Structuring the web with HTML +slug: Learn/HTML +tags: + - Beginner + - Guide + - HTML + - Intro + - Learn + - NeedsTranslation + - Topic + - TopicStub +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.</p> + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> + +<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Prerequisites">Prerequisites</h2> + +<ul> +</ul> + +<p>Before starting this topic, you should have at least basic familiarity with using computers and using the web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>before attempting this topic, however, it isn't absolutely necessary; much of what is covered in the <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> article is also covered in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, albeit in a lot more detail.</p> + +<p>After learning HTML, you can then move on to learning about more advanced topics such as:</p> + +<ul> + <li><a href="/en-US/docs/Learn/CSS">CSS</a>, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)</li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)</li> +</ul> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> + <dd>This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> + <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML tables</a></dt> + <dd>Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd> +</dl> + +<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2> + +<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms">Web forms</a></dt> + <dd>This module provides a series of articles that will help you master the essentials of web forms. Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface. However, for historical and technical reasons it's not always obvious how to use them to their full potential. We'll cover all the essential aspects of Web forms including marking up their HTML structure, styling form controls, validating form data, and submitting data to the server.</dd> + <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a></dt> + <dd>The main entry point for HTML reference documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd> +</dl> diff --git a/files/bg/learn/html/introduction_to_html/getting_started/index.html b/files/bg/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..14908d59fb --- /dev/null +++ b/files/bg/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,761 @@ +--- +title: Започнете с HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Тук ще разгледаме основите на HTML. За начало, тази статия дефинира понятията елемент, атрибути и всички други важни термини, които може да сте чували. Също така обясняваме къде те се вписват в HTML. Ще научите как са струкрурирани HTML елементите, как се изгражда типична HTML страница и други важни езикови характеристики. По пътя ще има възможност и да експериментирате като си поиграете с HTML!</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Необходимо:</th> + <td>Основни познания за работа с компютъра, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">инсталация на основния софтуер</a>, основни познания за <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">работа с файлове</a>.</td> + </tr> + <tr> + <th scope="row">Цел:</th> + <td>Да придобием основни познания по HTML, и опит с напипсване на няколко HTML елемента.</td> + </tr> + </tbody> +</table> + +<h2 id="Какво_е_HTML">Какво е HTML?</h2> + +<p>{{glossary("HTML")}} (Hypertext Markup Language) не е програмен език. По-скоро това е език за <em>маркиране, </em>който казва на web браузърите как да структурират страниците, които посещавате. Може да бъде толкова сложно или опростено, както желае web разработчика. HTML се състои от последователност от {{glossary("Element", "elements")}}, които използвате за да обхванете, обвиете или маркирате различни части от съдържанието, за да го накарате да се появява или да се държи по определен начин. Обхващащите тагове {{glossary("Tag", "tags")}} правят съдържанието в хипервръзката да сочи към друга страница, да направи буквите <em>наклонени</em>, и т.н. За пример следния ред с текст:</p> + +<pre class="notranslate">My cat is very grumpy</pre> + +<p>Ако искаме да направим този текст самостоятелен като параграф, може да посочим, че това е параграф като го обхванем с ({{htmlelement("p")}}) елемент за параграф:</p> + +<pre class="brush: html notranslate"><p>My cat is very grumpy</p></pre> + +<div class="note"> +<p><strong>!</strong>: Таговете в HTML не са чувствителни за големина на буквите. Това означава, че могат да бъдат писани с малки и големи букви. Нарп. тага за заглавие {{htmlelement("title")}} може да бъде написан така: <code><title></code>, <code><TITLE></code>, <code><Title></code>, <code><TiTlE></code>, и т.н. и ще работи. Възприето е обаче, таговете да се пишат с малки букви, за цялост, лесно четене на кода и по други причини.</p> +</div> + +<h2 id="Анатомия_на_HTML_елемента">Анатомия на HTML елемента</h2> + +<p>Да разгледаме нашия елемент параграф от предния пример:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>Анатомията на елемента е:</p> + +<ul> + <li><strong>The opening tag:</strong> Състои се от името на елемента ( в случая<em> p</em> съкратено от paragraph), заградено в отваряща и затваряща триъгълни скоби. Отварящият таг посочва къде елемента започва или е начало на действието му. В примера предшества началото на параграфен текст.</li> + <li><strong>The content:</strong> Това е съдържанието на елемента. В примера е параграфният текст.</li> + <li><strong>The closing tag:</strong> Подобно на отварящият таг, с разликата, че включва наклонена черта преди името. Посочва къде елемента свършва. Пропускането на затварящият таг е типична грешка, която може да води до особени резултати.</li> +</ul> + +<p>Елемента е отварящият таг, следван от съдържанието, следван от затварящият таг.</p> + +<h3 id="Активност_създаване_на_вашият_първи_HTML_елемент">Активност: създаване на вашият първи HTML елемент</h3> + +<p>Edit the line below in the <em>Input</em> area by wrapping it with the tags <code><em></code> and <code></em>.</code> To <em>open the element</em>, put the opening tag <code><em></code> at the start of the line. To <em>close the element</em>, put the closing tag <code></em></code> at the end of the line. Doing this should give the line italic text formatting! See your changes update live in the <em>Output</em> area.</p> + +<p>If you make a mistake, you can clear your work using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> + This is my text. +</textarea> + +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<em>This is my text.</em>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Nesting_elements">Nesting elements</h3> + +<p>Elements can be placed within other elements. This is called <em>nesting</em>. If we wanted to state that our cat is <strong>very</strong> grumpy, we could wrap the word <em>very</em> in a {{htmlelement("strong")}} element, which means that the word is to have strong(er) text formatting:</p> + +<pre class="brush: html notranslate"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p>There is a right and wrong way to do nesting. In the example above, we opened the <code>p</code> element first, then opened the <code>strong</code> element. For proper nesting, we should close the <code>strong</code> element first, before closing the <code>p</code>.</p> + +<p>The following is an example of the <em>wrong</em> way to do nesting:</p> + +<pre class="example-bad brush: html notranslate"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>The <strong>tags have to open and close in a way that they are inside or outside one another</strong>. With the kind of overlap in the example above, the browser has to guess at your intent. This kind of guessing can result in unexpected results.</p> + +<h3 id="Block_versus_inline_elements">Block versus inline elements</h3> + +<p>There are two important categories of elements to know in HTML: block-level elements and inline elements.</p> + +<ul> + <li>Block-level elements form a visible block on a page. A block-level element appears on a new line following the content that precedes it. Any content that follows a block-level element also appears on a new line. Block-level elements are usually structural elements on the page. For example, a block-level element might represent headings, paragraphs, lists, navigation menus, or footers. A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.</li> + <li>Inline elements are contained within block-level elements, and surround only small parts of the document’s content. (not entire paragraphs or groupings of content) An inline element will not cause a new line to appear in the document. It is typically used with text. For example, as an {{htmlelement("a")}} element (hyperlink) or emphasis elements such as {{htmlelement("em")}} or {{htmlelement("strong")}}.</li> +</ul> + +<p>Consider the following example:</p> + +<pre class="brush: html notranslate"><em>first</em><em>second</em><em>third</em> + +<p>fourth</p><p>fifth</p><p>sixth</p> +</pre> + +<p>{{htmlelement("em")}} is an inline element. As you see below, the first three elements sit on the same line, with no space in between. On the other hand, {{htmlelement("p")}} is a block-level element. Each <em>p</em> element appears on a new line, with space above and below. (The spacing is due to default <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a> that the browser applies to paragraphs.)</p> + +<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p> + +<div class="note"> +<p><strong>Note</strong>: HTML5 redefined the element categories: see <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">Element content categories</a>. While these definitions are more accurate and less ambiguous than their predecessors, the new definitions are a lot more complicated to understand than <em>block</em> and <em>inline. </em>This article will stay with these two terms.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: The terms <em>block</em> and <em>inline</em>, as used in this article, should not be confused with <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">the types of CSS boxes</a> that have the same names. While the names correlate by default, changing the CSS display type doesn't change the category of the element, and doesn't affect which elements it can contain and which elements it can be contained in. One reason HTML5 dropped these terms was to prevent this rather common confusion.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Find useful reference pages that include lists of block and inline elements. See <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> and <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p> +</div> + +<h3 id="Empty_elements">Empty elements</h3> + +<p>Not all elements follow the pattern of an opening tag, content, and a closing tag. Some elements consist of a single tag, which is typically used to insert/embed something in the document. For example, the {{htmlelement("img")}} element embeds an image file onto a page:</p> + +<pre class="brush: html notranslate"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>This would output the following:</p> + +<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Note</strong>: Empty elements are sometimes called <em>void elements</em>.</p> +</div> + +<h2 id="Attributes">Attributes</h2> + +<p>Elements can also have attributes. Attributes look like this:</p> + +<p><img alt='&amp;amp;amp;amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;amp;amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Attributes contain extra information about the element that won't appear in the content. In this example, the <strong><code>class</code></strong> attribute is an identifying name used to target the element with style information.</p> + +<p>An attribute should have:</p> + +<ul> + <li>A space between it and the element name. (For an element with more than one attribute, the attributes should be separated by spaces too.)</li> + <li>The attribute name, followed by an equal sign.</li> + <li>An attribute value, wrapped with opening and closing quote marks.</li> +</ul> + +<h3 id="Active_learning_Adding_attributes_to_an_element">Active learning: Adding attributes to an element</h3> + +<p>Another example of an element is {{htmlelement("a")}}. This stands for <em>anchor</em>. An anchor can make the text it encloses into a hyperlink. Anchors can take a number of attributes, but several are as follows:</p> + +<ul> + <li><strong><code>href</code></strong>: This attribute's value specifies the web address for the link. For example: <code>href="https://www.mozilla.org/"</code>.</li> + <li><strong><code>title</code></strong>: The <code>title</code> attribute specifies extra information about the link, such as a description of the page that is being linked to. For example, <code>title="The Mozilla homepage"</code>. This appears as a tooltip when a cursor hovers over the element.</li> + <li><strong><code>target</code></strong>: The <code>target</code> attribute specifies the browsing context used to display the link. For example, <code>target="_blank"</code> will display the link in a new tab. If you want to display the linked content in the current tab, just omit this attribute.</li> +</ul> + +<p>Edit the line below in the <em>Input</em> area to turn it into a link to your favorite website.</p> + +<ol> + <li>Add the <code><a></code> element.</li> + <li>Add the <code>href</code> attribute and the <code>title</code> attribute.</li> + <li>Specify the <code>target</code> attribute to open the link in the new tab.</li> +</ol> + +<p>You'll be able to see your changes update live in the <em>Output</em> area. You should see a link—that when hovered over—displays the value of the <code>title</code> attribute, and when clicked, navigates to the web address in the <code>href</code> attribute. Remember that you need to include a space between the element name, and between each attribute.</p> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;A link to my favorite website.&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favorite website</a>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Boolean_attributes">Boolean attributes</h3> + +<p>Sometimes you will see attributes written without values. This is entirely acceptable. These are called Boolean attributes. Boolean attributes can only have one value, which is generally the same as the attribute name. For example, consider the {{htmlattrxref("disabled", "input")}} attribute, which you can assign to form input elements. (You use this to <em>disable</em> the form input elements so the user can't make entries. The disabled elements typically have a grayed-out appearance.) For example:</p> + +<pre class="notranslate"><input type="text" disabled="disabled"></pre> + +<p>As shorthand, it is acceptable to write this as follows:</p> + +<pre class="brush: html notranslate"><!-- using the disabled attribute prevents the end user from entering text into the input box --> +<input type="text" disabled> + +<!-- text input is allowed, as it doesn't contain the disabled attribute --> +<input type="text"> +</pre> + +<p>For reference, the example above also includes a non-disabled form input element.The HTML from the example above produces this result:</p> + +<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Omitting_quotes_around_attribute_values">Omitting quotes around attribute values</h3> + +<p>If you look at code for a lot of other sites, you might come across a number of strange markup styles, including attribute values without quotes. This is permitted in certain circumstances, but it can also break your markup in other circumstances. For example, if we revisit our link example from earlier, we could write a basic version with <em>only</em> the <code>href</code> attribute, like this:</p> + +<pre class="brush: html notranslate"><a href=https://www.mozilla.org/>favorite website</a></pre> + +<p>However, as soon as we add the <code>title</code> attribute in this way, there are problems:</p> + +<pre class="example-bad brush: html notranslate"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></pre> + +<p>As written above, the browser misinterprets the markup, mistaking the <code>title</code> attribute for three attributes: a title attribute with the value <em>The</em>, and two Boolean attributes, <code>Mozilla</code> and <code>homepage</code>. Obviously, this is not intended! It will cause errors or unexpected behavior, as you can see in the live example below. Try hovering over the link to view the title text!</p> + +<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Always include the attribute quotes. It avoids such problems, and results in more readable code.</p> + +<h3 id="Single_or_double_quotes">Single or double quotes?</h3> + +<p>In this article you will also notice that the attributes are wrapped in double quotes. However, you might see single quotes in some HTML code. This is a matter of style. You can feel free to choose which one you prefer. Both of these lines are equivalent:</p> + +<pre class="brush: html notranslate"><a href="http://www.example.com">A link to my example.</a> + +<a href='http://www.example.com'>A link to my example.</a></pre> + +<p>Make sure you don't mix single quotes and double quotes. This example (below) shows a kind of mixing quotes that will go wrong:</p> + +<pre class="example-bad brush: html notranslate"><a href="http://www.example.com'>A link to my example.</a></pre> + +<p>However, if you use one type of quote, you can include the other type of quote <em>inside</em> your attribute values:</p> + +<pre class="brush: html notranslate"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> + +<p>To use quote marks inside other quote marks of the same type (single quote or double quote), use <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML">HTML entities</a>. For example, this will break:</p> + +<pre class="example-bad brush: html notranslate"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a></pre> + +<p>Instead, you need to do this:</p> + +<pre class="brush: html notranslate"><a href='http://www.example.com' title='Isn&apos;t this fun?'>A link to my example.</a></pre> + +<h2 id="Anatomy_of_an_HTML_document">Anatomy of an HTML document</h2> + +<p>Individual HTML elements aren't very useful on their own. Next, let's examine how individual elements combine to form an entire HTML page:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>Here we have:</p> + +<ol> + <li><code><!DOCTYPE html></code>: The doctype. When HTML was young (1991-1992), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML. Doctypes used to look something like this: + + <pre class="notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> + More recently, the doctype is a historical artifact that needs to be included for everything else to work right. <code><!DOCTYPE html></code> is the shortest string of characters that counts as a valid doctype. That is all you need to know!</li> + <li><code><html></html></code>: The {{htmlelement("html")}} element. This element wraps all the content on the page. It is sometimes known as the root element.</li> + <li><code><head></head></code>: The {{htmlelement("head")}} element. This element acts as a container for everything you want to include on the HTML page, <strong>that isn't the content</strong> the page will show to viewers. This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more. You'll learn more about this in the next article of the series.</li> + <li><code><meta charset="utf-8"></code>: This element specifies the character set for your document to UTF-8, which includes most characters from the vast majority of human written languages. With this setting, the page can now handle any textual content it might contain. There is no reason not to set this, and it can help avoid some problems later.</li> + <li><code><title></title></code>: The {{htmlelement("title")}} element. This sets the title of the page, which is the title that appears in the browser tab the page is loaded in. The page title is also used to describe the page when it is bookmarked.</li> + <li><code><body></body></code>: The {{htmlelement("body")}} element. This contains <em>all</em> the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.</li> +</ol> + +<h3 id="Active_learning_Adding_some_features_to_an_HTML_document">Active learning: Adding some features to an HTML document</h3> + +<p>If you want to experiment with writing some HTML on your local computer, you can:</p> + +<ol> + <li>Copy the HTML page example listed above.</li> + <li>Create a new file in your text editor.</li> + <li>Paste the code into the new text file.</li> + <li>Save the file as <code>index.html</code>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You can also find this basic HTML template on the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> +</div> + +<p>You can now open this file in a web browser to see what the rendered code looks like. Edit the code and refresh the browser to see what the result is. Initially the page looks like this:</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">In this exercise, you can edit the code locally on your computer, as described previously, or you can edit it in the sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case). Sharpen your skills by implementing the following tasks:</p> + +<ul> + <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code><h1></code> opening tag and <code></h1></code> closing tag.</li> + <li>Edit the paragraph content to include text about a topic that you find interesting.</li> + <li>Make important words stand out in bold by wrapping them inside a <code><strong></code> opening tag and <code></strong></code> closing tag.</li> + <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li> + <li>Add an image to your document. Place it below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. Earn bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web).</li> +</ul> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code3">Playable code3</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;This is my page&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h1 { + color: blue; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +img { + max-width: 100%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Some music</h1><p>I really enjoy <strong>playing the drums</strong>. One of my favorite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Whitespace_in_HTML">Whitespace in HTML</h3> + +<p>In the examples above, you may have noticed that a lot of whitespace is included in the code. This is optional. These two code snippets are equivalent:</p> + +<pre class="brush: html notranslate"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<p>No matter how much whitespace you use inside HTML element content (which can include one or more space character, but also line breaks), the HTML parser reduces each sequence of whitespace to a single space when rendering the code. So why use so much whitespace? The answer is readability.<br> + <br> + It can be easier to understand what is going on in your code if you have it nicely formatted. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you to choose the style of formatting (how many spaces for each level of indentation, for example), but you should consider formatting it.</p> + +<h2 id="Entity_references_Including_special_characters_in_HTML">Entity references: Including special characters in HTML</h2> + +<p>In HTML, the characters <code><</code>, <code>></code>,<code>"</code>,<code>'</code> and <code>&</code> are special characters. They are parts of the HTML syntax itself. So how do you include one of these special characters in your text? For example, if you want to use an ampersand or less-than sign, and not have it interpreted as code.</p> + +<p>You do this with character references. These are special codes that represent characters, to be used in these exact circumstances. Each character reference starts with an ampersand (&), and ends with a semicolon (;).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Literal character</th> + <th scope="col">Character reference equivalent</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>The character reference equivalent could be easily remembered because the text it uses can be seen as less than for '&lt;' , quotation for ' &quot; ' and similarly for others. To find more about entity reference, see <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a> (Wikipedia).<br> + <br> + In the example below, there are two paragraphs:</p> + +<pre class="brush: html notranslate"><p>In HTML, you define a paragraph using the <p> element.</p> + +<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> + +<p>In the live output below, you can see that the first paragraph has gone wrong. The browser interprets the second instance of <code><p></code> as starting a new paragraph. The second paragraph looks fine because it has angle brackets with character references.</p> + +<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Note</strong>: You don't need to use entity references for any other symbols, as modern browsers will handle the actual symbols just fine as long, as your HTML's <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Specifying_your_document's_character_encoding">character encoding is set to UTF-8</a>.</p> +</div> + +<h2 id="HTML_comments">HTML comments</h2> + +<p>HTML has a mechanism to write comments in the code. Browsers ignore comments, effectively making comments invisible to the user. The purpose of comments is to allow you to include notes in the code to explain your logic or coding. This is very useful if you return to a code base after being away for long enough that you don't completely remember it. Likewise, comments are invaluable as different people are making changes and updates.</p> + +<p>To write an HTML comment, wrap it in the special markers <code><!--</code> and <code>--></code>. For example:</p> + +<pre class="brush: html notranslate"><p>I'm not inside a comment</p> + +<!-- <p>I am!</p> --></pre> + +<p>As you can see below, only the first paragraph displays in the live output.</p> + +<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Summary">Summary</h2> + +<p>You made it to the end of the article! We hope you enjoyed your tour of the basics of HTML.<br> + <br> + At this point, you should understand what HTML looks like, and how it works at a basic level. You should also be able to write a few elements and attributes. The subsequent articles of this module go further on some of the topics introduced here, as well as presenting other concepts of the language.</p> + +<div class="note"> +<p><strong>Note</strong>: As you start to learn more about HTML, consider learning the basics of Cascading Style Sheets, or <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS is the language used to style web pages. (for example, changing fonts or colors, or altering the page layout) HTML and CSS work well together, as you will soon discover.</p> +</div> + +<h2 id="Вижте_още">Вижте още</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> +</ul> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<div></div> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/bg/learn/html/introduction_to_html/index.html b/files/bg/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..1b35c86467 --- /dev/null +++ b/files/bg/learn/html/introduction_to_html/index.html @@ -0,0 +1,81 @@ +--- +title: Introduction to HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - CodingScripting + - HTML + - Introduction to HTML + - Landing + - Links + - NeedsTranslation + - Structure + - Text + - TopicStub + - head + - semantics +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">At its heart, {{glossary("HTML")}} is a fairly simple language made up of {{Glossary("Element","elements")}}, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.</p> + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> + +<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>), and understand how to create and manage files (as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>). Both are parts of our <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other devices that doesn't let you create your own files, you can try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which will take you through all the basic theory of HTML and provide ample opportunity for you to test out some skills.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></dt> + <dd>Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we'll play with some HTML to get you interested!</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></dt> + <dd>The {{Glossary("Head","head")}} of an HTML document is the part that <strong>is not</strong> displayed in the web browser when the page is loaded. It contains information such as the page {{htmlelement("title")}}, links to {{glossary("CSS")}} (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document).</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></dt> + <dd>One of HTML's main jobs is to give text meaning (also known as {{Glossary("Semantics","semantics")}}), so that the browser knows how to display it correctly. This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></dt> + <dd>Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link and discusses best practices for links.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></dt> + <dd>There are many other elements in HTML for formatting text that we didn't get to in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> article. The elements here are less well-known, but still useful to know about. In this article, you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></dt> + <dd>As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header," "the navigation menu," or "the main content column.") This article looks into how to plan a basic website structure and how to write the HTML to represent this structure.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></dt> + <dd>Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessments will test your understanding of the HTML basics covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></dt> + <dd>We all learn to write a letter sooner or later; it is also a useful example to test out text formatting skills. In this assessment, you'll be given a letter to mark up.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></dt> + <dd>This assessment tests your ability to use HTML to structure a simple page of content, containing a header, a footer, a navigation menu, main content, and a sidebar.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt> + <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to HTML</em> module. Learners get familiar with reading, writing, and participating on the web in this six-part module. Discover the foundations of the web through production and collaboration.</dd> +</dl> + +<div class="note"> +<h2 id="Feedback">Feedback</h2> + +<p>Help us improve our guides and tutorials like this one by taking <a href="https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey">our survey here</a>.</p> +</div> diff --git a/files/bg/learn/index.html b/files/bg/learn/index.html new file mode 100644 index 0000000000..699bdabe1b --- /dev/null +++ b/files/bg/learn/index.html @@ -0,0 +1,96 @@ +--- +title: Научете се да програмирате за уеб +slug: Learn +tags: + - Обучение + - мрежа + - начална страница + - начинаещ + - ръководство + - уеб + - указател +translation_of: Learn +--- +<div>{{LearnSidebar}}</div> + +<div> +<p class="summary">Добре дошли на страниците за самообучение в MDN. Този набор от статии предоставя всичко необходимо на начинаещите уеб-разработчици, за да могат да правят прости сайтове.</p> +</div> + +<p>Целта на тази част от Мрежата за разработчици на Мозила (МРМ) е не да ви превърне от „начинаещи“ в „експерти“, а да ви даде увереност, така че да се чувствате удобно. Оттук насетне ще можете да намерите пътя докато се учите <a href="https://developer.mozilla.org/bg/">от МРМ</a> и от други източници за средно напреднали и напреднали. Те предполагат много повече предварително усвоени знания.</p> + +<p>Ако сте напълно начинаещи, програмирането за уеб може да ви се стори като предизвикателство, но не се бойте. Ние ще ви водим за ръчичка и ще обясняваме в подробности, така че да научите нещата както трябва. Чувствайте се като у дома си. Няма значение дали сте студент, изучаващ програмиране за уеб (самостоятелно или заедно с други); учител, търсещ учебни материали; любител или просто някой, който се опитва да разбере как работят уеб-технологиите.</p> + +<div class="warning"> +<p><strong>Важно</strong>: Съдържанието в областта за обучение се обновява редовно. Ако имате въпроси по теми, които бихте искали да бъдат засегнати или ви се струва, че липсват, вижте раздела {{anch("Връзка с нас")}} долу и се свържете с нас.</p> +</div> + +<h2 id="Откъде_да_започнете">Откъде да започнете</h2> + +<ul class="card-grid"> + <li><span>Напълно начинаещ:</span> Ако сте съвсем начинаещ в уеб-разработката, ви препоръчваме да започнете с модула "<a href="/bg/docs/Learn/Да_започнем_с_мрежата">Да започнем с мрежата</a>". Той предоставя практично въведение в програмирането за уеб.</li> + <li><span>Отделни въпроси:</span> Ако имате въпрос относно разработването на сайтове и приложения, отделът <a href="/bg/docs/Learn/Общи_въпроси">Общи въпроси</a> може би ще ви помогне.</li> + <li><span>Отвъд началото:</span> Ако вече имате някакви знания, следващата стъпка е да изучите {{glossary("HTML")}} и {{glossary("CSS")}} в подробности. Започнете с <a href="/bg/docs/Learn/HTML/Introduction_to_HTML">Увод в HTML</a> и след това продължете с <a href="/bg/docs/Learn/CSS/Introduction_to_CSS">Увод в CSS</a>.</li> + <li><span>Преход към програмиране:</span> Ако вече сте запознати с HTML и CSS или се интересувате предимно от програмиране, ще искате да отидете на {{glossary("JavaScript")}} или програмиране от страната на сървъра. Започнете с модулите <a href="/bg/docs/Learn/JavaScript/First_steps">Първи стъпки с JavaScript</a> и <a href="/bg/docs/Learn/Server-side/First_steps">Първи стъпки от страната на сървъра</a>.</li> +</ul> + +<div class="note"> +<p><strong>Забележка</strong>: В нашия <a href="/bg/docs/Речник">Речник</a> ще намерите определения на понятията.</p> +</div> + +<p>{{LearnBox({"title":"Случайно понятие от речника"})}}</p> + +<h2 id="Получаване_на_изходния_код_на_примерите">Получаване на изходния код на примерите</h2> + +<p>Всички примери от Страниците за Самообучение ще намерите <a href="https://github.com/mdn/learning-area/">в GitHub</a>. Ако искате да ги свалиете на вашия компютър, най-добре направете следното:</p> + +<ol> + <li><a href="http://git-scm.com/downloads">Инсталирайте Git</a> на компютъра си. Това е системата за контрол на версиите, с която работи GitHub.</li> + <li><a href="https://github.com/join">Създайте си сметка в GitHub</a>. Това е просто и лесно.</li> + <li>След регистрацията влезте в <a href="https://github.com">github.com</a> като използвате потребителските си име и парола.</li> + <li>Отворете <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">командния ред</a> (Windows) или терминал (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">MacOSX</a>)</li> + <li>За да копирате хранилището с примери в папка с име learning-area в папката, в която се намирате, в терминала изпълнете следната команда: + <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre> + </li> + <li>Сега влезте в директорията с помощта на файловия браузър или с командата <a href="http://www.linux-bg.org/cgi-bin/y/index.pl?page=article&id=advices&key=316697829">cd</a>.</li> +</ol> + +<p>Можете да обновите местното хранилище <code>learning-area</code> с новите промени, направени в клона master в GitHub, като следвате стъпките:</p> + +<ol> + <li>Ако се намирате в родителската папка, отидете в <code>learning-area</code> като използвате командата <code>cd</code>: + + <pre class="brush: bash notranslate">cd learning-area</pre> + </li> + <li>Обновете хранилището чрез следната команда: + <pre class="brush: bash notranslate">git pull</pre> + </li> +</ol> + +<p>Повече за Гит можете да научите от <a href="http://i-can.eu/progit2-bg/progit.html">книгата ProGit</a>.</p> + +<h2 id="Връзка_с_нас">Връзка с нас</h2> + +<p>Ако искате да се свържете с нас за каквото и да е, най-добре ни пишете в <a href="/bg/docs/MDN/Community/MDN_Разговори">пощенскиите списъци</a> или в <a href="/bg/docs/MDN/Community/MDN_Разговори#Разговори_в_IRC">IRC-каналите</a>. Съобщавайте ни за всичко, което смятате, че не е в ред или липсва в сайта. Давайте заявки за нови теми за обучение, за помощ за неразбираеми понятия и каквото ви хрумне.</p> + +<p>Ако искате да помогнете с развоя или подобряването на съдържанието, прочетете <a href="/en-US/Learn/How_to_contribute">как можете да помогнете</a> и ни пишете! Ще се радваме да го обсъдим, независимо дали се обучавате, дали сте учител, опитен уеб-програмист или просто желаете да помогнете с подобрения.</p> + +<h2 id="Вижте_също">Вижте също</h2> + +<dl> + <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> + <dd>Чудесен интерактивен сайт за изучаване на езици за програмиране от самото начало.</dd> + <dt><a href="https://code.org/">Code.org</a></dt> + <dd>Основи на програмирането – теория и практика. Предназначен предимно за деца и напълно начинаещи.</dd> + <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt> + <dd>Безплатни и отворени курсове за придобиване на технологични умения, с менторство и базирано на проекти обучение</dd> + <dt><a href="https://www.freecodecamp.com/">FreeCodeCamp.com</a></dt> + <dd>Интерактивен сайт с уроци и проекти за изучаване на уеб програмиране.</dd> +</dl> + +<dl> + <dt><a href="https://learning.mozilla.org/web-literacy/">Web Literacy Map</a></dt> + <dd>Пътеводител в разбирането за световната мрежа и уменията необходими в 21ви век, даващ възможност и за преподаване организирано в различни области.</dd> + <dt><a href="https://learning.mozilla.org/activities">Преподавателски дейности</a></dt> + <dd>Поредица от дейности по преподаване (и обучение), създадени от Фондация Мозила. Покрива всичко от основни понятия и грамотност за мрежата и сигурността до JavaScript и писане за Minecraft.</dd> +</dl> diff --git a/files/bg/learn/да_започнем_с_мрежата/index.html b/files/bg/learn/да_започнем_с_мрежата/index.html new file mode 100644 index 0000000000..874790d34b --- /dev/null +++ b/files/bg/learn/да_започнем_с_мрежата/index.html @@ -0,0 +1,56 @@ +--- +title: Да започнем с мрежата +slug: Learn/Да_започнем_с_Мрежата +tags: + - CSS + - HTML + - Дизайн + - Показалец + - начинаещ + - ръководство + - теория +translation_of: Learn/Getting_started_with_the_web +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p><em>"Да започнем с мрежата"</em> е кратка поредица от статии, която ще ви въведе в разработването на уеб-страници. Ще инсталирате и настроите необходимите ви инструменти за изграждането на една страница и публикуването на програмния код.</p> +</div> + +<h2 id="Първият_ви_сайт">Първият ви сайт</h2> + +<p>За да се направи професионален сайт е нужна много работа. Затова, ако тепърва се запознавате с програмирането за уеб, ви съветваме да започнете с нещо малко. Няма да измислите Facebook, но пък не е толкова трудно да направите ваш собствен простичък сайт. Ще започнем с това.</p> + +<p>Като следвате съветите в следващите статии подред, ще направите първата си страница. Да започваме!</p> + +<h3 id="Инсталиране_на_основния_софтуер"><a href="/bg/Learn/Да_започнем_с_Мрежата/Инсталиране_на_основния_софтуер">Инсталиране на основния софтуер</a></h3> + +<p>Има голям избор от средства за изграждане на уебсайтове. Ако сте начинаещ, лесно ще се объркате от разнообразието на текстови редактори, работни рамки (набори от библиотеки) и средства за тестване. В статията <a href="/bg/docs/Learn/Да_започнем_с_Мрежата/Инсталиране_на_основния_софтуер">„Инсталиране на основния софтуер"</a> сме изредили основните средства, необходими при разработването на софтуер, работещ в световната мрежа.</p> + +<h3 id="Как_ще_изглежда_Вашият_сайт"><a href="/bg/docs/Learn/Да_започнем_с_Мрежата/Как_ще_изглежда_новият_ви_сайт">Как ще изглежда Вашият сайт?</a></h3> + +<p>Преди да започнете да пишете кода за сайта, трябва да си съставите план. Какво представяте? Какви цветове и шрифтове използвате. <a href="/bg/docs/Learn/Да_започнем_с_Мрежата/Как_ще_изглежда_новият_ви_сайт">Как ще изглежда сайтът?</a> Следвайте простите препоръки, за да планирате съдържанието и дизайна на сайта.</p> + +<h3 id="Работа_с_файлове"><a href="/bg/Learn/Да_започнем_с_Мрежата/Работа_с_файлове">Работа с файлове</a></h3> + +<p>Един уебсайт се състои от много файлове: текстово съдържание, код, набори от стилове, медийно съдържание и т.н. Когато правите уебсайт, трябва да съчетаете тези файлове и да изградите от тях структура, чрез която те да могат да комуникират помежду си. Статията за <a href="/bg/Learn/Да_започнем_с_Мрежата/Работа_с_файлове">работа с файлове</a> обяснява как да създадем такава структура и за кое да внимаваме при изграждането ѝ.</p> + +<h3 id="Основи_на_HTML"><a href="/bg/docs/Learn/Да_започнем_с_Мрежата/Основи_на_HTML">Основи на HTML</a></h3> + +<p>HTML (в превод „<em>език за обозначаване на свръх-текст</em>“) е този код, който се използва за структуриране на съдържанието, например да се създаде набор от параграфи, списък с точки, да се вмъкнат изображения или таблици с данни. Оттук можете лесно да се сдобиете с достатъчно сведения, за да се запознаете накратко с HTML: <a href="/bg/docs/Learn/Да_започнем_с_Мрежата/Основи_на_HTML">Основи на HTML</a>.</p> + +<h3 id="Основи_на_CSS"><a href="/bg/docs/Learn/Да_започнем_с_Мрежата/Основи_на_CSS">Основи на CSS</a></h3> + +<p>CSS („<em>набори от стилове"</em>) е кодът, който променя външния вид на сайта. Със CSS можете например да зададете цвят на даден текст. Друг пример е това къде на екрана да се показва определено съдържание или какви фонови изображения да бъдат зареждани в уебсайта. За да научите повече, вижте статията <a href="/bg/docs/Learn/Да_започнем_с_Мрежата/Основи_на_CSS">основи на CSS</a>.</p> + +<h3 id="Основи_на_JavaScript"><a href="/bg/docs/Learn/Да_започнем_с_Мрежата/Основи_на_JavaScript">Основи на JavaScript</a></h3> + +<p>JavaScript е програмният език, който дава възможност да добавите интерактивност в уебсайта ви, например игри, действия, случващи се когато се натисне бутон, или се въведе информация в дадено поле, динамично зададен CSS, и още доста. <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">Основи на JavaScript</a> ще ви даде идея какво може да правите с този език и как да започнете с писането му.</p> + +<h3 id="Публикуване_на_Вашия_сайт"><a href="/bg/docs/Learn/Да_започнем_с_Мрежата/Publishing_your_website">Публикуване на Вашия сайт</a></h3> + +<p>След като приключите с писането на код и организирането на файловата ви система, трябва да качите всичко това в Интернет, за да може другите хора също да го намират. За да си изясните как бързо и лесно да постигнете това, вижте нашата статия <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Публикуване на вашия примерен код</a>.</p> + +<h3 id="Как_работи_световната_мрежа"><a href="/bg/docs/Learn/Да_започнем_с_Мрежата/Как_работи_световната_мрежа">Как работи световната мрежа</a></h3> + +<p>Когато посетите любимия си сайт, без дори да подозирате, се случват много неща. „<a href="/bg/docs/Learn/Да_започнем_с_Мрежата/Как_работи_световната_мрежа">Как работи световната мрежа?</a>" обяснява най-главните.</p> diff --git a/files/bg/learn/да_започнем_с_мрежата/инсталиране_на_основния_софтуер/index.html b/files/bg/learn/да_започнем_с_мрежата/инсталиране_на_основния_софтуер/index.html new file mode 100644 index 0000000000..fa82c84655 --- /dev/null +++ b/files/bg/learn/да_започнем_с_мрежата/инсталиране_на_основния_софтуер/index.html @@ -0,0 +1,60 @@ +--- +title: Инсталиране на основния софтуер +slug: Learn/Да_започнем_с_Мрежата/Инсталиране_на_основния_софтуер +tags: + - Настройки + - инструменти + - начинаещ + - текстов редактор + - уебчетец +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>В статията <em>"Инсталиране на основния софтуер"</em> ви показваме нужните инструменти за уеб-разработка и как да ги инсталирате правилно.</p> +</div> + +<h2 id="Какви_инструменти_използват_професионалистите">Какви инструменти използват професионалистите?</h2> + +<ul> + <li><strong>Компютър</strong>. Това може и да ви звучи очевидно, но немалко от вас четат тази статия от телефона си или обществено достъпен компютър. За сериозно уеб програмиране е по-добре да инвестирате в настолен или преносим компютър (Windows, Mac или Linux).</li> + <li><strong>Текстов редактор</strong>, в който да пишете кода. Това може да бъда текстов редактор като <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a> или <a href="https://code.visualstudio.com/">Visual Studio Code</a>, или пък хибриден редактор от типа на <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>. Редакторите на документи като <a href="https://bg.wikipedia.org/wiki/Microsoft_Word">MS Word</a> или <a href="https://www.libreoffice.org/discover/writer/">Libre Office Writer</a> не са подходящи, тъй като съдържат много скрити елементи, които пречат на изпълнението на кода в уеб браузъра.</li> + <li><strong>Мрежови четци,</strong> за да тествате кода. В момента най-използваните такива са <a href="https://www.mozilla.org/bg/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> и <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Micrososft Edge</a>. Необходимо е също да тествате как сайтът ви би изглеждал на мобилни устройства, както и в някои по-стари браузъри, които потребителите ви вероятно все още използват (напр. IE 6–8.)</li> + <li><strong>Графичен редактор</strong> – например <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a> или <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, с които да създадете изображенията за страницата си.</li> + <li><strong>Система за управление на версиите</strong> – за управление на файловете на сървъра, за да си сътрудничите с други хора по някой проект, да споделяте програмен код и файлове, като избягвате конфликти при едновременна промяна на едни и същи файлове от двама или повече души. Сега <a href="http://git-scm.com/">Git</a> е най известното средство за управление на версиите, а <a href="https://github.com/">GitHub</a>, също използваща Git, е известна услуга предоставяща обществено достъпни хранилища за програмен код.</li> + <li><strong>Клиентът за FTP</strong> е програма, която се използва при по-старите доставчици на хостинг услуги за управление на файловете на сървъра (<a href="http://git-scm.com/">Git</a> все повече измества FTP в тази област). Има много (S)FTP програми. Някои от тях са <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> и <a href="https://filezilla-project.org/">FileZilla</a>.</li> + <li><strong>Система за автоматизация</strong> като <a href="http://gruntjs.com/">Grunt</a> или <a href="http://gulpjs.com/">Gulp</a>. Използват се за автоматизиране изпълнението на повторяеми задачи, например смаляване на кода и изпълнение на тестове.</li> + <li>Шаблони, библиотеки, работни рамки и др. за ускоряване разработката на обща функционалност.</li> + <li>Още помощни средства за разработка.</li> +</ul> + +<h2 id="Какви_инструменти_ми_трябват_сега">Какви инструменти ми трябват сега?</h2> + +<p>Списъкът изглежда плашещ, но за щастие можете да започнете с уеб разработка без да знаете нищо за повечето от тях. В тази статия ще използваме възможно най-малко от списъка – текстов редактор и някои модерни {{glossary("browser","мрежови четци")}}.</p> + +<h3 id="Инсталиране_на_текстов_редактор">Инсталиране на текстов редактор</h3> + +<p>Най-вероятно вече имате обикновен текстов редактор на компютъра си. Windows по подразбиране има <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad</a>, а OS X идва с <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. Linux дистрибуциите имат различни редактори, например Ubuntu върви с <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a> по подразбиране.</p> + +<p>За Уеб разработка можете да ползвате нещо по-добро от Notepad или TextEdit. Препоръчваме ви да започнете с <a href="http://brackets.io">Brackets</a> - безплатен текстов редактор, който предлага преглед на живо и подсказки при писането на код.</p> + +<h3 id="Инсталиране_на_модерни_уеб_браузъри">Инсталиране на модерни уеб браузъри</h3> + +<p>Засега ще инсталираме само няколко десктоп Уеб браузъри, в които да тестваме кода си. Изберете операционна система и отворете съответните линкове, за да свалите инсталатори за любимите си браузъри:</p> + +<ul> + <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li> + <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge"><font color="#0066cc">Microsoft Edge</font></a> (Edge е включен в Windows 10 по подразбиране; ако имате Windows 8 и нагоре, може да инсталирате IE 11; в противен случай е добре да инсталирате друг браузър)</li> + <li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari е браузърът на iOS and OS X по подразбиране)</li> +</ul> + +<p>Преди да продължите, трябва да инсталирате поне два от тези браузъри и да ги подготвите за тестване на кода.</p> + +<h3 id="Инсталиране_на_локален_уеб_сървър">Инсталиране на локален уеб сървър</h3> + +<p>Някои примери ще трябва да бъдат изпълнени на уеб сървър, за да работят правилно. Можете да видите как да направите това тук: <a href="/bg/docs/Learn/Common_questions/set_up_a_local_testing_server">Как се настройва локален сървър за тестване?</a></p> + +<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/bg/learn/да_започнем_с_мрежата/основи_на_html/index.html b/files/bg/learn/да_започнем_с_мрежата/основи_на_html/index.html new file mode 100644 index 0000000000..5525426bd7 --- /dev/null +++ b/files/bg/learn/да_започнем_с_мрежата/основи_на_html/index.html @@ -0,0 +1,219 @@ +--- +title: Основи на HTML +slug: Learn/Да_започнем_с_Мрежата/Основи_на_HTML +tags: + - HTML + - Кодене + - Обучение + - Програмиране + - мрежа + - начинаещ + - уеб +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Да_започнем_с_Мрежата/Dealing_with_files", "Learn/Да_започнем_с_Мрежата/CSS_basics", "Learn/Да_започнем_с_Мрежата")}}</div> + +<div class="summary"> +<p>{{Glossary("HTML")}} (<strong>H</strong>ypertext Markup Language) е кодът, който се използва за построяване и показване на уеб страница и нейното съдържание. Например: съдържанието може да е построено от няколко параграфа, списък с водещи знаци или като се използват изображения и таблици с данни. Както се вижда от заглавието, тази статия ще ви обясни основните положения на HTML и неговото приложение.</p> +</div> + +<h2 id="Какво_всъщност_е_HTML">Какво всъщност е HTML?</h2> + +<p>HTML не е език за програмиране – той е език за обозначаване, който се използва да укаже на вашия браузър как да изобрази страниците, които посещавате. В зависимост от намеренията на уеб-дизайнера, начинът на изобразяване може да е прост или изключително сложен. HTML представлява поредица от <strong>{{Glossary("element", "елементи")}}</strong>, които използвате, за да заградите (или обвиете) различни части от съдържанието, за да ги направите да изглеждат и действат по определен начин. Обграждащите {{Glossary("tag", "тагове")}} могат да направят дума или изображение да действат като препратка към друго място, могат да изписват думите с курсив, да правят буквите по-големи или по-малки и т.н. Ето примерен ред съдържание:</p> + +<pre>Котката ми е много сръдлива</pre> + +<p>Ако искаме редът да е изобразен отделно, можем да го означим като параграф като го обградим с таговете за елемента параграф ({{htmlelement("p")}}) :</p> + +<pre class="brush: html"><p>Котката ми е много сръдлива</p></pre> + +<h3 id="Анатомията_на_един_HTML_елемент">Анатомията на един HTML елемент</h3> + +<p>Нека изследваме елемента <code>p</code> малко по-задълбочено.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>Основните части на нашият елемент са:</p> + +<ol> + <li><strong>Отварящ таг(</strong><em>opening tag</em><strong>):</strong> Състои се от името на елемента (в този случай, <em>p</em>) заградено от отварящи и затварящи <strong>ъглови скоби (<em>angle brackets</em>)</strong>. Така се обозначава къде е началото на елемента или откъде започва да действа — в този случай показва начало на параграф.</li> + <li><strong>Затварящ таг(<em>closing tag</em>):</strong> Същият като отварящия таг, но с допълнително включена наклонена черта преди името на елемента. Това показва къде приключва елемента, в този случай — къде е краят на параграфа . Често срещана грешка при начинаещите е да се пропусне затварящия таг, като това може да доведе до странни резултати.</li> + <li><strong>Съдържание (<em>content</em>):</strong> Това е съдържанието на елемента, което в случая е просто текст.</li> + <li><strong>Елемент:</strong> Елементът е съвкупността от отварящия таг, затварящия таг и съдържанието.</li> +</ol> + +<p>Елементите могат да имат атрибути, които изглеждат по следния начин:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Атрибутите съдържат допълнителни сведения за елемента, които не искате да се появявт в изобразеното съдържание. По-горе, <em><code>class</code></em> е името на атрибута, а <em><code>editor-note</code></em><em> </em>е стойността на атрибута. Атрибутът <em><code>class</code></em> ви позволява да задавате на елемента идентификатор, чрез който да определяте как изглежда и разни други възможности.</p> + +<p>Един атрибут винаги трябва да има:</p> + +<ol> + <li>Празно място между него и името на елемента (или предишния атрибут, ако елементът вече има един или повече атрибути).</li> + <li>Името на съответния атрибут, последвано от знака за равенство.</li> + <li>Отварящи и затварящи кавички обграждащи стойността на атрибута. </li> +</ol> + +<h3 id="Влагане_на_елементи">Влагане на елементи</h3> + +<p>Възможно е да се постави елемент вътре в друг елемент — това се нарича <strong>влагане (<em>nesting</em>)</strong>. Ако искахме да подчертаем, че нашата котка от предишния пример е много сърдита, бихме могли да обгърнем "<em>много</em>" в елемента {{htmlelement("strong")}}. Това означава, че върху думата ще бъде наблегнато:</p> + +<pre class="brush: html"><p>Котката ми е <strong>много</strong> сърдита.</p></pre> + +<p>Трябва да се уверите, че елементите ви са правилно вложени: в примера по-горе отваряме елемент първо <code><p></code>, след това елементът <code><strong></code>. Следователно първо трябва да затворим елемента <code><strong></code> , а след това <code><p></code>. Следва пример, показващ неправилна употреба:</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>Елементите трябва да бъдат отваряни и затваряни правилно, за да бъдат наистина вътре или извън един спрямо друг. Ако се препокриват, както в горния пример, тогава браузърът ви ще се опитва да предположи какво сте се опитвали да направите и бихте могли да получите доста неочакван изход. Затова не го правете!</p> + +<h3 id="Празни_елементи">Празни елементи</h3> + +<p>Някои елементи нямат съдържание и се наричат <strong>празни елементи</strong> <strong>(<em>empty elements</em>)</strong>. Да вземем например елемента {{htmlelement("img")}}, който вече имаме в нашия HTML:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>Той съдържа два атрибута, но няма затварящ таг <code></img></code> и съдържание в себе си. Това е защото елементът изображение не обгръща съдържание върху което да действа. Целта му е да прикачи снимка в HTML страницата на мястото, което заема.</p> + +<h3 id="Анатомия_на_един_HTML_документ">Анатомия на един HTML документ</h3> + +<p>Това обхваща основните положения за отделните HTML елементи, но от тях няма особена полза, когато са изполвани поотделно. Нека разгледаме как да съчетаем отделните елемтни, за да образуват цяла страница, написана на HTML. Да погледнем отново кода, който поставихме в нашият пример <code>index.html</code> (с който първо работихме в статията <a href="/bg/docs/Learn/%D0%94%D0%B0_%D0%B7%D0%B0%D0%BF%D0%BE%D1%87%D0%BD%D0%B5%D0%BC_%D1%81_%D0%9C%D1%80%D0%B5%D0%B6%D0%B0%D1%82%D0%B0/%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0_%D1%81_%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2%D0%B5">Работа с файлове</a>):</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="images/firefox-icon.png" alt="My test image"> + </body> +</html></pre> + +<p>Ето какво имаме:</p> + +<ul> + <li><code><!DOCTYPE html></code> — типа на документа. Едно време, когато HTML беше млад (около 1991/2), типът на документа (<em>doctype</em>) трябваше да служи като препратка към набор от правила, които HTML страницата трябваше да следва, за да бъде считана за добър HTML—автоматична проверка за грешки и разни други полезни неща. В днешно време никой не се занимава вече с тях и те са просто един продукт от миналото, който трябва да бъде включван, за да работи всичко правилно. Това е всичко, което трябва да знаете засега по този въпрос.</li> + <li><code><html></html></code> — елементът <code><html></code>. Този елемент обгражда цялото съдържание на страницата и обикновено се нарича основен елемент.</li> + <li><code><head></head></code> — елементът <code><head></code>. Той действа като контейнер за всички неща, които включвате в страницата, но не са част от съдържанието, което показвате на посетителите на вашата страница. Това са {{Glossary("keyword", "ключови думи")}} и описание на страницата, което се появява като резултат от търсачки, CSS за форматиране на съдържанието, обявяване начин на кодиране на текста и т.н.</li> + <li><code><body></body></code> — елементът <code><body></code>. Той съдържа всичко, което искате да покажете на посетителите на вашата страница като текст, изображения, видео клипове, игри, аудио.</li> + <li><code><meta charset="utf-8"></code> — този елемент задава набора от знаци, който ще използва вашият документ. UTF-8 включва повечето знаци от всички известни естествени езици. Този набор поддържа всякакъв текст. Няма причина да не го използвате. Това дори ще ви спести проблеми по-късно.</li> + <li><code><title></title></code> — това задава заглавието на документа — заглавието, което се появява в раздела на браузъра, където е заредена страницата и се използва за описание на страницата, когато я добавяте в отметките си.</li> +</ul> + +<h2 id="Изображения">Изображения</h2> + +<p>Да се върнем отново на нашия елемент {{htmlelement("img")}}:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>Както споменахме, той вгражда изображение в нашата страница на нястото, където се намира. Изпълнява го чрез атрибута <code>src</code> (<em>source</em>-източник), който указва пътя до файла с изображението.</p> + +<p>Освен това включихме и атрибута <code>alt</code> (<em>alternative</em>-заместващ). Чрез него определяме описателния текст за потребителите, които не могат да видят изображението поради някоя от следните причини:</p> + +<ol> + <li>Имат зрителни нарушения. Потребители със значително зрително увреждане често обикновено озползват програми, наречени екранни четци, които им изчитат заместващия текст.</li> + <li>Поради някаква неизправност изображението не може да бъде показано. Опитайте да промените пътя в атрибута <code>src</code>, като го направите недействителен. След като запишете и презаредите страницата, вместо изображението би трябвало да виждате следния текст:</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p> + +<p>Най-важното за този атрибут е да бъде наистина описателен текст. Това което поставите в него, трябва да предоставя достатъчно сведения на потребителя, така че той да добие добра представа какво показва изображението. В дадения пример "My test image" ("Моето изображение за тест") не е изобщо добро описание. Значително по-подходящ заместващ текст за логото на Firefox би бил "The Firefox logo: a flaming fox surrounding the Earth"("Логото на Firefox: пламтяща лисица обграждаща Земята").</p> + +<p><strong>Опитайте да измислите по-подходящ заместващ текст за изображението.</strong></p> + +<div class="note"> +<p><strong>Бележка</strong>: Разберете повече за достъпността на <a href="/bg/docs/Web/Accessibility">MDN's Accessibility landing page</a>.</p> +</div> + +<h2 id="Обозначаване_на_текст">Обозначаване на текст</h2> + +<p>Този раздел ще обясни някои от основните елементи в HTML, които ще изпозлвате за маркиране на текст.</p> + +<h3 id="Заглавия">Заглавия</h3> + +<p>Елементите за заглавия (<em>heading</em>) ви позволяват да укажете, че определени части от съдържанието са заглавия или подзаглавия. Както една книга има основно заглавие, заглавия на отделните глави и подзаглавия, така и един HTML документ ги съдържа. HTML поддържа шест нива на заглавия от {{htmlelement("h1")}} до {{htmlelement("h6")}}, като най-вероятно ще използвате само 3-4 от тях:</p> + +<pre class="brush: html"><h1>My main title</h1> +<h2>My top level heading</h2> +<h3>My subheading</h3> +<h4>My sub-subheading</h4></pre> + +<p>Опитайте да поставите подходящо заглавие на вашата страница, което да е над вашия {{htmlelement("img")}} елемент.</p> + +<h3 id="Параграфи">Параграфи</h3> + +<p>Както по-горе стана ясно, елементите {{htmlelement("p")}} са предназначени да съдържат отделните параграфи в текста. Ще ги изплозвате често при обозначаването на обикновено текстово съдържание :</p> + +<pre class="brush: html"><p>Това е отделен праграф</p></pre> + +<p><strong>Добавете примерния текст (би трябвало да го имате от <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>What should your website look like?</em></a>) в един или повече параграфи след елемента <code><img></code>.</strong></p> + +<h3 id="Списъци">Списъци</h3> + +<p>Доста съдържание в мрежата се представя като списъци и HTML има специални елементи за тях. Списъците съдържат поне два елемента. Най-често срещаните типове са подредени и неподредени списъци:</p> + +<ol> + <li><strong>Неподредени списъци (unordered lists) </strong>са тези, при които последователността на елементите му е без значение – примерно количка с покупки от сайт-магазин. Те се обграждат от елемента {{htmlelement("ul")}}.</li> + <li><strong>Подредени списъци (оrdered lists</strong>) са тези, при които подредбата на елементите има значение, както при инструкции в рецепта. Те се обграждат от елемента {{htmlelement("ol")}}.</li> +</ol> + +<p>Всяка точка от списъка се поставя в елемента {{htmlelement("li")}} (точка от списък-<em>list item</em>).</p> + +<p>Примерно, ако искаме да превърнем част от следващия параграф в списък:</p> + +<pre class="brush: html"><p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p></pre> + +<p>Бихме могли да променим обозначаването както следва:</p> + +<pre class="brush: html"><p>At Mozilla, we’re a global community of</p> + +<ul> + <li>technologists</li> + <li>thinkers</li> + <li>builders</li> +</ul> + +<p>working together ... </p></pre> + +<p><strong>Опитайте да добавите подреден или неподреден списък в примерната си страница.</strong></p> + +<h2 id="Препратки">Препратки</h2> + +<p>Препратките/връзките (links) са изключително важни — те са същността на Мрежата (WEB). За да добавим препратка използваме този прост елемент — {{htmlelement("a")}}, като <em>a</em> идва от "anchor"-котва . За да превърнете текст от параграфа в препратка, следвайте следните стъпки:</p> + +<ol> + <li>Изберете си текст. Ние ще изпозлваме "Mozilla Manifesto".</li> + <li>Обградете текста с елемент <a> , ето така: + <pre class="brush: html"><a>Mozilla Manifesto</a></pre> + </li> + <li>Задайте на елемента <a> атрибут href( съкратено от hypertext reference), както в примера по-долу: + <pre class="brush: html"><a href="">Mozilla Manifesto</a></pre> + </li> + <li>Като стойност на този атрибут поставете уеб-адреса към който искате да води препратката: + <pre class="brush: html"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> + </li> +</ol> + +<p>Може да получите неочаквани резултати, ако пропуснете частта <code>https://</code> или <code>http://</code> .Тя се нарича <em>протокол (protocol</em>) и се поставя в началото на уеб-адреса. След като създадете препратката, изпозлвайте я, за да се уверите, че ви препраща точно където искате.</p> + +<div class="note"> +<p><code>href</code> може да изглежда странно наименование на атрибут. За по-лесно запомняне се подсещайте, че произлиза от <em><strong>h</strong>ypertext <strong>ref</strong>erence- препратка към свръх-текст</em>.</p> +</div> + +<p><strong>Сега може да добавите и препратка към вашата страница.</strong></p> + +<h2 id="Заключение">Заключение</h2> + +<p>Ако сте следвали всички наставления в тази статия, би трябвало да имате страница, която изглежда като тази по-долу (можете да я <a href="http://mdn.github.io/beginner-html-site/">видите и тук</a>.<br> + <br> + <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> + +<p>Ако много се затрудните, винаги може да сравните работата си с нашия <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">завършен примерен код</a> в Github.</p> + +<p>До тук само бегло споменахме някои основни положения в HTML. За да научите повече, посетете <a href="/bg/Learn/HTML">Темата за обучение по HTML</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/bg/mdn/getting_started/index.html b/files/bg/mdn/getting_started/index.html new file mode 100644 index 0000000000..8f59fed2bd --- /dev/null +++ b/files/bg/mdn/getting_started/index.html @@ -0,0 +1,107 @@ +--- +title: Първи стъпки в MDN +slug: MDN/Getting_started +tags: + - MDN Мета + - наръчник + - начинаещи + - представяне + - първи стъпки +translation_of: MDN/Contribute/Getting_started +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p> Ние сме отворена общност от създатели и писатели, създаващи съдържание за едно по- добро Web пространство, без значение от марка, браузър или платформа. Всеки може да допринесе и всеки, който го направи, ще ни направи по- силни. Заедно, ние ще продължим да внасяме иновации в името на общото благо. Всичко започва тук, с теб.</p> + +<p> Всичко в MDN (кодът, оживяващ този сайт, както и документацията, примерите и демотата) е създадено от <strong>общност</strong> от програмисти и писатели. Всеки има с какво да допринесе и ще се радваме да се присъединиш!</p> + +<h2 id="3_лесни_стъпки_към_MDN">3 лесни стъпки към MDN</h2> + +<p><span class="seoSummary"> MDN е уики, където всеки може да добавя и редактира съдържание. Не е необходимо да си програмист или технологичен гуру. Има множество неща, които могат да бъдат свършени, от редакция и коригиране на печатни грешки, до изготвяне на документация за <strong>Приложно- Програмен Интерфейс(API).</strong> Този наръчник ще ти помогне да намериш своя начин да допринесеш за развитието на MDN.</span></p> + +<p> Допринасянето е лесно и безопасно. Не се тревожи, ако допуснеш грешка, нямаш перфектна граматика, или не знаеш как точно трябва да изглеждат нещата! Ние имаме екип, който се грижи съдържанието на MDN да е винаги на ниво. Наш човек ще се увери, че текстът ти е чист и добре написан.Сподели своите знания и умения, и можеш да си сигурен, че общноста ще ти помогне да станеш дори по- добър.</p> + +<h3 id="Стъпка_1_Регистрирай_акаунт_в_MDN">Стъпка 1: Регистрирай акаунт в MDN</h3> + +<p> За да започнеш с приноса си към MDN, първо трябва да регистрираш акаунт. За повече инфо, посети <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">"Как да регистрирам акаунт"</a>. Имай предвид, че ще ти е необходим<a href="https://github.com/join"> GitHub акаунт, </a> преди да можеш да се регистрираш в MDN, защото използваме GitHub ауторизация.</p> + +<h3 id="Стъпка_2_Избери_си_тема">Стъпка 2: Избери си тема</h3> + +<p> След като вече си логнат, можеш да се запознаеш с актуалните теми в <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started#Possible_task_types">този списък</a> и да избереш тази, която ти допада най- много.</p> + +<p> Ако задачата изисква създаване на нови страници, моля погледни раздел <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page-creation_permissions">"Правила за създаване и редакция на страници"</a>, където ще намериш упътване как да се сдобиеш с право да създаваш нови страници- всички новорегистрирани акаунти са ограничени по подразбиране.</p> + +<h3 id="Стъпка_3_Изпълни_задачата">Стъпка 3: Изпълни задачата</h3> + +<p> След като си избрал тема за работа и си намерил статия, по която да работиш, просто го направи!</p> + +<p> Не се тревожи ако не е перфектно- другите приносители в MDN са тук, за да ти помогнат с грешките и пропуските. Ако имаш някакви въпроси, можеш да посетиш <a href="/en-US/docs/MDN/Community">Страница на общноста</a>. Там ще намериш мейлинг листове и чат канали, където можеш да получиш съдействие.</p> + +<div class="note"> +<p> Ако желаеш да експериментираш с редакцията на MDN, преди да направиш нещо "наистина", разполагаме с <strong><a href="/en-US/docs/Sandbox">Пясъчник</a></strong>, където можеш да се упражняваш. Моля ограничи експериментите единствено до <strong><a href="/en-US/docs/Sandbox">Пясъчник</a></strong>- а. Избягвай ненужни промени по съдържанието, за да не се създават бъркотии, които после някой ще трябва да оправя, или по- лошо- ще объркват читателите.</p> +</div> + +<p> Когато приключиш с тема, чувствай се свободен да избереш друга, или погледни раздел <a href="#Other_things_you_can_do_on_MDN">Какво друго може да направиш в MDN</a>.</p> + +<h2 id="Актуални_теми_и_задачи">Актуални теми и задачи</h2> + +<p> Има няколко основни теми, над които можеш да работиш, според своите умения и интереси. Имаме задачи от всякакъв вид и трудност. Много от тях ще ти отнемат не повече от 5 минути. В списъка по- надолу ще намериш актуалните задачи, заедно с кратко описание и времето, което ще ти е необходимо, за да се справиш.</p> + +<h3 id="Тема_1_Аз_обичам_думи">Тема 1: Аз обичам думи</h3> + +<p> Тук можеш да прегледаш, допълваш и коригираш съществуващи статии, както и да добавяш подходящи тагове.</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">Направи обобщение на статия</a> (5-15 минути)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Do_an_editorial_review">Прегледай и редактирай статия</a> (5–30 минути)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Добави съдържание в Речника</a> (15 минути-1 час)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Напиши статия- помогни на хората да научат нещо повече за мрежата</a> (1-3 часа)</li> +</ul> + +<div class="note"> Преди да редактираш статия, или да напишеш нова, моля запознай се с <a href="/en-US/docs/MDN/Contribute/Guidelines/Style_guide">Наръчник на писателя</a>. Той ще ти помогне да създаваш наистина полезно съдържание.</div> + +<h3 id="Тема_2_Аз_обичам_да_пиша_код">Тема 2: Аз обичам да пиша код</h3> + +<p> Нуждаем се от примерен код! Можеш също да ни помогнеш да подобрим нашата платформа, <a href="/en-US/docs/MDN/Kuma">Kuma</a>, или да обновим нашата база данни за съвместимост на браузърите.</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Оживяване на примерен код</a> (30 минути)</li> + <li><a href="https://wiki.mozilla.org/Webdev/GetInvolved/developer.mozilla.org">Прочети ръководството за присединяване</a> (30 минути)</li> + <li><a href="http://kuma.readthedocs.org/en/latest/installation.html">Настрой работна среда за Kuma</a> (1 час)</li> + <li><a href="https://github.com/mozilla/kuma#readme">Дай своя принос в подобрението на Kuma</a> (1 час)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Add_or_update_browser_compatibility_data">Прибави към, или редактирай данните за съвместимост на браузърите</a> (30 минути)</li> +</ul> + +<h3 id="Тема_3_Аз_обичам_код_обичам_и_думи">Тема 3: Аз обичам код, обичам и думи</h3> + +<p> <span id="result_box" lang="bg"><span>Имаме задачи, които изискват както технически, така и езикови умения, като писане на нови статии, проверка за техническа точност или адаптиране на документи.</span></span></p> + +<ul> + <li><a href="/en-US/docs/MDN/About/Promote">Сподели MDN на своята уеб страница</a> (5 минути)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Remove__Experimental__Macros">Премахване на "експериментални" макроси от елементи, които вече <strong>не</strong> са експериментални</a> (5-30 минути)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Do_a_technical_review">Провери за техническа точност</a> (30 минути)</li> + <li><a href="/en-US/docs/MDN/Contribute/Contribute_to_docs_that_are_currently_needed">Напиши статия по належаща тема </a>(повече от 1 час)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Създай интерактивно упражнение</a> (повече от 1 час)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request">Коригирай програмна грешка</a> от <a href="http://www.joshmatthews.net/bugsahoy/?mdn=1">MDN категорията в "Здравей Бъг!"</a> (повече от 1 час)</li> +</ul> + +<h3 id="Тема_4_Искам_MDN_преведен_на_моят_език">Тема 4: Искам MDN преведен на моят език</h3> + +<p> <span id="result_box" lang="bg"><span>Цялата работа по локализиране и превод, извършена в MDN, се извършва от нашата невероятна общност от доброволци.</span></span></p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Localize/Translating_pages">Превод на статии</a> (2 часа) (Погледни <a href="/en-US/docs/MDN/Doc_status/l10nPriority">Приоритетни статии</a>)</li> + <li>Можеш да се свържеш с други преводачи, като се запознаеш със <a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">Списък с преводи и преводачи</a> (30 минути)</li> +</ul> + +<h3 id="Тема_5_Попаднах_на_погрешна_информация_но_не_знам_как_да_я_поправя">Тема 5: Попаднах на погрешна информация, но не знам как да я поправя</h3> + +<p> Можеш да докладваш за проблеми като <a class="external" href="https://bugzilla.mozilla.org/form.doc">добавиш бъг</a>. (5 минути)</p> + +<h2 id="Какво_друго_можеш_да_направиш_за_MDN">Какво друго можеш да направиш за MDN</h2> + +<ul> + <li><a href="/en-US/docs/MDN/Community">Да се присъединиш към MDN Общността</a>.</li> + <li><a href="/en-US/profile">Да допълниш своя профил</a>, така, че другите да могат да научат повече за теб.</li> + <li>Да научиш повече за <a href="/en-US/docs/MDN/Contribute">приноса към MDN</a>.</li> +</ul> diff --git a/files/bg/mdn/index.html b/files/bg/mdn/index.html new file mode 100644 index 0000000000..15c4d9f076 --- /dev/null +++ b/files/bg/mdn/index.html @@ -0,0 +1,32 @@ +--- +title: The MDN project +slug: MDN +tags: + - Landing + - MDN Meta + - NeedsTranslation + - TopicStub +translation_of: MDN +--- +<div>{{MDNSidebar}}</div> + +<p>The <strong>Mozilla Developer Network</strong> (MDN) is a wiki on which we document the open Web, Mozilla technologies, Firefox OS, and other developer topics. Anyone is welcome to add and edit content. You don't need to be a programmer or know a lot about technology; there are many different tasks that need to be performed, from the simple (proof-reading and correcting typos) to the complex (writing API documentation).</p> + +<div class="summary"> +<p>The goal of the MDN project is to document the Open Web, Mozilla technologies, and Mozilla projects. We invite you to help!</p> +</div> + +<p>We need your help! It's easy. Don't worry about asking for permission or about making mistakes. On the other hand, please get to know the <a href="/en-US/docs/MDN/Community" title="/en-US/docs/MDN/Community">MDN community</a>; we're here to help you! The documentation below should get you started, but don't hesitate to join the discussion in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a>.</p> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/MDN/Getting_started">Newcomer quick start</a></span> + + <p>Are you new to MDN and want to learn how to help make it better? Start here!</p> + </li> + <li><span><a href="/en-US/docs/MDN/Contribute">I'm an advanced user</a></span> + <p>Access our full, in-depth guide for MDN contributors to learn more once you've gotten comfortable.</p> + </li> + <li><span><a href="/en-US/docs/MDN/Promote">Spread the word</a></span> + <p>If you love MDN, help get the word out! Find art, tools, and guides for promoting MDN.</p> + </li> +</ul> diff --git a/files/bg/mozilla/index.html b/files/bg/mozilla/index.html new file mode 100644 index 0000000000..7a20fd7c66 --- /dev/null +++ b/files/bg/mozilla/index.html @@ -0,0 +1,17 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - Add-ons + - Advanced + - Apps + - CodingScripting + - Landing + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +<p>The articles below include content about downloading and building Mozilla code. In addition, you'll find helpful articles about how the code works, how to build add-ons for Mozilla applications and the like.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/bg/mozilla/projects/index.html b/files/bg/mozilla/projects/index.html new file mode 100644 index 0000000000..ac8536e706 --- /dev/null +++ b/files/bg/mozilla/projects/index.html @@ -0,0 +1,15 @@ +--- +title: Mozilla Projects +slug: Mozilla/Projects +tags: + - Landing + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +<p><span class="seoSummary">Mozilla has a number of projects other than <a href="/en-US/docs/Mozilla/Firefox">Firefox</a> itself. Many of these are components of Firefox or are tools used to create Firefox, but may be used by other projects as well. Here you'll find links to documentation about these projects.</span></p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/bg/mozilla/projects/rhino/index.html b/files/bg/mozilla/projects/rhino/index.html new file mode 100644 index 0000000000..43c40f34ad --- /dev/null +++ b/files/bg/mozilla/projects/rhino/index.html @@ -0,0 +1,20 @@ +--- +title: Rhino +slug: Mozilla/Projects/Rhino +translation_of: Mozilla/Projects/Rhino +--- +<p><img alt="Image:rhino.jpg" class="internal" src="/@api/deki/files/832/=Rhino.jpg"></p> + +<p><span class="seoSummary"><strong>Rhino</strong> е имплементация на <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> с отворен код, написана изцяло на Java. Типично се включва в Java приложенията, за да осигури скриптова функционалност към крайните потребители. Включена е в J2SE 6, като скриптов език по подразбиране.</span></p> + +<h4 id="Rhino_downloads" name="Rhino_downloads">Rhino сваляния</h4> + +<p>Как да намерим <a class="internal" href="/en/RhinoDownload" title="en/RhinoDownload">изходния код и библиотеките</a>. </p> + +<h4 id="Rhino_documentation" name="Rhino_documentation">Rhino документация</h4> + +<p><a href="/en/Rhino_documentation" title="en/Rhino_documentation">Информация за Rhino</a> за програмисти.</p> + +<h4 id="Rhino_help" name="Rhino_help">Rhino помощ</h4> + +<p><a href="/en/Rhino/Community" title="en/Rhino/Community">Няколко ресурса</a>, ако се затрудните.</p> diff --git a/files/bg/web/css/_colon_first-child/index.html b/files/bg/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..799ab091ba --- /dev/null +++ b/files/bg/web/css/_colon_first-child/index.html @@ -0,0 +1,117 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Оформление + - Псевдоклас + - справочник +translation_of: 'Web/CSS/:first-child' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/bg/docs/Web/CSS">CSS</a> <a href="/bg/docs/Web/CSS/Pseudo-classes">псевдокласът</a> <code>:first-child</code> (:първо-дете) указва всеки елемент, намиращ се на първо място в списък с елементи от едно и също ниво в структурата на документа. В имплементациите на CSS3, за да бъде селектиран елемента, той трябва да има родител. В CSS4 това не е нужно.</span></p> + +<h2 id="Правопис">Правопис</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Примери">Примери</h2> + +<h3 id="Пример_1">Пример 1</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <p>This p is styled, as it is a p, AND the first + child in the div</p> + <p>This p is not styled; it is not the first child!</p> +</div> + +<div> + <h2>This h2 is not styled; it is not a p!</h2> + <p>This p is not styled; it is not the first child!</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p:first-child { + color: lime; + background-color: black; + padding: 5px; +} +</pre> + +<h4 id="Резултат">Резултат</h4> + +<p><span>{{EmbedLiveSample('Пример_1','100%',300)}}</span></p> + +<h3 id="Пример_2_-_с_използване_на_UL">Пример 2 - с използване на UL</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ul> + <li>List 1</li> + <li>List 2</li> + <li>List 3</li> +</ul></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">li{ + color:blue; +} +li:first-child{ + color:green; +}</pre> + +<h4 id="Резултат_2">Резултат</h4> + +<p><span>{{EmbedLiveSample('Пример_2_-_с_използване_на_UL',300,100)}}</span></p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Елементите няма нужда да имат родител за да бъдат селектирани.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Без промяна.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Начална дефиниция.</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_на_четците">Съвместимост на четците</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("css.selectors.first-child")}}</p> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li>{{cssxref(":last-child")}}</li> + <li>{{cssxref(":nth-child")}}</li> + <li>{{cssxref(":last-of-type")}}</li> +</ul> diff --git a/files/bg/web/css/_colon_nth-child/index.html b/files/bg/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..c3f80a2fd1 --- /dev/null +++ b/files/bg/web/css/_colon_nth-child/index.html @@ -0,0 +1,194 @@ +--- +title: ':nth-child()' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Изложение + - мрежа + - псведоклас + - справочник +translation_of: 'Web/CSS/:nth-child' +--- +<div>{{CSSRef}}</div> + +<p><a href="/bg/docs/Web/CSS/Pseudo-classes">Псевдокласът</a> в <a href="/bg/docs/Web/CSS">CSS</a> <strong><code>:nth-child()</code></strong> намира съвпадения според тяхното място в множество от съседни елементи.</p> + +<pre class="brush: css no-line-numbers">/* Избира всеки четвърти елемент + сред всяко множество от съседи */ +:nth-child(4n) { + color: lime; +} +</pre> + +<h2 id="Syntax" name="Syntax">Правопис</h2> + +<p>Псевдокласът <code>nth-child</code> се указва с един аргумент, който представлява образец за намиране на съвпадения със съответстващи елементи. Изборът се отнася до съседни елементи, които са на едно и също ниво в йерархията на документа.</p> + +<h3 id="Стойности_за_ключови_думи">Стойности за ключови думи</h3> + +<dl> + <dt><code>odd</code></dt> + <dd>Избира елементи, чието местоположение в поредица от съседни елементи е нечетно: 1, 3, 5 и т.н.</dd> + <dt><code>even</code></dt> + <dd>Избира елементи, чието местоположение в поредица от съседни елементи е нечетно: 2, 4, 6 и т.н.</dd> +</dl> + +<h3 id="Функционално_записване">Функционално записване</h3> + +<dl> + <dt><code><An+B></code></dt> + <dd>Избира елементи, чието местоположение в поредица от съседи съответства на образеца <code>An+B</code> за всяко положително число или нулева стойност на <code>n</code>. указателят за първия елемент е <code>1</code>. Стойностите <code>A</code> и <code>B</code> трябва да са от вида {{cssxref("<integer>")}}s.</dd> +</dl> + +<h3 id="Правопис">Правопис</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">Примери</h2> + +<h3 id="Example_selectors" name="Example_selectors">Примерни образци за избор</h3> + +<dl> + <dt><code>tr:nth-child(odd)</code> or <code>tr:nth-child(2n+1)</code></dt> + <dd>Избира нечетните редове в таблица в HTML: 1, 3, 5 и т.н.</dd> + <dt><code>tr:nth-child(even)</code> or <code>tr:nth-child(2n)</code></dt> + <dd>Избира четните редове в таблица в HTML: 2, 4, 6 и т.н.</dd> + <dt><code>:nth-child(7)</code></dt> + <dd>Избира седмия елемент.</dd> + <dt><code>:nth-child(5n)</code></dt> + <dd>Избира всеки пети елемент: 5 [=5x1], 10 [=5x2], 15 [=5x3], и т.н. </dd> + <dt><code>:nth-child(3n+4)</code></dt> + <dd>Избира четвъртия елемент след всеки трети. Поредицата започва от нула: 4 [= (3x0)+4], 7 [= (3x1)+4], 10 [= (3x2)+4], 13 [= (3x3)+4], etc.</dd> + <dt><code>:nth-child(-n+3)</code></dt> + <dd>Избира първите три елемента в множество от съседи. [=-0+3, -1+3, -2+3]</dd> + <dt><code>p:nth-child(n)</code></dt> + <dd>Избира всеки елемент <code><p></code> в множество от съседи. Избират се същите елементи както при обикновен избор <code>p</code>, но се прилагат по-точни указания.</dd> + <dt><code>p:nth-child(1)</code> or <code>p:nth-child(0n+1)</code></dt> + <dd>Избира всеки първи елемент <code><p></code> в множество от съседи. Това е същото като {{cssxref(":first-child")}} и има същата точност.</dd> +</dl> + +<dl> + <dt><code>p:nth-child(n+8):nth-child(-n+15)</code></dt> + <dd>Избира от осмия до петнадесетия елемент <code><p></code> включително в множество от съседи. </dd> +</dl> + +<p> </p> + +<h3 id="Подробен_пример">Подробен пример</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><h3><code>span:nth-child(2n+1)</code>, WITHOUT an + <code>&lt;em&gt;</code> among the child elements.</h3> +<p>Children 1, 3, 5, and 7 are selected.</p> +<div class="first"> + <span>Span 1!</span> + <span>Span 2</span> + <span>Span 3!</span> + <span>Span 4</span> + <span>Span 5!</span> + <span>Span 6</span> + <span>Span 7!</span> +</div> + +<br> + +<h3><code>span:nth-child(2n+1)</code>, WITH an + <code>&lt;em&gt;</code> among the child elements.</h3> +<p>Children 1, 5, and 7 are selected.<br> + 3 is used in the counting because it is a child, but it isn't + selected because it isn't a <code>&lt;span&gt;</code>.</p> +<div class="second"> + <span>Span!</span> + <span>Span</span> + <em>This is an `em`.</em> + <span>Span</span> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> + <span>Span</span> +</div> + +<br> + +<h3><code>span:nth-of-type(2n+1)</code>, WITH an + <code>&lt;em&gt;</code> among the child elements.</h3> +<p>Children 1, 4, 6, and 8 are selected.<br> + 3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>, + not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects + children of that type. The <code>&lt;em&gt;</code> is completely skipped + over and ignored.</p> +<div class="third"> + <span>Span!</span> + <span>Span</span> + <em>This is an `em`.</em> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +span, +div em { + padding: 5px; + border: 1px solid green; + display: inline-block; + margin-bottom: 3px; +} + +.first span:nth-child(2n+1), +.second span:nth-child(2n+1), +.third span:nth-of-type(2n+1) { + background-color: lime; +}</pre> + +<h4 id="Изход">Изход</h4> + +<p>{{EmbedLiveSample('Detailed_example', 550, 550)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Добавя правопис за <code>of <selector></code> и уточнява, че за съвпадащите елементи не е задължително да имат родители.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Първоначално определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост">Съвместимост</h2> + +<div> + + +<p>{{Compat("css.selectors.nth-child")}}</p> +</div> + +<h2 id="See_also" name="See_also">Вижте също</h2> + +<ul> + <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li> +</ul> diff --git a/files/bg/web/css/css_transitions/index.html b/files/bg/web/css/css_transitions/index.html new file mode 100644 index 0000000000..afbb21c6e6 --- /dev/null +++ b/files/bg/web/css/css_transitions/index.html @@ -0,0 +1,120 @@ +--- +title: CSS Transitions +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - Преглед + - Преход + - Справка + - Транзишън +translation_of: Web/CSS/CSS_Transitions +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Преходите </strong> са модул от CSS, който ви позволява да създавате плавни преходи между стойностите на свойствата в CSS. Поведението на тези преходи може да бъде контролирано чрез уточняване на тяхната функция, продължителност и редица други атрибути.</p> + +<h2 id="Справка">Справка</h2> + +<h3 id="Свойства">Свойства</h3> + +<div class="index"> +<ul> + <li>{{cssxref("transition")}}</li> + <li>{{cssxref("transition-delay")}}</li> + <li>{{cssxref("transition-duration")}}</li> + <li>{{cssxref("transition-property")}}</li> + <li>{{cssxref("transition-timing-function")}}</li> +</ul> +</div> + +<h2 id="Наръчници">Наръчници</h2> + +<dl> + <dt><a href="/bg/docs/Web/Guide/CSS/Using_CSS_transitions">Използване на CSS преходи</a></dt> + <dd>Ръководство как стъпка-по-стъпка да създадете преход в CSS. Статията описва всички важни CSS свойства и обяснява как те си взаимодействат.</dd> +</dl> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Първоначална дефиниция.</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузъри">Съвместимост с браузъри</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 {{property_prefix("-webkit")}}<br> + 26.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10.0</td> + <td>11.6 {{property_prefix("-o")}}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>3.0 {{property_prefix("-webkit")}}<br> + 6.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1 {{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.0 {{property_prefix("-o")}}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>3.2 {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li>Свързаните с CSS Преходи, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Анимации</a> осигуряват още по-фин контрол върху анимираните свойства.</li> +</ul> diff --git a/files/bg/web/css/css_transitions/using_css_transitions/index.html b/files/bg/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..57eb945326 --- /dev/null +++ b/files/bg/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,1155 @@ +--- +title: Използване на CSS преходи +slug: Web/CSS/CSS_Transitions/Using_CSS_transitions +tags: + - CSS + - CSS преходи + - Напреднали + - Преходи + - наръчник +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +<p>{{CSSref}}</p> + +<p><span class="seoSummary"><strong>CSS преходите</strong> предоставят способ за контролиране на скоростта на анимацията при промяна на CSS свойствата. По този начин, вместо промяната в свойството да се приложи незабавно, бихме могли да предизвикаме промната да се случи за определен период от време.</span> Например, ако сменяте цвета на елемента от бял на черен, обикновено това става мигновено. С активиран CSS преход, промените настъпват на определени интерали които съответстват на скоростта и могат да бъдат персонализирани.</p> + +<p>Анимации, които включват преходи между две състояния, могат да бъдат наречени безусловни, тъй като състоянията между началното и крайното са определени от самия бразър.</p> + +<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p> + +<p>CSS преходите позволяват да изберете кои свойства да анимирате (като <em>ги посочите изрично</em>), кога да започне анимацията ( като зададете <em>отложено начало)</em>,колко продължителен ще е самият преход (като зададете <em>продължителност</em>) или как да бъде изпълнен прехода (като се определи <em>времевата функция</em>, т.е. линейно или бързо в началото и със забавяне в края).</p> + +<h2 id="Кое_CSS_свойство_може_да_бъде_преходно">Кое CSS свойство може да бъде преходно?</h2> + +<p>Авторът може да определи кои свойства на своето уеб творение да анимира и по какъв начин. Това дава поле за създаване на сложни преходи. Поради това, че няма смисъл в анимирането на някои свойства, <a href="/en-US/docs/Web/CSS/CSS_animated_properties">списъкът със свoйства, подходящи за анимиране </a> е ограничен до определен брой.</p> + +<div class="note">Бележка: Наборът от елементи, подходящи за анимиране, се променя в зависимост от разработването на спецификациите.</div> + +<p class="note">Стойността <code>auto</code> е в повечето слуаи доста сложен случай. Спецификаците препоръчват да не се изпълняват анимации от или към стойност <code>auto</code>. Някои потребителски агенти, като тези произхождащи от Gecko, следват тези изисквания, докато други, базирани на WebKit, не са толкова стриктни. Използване на анимации с <code>auto</code> може да доведе до непредвидими резултати, зависещи от браузера и неговата версия, поради това трябва да бъдат избягвани.</p> + +<h2 id="Задаване_на_преходи">Задаване на преходи</h2> + +<p>CSS преходите се контролират чрез свойството<a href="https://developer.mozilla.org/en-US/docs/CSS/transition"> </a>{{cssxref("transition")}} . Това е и най-правилният начин за тяхното конфигуриране. Той помага да се преодолее фактът, че списъците с параметрите са несинхронни, а продължителното дебъгване на CSS може да бъде доста неприятно.</p> + +<p>Можете да контролирате отделните компоненти на прехода чрез следните свойства:</p> + +<p><strong>(Забележете, че тези преходи се въртят в цикъл непрекъснато само за цел да покажем пример, CSS <code>преходите</code> само визуализират промяна на някое свойство от дедено начало до определен край. Ако се нуждаете от визуализиране на цикъл, погледнете в свойството на CSS <a href="/en-US/docs/CSS/animation"><code>анимация</code></a>.)</strong></p> + +<dl> + <dt>{{cssxref("transition-property")}}</dt> + <dd>Задава името или имената на свойствата, върху които трябва да бъде проложен преход. Само свойствата, които са изброени тук, биват анимирани по време на преходите, промените по другите свойства настъпват незабавно- както е по подразбиране.</dd> + <dt>{{cssxref("transition-duration")}}</dt> + <dd>Задава продължитеността за която трябва да настъпо промяната. Можете да зададете една профължителност, която да важи за всички свойства по време на прехода или различни такива, които позволяват всяко свойство да се променя за различен период от време. + <div> + <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 0.5s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration: 0.5s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration: 0.5s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration: 0.5s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transformv color; + transition-duration: 0.5s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_0_5s", 275, 150)}}</div> + </div> + + <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 1s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top -webkit-transform color; + -webkit-transition-duration: 1s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform color; + transition-duration: 1s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; + -webkit-transition-duration: 1s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration: 1s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_1s",275,150)}}</div> + </div> + + <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 2s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration: 2s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration: 2s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_2s",275,150)}}</div> + </div> + + <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 4s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration: 4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration: 4s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration: 4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration: 4s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_4s",275,150)}}</div> + </div> + </div> + </dd> + <dt>{{cssxref("transition-timing-function")}}</dt> + <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">Задава функцията, зависеща от времето, по която свойствата да бъдат изчислени за междинните точки на прехода.Тази функция се нарича <em>времева функция </em>и калкулира стойностите на свойствата за тези междинни точки. Повече <a href="/en-US/docs/CSS/timing-function">времеви функции</a> могат да бъдат зададени чрез предоставяне на графика на съответната функция. Тя трябва да се състои от четири точки, които да дефинират кубична крива на Безие ( две крайни и двете междинни, които лесно управляват формата на кривата). Можете да изберете колко плавно (easing) ще се извърши прехода от <a href="http://easings.net/">този помощен сайт</a> . + <div class="cleared"> + <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: ease </code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: ease; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: ease; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: ease; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: ease; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div> + </div> + + <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: linear</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div> + </div> + + <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: step-end</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: step-end; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: step-end; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: step-end; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: step-end; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div> + </div> + + <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: steps(4, end)</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: steps(4, end); + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: steps(4, end); +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-timing-function: steps(4, end); + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-timing-function: steps(4, end); +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div> + </div> + </div> + </dd> + <dt>{{cssxref("transition-delay")}}</dt> + <dd>Определя колко продължително е забавянето между момента, в който свойството е променено и този, в който преходът в действително започва. + <div> + <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 0.5s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { + width: 250px; + height: 125px; +} + +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 0.5s; + transition-timing-function: linear; +} + +.box1 { + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 0.5s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div> + </div> + + <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 1s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { + width: 250px; + height: 125px; +} + +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 1s; + transition-timing-function: linear; +} + +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 1s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_1s",275,150)}}</div> + </div> + + <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 2s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { + width: 250px; + height: 125px; +} + +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 2s; + transition-timing-function: linear; +} + +.box1 { + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 2s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_2s",275,150)}}</div> + </div> + + <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 4s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush: css">.parent { + width: 250px; + height: 125px; +} + +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 4s; + transition-timing-function: ease-in-out; +} + +.box1 { + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top: 25px; + position: absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration: 2s; + -webkit-transition-delay: 4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration: 2s; + transition-delay: 4s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_4s",275,150)}}</div> + </div> + </div> + </dd> +</dl> + +<p>CSS синтаксисът е следния:</p> + +<pre class="brush: css">div { + transition: <property> <duration> <timing-function> <delay>; +}</pre> + +<h2 id="Примери">Примери</h2> + +<h3 id="Пример_за_анимиране_на_едно_свойство">Пример за анимиране на едно свойство</h3> + +<p>Този пример показва преход в големината на шрифта с продължителност 4 секунди и 2 секунди забавяне между момента, в който потребителя посочи с показалеца на мишката върху елемента и началото на анимирания ефект:</p> + +<pre class="brush: css">#delay { + font-size: 14px; + transition-property: font-size; + transition-duration: 4s; + transition-delay: 2s; +} + +#delay:hover { + font-size: 36px; +} +</pre> + +<h3 id="Пример_за_анимиране_на_няколко_свойства">Пример за анимиране на няколко свойства</h3> + +<div class="hidden"> +<h4 id="HTML_съдържание">HTML съдържание</h4> + +<pre class="brush: html; highlight:[3]"><body> + <p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p> + <div class="box">Sample</div> +</body></pre> +</div> + +<h4 id="CSS_съдържание">CSS съдържание</h4> + +<pre class="brush: css; highlight:[8,9]">.box { + border-style: solid; + border-width: 1px; + display: block; + width: 100px; + height: 100px; + background-color: #0000FF; + -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s; + transition: width 2s, height 2s, background-color 2s, transform 2s; +} + +.box:hover { + background-color: #FFCCCC; + width: 200px; + height: 200px; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +</pre> + +<p>{{EmbedLiveSample('Multiple_animated_properties_example', 600, 300)}}</p> + +<h3 id="Когато_списъците_със_стойности_на_свойствата_са_с_различни_дължини">Когато списъците със стойности на свойствата са с различни дължини</h3> + +<p>Ако списъкът със стойности на някое от свойствата на прехода е по-къс от другите, неговите стойности се преповтарят, за да съответстват на дължината на другите. Например:</p> + +<pre class="brush: css">div { + transition-property: opacity, left, top, height; + transition-duration: 3s, 5s; +} +</pre> + +<p>Горното ще се приеме като:</p> + +<pre class="brush: css">div { + transition-property: opacity, left, top, height; + transition-duration: 3s, 5s, 3s, 5s; +}</pre> + +<p>Подобно на това, ако списъкът на някое от свойствата на прехода е по-дълъг от този на списъка с имената на свойствата, върху които трябва да се приложи прехода- {{cssxref("transition-property")}}, то първият бива отрязан, за да пасне. Ако имаме следния CSS:</p> + +<pre class="brush: css">div { + transition-property: opacity, left; + transition-duration: 3s, 5s, 2s, 1s; +}</pre> + +<p>Това ще бъде интерпретирано като:</p> + +<pre class="brush: css">div { + transition-property: opacity, left; + transition-duration: 3s, 5s; +}</pre> + +<h3 id="Използване_на_преходи_за_подчертаване_на_меню">Използване на преходи за подчертаване на меню</h3> + +<p>Често срещана употреба на CSS е за подчертаване елементите на меню, когато потребителя посочва с показалеца на мишката върху тях. Лесно е да се използват преходи, за да се направи ефекта още по-привлекателен.</p> + +<p>Преди да преминем към частите от кода, можете да погледнете <a href="https://codepen.io/anon/pen/WOEpva">примерна демонстрация</a> (ако вашият браузър поддържа преходи).</p> + +<p>Първо, сглобяваме менюто с HTML:</p> + +<pre class="brush: html"><nav> + <a href="#">Home</a> + <a href="#">About</a> + <a href="#">Contact Us</a> + <a href="#">Links</a> +</nav></pre> + +<p>След това, с написаното в CSS пресъздаваме как искаме да изглежда това меню и как да реагира. Съществените аспекти са показани тук:</p> + +<pre class="brush: css">a { + color: #fff; + background-color: #333; + transition: all 1s ease-out; +} + +a:hover, +a:focus { + color: #333; + background-color: #fff; +} +</pre> + +<p>Това стилизиране изразява изгледа на менюто- с цветове за фон и за текст, които се сменяват, когато се посочи с мишката върху дадения елемент ( {{cssxref(":hover")}} ) и когато елементът е на фокус( {{cssxref(":focus")}} ).</p> + +<h2 id="Примери_с_JavaScript">Примери с JavaScript</h2> + +<div class="note"> +<p>Трябва да се внимава, когато се използват преходи непосредствено след:</p> + +<ul> + <li>добавяне на елемент към DOM посредством <code>.appendChild()</code></li> + <li>премахване на свойството на елемента <code>display: none;</code></li> +</ul> + +<p>Това се приема като сякаш първоначалното състояние никога не е настъпвало и елементът е винаги в своето крайно състояние. Това лесно се заобикаля, като се приложи <code>window.setTimeout()</code> с необходимите милисекунди преди да променяте свойството, върху което смятате да приложите преход.</p> +</div> + +<h3 id="Използване_на_преходи_за_гладко_изпълнение_на_JavaScript">Използване на преходи за гладко изпълнение на JavaScript</h3> + +<p>Преходите са чудесен инструмент, който прави нещата да се случват плавно без да нарушавате функционалността зададена с JavaScript. Ето един пример:</p> + +<pre class="brush: html"><p>Click anywhere to move the ball</p> +<div id="foo"></div> +</pre> + +<p>Чрез JavaScript можете да визуализирате как движите топка до определена позиция:</p> + +<pre class="brush: js">var f = document.getElementById('foo'); +document.addEventListener('click', function(ev){ + f.style.transform = 'translateY('+(ev.clientY-25)+'px)'; + f.style.transform += 'translateX('+(ev.clientX-25)+'px)'; +},false); +</pre> + +<p>Чрез прилагане на стилизиране можете да го направите плавно без никакви особени усилия. Просто добавяте преход към елемента и всяка промяна ще се случва плавно:</p> + +<pre class="brush: css">p { + padding-left: 60px; +} + +#foo { + border-radius: 50px; + width: 50px; + height: 50px; + background: #c00; + position: absolute; + top: 0; + left: 0; + transition: transform 1s; +} +</pre> + +<p>Можете да се упражнявате тук: <a href="http://jsfiddle.net/9h261pzo/291/">http://jsfiddle.net/9h261pzo/291/</a></p> + +<h3 id="Отчитане_на_началото_и_края_на_преход">Отчитане на началото и края на преход</h3> + +<p>Можете да използвате събитието {{event("transitionend")}} ,за да засичате дали анимираното движение е свършило да се изпълнява. То е обект тип {{domxref("TransitionEvent")}} и има две допълнително добавени свойства извън типичните за обектите от тип {{domxref("Event")}} :</p> + +<dl> + <dt><code>propertyName</code></dt> + <dd>Низ, който показва името на CSS свойството, чойто преход е приключил.</dd> + <dt><code>elapsedTime</code></dt> + <dd>Плаващо число, което показва броя секунди от които вече тече прехода към момента на инициирането на събитието. Тази стойност не е засегната от стойноста за отложен преход {{cssxref("transition-delay")}}.</dd> +</dl> + +<p>Както обикновено, можете да използвате метода ("EventTarget.addEventListener", "addEventListener()")}} за наблюдаване:</p> + +<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true); +</pre> + +<p>Можете да отчетете началото на прехода чрез {{event("transitionrun")}} (задейства се преди всякакво зададено отлагане във времето) и {{event("transitionstart")}} ( задейства се след всякаво зададено отлагане във времето) по същия начин:</p> + +<pre class="brush: js">el.addEventListener("transitionrun", signalStart, true); +el.addEventListener("transitionstart", signalStart, true);</pre> + +<div class="note"><strong>Бележка</strong>: Събитието <code>transitionend</code> не се задейства, ако преходът е прекратен преди да е завършено поради това, че елементът е променен чрез {{cssxref("display")}}<code>: none</code> или е променена стойността на някое анимиращо свойство.</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '', '')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Първоначална дефиниция</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузъри">Съвместимост с браузъри</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 {{property_prefix("-webkit")}}<br> + 26.0</td> + <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10.5 {{property_prefix("-o")}}<br> + 12.10</td> + <td>3.2 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>transitionend</code> event</td> + <td>1.0<sup>[1]</sup><br> + 26.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.5<sup>[2]</sup><br> + 12<br> + 12.10</td> + <td>3.2<sup>[1]</sup><br> + 6.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}</td> + <td>10</td> + <td>10 {{property_prefix("-o")}}<br> + 12.10</td> + <td>3.2</td> + </tr> + <tr> + <td><code>transitionend</code> event</td> + <td>2.1<sup>[1]</sup></td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>10</td> + <td>10<sup>[2]</sup><br> + 12<br> + 12.10</td> + <td>3.2<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Chrome 1.0, WebKit 3.2 and Android 2.1 изпълняват го като нестандартното <code>webkitTransitionEnd</code>. Chrome 26.0 and WebKit 6.0 го изпълняват като стандартното <code>transitionend</code>.</p> + +<p>[2] Opera 10.5 and Opera Mobile 10 го изпълняват като <code>oTransitionEnd</code>, версия 12 като <code>otransitionend</code> и версия 12.10 като стандартното <code>transitionend</code>.</p> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li>Интерфейсът {{domxref("TransitionEvent")}} и събитието {{event("transitionend")}} .</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Използване на CSS анимации</a></li> +</ul> diff --git a/files/bg/web/css/index.html b/files/bg/web/css/index.html new file mode 100644 index 0000000000..45635d6122 --- /dev/null +++ b/files/bg/web/css/index.html @@ -0,0 +1,106 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Landing + - Layout + - NeedsTranslation + - Reference + - TopicStub + - 'l10n:priority' +translation_of: Web/CSS +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary"><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) e стилов език използван, за да опише оформлението на документи, написани на <a href="/en-US/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> или <a href="/en-US/docs/XML_introduction">XML</a> (включително диалекти на XML като <a href="/en-US/docs/Web/SVG">SVG</a>, <a href="/en-US/docs/Web/MathML">MathML</a> или {{Glossary("XHTML", "", 1)}}). CSS описва как елементите трябва да се явят на екрана, на хартия, по време на разговор или на друга медийна платформа.</p> + +<p>CSS е един от основните езици на <strong>open Web</strong> и е стандартен сред уеб браузърите според <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>. Създаден на нива, CSS1 в момента е неподдържан, CSS2.1 е препоръчителен и <a href="/en-US/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, който в момента е разделен на по-малки модули, напредва към стандартизация.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>CSS Introduction</span> + + <p>If you're new to web development, be sure to read our <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a> article to learn what CSS is and how to use it.</p> + </li> + <li><span>CSS Tutorials</span> + <p>Our <a href="/en-US/docs/Learn/CSS">CSS learning area</a> contains a wealth of tutorials to take you from beginner level to proficiency, covering all the fundamentals.</p> + </li> + <li><span>CSS Reference</span> + <p>Our <a href="/en-US/docs/Web/CSS/Reference">exhaustive CSS reference</a> for seasoned Web developers describes every property and concept of CSS.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Tutorials">Tutorials</h2> + +<p>Our <a href="/en-US/docs/Learn/CSS">CSS Learning Area</a> features multiple modules that teach CSS from the ground up — no previous knowledge required.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt> + <dd>This module starts with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> + <dd>This module discusses text styling fundamentals, including setting fonts, boldness, italics, line and letter spacing, text drop shadows, and other text properties. This module finishes with applying custom fonts to your page, and styling lists and links.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> + <dd>This module looks at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model, then look at controlling box layouts by setting margins, borders, and padding, custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> + <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so you can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and newfangled layout tools like flexbox.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Reference">Reference</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Reference">CSS reference</a>: This exhaustive reference for seasoned Web developers describes every property and concept of CSS.</li> + <li>CSS key concepts: + <ul> + <li>The <a href="/en-US/docs/Web/CSS/Syntax">syntax and forms of the language</a></li> + <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a>, <a href="/en-US/docs/Web/CSS/Inheritance">inheritance</a> and <a href="/en-US/docs/Web/CSS/Cascade">the Cascade</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS units and values</a></li> + <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a> and <a href="/en-US/docs/Web/CSS/margin_collapsing">margin collapse</a></li> + <li>The <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">containing block</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="The stacking context">Stacking</a> and <a href="/en-US/docs/Web/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts</li> + <li><a href="/en-US/docs/Web/CSS/initial_value">Initial</a>, <a href="/en-US/docs/Web/CSS/computed_value">computed</a>, <a href="/en-US/docs/Web/CSS/used_value">used</a>, and <a href="/en-US/docs/Web/CSS/actual_value">actual</a> values</li> + <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">CSS shorthand properties</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li> + <li><a href="/en-US/docs/Web/CSS/animation">Animation</a></li> + </ul> + </li> +</ul> + +<h2 class="Tools" id="Cookbook">Cookbook</h2> + +<p>The <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a> aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.</p> + +<h2 class="Tools" id="Tools_for_CSS_development">Tools for CSS development</h2> + +<ul> + <li>You can use the <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> to check if your CSS is valid. This is an invaluable debugging tool.</li> + <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> lets you view and edit a page's live CSS via the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> and <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> tools.</li> + <li>The <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer extension</a> for Firefox lets you track and edit live CSS on watched sites.</li> + <li>The Web community has created various other <a href="/en-US/docs/Web/CSS/Tools">miscellaneous CSS tools</a> for you to use.</li> +</ul> + +<h2 id="Meta_bugs">Meta bugs</h2> + +<ul> + <li>Firefox: {{bug(1323667)}}</li> +</ul> +</div> +</div> +</section> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Demos_of_open_web_technologies#CSS">CSS demos</a>: Get a creative boost by exploring examples of the latest CSS technologies in action.</li> + <li>Web languages to which CSS is often applied: <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/SVG">SVG</a>, <a href="/en-US/docs/Web/MathML">MathML</a>, {{Glossary("XHTML", "", 1)}}, and <a href="/en-US/docs/XML_introduction">XML</a>.</li> + <li>Mozilla technologies that make extensive use of CSS: <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/en-US/docs/Mozilla/Firefox">Firefox</a>, and <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/en-US/docs/Mozilla/Add-ons">extensions</a> and <a href="/en-US/docs/Mozilla/Add-ons/Themes">themes</a>.</li> + <li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla mailing list</a></li> + <li><a href="Stack Overflow|http://stackoverflow.com/questions/tagged/css">Stack Overflow questions about CSS</a></li> +</ul> diff --git a/files/bg/web/css/pseudo-classes/index.html b/files/bg/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..090a054efa --- /dev/null +++ b/files/bg/web/css/pseudo-classes/index.html @@ -0,0 +1,145 @@ +--- +title: Псевдокласове +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Избор на елементи + - Псевдоклас + - Селектори + - справочник +translation_of: Web/CSS/Pseudo-classes +--- +<div>{{CSSRef}}</div> + +<p><strong>Псевдокласовете</strong> са ключови думи, добавени към селектор, описващи специфично състояние на указаните елементи. Примерно, можем да използваме {{ Cssxref(":hover") }} за да сменим фона на елемент, когато потребителят мине с мишката върху него.</p> + +<pre><code>div:hover { + background-color: #F89B4D; +}</code></pre> + +<p>Чрез псевдокласовете можете да определяте външния вид на елемент, не само според местоположението му в дървото на документа (пр. {{ cssxref(":first-child") }}), но също и според външни фактори, каквито са историята на разглеждането (пр. {{ cssxref(":visited") }}), състоянието на елемента (пр. {{ cssxref(":checked") }} при някои елементи за формуляри), мястото на мишката (пр. {{ cssxref(":hover") }} позволява да се установи дали мишката се намира върху елемента)...</p> + +<div class="note"> +<p><strong>Бележка:</strong> За разлика от псевдокласовете, <a href="/bg/docs/Web/CSS/Pseudo-elements">псевдоелементите</a> служат за стилизиране на конкретна част от html елемент. </p> +</div> + +<h2 id="Правопис">Правопис</h2> + +<pre class="syntaxbox">selector:pseudo-class { + свойство: стойност; +} +</pre> + +<p>Както при обикновените класове, можете да изредите заедно колкото искате псевдокласове в един указател за избор на елементи (селектор).</p> + +<h2 id="Индекс_на_стандартни_псевдокласове">Индекс на стандартни псевдокласове:</h2> + +<div class="index"> +<ul> + <li>{{ Cssxref(":active") }}</li> + <li>{{ cssxref(':any')}}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":default") }}</li> + <li>{{ Cssxref(":dir", ":dir()")}}</li> + <li>{{ Cssxref(":disabled") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":first") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":fullscreen") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":indeterminate") }}</li> + <li>{{ Cssxref(":in-range") }}</li> + <li>{{ Cssxref(":invalid") }}</li> + <li>{{ Cssxref(":lang", ":lang()") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":left") }}</li> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":not", ":not()") }}</li> + <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li> + <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li> + <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li> + <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li> + <li>{{ Cssxref(":only-child") }}</li> + <li>{{ Cssxref(":only-of-type") }}</li> + <li>{{ Cssxref(":optional") }}</li> + <li>{{ Cssxref(":out-of-range") }}</li> + <li>{{ Cssxref(":read-only") }}</li> + <li>{{ Cssxref(":read-write") }}</li> + <li>{{ Cssxref(":required") }}</li> + <li>{{ Cssxref(":right") }}</li> + <li>{{ Cssxref(":root") }}</li> + <li>{{ Cssxref(":scope") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":valid") }}</li> + <li>{{ Cssxref(":visited") }}</li> +</ul> +</div> + +<h2 id="Спецификации"><span>Спецификации</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Fullscreen') }}</td> + <td>{{ Spec2('Fullscreen') }}</td> + <td>Дефинира <code>:fullscreen</code>.</td> + </tr> + <tr> + <td>{{ SpecName('HTML WHATWG') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Без промяна спрямо {{ SpecName('HTML5 W3C') }}.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Дефинира <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code> и <code>:matches()</code>.<br> + Без значителни промени спрямо псевдокласовете дефинирани в {{SpecName('CSS3 Selectors')}} и {{SpecName('HTML5 W3C')}} (семантичното значение не е взето предвид).</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Дефинира семантично значение в контекста на HTML за <code>:link</code>, <code>:visited</code>, <code>:active</code>, <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> и <code>:indeterminate</code>.<br> + Дефинира <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code> и <code>:dir()</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Дефинира <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> и <code>:read-write</code>, но без да ги обвързва със семантично значение.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Дефинира <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> и <code>:not()</code>.<br> + Дефинира синтаксиса на <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> и <code>:indeterminate</code>, но без да ги обвързва със семантично значение.<br> + Без значителни промени в псевдокласовете дефинирани в {{SpecName('CSS2.1')}}.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Дефинира <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code> и <code>:focus</code>.<br> + Без значителни промени в псевдокласовете дефинирани в {{SpecName('CSS1')}}.</td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Дефинира <code>:link</code>, <code>:visited</code> и <code>:active</code>, но без да ги обвързва със семантично значение.</td> + </tr> + </tbody> +</table> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a></li> +</ul> diff --git a/files/bg/web/css/transition-delay/index.html b/files/bg/web/css/transition-delay/index.html new file mode 100644 index 0000000000..95d3000e7b --- /dev/null +++ b/files/bg/web/css/transition-delay/index.html @@ -0,0 +1,356 @@ +--- +title: transition-delay +slug: Web/CSS/transition-delay +tags: + - CSS + - CSS преходи + - CSS свойство + - Справка +translation_of: Web/CSS/transition-delay +--- +<div>{{CSSRef}}</div> + +<p>СSS sвойството <strong><code>transition-delay</code></strong> определя колко време трябва да се изчака преди да започне <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">ефекта на прехода</a> за промянана стойността на зададеното свойство.</p> + +<div>{{EmbedInteractiveExample("pages/css/transition-delay.html")}}</div> + +<p class="hidden">Източникът на този интерактивен пример се съхранява в GitHub. Ако желаете да допринесете към проекта за интерактивните примери, моля клонирайте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и ни изпратете заявка за pull.</p> + +<p>Забавянето може да е нула, положително или отрицателно:</p> + +<ul> + <li>Стойност <code>0s</code> (или <code>0ms</code>) ще инициира незабавно преходния ефект.</li> + <li>Положителна стойност ще забави началото на преходния ефект със съотвеното време.</li> + <li>Отрицателна стойност ще инициира преходния ефект незабавно, като самият ефект ще стартира със съответния междинен момент. Т.е.м ефектът ще бъде анимиран, сякаш той вече тече толкова време.</li> +</ul> + +<p>Можете да зададете множество отлагания, което се употребява при преходи на на няколко свойства. Всяко отлагане ще бъде приложено към съответното свойство, така както са упоменати в списъка {{cssxref("transition-property")}}, който пък списък има приоритет и се води главен списък. Ако има по-малко на брой отлагания, отколкото свойства в главния списък, то списъкът с отлаганията ще бъде повтарян докато не се изравни по членове с главния. Ако пък има повече отлагания, отколкото свойства в главния списък, то списъкът със забавянията ще бъде отрязан до толкова, колкото да съответства на главния. И в двата случая CSS декларирането си остава валидно.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: css no-line-numbers">/* <time> values */ +transition-delay: 3s; +transition-delay: 2s, 4ms; + +/* Global values */ +transition-delay: inherit; +transition-delay: initial; +transition-delay: unset; +</pre> + +<h3 id="Стойности">Стойности</h3> + +<dl> + <dt>{{cssxref("<time>")}}</dt> + <dd>Отнася се до времето, което се ичаква между старта на преходния ефект и промяната на стойността на свойството.</dd> +</dl> + +<h3 id="Официален_синтаксис">Официален синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Примери">Примери</h2> + +<div> +<div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 0.5s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:0.5s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:0.5s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div> +</div> + +<div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 1s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:1s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:1s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_1s",275,150)}}</div> +</div> + +<div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 2s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:2s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:2s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_2s",275,150)}}</div> +</div> + +<div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 4s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:4s; + transition-timing-function: ease-in-out; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:4s; + transition-timing-function: ease-in-out; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_4s",275,150)}}</div> +</div> +</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статут</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#transition-delay-property', 'transition-delay')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Първоначална дефиниция</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Съвместимост_с_браузъри">Съвместимост с браузъри</h2> + +<div class="hidden">Таблицата за съвместимост на тази страница е генерирана от структурирани данни. Ако желает еда допринесете към данните, моля отидете на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и ни изпратете заявка за pull.</div> + +<p>{{Compat("css.properties.transition-delay")}}</p> + +<h2 id="Вижте_същo">Вижте същo</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Изплозване на CSS преходи</a></li> + <li>{{domxref("TransitionEvent")}} API</li> +</ul> diff --git a/files/bg/web/css/transition/index.html b/files/bg/web/css/transition/index.html new file mode 100644 index 0000000000..a1060b9dd2 --- /dev/null +++ b/files/bg/web/css/transition/index.html @@ -0,0 +1,106 @@ +--- +title: transition +slug: Web/CSS/transition +tags: + - CSS + - CSS преходи + - CSS свойства + - Справка +translation_of: Web/CSS/transition +--- +<div>{{CSSRef}}</div> + +<p><a href="/en/CSS" title="CSS">CSS </a>свойството <strong><code>transition</code></strong> е <a href="/en-US/docs/Web/CSS/Shorthand_properties">общото свойство</a> за {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }} и {{ cssxref("transition-delay") }}.</p> + +<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div> + +<p class="hidden">Източникът за този интерактивен пример се съхранява в GitHub. Ако желаете да допринесете към проекта за интерактивния пример, моля клонирайте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и ни изпратете запитване за pull.</p> + +<p>Преходите ви позволяват да определите преминаването между две състояния на елемент. Различните състояния могат да бъдат зададени чрез <a href="/en-US/docs/Web/CSS/Pseudo-classes">псево класове</a> като {{cssxref(":hover")}} или {{cssxref(":active")}} или динамично зададени чрез JavaScript.</p> + +<h2 id="Синтаксис"><strong>Синтаксис</strong></h2> + +<pre class="brush:css no-line-numbers">/* За 1 свойство */ +/* property name | duration */ +transition: margin-right 4s; + +/* property name | duration | delay */ +transition: margin-right 4s 1s; + +/* property name | duration | timing function */ +transition: margin-right 4s ease-in-out; + +/* property name | duration | timing function | delay */ +transition: margin-right 4s ease-in-out 1s; + +/* За 2 свойства */ +transition: margin-right 4s, color 1s; + +/* За всички променени свойства */ +transition: all 0.5s ease-out; + +/* Глобални стойности */ +transition: inherit; +transition: initial; +transition: unset; +</pre> + +<p>Свойството <code>transition</code> се задава като един или повече прехода, всеки от които е за отделно свойство, разделени чрез запетая.</p> + +<p>Всеки преход за отделните свойства описва преходът, който трябва да бъде приложен на съответното свойство(или на специалните стойности <code>all</code> и <code>none</code>). Това включва:</p> + +<ul> + <li>нито една или една стойност, представляваща свойство върху което да се приложи прехода. Може да бъде всяко от следните: + <ul> + <li>ключовата дума <code>none</code></li> + <li>ключовата дума <code>all</code></li> + <li>упоменаване на CSS свойство {{cssxref("<custom-ident>")}} .</li> + </ul> + </li> + <li> {{cssxref("<single-transition-timing-function>")}} нито една или една стойност, представляваща времевата функция, която да се употребява</li> + <li>нито една, една или две стойности {{cssxref("<time>")}}. Първата стойност, която може да бъде парсната като време се задава на {{cssxref("transition-duration")}} а втората, която може да бъде парсната като време, се задава на {{cssxref("transition-delay")}}.</li> +</ul> + +<p>Вижте, <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#When_property_value_lists_are_of_different_lengths">как се употребяват</a> списъците от стойности на свойства, когато са с различна дължина. Накратко, ако има повече описания на прехода, отколкото реалния брой на свойствата за анимиране, то тези излишни описания се пренебрегват.</p> + +<h3 id="Официален_синтаксис">Официален синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Примери">Примери</h2> + +<p>Има няколко примера за CSS преходи в статията <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">Използване на CSS Преходи</a> .</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статут</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Първоначална дефиниция</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Съвместимост_с_браузъри">Съвместимост с браузъри</h2> + +<div class="hidden">Таблицата за съвместимост на тази страница е генерирана от структурирани данни. Ако желаете да допринесете, моля, посетете <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и ни изпратете запитване за pull .</div> + +<p>{{Compat("css.properties.transition")}}</p> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li><a href="/bg/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Използване на CSS преходи</a></li> + <li>{{ domxref("TransitionEvent") }}</li> +</ul> diff --git a/files/bg/web/guide/index.html b/files/bg/web/guide/index.html new file mode 100644 index 0000000000..e98031753f --- /dev/null +++ b/files/bg/web/guide/index.html @@ -0,0 +1,56 @@ +--- +title: Web developer guides +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +<p><span class="seoSummary"><strong>These articles provide how-to information to help you make use of specific technologies and APIs.</strong></span></p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Learn/HTML">HTML Learning Area</a></dt> + <dd class="landingPageList"><strong>HyperText Markup Language (HTML)</strong> is the core language of nearly all Web content. Most of what you see on screen in your browser is described, fundamentally, using HTML.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Learn/CSS">CSS Learning Area</a></dt> + <dd class="landingPageList">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Events developer guide</a></dt> + <dd class="landingPageList">Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Graphics on the Web</a></dt> + <dd class="landingPageList">Modern Web sites and applications often need to present graphics of varying sophistication.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Guide to Web APIs</a></dt> + <dd class="landingPageList">A list of all Web APIs and what they do.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> + <dd>JavaScript is the powerful scripting language used to create applications for the Web.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Localizations and character encodings</a></dt> + <dd class="landingPageList">Browsers process text as Unicode internally. However, a way of representing characters in terms of bytes (character encoding) is used for transferring text over the network to the browser. The <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">HTML specification recommends the use of the UTF-8 encoding</a> (which can represent all of Unicode), and regardless of the encoding used requires Web content to declare that encoding.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Mobile Web Development</a></dt> + <dd class="landingPageList">This page provides an overview of some of the main techniques needed to design web sites that work well on mobile devices. If you're looking for information on Mozilla's Firefox OS project, see the <a href="https://developer.mozilla.org/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a> page. Or you might be interested in details about <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android">Firefox for Android</a>.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Optimization and performance</a></dt> + <dd class="landingPageList">When building modern Web apps and sites, it's important to make your content work quickly and efficiently. This lets it perform effectively for both powerful desktop systems and weaker handheld devices.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></dt> + <dd class="landingPageList">The Web platform provides different methods of parsing and serializing XML, each with its own pros and cons.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></dt> + <dd class="landingPageList"><strong>WOFF</strong> (<strong>Web Open Font Format</strong>) is a font file format that is free for anyone to use on the web.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">Using FormData Objects</a></dt> + <dd class="landingPageList">The <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> object lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. It's primarily intended for sending form data, but can be used independently from forms in order to transmit keyed data. The transmission is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data".</dd> + <dt class="landingPageList"><a href="/en-US/docs/Glossary">Glossary</a></dt> + <dd class="landingPageList">Defines numerous technical terms related to the Web and Internet.</dd> +</dl> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li> +</ul> diff --git a/files/bg/web/guide/графики/index.html b/files/bg/web/guide/графики/index.html new file mode 100644 index 0000000000..76930482d8 --- /dev/null +++ b/files/bg/web/guide/графики/index.html @@ -0,0 +1,46 @@ +--- +title: Графики в мрежовото пространство +slug: Web/Guide/Графики +tags: + - 2D + - Видео + - Графики + - Платно + - аудио + - уеб +translation_of: Web/Guide/Graphics +--- +<p> </p> + +<p><span class="seoSummary">Уеб сайтовете и приложенията често трябва да представят графики. Статичните изображения могат лесно да се показват посредством елемента {{HTMLElement ("img")}} или чрез задаване на фона на HTML елементи с помощта на {{cssxref ("background-image")}}. Също така можете да създавате </span>on-the-fly <span class="seoSummary">графики, или да ги обработвате след това. Тези статии дават представа как можете да постигнете това.</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="2D_Графики">2D Графики</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt> + <dd>Елементът {{HTMLElement("canvas")}} осигурява APIs (<em>Приложно-програмeн интерфейс</em>), за рисуване на 2D графики, използвайки JavaScript.</dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dd>Maщабируема Векторна Графика (SVG) Ви позволява да използвате линии, криви и други геометрични форми за изобразяване на графики. С помощта на векторите, можете да създавате избражения, които се мащабират във всякакви размери без да се пикселизират.<span class="alllinks"><a href="/en-US/docs/tag/Graphics">Виж повече...</a></span></dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="3D_Графики">3D Графики</h2> + +<dl> + <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd>Ръководство за стартиране с WebGL, приложно-програмeн интерфейс за 3D графики в мрежата. Тази технология Ви позволява да използвате стандартен OpenGL ES в уеб съдържание.</dd> +</dl> + +<h2 id="Видео">Видео</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Използване на HTML5 аудио и видео</a></dt> + <dd>Вграждане на видео и/или аудио в уеб страница и контролиране на възпроизвеждането им.</dd> + <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> + <dd>RTC в WebRTC, означава комуникации в реално време. Това е технология, която позволява поточно предаване на аудио / видео и споделяне на данни между браузър клиенти (пиъри).</dd> +</dl> +</div> +</div> diff --git a/files/bg/web/html/element/i/index.html b/files/bg/web/html/element/i/index.html new file mode 100644 index 0000000000..8913e824da --- /dev/null +++ b/files/bg/web/html/element/i/index.html @@ -0,0 +1,115 @@ +--- +title: <i> +slug: Web/HTML/Element/i +tags: + - HTML + - Web + - Елемент + - семантичен + - стил + - шрифт +translation_of: Web/HTML/Element/i +--- +<p> <strong>HTML елементът <code><i></code></strong> представя част от текст, която трябва да изпъкне поради някаква причина - технически термин, фраза на чужд език или мисли на героя. Обикновено се изобразява в курсив.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибути">Атрибути</h2> + +<p>Елементът използва само <a href="/bg/docs/Web/HTML/Global_attributes">глобални атрибути</a>.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><p>The Latin phrase <i class="latin">Veni, vidi, vici</i> is often +mentioned in music, art, and literature.</p> +</pre> + +<h3 id="Изход">Изход</h3> + +<p>The Latin phrase <em>Veni, vidi, vici</em> is often mentioned in music, art, and literature.</p> + +<h2 id="Бележки">Бележки</h2> + +<p>В по-ранните версии на HTML спецификациите, тагът <code><i></code> е бил просто елемент за изобразяване на текст в курсив, така както тагът <code><b></code> е бил използван за изобразяване на текст с удебелени букви. Това вече не е валидно, защото тези тагове сега задават семантичното значение, а не типографското представяне. Тагът <code><i></code> трябва да представя част от текст с различно семантично значение и типичното му типографско изобразяване е текст в курсив. Това означава, че браузърът обикновено изобразява съдържанието на този таг в курсив, въпреки че по дефиниция не се изисква да е така.</p> + +<p>Използвайте този елемент, само когато няма друг по-подходящ семантичен елемент. Примерно:</p> + +<ul> + <li>Използвайте {{HTMLElement("em")}}, за да наблегнете или подчертаете.</li> + <li>Използвайте {{HTMLElement("strong")}}, за да обозначите важен текст.</li> + <li>Използвайте {{HTMLElement("mark")}}, за да обозначите свързаност.</li> + <li>Използвайте {{HTMLElement("cite")}}, за да маркирате име на творба-книга, пиеса или песен.</li> + <li>Използвайте {{HTMLElement("dfn")}}, за да маркирате дефиниция на термин.</li> +</ul> + +<p>Добра идея е да се използва атрибута <strong>class</strong>, за да се представи причината за употребата на елемента. По този начин, ако на по-късен етап се наложи промяна при визуализирането, може да се направи избирателно чрез style sheets.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост">Съвместимост</h2> + + + +<p>{{Compat("html.elements.i")}}</p> + +<p>{{HTMLRef}}</p> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li>{{HTMLElement("em")}}</li> +</ul> diff --git a/files/bg/web/html/element/index.html b/files/bg/web/html/element/index.html new file mode 100644 index 0000000000..0d77b00ffa --- /dev/null +++ b/files/bg/web/html/element/index.html @@ -0,0 +1,105 @@ +--- +title: HTML element reference +slug: Web/HTML/Element +tags: + - Basic + - Element + - HTML + - NeedsTranslation + - Reference + - TopicStub + - Web + - 'l10n:priority' +translation_of: Web/HTML/Element +--- +<div>{{HTMLSidebar("Elements")}}</div> + +<p><span class="seoSummary">На страницата са изредени всички HTML елементи({{Glossary("HTML")}} {{Glossary("Element","elements")}}).</span> Групирани са по предназначение, за да намирате желаното по-лесно.</p> + +<div class="note"> +<p>За повече основни сведения относно елементите и атрибутите в HTML, проверете <a href="/bg/docs/Learn/HTML/Въведение_в_HTML">раздела за елементите в статията Въведение в HTML</a>.</p> +</div> + +<h2 id="Кореновият_елемент">Кореновият елемент</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Метаданните_на_документа">Метаданните на документа</h2> + +<p>Метаданните съдържат информация за сайта - стилове, скриптове и данни, които помагат на различни видове софтуер ({{Glossary("search engine", "търсещи машини")}}, {{Glossary("Browser","уеб четци")}}, и др.) да използват и възпроизвеждат страницата. Метаданните за стиловете и скриптовете може да са зададени в страницата или чрез връзка към външен файл, който съдържа самите данни.</p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Разделение_на_съдържанието">Разделение на съдържанието</h2> + +<p>Елементите за разделение на съдържанието позволяват да се построи документа като съвкупност от отделни логически парчета. Използвайте елементите за разделение на съдържанието, за да създадете подробна схема на съдържанието на страницата. Включете елементите <em>header</em>, <em>footer</em> <em>navigation</em>, и елементите за заглавната част, за да обособите частите на съдържанието.</p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Текстово_съдържание">Текстово съдържание</h2> + +<p>Use HTML text content elements to organize blocks or sections of content placed between the opening {{HTMLElement("body")}} and closing <code></body></code> tags. Important for {{Glossary("accessibility")}} and {{Glossary("SEO")}}, these elements identify the purpose or structure of that content. </p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Семантика_в_текстовия_поток">Семантика в текстовия поток</h2> + +<p>Използвайте елементите за текстовия поток за придаване на определено значение, строеж или изглед на отделна дума ред или част от текста.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Изображения_и_мултимедия">Изображения и мултимедия</h2> + +<p>HTML поддържа различни мултимедийни източници – изображения, аудио и видео.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Вложено_съдържание">Вложено съдържание</h2> + +<p>Освен обичайното мултимедийно съдържание, HTML може да включва и разни други типове съдържание. В тези случаи не винаги е лесно да се взаимодейства със съдържанието.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Скриптове">Скриптове</h2> + +<p>За да може да се създава динамично съдържание и уеб приложения, HTML поддържа употребата на скриптови езици. Най-често това е JavaScript. Определени елементи поддържат тези възможности.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Обозначаване_на_промени">Обозначаване на промени</h2> + +<p>Тези елементи ви дават възможност да укажете, че дадени части от текста са променени.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="Таблично_съдържание">Таблично съдържание</h2> + +<p>The elements here are used to create and handle tabular data.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Формуляри">Формуляри</h2> + +<p>HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Елементи_за_взаймодействие_с_потребителя">Елементи за взаймодействие с потребителя</h2> + +<p>HTML offers a selection of elements which help to create interactive user interface objects.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Web_Components">Web Components</h2> + +<p>Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="Остарели_и_отхвърлени_елементи">Остарели и отхвърлени елементи</h2> + +<div class="warning"> +<p><strong>Warning:</strong> These are old HTML elements which are deprecated and should not be used. <strong>You should never use them in new projects, and should replace them in old projects as soon as you can.</strong> They are listed here for informational purposes only.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/bg/web/html/element/main/index.html b/files/bg/web/html/element/main/index.html new file mode 100644 index 0000000000..3594afe2b5 --- /dev/null +++ b/files/bg/web/html/element/main/index.html @@ -0,0 +1,140 @@ +--- +title: <main> +slug: Web/HTML/Element/main +tags: + - HTML + - HTML групиране на съдържанието + - main + - Елемент + - референция +translation_of: Web/HTML/Element/main +--- +<div>{{HTMLRef}}</div> + +<div><strong>HTML елементът <code><main></code> </strong> представя основното съдържание на частта {{HTMLElement("body")}} на документа, на негова част или на приложението. Тази зона, предназначена за основното съдържание, се състои от информация, която е пряко свързана с главната тема на документа или основната функционалност на приложението, или пък я допълва. Ако е необходимо, бихте могли да използвате няколко <code><main></code> елемента в една и съща страница. Например, когато имате страница, която презентира няколко статии - всяка от които в собствен {{HTMLElement("article")}} елемент и всяка една от тях има допълнителни материали в себе си (като лента с инструменти за обработка, реклами и т.н.). В такъв случай, има смисъл да включите <code><main></code> елемент във всяка една статия, за да можете да обособите водещото съдържание за всяка конкретна статия.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>None; both the starting and ending tags are mandatory.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> (WHATWG). However, the W3C specification doesn't permit <code><main></code> to be used as a descendant of {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>The <code>main</code> role is applied to <code><main></code> by default, and the <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> role is permitted as well.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибути">Атрибути</h2> + +<p>Този елемент може да съдържа само глобалните атрибути (<a href="/en-US/docs/HTML/Global_attributes">global attributes</a>).</p> + +<h2 id="Бележки_за_употребата">Бележки за употребата</h2> + +<p>Съдържанието на елемента <code><main></code> трябва да бъде уникално за документа или за частта, която го съдържа. Съдържание, което е повтарящо се през съответния набор от документи или частите на документа като: странични ленти, линкове за навигация, информация за правата, лога на сайта и форми за търсене не бива да са включени, освен ако формата за търсене не е основната функционалност на страницата.</p> + +<p><code><main></code> не допринася за схемата на документа. За разлика от елементи като {{HTMLElement("body")}}, заглавия {{HTMLElement("h2")}}, и други, <code><main></code> не влияе на DOM концепцията за структуриране на страницата. Функцията на този елемент е стриктно информативна.</p> + +<h3 id="Разлики_между_WHATWG_и_W3C_спецификациите">Разлики между WHATWG и W3C спецификациите</h3> + +<p>Дефиницията на елемента <code><main></code> е значително различна между стандарта <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-main-element">WHATWG's living standard </a>(спецификациите, които MDN по споразумение) и <a href="https://w3c.github.io/html/grouping-content.html#the-main-element">the W3C specification</a>. Ето разликите между двете спецификации по примерите, дадени по-горе:</p> + +<ul> + <li>Стандартът за HTML WHATWG позволява няколко елемента <code><main></code> на една страница, докато версията на <a href="https://www.w3.org/TR/html/grouping-content.html#the-main-element">the W3C version of the specification</a> не позволява. Прави изключение случаят в който освен един, всички останали елементи <code><main></code> са скрити посредством атрибута {{htmlattrxref("hidden")}}.</li> + <li>Спецификацията WHATWG разрешава <code><main></code>да бъде използван навсякъде, където е позволено да има <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a> . Противно на това, версията на W3C не позволява <code><main></code> да е вложен в {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}} или {{HTMLElement("nav")}}.</li> +</ul> + +<p>Изглеждат много малко разликите, но елементът <code><main></code> е сравнително прост на функционално ниво. Ако се игнорират тези разлики, то те биха могли да доведат до значителни последици.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><!-- other content --> + +<main> + <h1>Apples</h1> + <p>The apple is the pomaceous fruit of the apple tree.</p> + + <article> + <h2>Red Delicious</h2> + <p>These bright red apples are the most common found in many + supermarkets.</p> + <p>... </p> + <p>... </p> + </article> + + <article> + <h2>Granny Smith</h2> + <p>These juicy, green apples make a great filling for + apple pies.</p> + <p>... </p> + <p>... </p> + </article> +</main> + +<!-- other content --></pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#semantics.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Премахва органичението <code><main></code> да не бъде използван няколко пъти в документ или като вложен в елемента {{HTMLElement("article")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Без промяна от {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузърите">Съвместимост с браузърите</h2> + +<p>Елементът <code><main></code> е широко поддържан. За Internet Explorer 11 и надолу, е препоръчително да се добави ARIA role of <code>"main"</code> kym elementa <code><main></code> , за да се подсигурите, че е достъпен(екранни четци като JAWS, използвани със стари версии на Internet Explorer, ще могат да разберат семантичното значение на елемента <code><main></code>, когато този атрибут <code>role</code> бъде добавен).</p> + +<pre class="brush: html"><main role="main"> + ... +</main> +</pre> + + + +<p>{{Compat("html.elements.main")}}</p> + +<h2 id="Виж_също">Виж също</h2> + +<ul> + <li>Основни структурни елементи: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li> + <li>Елеемнти, оказващи отделните части: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}</li> +</ul> diff --git a/files/bg/web/html/index.html b/files/bg/web/html/index.html new file mode 100644 index 0000000000..2833c509dd --- /dev/null +++ b/files/bg/web/html/index.html @@ -0,0 +1,86 @@ +--- +title: HTML +slug: Web/HTML +tags: + - HTML + - HTML Lesson + - HTML Programming + - HTML Tutorials + - HTML5 + - Hyper text + - Landing + - NeedsTranslation + - Reference + - TopicStub + - Web + - What is HTML + - 'l10n:priority' +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p><mark>HTML</mark> (HyperText Markup Language – език за обозначаване на свръх-текст) е в основата на Уеб<span class="seoSummary">. Той описва и задава съдържанието на всяка уеб-страница. Из ползвате и други допълнителни технологии освен HTML. <a href="/docs/Web/CSS">CSS</a> си използва за задаването на външния вид/представянето на страницата, а <a href="/docs/Web/JavaScript">JavaScript</a> определя действията които се случват при някакви събития, настъпващи в страницата.</span></p> + +<p>"Свръх-текст" или вече приетото "Хипер-текст", означава че в текста има препратки, които свързват две страници в един сайт една с друга или връзки между два отделни сайта. Връзките са от основно значение за уеб. Като качвате съдържание в Интернет и свързвайки го със страници, създадени от други хора, вие ставате действен участник в Световната Мрежа.</p> + +<p>HTML използва "маркиране" за анотиране на текст, снимки, и друго съдаржание за показване в уеб браузъра. HTML маркирането включва специални "елементи" като {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, и много други.</p> + +<p>Статиите по-долу ще ви помогнат да научите повече за HTML.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>HTML Въведение</span> + + <p>Ако сте нов в уеб програмирането,не забравяйте да прочетете нашите статии <a href="/bg/docs/Learn/Да_започнем_с_Мрежата/Основи_на_HTML">Основи на HTML</a> и да научите какво е HTML и как се използва.</p> + </li> + <li><span>HTML Уроци</span> + <p>Статии които показват как да изпозлвате HTML, както и уроци с пълни примери. Разгледайте <a href="/docs/Learn/HTML">частта за обучение по HTML</a>.</p> + </li> + <li><span>HTML Препратки</span> + <p>В нашата разширена секция <a href="/docs/Web/HTML/Reference">HTML препратки</a> , ще намерите детайли за всеки елемент и атрибут в HTML.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Уроци за начинаещи</h2> + +<p>Нашата <a href="/docs/Learn/HTML">HTML среда за обучение</a> включва множество модули , които изучават HTML от основите нагоре — без да се изискват предварителни знания.</p> + +<dl> + <dt><a href="/docs/Learn/HTML/Introduction_to_HTML">Въведение в HTML</a></dt> + <dd>Този модул определя основите, показвайки как да използваме важните понятия и синтакс , такъв като търсенето и добавянето на HTML към текст, как да създаваме хиперлинкове и как да използваме HTML за да структурираме уеб страница.</dd> + <dt><a href="/docs/Learn/HTML/Multimedia_and_embedding">Мултимедия и вграждане</a></dt> + <dd>Този модул изследва/показва как може да използваме HTML за да вмъкнем мултимедия в нашите уеб страници, включвайки различни начини как снимките могат да бъдат вмъквани и как да вмъкваме видео, аудио и дори цели други уеб страници.</dd> + <dt><a href="/docs/Learn/HTML/Tables">HTML таблици</a></dt> + <dd>Представянето на таблични данни на уеб страница на разбираем и достъпен начин може да бъде предизвикателство. Този модул обхваща основите на таблиците, заедно с по-сложни функции като прилагане на надписи и обобщения.</dd> + <dt><a href="/docs/Learn/HTML/Forms">HTML форми</a></dt> + <dd>Формите са много важна част от УЕБ — те осигуряват голяма част от функционалността, която ви е нужна за взаимодействие с уеб сайтовете. Като регистриране и вписване, изпращане на обратна връзка, покупка на продукти и още много. Този модул ще ви помогне да стартирате със създаването на форми от клиентската страна.</dd> + <dt><a href="https://developer.mozilla.org/docs/Learn/HTML/Howto">Използване на HTML за решаването на общи проблеми</a></dt> + <dd>Предоставя връзки към раздели, които обясняват как да използваме HTML за да решаваме често срещани проблеми, когато създаваме уеб страница: работим с заглавия, добавяме снимки или видео, подчертаваме съдържанието, създаваме основни форми и др.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Препратки">Препратки</h2> + +<dl> + <dt class="landingPageList"><a href="/docs/Web/HTML/Reference">HTML препратки</a></dt> + <dd class="landingPageList">HTML се състои от <strong>елементи</strong>, всеки от който може да мъде модифициран по някакъв брой от атрибути. HTML документите са свързани един друг чрез <a href="/docs/Web/HTML/Link_types">връзки</a>.</dd> + <dt class="landingPageList"><a href="/docs/Web/HTML/Element">HTML елементи - препратки</a></dt> + <dd class="landingPageList">Разгледайте списък с всички <a class="glossaryLink" href="/en-US/docs/Glossary/HTML">HTML</a> <a class="glossaryLink" href="/docs/Glossary/Element">елементи</a>.</dd> + <dt class="landingPageList"><a href="/docs/Web/HTML/Attributes">HTML атрибути - препратки</a></dt> + <dd class="landingPageList">Елементите в HTML имат <strong>атрибути</strong>. Това са допълнителни стойности, които конфигурират или коригират поведението им по различни начини.</dd> + <dt class="landingPageList"><a href="/docs/Web/HTML/Global_attributes">Глобални атрибути</a></dt> + <dd class="landingPageList">Глобалните атрибути могат да бъдат посочени за всички <a href="/en-US/docs/Web/HTML/Element">HTML елементи</a>, <em>дори тези които не са посочени в стандарта</em>. Това означава, че всички нестандартни елементи трябва да разрешават тези атрибути , въпреки че тези елементи правят HTML5 документа несъответстващ.</dd> + <dt class="landingPageList"><a href="/docs/Web/HTML/Inline_elements">Елементи на един ред</a> и <a href="/docs/Web/HTML/Block-level_elements">блокови елементи</a></dt> + <dd class="landingPageList">HTML елементите са обикновенно "на един ред" или "блокови" елементи. Елемента на един ред <span lang="bg">заема само пространството</span> <span lang="bg">ограничено от маркерите, които го дефинират. Блоковия елемент заема цялото пространство на своя родителски елемент (контейнер), като по този начин създава "блок".</span></dd> + <dt class="landingPageList"></dt> + <dt class="landingPageList"><a href="/docs/Web/HTML/Link_types">Типове връзки</a></dt> + <dd class="landingPageList"><span lang="bg">В HTML могат да се използват различни типове връзки за установяване и дефиниране на връзката между два документа. Елементите на връзката, които типове могат да бъдат зададени, включват</span> <a href="/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/docs/Web/HTML/Element/area"><code><area></code></a>, и <a href="/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> + <dt class="landingPageList"><a href="/docs/Web/HTML/Supported_media_formats">Медия формати поддържани от HTML аудио и видео елементите</a></dt> + <dd class="landingPageList"><a href="/docs/Web/HTML/Element/audio"><code><audio></code></a> и <a href="/docs/Web/HTML/Element/video"><code><video></code></a> елементите ти позволяват да въизпроизвеждаш аудио и видео медия. Тези елементи осигуряват браузър-естествена алтернатива, която има подобни възможности като Adobe Flash и други плъгини.</dd> +</dl> +</div> +</div> +</section> diff --git a/files/bg/web/http/headers/index.html b/files/bg/web/http/headers/index.html new file mode 100644 index 0000000000..b6923ef46d --- /dev/null +++ b/files/bg/web/http/headers/index.html @@ -0,0 +1,370 @@ +--- +title: HTTP headers +slug: Web/HTTP/Headers +tags: + - HTTP + - Headers + - NeedsTranslation + - Networking + - Reference + - TopicStub +translation_of: Web/HTTP/Headers +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP headers allow the client and the server to pass additional information with the request or the response. A request header consists of its case-insensitive name followed by a colon '<code>:</code>', then by its value (without line breaks). Leading white space before the value is ignored.</p> + +<p>Custom proprietary headers can be added using the 'X-' prefix, but this convention was deprecated in June 2012, because of the inconveniences it caused when non-standard fields became standard in <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a>; others are listed in an <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP message headers</a>.</p> + +<p>Headers can be grouped according to their contexts:</p> + +<ul> + <li>{{Glossary("General header")}}: Headers applying to both requests and responses but with no relation to the data eventually transmitted in the body.</li> + <li>{{Glossary("Request header")}}: Headers containing more information about the resource to be fetched or about the client itself.</li> + <li>{{Glossary("Response header")}}: Headers with additional information about the response, like its location or about the server itself (name and version etc.).</li> + <li>{{Glossary("Entity header")}}: Headers containing more information about the body of the entity, like its content length or its MIME-type.</li> +</ul> + +<p>Headers can also be grouped according to how proxies handle them:</p> + +<dl> + <dt><a id="e2e" name="e2e"></a>End-to-end headers</dt> + <dd>These headers must be transmitted to the final recipient of the message; that is, the server for a request or the client for a response. Intermediate proxies must retransmit end-to-end headers unmodified and caches must store them.</dd> + <dt><a id="hbh" name="hbh"></a>Hop-by-hop headers</dt> + <dd>These headers are meaningful only for a single transport-level connection and must not be retransmitted by proxies or cached. Such headers are: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }} and {{ httpheader("Upgrade") }}. Note that only hop-by-hop headers may be set using the {{ httpheader("Connection") }} general header.</dd> +</dl> + +<p>The following list summarizes HTTP headers by their usage category. For an alphabetical list, see the navigation on the left side.</p> + +<h2 id="Authentication">Authentication</h2> + +<dl> + <dt>{{HTTPHeader("WWW-Authenticate")}}</dt> + <dd>Defines the authentication method that should be used to gain access to a resource.</dd> + <dt>{{HTTPHeader("Authorization")}}</dt> + <dd>Contains the credentials to authenticate a user agent with a server.</dd> + <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt> + <dd>Defines the authentication method that should be used to gain access to a resource behind a Proxy server.</dd> + <dt>{{HTTPHeader("Proxy-Authorization")}}</dt> + <dd>Contains the credentials to authenticate a user agent with a proxy server.</dd> +</dl> + +<h2 id="Caching">Caching</h2> + +<dl> + <dt>{{HTTPHeader("Age")}}</dt> + <dd>The time in seconds the object has been in a proxy cache.</dd> + <dt>{{HTTPHeader("Cache-Control")}}</dt> + <dd>Specifies directives for caching mechanisms in both requests and responses.</dd> + <dt>{{HTTPHeader("Expires")}}</dt> + <dd>The date/time after which the response is considered stale.</dd> + <dt>{{HTTPHeader("Pragma")}}</dt> + <dd>Implementation-specific header that may have various effects anywhere along the request-response chain. Used for backwards compatibility with HTTP/1.0 caches where the <code>Cache-Control</code> header is not yet present.</dd> + <dt>{{HTTPHeader("Warning")}}</dt> + <dd>A general warning field containing information about possible problems.</dd> +</dl> + +<h2 id="Client_hints">Client hints</h2> + +<dl> + <dt>{{HTTPHeader("Accept-CH")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Content-DPR")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("DPR")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Downlink")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Save-Data")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Viewport-Width")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Width")}}</dt> + <dd>...</dd> +</dl> + +<dl> + <dt> + <h2 id="Conditionals">Conditionals</h2> + </dt> + <dt>{{HTTPHeader("Last-Modified")}}</dt> + <dd>It is a validator, the last modification date of the resource, used to compare several versions of the same resource. It is less accurate than {{HTTPHeader("ETag")}}, but easier to calculate in some environments. Conditional requests using {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Unmodified-Since")}} use this value to change the behavior of the request.</dd> + <dt>{{HTTPHeader("ETag")}}</dt> + <dd>It is a validator, a unique string identifying the version of the resource. Conditional requests using {{HTTPHeader("If-Match")}} and {{HTTPHeader("If-None-Match")}} use this value to change the behavior of the request.</dd> + <dt>{{HTTPHeader("If-Match")}}</dt> + <dd>Makes the request conditional and applies the method only if the stored resource matches one of the given ETags.</dd> + <dt>{{HTTPHeader("If-None-Match")}}</dt> + <dd>Makes the request conditional and applies the method only if the stored resource doesn't match any of the given ETags. This is used to update caches (for safe requests), or to prevent to upload a new resource when one is already existing.</dd> + <dt>{{HTTPHeader("If-Modified-Since")}}</dt> + <dd>Makes the request conditional and expects the entity to be transmitted only if it has been modified after the given date. This is used to transmit data only when the cache is out of date.</dd> + <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt> + <dd>Makes the request conditional and expects the entity to be transmitted only if it has not been modified after the given date. This is used to ensure the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents.</dd> +</dl> + +<h2 id="Connection_management">Connection management</h2> + +<dl> + <dt>{{HTTPHeader("Connection")}}</dt> + <dd>Controls whether the network connection stays open after the current transaction finishes.</dd> + <dt>{{HTTPHeader("Keep-Alive")}}</dt> + <dd>Controls how long a persistent connection should stay open.</dd> +</dl> + +<h2 id="Content_negotiation">Content negotiation</h2> + +<dl> + <dt>{{HTTPHeader("Accept")}}</dt> + <dd>Informs the server about the types of data that can be sent back. It is MIME-type.</dd> + <dt>{{HTTPHeader("Accept-Charset")}}</dt> + <dd>Informs the server about which character set the client is able to understand.</dd> + <dt>{{HTTPHeader("Accept-Encoding")}}</dt> + <dd>Informs the server about the encoding algorithm, usually a compression algorithm, that can be used on the resource sent back.</dd> + <dt>{{HTTPHeader("Accept-Language")}}</dt> + <dd>Informs the server about the language the server is expected to send back. This is a hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language in a drop down list).</dd> +</dl> + +<dl> +</dl> + +<h2 id="Controls">Controls</h2> + +<dl> + <dt>{{HTTPHeader("Expect")}}</dt> + <dd>Indicates expectations that need to be fulfilled by the server in order to properly handle the request.</dd> + <dt>{{HTTPHeader("Max-Forwards")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Cookies">Cookies</h2> + +<dl> + <dt>{{HTTPHeader("Cookie")}}</dt> + <dd>Contains stored <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> previously sent by the server with the {{HTTPHeader("Set-Cookie")}} header.</dd> + <dt>{{HTTPHeader("Set-Cookie")}}</dt> + <dd>Send cookies from the server to the user agent.</dd> + <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt> + <dd>Used to contain an HTTP cookie, previously sent by the server with the {{HTTPHeader("Set-Cookie2")}} header, but has been obsoleted by the specification. Use {{HTTPHeader("Cookie")}} instead.</dd> + <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt> + <dd>Used to send cookies from the server to the user agent, but has been obsoleted by the specification. Use {{HTTPHeader("Set-Cookie")}} instead.</dd> + <dt> + <h2 id="CORS">CORS</h2> + </dt> + <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt> + <dd>Indicates whether the response can be shared.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt> + <dd>Indicates whether the response to the request can be exposed when the credentials flag is true.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt> + <dd>Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt> + <dd>Specifies the method or methods allowed when accessing the resource in response to a preflight request.</dd> + <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt> + <dd>Indicates which headers can be exposed as part of the response by listing their names.</dd> + <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt> + <dd>Indicates how long the results of a preflight request can be cached.</dd> + <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt> + <dd>Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.</dd> + <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt> + <dd>Used when issuing a preflight request to let the server know which <a href="/en-US/docs/Web/HTTP/Methods">HTTP method</a> will be used when the actual request is made.</dd> + <dt>{{HTTPHeader("Origin")}}</dt> + <dd>Indicates where a fetch originates from.</dd> + <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt> + <dd>Specifies origins that are allowed to see values of attributes retrieved via features of the <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>, which would otherwise be reported as zero due to cross-origin restrictions.</dd> +</dl> + +<h2 id="Do_Not_Track">Do Not Track</h2> + +<dl> + <dt>{{HTTPHeader("DNT")}}</dt> + <dd>Used for expressing the user's tracking preference.</dd> + <dt>{{HTTPHeader("Tk")}}</dt> + <dd>Indicates the tracking status that applied to the corresponding request.</dd> +</dl> + +<h2 id="Downloads">Downloads</h2> + +<dl> + <dt>{{HTTPHeader("Content-Disposition")}}</dt> + <dd>Is a response header if the resource transmitted should be displayed inline (default behavior when the header is not present), or it should be handled like a download and the browser should present a 'Save As' window.</dd> +</dl> + +<h2 id="Message_body_information">Message body information</h2> + +<dl> + <dt>{{HTTPHeader("Content-Length")}}</dt> + <dd>indicates the size of the entity-body, in decimal number of octets, sent to the recipient.</dd> + <dt>{{HTTPHeader("Content-Type")}}</dt> + <dd>Indicates the media type of the resource.</dd> + <dt>{{HTTPHeader("Content-Encoding")}}</dt> + <dd>Used to specify the compression algorithm.</dd> + <dt>{{HTTPHeader("Content-Language")}}</dt> + <dd>Describes the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.</dd> + <dt>{{HTTPHeader("Content-Location")}}</dt> + <dd>Indicates an alternate location for the returned data.</dd> + <dt> + <h2 id="Proxies">Proxies</h2> + </dt> +</dl> + +<dl> + <dt>{{HTTPHeader("Forwarded")}}</dt> + <dd>Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.</dd> + <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt> + <dd>Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt> + <dd>Identifies the original host requested that a client used to connect to your proxy or load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt> + <dd>identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.</dd> + <dt>{{HTTPHeader("Via")}}</dt> + <dd>Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.</dd> +</dl> + +<h2 id="Redirects">Redirects</h2> + +<dl> + <dt>{{HTTPHeader("Location")}}</dt> + <dd>Indicates the URL to redirect a page to.</dd> +</dl> + +<h2 id="Request_context">Request context</h2> + +<dl> + <dt>{{HTTPHeader("From")}}</dt> + <dd>Contains an Internet email address for a human user who controls the requesting user agent.</dd> + <dt>{{HTTPHeader("Host")}}</dt> + <dd>Specifies the domain name of the server (for virtual hosting), and (optionally) the TCP port number on which the server is listening.</dd> + <dt>{{HTTPHeader("Referer")}}</dt> + <dd>The address of the previous web page from which a link to the currently requested page was followed.</dd> + <dt>{{HTTPHeader("Referrer-Policy")}}</dt> + <dd>Governs which referrer information sent in the {{HTTPHeader("Referer")}} header should be included with requests made.</dd> + <dt>{{HTTPHeader("User-Agent")}}</dt> + <dd>Contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. See also the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>.</dd> +</dl> + +<h2 id="Response_context">Response context</h2> + +<dl> + <dt>{{HTTPHeader("Allow")}}</dt> + <dd>Lists the set of HTTP request methods support by a resource.</dd> + <dt>{{HTTPHeader("Server")}}</dt> + <dd>Contains information about the software used by the origin server to handle the request.</dd> +</dl> + +<h2 id="Range_requests">Range requests</h2> + +<dl> + <dt>{{HTTPHeader("Accept-Ranges")}}</dt> + <dd>Indicates if the server supports range requests and if so, in which unit the range can be expressed.</dd> + <dt>{{HTTPHeader("Range")}}</dt> + <dd>Indicates the part of a document that the server should return.</dd> + <dt>{{HTTPHeader("If-Range")}}</dt> + <dd>Creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. Used to prevent downloading two ranges from incompatible version of the resource.</dd> + <dt>{{HTTPHeader("Content-Range")}}</dt> + <dd>Indicates where in a full body message a partial message belongs.</dd> +</dl> + +<h2 id="Security">Security</h2> + +<dl> + <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt> + <dd>Controls resources the user agent is allowed to load for a given page.</dd> + <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt> + <dd>Allows web developers to experiment with policies by monitoring (but not enforcing) their effects. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.</dd> + <dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt> + <dd>Associates a specific cryptographic public key with a certain web server to decrease the risk of {{Glossary("MITM")}} attacks with forged certificates.</dd> + <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt> + <dd>Sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt> + <dd>Force communication using HTTPS instead of HTTP.</dd> + <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt> + <dd>Sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the {{CSP("upgrade-insecure-requests")}} directive.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt> + <dd>Disables MIME sniffing and forces browser to use the type given in {{HTTPHeader("Content-Type")}}.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt> + <dd>Indicates whether a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} or {{HTMLElement("object")}}</dd> + <dt>{{HTTPHeader("X-XSS-Protection")}}</dt> + <dd>Enables cross-site scripting filtering.</dd> +</dl> + +<h2 id="Server-sent_events">Server-sent events</h2> + +<dl> + <dt>{{HTTPHeader("Ping-From")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Ping-To")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Last-Event-ID")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Transfer_coding">Transfer coding</h2> + +<dl> + <dt>{{HTTPHeader("Transfer-Encoding")}}</dt> + <dd>Specifies the the form of encoding used to safely transfer the entity to the user.</dd> + <dt>{{HTTPHeader("TE")}}</dt> + <dd>Specifies the transfer encodings the user agent is willing to accept.</dd> + <dt>{{HTTPHeader("Trailer")}}</dt> + <dd>Allows the sender to include additional fields at the end of chunked message.</dd> +</dl> + +<h2 id="WebSockets">WebSockets</h2> + +<dl> + <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Other">Other</h2> + +<dl> + <dt>{{HTTPHeader("Date")}}</dt> + <dd>Contains the date and time at which the message was originated.</dd> + <dt>{{HTTPHeader("Large-Allocation")}}</dt> + <dd>Tells the browser that the page being loaded is going to want to perform a large allocation.</dd> + <dt>{{HTTPHeader("Link")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Retry-After")}}</dt> + <dd>Indicates how long the user agent should wait before making a follow-up request.</dd> + <dt>{{HTTPHeader("SourceMap")}}</dt> + <dd>Links generated code to a <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map</a>.</dd> + <dt>{{HTTPHeader("Upgrade")}}</dt> + <dd>The relevant RFC document for the <a href="https://tools.ietf.org/html/rfc7230#section-6.7">Upgrade header field is RFC 7230, section 6.7</a>. The standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection. For example, this header standard allows a client to change from HTTP 1.1 to HTTP 2.0, assuming the server decides to acknowledge and implement the Upgrade header field. Niether party is required to accept the terms specified in the Upgrade header field. It can be used in both client and server headers. If the Upgrade header field is specified, then the sender MUST also send the Connection header field with the upgrade option specified. For details on the Connection header field <a href="https://tools.ietf.org/html/rfc7230#section-6.1">please see section 6.1 of the aforementioned RFC</a>.</dd> + <dt>{{HTTPHeader("Vary")}}</dt> + <dd>Determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.</dd> + <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt> + <dd>Controls DNS prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth.</dd> + <dt>{{HTTPHeader("X-Firefox-Spdy")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("X-Requested-With")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("X-UA-Compatible")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Contributing">Contributing</h2> + +<p>You can help by <a href="/en-US/docs/MDN/Contribute/Howto/Document_an_HTTP_header">writing new entries</a> or improving the existing ones.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></li> + <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a></li> +</ul> diff --git a/files/bg/web/http/headers/last-modified/index.html b/files/bg/web/http/headers/last-modified/index.html new file mode 100644 index 0000000000..7997ed2dda --- /dev/null +++ b/files/bg/web/http/headers/last-modified/index.html @@ -0,0 +1,87 @@ +--- +title: Last-Modified +slug: Web/HTTP/Headers/Last-Modified +translation_of: Web/HTTP/Headers/Last-Modified +--- +<div>{{HTTPSidebar}}</div> + +<p>Полето от заглавието на отговора по HTTP <strong><code>Last-Modified</code></strong> (Последно-Променен) съдържа датата и времето, когато за последно според сървъра е променян източника. То се използва за определяне дали даден източник (получен или съхраняван) е същият. Тази заглавка не може да определи състоянието на източника със същата точност като {{HTTPHeader("ETag")}} и се използва при липса на по-добър начин. Условните заявки, съдържащи заглавките {{HTTPHeader("If-Modified-Since")}} или {{HTTPHeader("If-Unmodified-Since")}} използват това поле.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Тип заглавка</th> + <td>{{Glossary("Response header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>не</td> + </tr> + <tr> + <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th> + <td>да</td> + </tr> + </tbody> +</table> + +<h2 id="Правопис">Правопис</h2> + +<pre class="syntaxbox">Last-Modified: <име-на-деня>, <ден> <месец> <година> <час>:<минута>:<секунда> GMT +</pre> + +<h2 id="Подробни_указания">Подробни указания</h2> + +<dl> + <dt><име-на-деня></dt> + <dd>Един от "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", или "Sun" (главни и малки имат значение).</dd> + <dt><ден></dt> + <dd>двуцифрена дата, например "04" или "23".</dd> + <dt><месец></dt> + <dd>Един от "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (главни и малки имат значение).</dd> + <dt><година></dt> + <dd>четирицифрено число, например "1990" или "2016".</dd> + <dt><час></dt> + <dd>двуцифрено число, например "09" или "23".</dd> + <dt><минута></dt> + <dd>двуцифрено число, например "04" или "59".</dd> + <dt><секунда></dt> + <dd>двуцифрено число, например "04" или "59".</dd> + <dt><code>GMT</code></dt> + <dd> + <p>Средно време по Гринуич. Датите в HTTP се изразяват винаги в GMT, никога в местно време.</p> + </dd> +</dl> + +<h2 id="Примери">Примери</h2> + +<pre>Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Заглавие</th> + </tr> + <tr> + <td>{{RFC("7232", "Last-Modified", "2.2")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост">Съвместимост</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.Last-Modified")}}</p> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li>{{HTTPHeader("If-Modified-Since")}}</li> + <li>{{HTTPHeader("If-Unmodified-Since")}}</li> + <li>{{HTTPHeader("Etag")}}</li> +</ul> diff --git a/files/bg/web/http/index.html b/files/bg/web/http/index.html new file mode 100644 index 0000000000..b51eebd3f5 --- /dev/null +++ b/files/bg/web/http/index.html @@ -0,0 +1,87 @@ +--- +title: HTTP +slug: Web/HTTP +tags: + - HTTP + - NeedsTranslation + - Reference + - TopicStub + - Web + - 'l10n:priority' +translation_of: Web/HTTP +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> is an <a href="https://en.wikipedia.org/wiki/Application_Layer">application-layer</a> protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical <a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">client-server model</a>, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a <a href="https://en.wikipedia.org/wiki/Stateless_protocol">stateless protocol</a>, meaning that the server does not keep any data (state) between two requests. Though often based on a TCP/IP layer, it can be used on any reliable <a href="http://en.wikipedia.org/wiki/Transport_Layer">transport layer</a>; that is, a protocol that doesn't lose messages silently, such as UDP.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Tutorials">Tutorials</h2> + +<p>Learn how to use HTTP with guides and tutorials.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt> + <dd>The basic features of the client-server protocol: what it can do and its intended uses.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching">HTTP Cache</a></dt> + <dd>Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt> + <dd>How cookies work is defined by <a href="http://tools.ietf.org/html/rfc6265">RFC 6265</a>. When serving an HTTP request, a server can send a <code>Set-Cookie</code> HTTP header with the response. The client then returns the cookie's value with every request to the same server in the form of a <code>Cookie</code> request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.</dd> + <dt><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></dt> + <dd><strong>Cross-site HTTP requests</strong> are HTTP requests for resources from a <strong>different domain</strong> than the domain of the resource making the request. For instance, an HTML page from Domain A (<code>http://domaina.example/</code>) makes a request for an image on Domain B (<code>http://domainb.foo/image.jpg</code>) via the <code>img</code> element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt> + <dd>A brief description of the changes between the early versions of HTTP, to the modern HTTP/2 and beyond.</dd> + <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web security guidelines</a></dt> + <dd>A collection of tips to help operational teams with creating secure web applications.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt> + <dd>Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Session">A typical HTTP session</a></dt> + <dd>Shows and explains the flow of a usual HTTP session.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt> + <dd>Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Reference">Reference</h2> + +<p>Browse through detailed HTTP reference documentation.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></dt> + <dd>HTTP message headers are used to describe a resource, or the behavior of the server or the client. Custom proprietary headers can be added using the <code>X-</code> prefix; others in an <a href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP message headers</a>.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">HTTP Request Methods</a></dt> + <dd>The different operations that can be done with HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes">HTTP Status Response Codes</a></dt> + <dd>HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP directives</a></dt> + <dd>The {{HTTPHeader("Content-Security-Policy")}} response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.</dd> +</dl> + +<h2 id="Tools_resources">Tools & resources</h2> + +<p>Helpful tools and resources for understanding and debugging HTTP.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd> + <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt> + <dd> + <p>A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.</p> + </dd> + <dt><a class="external" href="https://redbot.org/">RedBot</a></dt> + <dd>Tools to check your cache-related headers</dd> + <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt> + <dd>A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.</dd> +</dl> +</div> +</div> diff --git a/files/bg/web/http/methods/index.html b/files/bg/web/http/methods/index.html new file mode 100644 index 0000000000..1705cd67be --- /dev/null +++ b/files/bg/web/http/methods/index.html @@ -0,0 +1,73 @@ +--- +title: Методи за заявки в HTTP +slug: Web/HTTP/Methods +tags: + - HTTP + - методи + - справочник +translation_of: Web/HTTP/Methods +--- +<div>{{HTTPSidebar}}</div> + +<p>В {{glossary("HTTP")}} има определения за набор от методи за заявки за обозначаване на желаното действие, което да се извърши за даден източник на съдържание. Въпреки, че понякога за тях може да се използват съществителни имена, методите за заявки са познати и като <em>HTTP глаголи (verbs)</em>. Всеки от тях опредметява различно значение, но някои общи способности се споделят от цели групи методи. Например един метод за заявка може да бъде {{glossary("safe")}}, {{glossary("idempotent")}} или {{glossary("cacheable")}}.</p> + +<dl> + <dt><code><a href="/bg/docs/Web/HTTP/Methods/GET">GET</a></code></dt> + <dd>Методът <code>GET</code> заявява представяне на даден източник. Заявките, използващи <code>GET</code> би трябвало единствено да извличат данни, без да правят каквито и да е промени на сървъра.</dd> + <dt><code><a href="/bg/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt> + <dd>Методът <code>HEAD</code> заявява същия отговор както и <code>GET</code>, но без тялото на отговора.</dd> + <dt><code><a href="/bg/docs/Web/HTTP/Methods/POST">POST</a></code></dt> + <dd>Методът <code>POST</code> се използва за изпращане единица съдържание към указания източник, като по този начин често променя състоянието на източника или предизвиква други странични ефекти на сървъра.</dd> + <dt><code><a href="/bg/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt> + <dd> + <p>Методът <code>PUT</code> замества всички текущи представяния на целевия източник със съдържанието на заявката.</p> + </dd> + <dt><code><a href="/bg/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt> + <dd>Методът <code>DELETE</code> изтрива указания източник.</dd> + <dt><code><a href="/bg/docs/Web/HTTP/Methods/CONNECT">CONNECT</a></code></dt> + <dd> + <p>Методът <code>CONNECT</code> установява тунел към сървъра, указан от целевия източник.</p> + </dd> + <dt><code><a href="/bg/docs/Web/HTTP/Methods/OPTIONS">OPTIONS</a></code></dt> + <dd>Методът <code>OPTIONS</code> се използва, за да се опишат възможностите за общуване с целевия източник.</dd> + <dt><code><a href="/bg/docs/Web/HTTP/Methods/TRACE">TRACE</a></code></dt> + <dd> + <p>Методът <code>TRACE</code> извършва проверка на пътя за достъп до целевия източник.</p> + </dd> + <dt><code><a href="/bg/docs/Web/HTTP/Methods/PATCH">PATCH</a></code></dt> + <dd>Методът <code>PATCH</code> се използва, за да приложи частични промени върху даден източник.</dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{RFC("7231", "Request methods", "4")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + <td>Specifies GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE.</td> + </tr> + <tr> + <td>{{RFC("5789", "Patch method", "2")}}</td> + <td>PATCH Method for HTTP</td> + <td>Specifies PATCH.</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост">Съвместимост</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.methods")}}</p> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li><a href="/bg/docs/Web/HTTP/Headers">Заглавки в HTTP</a></li> +</ul> diff --git a/files/bg/web/http/status/100/index.html b/files/bg/web/http/status/100/index.html new file mode 100644 index 0000000000..3d4b377e6f --- /dev/null +++ b/files/bg/web/http/status/100/index.html @@ -0,0 +1,42 @@ +--- +title: 100 Continue +slug: Web/HTTP/Status/100 +translation_of: Web/HTTP/Status/100 +--- +<div>{{HTTPSidebar}}</div> + +<p>Уведомяващият код за състояние на отговора в HTTP <strong><code>100 Continue</code></strong> указва, че всичко досега е наред и клиентът може да продължи или да спре, ако е приключил със заявката.</p> + +<p>За да бъде накаран сървърът да провери полетата от заглавието на заявката, клиентът трябва да изпрати {{HTTPHeader("Expect")}}<code>: 100-continue</code> като заглавка в първоначалната си заявка и да получи код за състояние <code>100 Continue</code> в отговор, преди да продължи с изпращането на тялото на заявката.</p> + +<h2 id="Състояние">Състояние</h2> + +<pre class="syntaxbox">100 Continue</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "100 Continue" , "6.2.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост">Съвместимост</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.100")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTTPHeader("Expect")}}</li> + <li>{{HTTPStatus(417)}}</li> +</ul> diff --git a/files/bg/web/http/status/101/index.html b/files/bg/web/http/status/101/index.html new file mode 100644 index 0000000000..c3c58a12f3 --- /dev/null +++ b/files/bg/web/http/status/101/index.html @@ -0,0 +1,51 @@ +--- +title: 101 Смяна на протокола +slug: Web/HTTP/Status/101 +tags: + - HTTP + - HTTP код за състояние + - WebSockets + - Осведомителен +translation_of: Web/HTTP/Status/101 +--- +<div>{{HTTPSidebar}}</div> + +<p>Кодът за отговор в HTTP <code><strong>101 Switching Protocols</strong></code> обозначава протокола, към който превключва сървърът както е заявено от клиента, изпратил съобщението. Това включва заглавката {{HTTPHeader("Upgrade")}}.</p> + +<p>Сървърът включва в заглавието на отговора полето {{HTTPHeader("Upgrade")}} (повишаване, подобряване), указващо към кой протокол се превключва. Процесът е описан подробно в статията „<a href="/bg/docs/Web/HTTP/Protocol_upgrade_mechanism">Как се превключва към по-висок протокол"</a>.</p> + +<h2 id="Състояние"><span class="highlight-span">Състояние</span></h2> + +<pre class="syntaxbox">101 Switching Protocols</pre> + +<h2 id="Примери">Примери</h2> + +<p>Превключването на протоколи може да се използва при <a href="/bg/docs/Web/API/WebSockets_API">WebSockets</a>.</p> + +<pre>HTTP/1.1 101 Switching Protocols +Upgrade: websocket +Connection: Upgrade</pre> + +<h2 id="Спецификации"><span class="highlight-span">Спецификации</span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Заглавие</th> + </tr> + <tr> + <td>{{RFC("7231", "101 Switching Protocol" , "6.2.2")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Вижте_също"><span class="highlight-span">Вижте също</span></h2> + +<ul> + <li><a href="/bg/docs/Web/HTTP/Protocol_upgrade_mechanism">Как се превключва към по-висок протокол</a></li> + <li><a href="/bg/docs/Web/API/WebSockets_API">WebSockets</a></li> + <li>{{HTTPHeader("Upgrade")}}</li> + <li>{{HTTPStatus("426")}} <code>Upgrade Required</code></li> +</ul> diff --git a/files/bg/web/http/status/200/index.html b/files/bg/web/http/status/200/index.html new file mode 100644 index 0000000000..41b493723a --- /dev/null +++ b/files/bg/web/http/status/200/index.html @@ -0,0 +1,54 @@ +--- +title: 200 OK +slug: Web/HTTP/Status/200 +tags: + - HTTP + - Код за състояние + - Успех +translation_of: Web/HTTP/Status/200 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <strong><code>200 OK</code></strong> е код за състояние на отговора. Той показва, че заявката ви е успяла. Отговорите със сътояние 200 се кешират по подразбиране.</p> + +<p>В зависимост от метода на заявката "успех" означава различни неща:</p> + +<ul> + <li>{{HTTPMethod("GET")}}: Изходът е донесен в тялото на съобщението.</li> + <li>{{HTTPMethod("HEAD")}}: Заглавките са в тялото на съобщението.</li> + <li>{{HTTPMethod("POST")}}: Изходът е донесен в тялото на съобщението.</li> + <li>{{HTTPMethod("TRACE")}}: Тялото на съобщението съдържа съобщението за заявка както е получено от сървъра.</li> +</ul> + +<p>Успешният изходт от {{HTTPMethod("PUT")}} или {{HTTPMethod("DELETE")}} често не е <code>200</code> <code>OK</code>, а {{HTTPStatus("204")}} <code>No Content</code> (или {{HTTPStatus("201")}} <code>Created</code>, когато съдържанието е качено за пръв път).</p> + +<h2 id="Състояние">Състояние</h2> + +<pre class="syntaxbox">200 OK</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост">Съвместимост</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.200")}}</p> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li><a href="/bg/docs/Web/HTTP/Methods">Методи за заявки в HTTP</a></li> +</ul> diff --git a/files/bg/web/http/status/201/index.html b/files/bg/web/http/status/201/index.html new file mode 100644 index 0000000000..632d125680 --- /dev/null +++ b/files/bg/web/http/status/201/index.html @@ -0,0 +1,46 @@ +--- +title: 201 Създаден +slug: Web/HTTP/Status/201 +tags: + - HTTP + - Код за състояние + - Успех + - справочник +translation_of: Web/HTTP/Status/201 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <strong><code>201 Created</code></strong> (Създаден) е код за състояние, обозначаващ успех. Заявката е успяла и е довела до успешно създаване на източник. Новият източник е създаден успешно преди отговорът да бъде изпратен обратно на заявителя и се намира в тялото на отговора. Местонахождението на източника е или адреса на заявката, или адресът, изпратен в заглавката {{HTTPHeader("Location")}}.</p> + +<p>Случаят, при който се използва най-вече този код за състояние е изходът, върнат при заявка {{HTTPMethod("PUT")}}.</p> + +<h2 id="Състояние">Състояние</h2> + +<pre class="syntaxbox">201 Created</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Заглавие</th> + </tr> + <tr> + <td>{{RFC("7231", "201 Created" , "6.3.2")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост">Съвместимост</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.201")}}</p> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li><a href="/bg/docs/Web/HTTP/Methods">HTTP request methods</a></li> +</ul> diff --git a/files/bg/web/http/status/404/index.html b/files/bg/web/http/status/404/index.html new file mode 100644 index 0000000000..5ec2346c38 --- /dev/null +++ b/files/bg/web/http/status/404/index.html @@ -0,0 +1,61 @@ +--- +title: 404 Not Found +slug: Web/HTTP/Status/404 +tags: + - HTTP + - Грешка при клиента + - Код за състояние + - Четец +translation_of: Web/HTTP/Status/404 +--- +<div>{{HTTPSidebar}}</div> + +<p>Отговорът с код за грешка в протокола HTTP <code><strong>404 Not Found (Не е намерен)</strong></code> означава, че сървърът не може да открие заявения източник. Връзки, водещи до страници от вида 404 често се наричат счупени или мъртви връзки и са пример за т.нар. „<a href="https://en.wikipedia.org/wiki/Link_rot">изгнила връзка</a>“.</p> + +<p>Кодът за състояние 404 не указва дали източникът липсва временно или за постоянно. Но в случай че даден източник бъде премахнат завинаги, по-удачно е да се използва код за състояние {{HTTPStatus(410)}} (Gone) (букв. „отишъл си“) вместо 404.</p> + +<h2 id="Състояние">Състояние</h2> + +<pre class="syntaxbox">404 Not Found</pre> + +<h2 id="Custom_error_pages">Custom error pages</h2> + +<p>Many web sites customize the look of a 404 page to be more helpful to the user and provide guidance on what to do next. Apache servers can be configured using an <strong><code>.htaccess</code></strong> file and a code snippet like the following example.</p> + +<pre class="brush: bash">ErrorDocument 404 /notfound.html</pre> + +<p>For an example of a custom 404 page, see <a href="https://developer.mozilla.org/en-US/404">MDN's 404 page</a>.</p> + +<div class="note"> +<p>Custom design is a good thing, in moderation. Feel free to make your 404 page humorous and human, but don't confuse your users.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "404 Not Found" , "6.5.4")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.404")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTTPStatus(410)}}</li> + <li> + <p>{{interwiki("wikipedia", "HTTP_404", "Wikipedia: HTTP 404")}}</p> + </li> +</ul> diff --git a/files/bg/web/http/status/405/index.html b/files/bg/web/http/status/405/index.html new file mode 100644 index 0000000000..daabbeeb7a --- /dev/null +++ b/files/bg/web/http/status/405/index.html @@ -0,0 +1,43 @@ +--- +title: 405 Method Not Allowed +slug: Web/HTTP/Status/405 +tags: + - HTTP + - HTTP Status Code + - Код за състояние + - клиентска решка + - справочник +translation_of: Web/HTTP/Status/405 +--- +<div>{{HTTPSidebar}}</div> + +<p>Отговорът с код за състояние <strong>405 „Методът не е разрешен"</strong> (<code><strong>405 Method Not Allowed</strong></code>) в протокола HTTP означава, че методът на заявката е познат на сървъра, но е изключен за тази заявка и не може да се използва.</p> + +<div class="note"> +<p><strong>Бележка: </strong>Има два задължителни метода - {{HTTPMethod("GET")}} и {{HTTPMethod("HEAD")}}, които никога не трябва да се изключват и следователно никога не отговарят с този код за грешка.</p> +</div> + +<h2 id="Състояние">Състояние</h2> + +<pre class="syntaxbox">405 Method Not Allowed</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "405 Method Not Allowed" , "6.5.5")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li>{{HTTPHeader("Allow")}}</li> +</ul> diff --git a/files/bg/web/http/status/417/index.html b/files/bg/web/http/status/417/index.html new file mode 100644 index 0000000000..f1fe0290b9 --- /dev/null +++ b/files/bg/web/http/status/417/index.html @@ -0,0 +1,41 @@ +--- +title: 417 Expectation Failed +slug: Web/HTTP/Status/417 +tags: + - HTTP + - Клиентска грешка + - Код за състояние + - Код за състояние в HTTP + - справочник +translation_of: Web/HTTP/Status/417 +--- +<div>{{HTTPSidebar}}</div> + +<p>Кодът за състояние на грешка в HTTP <strong><code>417 Expectation Failed</code></strong> (Очакванията се провалиха) указва, че очакваното състояние, упоменато като стойност в полето от заглавието на заявката {{HTTPHeader("Expect")}}, не може да бъде удовлетворено.</p> + +<p>Вижте {{HTTPHeader("Expect")}} за повече подробности.</p> + +<h2 id="Състояние">Състояние</h2> + +<pre class="syntaxbox">417 Expectation Failed</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "417 Expectation Failed" , "6.5.14")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li>{{HTTPHeader("Expect")}}</li> +</ul> diff --git a/files/bg/web/http/status/index.html b/files/bg/web/http/status/index.html new file mode 100644 index 0000000000..e490502369 --- /dev/null +++ b/files/bg/web/http/status/index.html @@ -0,0 +1,171 @@ +--- +title: HTTP response status codes +slug: Web/HTTP/Status +tags: + - HTTP + - NeedsTranslation + - Status codes + - TopicStub +translation_of: Web/HTTP/Status +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP response status codes indicate whether a specific <a href="/en-US/docs/Web/HTTP">HTTP</a> request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirects, client errors, and servers errors. Status codes are defined by <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a>.</p> + +<h2 id="Information_responses">Information responses</h2> + +<dl> + <dt>{{HTTPStatus(100, "100 Continue")}}</dt> + <dd>This interim response indicates that everything so far is OK and that the client should continue with the request or ignore it if it is already finished.</dd> + <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt> + <dd>This code is sent in response to an {{HTTPHeader("Upgrade")}} request header by the client, and indicates the protocol the server is switching too.</dd> + <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt> + <dd>This code indicates that the server has received and is processing the request, but no response is available yet.</dd> +</dl> + +<h2 id="Successful_responses">Successful responses</h2> + +<dl> + <dt>{{HTTPStatus(200, "200 OK")}}</dt> + <dd>The request has succeeded. The meaning of a success varies depending on the HTTP method:<br> + GET: The resource has been fetched and is transmitted in the message body.<br> + HEAD: The entity headers are in the message body.<br> + POST: The resource describing the result of the action is transmitted in the message body.<br> + TRACE: The message body contains the request message as received by the server</dd> + <dt>{{HTTPStatus(201, "201 Created")}}</dt> + <dd>The request has succeeded and a new resource has been created as a result of it. This is typically the response sent after a PUT request.</dd> + <dt>{{HTTPStatus(202, "202 Accepted")}}</dt> + <dd>The request has been received but not yet acted upon. It is non-committal, meaning that there is no way in HTTP to later send an asynchronous response indicating the outcome of processing the request. It is intended for cases where another process or server handles the request, or for batch processing.</dd> + <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt> + <dd>This response code means returned meta-information set is not exact set as available from the origin server, but collected from a local or a third party copy. Except this condition, 200 OK response should be preferred instead of this response.</dd> + <dt>{{HTTPStatus(204, "204 No Content")}}</dt> + <dd>There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.</dd> + <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt> + <dd>This response code is sent after accomplishing request to tell user agent reset document view which sent this request.</dd> + <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt> + <dd>This response code is used because of range header sent by the client to separate download into multiple streams.</dd> + <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> + <dd>A Multi-Status response conveys information about multiple resources in situations where multiple status codes might be appropriate.</dd> + <dt>{{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> + <dd>Used inside a DAV: propstat response element to avoid enumerating the internal members of multiple bindings to the same collection repeatedly.</dd> + <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt> + <dd>The server has fulfilled a GET request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.</dd> +</dl> + +<h2 id="Redirection_messages">Redirection messages</h2> + +<dl> + <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt> + <dd>The request has more than one possible responses. User-agent or user should choose one of them. There is no standardized way to choose one of the responses.</dd> + <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt> + <dd>This response code means that URI of requested resource has been changed. Probably, new URI would be given in the response.</dd> + <dt>{{HTTPStatus(302, "302 Found")}}</dt> + <dd>This response code means that URI of requested resource has been changed <em>temporarily</em>. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd> + <dt>{{HTTPStatus(303, "303 See Other")}}</dt> + <dd>Server sent this response to directing client to get requested resource to another URI with an GET request.</dd> + <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt> + <dd>This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.</dd> + <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt> + <dd>Was defined in a previous version of the HTTP specification to indicate that a requested response must be accessed by a proxy. It has been deprecated due to security concerns regarding in-band configuration of a proxy.</dd> + <dt><code>306 unused</code></dt> + <dd>This response code is no longer used, it is just reserved currently. It was used in a previous version of the HTTP 1.1 specification.</dd> + <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt> + <dd>Server sent this response to directing client to get requested resource to another URI with same method that used prior request. This has the same semantic than the <code>302 Found</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> + <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt> + <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> +</dl> + +<h2 id="Client_error_responses">Client error responses</h2> + +<dl> + <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt> + <dd>This response means that server could not understand the request due to invalid syntax.</dd> + <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt> + <dd>Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.</dd> + <dt><code>402 Payment Required</code></dt> + <dd>This response code is reserved for future use. Initial aim for creating this code was using it for digital payment systems however this is not used currently.</dd> + <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt> + <dd>The client does not have access rights to the content, i.e. they are unauthorized, so server is rejecting to give proper response. Unlike 401, the client's identity is known to the server.</dd> + <dt>{{HTTPStatus(404, "404 Not Found")}}</dt> + <dd>The server can not find requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurence on the web.</dd> + <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt> + <dd>The request method is known by the server but has been disabled and cannot be used. For example, an API may forbid DELETE-ing a resource. The two mandatory methods, <code>GET</code> and <code>HEAD</code>, must never be disabled and should not return this error code.</dd> + <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt> + <dd>This response is sent when the web server, after performing <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content following the criteria given by the user agent.</dd> + <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt> + <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd> + <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt> + <dd>This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.</dd> + <dt>{{HTTPStatus(409, "409 Conflict")}}</dt> + <dd>This response is sent when a request conflicts with the current state of the server.</dd> + <dt>{{HTTPStatus(410, "410 Gone")}}</dt> + <dd>This response would be sent when the requested content has been permenantly deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.</dd> + <dt>{{HTTPStatus(411, "411 Length Required")}}</dt> + <dd>Server rejected the request because the <code>Content-Length</code> header field is not defined and the server requires it.</dd> + <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt> + <dd>The client has indicated preconditions in its headers which the server does not meet.</dd> + <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt> + <dd>Request entity is larger than limits defined by server; the server might close the connection or return an <code>Retry-After</code> header field.</dd> + <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt> + <dd>The URI requested by the client is longer than the server is willing to interpret.</dd> + <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt> + <dd>The media format of the requested data is not supported by the server, so the server is rejecting the request.</dd> + <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt> + <dd>The range specified by the <code>Range</code> header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.</dd> + <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt> + <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd> + <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt> + <dd>The server refuses the attempt to brew coffee with a teapot.</dd> + <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt> + <dd>The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.</dd> + <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd> + <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt> + <dd>The resource that is being accessed is locked.</dd> + <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request failed due to failure of a previous request.</dd> + <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt> + <dd>The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).</dd> + <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt> + <dd>The origin server requires the request to be conditional. Intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.</dd> + <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt> + <dd>The user has sent too many requests in a given amount of time ("rate limiting").</dd> + <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt> + <dd>The server is unwilling to process the request because its header fields are too large. The request MAY be resubmitted after reducing the size of the request header fields.</dd> + <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt> + <dd>The user requests an illegal resource, such as a web page censored by a government.</dd> +</dl> + +<h2 id="Server_error_responses">Server error responses</h2> + +<dl> + <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt> + <dd>The server has encountered a situation it doesn't know how to handle.</dd> + <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt> + <dd>The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are <code>GET</code> and <code>HEAD</code>.</dd> + <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt> + <dd>This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.</dd> + <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt> + <dd>The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the <code>Retry-After:</code> HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.</dd> + <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt> + <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd> + <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt> + <dd>The HTTP version used in the request is not supported by the server.</dd> + <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt> + <dd>The server has an internal configuration error: transparent content negotiation for the request results in a circular reference.</dd> + <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt> + <dd>The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.</dd> + <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt> + <dd>The server detected an infinite loop while processing the request.</dd> + <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt> + <dd>Further extensions to the request are required for the server to fulfill it.</dd> + <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt> + <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li> + <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li> +</ul> diff --git a/files/bg/web/index.html b/files/bg/web/index.html new file mode 100644 index 0000000000..2b152245f0 --- /dev/null +++ b/files/bg/web/index.html @@ -0,0 +1,103 @@ +--- +title: Уеб технология за разработчици +slug: Web +tags: + - Landing + - Web + - Web Development + - Разработка + - Уеб-разработка + - начална страница +translation_of: Web +--- +<p class="summary">Отвореността на световната мрежа предоставя невероятни възможности за хората, които искат да създават сайтове или приложения. За да се възползвате пълноценно от възможностите на мрежата, е необходимо да знаете как да ги използвате. Разгледайте връзките долу, за да научите повече за различните уеб-технологии.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Уеб_технологии">Уеб технологии</h2> + +<h3 id="Основи">Основи</h3> + +<dl> + <dt><a href="/bg/docs/Web/HTML">HTML</a></dt> + <dd><strong>HyperText Markup Language (HTML)</strong> (език за обозначаване на свръх-текст) е описателен език, който задава строежа на уеб-страниците.</dd> + <dt><a href="/bg/docs/Learn/CSS">CSS</a></dt> + <dd><strong>Cascading Style Sheets (CSS)</strong> (каскадни стилови таблици) описват <em>външния вид</em>, начинът, по който е <em>представено</em> съдържанието в уебстраницата.</dd> + <dt><a href="/bg/docs/Web/HTTP">HTTP</a></dt> + <dd><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> (протокол за пренос на свръх-текст) се използва за доставка на на документи във формат HTML и други хипермедийни формати в мрежата.</dd> +</dl> + +<h3 id="Програмиране">Програмиране</h3> + +<dl> + <dt><a href="/bg/docs/Web/JavaScript">JavaScript</a></dt> + <dd><strong>JavaScript</strong> е език за програмиране, който работи в мрежовия четец. Може да се използва за добавяне на взаимодействие с потребителя и други динамични възможности в сайта или приложението ви.</dd> + <dt><a href="/bg/docs/Web/Reference/API">Web APIs</a></dt> + <dd><strong>Web Application Programming Interfaces (Web APIs)</strong> (приложни програмни интерфейси за уеб) се използват за изпълнение на широк кръг от задачи като обработка на <a href="/bg/docs/DOM">ДОМ</a>, изпълнение на видео и аудио или създаване на триизмерни изображения. + <ul> + <li>The <a href="/en-US/docs/Web/API" title="/en-US/docs/Web/API">Web API interface reference</a> lists all the object types you can use while developing for the web.</li> + <li>The <a href="/en-US/docs/WebAPI">WebAPI page</a> lists all the communication, hardware access, and other APIs you can use in web applications.</li> + <li>The <a href="/en-US/docs/Web/Events">Event reference</a> lists all the events you can use to track and react to interesting things that have taken place in your webpage or application.</li> + </ul> + </dd> +</dl> + +<h3 id="Графика">Графика</h3> + +<dl> + <dt><a href="/bg/docs/HTML/Canvas">Canvas</a></dt> + <dd>The {{HTMLElement("canvas")}} element provides APIs to draw 2D graphics using JavaScript.</dd> + <dt><a href="/bg/docs/SVG">SVG</a></dt> + <dd><strong>Scalable Vector Graphics (SVG)</strong> lets you use lines, curves, and other geometric shapes to render graphics. With vectors, you can create images that scale cleanly to any size.</dd> + <dt><a href="/bg/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd><strong>WebGL</strong> is a JavaScript API that lets you draw 3D or 2D graphics using the HTML5 {{HTMLElement("canvas")}} element. This technology lets you use standard OpenGL ES in Web content.</dd> +</dl> + +<h3 id="Аудио_видео_и_мултимедия">Аудио, видео и мултимедия</h3> + +<dl> + <dt><a href="/bg/docs/Web/Media">Web media technologies</a></dt> + <dd>A list of media-related APIs with links to the documentation you'll need for each.</dd> + <dt><a href="/bg/docs/Web/Media/Overview">Overview of media technology on the web</a></dt> + <dd>A general look at the open web technologies and APIs that provide support for audio and video playback, manipulation, and recording. If you're not sure which API you should use, this is the place to start.</dd> + <dt><a href="/bg/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></dt> + <dd>A reference for the API which makes it possible to stream, record, and manipulate media both locally and across a network. This includes using local cameras and microphones to capture video, audio, and still images.</dd> + <dt><a href="/bg/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Using HTML5 audio and video</a></dt> + <dd>Embedding video and/or audio in a web page and controlling its playback.</dd> + <dt><a href="/bg/docs/WebRTC">WebRTC</a></dt> + <dd>The RTC in WebRTC stands for Real-Time Communications, technology that enables audio/video streaming and data sharing between browser clients (peers).</dd> +</dl> + +<h3 id="Други">Други</h3> + +<dl> + <dt><a href="/bg/docs/Web/MathML">MathML</a></dt> + <dd><strong>Mathematical Markup Language (MathML)</strong> lets you display complex mathematical equations and syntax.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Страниците_за_самообучение">Страниците за самообучение</h2> + +<dl> + <dt><a href="/bg/docs/Learn">Learning web development</a></dt> + <dd>Този набор от статии предоставя всичко необходимо на начинаещите уеб-разработчици, за да могат да правят прости сайтове.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Други_теми">Други теми</h2> + +<dl> + <dt><a href="/bg/docs/Web/Apps">Разработка на уеб приложения</a></dt> + <dd>This set of articles explains the techniques used in developing web apps for mobile, desktop, and Firefox OS environments.</dd> + <dt><a href="/bg/docs/Web/Accessibility">Достъпност</a></dt> + <dd>Accessible websites enable as many people as possible to use the web, including those whose visual, auditory, or other abilities are limited in some way. This set of articles provides information about accessible web development.</dd> + <dt><a href="/bg/docs/Web/Security">Сигурност</a></dt> + <dd>Don't let your website or app leak private data to the bad guys. Use this set of articles to make sure your projects are secure.</dd> +</dl> +</div> +</div> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Web">View All...</a></span></p> diff --git a/files/bg/web/javascript/guide/index.html b/files/bg/web/javascript/guide/index.html new file mode 100644 index 0000000000..efc0745c96 --- /dev/null +++ b/files/bg/web/javascript/guide/index.html @@ -0,0 +1,122 @@ +--- +title: Ръководство по JavaScript +slug: Web/JavaScript/Guide +tags: + - JavaScript + - ръководство +translation_of: Web/JavaScript/Guide +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary">Ръководството по JavaScript ви обяснява как да използвате <a href="/bg/docs/Web/JavaScript">JavaScript</a> и ви дава обща представа за езика. Ако се нуждаете от изчерпателни сведения за отделна възможност на езика, потърсете в <a href="/bg/docs/Web/JavaScript/Reference">Справочника за JavaScript</a>.</p> + +<h2 id="Глави">Глави</h2> + +<p>This Guide is divided into several chapters:</p> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Introduction">Introduction</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">About this guide</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">About JavaScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript and Java</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Tools</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types">Grammar and types</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Basic syntax & comments</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declarations</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Variable scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Variable hoisting</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Data structures and types</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Defining_functions">Defining functions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Calling_functions">Calling functions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope">Function scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assignment</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparisons</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Arithmetic operators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitwise</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logical operators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Number literals</a> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting">Text formatting</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String literals</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Template literals</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalization</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections">Keyed collections</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects">Working with objects</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Objects and properties</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creating objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Defining methods</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototype-based OOP</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creating object hierarchies</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Inheritance</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iterators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlers and traps</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/bg/web/javascript/guide/text_formatting/index.html b/files/bg/web/javascript/guide/text_formatting/index.html new file mode 100644 index 0000000000..b96734f66e --- /dev/null +++ b/files/bg/web/javascript/guide/text_formatting/index.html @@ -0,0 +1,255 @@ +--- +title: Text formatting +slug: Web/JavaScript/Guide/Text_formatting +translation_of: Web/JavaScript/Guide/Text_formatting +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div> + +<p class="summary">This chapter introduces how to work with strings and text in JavaScript.</p> + +<h2 id="Strings">Strings</h2> + +<p>JavaScript's <a href="/en-US/docs/Glossary/String">String</a> type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values (UTF-16 code units). Each element in the String occupies a position in the String. The first element is at index 0, the next at index 1, and so on. The length of a String is the number of elements in it. You can create strings using string literals or string objects.</p> + +<div class="hidden">CAUTION: if you edit this page, do not include any characters above U+FFFF, until MDN bug 857438 is fixed ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=857438">https://bugzilla.mozilla.org/show_bug.cgi?id=857438</a> ).</div> + +<h3 id="String_literals">String literals</h3> + +<p>You can create simple strings using either single or double quotes:</p> + +<pre class="brush: js notranslate">'foo' +"bar"</pre> + +<p>More advanced strings can be created using escape sequences:</p> + +<h4 id="Hexadecimal_escape_sequences">Hexadecimal escape sequences</h4> + +<p>The number after \x is interpreted as a <a href="https://en.wikipedia.org/wiki/Hexadecimal">hexadecimal</a> number.</p> + +<pre class="brush: js notranslate">'\xA9' // "©" +</pre> + +<h4 id="Unicode_escape_sequences">Unicode escape sequences</h4> + +<p>The Unicode escape sequences require at least four hexadecimal digits following <code>\u</code>.</p> + +<pre class="brush: js notranslate">'\u00A9' // "©"</pre> + +<h4 id="Unicode_code_point_escapes">Unicode code point escapes</h4> + +<p>New in ECMAScript 2015. With Unicode code point escapes, any character can be escaped using hexadecimal numbers so that it is possible to use Unicode code points up to <code>0x10FFFF</code>. With simple Unicode escapes it is often necessary to write the surrogate halves separately to achieve the same result.</p> + +<p>See also {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.</p> + +<pre class="brush: js notranslate">'\u{2F804}' + +// the same with simple Unicode escapes +'\uD87E\uDC04'</pre> + +<h3 id="String_objects">String objects</h3> + +<p>The {{jsxref("String")}} object is a wrapper around the string primitive data type.</p> + +<pre class="brush: js notranslate">const foo = new String('foo'); // Creates a String object +console.log(foo); // Displays: <span><span>[String: 'foo']</span></span> +typeof foo; // Returns 'object' +</pre> + +<p>You can call any of the methods of the <code>String</code> object on a string literal value—JavaScript automatically converts the string literal to a temporary <code>String</code> object, calls the method, then discards the temporary <code>String</code> object. You can also use the <code>String.length</code> property with a string literal.</p> + +<p>You should use string literals unless you specifically need to use a <code>String</code> object, because <code>String</code> objects can have counterintuitive behavior. For example:</p> + +<pre class="brush: js notranslate">const firstString = '2 + 2'; // Creates a string literal value +const secondString = new String('2 + 2'); // Creates a String object +eval(firstString); // Returns the number 4 +eval(secondString); // Returns the string "2 + 2"</pre> + +<p>A <code>String</code> object has one property, <code>length</code>, that indicates the number of UTF-16 code units in the string. For example, the following code assigns <code>helloLength</code> the value 13, because "Hello, World!" has 13 characters, each represented by one UTF-16 code unit. You can access each code unit using an array bracket style. You can't change individual characters because strings are immutable array-like objects:</p> + +<pre class="brush: js notranslate">const hello = 'Hello, World!'; +const helloLength = hello.length; +hello[0] = 'L'; // This has no effect, because strings are immutable +hello[0]; // This returns "H" +</pre> + +<p>Characters whose Unicode scalar values are greater than U+FFFF (such as some rare Chinese/Japanese/Korean/Vietnamese characters and some emoji) are stored in UTF-16 with two surrogate code units each. For example, a string containing the single character U+1F600 "Emoji grinning face" will have length 2. Accessing the individual code units in such a string using brackets may have undesirable consequences such as the formation of strings with unmatched surrogate code units, in violation of the Unicode standard. (Examples should be added to this page after MDN bug 857438 is fixed.) See also {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.</p> + +<p>A <code>String</code> object has a variety of methods: for example those that return a variation on the string itself, such as <code>substring</code> and <code>toUpperCase</code>.</p> + +<p>The following table summarizes the methods of {{jsxref("String")}} objects.</p> + +<table class="standard-table"> + <caption> + <h4 id="Methods_of_String">Methods of <code>String</code></h4> + </caption> + <thead> + <tr> + <th scope="col">Method</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}</td> + <td>Return the character or character code at the specified position in string.</td> + </tr> + <tr> + <td>{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}</td> + <td>Return the position of specified substring in the string or last position of specified substring, respectively.</td> + </tr> + <tr> + <td>{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}</td> + <td>Returns whether or not the string starts, ends or contains a specified string.</td> + </tr> + <tr> + <td>{{jsxref("String.concat", "concat")}}</td> + <td>Combines the text of two strings and returns a new string.</td> + </tr> + <tr> + <td>{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}</td> + <td>Constructs a string from the specified sequence of Unicode values. This is a method of the String class, not a String instance.</td> + </tr> + <tr> + <td>{{jsxref("String.split", "split")}}</td> + <td>Splits a <code>String</code> object into an array of strings by separating the string into substrings.</td> + </tr> + <tr> + <td>{{jsxref("String.slice", "slice")}}</td> + <td>Extracts a section of a string and returns a new string.</td> + </tr> + <tr> + <td>{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}</td> + <td>Return the specified subset of the string, either by specifying the start and end indexes or the start index and a length.</td> + </tr> + <tr> + <td>{{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}</td> + <td>Work with regular expressions.</td> + </tr> + <tr> + <td>{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}}</td> + <td> + <p>Return the string in all lowercase or all uppercase, respectively.</p> + </td> + </tr> + <tr> + <td>{{jsxref("String.normalize", "normalize")}}</td> + <td>Returns the Unicode Normalization Form of the calling string value.</td> + </tr> + <tr> + <td>{{jsxref("String.repeat", "repeat")}}</td> + <td>Returns a string consisting of the elements of the object repeated the given times.</td> + </tr> + <tr> + <td>{{jsxref("String.trim", "trim")}}</td> + <td>Trims whitespace from the beginning and end of the string.</td> + </tr> + </tbody> +</table> + +<h3 id="Multi-line_template_literals">Multi-line template literals</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a> are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.</p> + +<p>Template literals are enclosed by the back-tick (` `) (<a class="external external-icon" href="https://en.wikipedia.org/wiki/Grave_accent">grave accent</a>) character instead of double or single quotes. Template literals can contain place holders. These are indicated by the Dollar sign and curly braces (<code>${expression}</code>).</p> + +<h4 id="Multi-lines">Multi-lines</h4> + +<p>Any new line characters inserted in the source are part of the template literal. Using normal strings, you would have to use the following syntax in order to get multi-line strings:</p> + +<pre class="brush: js notranslate">console.log('string text line 1\n\ +string text line 2'); +// "string text line 1 +// string text line 2"</pre> + +<p>To get the same effect with multi-line strings, you can now write:</p> + +<pre class="brush: js notranslate">console.log(`string text line 1 +string text line 2`); +// "string text line 1 +// string text line 2"</pre> + +<h4 id="Embedded_expressions">Embedded expressions</h4> + +<p>In order to embed expressions within normal strings, you would use the following syntax:</p> + +<pre class="brush: js notranslate">const five = 5; +const ten = 10; +console.log('Fifteen is ' + (five + ten) + ' and not ' + (2 * five + ten) + '.'); +// "Fifteen is 15 and not 20."</pre> + +<p>Now, with template literals, you are able to make use of the syntactic sugar making substitutions like this more readable:</p> + +<pre class="brush: js notranslate">const five = 5; +const ten = 10; +console.log(`Fifteen is ${five + ten} and not ${2 * five + ten}.`); +// "Fifteen is 15 and not 20."</pre> + +<p>For more information, read about <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a> in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a>.</p> + +<h2 id="Internationalization">Internationalization</h2> + +<p>The {{jsxref("Intl")}} object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. The constructors for {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, and {{jsxref("DateTimeFormat")}} objects are properties of the <code>Intl</code> object.</p> + +<h3 id="Date_and_time_formatting">Date and time formatting</h3> + +<p>The {{jsxref("DateTimeFormat")}} object is useful for formatting date and time. The following formats a date for English as used in the United States. (The result is different in another time zone.)</p> + +<pre class="brush: js notranslate">const msPerDay = 24 * 60 * 60 * 1000; + +// July 17, 2014 00:00:00 UTC. +const july172014 = new Date(msPerDay * (44 * 365 + 11 + 197)); + +const options = { year: '2-digit', month: '2-digit', day: '2-digit', + hour: '2-digit', minute: '2-digit', timeZoneName: 'short' }; +const americanDateTime = new Intl.DateTimeFormat('en-US', options).format; + +console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT +</pre> + +<h3 id="Number_formatting">Number formatting</h3> + +<p>The {{jsxref("NumberFormat")}} object is useful for formatting numbers, for example currencies.</p> + +<pre class="brush: js notranslate">const gasPrice = new Intl.NumberFormat('en-US', + { style: 'currency', currency: 'USD', + minimumFractionDigits: 3 }); + +console.log(gasPrice.format(5.259)); // $5.259 + +const hanDecimalRMBInChina = new Intl.NumberFormat('zh-CN-u-nu-hanidec', + { style: 'currency', currency: 'CNY' }); + +console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五 +</pre> + +<h3 id="Collation">Collation</h3> + +<p>The {{jsxref("Collator")}} object is useful for comparing and sorting strings.</p> + +<p>For example, there are actually two different sort orders in German, <em>phonebook</em> and <em>dictionary</em>. Phonebook sort emphasizes sound, and it’s as if “ä”, “ö”, and so on were expanded to “ae”, “oe”, and so on prior to sorting.</p> + +<pre class="brush: js notranslate">const names = ['Hochberg', 'Hönigswald', 'Holzman']; + +const germanPhonebook = new Intl.Collator('de-DE-u-co-phonebk'); + +// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]: +console.log(names.sort(germanPhonebook.compare).join(', ')); +// logs "Hochberg, Hönigswald, Holzman" +</pre> + +<p>Some German words conjugate with extra umlauts, so in dictionaries it’s sensible to order ignoring umlauts (except when ordering words differing <em>only</em> by umlauts: <em>schon</em> before <em>schön</em>).</p> + +<pre class="brush: js notranslate">const germanDictionary = new Intl.Collator('de-DE-u-co-dict'); + +// as if sorting ["Hochberg", "Honigswald", "Holzman"]: +console.log(names.sort(germanDictionary.compare).join(', '));<font><font> +// nhật ký "Hồ Chí Minh, Holzman, Hönigswald"</font></font> +</pre> + +<p><font><font>Để biết thêm thông tin về API {{jsxref ("Intl")}}, xem thêm </font></font><a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/"><font><font>Giới thiệu API quốc tế hóa JavaScript</font></font></a><font><font> .</font></font></p> + +<div> +<article> +<p>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</p> +</article> +</div> diff --git a/files/bg/web/javascript/index.html b/files/bg/web/javascript/index.html new file mode 100644 index 0000000000..70e8bf97af --- /dev/null +++ b/files/bg/web/javascript/index.html @@ -0,0 +1,127 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - JavaScript + - Landing + - Learn + - NeedsTranslation + - TopicStub + - 'l10n:priority' +translation_of: Web/JavaScript +--- +<div>{{JsSidebar}}</div> + +<p class="summary"><strong>JavaScript</strong> (<strong>JS</strong>) е лека интерпретация или JIT- компилиран програмен език с {{Glossary("First-class Function(Първокласни функции)", "първокласни функции")}}. <span class="tlid-translation translation"><span title="">Въпреки, че е най-добре познат като скриптов език за уеб страници</span></span> , <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">също така и много работни среди без браузър</a> го използват. Такива като <a class="external" href="https://nodejs.org/">node.js</a>, <a href="https://couchdb.apache.org/">Apache CouchDB</a> и <a href="http://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a>. JavaScript също е и {{Glossary("Прототипно базиран език за програмиране", "прототипно базиран")}}, използващ мулти-парадигма, динамичен език. Поддържа обектно ориентирано програмиране , императивни и декларативни (функционално програмиране) стилове. Прочетете повече <a href="/en-US/docs/Web/JavaScript/About_JavaScript">за JavaScript</a>.</p> + +<p><span class="tlid-translation translation"><span title="">Този раздел на сайта е посветен на самия език на JavaScript</span></span> , и не съдържа части/информация,<span class="tlid-translation translation"><span title="">които са специфични за уеб страници или други хост среди.</span></span></p> + +<p>За информация относно {{Glossary("API","APIs")}} специфични за УЕБ страниците, моля вижте <a href="/en-US/docs/Web/API">Web APIs</a> или <a href="/en-US/docs/Glossary/DOM">DOM</a>.</p> + +<p>Стандарта за JavaScript се нарича <a href="/en-US/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. От 2012, всички модерни браузъри напълно поддържат ECMAScript 5.1. По-старите браузъри поддържат поне ECMAScript 3. На 17 Юни 2015 г. , <a href="https://www.ecma-international.org">ECMA International</a> публикува шестата основна версия на ECMAScript, която и официално се нарича ECMAScript 2015 и е първоначално наричана ECMAScript 6 или ES6. От тогава, ECMAScript стандартите се появяват на годишна база. Тази документация се отнася до най-новата версия на проекта, която понастоящем е ECMAScript 2018.</p> + +<p>Не бъркайте JavaScript със <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">езика за програмиране Java</a>. И двата езика "Java" и "JavaScript" <span class="tlid-translation translation"><span title="">са търговски марки или регистрирани търговски марки на Oracle в САЩ</span></span> и други държави. И двата езика за програмиране имат много различен синтакс, семантика и изпозлване.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Уроци">Уроци</h2> + +<p><span class="tlid-translation translation"><span title="">Научете се как да програмирате с JavaScript чрез ръководства и уроци.</span></span></p> + +<h3 id="За_напълно_начианещи">За напълно начианещи</h3> + +<p>Разгледайте темата <a href="/en-US/docs/Learn/JavaScript">Lеearning Area JavaScript topic</a> ако искате да учите JavaScript, <span class="tlid-translation translation"><span title="">но нямате предишен опит в JavaScript или програмирането.</span> <span title="">Пълните налични модули са както следва:</span></span></p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript първи стъпки</a></dt> + <dd><span class="tlid-translation translation"><span title="">Отговори на някои основни въпроси като "Какво е JavaScript?", "Как изглежда?" И "какво може да направи?", Заедно с обсъждане на ключови характеристики на JavaScript, като променливи, низове, числа и масиви.</span></span></dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript изграждащи блокове</a></dt> + <dd>Продължава с нашето покритие за ключовите характеристики на Javascript, насочвайки вниманието ни към често срещаните типове блокове код, като условни изрази, цикли, функции и събития.</dd> +</dl> + +<h3 id="Javascript_ръководство">Javascript ръководство</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript ръководство</a></dt> + <dd>Много по-подробно и детйално ръководство за езика JavaScript , насочено повече към хора с опит в програмирането или с друг език за програмиране.</dd> +</dl> + +<h3 id="Средно_напреднали">Средно напреднали</h3> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Въведение в JavaScript обектите</a></dt> + <dd>Обектно-ориентираният характер на Javascript e важен за разбиране, ако искате да стигнете по-далеч със знанията за езика и да пишете по-ефективен код. Затова сме Ви предоставили този модул , за да Ви помогне по-добре.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Уеб 'APIs' от страна на клиента</a></dt> + <dd>Когато пишете клиентски ориентиран JavaScript за уеб сайтове или приложения,<span lang="bg"> няма да стигнете много далеч, преди да започнете да използвате API - интерфейси за манипулиране на различни аспекти на браузъра и операционната система на която сайтът работи, или дори данни от други уеб сайтове или услуги. В този модул ще разгледаме какво представляват API-тата и как да използваме някои от най-често използваните приложни програмни интерфейси(API), с които ще се сблъскате най-често в работата си .</span></dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Повторно въвеждане в JavaScript</a></dt> + <dd><span style="background-color: #ffffff; color: #212121; display: inline !important; float: none; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;">Преглед за тези, които мислят, че знаят повече за JavaScript.</span></dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Структори от данни в JavaScript</a></dt> + <dd> + <pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="unicode-bidi: isolate; background-color: rgb(255, 255, 255); border: none; padding: 0px 0.14em 0px 0px; position: relative; margin: 0px; font-family: inherit; overflow: hidden; text-align: left; width: 275px; white-space: pre-wrap; font-size: 16px !important; line-height: 24px !important; font-weight: 400; color: rgb(33, 33, 33); font-style: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; text-decoration-style: initial; height: 48px;"><span lang="bg">Преглед на наличните структури от данни в JavaScript.</span></pre> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Сравнение на равенството и еднаквостта</a></dt> + <dd>JavaScript осигурява три различни операции за сравнение на стойности: стриктно равенство, използвайки <code>===</code>, свободно сравнение, използвайки <code>==</code>, и метода {{jsxref("Global_Objects/Object/is", "Object.is()")}} .</dd> +</dl> + +<h3 id="Напреднали">Напреднали</h3> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Наследяване и прототипна верига</a></dt> + <dd>Обяснение на широко неразбраното и подценено прототипно-базирано наследяване.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Строг режим</a></dt> + <dd>Строгия режим дефинира/определя, че не можете да използвате която и да е променлива преди да я инициализирате/създадете. Това е ограничен вариант на ECMAScript 5 стандарта, за по-бърза работа и по-лесно остраняване на грешки(дебъгване).</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript типизирани/типове масиви</a></dt> + <dd>Типизираните масиви в JavaScript <span lang="bg">предоставят механизъм за достъп до необработени двоични данни.</span></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management">Управелние на паметта</a></dt> + <dd>Жизненият цикъл на паметта и събирането на "боклука" в Javascript.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/EventLoop">Конкурентен модел и цикъл на събитията</a></dt> + <dd>JavaScript има конкурентен модел, който е базиран на "цикъл на сибитията (event loop) ".</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Препратка">Препратка</h2> + +<p>Разгледайте пълната справочна документация на <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript.</a></p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Стандартни обекти</a></dt> + <dd>Запознайте се със стандартните вградени обекти {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}, and others.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Изрази и оператори</a></dt> + <dd>Научете повече за поведението на JavaScript операторите {{jsxref("Оператори/instanceof", "instanceof")}}, {{jsxref("Оператори/typeof", "typeof")}}, {{jsxref("Оператори/new", "new")}}, {{jsxref("Оператори/this", "this")}}, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">оператора precedence</a>, и още.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Изавления и декларации</a></dt> + <dd>Научете как {{jsxref("Изавления/do...while", "do-while")}}, {{jsxref("Изавления/for...in", "for-in")}}, {{jsxref("Изавления/for...of", "for-of")}}, {{jsxref("Изавления/try...catch", "try-catch")}}, {{jsxref("Изавления/let", "let")}}, {{jsxref("Изавления/var", "var")}}, {{jsxref("Изавления/const", "const")}}, {{jsxref("Изавления/if...else", "if-else")}}, {{jsxref("Изавления/switch", "switch")}}, и още JavaScript изавления и ключови думи за работа.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Функции</a></dt> + <dd>Научете се как да работите с JavaScript's функциите за разработване на вашите приложения.</dd> +</dl> + +<h2 id="Инструменти_ресурси">Инструменти & ресурси</h2> + +<p>Полезни инструменти за писане и отстраняване на грешки във вашият <strong>JavaScript код</strong>.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Инструменти за Разработчици</a></dt> + <dd><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/en-US/docs/Tools/Debugger">Debugger</a>, и още.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Щитове</a></dt> + <dd>JavaScript щита позволява бързото тестване на откъси от JavaScript код.</dd> + <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd><span style="background-color: #ffffff; color: #212121; display: inline !important; float: none; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;">Сътрудничеството става лесно. Като добавите TogetherJS към сайта си, вашите потребители могат да си помагат един на друг в уебсайта ви и то в реално време!</span></dd> + <dt><a href="https://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>Stack Overflow въпроси маркирани с "JavaScript".</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript версии и бележки по изданието</a></dt> + <dd>Прегледайте последните истории свързани с JavaScript's и състоянието на изпълнение.</dd> + <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt> + <dd>Редактирай JavaScript, CSS, HTML и получете резултати на живо.<span lang="bg"> Използвайте външни ресурси и сътрудничете с екипа си онлайн.</span></dd> + <dt><a href="https://plnkr.co/">Plunker</a></dt> + <dd> + <pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="unicode-bidi: isolate; background-color: rgb(255, 255, 255); border: none; padding: 0px 0.14em 0px 0px; position: relative; margin: 0px; font-family: inherit; overflow: hidden; text-align: left; width: 275px; white-space: pre-wrap; font-size: 16px !important; line-height: 24px !important; font-weight: 400; color: rgb(33, 33, 33); font-style: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; text-decoration-style: initial; height: 168px;"><span lang="bg">Plunker е онлайн общност за създаване, сътрудничество и споделяне на идеи за уеб разработки. Редактирайте вашите JavaScript, CSS, HTML файлове и получете резултати на живо и структура на файла.</span></pre> + </dd> +</dl> +</div> +</div> diff --git a/files/bg/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/bg/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..65194d2deb --- /dev/null +++ b/files/bg/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,563 @@ +--- +title: Inheritance and the prototype chain +slug: Web/JavaScript/Inheritance_and_the_prototype_chain +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +<div>{{jsSidebar("Advanced")}}</div> + +<div></div> + +<p>JavaScript е малко объркващ за разработчиците с опит в езиците, базирани на класове (като Java или C ++), тъй като е динамичен и не осигурява реализация на клас сам по себе си (ключовата дума клас е въведена в ES2015, но е <a href="https://en.wikipedia.org/wiki/Syntactic_sugar">syntax sugar</a>) и JavaScript остава прототипно базиран.</p> + +<p>Когато става дума за наследяване, JavaScript има само една конструкция: обекти. Всеки обект има свойство, което съдържа връзка към друг обект, наречен негов <strong>прототип</strong>. Този прототип има собствен прототип и така нататък, докато прототипа не стане <code>null</code>. По дефиниция null няма прототип и действа като крайна връзка в тази верига на прототипа.</p> + +<p>Nearly all objects in JavaScript are instances of {{jsxref("Object")}} which sits on the top of a prototype chain.</p> + +<p>While this confusion is often considered to be one of JavaScript's weaknesses, the prototypal inheritance model itself is, in fact, more powerful than the classic model. It is, for example, fairly trivial to build a classic model on top of a prototypal model.</p> + +<h2 id="Inheritance_with_the_prototype_chain">Inheritance with the prototype chain</h2> + +<h3 id="Inheriting_properties">Inheriting properties</h3> + +<p>JavaScript objects are dynamic "bags" of properties (referred to as <strong>own properties</strong>). JavaScript objects have a link to a prototype object. When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.</p> + +<div class="note"> +<p>Following the ECMAScript standard, the notation <code>someObject.[[Prototype]]</code> is used to designate the prototype of <code>someObject</code>. Since ECMAScript 2015, the <code>[[Prototype]]</code> is accessed using the accessors {{jsxref("Object.getPrototypeOf()")}} and {{jsxref("Object.setPrototypeOf()")}}. This is equivalent to the JavaScript property <code>__proto__</code> which is non-standard but de-facto implemented by many browsers.</p> + +<p>It should not be confused with the <code><em>func</em>.prototype</code> property of functions, which instead specifies the <code>[[Prototype]]</code> to be assigned to all <em>instances</em> of objects created by the given function when used as a constructor. The <code><strong>Object.prototype</strong></code> property represents the {{jsxref("Object")}} prototype object.</p> +</div> + +<p>Here is what happens when trying to access a property:</p> + +<pre class="brush: js">// Let's create an object o from function f with its own properties a and b: +let f = function () { + this.a = 1; + this.b = 2; +} +let o = new f(); // {a: 1, b: 2} + +// add properties in f function's prototype +f.prototype.b = 3; +f.prototype.c = 4; + +// do not set the prototype f.prototype = {b:3,c:4}; this will break the prototype chain +// o.[[Prototype]] has properties b and c. +// o.[[Prototype]].[[Prototype]] is Object.prototype. +// Finally, o.[[Prototype]].[[Prototype]].[[Prototype]] is null. +// This is the end of the prototype chain, as null, +// by definition, has no [[Prototype]]. +// Thus, the full prototype chain looks like: +// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null + +console.log(o.a); // 1 +// Is there an 'a' own property on o? Yes, and its value is 1. + +console.log(o.b); // 2 +// Is there a 'b' own property on o? Yes, and its value is 2. +// The prototype also has a 'b' property, but it's not visited. +// This is called Property Shadowing + +console.log(o.c); // 4 +// Is there a 'c' own property on o? No, check its prototype. +// Is there a 'c' own property on o.[[Prototype]]? Yes, its value is 4. + +console.log(o.d); // undefined +// Is there a 'd' own property on o? No, check its prototype. +// Is there a 'd' own property on o.[[Prototype]]? No, check its prototype. +// o.[[Prototype]].[[Prototype]] is Object.prototype and there is no 'd' property by default, check its prototype. +// o.[[Prototype]].[[Prototype]].[[Prototype]] is null, stop searching, +// no property found, return undefined. +</pre> + +<p><a href="https://repl.it/@khaled_hossain_code/prototype">Code Link</a></p> + +<p>Setting a property to an object creates an own property. The only exception to the getting and setting behavior rules is when there is an inherited property with a <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">getter or a setter</a>.</p> + +<h3 id="Inheriting_methods">Inheriting "methods"</h3> + +<p>JavaScript does not have "methods" in the form that class-based languages define them. In JavaScript, any function can be added to an object in the form of a property. An inherited function acts just as any other property, including property shadowing as shown above (in this case, a form of <em>method overriding</em>).</p> + +<p>When an inherited function is executed, the value of <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> points to the inheriting object, not to the prototype object where the function is an own property.</p> + +<pre class="brush: js">var o = { + a: 2, + m: function() { + return this.a + 1; + } +}; + +console.log(o.m()); // 3 +// When calling o.m in this case, 'this' refers to o + +var p = Object.create(o); +// p is an object that inherits from o + +p.a = 4; // creates a property 'a' on p +console.log(p.m()); // 5 +// when p.m is called, 'this' refers to p. +// So when p inherits the function m of o, +// 'this.a' means p.a, the property 'a' of p + + +</pre> + +<h2 id="Using_prototypes_in_JavaScript">Using prototypes in JavaScript</h2> + +<p>Let's look at what happens behind the scenes in a bit more detail.</p> + +<p>In JavaScript, as mentioned above, functions are able to have properties. All functions have a special property named <code>prototype</code>. Please note that the code below is free-standing (it is safe to assume there is no other JavaScript on the webpage other than the below code). For the best learning experience, it is highly recommended that you open a console, navigate to the "console" tab, copy-and-paste in the below JavaScript code, and run it by pressing the Enter/Return key. (The console is included in most web browser's Developer Tools. More information is available for <a href="/en-US/docs/Tools">Firefox Developer Tools</a>, <a href="https://developers.google.com/web/tools/chrome-devtools/">Chrome DevTools</a>, and <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide">Edge DevTools</a>.)</p> + +<pre class="brush: js">function doSomething(){} +console.log( doSomething.prototype ); +// It does not matter how you declare the function, a +// function in JavaScript will always have a default +// prototype property. +// (Ps: There is one exception that arrow function doesn't have a default prototype property) +var doSomething = function(){}; +console.log( doSomething.prototype ); +</pre> + +<p>As seen above, <code>doSomething()</code> has a default <code>prototype</code> property, as demonstrated by the console. After running this code, the console should have displayed an object that looks similar to this.</p> + +<pre class="brush: js">{ + constructor: ƒ doSomething(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } +}</pre> + +<p>We can add properties to the prototype of <code>doSomething()</code>, as shown below.</p> + +<pre class="brush: js">function doSomething(){} +doSomething.prototype.foo = "bar"; +console.log( doSomething.prototype );</pre> + +<p>This results in:</p> + +<pre class="brush: js">{ + foo: "bar", + constructor: ƒ doSomething(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } +} +</pre> + +<p>We can now use the <code>new</code> operator to create an instance of <code>doSomething()</code> based on this prototype. To use the new operator, simply call the function normally except prefix it with <code>new</code>. Calling a function with the <code>new</code> operator returns an object that is an instance of the function. Properties can then be added onto this object.</p> + +<p>Try the following code:</p> + +<pre class="brush: js">function doSomething(){} +doSomething.prototype.foo = "bar"; // add a property onto the prototype +var doSomeInstancing = new doSomething(); +doSomeInstancing.prop = "some value"; // add a property onto the object +console.log( doSomeInstancing );</pre> + +<p>This results in an output similar to the following:</p> + +<pre class="brush: js">{ + prop: "some value", + __proto__: { + foo: "bar", + constructor: ƒ doSomething(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } + } +}</pre> + +<p>As seen above, the <code>__proto__</code> of <code>doSomeInstancing</code> is <code>doSomething.prototype</code>. But, what does this do? When you access a property of <code>doSomeInstancing</code>, the browser first looks to see if <code>doSomeInstancing</code> has that property.</p> + +<p>If <code>doSomeInstancing</code> does not have the property, then the browser looks for the property in the <code>__proto__</code> of <code>doSomeInstancing</code> (a.k.a. doSomething.prototype). If the <code>__proto__</code> of doSomeInstancing has the property being looked for, then that property on the <code>__proto__</code> of doSomeInstancing is used.</p> + +<p>Otherwise, if the <code>__proto__</code> of doSomeInstancing does not have the property, then the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing is checked for the property. By default, the <code>__proto__</code> of any function's prototype property is <code>window.Object.prototype</code>. So, the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing (a.k.a. the <code>__proto__</code> of doSomething.prototype (a.k.a. <code>Object.prototype</code>)) is then looked through for the property being searched for.</p> + +<p>If the property is not found in the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing, then the <code>__proto__</code> of the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing is looked through. However, there is a problem: the <code>__proto__</code> of the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing does not exist. Then, and only then, after the entire prototype chain of <code>__proto__</code>'s is looked through, and there are no more <code>__proto__</code>s does the browser assert that the property does not exist and conclude that the value at the property is <code>undefined</code>.</p> + +<p>Let's try entering some more code into the console:</p> + +<pre class="brush: js">function doSomething(){} +doSomething.prototype.foo = "bar"; +var doSomeInstancing = new doSomething(); +doSomeInstancing.prop = "some value"; +console.log("doSomeInstancing.prop: " + doSomeInstancing.prop); +console.log("doSomeInstancing.foo: " + doSomeInstancing.foo); +console.log("doSomething.prop: " + doSomething.prop); +console.log("doSomething.foo: " + doSomething.foo); +console.log("doSomething.prototype.prop: " + doSomething.prototype.prop); +console.log("doSomething.prototype.foo: " + doSomething.prototype.foo);</pre> + +<p>This results in the following:</p> + +<pre class="brush: js">doSomeInstancing.prop: some value +doSomeInstancing.foo: bar +doSomething.prop: undefined +doSomething.foo: undefined +doSomething.prototype.prop: undefined +doSomething.prototype.foo: bar</pre> + +<h2 id="Different_ways_to_create_objects_and_the_resulting_prototype_chain">Different ways to create objects and the resulting prototype chain</h2> + +<h3 id="Objects_created_with_syntax_constructs">Objects created with syntax constructs</h3> + +<pre class="brush: js">var o = {a: 1}; + +// The newly created object o has Object.prototype as its [[Prototype]] +// o has no own property named 'hasOwnProperty' +// hasOwnProperty is an own property of Object.prototype. +// So o inherits hasOwnProperty from Object.prototype +// Object.prototype has null as its prototype. +// o ---> Object.prototype ---> null + +var b = ['yo', 'whadup', '?']; + +// Arrays inherit from Array.prototype +// (which has methods indexOf, forEach, etc.) +// The prototype chain looks like: +// b ---> Array.prototype ---> Object.prototype ---> null + +function f() { + return 2; +} + +// Functions inherit from Function.prototype +// (which has methods call, bind, etc.) +// f ---> Function.prototype ---> Object.prototype ---> null +</pre> + +<h3 id="With_a_constructor">With a constructor</h3> + +<p>A "constructor" in JavaScript is "just" a function that happens to be called with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new operator</a>.</p> + +<pre class="brush: js">function Graph() { + this.vertices = []; + this.edges = []; +} + +Graph.prototype = { + addVertex: function(v) { + this.vertices.push(v); + } +}; + +var g = new Graph(); +// g is an object with own properties 'vertices' and 'edges'. +// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed. +</pre> + +<h3 id="With_Object.create">With <code>Object.create</code></h3> + +<p>ECMAScript 5 introduced a new method: {{jsxref("Object.create()")}}. Calling this method creates a new object. The prototype of this object is the first argument of the function:</p> + +<pre class="brush: js">var a = {a: 1}; +// a ---> Object.prototype ---> null + +var b = Object.create(a); +// b ---> a ---> Object.prototype ---> null +console.log(b.a); // 1 (inherited) + +var c = Object.create(b); +// c ---> b ---> a ---> Object.prototype ---> null + +var d = Object.create(null); +// d ---> null +console.log(d.hasOwnProperty); +// undefined, because d doesn't inherit from Object.prototype +</pre> + +<h3 id="delete_Operator_with_Object.create_and_new_operator"><code>delete</code> Operator with <code>Object.create</code> and <code>new</code> operator</h3> + +<p>Using <code>Object.create</code> of another object demonstrates prototypical inheritance with the <code>delete</code> operation:</p> + +<pre class="brush: js">var a = {a: 1}; + +var b = Object.create(a); + +console.log(a.a); // print 1 +console.log(b.a); // print 1 +b.a=5; +console.log(a.a); // print 1 +console.log(b.a); // print 5 +delete b.a; +console.log(a.a); // print 1 +console.log(b.a); // print 1(b.a value 5 is deleted but it showing value from its prototype chain) +delete a.a; +console.log(a.a); // print undefined +console.log(b.a); // print undefined</pre> + +<p>The <code>new</code> operator has a shorter chain in this example:</p> + +<pre class="brush: js">function Graph() { + this.vertices = [4,4]; +} + +var g = new Graph(); +console.log(g.vertices); // print [4,4] +g.vertices = 25; +console.log(g.vertices); // print 25 +delete g.vertices; +console.log(g.vertices); // print undefined +</pre> + +<h3 id="With_the_class_keyword">With the <code>class</code> keyword</h3> + +<p>ECMAScript 2015 introduced a new set of keywords implementing <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a>. The new keywords include {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, and {{jsxref("Operators/super", "super")}}.</p> + +<pre class="brush: js">'use strict'; + +class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(sideLength) { + super(sideLength, sideLength); + } + get area() { + return this.height * this.width; + } + set sideLength(newLength) { + this.height = newLength; + this.width = newLength; + } +} + +var square = new Square(2); +</pre> + +<h3 id="Performance">Performance</h3> + +<p>The lookup time for properties that are high up on the prototype chain can have a negative impact on the performance, and this may be significant in the code where performance is critical. Additionally, trying to access nonexistent properties will always traverse the full prototype chain.</p> + +<p>Also, when iterating over the properties of an object, <strong>every</strong> enumerable property that is on the prototype chain will be enumerated. To check whether an object has a property defined on <em>itself</em> and not somewhere on its prototype chain, it is necessary to use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> method which all objects inherit from <code>Object.prototype</code>. To give you a concrete example, let's take the above graph example code to illustrate it:</p> + +<pre class="brush: js">console.log(g.hasOwnProperty('vertices')); +// true + +console.log(g.hasOwnProperty('nope')); +// false + +console.log(g.hasOwnProperty('addVertex')); +// false + +console.log(g.__proto__.hasOwnProperty('addVertex')); +// true +</pre> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> is the only thing in JavaScript which deals with properties and does <strong>not</strong> traverse the prototype chain.</p> + +<p>Note: It is <strong>not</strong> enough to check whether a property is <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>. The property might very well exist, but its value just happens to be set to <code>undefined</code>.</p> + +<h3 id="Bad_practice_Extension_of_native_prototypes">Bad practice: Extension of native prototypes</h3> + +<p>One misfeature that is often used is to extend <code>Object.prototype</code> or one of the other built-in prototypes.</p> + +<p>This technique is called monkey patching and breaks <em>encapsulation</em>. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional <em>non-standard</em> functionality.</p> + +<p>The <strong>only</strong> good reason for extending a built-in prototype is to backport the features of newer JavaScript engines, like <code>Array.forEach</code>.</p> + +<h3 id="Summary_of_methods_for_extending_the_prototype_chain">Summary of methods for extending the prototype chain</h3> + +<p>Here are all 4 ways and their pros/cons. All of the examples listed below create exactly the same resulting <code>inst</code> object (thus logging the same results to the console), except in different ways for the purpose of illustration.</p> + +<table class="standard-table" style="text-align: top;"> + <tbody> + <tr> + <td style="width: 1%;">Name</td> + <td style="vertical-align: top; width: 1%;">Example(s)</td> + <td style="vertical-align: top;">Pro(s)</td> + <td style="vertical-align: top; width: 60%;">Con(s)</td> + </tr> + <tr> + <td>New-initialization</td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = new foo; +proto.bar_prop = "bar val"; +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + </td> + <td style="vertical-align: top;">Supported in every browser imaginable (support goes all the way back to IE 5.5!). Also, it is very fast, very standard, and very JIST-optimizable.</td> + <td style="vertical-align: top;">In order to use this method, the function in question must be initialized. During this initialization, the constructor may store unique information that must be generated per-object. However, this unique information would only be generated once, potentially leading to problems. Additionally, the initialization of the constructor may put unwanted methods onto the object. However, both these are generally not problems at all (in fact, usually beneficial) if it is all your own code and you know what does what where.</td> + </tr> + <tr> + <td>Object.create</td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = Object.create( + foo.prototype +); +proto.bar_prop = "bar val"; +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = Object.create( + foo.prototype, + { + bar_prop: { + value: "bar val" + } + } +); +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop)</pre> + </td> + <td style="vertical-align: top;">Support in all in-use-today browsers which are all non-microsoft browsers plus IE9 and up. Allows the direct setting of __proto__ in a way that is one-time-only so that the browser can better optimize the object. Also allows the creation of objects without a prototype via <code>Object.create(null)</code>.</td> + <td style="vertical-align: top;">Not supported in IE8 and below. However, as Microsoft has discontinued extended support for systems running these old browsers, this should not be a concern for most applications. Additionally, the slow object initialization can be a performance black hole if using the second argument because each object-descriptor property has its own separate descriptor object. When dealing with hundreds of thousands of object descriptors in the form of object, there can arise a serious issue with lag.</td> + </tr> + <tr> + <td> + <p>Object.setPrototypeOf</p> + </td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = { + bar_prop: "bar val" +}; +Object.setPrototypeOf( + proto, foo.prototype +); +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto; +proto=Object.setPrototypeOf( + { bar_prop: "bar val" }, + foo.prototype +); +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop)</pre> + </td> + <td style="vertical-align: top;">Support in all in-use-today browsers which are all non-microsoft browsers plus IE9 and up. Allows the dynamic manipulation of an objects prototype and can even force a prototype on a prototype-less object created with <code>Object.create(null)</code>.</td> + <td style="vertical-align: top;">Should-be-deprecated and ill-performant. Making your Javascript run fast is completely out of the question if you dare use this in the final production code because many browsers optimize the prototype and try to guess the location of the method in the memory when calling an instance in advance, but setting the prototype dynamically disrupts all these optimizations and can even force some browsers to recompile for deoptimization your code just to make it work according to the specs. Not supported in IE8 and below.</td> + </tr> + <tr> + <td>__proto__</td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = { + bar_prop: "bar val", + __proto__: foo.prototype +}; +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + + <pre class="brush: js"> +var inst = { + __proto__: { + bar_prop: "bar val", + __proto__: { + foo_prop: "foo val", + __proto__: Object.prototype + } + } +}; +console.log(inst.foo_prop); +console.log(inst.bar_prop)</pre> + </td> + <td style="vertical-align: top;">Support in all in-use-today browsers which are all non-microsoft browsers plus IE11 and up. Setting __proto__ to something that is not an object only fails silently. It does not throw an exception.</td> + <td style="vertical-align: top;">Grossly deprecated and non-performant. Making your Javascript run fast is completely out of the question if you dare use this in the final production code because many browsers optimize the prototype and try to guess the location of the method in the memory when calling an instance in advance, but setting the prototype dynamically disrupts all these optimizations and can even force some browsers to recompile for deoptimization your code just to make it work according to the specs. Not supported in IE10 and below.</td> + </tr> + </tbody> +</table> + +<h2 id="prototype_and_Object.getPrototypeOf"><code>prototype</code> and <code>Object.getPrototypeOf</code></h2> + +<p>JavaScript is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.</p> + +<p>You probably already noticed that our <code>function A</code> has a special property called <code>prototype</code>. This special property works with the JavaScript <code>new </code>operator. The reference to the prototype object is copied to the internal <code>[[Prototype]]</code> property of the new instance. For example, when you do <code>var a1 = new A()</code>, JavaScript (after creating the object in memory and before running function <code>A()</code> with <code>this</code> defined to it) sets <code>a1.[[Prototype]] = A.prototype</code>. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in <code>[[Prototype]]</code>. This means that all the stuff you define in <code>prototype</code> is effectively shared by all instances, and you can even later change parts of <code>prototype</code> and have the changes appear in all existing instances, if you wanted to.</p> + +<p>If, in the example above, you do <code>var a1 = new A(); var a2 = new A();</code> then <code>a1.doSomething</code> would actually refer to <code>Object.getPrototypeOf(a1).doSomething</code>, which is the same as the <code>A.prototype.doSomething</code> you defined, i.e. <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p> + +<p>In short, <code>prototype</code> is for types, while <code>Object.getPrototypeOf()</code> is the same for instances.</p> + +<p><code>[[Prototype]]</code> is looked at <em>recursively</em>, i.e. <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> etc., until it's found or <code>Object.getPrototypeOf </code>returns null.</p> + +<p>So, when you call</p> + +<pre class="brush: js">var o = new Foo();</pre> + +<p>JavaScript actually just does</p> + +<pre class="brush: js">var o = new Object(); +o.[[Prototype]] = Foo.prototype; +Foo.call(o);</pre> + +<p>(or something like that) and when you later do</p> + +<pre class="brush: js">o.someProp;</pre> + +<p>it checks whether <code>o</code> has a property <code>someProp</code>. If not, it checks <code>Object.getPrototypeOf(o).someProp</code>, and if that doesn't exist it checks <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code>, and so on.</p> + +<h2 id="In_conclusion">In conclusion</h2> + +<p>It is essential to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should <strong>never</strong> be extended unless it is for the sake of compatibility with newer JavaScript features.</p> diff --git a/files/bg/web/javascript/reference/classes/constructor/index.html b/files/bg/web/javascript/reference/classes/constructor/index.html new file mode 100644 index 0000000000..4d3971672e --- /dev/null +++ b/files/bg/web/javascript/reference/classes/constructor/index.html @@ -0,0 +1,130 @@ +--- +title: constructor +slug: Web/JavaScript/Reference/Classes/constructor +tags: + - Класове + - Конструктор +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>Методът <code>constructor</code> е специален метод за създаване и инициализиране на обект , <span lang="bg">създаден в рамките </span>класът (<code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a></code><span lang="bg">).</span></p> + +<div>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</div> + +<p class="hidden"><span lang="bg">Източникът на този интерактивен пример се съхранява в хранилище на GitHub. Ако искате да допринесете за проекта за интерактивни примери, моля клонирайте </span> <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> <span lang="bg"> и ни изпратете заявка за изтегляне.</span></p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">constructor([<em>arguments</em>]) { ... }</pre> + +<h2 id="Описание">Описание</h2> + +<p>Може да има само един специален метод с име "constructor" в даден клас (class). <span lang="bg">Ако има повече от </span>един метод с името <code>constructor</code> в класът си , ще се появи грешка {{jsxref("SyntaxError")}}.</p> + +<p>Конструктора (<code>constructor</code>) може да използва ключовата дума <code>super</code> за да извика конструктора на родителския клас.</p> + +<p>Ако не посочите метода конструктор, ще се използва конструктор по подразбиране</p> + +<h2 id="Примери">Примери</h2> + +<h3 id="Използване_на_метода_constructor">Използване на метода <code>constructor</code></h3> + +<p>Този примерен код е взет от <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">демо на живо</a>).</p> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // Here, it calls the parent class' constructor with lengths + // provided for the Polygon's width and height + super(length, length); + // Note: In derived classes, super() must be called before you + // can use 'this'. Leaving this out will cause a reference error. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="Друг_пример">Друг пример</h3> + +<p>Разгледайте този код :</p> + +<pre class="brush: js">class Polygon { + constructor() { + this.name = "Polygon"; + } +} + +class Square extends Polygon { + constructor() { + super(); + } +} + +class Rectangle {} + +Object.setPrototypeOf(Square.prototype, Rectangle.prototype); + +console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false +console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true + +let newInstance = new Square(); +console.log(newInstance.name); //Polygon</pre> + +<p>Тук прототипа на класът <strong>Square</strong> се променя, но все пак конструктора на предишния базов клас <strong>Polygon </strong>се извиква, когато се създава нова инстанция(екземлпяр) от класът <strong>Square</strong>. Това е така , защото в класът <strong>Squre </strong>използваме ключовата дума <code>super</code>, извиквайки конструктора на родителският клас <strong>Polygon </strong>.</p> + +<h3 id="Конструктор_по_подразбиране">Конструктор по подразбиране</h3> + +<p>Както е посочено,ако не посочите метод конструктор, ще се използва конструктор по подразбиране . За базовите класове , конструктора по подразбиране е :</p> + +<pre class="brush: js">constructor() {} +</pre> + +<p>За производни класове, конструктора по подразбиране е :</p> + +<pre class="brush: js">constructor(...args) { + super(...args); +}</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузъра">Съвместимост с браузъра</h2> + + + +<p>{{Compat("javascript.classes.constructor")}}</p> + +<h2 id="Въжте_също">Въжте също</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">ключовата дума super()</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>класов</code> израз</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>деклариране на клас</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Класове</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/classes/extends/index.html b/files/bg/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..940e815d6c --- /dev/null +++ b/files/bg/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,112 @@ +--- +title: extends +slug: Web/JavaScript/Reference/Classes/extends +tags: + - JavaScript наследяване + - Класове + - наследяване +translation_of: Web/JavaScript/Reference/Classes/extends +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>Ключовата дума <strong><code>extends</code></strong> се използва в <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">декларацията на класове</a> или <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">класовите изрази</a> за създаване на клас, който е дете на друг клас.</p> + +<div>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre> + +<h2 id="Описание">Описание</h2> + +<p>Ключовата дума <strong><code>extends</code></strong> може да бъде използвана като подклас на потребителски класове, както и за вградени обекти.</p> + +<p>Прототипът (<code>.prototype</code>) на разширението трябва да е {{jsxref("Object")}} или {{jsxref("null")}}.</p> + +<h2 id="Примери">Примери</h2> + +<h3 id="Използване_на_extends">Използване на <code>extends</code></h3> + +<p>Първият пример създава клас, наречен <code>Square</code> от клас, наречен <code>Polygon</code> (<code>Square</code> класът наследява клас <code>Polygon</code> ). Този пример е взет от това <a href="https://googlechrome.github.io/samples/classes-es6/index.html">демо на живо</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(източник)</a>.</p> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // Here, it calls the parent class' constructor with lengths + // provided for the Polygon's width and height + super(length, length); + // Note: In derived classes, super() must be called before you + // can use 'this'. Leaving this out will cause a reference error. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } +}</pre> + +<h3 id="Използване_на_extends_с_вградени_обекти">Използване на <code>extends</code> с вградени обекти</h3> + +<p>Този пример разширява вграденият {{jsxref("Date")}} обект. Този пример е взет от това <a href="https://googlechrome.github.io/samples/classes-es6/index.html">демо на живо</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(източник)</a>.</p> + +<pre class="brush: js">class myDate extends Date { + constructor() { + super(); + } + + getFormattedDate() { + var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear(); + } +}</pre> + +<h3 id="Наследяване_на_null">Наследяване на <code>null</code></h3> + +<p>Наследяване от {{jsxref("null")}} работи както при нормалните класове, eс изключение на това , <span lang="bg">че обектът на прототипа не наследява от</span> {{jsxref("Object.prototype")}}.</p> + +<pre class="brush: js">class nullExtends extends null { + constructor() {} +} + +Object.getPrototypeOf(nullExtends); // Function.prototype +Object.getPrototypeOf(nullExtends.prototype) // null + +new nullExtends(); //ReferenceError: this is not defined +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузъра">Съвместимост с браузъра</h2> + + + +<p>{{Compat("javascript.classes.extends")}}</p> + +<h2 id="Вижте_още">Вижте още</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Класове</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">ключовата дума super</a></li> + <li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super & Extends in JavaScript</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/classes/index.html b/files/bg/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..dc88fc8548 --- /dev/null +++ b/files/bg/web/javascript/reference/classes/index.html @@ -0,0 +1,431 @@ +--- +title: Classes +slug: Web/JavaScript/Reference/Classes +tags: + - Classes + - Constructors + - ECMAScript 2015 + - Inheritance + - Intermediate + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Classes +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax <em>does not</em> introduce a new object-oriented inheritance model to JavaScript.</p> + +<h2 id="Defining_classes">Defining classes</h2> + +<p>Classes are in fact "special <a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a>", and just as you can define <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>, the class syntax has two components: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a>.</p> + +<h3 id="Class_declarations">Class declarations</h3> + +<p>One way to define a class is using a <strong>class declaration</strong>. To declare a class, you use the <code>class</code> keyword with the name of the class ("Rectangle" here).</p> + +<pre class="brush: js">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<h4 id="Hoisting">Hoisting</h4> + +<p>An important difference between <strong>function declarations</strong> and <strong>class declarations</strong> is that function declarations are {{Glossary("Hoisting", "hoisted")}} and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw a {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js example-bad">const p = new Rectangle(); // ReferenceError + +class Rectangle {} +</pre> + +<h3 id="Class_expressions">Class expressions</h3> + +<p>A <strong>class expression</strong> is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body. (it can be retrieved through the class's (not an instance's) {{jsxref("Function.name", "name")}} property, though).</p> + +<pre class="brush: js">// unnamed +let Rectangle = class { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +console.log(Rectangle.name); +// output: "Rectangle" + +// named +let Rectangle = class Rectangle2 { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +console.log(Rectangle.name); +// output: "Rectangle2" +</pre> + +<div class="note"> +<p><strong>Note:</strong> Class <strong>expressions</strong> are subject to the same hoisting restrictions as described in the {{anch("Class declarations")}} section.</p> +</div> + +<h2 id="Class_body_and_method_definitions">Class body and method definitions</h2> + +<p>The body of a class is the part that is in curly brackets <code>{}</code>. This is where you define class members, such as methods or constructor.</p> + +<h3 id="Strict_mode">Strict mode</h3> + +<p>The body of a class is executed in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, i.e., code written here is subject to stricter syntax for increased performance, some otherwise silent errors will be thrown, and certain keywords are reserved for future versions of ECMAScript.</p> + +<h3 id="Constructor">Constructor</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> method is a special method for creating and initializing an object created with a <code>class</code>. There can only be one special method with the name "constructor" in a class. A {{jsxref("SyntaxError")}} will be thrown if the class contains more than one occurrence of a <code>constructor</code> method.</p> + +<p>A constructor can use the <code>super</code> keyword to call the constructor of the super class.</p> + +<h3 id="Prototype_methods">Prototype methods</h3> + +<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p> + +<pre class="brush: js">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } + // Getter + get area() { + return this.calcArea(); + } + // Method + calcArea() { + return this.height * this.width; + } +} + +const square = new Rectangle(10, 10); + +console.log(square.area); // 100</pre> + +<h3 id="Static_methods">Static methods</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> keyword defines a static method for a class. Static methods are called without <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)" title='An example of class instance is "var john = new Person();"'>instantiating </a>their class and <strong>cannot </strong>be called through a class instance. Static methods are often used to create utility functions for an application.</p> + +<pre class="brush: js">class Point { + constructor(x, y) { + this.x = x; + this.y = y; + } + + static distance(a, b) { + const dx = a.x - b.x; + const dy = a.y - b.y; + + return Math.hypot(dx, dy); + } +} + +const p1 = new Point(5, 5); +const p2 = new Point(10, 10); + +console.log(Point.distance(p1, p2)); // 7.0710678118654755</pre> + +<h3 id="Boxing_with_prototype_and_static_methods">Boxing with prototype and static methods</h3> + +<p>When a static or prototype method is called without a value for <em>this</em>, the <em>this</em> value will be <code>undefined</code> inside the method. This behavior will be the same even if the <code>"use strict"</code> directive isn't present, because code within the <code>class</code> body's syntactic boundary is always executed in strict mode.</p> + +<pre class="brush: js">class Animal { + speak() { + return this; + } + static eat() { + return this; + } +} + +let obj = new Animal(); +obj.speak(); // Animal {} +let speak = obj.speak; +speak(); // undefined + +Animal.eat() // class Animal +let eat = Animal.eat; +eat(); // undefined</pre> + +<p>If the above is written using traditional function-based syntax, then autoboxing in method calls will happen in non–strict mode based on the initial <em>this</em> value. If the initial value is <code>undefined</code>, <em>this</em> will be set to the global object.</p> + +<p>Autoboxing will not happen in strict mode, the <em>this</em> value remains as passed.</p> + +<pre class="brush: js">function Animal() { } + +Animal.prototype.speak = function() { + return this; +} + +Animal.eat = function() { + return this; +} + +let obj = new Animal(); +let speak = obj.speak; +speak(); // global object + +let eat = Animal.eat; +eat(); // global object +</pre> + +<h3 id="Instance_properties">Instance properties</h3> + +<p>Instance properties must be defined inside of class methods:</p> + +<pre class="brush: js">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<p>Static class-side properties and prototype data properties must be defined outside of the ClassBody declaration:</p> + +<pre class="brush: js">Rectangle.staticWidth = 20; +Rectangle.prototype.prototypeWidth = 25; +</pre> + +<h3 id="Field_declarations">Field declarations</h3> + +<div class="warning"> +<p>Public and private field declarations are an <a href="https://github.com/tc39/proposal-class-fields">experimental feature (stage 3)</a> proposed at <a href="https://tc39.github.io/beta/">TC39</a>, the JavaScript standards committee. Support in browsers is limited, but the feature can be used through a build step with systems like <a href="https://babeljs.io/">Babel</a>.</p> +</div> + +<h4 id="Public_field_declarations">Public field declarations</h4> + +<p>With the JavaScript field declaration syntax, the above example can be written as:</p> + +<pre class="brush: js">class Rectangle { + height = 0; + width; + constructor(height, width) { + this.height = height; + this.width = width; + } +} +</pre> + +<p>By declaring fields up-front, class definitions become more self-documenting, and the fields are always present.</p> + +<p>As seen above, the fields can be declared with or without a default value.</p> + +<h4 id="Private_field_declarations">Private field declarations</h4> + +<p>Using private fields, the definition can be refined as below.</p> + +<pre class="brush: js">class Rectangle { + #height = 0; + #width; + constructor(height, width) { + this.#height = height; + this.#width = width; + } +} +</pre> + +<p>It's an error to reference private fields from outside of the class; they can only be read or written within the class body. By defining things which are not visible outside of the class, you ensure that your classes' users can't depend on internals, which may change version to version.</p> + +<div class="note"> +<p>Private fields can only be declared up-front in a field declaration.</p> +</div> + +<p>Private fields cannot be created later through assigning to them, the way that normal properties can.</p> + +<p> </p> + +<h2 id="Sub_classing_with_extends">Sub classing with <code>extends</code></h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> keyword is used in <em>class declarations</em> or <em>class expressions</em> to create a class as a child of another class.</p> + +<pre class="brush: js">class Animal { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Dog extends Animal { + constructor(name) { + super(name); // call the super class constructor and pass in the name parameter + } + + speak() { + console.log(this.name + ' barks.'); + } +} + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie barks. +</pre> + +<p>If there is a constructor present in the subclass, it needs to first call super() before using "this".</p> + +<p>One may also extend traditional function-based "classes":</p> + +<pre class="brush: js">function Animal (name) { + this.name = name; +} + +Animal.prototype.speak = function () { + console.log(this.name + ' makes a noise.'); +} + +class Dog extends Animal { + speak() { + console.log(this.name + ' barks.'); + } +} + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie barks. +</pre> + +<p>Note that classes cannot extend regular (non-constructible) objects. If you want to inherit from a regular object, you can instead use {{jsxref("Object.setPrototypeOf()")}}:</p> + +<pre class="brush: js">const Animal = { + speak() { + console.log(this.name + ' makes a noise.'); + } +}; + +class Dog { + constructor(name) { + this.name = name; + } +} + +// If you do not do this you will get a TypeError when you invoke speak +Object.setPrototypeOf(Dog.prototype, Animal); + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie makes a noise. +</pre> + +<h2 id="Species">Species</h2> + +<p>You might want to return {{jsxref("Array")}} objects in your derived array class <code>MyArray</code>. The species pattern lets you override default constructors.</p> + +<p>For example, when using methods such as {{jsxref("Array.map", "map()")}} that returns the default constructor, you want these methods to return a parent <code>Array</code> object, instead of the <code>MyArray</code> object. The {{jsxref("Symbol.species")}} symbol lets you do this:</p> + +<pre class="brush: js">class MyArray extends Array { + // Overwrite species to the parent Array constructor + static get [Symbol.species]() { return Array; } +} + +let a = new MyArray(1,2,3); +let mapped = a.map(x => x * x); + +console.log(mapped instanceof MyArray); // false +console.log(mapped instanceof Array); // true +</pre> + +<h2 id="Super_class_calls_with_super">Super class calls with <code>super</code></h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> keyword is used to call corresponding methods of super class. This is one advantage over prototype-based inheritance.</p> + +<pre class="brush: js">class Cat { + constructor(name) { + this.name = name; + } + + speak() { + console.log(`${this.name} makes a noise.`); + } +} + +class Lion extends Cat { + speak() { + super.speak(); + console.log(`${this.name} roars.`); + } +} + +let l = new Lion('Fuzzy'); +l.speak(); +// Fuzzy makes a noise. +// Fuzzy roars. +</pre> + +<h2 id="Mix-ins">Mix-ins</h2> + +<p>Abstract subclasses or <em>mix-ins</em> are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.</p> + +<p>A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:</p> + +<pre class="brush: js">let calculatorMixin = Base => class extends Base { + calc() { } +}; + +let randomizerMixin = Base => class extends Base { + randomize() { } +}; +</pre> + +<p>A class that uses these mix-ins can then be written like this:</p> + +<pre class="brush: js">class Foo { } +class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.classes")}}</p> + +<h2 id="Running_in_Scratchpad">Running in Scratchpad</h2> + +<p>A class can't be redefined. If you're playing with code in Scratchpad (Firefox menu Tools > Web Developer > Scratchpad) and you 'Run' a definition of a class with the same name twice, you'll get a confusing SyntaxError: redeclaration of let <class-name>.</p> + +<p>To re-run a definition, use Scratchpad's menu Execute > Reload and Run.<br> + Please vote for bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1428672">#1428672</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li> + <li><a href="https://github.com/tc39/proposal-class-fields">Fields and public/private class properties proposal (stage 3)</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/classes/static/index.html b/files/bg/web/javascript/reference/classes/static/index.html new file mode 100644 index 0000000000..971bf40345 --- /dev/null +++ b/files/bg/web/javascript/reference/classes/static/index.html @@ -0,0 +1,135 @@ +--- +title: static +slug: Web/JavaScript/Reference/Classes/static +tags: + - Класове + - Статичен + - статичен метод +translation_of: Web/JavaScript/Reference/Classes/static +--- +<div>{{jsSidebar("Classes")}}</div> + +<p><span class="seoSummary">Ключовата дума <code><strong>static</strong></code> дефинира статичен метод за клас. Static methods aren't called on instances of the class. Instead, they're called on the class itself.</span> <span lang="bg">Това често са помощни функции, като например функции за създаване или клониране на обекти.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">static <em>methodName</em>() { ... }</pre> + +<h2 id="Описание">Описание</h2> + +<p>Статичните методи се правят директно в класът и не могат да се извикват като инстанции на клас.</p> + +<h2 id="Извикване_на_статичен_метод">Извикване на статичен метод</h2> + +<h3 id="От_друг_статичен_метод">От друг статичен метод</h3> + +<p>За да извикате статичен метод в рамките на друг статичен метод от същия клас, може да използвате ключовата дума <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>.</p> + +<pre class="brush: js">class StaticMethodCall { + static staticMethod() { + return 'Static method has been called'; + } + static anotherStaticMethod() { + return this.staticMethod() + ' from another static method'; + } +} +StaticMethodCall.staticMethod(); +// 'Static method has been called' + +StaticMethodCall.anotherStaticMethod(); +// 'Static method has been called from another static method'</pre> + +<h3 id="От_конструктора_на_клас_и_други_методи">От конструктора на клас и други методи</h3> + +<p>Статичните методи не са пряко достъпни, когато се използва ключовата дума <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> от нестатични методи. Трябва да ги извикате, използвайки името на класа: <code>CLASSNAME.STATIC_METHOD_NAME()</code> или да извикате метода като собственост на <code>constructor</code>: <code>this.constructor.STATIC_METHOD_NAME()</code>.</p> + +<pre class="brush: js">class StaticMethodCall { + constructor() { + console.log(StaticMethodCall.staticMethod()); + // 'static method has been called.' + + console.log(this.constructor.staticMethod()); + // 'static method has been called.' + } + + static staticMethod() { + return 'static method has been called.'; + } +}</pre> + +<h2 id="Примери">Примери</h2> + +<p>Следният пример показва няколко неща:</p> + +<ol> + <li>Как статичните методи се изпълняват в класът.</li> + <li>Това , че клас със статичен член може да бъде под-класиран.</li> + <li>Как статичният метод може и не може да бъде извикан.</li> +</ol> + +<pre class="brush: js">class Triple { + static triple(n) { + if (n === undefined) { + n = 1; + } + return n * 3; + } +} + +class BiggerTriple extends Triple { + static triple(n) { + return super.triple(n) * super.triple(n); + } +} + +console.log(Triple.triple()); // 3 +console.log(Triple.triple(6)); // 18 + +var tp = new Triple(); + +console.log(BiggerTriple.triple(3)); +// 81 (not affected by parent's instantiation) + +console.log(tp.triple()); +// 'tp.triple is not a function'. +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузера">Съвместимост с браузера</h2> + + + +<p>{{Compat("javascript.classes.static")}}</p> + +<h2 id="Вижте_още">Вижте още</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>класови</code> израз</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">декларация на <code>клас</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Класове</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/errors/index.html b/files/bg/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..c295fccea6 --- /dev/null +++ b/files/bg/web/javascript/reference/errors/index.html @@ -0,0 +1,31 @@ +--- +title: JavaScript error reference +slug: Web/JavaScript/Reference/Errors +tags: + - Debugging + - Error + - Errors + - Exception + - JavaScript + - NeedsTranslation + - TopicStub + - exceptions +translation_of: Web/JavaScript/Reference/Errors +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the {{jsxref("Error")}} object, and has a <code>name</code> and a <code>message</code>.</p> + +<p>Errors displayed in the Web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code.</p> + +<h2 id="List_of_errors">List of errors</h2> + +<p>In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!</p> + +<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>: Beginner's introductory tutorial on fixing JavaScript errors.</li> +</ul> diff --git a/files/bg/web/javascript/reference/errors/unexpected_type/index.html b/files/bg/web/javascript/reference/errors/unexpected_type/index.html new file mode 100644 index 0000000000..372560f00e --- /dev/null +++ b/files/bg/web/javascript/reference/errors/unexpected_type/index.html @@ -0,0 +1,70 @@ +--- +title: 'TypeError: "x" is (not) "y"' +slug: Web/JavaScript/Reference/Errors/Unexpected_type +tags: + - JavaScript + - TypeError + - Грешки +translation_of: Web/JavaScript/Reference/Errors/Unexpected_type +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Съобщение">Съобщение</h2> + +<pre class="syntaxbox">TypeError: "x" is (not) "y" + +Примери: +TypeError: "x" is undefined +TypeError: "x" is null +TypeError: "undefined" is not an object +TypeError: "x" is not an object or null +TypeError: "x" is not a symbol +</pre> + +<h2 id="Вид_на_грешката">Вид на грешката</h2> + +<p>{{jsxref("TypeError")}}.</p> + +<h2 id="Какво_се_обърка"><span class="short_text" id="result_box" lang="bg"><span>Какво се обърка?</span></span></h2> + +<p>Върнатият тип не отговаря на очакванията. Това се случва често при върната стойност {{jsxref("undefined")}} или {{jsxref("null")}}.</p> + +<p>Някои методи като {{jsxref("Object.create()")}} или {{jsxref("Symbol.keyFor()")}} освен това изискват да им бъде предоставен определен тип.</p> + +<h2 id="Примери">Примери</h2> + +<h3 id="Случаи_предизвикващи_грешката">Случаи, предизвикващи грешката</h3> + +<pre class="brush: js example-bad">// Случаи, при които методът substring няма да работи. +// Такива са undefined и null. +var foo = undefined; +foo.substring(1); // TypeError: foo is undefined + +var foo = null; +foo.substring(1); // TypeError: foo is null + + +// Методи, които очакват да бъдат извикани +// върху точно определен тип. +var foo = {} +Symbol.keyFor(foo); // TypeError: foo is not a symbol + +var foo = 'bar' +Object.create(foo); // TypeError: "foo" is not an object or null +</pre> + +<h3 id="Поправяне_на_грешката">Поправяне на грешката</h3> + +<p>За да оправите грешката в случай на указател, сочещ към стойност <code>undefined</code> или <code>null</code>, можете да използвате оператора <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a>.</p> + +<pre class="brush: js">if (typeof foo !== 'undefined') { + // Сега знаем, че foo има определена стойност + // и можем да продължим. +}</pre> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}}</li> +</ul> diff --git a/files/bg/web/javascript/reference/functions/arrow_functions/index.html b/files/bg/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..f2efe8ec10 --- /dev/null +++ b/files/bg/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,394 @@ +--- +title: Arrow functions +slug: Web/JavaScript/Reference/Functions/Arrow_functions +tags: + - Средно напреднали + - Функции + - Функции със стрелка + - референция +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Функционалният израз със стрелка има по-кратък синтаксис, отколкото стандартното дефиниране на функция и няма свой собствен <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code>, или <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code>. Тези функции не са подходящи за изполване като метод функции(methods) и не могат да бъдат използвани като конструктори.</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<h3 id="Основен_синтаксис">Основен синтаксис</h3> + +<pre class="syntaxbox notranslate">(param1, param2, …, paramN) => { statements } +(param1, param2, …, paramN) => expression +// равнозначно на: => { return expression; } + +// Скобите не са задължителни, когато има само един входен параметър: +(singleParam) => { statements } +singleParam => { statements } + +// Списъка с аргументи за функции без аргументи трябва да бъде написан, като се използват скоби. +() => { statements } +</pre> + +<h3 id="Напреднал_синтаксис">Напреднал синтаксис</h3> + +<pre class="syntaxbox notranslate">// Резултата може да бъде ограден в скоби за да бъде върнат под формата на обект(object literal expression): +params => ({foo: bar}) + +// Поддържат се <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest </a>оператора и <a href="en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметри по подразбиране</a> +(param1, param2, ...rest) => { statements } +(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { +statements } + +// <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Деструктуриране</a> на списъка с входни аргументи също се поддържа +var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; +f(); // 6 +</pre> + +<h2 id="Описание">Описание</h2> + +<p>Вижте също <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a>.</p> + +<p>Два фактора повлияха за въвеждането на функциите със стрелка: по-къси функции и липсата на ключовата дума <code>this</code>.</p> + +<h3 id="По-кракти_функции">По-кракти функции</h3> + +<pre class="brush: js notranslate">var elements = [ + 'Hydrogen', + 'Helium', + 'Lithium', + 'Beryllium' +]; + +elements.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(function(element) { + return element.length; +}); // извикването на описания код ще върне следния масив: [8, 6, 7, 9] + +// Горе описаната функция може да бъде написана и като функция със стрелка по следния начин +elements.map((element) => { + return element.length; +}); // [8, 6, 7, 9] + +// Когато има само един входен параметър можем да премахнем скобите: +elements.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(element => { + return element.length; +}); // [8, 6, 7, 9] + +// Когато единственото нещо в функцията е връщане на резултат, можем да премахнем `return` +// и също така да премахнем скобите +elements.map(element => element.length); // [8, 6, 7, 9] + +// In this case, because we only need the length property, we can use destructing parameter: +// Notice that the string `"length"` corrosponds to the property we want to get whereas the +// obviously non-special `lengthFooBArX` is just the name of a variable which can be changed +// to any valid variable name you want +elements.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9] + +// This destructing parameter assignment can be written as seen below. However, note that there +// is no specific `"length"` to select which property we want to get. Instead, the literal name +// itself of the variable `length` is used as the property we want to retrieve from the object. +elements.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ length }) => length); // [8, 6, 7, 9] +</pre> + +<h3 id="Без_отделна_ключова_дума_this">Без отделна ключова дума <code>this</code></h3> + +<p>Допреди функциите със стрелка, всяка нова функция дефинираше своя собствена стойност <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> (въз основа на това как се нарича функцията, нов обект в случай на конструктор, недифинарна при извикване на функции в <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">строг режим</a>,основният обект ако функцията се извиква като "object method", etc.). Това се оказа по-малко от идеалното с обектно-ориентирания стил на програмиране.</p> + +<pre class="brush: js notranslate">function Person() { + // The Person() constructor defines `this` as an instance of itself. + this.age = 0; + + setInterval(function growUp() { + // In non-strict mode, the growUp() function defines `this` + // as the global object (because it's where growUp() is executed.), + // which is different from the `this` + // defined by the Person() constructor. + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>В ECMAScript 3/5, проблемът с <code>this</code> беше поправим като присвоим стойността на <code>this</code> към променлива , която може да бъде затворена.</p> + +<pre class="brush: js notranslate">function Person() { + var that = this; + that.age = 0; + + setInterval(function growUp() { + // The callback refers to the `that` variable of which + // the value is the expected object. + that.age++; + }, 1000); +}</pre> + +<p>Като алтернатива, може да бъде създадена <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">свързана функция</a> така че <code>this</code> стойността може да бъде предадена на свързаната целева функция (функцията <code>growUp()</code> в примера по-горе).</p> + +<p>Функцията със стрелка няма свой собствен <code>this;</code> Стойността <code>this</code> от използвания лексикален контекст и др. <span style="background-color: #ffffff; color: #212121; display: inline !important; float: none; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;">Функциите със стрелки следват </span>нормалните правила на промелнива. Така че, докато търсим за <code>this,</code> който не присъства в текущият обхват на функцията, те взимат <code>this</code> от околният обхват. По този начин,в следния код, <code>this</code> <span lang="bg">в рамките на функцията</span>, която се предава на <code>setInterval</code> функцията, има същата стойност като на тази в околната лексикална функция:</p> + +<pre class="brush: js notranslate">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // |this| properly refers to the Person object + }, 1000); +} + +var p = new Person();</pre> + +<h4 id="Връзка_със_строг_режим">Връзка със строг режим</h4> + +<p>Като се има в предвид , че <code>this</code> идва от околния лексикален контекст, <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">строгите правила за режима</a> по отношение на <code>this</code> се игнорират.</p> + +<pre class="brush: js notranslate">var f = () => { 'use strict'; return this; }; +f() === window; // or the global object</pre> + +<p><span lang="bg">Всички други правила за строг режим се прилагат нормално</span></p> + +<h4 id="Извикване_чрез_повикване_или_прилагане">Извикване чрез повикване или прилагане</h4> + +<p>Тъй като функциите със стрелка нямат свой собствен <code>this</code>, методите <code>call()</code> <code>или apply()</code> могат само да предават параметри. <code>thisArg</code> се игнорира.</p> + +<pre class="brush: js notranslate">var adder = { + base: 1, + + add: function(a) { + var f = v => v + this.base; + return f(a); + }, + + addThruCall: function(a) { + var f = v => v + this.base; + var b = { + base: 2 + }; + + return f.call(b, a); + } +}; + +console.log(adder.add(1)); // This would log to 2 +console.log(adder.addThruCall(1)); // This would log to 2 still</pre> + +<h3 id="Без_обвързване_на_arguments">Без обвързване на <code>arguments</code></h3> + +<p>Функциите със стрелка нямат свой собствен <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">обект</a> от <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>аргументи</code> </a>.<span style="background-color: #ffffff; color: #212121; display: inline !important; float: none; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;">Следователно в този пример <code>аргументите </code>са просто препратка към аргументите на заобикалящото ги поле</span>:</p> + +<pre class="brush: js notranslate">var arguments = [1, 2, 3]; +var arr = () => arguments[0]; + +arr(); // 1 + +function foo(n) { + var f = () => arguments[0] + n; // <em>foo</em>'s implicit arguments binding. arguments[0] is n + return f(); +} + +foo(3); // 6</pre> + +<p>В повечето случаи, използването на <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters(остатъчни параметри)</a> е добра алтернатива от използването на обект с <code>аргументи</code>.</p> + +<pre class="brush: js notranslate">function foo(n) { + var f = (...args) => args[0] + n; + return f(10); +} + +foo(1); // 11</pre> + +<h3 id="Функции_със_стрелка_използвани_като_методи">Функции със стрелка използвани като методи</h3> + +<p><span class="tlid-translation translation"><span title="">Както бе посочено по-горе, изразите на функциите със стрелките са най-подходящи за функциите, различни от метода.</span> <span title="">Нека видим какво се случва, когато се опитаме да ги използваме като методи:</span></span></p> + +<pre class="brush: js notranslate">'use strict'; + +var obj = { + i: 10, + b: () => console.log(this.i, this), + c: function() { + console.log(this.i, this); + } +} + +obj.b(); // prints undefined, Window {...} (or the global object) +obj.c(); // prints 10, Object {...}</pre> + +<p>Функциите със стрелка нямат свой собствен <code>this</code>. Друг пример затова е : {{jsxref("Object.defineProperty()")}}:</p> + +<pre class="brush: js notranslate">'use strict'; + +var obj = { + a: 10 +}; + +Object.defineProperty(obj, 'b', { + get: () => { + console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object) + return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined' + } +}); +</pre> + +<h3 id="Използване_на_оператора_new">Използване на оператора <code>new</code></h3> + +<p>Функциите със стрелка не мога да бъдат използвани като конструктории ще генерират грешка , когато се изпозват с оператора <code>new</code>.</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +var foo = new Foo(); // TypeError: Foo is not a constructor</pre> + +<h3 id="Използване_на_свойството_prototype">Използване на свойството <code>prototype</code></h3> + +<p>Функциите със стрелки нямат свойството <code>prototype</code>.</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +console.log(Foo.prototype); // undefined +</pre> + +<h3 id="Използване_на_ключовата_дума_yield">Използване на ключовата дума <code>yield</code></h3> + +<p><span class="tlid-translation translation"><span title="">Ключовата дума</span></span> <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> не може да бъде използвана в тялото на функцията със стрелка ( <span class="tlid-translation translation"><span title="">освен когато е позволено в рамките на функциите, които са вложени в нея</span></span> ). <span class="tlid-translation translation"><span title="">В резултат на това функциите със стрелки не могат да се използват като генератори.</span></span></p> + +<h2 id="Тялото_на_функция">Тялото на функция</h2> + +<p>Функциите със стрелка могат да имат или "сбито тяло" или обичайното "блоково тяло".</p> + +<p>В сбитото тяло е посочен само израз, който се превръща в неявна връщана стойност. <span class="tlid-translation translation"><span title="">В блоково тяло трябва да използвате изрично <code>return</code> декларация за връщане.</span></span></p> + +<pre class="brush: js notranslate">var func = x => x * x; +// concise body syntax, implied "return" + +var func = (x, y) => { return x + y; }; +// with block body, explicit "return" needed +</pre> + +<h2 id="Връщане_на_литерали_на_обекти">Връщане на литерали на обекти</h2> + +<p>Имайте в предвид , че връщането на литерали на обекти, използвайки сбит синтаксис <code>params => {object:literal}</code> няма да работи според очакванията.</p> + +<pre class="brush: js notranslate">var func = () => { foo: 1 }; +// Calling func() returns undefined! + +var func = () => { foo: function() {} }; +// SyntaxError: function statement requires a name</pre> + +<p>Това е защото кодът вътре в скобите ({}) се анализита като оследователност от изрази (или <code>foo</code>се третира като етикет, а не като ключ в буквален обект).</p> + +<p>Запомнете, че трябва да поставяте буквалният обект в скоби , както е показано в примера по-долу.</p> + +<pre class="brush: js notranslate">var func = () => ({foo: 1});</pre> + +<h2 id="Прекъсване_на_линията">Прекъсване на линията</h2> + +<p>Функцията със стрелка не може да съдържа прекъсната линия между нейните параметри и стрелка.</p> + +<pre class="brush: js notranslate">var func = (a, b, c) + => 1; +// SyntaxError: expected expression, got '=>'</pre> + +<p><span class="tlid-translation translation"><span title="">Все пак това може да бъде променено, чрез използване на скоби или поставяне на разделителната линия в аргументите, както е показано в примера по-долу, за да се гарантира, че кодът остава красив и пухкав.</span></span></p> + +<pre class="brush: js notranslate">var func = ( + a, + b, + c +) => ( + 1 +); +// no SyntaxError thrown</pre> + + + +<h2 id="Parsing_order">Parsing order</h2> + +<p>Въпреки че, стрелката във функцията със стрелка не е оператор, функциите със стрелка имат специални правила, които взаимодействат по различен начин с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">оператора за предимство </a> сравнено с нормалните функции.</p> + +<pre class="brush: js notranslate">let callback; + +callback = callback || function() {}; // ok + +callback = callback || () => {}; +// SyntaxError: invalid arrow-function arguments + +callback = callback || (() => {}); // ok +</pre> + +<h2 id="Още_примери">Още примери</h2> + +<pre class="brush: js notranslate">// An empty arrow function returns undefined +let empty = () => {}; + +(() => 'foobar')(); +// Returns "foobar" +// (this is an Immediately Invoked Function Expression +// see 'IIFE' in glossary) + +var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b; + +// Easy array filtering, mapping, ... + +var arr = [5, 6, 13, 0, 1, 18, 23]; + +var sum = arr.reduce((a, b) => a + b); +// 66 + +var even = arr.filter(v => v % 2 == 0); +// [6, 0, 18] + +var double = arr.map(v => v * 2); +// [10, 12, 26, 0, 2, 36, 46] + +// More concise promise chains +promise.then(a => { + // ... +}).then(b => { + // ... +}); + +// Parameterless arrow functions that are visually easier to parse +setTimeout( () => { + console.log('I happen sooner'); + setTimeout( () => { + // deeper code + console.log('I happen later'); + }, 1); +}, 1); +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузера">Съвместимост с браузера</h2> + +<div> + + +<p>{{Compat("javascript.functions.arrow_functions")}}</p> +</div> + +<h2 id="Вижте_още">Вижте още</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/functions/index.html b/files/bg/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..adb0d13f05 --- /dev/null +++ b/files/bg/web/javascript/reference/functions/index.html @@ -0,0 +1,596 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +tags: + - Constructor + - Function + - Functions + - JavaScript + - NeedsTranslation + - Parameter + - TopicStub + - parameters +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function will <em>return</em> a value.</p> + +<p>In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> + +<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> + +<h2 id="Description">Description</h2> + +<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> + +<p>To return a value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is {{jsxref("undefined")}}.</p> + +<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p> + +<pre class="brush: js">/* Declare the function 'myFunc' */ +function myFunc(theObject) { + theObject.brand = "Toyota"; +} + +/* + * Declare variable 'mycar'; + * create and initialize a new Object; + * assign reference to it to 'mycar' + */ +var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 +}; + +/* Logs 'Honda' */ +console.log(mycar.brand); + +/* Pass object reference to the function */ +myFunc(mycar); + +/* + * Logs 'Toyota' as the value of the 'brand' property + * of the object, as changed to by the function. + */ +console.log(mycar.brand); +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> + +<h2 id="Defining_functions">Defining functions</h2> + +<p>There are several ways to define functions:</p> + +<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> + +<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> + +<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details). A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions. Function expressions are not <em>hoisted</em> onto the beginning of the scope, therefore they cannot be used before they appear in the code.</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<p>Here is an example of an <strong>anonymous</strong> function expression (the <code>name</code> is not used):</p> + +<pre class="brush: js">var myFunction = function() { + statements +}</pre> + +<p>It is also possible to provide a name inside the definition in order to create a <strong>named</strong> function expression:</p> + +<pre class="brush: js">var myFunction = function namedFunction(){ + statements +} +</pre> + +<p>One of the benefits of creating a named function expression is that in case we encountered an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.</p> + +<p>As we can see, both examples do not start with the <code>function</code> keyword. Statements involving functions which do not start with <code>function</code> are function expressions.</p> + +<p>When functions are used only once, a common pattern is an <a href="/en-US/docs/Glossary/IIFE">IIFE (Immediately Invokable Function Expression)</a>.</p> + +<pre class="brush: js">(function() { + statements +})();</pre> + +<p>IIFE are function expressions that are invoked as soon as the function is declared.</p> + +<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> + +<p>There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> + +<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_arrow_function_expression_(>)">The arrow function expression (=>)</h3> + +<p>An arrow function expression has a shorter syntax and lexically binds its <code>this</code> value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> + +<pre class="syntaxbox">([param[, param]]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument, the parentheses are not required. (like <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.</dd> +</dl> + +<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function body.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The rest parameter syntax allows representing an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="The_arguments_object">The <code>arguments</code> object</h2> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> +</ul> + +<h2 id="Defining_method_functions">Defining method functions</h2> + +<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> + +<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Binds an object property to a function that will be called when that property is looked up.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> +</dl> + +<h3 id="Method_definition_syntax">Method definition syntax</h3> + +<p>Starting with ECMAScript 2015, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Constructor_vs._declaration_vs._expression">Constructor vs. declaration vs. expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> <em>constructor</em> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = new Function('x', 'y', 'return x * y');</pre> + +<p>A <em>function declaration</em> of a function named <code>multiply</code>:</p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} // there is no semicolon here +</pre> + +<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences">Differences</h3> + +<p>All do approximately the same thing, with a few subtle differences:</p> + +<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> + +<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope in which the function is declared.</p> + +<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other. A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p> + +<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>A function defined by a function expression or by a function declaration inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> + +<pre class="brush: js">/* + * Declare and initialize a variable 'p' (global) + * and a function 'myFunc' (to change the scope) inside which + * declare a varible with same name 'p' (current) and + * define three functions using three different ways:- + * 1. function declaration + * 2. function expression + * 3. function constructor + * each of which will log 'p' + */ +var p = 5; +function myFunc() { + var p = 9; + + function decl() { + console.log(p); + } + var expr = function() { + console.log(p); + }; + var cons = new Function('\tconsole.log(p);'); + + decl(); + expr(); + cons(); +} +myFunc(); + +/* + * Logs:- + * 9 - for 'decl' by function declaration (current scope) + * 9 - for 'expr' by function expression (current scope) + * 5 - for 'cons' by Function constructor (global scope) + */ +</pre> + +<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> + +<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> + +<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> + +<ul> + <li>becomes part of an expression</li> + <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x === 0) { // source element + x = 10; // not a source element + function boo() {} // not a source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y === 10) { // source element + function blah() {} // not a source element + y++; // not a source element + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// function declaration +function foo() {} + +// function expression +(function bar() {}) + +// function expression +x = function hello() {} + + +if (x) { + // function expression + function world() {} +} + + +// function declaration +function a() { + // function declaration + function b() {} + if (0) { + // function expression + function c() {} + } +} +</pre> + +<h2 id="Block-level_functions">Block-level functions</h2> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, starting with ES2015, functions inside blocks are now scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.</p> + +<pre class="brush: js">'use strict'; + +function f() { + return 1; +} + +{ + function f() { + return 2; + } +} + +f() === 1; // true + +// f() === 2 in non-strict mode +</pre> + +<h3 id="Block-level_functions_in_non-strict_code">Block-level functions in non-strict code</h3> + +<p>In a word: Don't.</p> + +<p>In non-strict code, function declarations inside blocks behave strangely. For example:</p> + +<pre class="brush: js">if (shouldDefineZero) { + function zero() { // DANGER: compatibility risk + console.log("This is zero."); + } +} +</pre> + +<p>ES2015 says that if <code>shouldDefineZero</code> is false, then <code>zero</code> should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define <code>zero</code> whether the block executed or not.</p> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, all browsers that support ES2015 handle this the same way: <code>zero</code> is defined only if <code>shouldDefineZero</code> is true, and only in the scope of the <code>if</code>-block.</p> + +<p>A safer way to define functions conditionally is to assign a function expression to a variable:</p> + +<pre class="brush: js">var zero; +if (shouldDefineZero) { + zero = function() { + console.log("This is zero."); + }; +} +</pre> + +<h2 id="Examples_2">Examples</h2> + +<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> + +<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> + +<pre class="brush: js">// This function returns a string padded with leading zeros +function padZeros(num, totalLen) { + var numStr = num.toString(); // Initialize return value as string + var numZeros = totalLen - numStr.length; // Calculate no. of zeros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is performed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise, some other action is taken.</p> + +<pre class="brush: js"> if ('function' === typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.functions")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/global_objects/array/index.html b/files/bg/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..1d2a114327 --- /dev/null +++ b/files/bg/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,460 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - Example + - Global Objects + - JavaScript + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<p>The JavaScript <strong><code>Array</code></strong> object is a global object that is used in the construction of arrays; which are high-level, list-like objects.</p> + +<p><strong>Create an Array</strong></p> + +<pre class="brush: js">var fruits = ['Apple', 'Banana']; + +console.log(fruits.length); +// 2 +</pre> + +<p><strong>Access (index into) an Array item</strong></p> + +<pre class="brush: js">var first = fruits[0]; +// Apple + +var last = fruits[fruits.length - 1]; +// Banana +</pre> + +<p><strong>Loop over an Array</strong></p> + +<pre class="brush: js">fruits.forEach(function(item, index, array) { + console.log(item, index); +}); +// Apple 0 +// Banana 1 +</pre> + +<p><strong>Add to the end of an Array</strong></p> + +<pre class="brush: js">var newLength = fruits.push('Orange'); +// ["Apple", "Banana", "Orange"] +</pre> + +<p><strong>Remove from the end of an Array</strong></p> + +<pre class="brush: js">var last = fruits.pop(); // remove Orange (from the end) +// ["Apple", "Banana"]; +</pre> + +<p><strong>Remove from the front of an Array</strong></p> + +<pre class="brush: js">var first = fruits.shift(); // remove Apple from the front +// ["Banana"]; +</pre> + +<p><strong>Add to the front of an Array</strong></p> + +<pre class="brush: js">var newLength = fruits.unshift('Strawberry') // add to the front +// ["Strawberry", "Banana"]; +</pre> + +<p><strong>Find the index of an item in the Array</strong></p> + +<pre class="brush: js">fruits.push('Mango'); +// ["Strawberry", "Banana", "Mango"] + +var pos = fruits.indexOf('Banana'); +// 1 +</pre> + +<p><strong>Remove an item by index position</strong></p> + +<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // this is how to remove an item + +// ["Strawberry", "Mango"]</pre> + +<p><strong>Remove items from an index position</strong></p> + +<pre class="brush: js">var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']; +console.log(vegetables); +// ["Cabbage", "Turnip", "Radish", "Carrot"] + +var pos = 1, n = 2; + +var removedItems = vegetables.splice(pos, n); +// this is how to remove items, n defines the number of items to be removed, +// from that position(pos) onward to the end of array. + +console.log(vegetables); +// ["Cabbage", "Carrot"] (the original array is changed) + +console.log(removedItems); +// ["Turnip", "Radish"]</pre> + +<p><strong>Copy an Array</strong></p> + +<pre class="brush: js">var shallowCopy = fruits.slice(); // this is how to make a copy +// ["Strawberry", "Mango"] +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>A JavaScript array is initialized with the given elements, except in the case where a single argument is passed to the <code>Array</code> constructor and that argument is a number (see the arrayLength parameter below). Note that this special case only applies to JavaScript arrays created with the <code>Array</code> constructor, not array literals created with the bracket syntax.</dd> + <dt><code>arrayLength</code></dt> + <dd>If the only argument passed to the <code>Array</code> constructor is an integer between 0 and 2<sup>32</sup>-1 (inclusive), this returns a new JavaScript array with its <code>length</code> property set to that number (<strong>Note:</strong> this implies an array of <code>arrayLength</code> empty slots, not slots with actual <code>undefined</code> values). If the argument is any other number, a {{jsxref("RangeError")}} exception is thrown.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.</p> + +<p>Arrays cannot use strings as element indexes (as in an <a href="https://en.wikipedia.org/wiki/Associative_array">associative array</a>) but must use integers. Setting or accessing via non-integers using <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">bracket notation</a> (or <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">dot notation</a>) will not set or retrieve an element from the array list itself, but will set or access a variable associated with that array's <a href="/en-US/docs/Web/JavaScript/Data_structures#Properties">object property collection</a>. The array's object properties and list of array elements are separate, and the array's <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_methods">traversal and mutation operations</a> cannot be applied to these named properties.</p> + +<h3 id="Accessing_array_elements">Accessing array elements</h3> + +<p>JavaScript arrays are zero-indexed: the first element of an array is at index <code>0</code>, and the last element is at the index equal to the value of the array's {{jsxref("Array.length", "length")}} property minus 1. Using an invalid index number returns <code>undefined</code>.</p> + +<pre class="brush: js">var arr = ['this is the first element', 'this is the second element', 'this is the last element']; +console.log(arr[0]); // logs 'this is the first element' +console.log(arr[1]); // logs 'this is the second element' +console.log(arr[arr.length - 1]); // logs 'this is the last element' +</pre> + +<p>Array elements are object properties in the same way that <code>toString</code> is a property, but trying to access an element of an array as follows throws a syntax error because the property name is not valid:</p> + +<pre class="brush: js">console.log(arr.0); // a syntax error +</pre> + +<p>There is nothing special about JavaScript arrays and the properties that cause this. JavaScript properties that begin with a digit cannot be referenced with dot notation; and must be accessed using bracket notation. For example, if you had an object with a property named <code>'3d'</code>, it can only be referenced using bracket notation. E.g.:</p> + +<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // a syntax error +console.log(years[0]); // works properly +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'character.png'); // a syntax error +renderer['3d'].setTexture(model, 'character.png'); // works properly +</pre> + +<p>Note that in the <code>3d</code> example, <code>'3d'</code> had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., <code>years['2']</code> instead of <code>years[2]</code>), although it's not necessary. The 2 in <code>years[2]</code> is coerced into a string by the JavaScript engine through an implicit <code>toString</code> conversion. It is, for this reason, that <code>'2'</code> and <code>'02'</code> would refer to two different slots on the <code>years</code> object and the following example could be <code>true</code>:</p> + +<pre class="brush: js">console.log(years['2'] != years['02']); +</pre> + +<p>Similarly, object properties which happen to be reserved words(!) can only be accessed as string literals in bracket notation (but it can be accessed by dot notation in firefox 40.0a2 at least):</p> + +<pre class="brush: js">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['var']); +</pre> + +<h3 id="Relationship_between_length_and_numerical_properties">Relationship between <code>length</code> and numerical properties</h3> + +<p>A JavaScript array's {{jsxref("Array.length", "length")}} property and numerical properties are connected. Several of the built-in array methods (e.g., {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, etc.) take into account the value of an array's {{jsxref("Array.length", "length")}} property when they're called. Other methods (e.g., {{jsxref("Array.push", "push()")}}, {{jsxref("Array.splice", "splice()")}}, etc.) also result in updates to an array's {{jsxref("Array.length", "length")}} property.</p> + +<pre class="brush: js">var fruits = []; +fruits.push('banana', 'apple', 'peach'); + +console.log(fruits.length); // 3 +</pre> + +<p>When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's {{jsxref("Array.length", "length")}} property accordingly:</p> + +<pre class="brush: js">fruits[5] = 'mango'; +console.log(fruits[5]); // 'mango' +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6 +</pre> + +<p>Increasing the {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<p>Decreasing the {{jsxref("Array.length", "length")}} property does, however, delete elements.</p> + +<pre class="brush: js">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2 +</pre> + +<p>This is explained further on the {{jsxref("Array.length")}} page.</p> + +<h3 id="Creating_an_array_using_the_result_of_a_match">Creating an array using the result of a match</h3> + +<p>The result of a match between a regular expression and a string can create a JavaScript array. This array has properties and elements which provide information about the match. Such an array is returned by {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. To help explain these properties and elements, look at the following example and then refer to the table below:</p> + +<pre class="brush: js">// Match one d followed by one or more b's followed by one d +// Remember matched b's and the following d +// Ignore case + +var myRe = /d(b+)(d)/i; +var myArray = myRe.exec('cdbBdbsbz'); +</pre> + +<p>The properties and elements returned from this match are as follows:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Property/Element</td> + <td class="header">Description</td> + <td class="header">Example</td> + </tr> + <tr> + <td><code>input</code></td> + <td>A read-only property that reflects the original string against which the regular expression was matched.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>A read-only property that is the zero-based index of the match in the string.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>A read-only element that specifies the last matched characters.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>The <code>Array</code> constructor's length property whose value is 1.</dd> + <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Allows the addition of properties to all array objects.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>Creates a new <code>Array</code> instance from an array-like or iterable object.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Returns true if a variable is an array, if not false.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>Creates a new <code>Array</code> instance with a variable number of arguments, regardless of number or type of the arguments.</dd> +</dl> + +<h2 id="Array_instances"><code>Array</code> instances</h2> + +<p>All <code>Array</code> instances inherit from {{jsxref("Array.prototype")}}. The prototype object of the <code>Array</code> constructor can be modified to affect all <code>Array</code> instances.</p> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Mutator_methods">Mutator methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> + +<h4 id="Accessor_methods">Accessor methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> + +<h4 id="Iteration_methods">Iteration methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div> + +<h2 id="Array_generic_methods"><code>Array</code> generic methods</h2> + +<div class="warning"> +<p><strong>Array generics are non-standard, deprecated and will get removed in the near future</strong>. </p> +</div> + +<p>Sometimes you would like to apply array methods to strings or other array-like objects (such as function {{jsxref("Functions/arguments", "arguments", "", 1)}}). By doing this, you treat a string as an array of characters (or otherwise treat a non-array as an array). For example, in order to check that every character in the variable <var>str</var> is a letter, you would write:</p> + +<pre class="brush: js">function isLetter(character) { + return character >= 'a' && character <= 'z'; +} + +if (Array.prototype.every.call(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:</p> + +<pre class="brush: js">if (Array.every(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("String")}}.</p> + +<p>These are <strong>not</strong> part of ECMAScript standards and they are not supported by non-Gecko browsers. As a standard alternative, you can convert your object to a proper array using {{jsxref("Array.from()")}}; although that method may not be supported in old browsers:</p> + +<pre class="brush: js">if (Array.from(str).every(isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Creating_an_array">Creating an array</h3> + +<p>The following example creates an array, <code>msgArray</code>, with a length of 0, then assigns values to <code>msgArray[0]</code> and <code>msgArray[99]</code>, changing the length of the array to 100.</p> + +<pre class="brush: js">var msgArray = []; +msgArray[0] = 'Hello'; +msgArray[99] = 'world'; + +if (msgArray.length === 100) { + console.log('The length is 100.'); +} +</pre> + +<h3 id="Creating_a_two-dimensional_array">Creating a two-dimensional array</h3> + +<p>The following creates a chess board as a two-dimensional array of strings. The first move is made by copying the 'p' in (6,4) to (4,4). The old position (6,4) is made blank.</p> + +<pre class="brush: js">var board = [ + ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r'] ]; + +console.log(board.join('\n') + '\n\n'); + +// Move King's Pawn forward 2 +board[4][4] = board[6][4]; +board[6][4] = ' '; +console.log(board.join('\n')); +</pre> + +<p>Here is the output:</p> + +<pre class="eval">R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +</pre> + +<h3 id="Using_an_array_to_tabulate_a_set_of_values">Using an array to tabulate a set of values</h3> + +<pre class="brush: js">values = []; +for (var x = 0; x < 10; x++){ + values.push([ + 2 ** x, + 2 * x ** 2 + ]) +}; +console.table(values)</pre> + +<p>Results in</p> + +<pre class="eval">0 1 0 +1 2 2 +2 4 8 +3 8 18 +4 16 32 +5 32 50 +6 64 72 +7 128 98 +8 256 128 +9 512 162</pre> + +<p>(First column is the (index))</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>New methods added: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New methods added: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>New method added: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Array")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/global_objects/array/splice/index.html b/files/bg/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..36d82dc700 --- /dev/null +++ b/files/bg/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,155 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - JavaScript + - splice + - Масив + - заместване + - метод + - премахване +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<p>Методът <strong><code>splice()</code></strong> променя съдържанието на масива като изтрива или заменя съществуващи елементи и/или добавя нови.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">let <var>arrDeletedItems</var> = <var>array</var>.splice(<var>start</var>[, <var>deleteCount</var>[, <var>item1</var>[, <var>item2</var>[, ...]]]]) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>start</var></code></dt> + <dd>Индексът, от който започва промяната на масива.</dd> + <dd>Ако числото е по-голямо от дължината на масива, стойността на <code><var>start</var></code> ще се промени автоматично и ще приеме стойност равна на дължината на масива. В този случай няма да бъдат изтрити елементи от масива. Методът ще се държи като функция за добавяне на елементи и ще добави толкова елементи колкото са подадени като item[n*].</dd> + <dd>Ако <code><var>start</var></code> е отрицателно число обработката на масива ще започне от края на масива.( Случай че, <code><var>start</var></code> e -1 това означава -n е индексът на n-тия последен елемент и следователно е еквивалентен на <code>array.length - n</code> ).</dd> + <dd>Ако <code><var>array</var>.length + <var>start</var></code> е по-малко от <code>0</code>, ще започне от индекс <code>0</code>.</dd> + <dt><code><var>deleteCount</var></code> {{optional_inline}}</dt> + <dd>Число, което показва колко елемента трябва да бъдат изтрити ( започва се от <code><var>start</var></code> ).</dd> + <dd>If <code><var>deleteCount</var></code> is omitted, or if its value is equal to or larger than <code><var>array</var>.length - <var>start</var></code> (that is, if it is equal to or greater than the number of elements left in the array, starting at <code><var>start</var></code>), then all the elements from <code><var>start</var></code> to the end of the array will be deleted.</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>Note:</strong> In IE8, it won't delete all when <code><var>deleteCount</var></code> is omitted.</p> + </div> + </dd> + <dd>If <code><var>deleteCount</var></code> is <code>0</code> or negative, no elements are removed. In this case, you should specify at least one new element (see below).</dd> + <dt><code><var>item1</var>, <var>item2</var>, ...</code> {{optional_inline}}</dt> + <dd>The elements to add to the array, beginning from <code><var>start</var></code>. If you do not specify any elements, <code>splice()</code> will only remove elements from the array.</dd> +</dl> + +<h3 id="Върната_стойност">Върната стойност</h3> + +<p>Методът връща масив, съдържащ изтритите елементи.</p> + +<p>Ако само един елемент е премахнат, резултатът ще бъде масив с един елемент.</p> + +<p>Ако няма изтрити елементи, резултатът ще бъде празен масив.</p> + +<h2 id="Описание">Описание</h2> + +<p>Ако броя на добавените елементи се различава от броя на изтритите, ще има промяна в дължината на масива.</p> + +<h2 id="Примери">Примери</h2> + +<h3 id="Премахват_се_0_елемента_пред_индекс_2_и_се_добавя_drum">Премахват се 0 елемента пред индекс 2 и се добавя "drum"</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'] +// Ако изходният ви код е в utf8, можете да ползвате всякакви азбуки +let премахнат = myFish.splice(2, 0, 'drum') + +// myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"] +// премахнат = [], не са премахнати елементи</pre> + +<h3 id="Премахват_се_0_елемента_пред_индекс_2_и_се_добавят_drum_и_guitar">Премахват се 0 елемента пред индекс 2 и се добавят "drum" и "guitar"</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'] +let removed = myFish.splice(2, 0, 'drum', 'guitar') + +// myFish = ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"] +// removed = [], не са премахнати елементи +</pre> + +<h3 id="Премахва_се_един_елемент_започвайки_от_индекс_3">Премахва се един елемент, започвайки от индекс 3</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'] +let removed = myFish.splice(3, 1) + +// removed = ["mandarin"] +// myFish = ["angel", "clown", "drum", "sturgeon"] +</pre> + +<h3 id="Remove_1_element_at_index_2_and_insert_trumpet">Remove 1 element at index 2, and insert "trumpet"</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'drum', 'sturgeon'] +let removed = myFish.splice(2, 1, 'trumpet') + +// myFish = ["angel", "clown", "trumpet", "sturgeon"] +// removed = ["drum"]</pre> + +<h3 id="Remove_2_elements_from_index_0_and_insert_parrot_anemone_and_blue">Remove 2 elements from index 0, and insert "parrot", "anemone" and "blue"</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'trumpet', 'sturgeon'] +let removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue') + +// myFish = ["parrot", "anemone", "blue", "trumpet", "sturgeon"] +// removed = ["angel", "clown"]</pre> + +<h3 id="Remove_2_elements_from_index_2">Remove 2 elements from index 2</h3> + +<pre class="brush: js">let myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'] +let removed = myFish.splice(2, 2) + +// myFish = ["parrot", "anemone", "sturgeon"] +// removed = ["blue", "trumpet"]</pre> + +<h3 id="Remove_1_element_from_index_-2">Remove 1 element from index -2</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'] +let removed = myFish.splice(-2, 1) + +// myFish = ["angel", "clown", "sturgeon"] +// removed = ["mandarin"]</pre> + +<h3 id="Remove_all_elements_after_index_2_incl.">Remove all elements after index 2 (incl.)</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'] +let removed = myFish.splice(2) + +// myFish = ["angel", "clown"] +// removed = ["mandarin", "sturgeon"]</pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_и_подръжка">Съвместимост и подръжка</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.splice")}}</p> +</div> + +<h2 id="Виж_повече">Виж повече</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}}— добавя/премахва елемент от края на масива</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}}— добавя/премахва елемент от началото на масива</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}}— връща нов масив състоящ се от този масив, обединен с друг масив или стойности.</li> +</ul> diff --git a/files/bg/web/javascript/reference/global_objects/arraybuffer/index.html b/files/bg/web/javascript/reference/global_objects/arraybuffer/index.html new file mode 100644 index 0000000000..6849a4d7b2 --- /dev/null +++ b/files/bg/web/javascript/reference/global_objects/arraybuffer/index.html @@ -0,0 +1,96 @@ +--- +title: ArrayBuffer +slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +--- +<div>{{JSRef}}</div> + +<div></div> + +<p><strong><code>ArrayBuffer</code></strong> обекта се използва за репрезентиране на най общ бъфер за двоични данни със статична дължина.</p> + +<p>Това е масив от байтове, често наричан в други езици "byte array".Не можете директно да манипулирате съдържанието на <code>ArrayBuffer</code>; вместо това вие трябва да създадете <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">масив от типизирани обекти</a> или {{jsxref("DataView")}} обект, който ще представлява бъфера в специфичен формат, който ще се използва за да чете съдържанието на бъфера.</p> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer">ArrayBuffer()</a></code> конструктора създава нов <code>ArrayBuffer</code> от подадена дължина в байтове, можете също да получите <code>ArrayBuffer</code> от вече съществуващи данни, например <a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix_to_Solution_1_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">от Base64 низ</a> или от <a href="/en-US/docs/Web/API/FileReader/readAsArrayBuffer">файл от вашата система</a>.</p> + +<h2 id="Конструктор">Конструктор</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.ArrayBuffer", "ArrayBuffer()")}}</dt> + <dd>Създава нови <code>ArrayBuffer</code> обекти.</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<dl> + <dt><code>ArrayBuffer.length</code> </dt> + <dd>Връща броя параметри на конструктор функцията на <code>ArrayBuffer</code> , който е 1.</dd> + <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt> + <dd>Конструктор функцията, която се използва за създаване на нови обекти.</dd> + <dt><code>ArrayBuffer.prototype</code></dt> + <dd>Позволява за добавянето на допълнителни свойства към всички <code>ArrayBuffer</code> обекти.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt> + <dd>Връща <code>true</code> ако <code>arg</code> е един от буферните масивни типове, като <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">масив от типизирани обекти</a> или {{jsxref("DataView")}}. Връща <code>false</code> в противен случай.</dd> + <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}}</dt> + <dd> + <div class="line" id="file-arraybuffer-transfer-LC6">Връща нов <code>ArrayBuffer</code> ,чието съдържание е взето от данните на <code>oldBuffer</code> и след това се скъсява или се доплъват водещите нули (zero-extended) с <code>newByteLength</code>.</div> + </dd> +</dl> + +<h2 id="Инстанции">Инстанции</h2> + +<p>Всички <code>ArrayBuffer</code> инстанции наследяват <code>ArrayBuffer.prototype</code>.</p> + +<h3 id="Свойства_2">Свойства</h3> + +<dl> + <dt><code>ArrayBuffer.prototype.constructor</code></dt> + <dd>Е функцията, която създава прототипа на обекта. Началната стойност е стандартният, вграден конструктор на <code>ArrayBuffer</code>.</dd> + <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>Големината, в байтове на <code>ArrayBuffer</code>. Това се установява когато масива се създава и не може да се променя.</dd> +</dl> + +<h3 id="Методи_2">Методи</h3> + +<dl> + <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt> + <dd>Връща нов <code>ArrayBuffer</code>, чието съдържание е копие на байтовете на този <code>ArrayBuffer</code> от <code>begin(началото)</code>, включително, до <code>end(края)</code>, изключае.Ако някое от <code>begin</code> или <code>end</code> е отрицателно, се отнася към индекс в края на масива, вместо в началото.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<p>В този пример ще създадем 8-битов бъфер с {{jsxref("Int32Array")}} изглед, рефериращ към бъфера:</p> + +<pre class="brush: js">const buffer = new ArrayBuffer(8); +const view = new Int32Array(buffer);</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arraybuffer-objects', 'ArrayBuffer')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_на_браузъра">Съвместимост на браузъра</h2> + +<div class="hidden">Таблицата за съвемстимост се генерира от структурни данни. Ако искате да допринесете към данните, моля вижте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и ни изпратете pull request.</div> + +<p>{{Compat("javascript.builtins.ArrayBuffer")}}</p> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> diff --git a/files/bg/web/javascript/reference/global_objects/index.html b/files/bg/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..6af3563dd3 --- /dev/null +++ b/files/bg/web/javascript/reference/global_objects/index.html @@ -0,0 +1,182 @@ +--- +title: Standard built-in objects +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<p>{{JSSidebar("Objects")}}</p> + +<p>This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.</p> + +<p>The term "global objects" (or standard built-in objects) here is not to be confused with the <strong>global object</strong>. Here, global objects refer to <strong>objects in the global scope</strong>. The <strong>global object</strong> itself can be accessed using the {{JSxRef("Operators/this", "this")}} operator in the global scope (but only if ECMAScript 5 strict mode is not used; in that case it returns {{JSxRef("undefined")}}). In fact, the global scope <strong>consists of</strong> the properties of the global object, including inherited properties, if any.</p> + +<p>Other objects in the global scope are either <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">created by the user script</a> or provided by the host application. The host objects available in browser contexts are documented in the <a href="/en-US/docs/Web/API/Reference">API reference</a>. For more information about the distinction between the <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> and core <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h2 id="Standard_objects_by_category">Standard objects by category</h2> + +<h3 id="Value_properties">Value properties</h3> + +<p>These global properties return a simple value; they have no properties or methods.</p> + +<ul> + <li>{{JSxRef("Infinity")}}</li> + <li>{{JSxRef("NaN")}}</li> + <li>{{JSxRef("undefined")}}</li> + <li>{{JSxRef("null")}} literal</li> + <li>{{JSxRef("globalThis")}}</li> +</ul> + +<h3 id="Function_properties">Function properties</h3> + +<p>These global functions—functions which are called globally rather than on an object—directly return their results to the caller.</p> + +<ul> + <li>{{JSxRef("Global_Objects/eval", "eval()")}}</li> + <li>{{JSxRef("Global_Objects/uneval", "uneval()")}} {{Non-standard_Inline}}</li> + <li>{{JSxRef("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{JSxRef("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{JSxRef("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{JSxRef("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{JSxRef("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{JSxRef("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{JSxRef("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{JSxRef("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{JSxRef("Global_Objects/escape", "escape()")}} {{Deprecated_Inline}}</li> + <li>{{JSxRef("Global_Objects/unescape", "unescape()")}} {{Deprecated_Inline}}</li> +</ul> + +<h3 id="Fundamental_objects">Fundamental objects</h3> + +<p>These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general objects, functions, and errors.</p> + +<ul> + <li>{{JSxRef("Object")}}</li> + <li>{{JSxRef("Function")}}</li> + <li>{{JSxRef("Boolean")}}</li> + <li>{{JSxRef("Symbol")}}</li> + <li>{{JSxRef("Error")}}</li> + <li>{{JSxRef("EvalError")}}</li> + <li>{{JSxRef("InternalError")}} {{Non-standard_Inline}}</li> + <li>{{JSxRef("RangeError")}}</li> + <li>{{JSxRef("ReferenceError")}}</li> + <li>{{JSxRef("SyntaxError")}}</li> + <li>{{JSxRef("TypeError")}}</li> + <li>{{JSxRef("URIError")}}</li> +</ul> + +<h3 id="Numbers_and_dates">Numbers and dates</h3> + +<p>These are the base objects representing numbers, dates, and mathematical calculations.</p> + +<ul> + <li>{{JSxRef("Number")}}</li> + <li>{{JSxRef("BigInt")}}</li> + <li>{{JSxRef("Math")}}</li> + <li>{{JSxRef("Date")}}</li> +</ul> + +<h3 id="Text_processing">Text processing</h3> + +<p>These objects represent strings and support manipulating them.</p> + +<ul> + <li>{{JSxRef("String")}}</li> + <li>{{JSxRef("RegExp")}}</li> +</ul> + +<h3 id="Indexed_collections">Indexed collections</h3> + +<p>These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.</p> + +<ul> + <li>{{JSxRef("Array")}}</li> + <li>{{JSxRef("Int8Array")}}</li> + <li>{{JSxRef("Uint8Array")}}</li> + <li>{{JSxRef("Uint8ClampedArray")}}</li> + <li>{{JSxRef("Int16Array")}}</li> + <li>{{JSxRef("Uint16Array")}}</li> + <li>{{JSxRef("Int32Array")}}</li> + <li>{{JSxRef("Uint32Array")}}</li> + <li>{{JSxRef("Float32Array")}}</li> + <li>{{JSxRef("Float64Array")}}</li> + <li>{{JSxRef("BigInt64Array")}}</li> + <li>{{JSxRef("BigUint64Array")}}</li> +</ul> + +<h3 id="Keyed_collections">Keyed collections</h3> + +<p>These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.</p> + +<ul> + <li>{{JSxRef("Map")}}</li> + <li>{{JSxRef("Set")}}</li> + <li>{{JSxRef("WeakMap")}}</li> + <li>{{JSxRef("WeakSet")}}</li> +</ul> + +<h3 id="Structured_data">Structured data</h3> + +<p>These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).</p> + +<ul> + <li>{{JSxRef("ArrayBuffer")}}</li> + <li>{{JSxRef("SharedArrayBuffer")}} {{Experimental_Inline}}</li> + <li>{{JSxRef("Atomics")}} {{Experimental_Inline}}</li> + <li>{{JSxRef("DataView")}}</li> + <li>{{JSxRef("JSON")}}</li> +</ul> + +<h3 id="Control_abstraction_objects">Control abstraction objects</h3> + +<ul> + <li>{{JSxRef("Promise")}}</li> + <li>{{JSxRef("Generator")}}</li> + <li>{{JSxRef("GeneratorFunction")}}</li> + <li>{{JSxRef("AsyncFunction")}} {{Experimental_Inline}}</li> +</ul> + +<h3 id="Reflection">Reflection</h3> + +<ul> + <li>{{JSxRef("Reflect")}}</li> + <li>{{JSxRef("Proxy")}}</li> +</ul> + +<h3 id="Internationalization">Internationalization</h3> + +<p>Additions to the ECMAScript core for language-sensitive functionalities.</p> + +<ul> + <li>{{JSxRef("Intl")}}</li> + <li>{{JSxRef("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{JSxRef("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{JSxRef("Global_Objects/ListFormat", "Intl.ListFormat")}}</li> + <li>{{JSxRef("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> + <li>{{JSxRef("Global_Objects/PluralRules", "Intl.PluralRules")}}</li> + <li>{{JSxRef("Global_Objects/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li> + <li>{{JSxRef("Global_Objects/Locale", "Intl.Locale")}}</li> +</ul> + +<h3 id="WebAssembly">WebAssembly</h3> + +<ul> + <li>{{JSxRef("WebAssembly")}}</li> + <li>{{JSxRef("WebAssembly.Module")}}</li> + <li>{{JSxRef("WebAssembly.Instance")}}</li> + <li>{{JSxRef("WebAssembly.Memory")}}</li> + <li>{{JSxRef("WebAssembly.Table")}}</li> + <li>{{JSxRef("WebAssembly.CompileError")}}</li> + <li>{{JSxRef("WebAssembly.LinkError")}}</li> + <li>{{JSxRef("WebAssembly.RuntimeError")}}</li> +</ul> + +<h3 id="Other">Other</h3> + +<ul> + <li>{{JSxRef("Functions/arguments", "arguments")}}</li> +</ul> diff --git a/files/bg/web/javascript/reference/global_objects/promise/index.html b/files/bg/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..3145756561 --- /dev/null +++ b/files/bg/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,253 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Global_Objects/Promise +tags: + - JavaScript + - Promises + - Refere +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p><strong><code>Promise</code></strong> обектът представлява евентуалният завършек (или неуспех) на една асинхронна операция и нейната получена стойност.</p> + +<div class="note"> +<p><strong>Бележка:</strong> Тази статия описва <code>Promise</code> конструктора и методите и свойствата на такива обекти. За да научите начина по който работят <code>promises</code>и как може да ги използвате , съветваме ви първо да прочетете <a href="/docs/Web/JavaScript/Guide/Using_promises">Как да използваме promises. </a>Конструктора се използва предимно за обхващане на функции, които вече не поддържат <code>promises</code></p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/promise-constructor.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">new Promise(<var>executor</var>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>екзекутор (executor)</code></dt> + <dd>Функция , която се предава с аргументи <code>resolve</code> и <code>reject</code>. Екзекутор (<code>executor</code>) функцията се изпълнява незабавно след изпълнението на <code>Promise</code>, предава <code>resolve</code> и <code>reject</code> функции (Екзекутора (<code>executor</code>) се извиква преди <code>Promise</code> конструктора , дори връща създадения обект). <code>resolve</code> и <code>reject</code> функциите, когато се извикват, разрешават или отхвърлят съответния <code>promise</code>. Екзекутора (<code>executor</code>) обикновено инициира някаква асинхронна работа и след като веднъж приключи, извиква <code>resolve</code> функцията, за да разреши <code>promise</code> или дори да го отхвъли ако възникне грешка. Ако възникне грешка в екзекутора (<code>executor</code>) , <code>promise</code> се отхвърля и върнатата стойност от екзекутора (<code>executor</code>) се отхвърля.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p><code><strong>Promise</strong></code> е прокси за стойността, която не е непременно известна , когато се създава <code>promise</code>. Позволява ви да свържете манипулаторите с асинхронно действие, евентуално връщайки успешна стойност или грешка. Това позволява асинхронните методи да връщат стойност като синхронни методи: вместо да ни върне незабавно финална стойност, асинхронния метод връща <em>promise</em>, който да ни предостави стойността в някакъв бъдещ момент.</p> + +<p><code>Promise</code> се намира в едно от тези състояния:</p> + +<ul> + <li><em>pending (изчакващо)</em>: първоначално състояние, нито изпълнено или отхвърлено.</li> + <li><em>fulfilled</em> (изпълнено): означава , че операцията е завършила успешно.</li> + <li><em>rejected (отказано)</em>: означава , че операцията не е завършила успешно.</li> +</ul> + +<p>Изчакващият promise може да бъде изпълнен със стойност или отказан с описание за грешка. Когато някоя от тези опции се случи, се извикват асоциираните манипулатори, поставени на опашка, след което се извикват <code>then</code> методите. (Ако promise вече е бил изпълнен или отказан, когато е приложен съответния манипулатор , манипулатора ще бъде извикан. Така че няма никакво състезателно условие между завършването на асинхронната операция и манипулаторите които са и били приложени.)</p> + +<p>Като <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> и <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> методи връщат promises, те могат да бъдат обхванати.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15911/promises.png" style="height: 297px; width: 801px;"></p> + +<div class="note"> +<p><strong>Забележка, не трябва да се бърка с:</strong> Няколко дргуи езика имат механизъм за мързеливо (lazy) оценяване и отлагане на изчисления, които те също наричат "promises" ... схема. Promises в JavaScript представляват процеси, които вече се случват и могат да бъдат обхванати с функции за обратно извикване (callback functions). Ако търсите мързеливо да изчислите израз, разгледайте <a href="/docs/Web/JavaScript/Reference/Functions/Arrow_functions">функциите със стрелка (arrow function)</a> без аргументи: <code>f = () => <em>израз(expression)</em></code> за създаване на мързеливо-изчислителен израз и <code>f()</code> за изчисление.</p> +</div> + +<div class="note"> +<p><strong>Забележка</strong>: Казва се че Promise се счита за <em>установен</em> ако е изпълнен или отказан, но не изчакващ. Също така ще чуете и термина <em>resolved</em>, който се изпозлва с promises — това означава че promise е установен или “заключен”, изчаквайки да съответства на състоянието на друг promise. <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a> съдържа повече детайли относно promise терминологията.</p> +</div> + +<h2 id="Свойства">Свойства</h2> + +<dl> + <dt><code>Promise.length</code></dt> + <dd>Дължина на свойство, чиято дължина е винаги 1 (номер на аругмента на конструктора).</dd> + <dt>{{jsxref("Promise.prototype")}}</dt> + <dd>Представялва прототипа на <code>Promise</code> конструктора.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<dl> + <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> + <dd>Изчаква всички promises да бъдат разрешени или отказани.</dd> + <dd>Ако върнатия promise е решен(resolves), той се решава с агрегиращ масив от стойности от разрешените promises в същата последователност, както е дефиниран в многобройните promises. Ако е отхвърлен, той се отхвърля с причина от първият promise който е бил отказан.</dd> + <dt>{{jsxref("Promise.allSettled", "Promise.allSettled()")}}</dt> + <dd>Изчаква докато всички promises са приключени/уредени (всеки може да бъде разрешен или отказан).</dd> + <dd>Връща promise което се решава след всички дадени promises били те разрешени или отказани, с масив от обекти , които описват резултата от всеки promise.</dd> + <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> + <dd>Изчаква докато някой от promises е разрешен или отказан.</dd> + <dd>Ако върнатият promise е разрешен,е разрешен със стойноста от първият promise.Ако е отказан, е отакзан с причината от първият promise който е бил отказан.</dd> + <dt>{{jsxref("Promise.reject", "Promise.reject()")}}</dt> + <dd>Връща нов <code>Promise</code> обект, който е отказан с предоставена причина.</dd> + <dt>{{jsxref("Promise.resolve", "Promise.resolve()")}}</dt> + <dd>Връща нов <code>Promise</code> който е разрешен с дадената му стойност. Ако стойността е thenable (i.e. има <code>then</code> метод), върнатият promise ще "следва" този thenable, приемайки евентуалното му състояние; в противен случай върнатия promise ще бъде запълнен със стойността. Обикновенно ако не знаете дадена стойност дали е promise или не, {{jsxref("Promise.resolve", "Promise.resolve(value)")}} замества и работи с върнатата стойност като promise.</dd> +</dl> + +<h2 id="Promise_прототип">Promise прототип</h2> + +<h3 id="Свойства_2">Свойства</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}</p> + +<h3 id="Методи_2">Методи</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}</p> + +<h2 id="Създаване_на_Promise">Създаване на Promise</h2> + +<p><code>Promise</code> се създава, използвайки ключовата дума <code>new</code> и нейният конструктор. Този конструктор приема като аргумент функция, наричаща се "executor function". Тази функция трябва да приеме две функции като параметри. Първата от тези функции (<code>resolve</code>) се извиква когато асинхронната задача завърши успешно и върне резултата от задачата като стойност. Вторият (<code>reject</code>) се извиква когато задачата се провали и връща причината за този провал, който обикновенно е обект съдържайки в себе си грешката.</p> + +<pre class="brush: js">const myFirstPromise = new Promise((resolve, reject) => { + // do something asynchronous which eventually calls either: + // + // resolve(someValue); // fulfilled + // or + // reject("failure reason"); // rejected +}); +</pre> + +<p>За да предоставите функция с promise функционалност, просто върнете promise:</p> + +<pre class="brush: js">function myAsyncFunction(url) { + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open("GET", url); + xhr.onload = () => resolve(xhr.responseText); + xhr.onerror = () => reject(xhr.statusText); + xhr.send(); + }); +}</pre> + +<h2 id="Примери">Примери</h2> + +<h3 id="Основни_примери">Основни примери</h3> + +<pre class="brush: js">let myFirstPromise = new Promise((resolve, reject) => { + // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed. + // In this example, we use setTimeout(...) to simulate async code. + // In reality, you will probably be using something like XHR or an HTML5 API. + setTimeout(function(){ + resolve("Success!"); // Yay! Everything went well! + }, 250); +}); + +myFirstPromise.then((successMessage) => { + // successMessage is whatever we passed in the resolve(...) function above. + // It doesn't have to be a string, but if it is only a succeed message, it probably will be. + console.log("Yay! " + successMessage); +}); +</pre> + +<h3 id="Разширени_примери">Разширени примери</h3> + +<pre class="brush: html hidden"><button id="btn">Make a promise!</button> +<div id="log"></div> +</pre> + +<p>Този малък пример показва механизма на <code>Promise</code>. <code>testPromise()</code> метод се извиква всеки път когато {{HTMLElement("button")}} е натиснат. Създава promise който ще бъде изпълнен, използвайки {{domxref("window.setTimeout()")}}, към promise броенето(номер започващ от 1) на всеки 1-3 секунди на случаен принцип. The <code>Promise()</code> се използва за създаването на promise.</p> + +<p>Изпълнението на promise е просто записано, чрез сет за обратно извикване (callback set) , използвайки {{jsxref("Promise.prototype.then()","p1.then()")}}. <span lang="bg">Няколко logs (данни) показват как синхронната част на метода е отделена от асинхронното завършване на обещанието.</span></p> + +<pre class="brush: js">'use strict'; +var promiseCount = 0; + +function testPromise() { + let thisPromiseCount = ++promiseCount; + + let log = document.getElementById('log'); + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Started (<small>Sync code started</small>)<br/>'); + + // We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s) + let p1 = new Promise( + // The executor function is called with the ability to resolve or + // reject the promise + (resolve, reject) => { + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise started (<small>Async code started</small>)<br/>'); + // This is only an example to create asynchronism + window.setTimeout( + function() { + // We fulfill the promise ! + resolve(thisPromiseCount); + }, Math.random() * 2000 + 1000); + } + ); + + // We define what to do when the promise is resolved with the then() call, + // and what to do when the promise is rejected with the catch() call + p1.then( + // Log the fulfillment value + function(val) { + log.insertAdjacentHTML('beforeend', val + + ') Promise fulfilled (<small>Async code terminated</small>)<br/>'); + }).catch( + // Log the rejection reason + (reason) => { + console.log('Handle rejected promise ('+reason+') here.'); + }); + + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise made (<small>Sync code terminated</small>)<br/>'); +}</pre> + +<pre class="brush:js hidden">if ("Promise" in window) { + let btn = document.getElementById("btn"); + btn.addEventListener("click",testPromise); +} else { + log = document.getElementById('log'); + log.innerHTML = "Live example not available as your browser doesn't support the <code>Promise<code> interface."; +} +</pre> + +<p>Този пример ще се стартира като кликнете на бутона. Имате нужда от браузер който поддържа <code>Promise</code>. Натискайки на бутона няколко пъти в кратки периоди от време , ще видите дори разллични promises , които се изпълняват един след друг.</p> + +<p>{{EmbedLiveSample("Advanced_Example", "500", "200")}}</p> + +<h2 id="Зареждане_на_снимка_с_XHR">Зареждане на снимка с XHR</h2> + +<p>Друг опростен пример използва <code>Promise</code> и {{domxref("XMLHttpRequest")}} за зареждане на снимки е наличен в GitHub профила на MDN и се казва <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a>. Тук също може да го видите и в действие <a href="https://mdn.github.io/js-examples/promises-test/">see it in action</a>. Всяка стъпка е коментирана и ви позволява да следвате Promise и XHR архитектурата внимателно.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузърите">Съвместимост с браузърите</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li> + <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> + <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li> + <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li> + <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li> + <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li> + <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li> + <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li> + <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li> + <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/index.html b/files/bg/web/javascript/reference/index.html new file mode 100644 index 0000000000..fedbcb5e2d --- /dev/null +++ b/files/bg/web/javascript/reference/index.html @@ -0,0 +1,51 @@ +--- +title: Справочник за JavaScript +slug: Web/JavaScript/Reference +tags: + - JavaScript + - NeedsTranslation + - TopicStub + - 'l10n:priority' +translation_of: Web/JavaScript/Reference +--- +<div>{{JsSidebar}}</div> + +<p>Тази част от раздела JavaScript в MDN служи като хранилище за сведения за езика за програмиране JavaScript. Прочетете <a href="/bg/docs/Web/JavaScript/Reference/About">повече за този справочник</a>.</p> + +<h2 id="Глобални_обекти">Глобални обекти</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard_objects_by_category')}}</div> + +<h2 id="Statements">Statements</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 id="Изрази_и_оператори">Изрази и оператори</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 id="Functions">Functions</h2> + +<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript functions</a> to develop your applications.</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li> +</ul> + +<h2 id="Additional_reference_pages">Additional reference pages</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/operators/arithmetic_operators/index.html b/files/bg/web/javascript/reference/operators/arithmetic_operators/index.html new file mode 100644 index 0000000000..83f26e031d --- /dev/null +++ b/files/bg/web/javascript/reference/operators/arithmetic_operators/index.html @@ -0,0 +1,293 @@ +--- +title: Arithmetic operators +slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Аритметичните оператори </strong>приемат числови стойности като техен операнд и връща единична числова стойност. Стандартните аритметични оператори са събиране (<strong>+</strong>), изваждане (<strong>-</strong>), умножение (<strong>*</strong>), делене(<strong>/</strong>)</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Addition" name="Addition">Събиране (+)</h2> + +<p>Операторът за събиране произвежда сумата от числови операнди или конкатенация на стрингове.</p> + +<h3 id="Синтаксис">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var> + <var>y</var> +</pre> + +<h3 id="Примери">Примери</h3> + +<pre class="brush: js">// Number + Number -> събиране +1 + 2 // 3 + +// Boolean + Number -> събиране +true + 1 // 2 + +// Boolean + Boolean -> събиране +false + false // 0 + +// Number + String -> конкатенация +5 + 'foo' // "5foo" + +// String + Boolean -> конкатенация +'foo' + false // "foofalse" + +// String + String -> конкатенация +'foo' + 'bar' // "foobar" +</pre> + +<h2 id="Subtraction" name="Subtraction">Subtraction (-)</h2> + +<p>The subtraction operator subtracts the two operands, producing their difference.</p> + +<h3 id="Syntax">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var> - <var>y</var> +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">5 - 3 // 2 +3 - 5 // -2 +'foo' - 3 // NaN</pre> + +<h2 id="Division" name="Division">Division (/)</h2> + +<p>The division operator produces the quotient of its operands where the left operand is the dividend and the right operand is the divisor.</p> + +<h3 id="Syntax_2">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var> / <var>y</var> +</pre> + +<h3 id="Examples_2">Examples</h3> + +<pre class="brush: js">1 / 2 // returns 0.5 in JavaScript (In Java, returns 0; both are integers) +// (neither 1 nor 2 is explicitly a floating point number) + +Math.floor(3 / 2) // returns 1 +1.0 / 2.0 // returns 0.5 in both JavaScript and Java + +2.0 / 0 // returns Infinity +2.0 / 0.0 // ditto, because 0.0 === 0 +2.0 / -0.0 // returns -Infinity</pre> + +<h2 id="Multiplication" name="Multiplication">Multiplication (*)</h2> + +<p>The multiplication operator produces the product of the operands.</p> + +<h3 id="Syntax_3">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var> * <var>y</var> +</pre> + +<h3 id="Examples_3">Examples</h3> + +<pre class="brush: js"> 2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +'foo' * 2 // NaN +</pre> + +<h2 id="Remainder" name="Remainder">Remainder (%)</h2> + +<p>The remainder operator returns the remainder left over when one operand is divided by a second operand. It always takes the sign of the dividend.</p> + +<h3 id="Syntax_4">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>var1</var> % <var>var2</var> +</pre> + +<h3 id="Examples_4">Examples</h3> + +<pre class="brush: js"> 12 % 5 // 2 +-12 % 5 // -2 +-1 % 2 // -1 + 1 % -2 // 1 +NaN % 2 // NaN + 1 % 2 // 1 + 2 % 3 // 2 +-4 % 2 // -0 +5.5 % 2 // 1.5 +</pre> + +<h2 id="Exponentiation" name="Exponentiation">Exponentiation (**)</h2> + +<p>The exponentiation operator returns the result of raising the first operand to the power of the second operand. That is, <code><var>var1</var></code><sup><code><var>var2</var></code></sup>, in the preceding statement, where <code><var>var1</var></code> and <code><var>var2</var></code> are variables. The exponentiation operator is right-associative. <code><var>a</var> ** <var>b</var> ** <var>c</var></code> is equal to <code><var>a</var> ** (<var>b</var> ** <var>c</var>)</code>.</p> + +<h3 id="Syntax_5">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>var1</var> ** <var>var2</var> +</pre> + +<h3 id="Notes">Notes</h3> + +<p>In most languages, such as PHP, Python, and others that have an exponentiation operator (<code>**</code>), the exponentiation operator is defined to have a higher precedence than unary operators, such as unary <code>+</code> and unary <code>-</code>, but there are a few exceptions. For example, in Bash, the <code>**</code> operator is defined to have a lower precedence than unary operators.</p> + +<p>In JavaScript, it is impossible to write an ambiguous exponentiation expression; that is, you cannot put a unary operator (<code>+/-/~/!/delete/void/typeof</code>) immediately before the base number.</p> + +<pre class="brush: js">-2 ** 2; +// 4 in Bash, -4 in other languages. +// This is invalid in JavaScript, as the operation is ambiguous. + + +-(2 ** 2); +// -4 in JavaScript and the author's intention is unambiguous. +</pre> + +<h3 id="Examples_5">Examples</h3> + +<pre class="brush: js">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 +</pre> + +<p>To invert the sign of the result of an exponentiation expression:</p> + +<pre class="brush: js">-(2 ** 2) // -4 +</pre> + +<p>To force the base of an exponentiation expression to be a negative number:</p> + +<pre class="brush: js">(-2) ** 2 // 4 +</pre> + +<div class="note"> +<p><strong>Note:</strong> JavaScript also has <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">a bitwise operator ^ (logical XOR)</a>. <code>**</code> and <code>^</code> are different (for example : <code>2 ** 3 === 8</code> when <code>2 ^ 3 === 1</code>.)</p> +</div> + +<h2 id="Increment" name="Increment">Increment (++)</h2> + +<p>The increment operator increments (adds one to) its operand and returns a value.</p> + +<ul> + <li>If used postfix, with operator after operand (for example, <code><var>x</var>++</code>), then it increments and returns the value before incrementing.</li> + <li>If used prefix, with operator before operand (for example, <code>++<var>x</var></code>), then it increments and returns the value after incrementing.</li> +</ul> + +<h3 id="Syntax_6">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var>++ or ++<var>x</var> +</pre> + +<h3 id="Examples_6">Examples</h3> + +<pre class="brush: js">// Postfix +var x = 3; +y = x++; // y = 3, x = 4 + +// Prefix +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="Decrement" name="Decrement">Decrement (--)</h2> + +<p>The decrement operator decrements (subtracts one from) its operand and returns a value.</p> + +<ul> + <li>If used postfix, with operator after operand (for example, <code><var>x</var>--</code>), then it decrements and returns the value before decrementing.</li> + <li>If used prefix, with operator before operand (for example, <code>--<var>x</var></code>), then it decrements and returns the value after decrementing.</li> +</ul> + +<h3 id="Syntax_7">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var>-- or --<var>x</var> +</pre> + +<h3 id="Examples_7">Examples</h3> + +<pre class="brush: js">// Postfix +var x = 3; +y = x--; // y = 3, x = 2 + +// Prefix +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="Unary_negation" name="Unary_negation">Unary negation (-)</h2> + +<p>The unary negation operator precedes its operand and negates it.</p> + +<h3 id="Syntax_8">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> -<var>x</var> +</pre> + +<h3 id="Examples_8">Examples</h3> + +<pre class="brush: js">var x = 3; +y = -x; // y = -3, x = 3 + +// Unary negation operator can convert non-numbers into a number +var x = "4"; +y = -x; // y = -4 +</pre> + +<h2 id="Unary_plus" name="Unary_plus">Unary plus (+)</h2> + +<p>The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already. Although unary negation (<code>-</code>) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. It can convert string representations of integers and floats, as well as the non-string values <code>true</code>, <code>false</code>, and <code>null</code>. Integers in both decimal and hexadecimal (<code>0x</code>-prefixed) formats are supported. Negative numbers are supported (though not for hex). If it cannot parse a particular value, it will evaluate to {{jsxref("NaN")}}.</p> + +<h3 id="Syntax_9">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> +<var>x</var> +</pre> + +<h3 id="Examples_9">Examples</h3> + +<pre class="brush: js">+3 // 3 ++'3' // 3 ++true // 1 ++false // 0 ++null // 0 ++function(val){ return val } // NaN +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-additive-operators', 'Additive operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-postfix-expressions', 'Postfix expressions')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-11.5', 'Multiplicative operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-11.4', 'Unary operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.arithmetic")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/operators/index.html b/files/bg/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..64ff89da64 --- /dev/null +++ b/files/bg/web/javascript/reference/operators/index.html @@ -0,0 +1,310 @@ +--- +title: Expressions and operators +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - NeedsTranslation + - Operators + - Overview + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p class="summary">This chapter documents all the JavaScript language operators, expressions and keywords.</p> + +<h2 id="Expressions_and_operators_by_category">Expressions and operators by category</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Primary_expressions">Primary expressions</h3> + +<p>Basic keywords and general expressions in JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>The <code>this</code> keyword refers to a special property of an execution context.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>The <code>function</code> keyword defines a function expression.</dd> + <dt>{{jsxref("Operators/class", "class")}}</dt> + <dd>The <code>class</code> keyword defines a class expression.</dd> + <dt>{{jsxref("Operators/function*", "function*")}}</dt> + <dd>The <code>function*</code> keyword defines a generator function expression.</dd> + <dt>{{jsxref("Operators/yield", "yield")}}</dt> + <dd>Pause and resume a generator function.</dd> + <dt>{{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Delegate to another generator function or iterable object.</dd> + <dt>{{jsxref("Operators/async_function", "async function")}}</dt> + <dd>The <code>async function</code> defines an async function expression.</dd> + <dt>{{jsxref("Operators/await", "await")}}</dt> + <dd>Pause and resume an async function and wait for the promise's resolution/rejection.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Array initializer/literal syntax.</dd> + <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> + <dd>Object initializer/literal syntax.</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Regular expression literal syntax.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Grouping operator.</dd> +</dl> + +<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3> + +<p>Left values are the destination of an assignment.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Member operators provide access to a property or method of an object<br> + (<code>object.property</code> and <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>The <code>new</code> operator creates an instance of a constructor.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt> + <dd>In constructors, <code>new.target</code> refers to the constructor that was invoked by {{jsxref("Operators/new", "new")}}.</dd> + <dt>{{jsxref("Operators/super", "super")}}</dt> + <dd>The <code>super</code> keyword calls the parent constructor.</dd> + <dt>{{jsxref("Operators/Spread_syntax", "...obj")}}</dt> + <dd>Spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd> +</dl> + +<h3 id="Increment_and_decrement">Increment and decrement</h3> + +<p>Postfix/prefix increment and postfix/prefix decrement operators.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Postfix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Postfix decrement operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Prefix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Prefix decrement operator.</dd> +</dl> + +<h3 id="Unary_operators">Unary operators</h3> + +<p>A unary operation is operation with only one operand.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>The <code>delete</code> operator deletes a property from an object.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>The <code>void</code> operator discards an expression's return value.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>The <code>typeof</code> operator determines the type of a given object.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>The unary plus operator converts its operand to Number type.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>The unary negation operator converts its operand to Number type and then negates it.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logical NOT operator.</dd> +</dl> + +<h3 id="Arithmetic_operators">Arithmetic operators</h3> + +<p>Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Addition operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Subtraction operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Division operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Multiplication operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Remainder operator.</dd> +</dl> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt> + <dd>Exponentiation operator.</dd> +</dl> + +<h3 id="Relational_operators">Relational operators</h3> + +<p>A comparison operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>The <code>in</code> operator determines whether an object has a given property.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>The <code>instanceof</code> operator determines whether an object is an instance of another object.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Less than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Greater than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Less than or equal operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Greater than or equal operator.</dd> +</dl> + +<div class="note"> +<p><strong>Note: =></strong> is not an operator, but the notation for <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>.</p> +</div> + +<h3 id="Equality_operators">Equality operators</h3> + +<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Equality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Inequality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identity operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidentity operator.</dd> +</dl> + +<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> + +<p>Operations to shift all bits of the operand.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwise left shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwise right shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwise unsigned right shift operator.</dd> +</dl> + +<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3> + +<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Binary_logical_operators">Binary logical operators</h3> + +<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logical AND.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logical OR.</dd> +</dl> + +<h3 id="Conditional_ternary_operator">Conditional (ternary) operator</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>The conditional operator returns one of two values based on the logical value of the condition.</p> + </dd> +</dl> + +<h3 id="Assignment_operators">Assignment operators</h3> + +<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Assignment operator.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplication assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Division assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Remainder assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Addition assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraction assignment</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Left shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Unsigned right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwise AND assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwise XOR assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwise OR assignment.</dd> + <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p> + </dd> +</dl> + +<h3 id="Comma_operator">Comma operator</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</dd> +</dl> + +<h3 id="Non-standard_features" name="Non-standard_features">Non-standard features {{non-standard_inline}}</h3> + +<dl> + <dt>{{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}} {{non-standard_inline}}{{obsolete_inline(60)}}</dt> + <dd>The expression closure syntax is a shorthand for writing simple function.</dd> + <dt>{{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}} {{non-standard_inline}}{{obsolete_inline(58)}}</dt> + <dd>The <code>function</code> keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contains at least one {{jsxref("Operators/yield", "yield")}} expression.</dd> + <dt>{{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}} {{non-standard_inline}}{{obsolete_inline(58)}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}} {{non-standard_inline}}{{obsolete_inline(58)}}</dt> + <dd>Generator comprehensions.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread syntax, rest syntax, destructuring assignment, <code>super</code> keyword.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/operators/разпределящ_синтаксис/index.html b/files/bg/web/javascript/reference/operators/разпределящ_синтаксис/index.html new file mode 100644 index 0000000000..e8a9b0dfe1 --- /dev/null +++ b/files/bg/web/javascript/reference/operators/разпределящ_синтаксис/index.html @@ -0,0 +1,248 @@ +--- +title: Разпределящ синтаксис +slug: Web/JavaScript/Reference/Operators/разпределящ_синтаксис +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Разпределящият синтаксис </strong>позволява на итериращ се израз като масив или символен низ да бъде разширен на места, където се използват нула или повече аргументи (или извиквания на функции), елементи (дефиниция на масиви), както и обект да бъде разширен на места, където се очакват нула или повече двойки от тип ключ-стойност (дефиниция на обекти).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> + +<p class="hidden">Кода на този интерактивен пример се пази в GitHub хранилище. Ако искате да допринесете към интерактивния примерен проект, моля клонирайте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и ни изпратете pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>За извиквания на функции:</p> + +<pre class="syntaxbox">myFunction(...iterableObj); +</pre> + +<p>За стойности на масиви или символни низове:</p> + +<pre class="syntaxbox">[...iterableObj, '4', 'five', 6];</pre> + +<p>За стойности на обекти (ново от ECMAScript 2018):</p> + +<pre class="syntaxbox">let objClone = { ...obj };</pre> + +<h2 id="Примери">Примери</h2> + +<h3 id="Разпределящ_синтаксис_при_извикване_на_функции">Разпределящ синтаксис при извикване на функции</h3> + +<p><code style="">Замяна на apply()</code></p> + +<p>Често се използва {{jsxref("Function.prototype.apply()")}} в случаите, когато искаме да използваме елементите на даден масив като аргументи на функция. </p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction.apply(null, args);</pre> + +<p>С разпределящия синтаксис можем да запишем горния израз по следния начин: </p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction(...args);</pre> + +<p>Всеки аргумент в списъка от аргументи може да използва разпределящия синтаксис и той може да бъде използван няколко пъти.</p> + +<pre class="brush: js">function myFunction(v, w, x, y, z) { } +var args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h4 id="Използване_на_аpply_вместо_new_за_конструиране_на_обект">Използване на <code>аpply</code> вместо <code>new</code> за конструиране на обект</h4> + +<p>Когато извикваме конструктор с {{jsxref("Operators/new", "new")}} не е възможно директно да бъде използван масив и функцията apply(apply прави <code>[[Извикване]],</code> а не <code>[[Конструиране]]</code>). С помощта на разпределящия синтаксис обаче масивът може да бъде използван лесно за конструиране на обект:</p> + +<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Jan 1970 +var d = new Date(...dateFields); +</pre> + +<p>За да използваме <code>new</code> с масив от параметри без разпределящ синтаксис, трябва да го направим косвено чрез прилагане на части:</p> + +<pre class="brush: js">function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + + +function myConstructor () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +var myArguments = ["hi", "how", "are", "you", "mr", null]; +var myConstructorWithArguments = applyAndNew(myConstructor, myArguments); + +console.log(new myConstructorWithArguments); +// (вътрешна бележка за myConstructor): arguments.length: 6 +// (вътрешна бележка myConstructor): ["hi", "how", "are", "you", "mr", null] +// (бележка на "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre> + +<h3 id="Разпределящ_синтаксис_при_стойности_на_масиви">Разпределящ синтаксис при стойности на масиви</h3> + +<h4 id="По-мощен_запис_при_създаване_на_масив">По-мощен запис при създаване на масив</h4> + +<p>Без разпределящ синтаксис създаването на нов масив с помощта на вече съществуващ като част от него, синтаксисът за създаване на масив вече не върши работа. Трябва да пишем повече, например да използваме някой от следните методи: {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}} и т.н. Използвайки разпределящия синтаксис записът става много по-кратък:</p> + +<pre class="brush: js">var parts = ['shoulders', 'knees']; +var lyrics = ['head', ...parts, 'and', 'toes']; +// ["head", "shoulders", "knees", "and", "toes"] +</pre> + +<p>Както се използва разпределящ синтаксис за списък от аргументи, <code>...</code> може да бъде използван и при създаване на масив, и то многократно.</p> + +<h4 id="Копиране_на_масив">Копиране на масив</h4> + +<pre class="brush: js">var arr = [1, 2, 3]; +var arr2 = [...arr]; // като arr.slice() +arr2.push(4); + +// arr2 става [1, 2, 3, 4] +// arr остава неафектиран +</pre> + +<div class="blockIndicator note"> +<p><strong>Забележка</strong>: Разпределящият синтаксис ефективно минава едно ниво по-дълбоко докато копира масив. Затова може да не е подходящ за копиране на многомерни масиви както показва следния пример(същото е с {{jsxref("Object.assign()")}} и разпределящ синтаксис).</p> +</div> + +<pre class="brush: js">var a = [[1], [2], [3]]; +var b = [...a]; +b.shift().shift(); // 1 +// Сега масивът a също е афектиран: [[], [2], [3]] +</pre> + +<h4 id="По-добър_начин_за_конкатениране_на_масиви">По-добър начин за конкатениране на масиви</h4> + +<p>{{jsxref("Array.prototype.concat()")}} често е използван за конкатениране на масив към края на вече съществуващ масив. Без използване на разпределящ синтаксис това може да бъде направено по следния начин:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Добавя всички елементи от arr2 след тези на arr1 +arr1 = arr1.concat(arr2);</pre> + +<p>С разпределящ синтаксис това има вида: </p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr1, ...arr2]; // arr1 сега е [0, 1, 2, 3, 4, 5] +</pre> + +<p>{{jsxref("Array.prototype.unshift()")}} често се използва за добавяне на масив със стойности в началото на вече съществуващ масив. Без разпределящ синтаксис това може да бъде направено по следния начин: </p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Добавя всички елементи от arr2 преди тези на arr1 +Array.prototype.unshift.apply(arr1, arr2) // arr1 сега е [3, 4, 5, 0, 1, 2]</pre> + +<p>С разпределящ синтаксис става по следния начин: </p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr2, ...arr1]; // arr1 сега е [3, 4, 5, 0, 1, 2] +</pre> + +<div class="blockIndicator note"> +<p><strong>Забележка: </strong>За разлика от <code>unshift()</code>, това създава нов <code>arr1</code>, а не модифицира оригиналния масив <code>arr1</code>. </p> +</div> + +<h3 id="Разпределящ_синтаксис_при_дефиниця_на_обекти">Разпределящ синтаксис при дефиниця на обекти</h3> + +<p>Предложението за <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> (етап 4) добавя разпределящи свойства към дефиницията на обекти. То копира собствени изброими свойства от даден обект към нов обект.</p> + +<p>Повърхностното клониране(изключващо prototype) или смесването на обекти вече е възможно с помощта на по-кратък синтаксис от {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; + +var clonedObj = { ...obj1 }; +// Обект { foo: "bar", x: 42 } + +var mergedObj = { ...obj1, ...obj2 }; +// Обект { foo: "baz", x: 42, y: 13 }</pre> + +<p>Обърнете внимание, че {{jsxref("Object.assign()")}} извиква <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a> за разлика от разпределящия синтаксис.</p> + +<p>Забележете, че функцията {{jsxref("Object.assign()")}} не може нито да бъде подменена, нито да се напише подобна:</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; +const merge = ( ...objects ) => ( { ...objects } ); + +var mergedObj = merge ( obj1, obj2); +// Обект { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } + +var mergedObj = merge ( {}, obj1, obj2); +// Обект { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre> + +<p>В горния пример разпределящият синтаксис не работи както се очаква: той разпределя масив от аргументи в дефиницията на обекта според зададените параметри. </p> + +<h3 id="Само_за_итериращи_променливи">Само за итериращи променливи</h3> + +<p>Разпределящият синтаксис (както и разпределящите свойства) може да бъде приложен само върху обекти, които могат да бъдат итерирани:</p> + +<pre class="brush: js">var obj = {'key1': 'value1'}; +var array = [...obj]; // TypeError: obj не може да се итерира +</pre> + +<h3 id="Разпределящ_синтаксис_с_много_стойности">Разпределящ синтаксис с много стойности </h3> + +<p>Когато използваме разпределящ синтаксис за извикване на функции трябва да бъдем запознати с възможността за надвишаване на лимита на брой на аргументи на функция в Javascript. За повече информация вижте {{jsxref("Function.prototype.apply", "apply()")}}.</p> + +<h2 id="Обединяващ_синтаксис_параметри">Обединяващ синтаксис (параметри) </h2> + +<p>Обединяващият синтаксис изглежда точно както разпределящия синтаксис, но е използван за разлагане на масиви и обекти. Иначе казано, обединяващият синтаксис е точно обратното на разпределящия синтаксис: докато разпределящият синтаксис разширява масива си със стойности, обединяващият синтаксис събира няколко елемента и ги събира в един елемент. За повече информация вижте <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">rest parameters.</a></p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Дефинирана в няколко секции на спецификацията: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td> + <td>{{Spec2('ES2018')}}</td> + <td>Дефинирана в <a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">Object Initializer</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Няма промени.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Няма промени.</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузъри">Съвместимост с браузъри</h2> + + + +<p>{{Compat("javascript.operators.spread")}}</p> + +<h2 id="Вижте_още">Вижте още</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest parameters</a> (също ‘<code>...</code>’)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">fn.apply</a> (също ‘<code>...</code>’)</li> +</ul> diff --git a/files/bg/web/svg/element/index.html b/files/bg/web/svg/element/index.html new file mode 100644 index 0000000000..8bcecbb0ef --- /dev/null +++ b/files/bg/web/svg/element/index.html @@ -0,0 +1,274 @@ +--- +title: SVG element reference +slug: Web/SVG/Element +tags: + - Drawing + - Elements + - NeedsTranslation + - Responsive Design + - SVG + - SVG Reference + - TopicStub + - Vector Graphics + - 'l10n:priority' +translation_of: Web/SVG/Element +--- +<p>« <a href="/en-US/docs/SVG">SVG</a> / <a href="/en-US/docs/SVG/Attribute">SVG Attribute reference</a> »</p> + +<p><span class="seoSummary">SVG drawings and images are created using a wide array of elements which are dedicated to the construction, drawing, and layout of vector images and diagrams. Here you'll find reference documentation for each of the SVG elements.</span></p> + +<h2 id="SVG_elements_A_to_Z">SVG elements A to Z</h2> + +<div class="index"> +<h3 id="A">A</h3> + +<ul> + <li>{{SVGElement("a")}}</li> + <li>{{SVGElement("altGlyph")}}</li> + <li>{{SVGElement("altGlyphDef")}}</li> + <li>{{SVGElement("altGlyphItem")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("animateColor")}}</li> + <li>{{SVGElement("animateMotion")}}</li> + <li>{{SVGElement("animateTransform")}}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{SVGElement("circle")}}</li> + <li>{{SVGElement("clipPath")}}</li> + <li>{{SVGElement("color-profile")}}</li> + <li>{{SVGElement("cursor")}}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("desc")}}</li> + <li>{{SVGElement("discard")}}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{SVGElement("ellipse")}}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{SVGElement("feBlend")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feComponentTransfer")}}</li> + <li>{{SVGElement("feComposite")}}</li> + <li>{{SVGElement("feConvolveMatrix")}}</li> + <li>{{SVGElement("feDiffuseLighting")}}</li> + <li>{{SVGElement("feDisplacementMap")}}</li> + <li>{{SVGElement("feDistantLight")}}</li> + <li>{{SVGElement("feDropShadow")}}</li> + <li>{{SVGElement("feFlood")}}</li> + <li>{{SVGElement("feFuncA")}}</li> + <li>{{SVGElement("feFuncB")}}</li> + <li>{{SVGElement("feFuncG")}}</li> + <li>{{SVGElement("feFuncR")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feImage")}}</li> + <li>{{SVGElement("feMerge")}}</li> + <li>{{SVGElement("feMergeNode")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("fePointLight")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feSpotLight")}}</li> + <li>{{SVGElement("feTile")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("font")}}</li> + <li>{{SVGElement("font-face")}}</li> + <li>{{SVGElement("font-face-format")}}</li> + <li>{{SVGElement("font-face-name")}}</li> + <li>{{SVGElement("font-face-src")}}</li> + <li>{{SVGElement("font-face-uri")}}</li> + <li>{{SVGElement("foreignObject")}}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{SVGElement("g")}}</li> + <li>{{SVGElement("glyph")}}</li> + <li>{{SVGElement("glyphRef")}}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{SVGElement("hatch")}}</li> + <li>{{SVGElement("hatchpath")}}</li> + <li>{{SVGElement("hkern")}}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{SVGElement("image")}}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{SVGElement("line")}}</li> + <li>{{SVGElement("linearGradient")}}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGElement("mask")}}</li> + <li>{{SVGElement("mesh")}}</li> + <li>{{SVGElement("meshgradient")}}</li> + <li>{{SVGElement("meshpatch")}}</li> + <li>{{SVGElement("meshrow")}}</li> + <li>{{SVGElement("metadata")}}</li> + <li>{{SVGElement("missing-glyph")}}</li> + <li>{{SVGElement("mpath")}}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{SVGElement("path")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("polyline")}}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("rect")}}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("solidcolor")}}</li> + <li>{{SVGElement("stop")}}</li> + <li>{{SVGElement("style")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("switch")}}</li> + <li>{{SVGElement("symbol")}}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("textPath")}}</li> + <li>{{SVGElement("title")}}</li> + <li>{{SVGElement("tref")}}</li> + <li>{{SVGElement("tspan")}}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{SVGElement("unknown")}}</li> + <li>{{SVGElement("use")}}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{SVGElement("view")}}</li> + <li>{{SVGElement("vkern")}}</li> +</ul> +</div> + +<h2 id="SVG_elements_by_category">SVG elements by category</h2> + +<h3 id="Animation_elements">Animation elements</h3> + +<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p> + +<h3 id="Basic_shapes">Basic shapes</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Container_elements">Container elements</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p> + +<h3 id="Descriptive_elements">Descriptive elements</h3> + +<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> + +<h3 id="Filter_primitive_elements">Filter primitive elements</h3> + +<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p> + +<h3 id="Font_elements">Font elements</h3> + +<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p> + +<h3 id="Gradient_elements">Gradient elements</h3> + +<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> + +<h3 id="Graphics_elements">Graphics elements</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p> + +<h3 id="Graphics_referencing_elements">Graphics referencing elements</h3> + +<p>{{SVGElement("mesh")}}, {{SVGElement("use")}}</p> + +<h3 id="Light_source_elements">Light source elements</h3> + +<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p> + +<h3 id="Never-rendered_elements">Never-rendered elements</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}</p> + +<h3 id="Paint_server_elements">Paint server elements</h3> + +<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</p> + +<h3 id="Renderable_elements">Renderable elements</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}</p> + +<h3 id="Shape_elements">Shape elements</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Structural_elements">Structural elements</h3> + +<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> + +<h3 id="Text_content_elements">Text content elements</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Text_content_child_elements">Text content child elements</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Uncategorized_elements">Uncategorized elements</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute">SVG attribute reference</a></li> + <li><a href="/en-US/docs/Web/SVG/Tutorial">SVG Tutorial</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model#SVG_interfaces">SVG interface reference</a></li> +</ul> diff --git a/files/bg/web/svg/element/svg/index.html b/files/bg/web/svg/element/svg/index.html new file mode 100644 index 0000000000..8d14d97acf --- /dev/null +++ b/files/bg/web/svg/element/svg/index.html @@ -0,0 +1,122 @@ +--- +title: <svg> +slug: Web/SVG/Element/svg +tags: + - SVG контейнер + - Елемент +translation_of: Web/SVG/Element/svg +--- +<div>{{SVGRef}}</div> + +<p>Елементът <code>svg</code> е контейнер, който задава нова координатна система и <a href="/en-US/docs/Web/SVG/Attribute/viewBox">viewport</a>. Използва се като най-външен елемент за всеки един SVG документ. Също така може да бъде използван за влагане на отделен фрагмен от SVG (Мащабируема векторна графика) в SVG или HTML документ.</p> + +<div class="note"> +<p><strong>Бележка:</strong> Атрибутът <code>xmlns</code> се изисква само на най-външния <code>svg</code> елемент от <em>SVG документите</em>.</p> +</div> + +<div id="Exeemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> + <circle cx="50" cy="50" r="40" stroke="red" fill="grey" /> + <circle cx="150" cy="50" r="4" stroke="red" fill="grey" /> + + <svg viewBox="0 0 10 10" x="200" width="100"> + <circle cx="5" cy="5" r="4" stroke="red" fill="grey" /> + </svg> +</svg></pre> + +<p>{{EmbedLiveSample('Exeemple', 150, '100%')}}</p> +</div> + +<h2 id="Атрибути">Атрибути</h2> + +<dl> + <dt>{{SVGAttr("baseProfile")}} {{deprecated_inline('svg2')}}</dt> + <dd>Този атрибут задава минималният SVG езиков профил, необходим от документа.<br> + <small><em>Тип на стойността</em>: <strong><string></strong> ; <em>Стойност по подразбиране</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("contentScriptType")}} {{deprecated_inline('svg2')}}</dt> + <dd>Този атрибут определя скриптовият език, който по подразбиране се използва от този SVG фрагмент.<br> + <small><em>Тип на стойността</em>: <strong><string></strong> ; <em>Стойност по подразбиране</em>: <code>application/ecmascript</code>; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("contentStyleType")}} {{deprecated_inline('svg2')}}</dt> + <dd>Този атрибут задава езикът, който по подразбиране се използва за стилизиране на SVG фрагмента.<br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <code>text/css</code>; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("height")}}</dt> + <dd>Атрибутът определя височината на фигурата <em>rect</em> (от правоъгълник).<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("preserveAspectRatio")}}</dt> + <dd>Този атрибут задава как графичният фрагмент трябва да бъде деформиран, ако е вложен в контейнер с различно съотношение.<br> + <small><em>Value type</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Default value</em>: <code>xMidYMid meet</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("version")}} {{deprecated_inline('svg2')}}</dt> + <dd>Атрибутът показва коя версия на SVG се използва за вътрешното съдържание на елемента.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("viewBox")}}</dt> + <dd>Атрибутът определя границата на SVG viewport за настоящия SVG фрагмент.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("width")}}</dt> + <dd>Атрибутът определя широчината на фигурата <em>rect</em> (от правоъгълник).<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("x")}}</dt> + <dd>Атрибутът определя стойността на <em>х</em> координатата на svg контейнера. Няма ефект върху най-външния <code>svg</code> елемент.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("y")}}</dt> + <dd>Този атрибут определя стойността на <em>y</em> координатата на svg контейнера. Няма ефект върху най-външния <code>svg</code> елемент.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<div class="note"> +<p><strong>Бележка:</strong> След SVG2 <code>x</code>, <code>y</code>, <code>width</code> и <code>height</code> са <em>Geometry Propertie</em>s (<em>Геометрични Свойства)</em>, което означава, че тези атрибути могат да бъдат използвани и като CSS свойства за този елемент.</p> +</div> + +<h3 id="Глобални_атрибути">Глобални атрибути</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Основни атрибути</a></dt> + <dd><small>Най-съществените: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Атрибути за стилизиране</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Атрибути за обработване на условията</a></dt> + <dd><small>Най-съществени: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Атрибути за събития (еvent)</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">Document event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Атрибути за представяне</a></dt> + <dd><small>Най-съществени: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>Aria атрибути</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Бележки_за_използване">Бележки за използване</h2> + +<p>{{svginfo}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статут</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузъри">Съвместимост с браузъри</h2> + + + +<p>{{Compat("svg.elements.svg")}}</p> diff --git a/files/bg/web/svg/index.html b/files/bg/web/svg/index.html new file mode 100644 index 0000000000..600733626f --- /dev/null +++ b/files/bg/web/svg/index.html @@ -0,0 +1,102 @@ +--- +title: 'SVG: Scalable Vector Graphics' +slug: Web/SVG +tags: + - 2D Graphics + - Graphics + - Icons + - Images + - NeedsTranslation + - Reference + - Responsive Design + - SVG + - Scalable Graphics + - Scalable Images + - TopicStub + - Vector Graphics + - Web + - 'l10n:priority' +translation_of: Web/SVG +--- +<div>{{SVGRef}}</div> + +<div class="callout-box"><strong><a href="/en-US/docs/SVG/Tutorial">Getting Started</a></strong><br> +This tutorial will help get you started using SVG.</div> + +<p class="summary"><span class="seoSummary"><strong>Scalable Vector Graphics (SVG)</strong> is an <a href="/en-US/docs/XML">XML</a>-based markup language for describing two dimensional based <a class="external" href="https://en.wikipedia.org/wiki/Vector_graphics">vector graphics</a>.</span> SVG is essentially to graphics what <a href="/en-US/docs/Web/HTML">HTML</a> is to text.</p> + +<p>SVG is a text-based open Web standard. It is explicitly designed to work with other web standards such as <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, and <a href="/en-US/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a>.</p> + +<p>SVG images and their related behaviors are defined in <span class="seoSummary"><a href="/en-US/docs/XML">XML</a></span> text files which means they can be searched, indexed, scripted and compressed. Additionally this means they can be created and edited with any text editor and with drawing software. </p> + +<p>SVG is an open standard developed by the <a href="https://www.w3.org/">World Wide Web consortium(W3C) </a>since 1999.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation">Documentation</h2> + +<dl> + <dt><a href="/en-US/docs/Web/SVG/Element">SVG element reference</a></dt> + <dd>Details about each SVG element.</dd> + <dt><a href="/en-US/docs/Web/SVG/Attribute">SVG attribute reference</a></dt> + <dd>Details about each SVG attribute.</dd> + <dt><a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM interface reference</a></dt> + <dd>Details about the SVG DOM API, for interaction with JavaScript.</dd> + <dt><a href="/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></dt> + <dd>SVG works together with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}. Use SVG to <a href="/en-US/docs/SVG_In_HTML_Introduction">enhance a regular HTML page or web application</a>.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/SVG">View All...</a></span></p> + +<h2 class="Community" id="Community">Community</h2> + +<ul> + <li>View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> +</ul> + +<h2 class="Tools" id="Tools">Tools</h2> + +<ul> + <li><a href="https://github.com/w3c/svgwg/wiki/Testing">SVG Test Suite</a></li> + <li><a href="https://validator.w3.org/#validate_by_input">Markup Validator</a></li> + <li><a href="/en-US/docs/tag/SVG:Tools">More Tools...</a></li> + <li>Other resources: <a href="/en-US/docs/XML">XML</a>, <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/HTML/Canvas">Canvas</a></li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="Examples">Examples</h2> + +<ul> + <li>Google <a href="http://maps.google.com">Maps</a> (route overlay) & <a href="http://docs.google.com">Docs</a> (spreadsheet charting)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li> + <li><a href="http://jwatt.org/svg/authoring/">SVG authoring guidelines</a></li> + <li>An overview of the <a href="/en-US/docs/Mozilla_SVG_Project">Mozilla SVG Project</a></li> + <li><a href="/en-US/docs/SVG/FAQ">Frequently asked questions</a> regarding SVG and Mozilla</li> + <li><a href="/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li> + <li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li> +</ul> + +<h3 id="Animation_and_interactions">Animation and interactions</h3> + +<p>Like HTML, SVG has a document model (DOM) and events, and is accessible from JavaScript. This allows developers to create rich animations and interactive images.</p> + +<ul> + <li>Some real eye-candy SVG at <a href="http://svg-wow.org/">svg-wow.org</a></li> + <li>Firefox extension (<a href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of {{Glossary("SMIL")}} animation support</li> + <li>Interactive <a href="http://demo.huihoo.com/amplesdk/examples/applications/svgalbum/index.html">photos</a> manipulation</li> + <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li> +</ul> + +<h3 id="Mapping_charting_games_3D_experiments">Mapping, charting, games & 3D experiments</h3> + +<p>While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.</p> + +<ul> + <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li> + <li><a href="http://jvectormap.com/">jVectorMap</a> (interactive maps for data visualization)</li> + <li><a href="http://jointjs.com">JointJS</a> (JavaScript diagramming library)</li> +</ul> +</div> +</div> diff --git a/files/bg/web/svg/ръководство/index.html b/files/bg/web/svg/ръководство/index.html new file mode 100644 index 0000000000..054fafbdb6 --- /dev/null +++ b/files/bg/web/svg/ръководство/index.html @@ -0,0 +1,53 @@ +--- +title: Ръководство за използване на SVG +slug: Web/SVG/Ръководство +tags: + - SVG Ръководство + - ръководство +translation_of: Web/SVG/Tutorial +--- +<p>Мащабируеми векторни графики (Scalable Vector Graphics), <a href="/en-US/Web/SVG" title="en-US/Web/SVG">SVG</a>, е разновидност на W3C XML за маркиране на графики. Частично се изпълнява от Firefox, Opera, WebKit browsers, Internet Explorer и други браузъри.</p> + +<p>Това ръководство има за цел да обясни същината на SVG и съдържа доста технически детаили. Ако просто желаете да изрисувате красиви изображения, може би ще намерите по-полезна информация на <a class="external" href="https://inkscape.org/en/learn/" title="http://inkscape.org/doc/">Inkscape's documentation page</a>. Полезно въведение в SVG е предоставено в<a href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html"> SVG буквара на W3C</a>.</p> + +<div class="note">Това ръководство е в начален етап на разработване. Ако имате възможност, заповядайте да помогнете, като напишете един-два параграфа. Бонус, ако напишете цяла страница!</div> + +<h5 id="Начално_представяне_на_SVG">Начално представяне на SVG</h5> + +<ul> + <li><a href="/en-US/Web/SVG/Tutorial/Introduction" title="en-US/Web/SVG/Tutorial/Introduction">Introduction</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Getting_Started" title="en-US/Web/SVG/Tutorial/Getting_Started">Getting Started</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Positions" title="en-US/Web/SVG/Tutorial/Positions">Positions</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Basic_Shapes" title="en-US/Web/SVG/Tutorial/Basic_Shapes">Basic Shapes</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Paths</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Fills_and_Strokes" title="en-US/Web/SVG/Tutorial/Fills_and_Strokes">Fills and Strokes</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Gradients" title="en-US/Web/SVG/Tutorial/Gradients">Gradients</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Patterns" title="en-US/Web/SVG/Tutorial/Patterns">Patterns</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Texts" title="en-US/Web/SVG/Tutorial/Texts">Texts</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Basic_Transformations" title="en-US/Web/SVG/Tutorial/Basic_Transformations">Basic Transformations</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Clipping_and_masking" title="en-US/Web/SVG/Tutorial/Clipping_and_masking">Clipping and masking</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Other_content_in_SVG" title="en-US/Web/SVG/Tutorial/Other content in SVG">Other content in SVG</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Filter_effects" title="en-US/Web/SVG/Tutorial/Filter effects">Filter effects</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/SVG_fonts" title="en-US/Web/SVG/Tutorial/SVG fonts">SVG fonts</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/SVG_Image_Tag" title="en-US/Web/SVG/Tutorial/SVG Image Tag">SVG Image tag</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Tools_for_SVG" title="en-US/Web/SVG/Tutorial/Tools_for_SVG">Tools for SVG</a></li> + <li><a href="/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS">SVG and CSS</a></li> +</ul> + +<p>Следващите теми са по-задълбочени и поради това, трябва да получат отделни ръководства.</p> + +<h5 id="Писане_на_SVG_чрез_JavaScript">Писане на SVG чрез JavaScript</h5> + +<p>TBD</p> + +<h5 id="Ръководство_за_филтри_в_SVG">Ръководство за филтри в SVG</h5> + +<p>TBD</p> + +<h5 id="Анимации_чрез_SMIL(*задаване_на_път)_в_SVG">Анимации чрез SMIL(*задаване на път) в SVG</h5> + +<p>TBD</p> + +<h5 id="Създаване_на_шрифт_в_SVG">Създаване на шрифт в SVG</h5> + +<p>TBD</p> diff --git a/files/bg/речник/404/index.html b/files/bg/речник/404/index.html new file mode 100644 index 0000000000..02c5395f00 --- /dev/null +++ b/files/bg/речник/404/index.html @@ -0,0 +1,13 @@ +--- +title: '404' +slug: Речник/404 +translation_of: Glossary/404 +--- +<p>404 е стандартизиран код за отговор (Standard Response Code), който означава, че {{Glossary("Server", "сървърът")}} не може да открие заявения ресурс (най-често страница или файл).</p> + +<h2 id="Научете_повече">Научете повече</h2> + +<ul> + <li><a href="/bg/docs/Web/HTTP/Response_codes">списък на кодове за отговор в протокола HTTP</a></li> + <li><a href="https://developer.mozilla.org/en-US/Learn/Checking_that_your_web_site_is_working_properly">съвети за начинаещи за избягване на грешки 404</a></li> +</ul> diff --git a/files/bg/речник/array/index.html b/files/bg/речник/array/index.html new file mode 100644 index 0000000000..977aafb05c --- /dev/null +++ b/files/bg/речник/array/index.html @@ -0,0 +1,35 @@ +--- +title: Масив +slug: Речник/array +translation_of: Glossary/array +--- +<p>Масивът е подреден сбор от данни ( {{Glossary("primitive")}} или {{Glossary("object")}} в зависимост от езика). Масивите се използват за съхраняване на множество данни в една променлива. С това те се различават от други променливи, които могат да съхраняват само една стойност в себе си.</p> + +<p>Към всяка единица данни в масива има прикрепено число, наречено числов индекс, което дава възможност да достъпите самите данни. В JavaScript, броенето на числовите индекси в масивите започва от нула, а смите масиви могат да бъдат променяни с помощта на различни {{Glossary("Method", "методи")}}. </p> + +<p>Как изглежда мсивът в JavaScript:</p> + +<pre><code>var myArray = [1, 2, 3, 4]; + +var catNamesArray = ["Jacqueline", "Sophia", "Autumn"]; + +var именаНаХора = ["Петко", "Елка", "Стоянка", "Красимир", 9]; + +//Масивите в JavaScript могат да съдържат различни типове данни. +</code></pre> + +<h2 id="Научете_повече">Научете повече</h2> + +<h3 id="Общи_познания">Общи познания</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Масив_(програмиране)", "Масив")}} в Уикипедия</li> +</ul> + +<h3 id="Технически_справочник">Технически справочник</h3> + +<ul> + <li>JavaScript {{jsxref("Array")}} on MDN</li> +</ul> + +<p> </p> diff --git a/files/bg/речник/browser/index.html b/files/bg/речник/browser/index.html new file mode 100644 index 0000000000..09aebc1a6c --- /dev/null +++ b/files/bg/речник/browser/index.html @@ -0,0 +1,29 @@ +--- +title: Мрежов четец +slug: Речник/Browser +tags: + - Навигация + - Речник + - браузър + - мрежов четец +translation_of: Glossary/Browser +--- +<p><em>Мрежовият четец</em> (браузър) е програма, която извилича и показва страници от {{Glossary("World Wide Web","световната мрежа")}} и дава възможност на потребителите да достигат до други страници като използват препратки ({{Glossary("hyperlink","хипервръзки")}}).</p> + +<h2 id="Научете_повече">Научете повече</h2> + +<h3 id="Общи_познания">Общи познания</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Браузър")}} на Уикипедия</li> + <li><a href="http://www.evolutionoftheweb.com/" rel="external">Развититето на световната мрежа</a></li> +</ul> + +<h3 id="Изтегляне_на_мрежов_четец">Изтегляне на мрежов четец</h3> + +<ul> + <li><a href="https://www.mozilla.org/bg/firefox/">Mozilla Firefox</a></li> + <li><a href="http://www.google.com/chrome/" rel="external">Google Chrome</a></li> + <li><a href="https://support.microsoft.com/bg-bg/products/internet-explorer" rel="external">Microsoft Internet Explorer</a></li> + <li><a href="http://www.opera.com/bg" rel="external">Opera Browser</a></li> +</ul> diff --git a/files/bg/речник/css/index.html b/files/bg/речник/css/index.html new file mode 100644 index 0000000000..d2d59408b9 --- /dev/null +++ b/files/bg/речник/css/index.html @@ -0,0 +1,52 @@ +--- +title: CSS +slug: Речник/CSS +tags: + - CSS + - Програмиране + - Речник + - уеб +translation_of: Glossary/CSS +--- +<p><span class="seoSummary"><strong>CSS</strong> (Cascading Style Sheets) (Каскадни (изсипващи се) Стилови Листове) е декларативен език, определящ външния вид на страниците в {{glossary("browser","мрежовия четец")}}.</span> Браузърът прилага свойствата, описани в CSS върху външния вид на елементите. Определенията за външен вид и поведение съдържат свойства със стойности, които задават начина, по който изглежда страницата.</p> + +<p>CSS е една от трите основни уебтехнологии наред с {{Glossary("HTML")}} и {{Glossary("JavaScript")}}. Обикновено CSS се използва за задаване изгледа на {{Glossary("Element","елементите в HTML")}}, но може да се прилага и в други обозначителни езици като {{Glossary("SVG")}} или {{Glossary("XML")}}.</p> + +<p>Правилото (rule) в CSS представлява набор от {{Glossary("CSS Property","свойства")}}, обвързани със {{Glossary("selector", "селектор")}} (избирач). Ето пример, в който правим всеки параграф в HTML жълт на черен фон:</p> + +<pre class="brush: css">/* Избирачът "p" определя, че всички параграфи в документа + ще изглеждат според указанията в неговото правило */ +p { + /* Свойството "color" определя цвета на текста. + В този случай – жълт (yellow). */ + color: yellow; + + /* Свойството "background-color" определя фоновия цвят. + В този случай – черен (black). */ + background-color: black +}</pre> + +<p>"Каскадни" се отнася до това с какво предимство се прилагат различните правила върху избраните чрез селекторите елементи. Това определя крайния изглед на страницата. Това е много важна възможност, тъй като сложните сайтове могат да имат хиляди правила в CSS.</p> + +<h2 id="Научете_повече">Научете повече</h2> + +<h3 id="Общи_познания">Общи познания</h3> + +<ul> + <li><a href="/bg/Learn/CSS">Изучавайте CSS в МРМ</a></li> + <li>{{interwiki("wikipedia", "CSS")}} в Уикипедия</li> +</ul> + +<h3 id="Технически_справочници">Технически справочници</h3> + +<ul> + <li><a href="/bg/docs/Web/CSS">Документацията на CSS в МРМ</a></li> + <li><a href="http://www.w3.org/Style/CSS/current-work" rel="external">Текущата работа на Работната група по CSS</a></li> + <li><a href="https://www.w3.org/2006/02/cssbg.html">Каскадни стилови листове - ниво 1 (на български)</a></li> +</ul> + +<h3 id="Обучение_по_CSS">Обучение по CSS</h3> + +<ul> + <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Курсът по Уеб на codecademy.com</a></li> +</ul> diff --git a/files/bg/речник/ecma/index.html b/files/bg/речник/ecma/index.html new file mode 100644 index 0000000000..07e8dc0a87 --- /dev/null +++ b/files/bg/речник/ecma/index.html @@ -0,0 +1,15 @@ +--- +title: ECMA +slug: Речник/ECMA +translation_of: Glossary/ECMA +--- +<p><strong>Ecma International</strong> (<em>European Computer Manufacturers Association</em>) — Асоциация на Европейските Производители на Компютри е организация с нестопанска цел, разработваща стандарти за компютри, свързаност между тях и програмни езици.</p> + +<p>В световната мрежа е всеизвестна с това, че поддържа <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">специфиацията на езика ECMA-262</a> ( {{Glossary("ECMAScript")}}). Този език е ядрото на езика {{Glossary("JavaScript")}}.</p> + +<h2 id="Научете_повече">Научете повече</h2> + +<ul> + <li>{{interwiki("wikipedia", "Ecma_International", "Ecma International")}} в Wikipedia</li> + <li><a href="http://www.ecma-international.org/">Сайтът на Ecma International</a></li> +</ul> diff --git a/files/bg/речник/html/index.html b/files/bg/речник/html/index.html new file mode 100644 index 0000000000..38d3e9cf75 --- /dev/null +++ b/files/bg/речник/html/index.html @@ -0,0 +1,48 @@ +--- +title: HTML +slug: Речник/HTML +tags: + - HTML + - Кодене + - Речник +translation_of: Glossary/HTML +--- +<p>HTML (HyperText Markup Language – език за обозначаване на свръх-текст) е описателен език, който задава строежа на уебстраниците.</p> + +<h2 id="Кратка_история">Кратка история</h2> + +<p>През 1990, като част от неговата визия за {{glossary("World_Wide_Web","световна мрежа")}}, Тим Бърнърс-Лий дава определение за понятието {{glossary("Hypertext","хипертекст")}}, което формализира през следващата година чрез обозначителен език, основаващ се най-вече на {{glossary("SGML")}}. {{glossary("IETF")}} започват формално спецификацията на HTML през 1993 и след няколко чернови, през 1995 издават версия 2.0. През 1994 Бърнърс-Лий основава {{glossary("W3C")}}, за да разработва Уеб. През 1996 W3C поема работата по HTML и година по-късно обнародва Препоръката за HTML 3.2. HTML 4.0 е издаден през 1999 и става стандарт по {{glossary("ISO")}} през 2000.</p> + +<p>По онова време W3C почти изоставя HTML за сметка на {{glossary("XHTML")}}, призовавайки за създаването на независима група, наречена {{glossary("WHATWG")}}. WHATWG се създава през 2004. Благодарение на тях работата по {{glossary("HTML5")}} продължава. Двете организации издават първата чернова през 2008, а пълния стандарт – през 2014.</p> + +<h2 id="Понятие_и_правопис">Понятие и правопис</h2> + +<p>Един документ на HTML предтавлява обикновен текст, съставен от {{glossary("element","елементи")}}. Елементите се ограждат с отварящи и затварящи {{Glossary("tag","тагове")}}. Всеки таг започва с отварящи и завършва със затварящи ъглови скоби (<code><></code>). Съществуват няколко празни (<em>void</em>) тагове, които не могат да обграждат никакъв текст, например {{htmlelement("img")}}.</p> + +<p>Можете да разширявате таговете в HTML посредством {{Glossary("attribute","атрибути")}}. Атрибутите предоставят повече данни за браузъра и така влияят върху начина, по който елементът се изобразява.</p> + +<p><img alt="Detail of the structure of an HTML element" src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p> + +<p>Файл, съдържащ HTML обикновено се записва с разширение <code>.htm</code> или <code>.html</code>. Файлът се предоставя от {{Glossary("Server","сървър")}}, и може да се разглежда с помощта на всякакъв {{Glossary("Browser","мрежов четец")}}.</p> + +<h2 id="Научете_повече">Научете повече</h2> + +<h3 id="Общи_знания">Общи знания</h3> + +<ul> + <li>{{interwiki("wikipedia", "HTML", "HTML")}} в Уикипедия</li> +</ul> + +<h3 id="Да_научим_HTML">Да научим HTML</h3> + +<ul> + <li><a href="/bg/Learn/HTML">Нашият урок по HTML</a></li> + <li><a href="https://www.codecademy.com/learn/learn-html-css" rel="external">Курсът в codecademy.com по Уеб</a></li> +</ul> + +<h3 id="Технически_справочник">Технически справочник</h3> + +<ul> + <li><a href="/bg/docs/Learn/HTML">Документация за HTML в МРМ</a></li> + <li><a href="http://www.w3.org/TR/html5/" rel="external">Спецификацията на HTML</a></li> +</ul> diff --git a/files/bg/речник/http/index.html b/files/bg/речник/http/index.html new file mode 100644 index 0000000000..a91927c343 --- /dev/null +++ b/files/bg/речник/http/index.html @@ -0,0 +1,22 @@ +--- +title: HTTP +slug: Речник/HTTP +tags: + - HTTP + - Речник + - инфраструктура + - начинаещ +translation_of: Glossary/HTTP +--- +<p>HTTP (HyperText Transfer Protocol – протокол за пренос на свръх-текст) е основния {{glossary("protocol", "протокол")}}, позволяващ пренос на файлове в {{glossary("World Wide Web","мрежата")}}. HTTP се основава на текст и не съхранява данни за състояние. Цялото общуване се случва чрез предаване на обикновени текстови съобщения. Всяко съобщение е само за себе си, не знае нищо за никое друго съобщение.</p> + +<div> +<h2 id="Научете_повече">Научете повече</h2> + +<ul> + <li><a href="/bg/docs/Web/HTTP">HTTP на МРМ</a></li> + <li>{{interwiki("wikipedia", "Hypertext Transfer Protocol", "HTTP")}} в Уикипедия</li> +</ul> +</div> + +<p> </p> diff --git a/files/bg/речник/hypertext/index.html b/files/bg/речник/hypertext/index.html new file mode 100644 index 0000000000..e459c8bb33 --- /dev/null +++ b/files/bg/речник/hypertext/index.html @@ -0,0 +1,27 @@ +--- +title: Хипертекст +slug: Речник/Hypertext +tags: + - WebMechanics + - Речник + - свръх-текст + - уеб +translation_of: Glossary/Hypertext +--- +<p>Хипертекст (свръх-текст) (от англ. hypertext) е текст, съдържащ {{glossary("hyperlink","препратки")}} (връзки) към други текстове. Това е нещо повече от обикновения поток от думи като в новела например.</p> + +<p>Понятието е измислено от Тед Нелсън през 1965.</p> + +<h2 id="Научете_повече">Научете повече</h2> + +<h3 id="Общи_познания">Общи познания</h3> + +<ul> + <li>{{interwiki("wikipedia", "Хипертекст", "Хипертекст")}} в Уикипедия</li> +</ul> + +<h3 id="Технически_справочник">Технически справочник</h3> + +<ul> + <li><a href="http://www.ualberta.ca/dept/chemeng/AIX-43/share/man/info/C/a_doc_lib/aixuser/aix6kdov/hyperv1aix.htm">Hypertext Information Base</a></li> +</ul> diff --git a/files/bg/речник/index.html b/files/bg/речник/index.html new file mode 100644 index 0000000000..b01ea4a49d --- /dev/null +++ b/files/bg/речник/index.html @@ -0,0 +1,24 @@ +--- +title: Речник +slug: Речник +tags: + - Показалец + - Речник + - начална страница + - начинаещ +translation_of: Glossary +--- +<div style="max-width: 300px; float: right; margin: 0 0 .5em 1em;">{{LearnBox({"title":"Learn a new term:"})}}</div> + +<p>Уеб-технологиите съдържат голям набор от понятия и съкращения, използвани в документацията и програмирането. Този речник предоставя определения и съкращения, с чиито значения трябва да сте наясно, за да разбирате и изграждате части от световната мрежа.</p> + +<h2 id="Помогнете_за_речника">Помогнете за речника</h2> + +<p>Работата по речника никога не свършва. Можете да помогнете да го подобрим като <a href="/bg/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">добавяте нови понятия</a> или като подобрявате съществуващите. Най-лесният начин да започнете е като натиснете следващия бутон долу или като си изберете и промените, или преведете, някое от понятията.</p> + + +<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p> + +<p>{{GlossaryList({"terms":[], "filter":"notdefined", "css":"multiColumnList"})}}</p> + +<p>Ако искате да научите подробности как да помогнете с речника, вижте <a href="/bg/docs/MDN/Doc_status/Glossary">страницата със статитстика за напредъка в раздела „Речник“</a>.</p> diff --git a/files/bg/речник/internet/index.html b/files/bg/речник/internet/index.html new file mode 100644 index 0000000000..95486a4f1a --- /dev/null +++ b/files/bg/речник/internet/index.html @@ -0,0 +1,19 @@ +--- +title: Интернет +slug: Речник/Internet +tags: + - Въведение + - Речник + - Урок + - начинаещ + - ръководство + - уеб +translation_of: Glossary/Internet +--- +<p>Интернет е световна мрежа, съставена от други мрежи, която използва общи правила, наречени Интернет Протоколи. Съвкупността от протоколи е позната още като {{glossary("TCP")}}/{{glossary("IPv6","IP")}} заради двата най-важни {{glossary("protocol","протокола")}} в нея.</p> + +<h2 id="Научете_повече">Научете повече</h2> + +<ul> + <li><a href="/bg/Learn/How_the_Internet_works">Как работи интернет</a> (въведение за начинанещи)</li> +</ul> diff --git a/files/bg/речник/javascript/index.html b/files/bg/речник/javascript/index.html new file mode 100644 index 0000000000..2b03e49b9e --- /dev/null +++ b/files/bg/речник/javascript/index.html @@ -0,0 +1,45 @@ +--- +title: JavaScript +slug: Речник/JavaScript +tags: + - JavaScript + - Програмиране + - Речник +translation_of: Glossary/JavaScript +--- +<p>JavaScript (JS) е език за програмиране, използван най-вече от страната на клиента за осъществяване на програми, работещи в уебстраниците, но често и за програми, работещи на <a href="/bg/docs/Речник/Server">сървъра</a>, където се използват среди за изпълнение като <a href="http://nodejs.org/" rel="external">Node.js</a>.</p> + +<p>Не бъркайте JavaScript с <a href="https://bg.wikipedia.org/wiki/Java">езика за програмиране Java</a>. „Java“ и „JavaScript" са запазени марки на компанията Oracle в САЩ и други страни. Двата езика обаче имат различен правопис (синтаксис) и значения на изразите, и се използват по различен начин.</p> + +<p>Първоначално JavaScript е замислен като език за изпълнение на сървъра от <span class="short_text" id="result_box" lang="bg"><span>Брендън Айк</span></span> (по онова време служител в корпорацията Нетскейп), но през септември 1995 започва да се използва в уебчетеца Нетскейп Навигатор. Езикът се радва на незабавен успех и {{glossary("Microsoft Internet Explorer", "Интернет експлорър 3.0")}} започва да го използва под името JScript през август 1996.</p> + +<p>През ноември 1996, Нетскейп започва да работи съвместно с ECMA по превръщането на JavaScript в промишлен стандарт. Оттогава стандартизираният JavaScript се нарича ECMAScript, а спецификацията му – ECMA-262. Последното (осмо) издание на стандарта е от юни 2017.</p> + +<p>JavaScript се използва най-вече в уебчетците, като този, който ползвате сега. Той позволява на разработчиците да променят съдържанието на страниците, чрез взаимодействие с {{Glossary("DOM","ДОМ (Документния обектен модел)")}}, да обработват данни чрез {{Glossary("AJAX")}} и {{Glossary("IndexedDB")}}, да чертаят графики в {{Glossary("canvas")}}, да обменят данни с устройства като използват различни {{Glossary("API","ППИ (приложни програмни интерфейси)")}} и т.н. JavaScript е един от най-използваните езици, а това се дължи на скорошното развитие и подобрения в производителността на {{Glossary("API","програмните интерфейси")}}, налични в уебчетците.</p> + +<p>Напоследък JavaScript възвърна славата си, чрез възможността да се използва и на сървъра - благодарение на платормата <a href="http://nodejs.org/" rel="external">Node.js</a>., която се оказа най-успешната сред средите за изпълнение извън браузъра. Node.js ви позволява да използвате JavaScript като скриптов език за автоматизиране на задачи на компютъра и да изграждате пълноценни сървъри за обработка на заявки по протоколите {{Glossary("HTTP")}} и {{Glossary("Web Sockets")}}.</p> + +<h2 id="Научете_повече">Научете повече</h2> + +<h3 id="Общи_познания">Общи познания</h3> + +<ul> + <li>{{interwiki("wikipedia", "JavaScript", "JavaScript")}} в Уикипедия</li> +</ul> + +<h3 id="Learning_JavaScript">Learning JavaScript</h3> + +<ul> + <li>{{Link("/bg/docs/Web/JavaScript/Guide")}} на MDN</li> + <li><a href="http://nodeschool.io/#workshoppers">The "javascripting" workshop on NodeSchool</a></li> + <li><a href="http://www.codecademy.com/tracks/javascript" rel="external">The JavaScript course on codecademy.com</a></li> + <li><a href="http://ejohn.org/apps/learn/" rel="external">John Resig's Learning Advanced JavaScript</a></li> +</ul> + +<h3 id="Технически_справочници">Технически справочници</h3> + +<ul> + <li><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" rel="external">Последното издание на стандарта ECMAScript</a></li> + <li>{{Link("/bg/docs/Web/JavaScript/reference")}} на MDN</li> + <li><a href="http://eloquentjavascript.net/" rel="external">The <em>Eloquent JavaScript</em> book</a></li> +</ul> diff --git a/files/bg/речник/json/index.html b/files/bg/речник/json/index.html new file mode 100644 index 0000000000..45928dce83 --- /dev/null +++ b/files/bg/речник/json/index.html @@ -0,0 +1,30 @@ +--- +title: JSON +slug: Речник/JSON +tags: + - JSON + - Въведение + - Програмиране + - Речник + - скрипт +translation_of: Glossary/JSON +--- +<p><em>JavaScript Object Notation</em> (<strong>JSON</strong>) е формат за обмен на данни, наподобавящ синтаксиса за създаване на обекти в {{Glossary("JavaScript")}}. Въпреки че много езици поддържат JSON, той е особено полезен в приложения на JavaScript, в това число сайтове и разширения за мрежовите четци.</p> + +<p>В JSON може да се представят числа, булеви стойности, низове (strings), <code>null</code> или масиви, както и обекти съставени от тези типове данни (или от други масиви и обекти). JSON не може да представя по-сложни типове данни като например функции, регулярни изрази (regular expressions), дати и т.н. Тези по-сложни типове данни могат да бъдат представени в JSON като бъдат сериализирани.</p> + +<p>Подобно на XML, JSON може да съхранява йерархични данни за разлика от по-стария CSV формат. Съществуват и инструменти за превръщане на данни от JSON в CVS формат като <a href="https://json-csv.com">JSON to CSV Converter</a>.</p> + +<h2 id="Научете_повече">Научете повече</h2> + +<h3 id="Общи_знания">Общи знания</h3> + +<ul> + <li>{{interwiki("wikipedia", "JSON", "JSON")}} в Уикипедия</li> +</ul> + +<h3 id="Технически_справочник">Технически справочник</h3> + +<ul> + <li><a href="/bg/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> в MDN</li> +</ul> diff --git a/files/bg/речник/server/index.html b/files/bg/речник/server/index.html new file mode 100644 index 0000000000..7ffc740e02 --- /dev/null +++ b/files/bg/речник/server/index.html @@ -0,0 +1,25 @@ +--- +title: Сървър +slug: Речник/Server +tags: + - Мрежи + - Речник + - Сървър + - инфраструктура + - протокол +translation_of: Glossary/Server +--- +<p>Хардуерният сървър представлява компютър в мрежа, който предоставя услуги на други компютри – клиенти. Софтуерният сървър е програма, която предоставя услуги на клиентски програми.</p> + +<p>Услугите се предостяват в локални мрежи или в <span class="short_text" id="result_box" lang="bg"><span>широкообхватни мрежи.</span></span> Дадена Клиентска програма се свързва със сървъра като си разменя съобщения с него според правилата на някакъв {{glossary("protocol")}}.</p> + +<p>Най-често срещаните сървъри в локалната мрежа са файлови сървъри, сървъри за имена, за електронна поща, за факс, за печат и т.н. Общ пример за сървър е свързан към интернет Уебсървър. Миникомпютрите, мейнфрейм и супер-компютрите в центровете за данни също са сървъри.</p> + +<h2 id="Научете_повече"><strong>Научете повече</strong></h2> + +<h3 id="Общи_познания">Общи познания</h3> + +<ul> + <li><a href="/bg/Learn/What_is_a_web_server">Въведение в сървърите</a></li> + <li>{{Interwiki("wikipedia", "Server (computing)")}} on Wikipedia</li> +</ul> diff --git a/files/bg/речник/world_wide_web/index.html b/files/bg/речник/world_wide_web/index.html new file mode 100644 index 0000000000..12b3b7e34f --- /dev/null +++ b/files/bg/речник/world_wide_web/index.html @@ -0,0 +1,39 @@ +--- +title: Световната мрежа +slug: Речник/World_Wide_Web +tags: + - WWW + - Речник + - инфраструктура + - уеб +translation_of: Glossary/World_Wide_Web +--- +<p>Световната мрежа (<em>World Wide Web</em>) — всеизвестна като <strong>WWW</strong>, <strong>W3</strong> или просто <strong>Уеб</strong> е взаимосвързана система от общодостъпни страници в {{Glossary("Internet", "Интернет")}}. Уеб не е същото нещо като Интернет: Уеб е едно от многото приложения (начини за ползване) на Интернет.</p> + +<p>Тим Бърнърс-Лий предлага архитектурата на това, което става известно като „Световната Мрежа“. Той създава първите мрежов {{Glossary("Server","сървър")}}, мрежов {{Glossary("Browser","браузър")}}, и уебстраница на своя компютър в лабораторията си за физични изследвания в ЦЕРН през 1990 г. През 1991 г. той обявява своето творение в новинарската група alt.hypertext. Тогава Мрежата става обществена.</p> + +<p>Системата, която днес познаваме като "Мрежата (Уеб)", се състои от няколко компонента:</p> + +<ul> + <li>Протоколът <strong>{{Glossary("HTTP")}}</strong> управлява прехвърлянето на данните между сървър и клиент.</li> + <li>За да достъпи място в мрежата, клиентът предоставя единствен общовалиден указател, наречен <strong>{{Glossary("URL")}}</strong> (Единно Местонахождение на Източник) или {{Glossary("URI")}} (Единен Указател за Местонахождение) (формално наречен Universal Document Identifier (UDI) – Универсален Документен Идентификатор).</li> + <li><strong>{{Glossary("HTML")}}</strong> (езикът за обозначаване на свръх-текст) е най-използваният начин за обнародване (публикуване) на документи в Уеб.</li> +</ul> + +<p>Свързването на източници на данни чрез {{Glossary("Hyperlink","хипервръзки")}}, е определящо понятие в Уеб. Чрез него (свързването) се създава съвкупност от свързани документи.</p> + +<p>Скоро след изобретяването на Уеб. Тим Бърнърс-Лий основава {{Glossary("W3C")}} (World Wide Web Consortium), за да стандартизира и развива световната мрежа. Консорциумът е съставен от няколко групи по интереси. Такива са разработчиците на {{Glossary("browser","мрежови четци")}}, правителствени представители, изследователи и университети. Мисията му включва също обучение и разпространение на знания.</p> + +<h2 id="Научете_повече" style="line-height: 30px;">Научете повече</h2> + +<ul> + <li><a href="https://developer.mozilla.org/bg/Learn">Научете се да програмирате за уеб</a></li> + <li><a href="https://learning.mozilla.org/web-literacy">Карта на грамотността в Уеб</a> (хранилище за умения, необходими за разработката за Уеб)</li> +</ul> + +<h3 id="Общи_знания" style="line-height: 24px;">Общи знания</h3> + +<ul> + <li>{{Interwiki("wikipedia", "World Wide Web")}} в Уикипедия</li> + <li><a href="http://w3.org">Сайтът W3C</a></li> +</ul> |