GLSL Шейдеры - Разработка игр

GLSL Шейдеры
============

Шейдеры используют GLSL (OpenGL Shading Language), специальный язык программирования шейдеров от OpenGL, который во многом напоминает С (Си). GLSL выполняется напрямую графическим процессором. Существует два типа шейдеров: вершинные шейдеры и фрагментные (пиксельные) шейдеры. Вершинные шейдеры изменяют положение фигуры в системе 3D координат. Фрагментные шейдеры рассчитывают цвет и другие атрибуты отображения.

GLSL не так прост в изучении, как JavaScript. GLSL является строго типизированным и в нем часто используются операции с векторами и матрицами. It can get very complicated — very quickly. В этой статье мы создадим небольшой пример кода, который отображает куб. Чтобы ускорить разработку, мы будем использовать Three.js API.

Как вы помните из статьи о теоретических основах (en-US), вертекс или вершина это точка в системе 3D координат. Также вершины могут иметь дополнительные свойства. Система 3D координат определяет пространство, а вертексы позволяют определять формы в этом пространстве.

Типы шейдеров
-------------

Шейдер, по сути, это функция, которая требуется для отображения чего-либо на экране. Шейдер запускается в GPU (graphics processing unit), который оптимизирован для выполнения подобных операций. Using a GPU to deal with shaders offloads some of the number crunching from the CPU. This allows the CPU to focus its processing power on other tasks, like executing code.

### Вершинный шейдер

Vertex shaders manipulate coordinates in a 3D space and are called once per vertex. The purpose of the vertex shader is to set up the `gl_Position` variable — this is a special, global, and built-in GLSL variable. `gl_Position` is used to store the position of the current vertex.

The `void main()` function is a standard way of defining the `gl_Position` variable. Everything inside `void main()` will be executed by the vertex shader. A vertex shader yields a variable containing how to project a vertex's position in 3D space onto a 2D screen.

### Фрагментный шейдер

Fragment (or texture) shaders define RGBA (red, blue, green, alpha) colors for each pixel being processed — a single fragment shader is called once per pixel. The purpose of the fragment shader is to set up the `gl_FragColor` variable. `gl_FragColor` is a built-in GLSL variable like `gl_Position`.

The calculations result in a variable containing the information about the RGBA color.

Демо
----

Let's build a simple demo to explain those shaders in action. Be sure to read Three.js tutorial first to grasp the concept of the scene, its objects, and materials.

**Примечание:** Remember that you don't have to use Three.js or any other library to write your shaders — pure WebGL (Web Graphics Library) is more than enough. We've used Three.js here to make the background code a lot simpler and clearer to understand, so you can just focus on the shader code. Three.js and other 3D libraries abstract a lot of things for you — if you wanted to create such an example in raw WebGL, you'd have to write a lot of extra code to actually make it work.

### Настройка окружения

Чтобы приступить к работе с шейдерами WebGL вам потребуется:

* Убедиться, что вы используете современный браузер, который хорошо поддерживает WebGL, например Firefox или Chrome.
* Создать папку, в которой будете хранить результаты ваших экспериментов.
* Сохранить копию последней минимизированной версии библиотеки Three.js в созданную папку.
### Структура HTML кода

Мы будем использовать следующую структуру HTML кода.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MDN Games: Shaders demo</title>
    <style>
 body {
 margin: 0;
 padding: 0;
 font-size: 0;
 }
 canvas {
 width: 100%;
 height: 100%;
 }
 </style>
    <script src="three.min.js"></script>
  </head>
  <body>
    <script id="vertexShader" type="x-shader/x-vertex">
 // vertex shader's code goes here
 </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
 // fragment shader's code goes here
 </script>
    <script>
 // scene setup goes here
 </script>
  </body>
</html>
```

It contains some basic information like the document `<title>`, and some CSS to set the `width` and `height` of the `<canvas>` element that Three.js will insert on the page to be the full size of the viewport. The `<script>` element in the `<head>` includes the Three.js library in the page; we will write our code into three script tags in the `<body>` tag:

1. The first one will contain the vertex shader.
2. The second one will contain the fragment shader.
3. The third one will contain the actual JavaScript code generating the scene.

Before reading on, copy this code to a new text file and save it in your working directory as `index.html`. We'll create a scene featuring a simple cube in this file to explain how the shaders work.

### Исходный код куба

Instead of creating everything from scratch we can reuse the Building up a basic demo with Three.js source code of the cube. Most of the components like the renderer, camera, and lights will stay the same, but instead of the basic material we will set the cube's color and position using shaders.

Go to the cube.html file on GitHub, copy all the JavaScript code from inside the second `<script>` element, and paste it into the third `<script>` element of the current example. Save and load `index.html` in your browser — you should see a blue cube.

### Код вершинного шейдера

Давайте напишем простой вершинный шейдер — добавим код ниже в тело первого тега `<script>` :

```glsl
void main() {
  gl_Position = projectionMatrix \* modelViewMatrix \* vec4(position.x+10.0, position.y, position.z+5.0, 1.0);
}
```

The resulting `gl_Position` is calculated by multiplying the model-view and the projection matrices by each vector to get the final vertex position, in each case.

**Примечание:** You can learn more about *model*, *view*, and *projection transformations* from the vertex processing paragraph (en-US), and you can also check out the links at the end of this article to learn more about it.

Both `projectionMatrix` and `modelViewMatrix` are provided by Three.js and the vector is passed with the new 3D position, which results in the original cube moving 10 units along the `x` axis and 5 units along the `z` axis, translated via a shader. We can ignore the fourth parameter and leave it with the default `1.0` value; this is used to manipulate the clipping of the vertex position in the 3D space, but we don't need in our case.

### Код шейдера текстуры

Now we'll add the texture shader to the code — add the code below to the body's second `<script>` tag:

```glsl
void main() {
  gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0);
}
```

This will set an RGBA color to recreate the current light blue one — the first three float values (ranging from `0.0` to `1.0`) represent the red, green, and blue channels while the fourth one is the alpha transparency (ranging from `0.0` — fully transparent — to 1.0 — fully opaque).

### Применение шейдеров

To actually apply the newly created shaders to the cube, comment out the `basicMaterial` definition first:

```js
// var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
```

Далее, создаём `shaderMaterial`:

```js
var shaderMaterial = new THREE.ShaderMaterial({
  vertexShader: document.getElementById("vertexShader").textContent,
  fragmentShader: document.getElementById("fragmentShader").textContent,
});
```

This shader material takes the code from the scripts and applies it to the object the material is assigned to.

Then, in the line that defines the cube we need to replace the `basicMaterial`:

```js
var cube = new THREE.Mesh(boxGeometry, basicMaterial);
```

...with the newly created `shaderMaterial`:

```js
var cube = new THREE.Mesh(boxGeometry, shaderMaterial);
```

Three.js compiles and runs the shaders attached to the mesh to which this material is given. In our case the cube will have both vertex and texture shaders applied. That's it — you've just created the simplest possible shader, congratulations! Here's what the cube should look like:

![Three.js blue cube demo](http://end3r.github.io/MDN-Games-3D/Shaders/img/cube.png)

It looks exactly the same as the Three.js cube demo but the slightly different position and the same blue color are both achieved using the shader.

Финальный вариант
-----------------

### HTML

```html
<script src="https://end3r.github.io/MDN-Games-3D/Shaders/js/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
 void main() {
 gl\_Position = projectionMatrix \* modelViewMatrix \* vec4(position.x+10.0, position.y, position.z+5.0, 1.0);
 }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
 void main() {
 gl\_FragColor = vec4(0.0, 0.58, 0.86, 1.0);
 }
</script>
```

### JavaScript

```js
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor(0xdddddd, 1);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT);
camera.position.z = 50;
scene.add(camera);

var boxGeometry = new THREE.BoxGeometry(10, 10, 10);

var shaderMaterial = new THREE.ShaderMaterial({
  vertexShader: document.getElementById("vertexShader").textContent,
  fragmentShader: document.getElementById("fragmentShader").textContent,
});

