recursal/MDN huggingface dataset:
Доступность
===========

*Веб-доступность* (**A11Y**) — регламентирует лучшие практики обеспечения работоспособности и доступности сайта вне зависимости от физических и технических ограничений. Доступность описывается и обсуждается W3C в рамках Инициативы по обеспечению доступности (WAI).

Дополнительные ресурсы
----------------------

### Общие сведения

* Доступность на MDN
### Изучение доступности

* Изучение доступности на MDN
* Web Accessibility In Mind
### Технические материалы

* ARIA документация на MDN
* Инициатива по обеспечению доступности W3C
* WAI-ARIA рекомендации
Conditional (условное выражение)
================================

**Условие** - это набор правил, которые могут прерывать нормальное выполнение кода или изменять его в зависимости от того, удовлетворено ли условие или нет.

Инструкция или набор инструкций выполняется, если удовлетворяется определённое условие. В противном случае выполняется другая инструкция. Также возможно повторить выполнение инструкции или набора инструкций, пока условие ещё не удовлетворено.

Узнать больше
-------------

### Техническая справка

* Control flow (en-US) on MDN
### Узнайте об этом

* Control flow and error handling in Javascript on MDN
Интернет-провайдер
==================

ISP (Интернет-провайдер) продаёт доступ к интернету, а иногда и электронную почту, веб-хостинг и VoIP, либо путём установления соединения по телефонной линии (которая раньше была распространена), либо через широкополосное соединение, такое как кабельный модем или DSL-сервис.

Узнайте больше
--------------

### Общие знания

* Как работает Интернет (объяснение для новичков)
Колбэк-функция
==============

Колбэк-функция (или обратный вызов) - это функция, переданная в другую функцию в качестве аргумента, которая затем вызывается по завершению какого-либо действия.

Вот краткий пример:


```js
function greeting(name) {
  alert("Hello " + name);
}

function processUserInput(callback) {
  var name = prompt("Please enter your name.");
  callback(name);
}

processUserInput(greeting);
```


Выше приведён пример синхронного колбэка, поскольку функция `processUserInput` выполняется синхронно.

Колбэки часто используются для продолжения выполнения кода после завершения асинхронной операции - они называются асинхронными колбэками.


```js
async function pageLoader(callback) {
  const data = await fetch("/ru/docs/Glossary/Callback\_function");
  callback(data);
}

function onPageLoadingFinished(pageData) {
  console.log("Page was sucessfully loaded!");
  console.log("Response:");
  console.log(pageData);
}

pageLoader(onPageLoadingFinished);
```


Вот ещё один пример асинхронного обратного вызова: maps-example.html (живой пример). Он использует Google Maps API и Geolocation API для отображения карты текущего местоположения вашего устройства.


```js
// maps-example.html
// Вызов асинхронной функции getCurrentPosition
// с передачей callback функции принимающей координаты
// в качестве параметра
navigator.geolocation.getCurrentPosition(function (position) {
  var latlng = new google.maps.LatLng(
    position.coords.latitude,
    position.coords.longitude,
  );
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true,
  };
  var map = new google.maps.Map(
    document.getElementById("map\_canvas"),
    myOptions,
  );
});
```


Поскольку получение координат устройства из его GPS является асинхронным (мы точно не знаем, когда данные будут возвращены), метод `Geolocation.getCurrentPosition()` принимает анонимную колбэк-функцию в качестве параметра, которая получает найденные данные координат. Эта функция выполняется только по возвращению данных координат.

Больше информации
-----------------

### Основное

* Колбэки и события на компонентах
* Ад обратных вызовов
IPv6
====

**IPv6** — это текущая версия протокола связи, лежащая в основе Интернета. Медленно IPv6 заменяет IPv4, среди прочего, потому что IPv6 допускает множество различных IP адресов.

Смотрите также
--------------

* IPv6 в Википедии
Оптимизация ваших страниц для рискованного парсинга
===================================================