var cube = new THREE.Mesh(boxGeometry, shaderMaterial);
scene.add(cube);
cube.rotation.set(0.4, 0.2, 0);

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();
```

### CSS

```css
body {
  margin: 0;
  padding: 0;
  font-size: 0;
}
canvas {
  width: 100%;
  height: 100%;
}
```

### Результат

Заключение
----------

This article has taught the very basics of shaders. Our example doesn't do much but there are many more cool things you can do with shaders — check out some really cool ones on ShaderToy for inspiration and to learn from their sources.

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

* Изучение WebGL — for general WebGL knowledge
* WebGL шейдеры и GLSL основы — for GLSL specific information


Head (Заголовок) - Глоссарий MDN Web Docs: определения веб-терминов

Head (Заголовок)
================

**Head** (**Заголовок**) это часть HTML документа, которая содержит метаданные о документе, такие как автор, описание, ссылки на CSS или JavaScript файлы, которые должны быть применены в HTML.

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

* Документация элемента `<head>` на MDN
* Тег <head> в учебнике по HTML от MDN


Агент пользователя - Глоссарий MDN Web Docs: определения веб-терминов

Агент пользователя
==================

**Пользовательский агент** (*user agent*, UA), или **агент пользователя**, это компьютерная программа, представляющая пользователя и выполняющая действия от его лица, например, браузер в контексте Всемирной паутины.

Агентом пользователя может быть не только браузер, но и бот, удаляющий веб-страницы, менеджер закачек или другое приложение, использующее Веб. Выполняя запросы к серверу, браузеры, чтобы была возможность их идентифицировать, снабжают каждый запрос так называемой строкой пользовательского агента (UA-строкой), завёрнутой в HTTP-заголовок `User-Agent`. Это строка идентифицирует браузер, сообщает номер его версии и информацию об операционной системе.

Спам-боты, менеджеры закачек и некоторые браузеры нередко шлют подложные UA-строки, чтобы выдать себя за другие клиенты. Эта ситуация известна под названием *подмена или подделка пользовательского агента* (*user agent spoofing*).

Строчку пользовательского агента можно прочитать на стороне клиента с помощью JavaScript, обратившись к свойству `navigator.userAgent.`

Типичная UA-строка выглядит так: `"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0"`.

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

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

* User agent на Википедии
### Техническая справка

* User agent заголовок запроса в спецификации RFC 2616


Прогрессивные веб приложения - Глоссарий MDN Web Docs: определения веб-терминов

Прогрессивные веб приложения
============================

Прогрессивные веб-приложения — это термин, используемый для описания современного состояния разработки веб-приложений. Включает в себя использование стандартов веб-сайтов/приложений, которые используют все лучшие части Интернета, такие как возможность обнаружения поисковыми системами, возможность ссылки через URL работу с различными форм-факторами, и их усиление с современными API-интерфейсами (такими как Service Workers и Push) и функциями, которые предоставляют другие преимущества, обычно присущие нативным приложениям.

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

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

* App Center MDN
* Progressive web apps на Google Developers


Viewport - Глоссарий MDN Web Docs: определения веб-терминов

Viewport
========

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

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

Meta-тег **viewport** сообщает браузеру о том, как именно обрабатывать размеры страницы, и изменять её масштаб. Этот тег необходимо добавлять в секцию HEAD.

**Пример**:

```html
<meta name="viewport" content="width=device-width, initial-scale=1" />
```

### Атрибуты метатега viewport

Meta-тег **viewport** может иметь следующие атрибуты, указанные через запятую (`,`):

**width** – ширина области просмотра.

Значением атрибута является целое неотрицательное число от **200** до **10000** пикселей или константа **device-width**, которая задаёт ширину страницы в соответствии с размером экрана.

Если значение не задано, по умолчанию устанавливается – в мобильном Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.

>
> **Примечание**: для сайтов с адаптивным дизайном рекомендуется использовать: `width=device-width`.
>
>
>

**height** – высота области просмотра.

Значением атрибута является целое неотрицательное число от **233** до **10000** пикселей или константа **device-height**, которая задаёт высоту страницы в соответствии с размером экрана.

>
> **Примечание**: если указан атрибут **width**, указывать атрибут **height** не обязательно.
>
>
>

**initial-scale** – начальный масштаб страницы.

Значением атрибута является вещественное число от **0.1** до **1.0**. Значение **1.0** определяет масштаб **1:1**, т.е. «не масштабировать».

>
> **Примечание**: в некоторых операционных системах (iOS, Windows Phone и т.д.) ширина страницы, при повороте, остаётся неизменной. Вместо перераспределения контента выполняется его масштабирование. Поэтому рекомендуется использовать: **initial-scale=1.0**.
>
>
>

**user-scalable** – доступность масштабирования страницы пользователем.

Значение атрибута является логическое «**yes**» (`1`) – можно масштабировать или «**no**» (`0`)– нельзя масштабировать.

>
> **Примечание**: рекомендуется использовать значение «**yes**» , а т.к. оно установлено по умолчанию, то **user-scalable** можно и не указывать.
>
>
>

**minimum-scale** – минимальный масштаб области просмотра.

Значением атрибута является вещественное число от **0.1** до **1.0**. В мобильном браузере Safari по умолчанию 0.25. Значение **1.0** определяет масштаб **1:1**, т.е. «не масштабировать».

**maximum-scale** – максимальный масштаб области просмотра.

Значением атрибута является вещественное число от **0.1** до **1.0** . В мобильном браузере Safari по умолчанию 1.6. Значение **1.0** определяет масштаб **1:1**, т.е. «не масштабировать».

>
> **Примечание**: избегайте атрибутов **user-scalable**, **minimum-scale** и **maximum-scale**, т.к. они отрицательно сказываются на доступности содержания.
>
>
>

Дополнительные и полезные метатеги
----------------------------------

Meta-тег **HandheldFriendly** определяет оптимизирована ли страница сайта под мобильные устройства на Palm и Blackberry, в таком браузере как AvantGo. Сейчас распознаётся и многими другими мобильными браузерами.

**Пример**:

```html
<meta name="HandheldFriendly" content="true" />
```

Meta-тег **MobileOptimized** (http://goo.gl/ZpLjZz) задаёт ширину области просмотра в мобильных браузеров IE Mobile или Pocket IE. Является аналогом атрибута **width** в meta-теге **viewport**.

**Пример**:

```html
<!-- фиксированная ширина в 320 пикселей -->
<meta name="MobileOptimized" content="320" />
<!-- ширина страницы в соответствии с размером экрана, аналог device-width -->
<meta name="MobileOptimized" content="width" />
```

Meta-тег **apple-mobile-web-app-capable** (http://goo.gl/VGDYQC) позволяет странице работать в полноэкранном режиме, актуален для мобильных устройств Apple.

**Пример**:

```html
<meta name="apple-mobile-web-app-capable" content="yes" />
```

Рекомендованный набор метатегов
-------------------------------

Используемый мной набор meta-тегов для сайтов с адаптивным дизайном, заточенным под мобильные устройства:

```html
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta content="true" name="HandheldFriendly" />
<meta content="width" name="MobileOptimized" />
<meta content="yes" name="apple-mobile-web-app-capable" />
```

Читать больше
-------------

### General Knowledge

* meta viewport. Как он работает?
* Viewport на Wikipedia
* What is viewport in HTML on Stackoverflow
* Get viewport/window size (width and height) with javascript
* A tale of two viewports (Quirksmode)
*


WHATWG - Глоссарий MDN Web Docs: определения веб-терминов

WHATWG
======

WHATWG (*Рабочая группа по вебу, гипертексту, приложениям и технологиям*) (*англ. Web Hypertext Application Technology Working Group*) сообщество, которое поддерживает и разрабатывает веб стандарты, включая DOM, Fetch и HTML. Сотрудники Apple, Mozilla и Opera основали WHATWG в 2004.

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

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

* Сайт WHATWG


Global object - Глоссарий MDN Web Docs: определения веб-терминов

Global object
=============

Глобальный объект - это объект, который всегда существует в глобальной области видимости (en-US).

В JavaScript всегда определён глобальный объект. В веб-браузере, когда скрипты создают глобальные переменные, они создаются как свойства глобального объекта. (В Node.js это не так.) Interface глобального объекта зависит от контекста, в котором выполняется скрипт.К примеру:

* В веб-браузере любой код, который не запускается скриптом явно как фоновую задачу, имеет `Window` в качестве своего глобального объекта. Это покрывает большую часть JavaScript-кода в сети.
* Код, работающий в `Worker` имеет `WorkerGlobalScope` (en-US) объект в качестве своего глобального объекта.
* Скрипты, работающие в Node.js имеют объект, который называется `global` в качестве своего глобального объекта.
Объект `window` в Браузере
--------------------------

Объект `window` - Глобальный Объект в браузере. Доступ к любым Глобальным Переменным или функциям может быть получен как к *свойствам* объекта `window`.

### Получение доступа к Глобальным Переменным

```js
var foo = "foobar";
foo === window.foo; // Возвращает: true
```

После определения Глобальной Переменной `foo`, мы можем получить доступ к его значению прямо с объекта `window`, использую имя переменной `foo` в качестве имени свойства Глобального Объекта `window.foo`.

#### Объяснение

Глобальная Переменная `foo` была сохранена в объекте `window`, подобно следующему примеру:

```js
foo: "foobar";
```

### Получение доступа к Глобальным Функциям

```js
function greeting() {
  console.log("Hi!");
}

window.greeting(); // Тоже самое что и обычный вызов: greeting();
```

Пример выше показывает как Глобальные Функции хранятся в качестве свойств объекта `window`. Мы создали Глобальную Функцию `greeting` и вызвали её с помощью объекта `window`.

#### Объяснение

Глобальная функция `greeting` была сохранена в объекте `window`, подобно следующему примеру:

```js
greeting: function greeting() {
  console.log("Hi!");
}
```

* MDN Web Docs Glossary
    + global scope (en-US)
    + object
* `Window`
* `WorkerGlobalScope` (en-US)
* `global`


MathML - Глоссарий MDN Web Docs: определения веб-терминов

MathML
======

**MathML** (XML приложение) - это открытый стандарт для представления математических выражений на веб-страницах. В 1998 году W3C впервые рекомендовал MathML для представления математических выражений в browser. MathML имеет и другие применения, включающие научный контент и синтез голоса.


Кривая Безье - Глоссарий MDN Web Docs: определения веб-терминов

Кривая Безье
============

**Кривая Безье** — это математически описанная кривая, используемая в компьютерной графике и анимации. В vector images они используются для создания плавных кривых, которые можно бесконечно сильно масштабировать.

Кривая описывается массивом контрольных точек, которых должно быть, как минимум, две. В веб-графике и анимациях используются кривые Безье с 4 контрольными точками P0, P1, P2 и P3.

Для того чтобы нарисовать кривую, необходимо нарисовать две воображаемые линии, одна из которых будет иметь координаты P0 и P1, а другая — P1 и P2. Затем крайние точки этих линий начинают непрерывно двигаться к следующим точкам. Третья воображаемая линия рисуется с начальной точкой, непрерывно двигающейся по первой линии, и конечной точкой, двигающейся по второй линии. На этой воображаемой линии рисуется точка, постепенно движущаяся от начала линии до самого конца. Кривая, которую эта точка будет описывать называется кривая Безье. Ниже приведена анимация, демонстрирующая процесс создания кривой:

![Drawing a Bézier curve](https://upload.wikimedia.org/wikipedia/commons/d/db/B%C3%A9zier_3_big.gif)

Подробнее
---------

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

* Кривая Безье на Wikipedia
### Подробнее по теме

* Кубические временные функции Безье в CSS (en-US)
* `keySplines (en-US)` SVG attribute
* Генератор кубических кривых Безье


Запрещённое имя заголовка ответа - Глоссарий MDN Web Docs: определения веб-терминов

Запрещённое имя заголовка ответа
================================

Запрещённое имя заголовка ответа это имя HTTP заголовка (`Set-Cookie` или `Set-Cookie2`), который не может быть изменён программно.

See also
--------

* Fetch specification: forbidden response-header name
* Forbidden header name (Glossary)


XHR (XMLHttpRequest) - Глоссарий MDN Web Docs: определения веб-терминов

XHR (XMLHttpRequest)
====================

`XMLHttpRequest` (XHR) это JavaScript API для создания AJAX запросов. Методы этого объекта предоставляют возможность отправки сетевых запросов между browser и server (en-US).

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

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

* Полезная информация о XMLHttpRequest
* Разница между синхронной и асинхронной передачи сообщений
### Техническая информация

* Объект `XMLHttpRequest`
* документация MDN о том, как использовать XMLHttpRequest


Регулярные выражения - Глоссарий MDN Web Docs: определения веб-терминов

Регулярные выражения
====================

**Регулярные выражения** (*regex*) - это правила, определяющие, какие последовательности символов появляются в поиске.

Регулярные выражения реализованы в разных языках, но наиболее известной является реализация в Perl, которая породила собственную экосистему реализаций, называемых PCRE (*Perl Compatible Regular Expression*). В Интернете JavaScript предоставляет ещё одну реализацию регулярных выражений через объект `RegExp`.

Материалы для изучения
----------------------

### Общие

* Интерактивный учебник
* Визуализированное Регулярное Выражение
### Технические

* Написание регулярных выражений в JavaScript


Метаданные - Глоссарий MDN Web Docs: определения веб-терминов

Метаданные
==========

**Метаданные** - это, в самом простом определении, данные, что описывают данные. Например, HTML-документ - это данные, но HTML также может содержать метаданные в элементе `<head>`, который описывает документ, например кто его написал и его резюме.

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

### Метаданные в HTML

* Элемент `<meta>` в MDN


Time to interactive - Глоссарий MDN Web Docs: определения веб-терминов

Time to interactive
===================

**Время до интерактивности** (англ. Time to Interactive, TTI) - это нестандартизированная метрика веб-производительности, которая определяется как момент времени, когда завершилась последняя долгая задача (en-US), после которой следовало 5 секунд бездействия сети и основного потока.

TTI, предложенный WICG в 2018 году, был предназначен для предоставления показателя, описывающей состояние, когда страница или приложение содержит полезный контент, а основной поток простаивает и может свободно реагировать на взаимодействия с пользователем, включая регистрацию обработчиков событий.

#### Предостережение

TTI получается путём использования информации из `Long Tasks API` (en-US). Несмотря на то, что TTI доступен в некоторых инструментах мониторинга производительности, на момент написания этой статьи он не является частью какой-либо официальной веб-спецификации.

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

* Definition of TTI from Web Incubator Community Group
* Time to Interactive — focusing on human-centric metrics by Radimir Bitsov
* Tracking TTI


WebKit - Глоссарий MDN Web Docs: определения веб-терминов

WebKit
======

*WebKit* это фреймворк который показывает правильно отформатированные веб-страницы на основе их разметки. Apple Safari и большинство мобильных браузеров зависят от Webkit (Webkit это очень портативный и легко настраиваемый фреймворк).

WebKit начал жизнь как разветвление библиотек **KDE's KHTML** и **KJS**, и с тех пор много частных лиц и компаний внесли свой вклад в его развитие (включая: KDE, Apple, Google, и Nokia).

WebKit это торговая марка Apple, а сам фреймворк раздаётся под BSD-образной лицензией. Однако, 2 важных компонента попадают под лицензию LGPL (en-US): это **WebCore** - визуальная библиотека и движок **JavaScriptCore**.

Читайте также
-------------

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

* WebKit CSS extensions (en-US)


JPEG - Глоссарий MDN Web Docs: определения веб-терминов

JPEG
====

**JPEG** (произносится «*джейпег*», англ.. Joint Photographic Experts Group, по названию организации-разработчика) — является широко используемым методом сжатия с потерями данных для цифровых изображений.


Apple Safari - Глоссарий MDN Web Docs: определения веб-терминов

Apple Safari
============

Safari (Сафари) - это веб-браузер разработанный компанией Apple, входит в состав операционных систем macOS и iOS. Safari работает на движке WebKit.

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

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

* Safari на сайте apple.com
### Техническая информация

* Проект WebKit
* WebKit ночная сборка
* Сообщить об ошибке в Safari


Объект - Глоссарий MDN Web Docs: определения веб-терминов

Объект
======

Объект относится к структуре данных, содержит в себе данные и инструкции по работе с ними. Объекты могут обозначать реальные вещи, например: машину, яблоко, человека или даже карту к сокровищам с её координатами и инструкциями о том, как добраться до этих сокровищ.

JavaScript, Java, C++, Python, и Ruby это языки программирования которые относятся к объектно ориентированным языкам (ООП)

Подробнее
---------

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

* `Object` в справочнике JavaScript
* Object data structures in JavaScript


Главная ось - Глоссарий MDN Web Docs: определения веб-терминов

Главная ось
===========

Главная ось в flexbox определяется направлением, установленным в свойстве `flex-direction`. Это свойство может принимать одно из четырёх значений:

* `row`
* `row-reverse`
* `column`
* `column-reverse`

Если вы выберите `row` или `row-reverse`, то главная ось будет проходить вдоль направления строк.

![In this image the flex-direction is row which forms the main axis](/ru/docs/Glossary/Main_Axis/basics1.png)

Выберите `column` или `column-reverse`, и главная ось будет проходить сверху вниз в направлении блоков.

![](/ru/docs/Glossary/Main_Axis/basics2.png)

На главной оси вы можете контролировать размеры flex элементов, добавляя к ним свободное пространство с помощью свойства `flex` на самих элементах. Также, вы можете контролировать пространство между и вокруг элементов свойством `justify-content`.

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

### Связанные свойства

* `flex-basis`
* `flex-direction`
* `flex-grow`
* `flex-shrink`
* `justify-content`
* `flex`
### Дальнейшее чтение

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Aligning items in a flex container*
* CSS Flexbox Guide: *Controlling Ratios of flex items along the main axis (en-US)*


Высокоуровневый язык программирования - Глоссарий MDN Web Docs: определения веб-терминов

Высокоуровневый язык программирования
=====================================

Высокоуровневый язык программирования имеет **существенную абстракцию** от деталей работы компьютера. Он предназначен для простого понимания людьми и поэтому должен быть переведён другим программным обеспечением. В отличие от низкоуровневых языков программирования, он может использовать элементы естественного языка или может автоматизировать (или даже полностью скрыть) важные области вычислительных систем, делая процесс разработки более простым и более понятным по сравнению с языком более низкого уровня. Количество предоставляемой абстракции определяет, насколько "высокоуровневым является" язык программирования.

Идея языка, автоматически переводимого в машинный код, но ближе к человеческой логике, была внедрена в компьютерные науки в 1950-х годах, особенно благодаря работе Джона Бэкуса (IBM), который руководил командой разработавшей первый высокоуровневый язык программирования: Фортран. За это нововведение Бэкус был удостоен премии Тьюринга.


Функции первого класса - Глоссарий MDN Web Docs: определения веб-терминов

Функции первого класса
======================

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

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

### Присвоение функции в качестве значения переменной

```js
const foo = () => {
  console.log("foobar");
};

// Вызов функции с использованием переменной
foo(); // Выведет в консоль строку "foobar"
```

Мы присвоили *анонимную функцию* переменной, а затем использовали эту переменную для вызова функции, добавив круглые скобки `()` в конце.

**Примечание:** Даже если у вашей функции было имя, вы можете использовать имя переменной для её вызова. Именование функции будет полезно при отладке кода, *но это не повлияет на то, как мы её вызываем*.

### Передача функции в качестве аргумента

```js
function sayHello() {
  return "Привет, ";
}

function greeting(helloMessage, name) {
  console.log(helloMessage() + name);
}

// Передача функции `sayHello` в качестве аргумента функции `greeting`
greeting(sayHello, "JavaScript!"); // Выведет в консоль строку "Привет, JavaScript!"
```

Мы передали нашу функцию `sayHello()` в качестве аргумента функции `greeting()`, это показывает, что функцию можно рассматривать в качестве значения.

**Примечание:** Функция, которую передают в качестве значения другой функции (в данном примере `sayHello()`), называется *колбэк-функцией*.

### Возвращение функции

```js
function sayHello() {
  return () => {
    console.log("Привет!");
  };
}

// Вызов анонимной функции, которую возвращает функция `sayHello`. Обратите внимание на повторяющиеся два раза круглые скобки
sayHello()(); // Выведет в консоль строку "Привет!"
```

В этом примере мы возвращаем функцию из другой функции, это возможно, потому что *функции в JavaScript могут быть значениями.*

**Примечание:** Функция, которая возвращает функцию или принимает другие функции в качестве аргументов, называется *функцией высшего порядка*.

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

* Функции первого класса на Википедии
* Глоссарий
    + Переменная
    + Функция
    + Колбэк-функция


ARPANET - Глоссарий MDN Web Docs: определения веб-терминов

ARPANET
=======

Компьютерная сеть **ARPANET** (Advanced Research Projects Agency NETwork) является одной из первых компьютерных сетей, была создана в 1969 как надёжная среда для передачи конфиденциальных военных данных и для подключения ведущих исследовательских групп по всей территории Соединённых Штатов. Изначально ARPANET использовала NCP (Network Control Protocol - протокол сетевого управления), а затем первую версию интернет-протокола или пакета TCP / IP, что делает ARPANET выдающейся частью зарождающегося Интернета. ARPANET была закрыта в начале 1990 года.


First paint - Глоссарий MDN Web Docs: определения веб-терминов

First paint
===========

**Первое отображение** - время между переходом на страницу и моментом, когда браузер отображает первые пиксели на экране. Является частью Paint Timing API.

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

* First meaningful paint
* First contentful paint
* Paint Timing API


Контекст приложения - Глоссарий MDN Web Docs: определения веб-терминов

Контекст приложения
===================

Контекст приложения - это контекст просмотра верхнего уровня, к которому применяется манифест.

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

Обратите внимание, что начальный URL-адрес не обязательно является значением элемента start\_url: пользователь или агент пользователя мог изменить его при добавлении приложения на главный экран или в закладки.


XHTML - Глоссарий MDN Web Docs: определения веб-терминов

XHTML
=====

**XHTML** по отношению к XML - это так же, как HTML по отношению к SGML. Таким образом, XHTML - язык разметки который подобен HTML, но с более строгим синтаксисом. Две версии XHTML были закончены (окончательно сформулированы) W3C:

* XHTML 1.0 - это HTML4 повторно сформулированный как XML-приложение , и с обратной совместимостью с HTML в ограниченных случаях.
* XHTML 1.1 - это модульная версия XHTML, которая не является обратно совместимой с HTML.

Третья версия, XHTML 2 - содержит существенные изменения словаря элементов (has significant changes to the element vocabulary).

Для получения дополнительной информации о XHTML, см.:

* Wikipedia's XHTML article
* Sending XHTML as text/html considered harmful
### Инструменты

* Markup validation service (W3C)
* Standards-Compliant Authoring Tools
### Смотрите также

* HTML
* Namespaces


Git - Глоссарий MDN Web Docs: определения веб-терминов

Git
===

**Git** — это свободная с открытым исходным кодом распределённая *система управления версиями* (от англ. Source Code Management (SCM (en-US)). Она облегчает написание кода с использованием распределённых команд разработчиков. Её отличие от предшествующих систем управления версиями — способность выполнять общие операции (ветвление, фиксация изменений, и т.д.) на вашем локальном компьютере, без необходимости изменять главный репозиторий или даже не имея прав на запись в него.

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

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

* Официальный веб-сайт документации
* GitHub, графический хостинг для гит проектов


Compile - Глоссарий MDN Web Docs: определения веб-терминов

Compile
=======

Компиляция - это процесс преобразования компьютерной программы, написанной на данном языке, в эквивалентную программу на другом языке. Компилятор - это программа для выполнения этой задачи. Иногда эту задачу называют также "assembling" или "build", что, как правило, свидетельствует о том, что выполняется не только компиляция, например, упаковка в двоичном формате.

Обычно компилятор преобразует язык более высокого уровня, такой как C или Java который понимает человек, в машинный язык, такой как ассемблер, который понимает процессор. Некоторые компиляторы, которые переводят между языками схожего уровня, называются транспайлерами или кросс-компиляторами, например, для компиляции с TypeScript на JavaScript. Они считаются инструментами производительности.

 Большинство компиляторов работают либо перед исполнением (AOT), либо во время исполнения (JIT). Как программист, вы обычно вызываете AOT-компиляторы из командной строки или из IDE (en-US). Самый известный "gcc" - это один из примеров.
 JIT компиляторы обычно прозрачны для вас и используются для повышения производительности. Например, в браузере: Firefox' SpiderMonkey JavaScript Engine имеет встроенный JIT, который скомпилирует JavaScript на сайте в машинный код, пока вы его просматриваете, чтобы он работал быстрее. Такие проекты, как WebAssembly, работают над тем, чтобы сделать это ещё лучше.

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

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

* Компилятор - Wikipedia
* The GNU Compiler Collection (GCC)
### Обучающие ресурсы

* Введение в компиляторы
* Большой список учебных материалов на StackOverflow


CSP - Глоссарий MDN Web Docs: определения веб-терминов

CSP
===

CSP (Политика безопасности контента) используется для обнаружения и смягчения определённых типов атак, связанных с веб-сайтами, таких как XSS (en-US) и инъекции данных.

Реализация основана на заголовке HTTP с именем `Content-Security-Policy` (en-US).

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

### Техническая информация

* Content Security Policy на MDN


Browsing context - Глоссарий MDN Web Docs: определения веб-терминов

Browsing context
================

**Browsing context** (контекст просмотра) - это окружение, в котором браузер отображает `Document` (на сегодняшний день обычно это вкладки, однако, возможно окно или frame внутри страницы).

Каждый контекст просмотра имеет определённый источник, источник текущего активного документа и историю, которая содержит все отображённые документы в соответствующем порядке.

Взаимодействие между контекстами просмотра очень ограничено. Между контекстами просмотра из одного источника может быть открыт и использован `BroadcastChannel`.

Learn more
----------

### Техническая документация

* Browsing context на WHATWG
* Browsing context на W3C


Порт - Глоссарий MDN Web Docs: определения веб-терминов

Порт
====

Для подключённого к сети компьютера с IP address, **порт** – это конечная точка входа для коммуникаций. Порты обозначаются числами, и до 1024 каждому порту по умолчанию назначен некоторый протокол.

Например, порт по умолчанию для протокола HTTP – 80, а порт для протокола HTTPS – 443, таким образом HTTP-сервер ожидает входящие запросы на данных портах. Каждый интернет протокол имеет порт по умолчанию: SMTP (en-US) (25), POP3 (en-US) (110), IMAP (en-US) (143), IRC (en-US) (194) и так далее.


Структура данных - Глоссарий MDN Web Docs: определения веб-терминов

Структура данных
================

**Структура данных** (data structure) — способ представления множества данных как связного целого, имеющего определённый программный интерфейс (методы доступа и манипулирования над элементами этих данных).


Блок - Глоссарий MDN Web Docs: определения веб-терминов

Блок
====

Термин **блок** в зависимости от контекста имеет несколько значений:

Блок (CSS)
**Блок** на Веб-странице это HTML element, который начинается с новой строки, т.е. под предыдущим элементом и над следующим (обычно называется *блочным элементом*). Например, `p` по умолчанию блочный элемент, в то время как `a` — *строчной элемент*: можно разместить несколько ссылок (одну за другой) в вашем HTML-коде и они все будут выводиться на одной и той же строке.
Блок (скриптинг)
В JavaScript блок это набор связанных statement заключённых в скобки `{}`. Например, можно поместить блок инструкций после блока `Statements/if...else`, чтобы интерпретатор выполнял код в блоке, если условие имеет значение true, или пропускал целый блок, если значение условия false.


Expando - Глоссарий MDN Web Docs: определения веб-терминов

Expando
=======

Expando-свойства — это свойства, добавленные в узлы DOM с помощью JavaScript, когда эти свойства не являются частью DOM-спецификации объекта:

```js
window.document.foo = 5; // foo — это expando
```

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


Boolean (Булев, Логический тип данных) - Глоссарий MDN Web Docs: определения веб-терминов

Boolean (Булев, Логический тип данных)
======================================

**Boolean (Булев, Логический тип данных)** — примитивный тип данных в информатике, которые могут принимать два возможных значения, иногда называемых истиной (`true`) и ложью (`false`). Например, в JavaScript Булевы состояния часто используются для того, чтобы определить какие части кода выполнять (например, в операторах if) или повторять (например, циклы for).

Ниже приведён некоторый псевдокод JavaScript (это не действительно исполняемый код), демонстрирующий эту концепцию.

Пример использования оператора `if`:
```