Традиционно, HTML-парсер в браузерах работает на главной ветке и блокируется после тега `</script>`, пока скрипт не загрузится и не выполнится. HTML-парсер в Firefox 4 и новее поддерживает рискованный парсинг вне главной ветки. Он продолжает парсить, пока скрипты загружаются и выполняются. В Firefox 3.5 и 3.6 парсер начинает рискованную загрузку скриптов, стилей и изображений, когда он находит их. Однако, в Firefox 4 и новее HTML-парсер также рискованно загружает алгоритм постройки дерева HTML. С одной стороны, когда риск оправдался, нет необходимости в репарсинге части, которая уже была просканирована на скрипты, стили и изображения. С другой стороны, когда риск не оправдался, HTML-парсеру достаётся больше работы.

Эта статья поможет избежать некоторых проблем, которые замедляют загрузку страницы.

Делаем рискованную загрузку успешной
------------------------------------

Есть только одно правило, чтобы сделать рискованную загрузку скриптов, стилей и изображений успешной:

* Если вы используете элемент `<base>`, чтобы заменить основной URI страницы, поместите этот элемент в часть страницы без скриптов. Не добавляйте его с помощью `document.write()` или `document.createElement()`.
Как избежать перестройки дерева страницы
----------------------------------------

Рискованное построение дерева терпит неудачу в случае, когда функция `document.write()` изменяет состояния построителя дерева так, что то рискованное состояние после тега `</script>` более не остаётся прежним после того, как весь контент, добавленный через `document.write(),` будет распарсен. Только несколько необычных применений `document.write()` вызывают эту проблему. Вот, чего необходимо избегать:

* Не пишите незаконченные древа. Вместо `<script>document.write("<div>");</script>` лучше написать `<script>document.write("<div></div>");</script>`.
* Не пишите незаконченные теги. Не стоит писать `<script>document.write("<div></div");</script>`.
* Не заканчивайте строку возрастной кареткой (`\r`). Вместо `<script>document.write("Hello World!\r");</script>` лучше написать `<script>document.write("Hello World!\n");</script>`.
* Заметьте, что написание законченных тегов может повлиять на другие теги так, что они станут незаконченными. В том числе, `<script>document.write("<div></div>");</script>` внутри `<head>` будет интерпретировано как `<script>document.write("</head><body><div></div>");</script>`, что повлияет на `<head>` так, что он станет незаконченным.
* Не форматируйте часть таблицы. Вместо `<table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table>` лучше написать `<script>document.write("<table><tr><td>Hello World!</td></tr></table>");</script>`.
Функция
=======

**Функция** это отрывок кода который может быть вызван из другого кода или вызван собой, или это переменная которая ссылается на функцию. Когда функция вызвана, аргументы переданы в функцию как вход, и функция может необязательно вернуть вывод. Функция в JavaScript это объект.

Имя функции это идентификатор, объявленный как часть объявления функции или выражения функции. Имя функции scope (en-US) зависит от того является ли имя функции объявлением или выражением.

### Различные типы функций

**Анонимная функция** это функция без имени:


```js
function () {}
```


**Именованная функция** это функция с именем:


```js
function foo() {}
```


**Внутренняя функция** это функция внутри другой функции (`square` в данном случае). **Внешняя функция** это функция содержащая функцию (`addSquares` в данном случае):


```js
function addSquares(a, b) {
  function square(x) {
    return x \* x;
  }
  return square(a) + square(b);
}
```


**Рекурсивная функция** это функция которая вызывает саму себя. См recursion (en-US).


```js
function loop(x) {
  if (x >= 10) return;
  loop(x + 1);
}
```


**Immediately Invoked Function Expressions** (IIFE) это функция которая вызывается прямо после того как функция загружена в компилятор браузера. Способ объявления IIFE это путём размещения левых и правых круглых скобок в конце объявления функции. В этом типе выражении функций много преимуществ, но это выходит за рамки курса. Если вы хотите узнать больше об IFFE, проверьте следующую страницу на Википедии.

https://en.wikipedia.org/wiki/Immediately-invoked\_function\_expression


```js
// Примеры:

function foo(){
 console.log('Здравствуй Foo');
}();

(function foo() {
 console.log('Здравствуй Foo');
}());

(function food(){
    console.log('Здравствуй Foo');
})();
```

Узнайте больше
--------------

### Технический справочник

* Функции
Свойство
========

Термин **свойство** может иметь разное значение, в зависимости от контекста. Он может указывать на:
Type (тип)
==========

**Тип** является характеристикой значения (en-US), влияющей на то, какой вид данных или структур оно может хранить — например, в JavaScript `Boolean` (en-US) содержит только значения `true`/`false`, тогда как `String` содержит текстовые строки, а `Number` содержит числа любого типа и т.д. При этом для Структурных типов мы в целом можем опираться на то, какой конструктор был использован для создания данной структуры.

Тип данных значения также влияет на то, какие операции допустимы для этого значения. Например, целое число может быть умножено на целое число, но не на строку. Это так же полезно знать для операций сравнения меду типами данных. В тоже время сравнение между структурными типами является отдельной весьма сложной задачей, так как даже несмотря на то, что структуры могут быть идентичны по типам данных и набору полей, в глубине своей Цепочки Прототипов они могут различаться.

Узнать больше
-------------

### Общие сведения

* Типы данных в JavaScript
WebRTC
======

**WebRTC** (*Web Real-Time Communication*) — это API, который может использоваться в видео- и аудио-чатах, а также для обмена файлов через одноранговую сеть (P2P).

WebRTC в основном состоит из следующих частей:

`getUserMedia()`

Получает доступ к камере и/или микрофону пользователя для передачи данных в RTC-подключение.

`RTCPeerConnection`

Интерфейс для настройки видеочата или голосовых вызовов.

`RTCDataChannel` (en-US)

Метод, позволяющий установить одноранговый (peer-to-peer (en-US)) канал связи между браузерами.

Узнать больше
-------------

* WebRTC API на MDN
* Поддержка WebRTC браузерами
Символ
======

**Символ** (англ. **Character** или **Symbol**) - буква, цифра, знак препинания, непечатаемый символ (например возврат каретки). UTF-8 (en-US) - самый распространённый стандарт кодировки символов, содержащий большое количество графем популярных языков людей.
Baseline
========

**Базовая линия** - это термин, используемый в европейской и западно-азиатской типографии, означающий воображаемую линию, на которую опираются символы шрифта.

Потомки символов типа g и p простираются ниже этой строки. Глифы (en-US) с закруглёнными нижними и верхними окончаниями типа C или 3 слегка простираются под ним.

Восточно-азиатские шрифты не имеют исходной линии. Их глифы помещаются в квадратную коробку без восходов и исходов.

Смотрите также
--------------

### Общие сведения

* Базовая линия на Wikipedia
### Техническая документация

* CSS Box Alignment на MDN
Контейнер выравнивания
======================

**Контейнер выравнивания** — это прямоугольник, в котором выровнен объект выравнивания (en-US). Это определяется макетом: обычно это блок, содержащий объект выравнивания, учитывая режим письма, установленный для контейнера.

Дополнительные ресурсы
----------------------

* Выравнивание блоков в CSS
Хеш
===

Хеш-функция получает на вход текстовое сообщение произвольной длины и выдаёт хеш фиксированной длины. Как правило, в форме 128-битного "отпечатка пальцев" или "дайджеста сообщения". Хеши очень полезны для криптографии (en-US) — они обеспечивают целостность передаваемых данных. Это служит основой для HMAC (en-US), которые обеспечивают аутентификацию сообщений.
Источник
========

**Источник** веб-содержимого определяется частями URL, который был использован для доступа к ресурсу: *схема* (протокол), *имя хоста* (домен), и *порт*. Два документа имеют одинаковый источник только когда схема, имя хоста и порт полностью совпадают.