if (условие) {
    блок кода, выполняемый если условие возвращает true
} else {
    блок кода, выполняемый если условие возвращает false
}
```

К примеру:

```js
if (hour < 18) {
  greeting = "Добрый день";
} else {
  greeting = "Добрый вечер";
}
```

Пример использования логического условия в цикле `for`:
```

for (начало; условие; шаг) {
    // ... тело цикла ...
}
```

К примеру:

```js
for (let i = 0; i < 3; i++) {
  alert(i);
}
```

Булевы значения названы в честь английского математика Джорджа Буля, который был первопроходцем в области математической логики.

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

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

* Глобальный объект JavaScript: `Boolean`
* Типы данных JavaScript и структуры данных


Заголовок сущности - Глоссарий MDN Web Docs: определения веб-терминов

Заголовок сущности
==================

Заголовок сущности - это HTTP header (en-US), описывающий содержимое тела сообщения. Заголовки сущности используются в HTTP-запросах и ответах. Заголовки, такие как `Content-Length`, `Content-Language`, `Content-Encoding` являются заголовками сущности.

Даже если заголовки сущности не являются заголовками запросов или ответов, они часто включаются в эти понятия.

В следующем примере, `Content-Length` - это заголовок сущности, в то время как `Host` и `User-Agent` представляют собой заголовок запроса:
```

POST /myform.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Content-Length: 128
```

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

### Технические знания

* Список всех HTTP заголовков


Грязный режим - Глоссарий MDN Web Docs: определения веб-терминов

Грязный режим
=============

ECMAScript 5 и более поздние версии выполняют скрипты в Строгом режиме, который определённым образом изменяет семантику JavaScript для улучшения стабильности, и который упрощает понимание того, что происходит в программе при возникновении проблем.

Обычный, нестрогий, режим выполнения JavaScript иногда называется **Грязным режимом** (Sloppy mode). Это неофициальное название, но вы, вероятно, сталкивались с ним при серьёзной разработке на JavaScript.

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

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

* "Strict Mode" в части 7 ("Синтаксис JavaScript")в книге Speaking *JavaScript*.


SEO - Глоссарий MDN Web Docs: определения веб-терминов

SEO
===

**SEO** (Search Engine Optimization) Поисковая оптимизация - это комплекс мер по оптимизации, для поднятия сайта в рейтингах поисковых систем. Её ещё называют "Повышением поискового рейтинга"

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

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

Методы SEO делятся на три объёмных класса:

технический

Создание тегов контента, используя семантику HTML. Сканируя сайт, алгоритмы поиска находят только тот контент, который вы хотите проиндексировать.

копирайтинг

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

популяризация

Вы можете значительно увеличить поток трафика, если ссылки на ваш сайт будут размещены на других развитых ресурсах.

Изучить больше
--------------

### Основной источник

* Поисковая оптимизация На Википедии
### Learn SEO

* Google Webmaster Central


ICANN - Глоссарий MDN Web Docs: определения веб-терминов

ICANN
=====

**ICANN** (Internet Corporation of Assigned Names and Numbers) является международной некоммерческой организацией, которая поддерживает domain name system и запись IP addresses.

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

* Official website


Пересчёт (Reflow) - Глоссарий MDN Web Docs: определения веб-терминов

Пересчёт (Reflow)
=================

**Пересчёт** (*Reflow*) происходит, когда браузер должен снова обработать и отрисовать часть или всю веб-страницу, например, после изменения размера какого-нибудь блока или изменения его позиции на интерактивном сайте.

Learn more
----------

* Google article "Minimizing browser reflow"


Canvas - Глоссарий MDN Web Docs: определения веб-терминов

Canvas
======

HTML *`<canvas>`* (англ. **canvas** — «холст», рус. **канва́с**) элемент предоставляет пустую графическую зону, на которой специальные JavaScript API могут рисовать (такие как Canvas 2D или WebGL (en-US)).

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

### Обучающие ресурсы

* Руководство по Canvas в MDN
### Техническая информация

* HTML-элемент `<canvas>` в MDN
* Canvas общая документация в MDN
* `CanvasRenderingContext2D`: Canvas 2D API для рисования
* Canvas 2D API спецификация


Grid - Глоссарий MDN Web Docs: определения веб-терминов

Grid
====

*CSS Гриды (они же сетки или CSS Grid)* устанавливаются с помощью значения `grid` в свойстве `display`; вы можете определить колонки и строки в сетке с помощью свойств `grid-template-columns` и `grid-template-rows` соответственно.

Сетка, которую вы создаёте, используя эти свойства, является явной сеткой.

If you place content outside of this explicit grid, or if you are relying on auto-placement and the grid algorithm needs to create additional row or column tracks (en-US) to hold grid items, then extra tracks will be created in the implicit grid. The *implicit grid* is the grid created automatically due to content being added outside of the tracks defined.

В примере ниже отображена *точная сетка* из трёх колонок и двух рядов. The *third* row on the grid is an *implicit grid* row track, formed due to their being more than the six items which fill the explicit tracks.

Пример
------
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>
```

Дополнительные материалы
------------------------

### Руководство по свойствам

* `grid-template-columns`
* `grid-template-rows`
* `grid`
* `grid-template`
### Что почитать ещё

* Руководство по CSS Grid: *Базовые принципы CSS сеток*


DOM - Глоссарий MDN Web Docs: определения веб-терминов

DOM
===

DOM (Document Object Model) это API который представляет и взаимодействует со всеми HTML или XML документами. DOM это модель документа загруженная в браузер и представляющая документ как дерево, где каждый узел представляет часть документа (например элемент, строка текста, или комментарий).

DOM это самый используемый API в Web потому, что он даёт коду запущенному в браузере доступ и взаимодействие с каждым узлом в документе. Узлы могут быть созданы, перемещены и изменены. Обработчики событий могут быть добавлены к узлам и срабатывают при наступлении данного события.

DOM не был определён изначально — он пришёл когда браузеры начали реализовывать поддержку JavaScript. Этот унаследованный DOM иногда называют DOM 0. Сегодня, W3C руководит процессом спецификации DOM, и DOM Working Group в настоящее время подготавливают 4-ую версию.

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

### Техническая информация

* Документация DOM на MDN (en-US)
* Различные спецификации DOM на сайте W3C


Host - Глоссарий MDN Web Docs: определения веб-терминов

Host
====

Хост - это устройство, подключённое к Интернету (или локальной сети). Некоторые хосты, называемые серверами (en-US), предлагают дополнительные услуги, такие как обслуживание веб-страниц или хранение файлов и электронных писем.


PHP - Глоссарий MDN Web Docs: определения веб-терминов

PHP
===

PHP, расшифровывающийся как "*PHP: Hypertext Preprocessor*" - «PHP: Препроцессор Гипертекста», является распространённым интерпретируемым языком общего назначения с открытым исходным кодом. PHP создавался специально для ведения web-разработок и код на нем может внедряться непосредственно в HTML-код. Синтаксис языка берёт начало из C, Java и Perl, и является лёгким для изучения. Основной целью PHP является предоставление web-разработчикам возможности быстрого создания динамически генерируемых web-страниц, однако область применения PHP не ограничивается только этим.

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