Некоторые операции доступны только для одного и того же источника, и это ограничение может быть снято с помощью CORS.

Примеры
-------

Источники одинаковы, потому что имеют одинаковую схему (`http`) и имя хоста (`example.com`), а путь к файлу не имеет значения:

* `http://example.com/app1/index.html`
* `http://example.com/app2/index.html`

Источники одинаковы, потому что сервер по умолчанию отправляет содержимое HTTP через порт 80:

* `http://example.com:80`
* `http://example.com`

Источники не одинаковы, потому что используют разные схемы:

* `http://example.com/app1`
* `https://example.com/app2`

Источники не одинаковы, потому что у них разные имена хостов:

* `http://example.com`
* `http://www.example.com`
* `http://myapp.example.com`

Источники не одинаковы, потому что используют разные порты:

* `http://example.com`
* `http://example.com:8080`
Смотрите также
--------------

* Политика одинакового источника
* Site (en-US)
* Спецификация HTML: origin
Дешифрование
============

В криптографии (en-US), **дешифрование** это конвертация шифротекста (en-US) в открытый текст (en-US).

Расшифровка это криптографическая основа: это трансформация кодированного текста в простой текст при помощи криптографического алгоритма под названием шифр (en-US). Шифрование, как и дешифрование в современных способах кодирования осуществляется благодаря определённому алгоритму и секретному элементу (ключу (en-US)). Если алгоритм обычно доступен публично, то по соображениям безопасности, ключ должен оставаться в тайне.

![The decryption primitive.](/ru/docs/Glossary/Decryption/decryption.png)

Дешифрование это обратный процесс шифрования (en-US) и если ключ остаётся в тайне, дешифрование становиться математически сложным. Степень сложности зависит от уровня безопасности действующих криптографических алгоритмов и эволюционирует с развитием криптоанализа (en-US).
Абстракция
==========

Абстракция в программировании — это способ снизить сложность и повысить эффективность проектирования и реализации программного обеспечения за счёт сокрытия технической сложности за более простым API.

Преимущества абстракции
-----------------------

* Помогает избежать написания низкоуровневого кода.
* Упрощает повторное использование кода и позволяет избежать дублирования.
* Даёт возможность изменять внутреннюю реализацию программы, не затрагивая пользователей.
* Помогает повысить безопасность приложения или программы, поскольку пользователям доступны только нужные детали.
Пример
------


```js
class ImplementAbstraction {
  // метод присваивает значения внутренним свойствам
  set(x, y) {
    this.a = x;
    this.b = y;
  }

  display() {
    console.log("a = " + this.a);
    console.log("b = " + this.b);
  }
}

const obj = new ImplementAbstraction();
obj.set(10, 20);
obj.display();
// a = 10
// b = 20
```
Полифил
=======

Полифил — это фрагмент кода (в сети — обычно JavaScript), который позволяет использовать современную функциональность в более старых браузерах, которые не поддерживают ее по умолчанию.

Например, полифил можно использовать, чтобы эмулировать функциональность `text-shadow` в IE7 с помощью нативных фильтров браузера, или рем и медиавыражения, динамически меняя стилизацию в нужных случаях с помощью JavaScript, или что-либо еще, что вам потребуется.

Из-за меньшей производительности и ограниченной функциональности нельзя использовать исключительно полифилы. Нативная реализация API быстрее и с ней можно сделать больше, чем с помощью полифила. Например, полифил Object.create может эмулировать только то, что доступно для ненативной реализации Object.create.