* Официальная страница PHP
* Официальная страница PHP wiki
* Изучения PHP - Codecademy


HTTPS - Глоссарий MDN Web Docs: определения веб-терминов

HTTPS
=====

**HTTPS** (*HTTP Secure*) является зашифрованной версией HTTP протокола. Обычно он использует SSL (en-US) или TLS для шифрования соединения между клиентом и сервером. Это безопасное соединение позволяет клиентам безопасно обмениваться конфиденциальными данными с сервером, например, для банковских операций или онлайн-покупок.


WAI - Глоссарий MDN Web Docs: определения веб-терминов

WAI
===

*WAI* или *Web Accessibility Initiative* (англ. Инициатива доступности веб-сайтов) — это попытка Консорциума World Wide Web (W3C) улучшить доступность для людей с различными проблемами, которым могут понадобиться нестандартные браузер или устройства.

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

### Базовые знания

* Сайт WAI


Элемент - Глоссарий MDN Web Docs: определения веб-терминов

Элемент
=======

 Элемент - это часть веб-страницы. В XML и HTML элемент может содержать данные, фрагмент текста или изображения, или не содержать ничего. Обычный элемент включает в себя открывающий тэг с некоторыми атрибутами, текст и закрывающий тэг.

 ![Example: in
Hello world!
, '
' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '
' is a closing tag.](/ru/docs/Glossary/Element/anatomy-of-an-html-element.png)

Элементы и тэги это *не* одни и те же вещи. Тэги открывают или закрывают элементы в исходном коде, тогда как элементы являются частью DOM, объектной моделью документа для отображения страницы в браузере.

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

* Интерфейс `Element`, представляющий элемент в DOM.
* Подробнее об элементах.
* Web\_Components/Custom\_Elements (en-US)


chrome - Глоссарий MDN Web Docs: определения веб-терминов

chrome
======

Не путать с Google Chrome (en-US); chrome (хром) — видимые элементы браузера, не относящиеся к веб-страницам (например, панели инструментов, панель меню, вкладки).


Тег - Глоссарий MDN Web Docs: определения веб-терминов

Тег
===

В HTML теги используются для создания элементов. **Имя** HTML-элемента - это **имя** заключённое в угловые скобки, как например <p> для "абзаца". Обратите внимание, что концу **имени** предшествует символ косой черты (слеша), "</p>", и что в пустых элементах закрывающий тег не требуется и не допускается. Если атрибуты не указаны, то для них применяются значения по умолчанию.

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

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

* HTML Теги на W3
### Техническое руководство

* Введение в HTML


Node.js - Глоссарий MDN Web Docs: определения веб-терминов

Node.js
=======

Node.js является межплатформенной средой выполнения, созданной на JavaScript, которая позволяет разработчикам создавать серверные и сетевые приложения с помощью JavaScript.

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

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

* Веб-сайт Node.js
### Техническая информация

* API документация
* Руководство


Инструкция - Глоссарий MDN Web Docs: определения веб-терминов

Инструкция
==========

В компьютерном языке программирования **инструкция** — строка кода, выполняющая задачу. Каждая программа состоит из последовательности инструкций.

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

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

* JavaScript инструкции и объявления


Глобальная переменная - Глоссарий MDN Web Docs: определения веб-терминов

Глобальная переменная
=====================

Глобальная переменная это переменная, которая была объявлена в глобальной области видимости. Иначе говоря, переменная, доступ к которой, можно получить со всех других областей видимости.

В JavaScript это свойство глобального объекта.

Материалы для обучения
----------------------

### Общие

* Глобальная переменная в Википедии


IndexedDB - Глоссарий MDN Web Docs: определения веб-терминов

IndexedDB
=========

IndexedDB это Web API интерфейс, который позволяет хранить большие данные внутри браузера. Также используется индексирование для поддержания высоко-производительного поиска по данным. Подобно SQL (en-US)-основанным RDBMS, IndexedDB это транзакционная система базы данных. Но в отличие от RDBMS, которая для хранения использует таблицы с фиксированными колонками, IndexedDB использует JavaScript объекты.

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

* Описание IndexedDB API на MDN
* The W3C specification for IndexedDB


CSS-селектор - Глоссарий MDN Web Docs: определения веб-терминов

CSS-селектор
============

**CSS-селектор** это часть CSS-правила, которая позволяет вам указать, к какому элементу (элементам) применить стиль. Например:
```

***HTML***
<div> I am inside of a div element. </div>
<p> I am inside of a paragraph element. </p>

***CSS***
div {
 color: green;
}

p {
 color: red;
}
```

В первом CSS-правиле я выбираю элемент div и задаю его стиль (цвет текста — зелёный). Во втором CSS-правиле выбираю элемент p и задаю красный цвет текста. Вот как выглядит результат:

![CSS selector coding results](/ru/docs/Glossary/CSS_Selector/cssselectormdnglossary.jpg)

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

### Основные статьи

1. Базовые селекторы
    1. Селекторы по типу `elementname`
    2. Селекторы по классу `.classname`
    3. Селекторы по ID `#idname`
    4. Универсальные селекторы `* ns|* *|*`
    5. Атрибутивные селекторы `[attr=value]`
    6. Селекторы состояния элементов `a:active, a:visited`
2. Группирующие селекторы
    1. Список селекторов `A, B`
3. Комбинаторы
    1. Adjacent sibling selectors `A + B`
    2. General sibling selectors `A ~ B`
    3. Child selectors `A > B`
    4. Descendant selectors `A B`
4. Псевдо
    1. Псевдоклассы `:`
    2. Псевдоэлементы `::`


API - Глоссарий MDN Web Docs: определения веб-терминов

API
===

API (Application Programming Interface - интерфейс программных приложений) — это установка функций и правил позволяющая взаимодействовать между программным обеспечением, которое предоставляет API и другими программными компонентами. В Веб разработке, под API обычно подразумевают набор стандартных методов, свойств, событий и URL ссылок для взаимодействия с Веб контентом.

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

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

* Интерфейсы веб API


ARIA - Глоссарий MDN Web Docs: определения веб-терминов

ARIA
====

**ARIA** (*Accessible Rich Internet Applications*) является W3C спецификацией для добавления семантики и других метаданных в HTML при использовании вспомогательных технологий.

Например, вы можете добавить атрибут `role="alert"` в тег `<p>`, чтобы оповестить пользователя о том, что информация является важной и зависимой от времени (иначе вы могли бы передать это через цвет текста).

Материалы для изучения
----------------------

* ARIA


Кодировка символов - Глоссарий MDN Web Docs: определения веб-терминов

Кодировка символов
==================

Кодировка определяет связность между байтами и текстом. Последовательность байтов допускает различные текстовые интерпретации. Указывая конкретную кодировку (например, UTF-8), мы указываем, как следует интерпретировать последовательность байтов.

Например, в HTML мы обычно указываем кодировку символов UTF-8, используя следующую строку:

```html
<meta charset="utf-8" />
```

Это гарантирует, что вы можете использовать символы практически любого человеческого языка в вашем HTML-документе, и они будут отображаться надёжно.

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

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

* Кодировка символов на W3C


Doctype - Глоссарий MDN Web Docs: определения веб-терминов

Doctype
=======

В HTML объявление типа документа тегом "`<!DOCTYPE html>`" - обязательная преамбула, расположенная в верхней части документа. Единственное предназначение тега - не допустить переключение браузера в так называемый режим совместимости ("quirks mode") во время рендеринга документа; то есть, тег "`<!DOCTYPE html>`" гарантирует, что браузер с максимальными усилиями будет следовать соответствующей спецификации, а не использовать другой тип рендеринга, несовместимый с некоторыми спецификациями.

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

### Основная информация

* Definition of the DOCTYPE in the HTML specification
* Quirks Mode and Standards Mode
### Техническая документация

* Document.doctype, a JavaScript method that returns the doctype


Scroll-контейнер - Глоссарий MDN Web Docs: определения веб-терминов

Scroll-контейнер
================

**Scroll-контейнер** создаётся путём применения к элементу свойства `overflow: scroll` или `overflow: auto`, при условии, что содержимого достаточно много для появления переполнения.

Scroll-контейнер позволяет пользователю с помощью прокрутки достигать участков переполняющего содержимого, которые в ином случае были бы обрезаны и поэтому недоступны для просмотра. Видимая часть scroll-контейнера называется scrollport (en-US).

* MDN Web Docs Glossary:
    + Scroll container
    + Scrollport (en-US)
* Related CSS Properties:
    + `overflow`


Алгоритм - Глоссарий MDN Web Docs: определения веб-терминов

Алгоритм
========

Алгоритм — это независимая серия инструкций для выполнения функции.

Другими словами, алгоритм — это средство описания способа решения проблемы, чтобы её можно было многократно решать с помощью людей или машин. Учёные сравнивают эффективность алгоритмов с помощью понятия «Алгоритмическая Сложность» или «Big O» нотация.

Например:

* Рецепт приготовления — это простой алгоритм для людей.
* Алгоритм сортировки часто используется в программировании, чтобы объяснить компьютеру, как сортировать данные.

Распространёнными алгоритмами являются алгоритмы поиска пути, такие как задача коммивояжёра, алгоритмы обхода дерева и так далее.

Существуют также алгоритмы машинного обучения, такие как линейная регрессия, логистическая регрессия, дерево решений, случайный лес, машина опорных векторов, рекуррентная нейронная сеть (РНС), долгая краткосрочная память (LSTM), свёрточная нейронная сеть (CNN), глубокая свёрточная нейронная сеть и так далее.

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

### Технические материалы

* Пояснения к алгоритмам сортировки
* Пояснения алгоритмической сложности


BiDi - Глоссарий MDN Web Docs: определения веб-терминов

BiDi
====

**BiDi** (BiDirectional) относится к документу, содержащему текст справа налево и слева направо. Даже когда оба направления встречаются в одном и том же абзаце, текст на каждом языке должен отображаться в правильной направленности.

Подробности
-----------

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

* Разработка Bidi приложений


Прототип - Глоссарий MDN Web Docs: определения веб-терминов

Прототип
========

Прототип — модель, отображающая внешний вид и поведение приложения или продукта в начале цикла разработки.

См. в разделе Наследование и цепочка прототипов


Частота кадров (FPS) - Глоссарий MDN Web Docs: определения веб-терминов

Частота кадров (FPS)
====================

**Частота кадров** - это скорость, с которой браузер может пересчитывать, размещать и отображать содержимое на дисплее. **FPS** (англ. frames per second) - количество сменяемых кадров за одну секунду.

Целевая частота кадров для компьютерной графики на веб-сайте составляет 60 кадров в секунду.

Общемировой стандарт частоты киносъёмки и проекции звукового кинематографа - 24 кадра в секунду. Для замедления или ускорения движения на экране существует ускоренная и замедленная или покадровая съёмки.


UX - Глоссарий MDN Web Docs: определения веб-терминов

UX
==

**UX** — это аббревиатура от User eXperience. Это исследование взаимодействия между пользователями и системой. Его цель — упростить взаимодействие с системой с точки зрения пользователя.

Система может быть любым продуктом или приложением, с которым может взаимодействовать конечный пользователь. Например, исследования UX, проведенные на веб-странице, могут продемонстрировать, легко ли пользователям понимать содержимое страницы, легка ли навигация по ней, не возникает ли трудностей в выполнении каких-либо действий и наоборот.

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

* Опыт взаимодействия на Википедии.


План поддержки плагинов в Firefox - Глоссарий MDN Web Docs: определения веб-терминов

План поддержки плагинов в Firefox
=================================

Плагины — проблема безопасности и производительности для пользователей Firefox. NPAPI плагины являются устаревшей технологией, и Mozilla движется к Вебу, в котором они не нужны. Последний оставшийся NPAPI плагин — Adobe Flash, который выпустил план по окончанию срока поддержки. Для поддержки воздержания от использования Flash, Firefox, вместе с другими браузерами, работает над тем, чтобы постепенно и аккуратно избавиться от использования и зависимости от Flash. Ниже представлен план, рассказывающий о том, что будет происходить с поддержкой плагинов в Firefox.

### План

Июнь 2016

Начиная с Firefox 47 в Июне 2016, все плагины, отличные от Adobe Flash, теперь активируются только по клику. Пользователи сами выбирают, каким сайта разрешено активировать каждый плагин. К тому же, в 64-битной версии Firefox для Windows поддерживается только Flash плагин.

Март 2017

Начиная с Firefox 52 в Марте 2017, плагины, отличные от Adobe Flash, больше не поддерживаются в Firefox. Версия Firefox Extended Support Release 52 продолжит поддерживать все плагины, включая Flash, до начала 2018.

Август 2017

Начиная с Firefox 55 в Августе 2017, пользователи смогут выбрать, каким сайта разрешено активировать Flash плагин. У пользователей появится надстройка, разрешающая запуск Flash, для каждого сайта отдельно. *Это изменение будет вводится постепенно, начиная с Августа и Сентября 2017.*

В целях повышения безопасности и улучшения производительности, Mozilla будет вести список сайтов (en-US), которые не могу использовать никакие плагины.

Сентябрь 2017

Начиная с Firefox 56 в Сентябре 2017, в Firefox для Android будет удалена поддержка всех плагинов (Firefox bug 1381916).

2019

В Сентябре 2019, в Firefox 69 будет удалена надстройка во Flash под названием "Всегда включён", теперь мы будет всегда спрашивать ваше разрешение, прежде чем запустить плагин на сайте.

2020

В начале 2020, поддержка Flash будет полностью удалена из обычной версии Firefox. Firefox Extended Support Release (ESR) будет поддерживать Flash до конца 2020.

2021

Когда Adobe прекратит выпускать обновления безопасности для Flash, в конце 2020, Firefox больше не будет поддерживать этот плагин.

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

#### Mozilla Firefox

* Октябрь 2015 - NPAPI Плагины в Firefox
* Июль 2016 - Уменьшение использования Adobe Flash в Firefox
* Июль 2017 - План Firefox по окончательному отказу от Flash

#### Adobe Flash

* Ноябрь 2015 - Flash, HTML5 и Открытые Веб Стандарты
* Июль 2017 - Flash & будущее интерактивного контента

#### Google Chrome

* План действий Flash
* Сентябрь 2013 - Скажем прощай нашему старому другу NPAPI
* Май 2014 - Отказ от обновлений NPAPI
* Ноябрь 2014 - Финальный отсчёт по отказу от NPAPI
* Август 2016 - Flash и Chrome
* Декабрь 2016 - План развёртывания HTML5 по умолчанию
* Июль 2017 - Скажем прощай Flash в Chrome

#### Microsoft Edge и Internet Explorer

* Апрель 2016 - Предоставление пользователям возможности контроля над Flash
* Декабрь 2016 - Extending User Control of Flash with Click-to-Run
* Июль 2017 - Flash на Windows Timeline

#### Apple Safari

* Июнь 2016 - Следующие шаги для устаревших плагинов
* Июль 2017 - Adobe анонсирует распространение Flash и дату конца поддержки


Primitive - Глоссарий MDN Web Docs: определения веб-терминов

Primitive
=========

**Примитив** (значение примитивного типа, примитивный тип данных) это данные, которые не являются объектом и не имеют методов. В JavaScript 7 простых типов данных: string, number, boolean, null, undefined, symbol (en-US) (новое в ECMAScript 2015), bigint.

Чаще всего значение примитивного типа представлено в низкоуровневой реализации языка.

Все **примитивы** неизменяемы (immutable), то есть они не могут быть изменены. Важно не путать сам примитив с переменной, которой присвоено значение примитивного типа. Переменной может быть переприсвоено новое значение, но существующее значение примитивного типа не может быть изменено подобно объектам, массивам и функциям.

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

Этот пример поможет понять, что значения примитивных типов неизменяемы **(immutable)**.

### JavaScript

```js
// Using a string method doesn't mutate the string
var bar = "baz";
console.log(bar); // baz
bar.toUpperCase();
console.log(bar); // baz

// Using an array method mutates the array
var foo = [];
console.log(foo); // []
foo.push("plugh");
console.log(foo); // ["plugh"]

// Assignment gives the primitive a new (not a mutated) value
bar = bar.toUpperCase(); // BAZ
```

Примитив может быть заменён, но он не может быть напрямую изменён.

Другой пример [ Step-by-step ]
------------------------------

Следующий пример поможет разобраться как JavaScript работает с примитивами.

### JavaScript

```js
// The Primitive
let foo = 5;

// Defining a function that should change the Primitive value
function addTwo(num) {
  num += 2;
}
// Another function trying to do the same thing
function addTwo\_v2(foo) {
  foo += 2;
}

// Calling our first function while passing our Primitive as an argument
addTwo(foo);
// Getting the current Primitive value
console.log(foo); // 5

// Trying again with our second function...
addTwo\_v2(foo);
console.log(foo); // 5
```

Вы ожидали, что будет 7 вместо 5? Если так, тогда прочитайте, как работает этот код:

* При вызове обеих функций `addTwo` `и addTwo_v2`, JavaScript ищет значение для идентификатора `foo`. JavaScript правильно определяет нашу переменную, созданную с помощью первого оператора
* После этого JavaScript передаёт найденный аргумент в функцию в качестве параметра
* Перед выполнением операторов в теле функции, **JavaScript берёт исходный переданный аргумент** (который является примитивом) и создаёт его локальную копию. Эти копии, существующие только внутри областей функций, доступны через идентификаторы, указанные в определениях функций (`num` для `addTwo`, foo для `addTwo_v2`)
* Затем выполняются операторы функций:
    + В первой функции был создан локальный аргумент `num`. Мы увеличиваем его значение на 2 (а не значение исходной переменной `foo`).
    + Во второй функции был создан локальный аргумент `foo`. Мы увеличиваем его значение на 2 (а не значение исходной (внешней) переменной `foo`). Кроме того, в этой ситуации, внешняя переменная `foo` является недоступной **никаким** способом. Это связано с лексическими областями JavaScript и, как следствие, с затенением переменных. Локальная переменная `foo` скрывает внешнюю переменную `foo`. Чтобы получить больше информации, смотри Closures.
* Таким образом, никакие изменения внутри наших функций **не будут** влиять на ИСХОДНУЮ `foo` вообще, так как мы работаем с её **копиями**

Вот почему примитивы неизменяемы **(immutable)**. Потому что мы не работаем над ними напрямую. Мы создаём копию и продолжаем работать с ней, не касаясь исходных значений.

Обёртки примитивных типов в JavaScript
--------------------------------------

За исключением `null` и `undefined`, все примитивные значения имеют объектный аналог, который оборачивает значение примитивного типа:

* `String` для string примитива.
* `Number` для number примитива.
* `BigInt` для bigint примитива.
* `Boolean` для boolean примитива.
* `Symbol` для symbol примитива.

Метод `valueOf()` типа обёртки возвращает значение примитивного типа.

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

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

* Введение в типы данных JavaScript
* Примитивный тип на Wikipedia


TLS - Глоссарий MDN Web Docs: определения веб-терминов

TLS
===

**Transport Layer Security (TLS)** - **Безопасность Транспортного Уровня** (протокол), ранее известный как **Secure Sockets Layer (SSL)** - **Уровень Защищённых Соединений** используется приложениями для организации защищённой передачи данных через интернет, предотвращая взлом и прослушивание электронной почты, просмотра сайтов, переписки и прочих протоколов.

Все современные браузеры поддерживают TLS протокол, требуя у сервера предоставить действующий "цифровой сертификат", подтверждающий подлинность в порядке обеспечения безопасного соединения. Это осуществляется для обоих - клиента и сервера, для обоюдной проверки подлинности каждого, если обе стороны обмена данных обеспечены их собственными цифровыми сертификатами.

### General knowledge

* Transport Layer Security (en-US)
* OWASP: Transport Layer Protection Cheat Sheet
### Specifications

* RFC 5246 (The Transport Layer Security Protocol, Version 1.2)


Псевдокод - Глоссарий MDN Web Docs: определения веб-терминов

Псевдокод
=========

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


Card sorting - Глоссарий MDN Web Docs: определения веб-терминов

Card sorting
============

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

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

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

* Card sorting на Википедии (англ.)


Браузер - Глоссарий MDN Web Docs: определения веб-терминов

Браузер
=======

*Веб браузер —* это программа которая извлекает и показывает страницы из Web, и даёт пользователям доступ к веб-страницам через гиперссылки (en-US).

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

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

* Эволюция веб
### Скачай браузер

* Mozilla Firefox
* Google Chrome
* Microsoft Internet Explorer
* Opera Browser


ООП - Глоссарий MDN Web Docs: определения веб-терминов

ООП
===

**ООП** (**О**бъектно-**О**риентированное **П**рограммирование) это подход в программировании, согласно которому, данные инкапсулированы внутри **объектов**, а сам объект существует как составная часть целого.

JavaScript сильно объектно-ориентирован. Он следует модели, базирующейся на прототипах (в отличии от модели, базирующейся на классах (en-US)).

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

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

* Введение в объектно-ориентированный JavaScript


Общий заголовок - Глоссарий MDN Web Docs: определения веб-терминов

Общий заголовок
===============

**Общий заголовок (основной заголовок)** - это заголовок (en-US), который используется и в запросе, и в ответе (в отличие от заголовка запроса (en-US) и заголовка ответа), однако общий заголовок не описывает тело сообщения, как заголовок сущности.

Наиболее часто встречающиеся общие заголовки: `Date`, `Cache-Control` или `Connection`.


Flexbox - Глоссарий MDN Web Docs: определения веб-терминов

Flexbox
=======

Флексбокс (от англ. *flexbox*) — общепринятый термин спецификации CSS Flexible Box Layout Module, которая описывает модель отображения элементов в одном измерении — в виде строки или столбца.

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

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

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

### Описание свойств

* `align-content`
* `align-items`
* `align-self`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `justify-content`
* `order`
### Дальнейшее чтение

* *CSS Flexible Box Layout Module Level 1 Specification*
* Руководство по CSS Flexbox:
    + Основные понятия о флексбоксе
    + Relationship of flexbox to other layout methods (en-US)
    + Выравнивание элементов во флекс-контейнере
    + Ordering flex items (en-US)
    + Controlling Ratios of flex items along the main axis (en-US)
    + Разбираемся с обёртыванием флекс-элементов
    + Typical use cases of flexbox (en-US)


IETF - Глоссарий MDN Web Docs: определения веб-терминов

IETF
====

Инженерный совет Интернета (**IETF**) это всемирная организация, которая разрабатывает спецификации регулирующие механизмы, лежащие в основе интернета, особенно TCP/IP илипакет протоколов интернета. IETF это открытое сообщество, управляется добровольцами и спонсируется интернет-сообществом.

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

### Основные сведения

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


Semantics - Глоссарий MDN Web Docs: определения веб-терминов

Semantics
=========

В программировании, **Семантика** означает *значение* фрагмента кода - например, «К какому результату приведёт выполнение этой строки JavaScript?», или «Каково предназначение или какая роль у этого элемента HTML?», а не «Как он выглядит?».

Семантика в JavaScript
----------------------

Для JavaScript, рассмотрим функцию, которая принимает строку в качестве параметра, и возвращает элемент `<li>` с этой строкой в качестве свойства `textContent`. Нужно ли вам смотреть на код, чтобы понять, что делает функция `build('Peach')`, или `createLiWithContent('Peach')`?

Семантика в CSS
---------------

Для CSS, рассмотрим стилизацию списка элементов `li`, в которых содержатся разные виды фруктов. Вы бы поняли, какая часть DOM выбрана с помощью селектора `div > ul > li`, или `.fruits__item`?

Семантика в HTML
----------------

В HTML, например, элемент `<h1>` (en-US) является семантическим, что даёт тексту внутри него роль (или значение) "заголовка первого уровня на вашей странице".

```html
<h1>This is a top level heading</h1>
```

По умолчанию, стандартные стили (en-US) большинства браузеров зададут `<h1>` (en-US) большой размер шрифта, чтобы он *выглядел* как заголовок (хотя вы можете стилизировать его так, как сочтёте нужным).

С другой стороны, вы можете сделать любой элемент *похожим* на заголовок первого уровня. Рассмотрим следующее:

```html
<span style="font-size: 32px; margin: 21px 0;"
 >Is this a top level heading?</span
>
```

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

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

Некоторые из преимуществ использования семантической разметки:

* Поисковые системы будут рассматривать содержимое такой разметки как важные ключевые слова, влияющие на рейтинг страницы в результатах поиска (смотри SEO)
* Программы для чтения с экрана могут использовать её как указатель, чтобы помочь слабовидящим пользователям ориентироваться на странице
* Среди бесконечных блоков `div` гораздо проще найти блок семантического кода, чем блок с семантическим классом или классом, принадлежащим пространству имён.
* Указывает разработчику на тип данных, которые будут размещены
* Семантическая разметка отражает правильное именование элементов / компонентов

Принимая решение об использовании той или иной разметки, спросите себя: «Какой элемент (элементы) лучше всего описывает / представляет данные, которые я собираюсь использовать?» Например, это список данных ?; упорядоченный, неупорядоченный ?; это статья с разделами и дополнительной информацией ?; в ней перечислены определения ?; это рисунок или изображение, которое требует подписи ?; должен ли он иметь собственные `header` и `footer`?; и т.п.

Семантические элементы
----------------------

Вот *некоторые* из примерно 100 доступных семантических элементов:

* `<article>`
* `<aside>`
* `<details>`
* `<figcaption>`
* `<figure>`
* `<footer>`
* `<header>`
* `<main>`
* `<mark>`
* `<nav>`
* `<section>`
* `<summary>`
* `<time>`
Learn more
----------

* HTML element reference on MDN
* Using HTML sections and outlines (en-US) on MDN
* MDN Web Docs Glossary
    + SEO
* Some of semantic elements in HTML
    + `<article>`
    + `<aside>`
    + `<details>`
    + `<figcaption>`
    + `<figure>`
    + `<footer>`
    + `<header>`
    + `<main>`
    + `<mark>`
    + `<nav>`
    + `<section>`
    + `<summary>`
    + `<time>`


Codec - Глоссарий MDN Web Docs: определения веб-терминов

Codec
=====

Кодек (от англ. *codec* - "**co**der-**dec**oder") - это программа, алгоритм, или же устройство, которое позволяет кодировать и декодировать поток данных. Предоставленный codec знает, как работать со специфичной кодировкой или с технологией сжатия.

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

### Технические ссылки

* Медиа форматы, поддерживаемые audio и video элементами HTML (en-US)


Grid Column - Глоссарий MDN Web Docs: определения веб-терминов

Grid Column
===========

Столбец сетки (**grid column)** — это вертикальный элемент в CSS Grid Layout, а также пространство между двумя вертикальными линиями сетки. Он определяется свойством `grid-template-columns`, либо в сокращённом виде `grid` или `grid-template`.

Кроме того, столбцы могут быть созданы в неявном виде (*implicit grid),* когда элементы расположены за пределами столбцов, созданных в явно-заданной сетке (*explicit grid)*. Размер этих столбцов будет подобран автоматически, либо задан с помощью свойства `grid-auto-columns` (en-US).

При работе с выравниванием в CSS Grid Layout, ось, идущая вниз, вдоль которой идут столбцы, также называется осью блоков или столбцов.

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

### Связанные свойства

* `grid-template-columns`
* `grid-auto-columns` (en-US)
* `grid`
* `grid-template`
### Дальнейшая информация

* CSS Grid Layout Guide: *Basic concepts of grid layout*


Массив - Глоссарий MDN Web Docs: определения веб-терминов

Массив
======

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

Каждому элементу в массиве соответствует свой номер, называется он индексом, который позволяет получить к нему доступ. В JavaScript, массивы начинаются с индекса ноль и их можно изменять различными методами.

Пример массива на JavaScript:
```

var myArray = [1, 2, 3, 4];

var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];

// Массивы в JavaScript могут содержать информацию различных типов, как представлено выше.
```

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

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

* JavaScript `Array` на MDN


Поднятие - Глоссарий MDN Web Docs: определения веб-терминов

Поднятие
========

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

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

### Пример

Одним из преимуществ помещения в память объявлений функций до выполнения кода является возможность использовать функцию до её объявления. Например:

```js
function catName(name) {
  console.log("Мою кошку зовут " + name);
}

catName("Тигр");
/\*
Результатом будет вывод строки: "Мою кошку зовут Тигр"
\*/
```

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

```js
catName("Раиса");

function catName(name) {
  console.log("Мою кошку зовут " + name);
}
/\*
Результатом будет вывод строки: "Мою кошку зовут Раиса"
\*/
```

Даже если мы вызываем функцию до её объявления, код работает. Это происходит благодаря тому, как работает контекст выполнения в JavaScript.

`Hoisting` хорошо работает и с другими типами данных и переменными. Переменные могут быть инициализированы и использованы до их объявления. Однако, они не могут быть использованы без инициализации.

### Пример:
```

num = 6;
num + 7;
var num;
/* не генерирует ошибку, так как num объявлен */
```

JavaScript "поднимает" только объявление, но не инициализацию. Если вы используете переменную, объявленную и проинициализированную после её использования, то значение будет `undefined`. Два примера ниже демонстрируют это поведение.
```

var x = 1; // Инициализируем x
console.log(x + " " + y);  // '1 undefined'
var y = 2;
//код выше и код ниже одинаковые

var x = 1; // Инициализируем x
var y; // Объявляем y
console.log(x + " " + y);  // '1 undefined'
y = 2; // Инициализируем y
```

### Technical reference

* JavaScript: Understanding the Weird Parts - Udemy.com Course
* var - объявление переменной - MDN
* Функция - MDN


Constant - Глоссарий MDN Web Docs: определения веб-терминов

Constant
========

Константа хранит значение, которое программист не хочет изменять, например числа (1, 2, 42). С другой стороны, у переменных программист может установить новое значение (en-US) к переменной, имя которой уже используется.

Как и переменные, константы привязываются к идентификаторам (именам). Например, идентификатор `pi` может быть привязан к значению 3.14…


Null - Глоссарий MDN Web Docs: определения веб-терминов

Null
====

В информатике, значение **`null`** представляет ссылку, которая указывает, обычно намеренно, на несуществующий или некорректный объект или адрес. Смысл null-ссылки различается от языка к языку.

В JavaScript, null – это значение, специально обозначенное как примитив, так как по поведению это в самом деле видимый примитив. Но при этом от `null` унаследованы все остальные Объекты, поэтому, несмотря на то, что null возвращает примитивное значение, его тип это объект:

```js
typeof null === "object";
```

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

### Техническая информация

* Типы данных JavaScript и структуры данных
* Глобальный объект в JavaScript: `null`


Blink - Глоссарий MDN Web Docs: определения веб-терминов

Blink
=====

Blink - это браузерный движок с открытым исходным кодом разработанный Google как часть Chromium (и следовательно как часть Chrome). Конкретней, Blink - это ответвление WebCore библиотеки WebKit, поддерживающей макет, рендеринг, и DOM.

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

### Основная информация

* Домашняя страница проекта Blink
* Blink на Википедии
* FAQ по Blink


Класс - Глоссарий MDN Web Docs: определения веб-терминов

Класс
=====

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

В объектно-ориентированном программировании класс описывает характеристики объекта. Класс описывает свойства и методы объекта. Он является шаблоном, с которого срисовываются конкретные экземпляры объектов.

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

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

* Языки, основанные на классах против прототипно-ориентированных (en-US)
* Использование функций как классов в JavaScript
* Класс-ориентированное программирование на Википедии (только английский)
* Объектно-ориентированное программирование на Википедии


JSON - Глоссарий MDN Web Docs: определения веб-терминов

JSON
====

*JavaScript Object Notation* (**JSON**) это формат обмена данными. Несмотря на то, что JSON не является строгим подмножеством, он напоминает синтаксис JavaScript. Хотя много языков программирования поддерживают JSON, он особенно полезен для JavaScript-приложений, таких как веб-сайты и расширения для браузера.

JSON может представлять числа, булевы значения, строки, `null`, массивы (упорядоченные последовательности значений) и объекты (состоят из пар ключ-значение). Ключом является строка, значением может выступать любой примитив, массив или объект. JSON изначально не предоставляет поддержки более сложных типов данных, таких как функции, регулярные выражения, даты и так далее. Объекты дат по умолчанию сериализируются в строки, содержащие дату в ISO-формате, поэтому данные не будут утеряны. Если вам нужен JSON для представления дополнительных типов данных, преобразуйте значения в строку в том формате, в котором вы позже хотите его десериализовать.

Как и XML, JSON имеет возможность хранить иерархические данные (в отличие от более традиционного CSV формата). Существует много инструментов для переходов между этими форматами. Например, конвертер JSON в CSV.

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

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

* JSON на Википедии
### Техническая информация

* JSON на MDN


Безопасный метод - Глоссарий MDN Web Docs: определения веб-терминов

Безопасный метод
================

Метод HTTP является **безопасным**, если он не меняет состояние сервера. Другими словами, безопасный метод проводит операции "только чтение" (read-only). Несколько следующих методов HTTP безопасные: `GET`, `HEAD` или `OPTIONS`. Все безопасные методы являются также идемпотентными, как и некоторые другие, но при этом небезопасные, такие как `PUT` или `DELETE`.

Даже если безопасные методы являются по существу "только для чтения", сервер всё равно может сменить своё состояние: например, он может сохранять статистику. Что существенно, так то, когда клиент вызывает безопасный метод, то он не запрашивает никаких изменений на сервере, и поэтому не создаёт дополнительную нагрузку на сервер. Браузеры могут вызывать безопасные методы, не опасаясь причинить вред серверу: это позволяет им выполнять некоторые действия, например, предварительная загрузка без риска. Поисковые роботы также полагаются на вызовы безопасных методов.

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

Правильная реализация безопасного метода - это ответственность **серверного приложения**, потому что сам веб-сервер, будь то Apache, nginx, IIS это соблюсти не сможет. В частности, приложение не должно разрешать изменение состояния сервера запросами `GET`.

Вызов *безопасного* метода, не меняющего состояния сервера:
```

GET /pageX.html HTTP/1.1
```

Вызов *небезопасного* метода, который может поменять состояние сервера:
```

POST /pageX.html HTTP/1.1
```

Вызов идемпотентного, но небезопасного метода:
```

DELETE /idX/delete HTTP/1.1
```

Материалы для изучения
----------------------

### Общие

* Определение безопасных методов в спецификации HTTP.
### Технические

* Описание общих безопасных методов: `GET`, `HEAD`, `OPTIONS`
* Описание общих небезопасных методов: `PUT`, `DELETE`, `POST`


Идентификатор - Глоссарий MDN Web Docs: определения веб-терминов

Идентификатор
=============

Последовательность символов в коде, которые определяют **переменную, функцию или свойство**.

В JavaScript, идентификаторы могут содержать только буквы, цифры (0-9), «`$`» и «`_`», и не могут начинаться с цифры. Идентификатор отличается от строки (string) в том, что строка — это данные, в то время как идентификатор является частью кода. В JavaScript нет способа сконтвертировать идентификаторы в строки, но иногда можно преобразовать (парсить) строки в идентификаторы.


DoS атака - Глоссарий MDN Web Docs: определения веб-терминов

DoS атака
=========

DoS (отказ в обслуживании) - это сетевая атака, которая препятствует обычному использованию ресурсов server (en-US), нагружая сервер "ложными", "фиктивными" запросами.

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

Существуют также распределённые атаки типа «отказ в обслуживании» (DDoS), в которых используется множество серверов-злоумышленников, нацеленных на исчерпания вычислительной мощности атакуемого компьютера.

### Типы DoS атак

DoS-атаки - это больше категория, чем определённый вид атак. Вот неполный список типов DoS-атак:

* Атака пропускной способности
* Поток запросов на обслуживание
* SYN flooding attack
* ICMP flood attack
* peer-to-peer attack
* permanent DoS attack
* application level flood attack
Learn more
----------

* Denial-of-service on OWASP
* DDoS (en-US)


Number (Числовой тип данных) - Глоссарий MDN Web Docs: определения веб-терминов

Number (Числовой тип данных)
============================

В JavaScript, **Number** - числовой тип данных в формате 64-битного числа двойной точности с плавающей запятой. В других языках программирования может существовать несколько числовых типов данных, например: Integer, Float, Double или Bignum.

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

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

* Число двойной точности на Wikipedia
* Число с плавающей запятой на Wikipedia
### Техническая справка

* Числовой тип данных JavaScript: Number
* Глобальный объект JavaScript: `Number`


FTP - Глоссарий MDN Web Docs: определения веб-терминов

FTP
===

**FTP** (англ. file transfer protocol — протокол передачи файлов) — стандартный сетевой протокол для передачи файлов с одного хоста на другой через Интернет по протоколу TCP.

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

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

* Руководство по загрузке файлов через FTP для новичка (англ.).
* FTP в Википедии.


Crawler - Глоссарий MDN Web Docs: определения веб-терминов

Crawler
=======

Поисковый робот(паук, краулер) часто называемый просто "бот" или "робот" это программа, систематически обходящая Web для сбора данных со страниц веб-сайтов. Обычно поисковые сервисы (напр. Google, Bing, и пр.) используют поисковых роботов для индексирования сайтов.

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

* Поисковый робот на Википедии

1. MDN Web Docs Glossary
    1. Search engine (en-US)


Инкапсуляция - Глоссарий MDN Web Docs: определения веб-терминов

Инкапсуляция
============

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


IPv4 - Глоссарий MDN Web Docs: определения веб-терминов

IPv4
====

IPv4 — это четвертая версия протокола связи, лежащая в основе Интернета и первая широко распространенная версия.

Впервые формализованный в 1981 году, IPv4 восходит к начальным разработкам ARPAnet(Advanced Research Projects Agency Network). IPv4 — это протокол без установления соединения, который используется в сетях канального уровня с коммутацией пакетов (ethernet). IPv6 постепенно заменил IPv4 из-за проблем с безопасностью IPv4 и ограничений поля адреса. (Версия номер 5 была присвоена в 1979 году экспериментальному Интернет протоколу реального времени(Internet Stream Protocol), который, однако, никогда не назывался IPv5.)

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

* IPv4 в Википедии


ISO - Глоссарий MDN Web Docs: определения веб-терминов

ISO
===

**ISO** (Международная организация по стандартизации) - это глобальная ассоциация, которая разрабатывает единые критерии, координирующие деятельность компаний в каждой крупной отрасли.

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

### Основные сведения

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


Adobe Flash - Глоссарий MDN Web Docs: определения веб-терминов

Adobe Flash
===========

Flash — устаревшая технология, разработанная Adobe, для создания веб-приложений с богатой функциональностью, просмотра мультимедиа контента и потокового медиа. Для использования Flash необходимо установить соответствующий плагин в ваш браузер.

1. Официальный сайт
2. Shumway, свободная реализация от Mozilla
3. Gnash, свободная реализация от GNU
4. Ruffle, свободная реализация
5. Глоссарий
    1. браузер


CSS препроцессор - Глоссарий MDN Web Docs: определения веб-терминов

CSS препроцессор
================

CSS препроцессор (**CSS preprocessor**) - это программа, которая имеет свой собственный синтаксис (syntax (en-US)), но может сгенерировать из него CSS код . Существует множество препроцессоров. Большинство из них расширяет возможности чистого CSS, добавляя такие опции как: примеси, вложенные правила, селекторы наследования и др. Эти особенности облегчают работу с CSS: упрощают чтение кода и его дальнейшую поддержку.

Для использования CSS препроцессора нужно установить CSS компилятор на ваш веб-сервер (server (en-US)).

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

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

Несколько самых популярных CSS препоцессоров:

* SASS
* LESS
* Stylus
* PostCSS


Доменное имя - Глоссарий MDN Web Docs: определения веб-терминов

Доменное имя
============

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

Подробнее
---------

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

* Understanding domain names


Ложноподобное значение - Глоссарий MDN Web Docs: определения веб-терминов

Ложноподобное значение
======================

**Ложноподобное** (**falsy**) значение — значение, которое становится `false` в булевом контексте.

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

В следующей таблице приведен полный список ложноподобных значений JavaScript:

| Значение | Описание |
| --- | --- |
| `false` | Ключевое слово `false`. |
| `0` | Ноль `Number` (к нему также относятся `0.0`, `0x0` и т.д.). |
| `-0` | Отрицательный ноль типа `Number` (к нему также относятся `-0.0`, `-0x0` и т.д.). |
| `0n` | Ноль типа `BigInt` (также `0x0n`). Обратите внимание, что не может быть негативного нуля типа `BigInt` — отрицательный `0n` равняется `0n`. |
| `""`, `''`, ```` | Значение, содержащее пустую строку . |
| null | null — отсутствие какого-либо значения. |
| undefined | undefined — примитивное значение. |
| NaN (en-US) | NaN — значение, не являющиеся числом. |
| `document.all` | Объекты считаются ложноподобными тогда и только тогда, когда у них есть внутренний слот [[IsHTMLDDA]]. Этот слот есть только в объекте `document.all`, и его нельзя задать через JavaScript. |

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

Примеры *ложноподобных* значений в JavaScript (которые в булевых контекстах принудительно приводятся к false и таким образом *минуют* блок `if`):

```js
if (false)
if (null)
if (undefined)
if (0)
if (-0)
if (0n)
if (NaN)
if ("")
```

### Оператор логического И, &&

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

```js
false && "dog";
// ↪ false

0 && "dog";
// ↪ 0
```

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

* Truthy
* Type\_coercion
* Boolean


SGML - Глоссарий MDN Web Docs: определения веб-терминов

SGML
====

Стандартный обобщённый язык разметки (**SGML**) это спецификация ISO для определения декларативных языков разметки.

В вебе, HTML 4, XHTML, и XML популярные языки SGML-типа. Стоит отметить, что с момента своего пятого издания HTML больше не основан на SGML и имеет свои собственные правила синтаксического анализа.

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

* Введение в SGML


XML - Глоссарий MDN Web Docs: определения веб-терминов

XML
===

eXtensible Markup Language (XML) - расширяемый язык разметки, рекомендованный Консорциумом Всемирной паутины (W3C). В отрасли информационных технологий (ИТ) используется множество языков на основе XML в качестве языков описания данных.

Тэги XML напоминают тэги HTML, но XML гораздо более гибкий, поскольку он позволяет пользователям определять свои собственные тэги. Таким образом, XML действует как мета-язык, то есть его можно применить для определения других языков, например RSS (en-US). Кроме того, HTML является языком презентации, тогда как XML является языком описания данных. Это означает, что XML имеет гораздо более широкое применение, чем просто веб-интерфейс. Например, веб-службы могут использовать XML для обмена запросами и ответами.

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

* XML Введение


CMS - Глоссарий MDN Web Docs: определения веб-терминов

CMS
===

CMS (Content Management System, рус. "Система управления содержимым") - это программа, которая позволяет пользователям публиковать, организовывать, изменять или удалять различные виды контента: не только текст, но и встроенные картинки, видео, аудио, и интерактивный код.