В других случаях полифилы нужны, чтобы разрешить ситуации, когда браузеры реализуют одни и те же возможности разными способами. Тогда полифил использует нестандартные возможности конкретного браузера, чтобы в результате определенная функциональность была совместима с действующими стандартами JavaScript. Хотя такое применение полифилов и редкость сейчас, во времена IE6 и Netscape, когда каждый браузер реализовывал JavaScript очень по-разному, оно было широко распространено. Первая версия JQuery была ранним примером полифила. Она представляла собой компиляцию из обходных путей, специфических для определенных браузеров, которая предоставляла JavaScript-разработчикам единый API для всех браузеров. В то время одной из наибольших проблем было заставить сайт работать на всех устройствах: браузеры настолько существенно различались, что порой код приходилось писать совершенно по-разному и разрабатывать разные пользовательские интерфейсы, исходя из используемого пользователем браузера. Таким образом, у JavaScript-разработчиков был доступ только к очень лимитированному количеству JavaScript API, которые работали более или менее одинаково во всех браузерах. Сейчас использование полифилов для взаимодействия со специфичными для браузера реализациями возможностей менее распространено, так как современные браузеры в большинстве своем имеют большой набор стандартизированных API.

Узнать больше
-------------

### Общая информация

* Что такое полифил? (перевод статьи Реми Шарпа, создателя термина «полифил»)
Содержимое встроенного уровня
=============================

В CSS содержимое встроенной раскладки называется **содержимым встроенного уровня**. Большинство текстовых последовательностей, замещаемых элементов и сгенерированного содержимого по умолчанию является встроенным.

Во встроенной раскладке смешанный поток из текста, замещаемых элементов и других встроенных контейнеров представляется в виде набора строчных контейнеров. Внутри каждого строчного контейнера встроенные контейнеры выравниваются относительно друг друга по вертикали или по горизонтали, в зависимости от применяемого режима письма (writing mode). Обычно они выравниваются по своей базовой линии текста. Это можно настроить с помощью CSS.

![inline layout](/ru/docs/Glossary/Inline-level_content/inline_layout.png)

**Примечание:** HTML-элементы исторически делятся на "блочные" и "встроенные". Поскольку это характеристика представления, то теперь это определяется в CSS.

Примеры
-------


```html
<p>
  Этот span является
  <span class="highlight">элементом встроенного уровня</span>. Его фон
  подсвечен, чтобы показать начало и конец действия элемента. Элементы ввода,
  такие как <input type="radio" /> и <input type="checkbox" />, тоже являются
  содержимым встроенного уровня.
</p>
```


В этот примере элемент `<p>` содержит текст. В этом тексте есть элемент `<span>` и два элемента `<input>`, все они являются элементами встроенного уровня. Если `<span>` занимает две строки, то создаются два строчных контейнера. Поскольку эти элементы встроенные, абзац отображается корректно, без разделения на отдельные строки:
```

body {
  margin: 0;
  padding: 4px;
  border: 1px solid #333;
}

.highlight {
  background-color: #ee3;
}
```

Смотрите также
--------------

* Содержимое блочного уровня
* Встроенный контекст форматирования (en-US)
* `display`
Асинхронный
===========

Термин *асинхронный* относится к двум или более объектам или событиям, которые не существуют или не происходят одновременно, то есть они **не являются** синхронными. Когда происходит несколько связанных событий, не зависящих от завершения предыдущих, они асинхронны.

Смотрите также
--------------

* Получение данных с сервера
* Синхронный
First Meaningful Paint
======================

**Первое значимое отображение** (англ. First Meaningful Paint, FMP) - метрика, которая показывает, за какое время контент на странице становится виден пользователю. Это метрика включает в себя время от начала загрузки страницы до момента, когда на сайте отобразился основной контент.

Смотрите также
--------------

* First contentful paint
Прототипно-ориентированное программирование
===========================================

**Прототипно-ориентированный стиль** объектно-ориентированного программирования тот, в котором классы определены неявно, а производные классы получаются добавлением свойств и методов в экземпляр другого класса или, значительно реже, к пустому объекту.
Флекс-элемент
=============

Непосредственные дочерние элементы флекс-контейнера (элемент для которого установлено `display: flex` или `display: inline-flex`) становятся **флекс-элементами**.

Непрерывные фрагменты текста внутри флекс-контейнера также становятся флекс-элементами.

Изучать далее
-------------

### Ссылки на свойства

* `align-self`
* `flex-basis`
* `flex-grow`
* `flex-shrink`
* `order`
### Читать далее

* Руководство по флексбоксу: Основные понятия флексбокса.
* Руководство по флексбоксу: *Ordering flex items (en-US)*
* Руководство по флексбоксу: Управление соотношением элементов вдоль главной оси
HTTP/2
======

**HTTP/2** это старшая версия сетевого протокола HTTP. Основным назначением HTTP/2 является снижение задержки (en-US) путём реализации полного мультиплексирования запросов и ответов, уменьшения перегруженности протокола при помощи эффективного сжатия заголовков HTTP, а также добавления поддержки приоритетов запроса и "server push"("серверное проталкивание" - сервер имея правила, может проявить инициативу, которые инициируют отправку контента до его запроса, зная о том, что может поступить запрос на их отправку).

HTTP/2 никоим образом не изменяет семантику применяемую HTTP. Все основные концепции HTTP 1.1, такие как методы HTTP, коды статусов, URI, и поля заголовков останутся прежними. Вместо этого HTTP/2 изменит порядок (форму) данных и способ их передачи между клиентом и сервером, которые управляют всем процессом, и скроет сложность применения в новом обрамляющем слое. Это позволит использовать существующие приложения без изменений.

1. Основные сведения
    1. HTTP на MDN
2. Справка
    1. HTTP
    2. Latency (en-US)
Пропускная способность
======================

**Пропускная способность** (скорость передачи данных) - мера количества информации, которая может быть передана по каналу связи за заданный промежуток времени. Обычно измеряется в величинах, кратных битам в секунду (бит/с), например в мегабитах (Мбит/с) или гигабитах (Гбит/с) в секунду.
Loop
====

Цикл - это последовательность инструкций, которая постоянно повторяется до тех пор, пока в программе не будет выполнено определённое условие. Примером может служить процесс получения элемента данных, его последующего изменения, а затем проверки некоторых условий, например, что счётчик достиг заданного числа.

Примеры
-------

### Цикл for

#### Синтаксис
```

for (statement 1; statement 2; statement 3){
 execute code block
}
```


* Statement 1 выполняется один раз до запуска блока кода.
* Statement 2 определяет условие, необходимое для выполнения блока кода.
* Statement 3 выполняется каждый раз, когда выполняется блок кода.

#### Пример


```js
for (var i = 0; i < 10; i++) {
  console.log(i);
}
//Этот цикл будет печатать числа 0-9 и остановится, когда условие будет выполнено (i = 10)
```


Для приведённого выше примера синтаксис выглядит следующим образом:

* Statement 1 устанавливает переменную для цикла (var i = 0).
* Statement 2 устанавливает условие цикла (i < 10).
* Statement 3 увеличивает значение i (i ++) при каждом запуске блока кода.
### Цикл while

#### Синтаксис
```

while (condition){
 execute code block
}
```


* Блок кода будет продолжать цикл до тех пор, пока условие выполняется (true).

#### Пример


```js
var i = 0;
while (i < 5) {
  console.log(i);
  i++;
}
//Этот цикл выведет числа 0-4 и остановится, когда условие станет ложным (i >=5)
```


Для приведённого выше примера синтаксис выглядит следующим образом:

* Блок кода будет продолжать работать, пока переменная (i) меньше 5.

1. MDN Web Docs Glossary
    1. Loop
ECMA
====

**Ecma International**, ранее известная как European Computers Manufactures Association (Европейская Ассоциация Производителей Компьютеров) — некоммерческая организация, утверждающая и развивающая стандарты в областях аппаратного обеспечения компьютеров, коммуникационных технологий и языков программирования.

В интернете она прежде всего известна, как организация, утвердившая спецификацию ECMA-262 (она же ECMAScript), являющуюся основной спецификацией языка JavaScript.

Узнать больше
-------------

* Официальный сайт Ecma International