Как работает Веб - Изучение веб-разработки

Как работает Веб
================

* Назад
* Обзор: Getting started with the web

*Как работает Веб* даст упрощённое представление о том, что происходит при просмотре веб-страницы в браузере на вашем компьютере или телефоне.

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

Клиенты и серверы
-----------------

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

![](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works/client-server.jpg)

* Клиенты являются обычными пользователями, подключёнными к Интернету посредством устройств (например, компьютер подключён к Wi-Fi, или ваш телефон подключён к мобильной сети) и программного обеспечения, доступного на этих устройствах (как правило, браузер, например, Firefox или Chrome).
* Серверы - это компьютеры, которые хранят веб-страницы, сайты или приложения. Когда клиентское устройство пытается получить доступ к веб-странице, копия страницы загружается с сервера на клиентский компьютер для отображения в браузере пользователя.
Остальные части панели инструментов
-----------------------------------

Клиент и сервер, о которых мы рассказали выше, не раскрывают всю суть. Есть много других компонентов, и мы опишем их ниже.

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

![](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works/road.jpg)

Помимо клиента и сервера, мы также должны уделить внимание:

* **Ваше Интернет-подключение**: Позволяет отправлять и принимать данные по сети. Оно подобно улице между домом и магазином.
* **TCP/IP**: Протокол Управления Передачей и Интернет Протокол являются коммуникационными протоколами, которые определяют, каким образом данные должны передаваться по сети. Они как транспортные средства, которые позволяют сделать заказ, пойти в магазин и купить ваши товары. В нашем примере, это как автомобиль или велосипед (или собственные ноги).
* **DNS**: Система Доменных Имён напоминает записную книжку для веб-сайтов. Когда вы вводите веб-адрес в своём браузере, браузер обращается к DNS, чтобы найти реальный адрес веб-сайта, прежде чем он сможет его получить. Браузеру необходимо выяснить, на каком сервере живёт сайт, поэтому он может отправлять HTTP-сообщения в нужное место (см. Ниже). Это похоже на поиск адреса магазина, чтобы вы могли попасть в него.
* **HTTP**: Протокол Передачи Гипертекста - это протокол, который определяет язык для клиентов и серверов, чтобы общаться друг с другом. Он, как язык, который вы используете, чтобы заказать ваш товар.
* **Файлы компонентов**: сайт состоит из нескольких различных файлов, которые подобны различным отделам с товарами в магазине. Эти файлы бывают двух основных типов:
    + **Файлы кода**: сайты построены преимущественно на HTML, CSS и JavaScript, хотя вы познакомитесь с другими технологиями чуть позже.
    + **Материалы**: это собирательное название для всех других вещей, составляющих сайт, такие как изображения, музыка, видео, документы Word и PDF.
Что же на самом деле происходит?
--------------------------------

Когда вы вводите веб-адрес в свой браузер (для нашей аналогии - посещаете магазин):

1. Браузер обращается к DNS серверу и находит реальный адрес сервера, на котором "живёт" сайт (Вы находите адрес магазина).
2. Браузер посылает HTTP запрос к серверу, запрашивая его отправить копию сайта для клиента (Вы идёте в магазин и заказываете товар). Это сообщение и все остальные данные, передаваемые между клиентом и сервером, передаются по интернет-соединению с использованием протокола TCP/IP.
3. Если сервер одобряет запрос клиента, сервер отправляет клиенту статус "200 ОК", который означает: "Конечно, вы можете посмотреть на этот сайт! Вот он", а затем начинает отправку файлов сайта в браузер в виде небольших порций, называемых пакетными данными (магазин выдаёт вам ваш товар или вам привозят его домой).
4. Браузер собирает маленькие куски в полноценный сайт и показывает его вам (товар прибывает к вашей двери — новые вещи, потрясающе!).
DNS
---

Реальные веб-адреса - неудобные, незапоминающиеся строки, которые вы вводите в адресную строку, чтобы найти ваши любимые веб-сайты. Эти строки состоят из чисел, например: `63.245.215.20`.

Такой набор чисел называется IP-адресом и представляет собой уникальное местоположение в Интернете. Впрочем, его не очень легко запомнить, правда? Вот почему изобрели DNS. Это специальные сервера, которые связывают веб-адрес, который вы вводите в браузере (например, "mozilla.org"), с реальным IP-адресом сайта.

Сайты можно найти непосредственно через их IP-адреса. Вы можете найти IP-адрес веб-сайта, введя его домен в инструмент, как IP Checker.

Пакеты
------

Ранее мы использовали термин "пакеты", чтобы описать формат, в котором данные передаются от сервера к клиенту. Что мы имеем в виду? В основном, когда данные передаются через Интернет, они отправляются в виде тысячи мелких кусочков, так что множество разных пользователей могут скачивать один и тот же сайт одновременно. Если бы сайты отправлялись одним большим куском, тогда бы только один пользователь мог скачать его за один раз, и это, очевидно, сделало бы пользование интернетом не эффективным и не очень радостным.

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

* Как работает Интернет
* HTTP — Протокол уровня приложений
* HTTP: Давайте изучим его!
* HTTP: Коды ответов
Благодарность
-------------

Фото улицы: Street composing, Kevin D.

* Назад
* Обзор: Getting started with the web


Основы HTML - Изучение веб-разработки

Основы HTML
===========

* Назад
* Обзор: Getting started with the web
* Далее

HTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

Что такое HTML на самом деле?
-----------------------------

HTML не является языком программирования; это *язык разметки*, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда **элементов**, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
```

Моя кошка очень раздражена
```

Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:

```html
<p>Моя кошка очень раздражена</p>
```

### Анатомия HTML элемента

Давайте рассмотрим элемент абзаца более подробно.

![](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-small.png)

Главными частями нашего элемента являются:

1. **Открывающий тег (Opening tag)**: Состоит из имени элемента (в данном случае, "p"), заключённого в открывающие и закрывающие **угловые скобки**. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
2. **Закрывающий тег (Closing tag):** Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
3. **Контент (Content)**: Это контент элемента, который в данном случае является просто текстом.
4. **Элемент(Element)**: Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:

![](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-attribute-small.png)

Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это *имя* *атрибута,* а `editor-note` это *значение атрибута*. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.

Атрибут всегда должен иметь:

1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
2. Имя атрибута, за которым следует знак равенства.
3. Значение атрибута, заключённое с двух сторон в кавычки.
### Вложенные элементы

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

```html
<p>Моя кошка <strong>очень</strong> раздражена.</p>
```

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент `<p>`, затем элемент `<strong>`, потом мы должны закрыть сначала элемент `<strong>`, затем `<p>`. Приведённое ниже неверно:

```html
<p>Моя кошка <strong>очень раздражена.</p></strong>
```

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

### Пустые элементы

Некоторые элементы не имеют контента, и называются **пустыми элементами**. Возьмём элемент `<img>`, который уже имеется в нашем HTML:

```html
<img src="images/firefox-icon.png" alt="Моё тестовое изображение" />
```

Он содержит два атрибута, но не имеет закрывающего тега `</img>`, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.

### Анатомия HTML документа

Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш `index.html` (с которым мы впервые встретились в статье Работа с файлами):

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="Моё тестовое изображение" />
  </body>
</html>
```

Здесь мы имеем:

* `<!DOCTYPE html>` — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
* `<html></html>` — элемент `<html>`. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
* `<head></head>` — элемент `<head>`. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но *не являющегося* контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
* `<body></body>` — элемент `<body>`. В нем содержится *весь* контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.
* `<meta charset="utf-8">` — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
* `<title></title>` — элемент `<title>`. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.
Изображения
-----------

Давайте снова обратим наше внимание на элемент изображения:

```html
<img src="images/firefox-icon.png" alt="Mоё тестовое изображение" />
```

Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута `src` (source, источник), который содержит путь к нашему файлу изображения.

Мы также включили атрибут `alt` (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:

1. У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
2. Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте `src`, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:

![](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics/alt-text-example.png)

Альтернативный текст - это "пояснительный текст". Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст "My test image" ("Моё тестовое изображение") не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет "The Firefox logo: a flaming fox surrounding the Earth" ("Логотип Firefox: огненный Лис вокруг Земли").

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

**Примечание:** Узнайте больше о специальных возможностях.

Разметка текста
---------------

В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.

### Заголовки

Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков `<h1>` (en-US)–`<h6>` (en-US), хотя обычно вы будете использовать не более 3-4 :

```html
<h1>Мой главный заголовок</h1>
<h2>Мой заголовок верхнего уровня</h2>
<h3>Мой подзаголовок</h3>
<h4>Мой под-подзаголовок</h4>
```

Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше элемента `<img>`.

### Абзацы

Как было сказано раньше, элемент `<p>` предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:

```html
<p>Это одиночный абзац</p>
```

Добавьте свой образец текста (вы создавали его в статье *Каким должен быть ваш веб-сайт?*) в один или несколько абзацев, расположенных прямо под элементом `<img>`.

### Списки

Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:

1. **Ненумерованные списки** - это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент `<ul>`.
2. **Нумерованные списки -** это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент `<ol>`.

Каждый пункт внутри списков располагается внутри элемента `<li>` (list item, элемент списка).

Например, если мы хотим включить часть следующего фрагмента абзаца в список:

```html
<p>
  Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей,
  работающих вместе ...
</p>
```

Мы могли бы изменить разметку на эту:

```html
<p>Mozilla, мы являемся мировым сообществом</p>

<ul>
  <li>технологов</li>
  <li>мыслителей</li>
  <li>строителей</li>
</ul>

<p>работающих вместе ...</p>
```

Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.

Ссылки
------

Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — `<a>` — *a* это сокращение от "anchor" ("якорь"). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:

1. Выберите некоторый текст. Мы выбрали текст "Манифест Mozilla".
2. Оберните текст в элемент `<a>`, например так:

```html
<a>Манифест Mozilla</a>
```

3. Задайте элементу `<a>` атрибут href, например так:

```html
<a href="">Манифест Mozilla</a>
```

4. Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:

```html
<a href="https://www.mozilla.org/ru/about/manifesto/details/"
 >Манифест Mozilla</a
>
```

Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите `https://` или `http://` часть, называемую *протоколом*. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.

**Примечание:** `href` сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как ***h**ypertext **ref**erence* ("гипертекстовая ссылка").

Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.

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

Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть её здесь):

![A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics/finished-test-page-small.png)

Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub.

Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу Обучение HTML: руководства и уроки.

* Назад
* Обзор: Getting started with the web
* Далее


Публикация вашего веб-сайта - Изучение веб-разработки

Публикация вашего веб-сайта
===========================

* Назад
* Обзор: Getting started with the web
* Далее

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

Какие существуют варианты?
--------------------------

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

### Получение хостинга и доменного имени

Чтобы иметь больший контроль над контентом и внешним видом веб-сайта, большинство людей предпочитают покупать веб-хостинг и доменное имя:

* Хостинг — арендованное файловое пространство на веб-сервере хостинговой компании. Вы размещаете ваши файлы веб-сайта в этом пространстве, и веб-сервер выдаёт контент для веб-пользователей, которые запрашивают его.
* Доменное имя — уникальный адрес по которому люди могут найти ваш веб-сайт, например `http://www.mozilla.org` или `http://www.bbc.co.uk`. Вы можете арендовать доменное имя на столько лет, сколько захотите (минимум на 1 год) у **регистратора доменов**.

Множество профессиональных веб-сайтов располагается в Интернете именно таким образом.

Кроме того, вам потребуется File Transfer Protocol (FTP)-клиент (более подробно см. Сколько это стоит: программное обеспечение), чтобы передать файлы веб-сайта на сервер. Существует множество FTP-клиентов, но, как правило, вам нужно войти на веб-сервер, используя данные, предоставленные вашей хостинговой компанией (например: имя пользователя (логин), пароль, имя хоста). Затем FTP-клиент отобразит файлы на вашем компьютере в одной половине окна и файлы на хостинговом сервере в другой половине, так вы сможете перетаскивая копировать файлы с вашего компьютера на сервер и обратно.

![](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website/ftp.jpg)

#### Советы по поиску хостингов и доменов

* Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имён, просто поищите "веб-хостинг" и "доменные имена". Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегистрировал его.
* Ваш домашний или рабочий Интернет-провайдер может предоставлять хостинговые услуги для небольших веб-сайтов. Набор возможностей в таком случае может быть ограничен, но, тем не менее, он может отлично подойти для ваших первых экспериментов - свяжитесь с ними и узнайте!
* Также есть несколько бесплатных сервисов, таких как Neocities, Blogspot, и Wordpress. Опять же, вы получаете то, за что платите, но они идеально подходят для ваших первоначальных экспериментов. Бесплатные сервисы по большей части не требуют FTP-клиентов - вы можете перетаскивать ваши файлы напрямую в веб-интерфейсе.
* Иногда компании предлагают одновременно и хостинг и домен.
### Использование онлайн инструментов, таких как GitHub или Google App Engine

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

* GitHub - это "социальная сеть программистов". С помощью неё можно загружать репозитории с вашими разработками для хранения в Git - **систему контроля версий.** По умолчанию все разработки хранятся с открытым исходным кодом, а это значит, что ваш код будет доступен любому - участники могут по нему учиться либо же предлагать свои улучшения. Вы также можете объединяться с другими кодерами! Это очень большое и полезное сообщество, в чьи ряды лучше вступить, и Git/GitHub это очень популярная система контроля версий — большинство компаний сейчас использует её для работы. GitHub имеет очень полезную функцию GitHub pages, с помощью которой вы сможете опубликовать ваш код (ваш сайт) в интернете.
* Google App Engine - это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google — нужно ли вам создать многоуровневое веб-приложение с нуля или разместить статический веб-сайт. Смотрите как разместить ваш веб-сайт на Google App Engine чтобы узнать больше информации.

В отличие от других хостингов, эти услуги обычно бесплатны, но взамен вы получите ограниченный набор инструментов.

### Использование облачных IDE, таких как CodePen

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

Попробуйте один из этих и посмотрите, какой из них вам больше нравится:

* JSFiddle
* Thimble
* JSBin
* CodePen

![](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website/jsbin-screen.png)

Публикация с помощью GitHub
---------------------------

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

### Основная настройка

1. Прежде всего, установите Git на ваш компьютер. Это основная версия системы управления версий, поддерживающая GitHub.
2. Далее, создайте аккаунт в GitHub. Это просто и легко.
3. После того как вы зарегистрировались, войдите в github.com используя ваш логин и пароль.
4. Далее, вам нужно создать новый репозиторий для ваших файлов. Нажмите Плюс (+) в правом верхнем углу главной страницы GitHub, затем выберите *New repository*.

На этой странице, в поле *Repository name*, введите *username*.github.io, где *username* это ваше имя пользователя. Так, например, наш друг *valerii15298* введёт *valerii15298.github.io*.

![](https://i.imgur.com/hdCboGw.png)

Нажмите *Create repository* и вы окажетесь на следующей странице:

![](https://i.imgur.com/ZWE2DMv.png)

### Загрузка ваших файлов на GitHub

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

![](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website/command-line.png)

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

У всех операционных систем есть командная строка:

* **Windows**: **Командная строка.** Чтобы открыть её нажмите клавишу Windows, затем введите *Командная строка* в поле поиска, и выберите её в появившемся списке. Заметьте, что Windows имеет свои собственные соглашения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
* **OS X**: **Terminal** можно найти в *Приложения > Утилиты*.
* **Linux**: Обычно вы можете вытащить терминал с помощью Ctrl + Alt + T. Если это не сработает, найдите **Терминал** в панели приложений или меню.

Сначала это может показаться немного страшным, но не волнуйтесь - вы скоро освоите основы. Вы говорите компьютеру сделать что-то в терминале, введя команду и нажав Enter.

1. Укажите в командной строке каталог `test-site` (или другое название каталога, содержащего ваш сайт). Для этого используйте команду `cd` (т.е. «change directory»). Вот то, что вы наберёте, если разместили свой веб-сайт в каталоге под названием `test-site` на рабочем столе:

```bash
cd Desktop/test-site
```

2. Когда командная строка указывает внутрь вашего каталога веб-сайта, введите следующую команду, которая сообщает инструменту `git`, чтобы он превратил каталог в репозиторий git:

```bash
git init
```

3. Далее вернёмся к сайту GitHub. На текущей странице вас интересует раздел "…or push an existing repository from the command line". Вы должны увидеть две строки кода в этом разделе. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:

```bash
git remote add origin https://github.com/bobsmith/bobsmith.github.io.git
```

4. Далее введите следующие две команды, нажимая Enter после каждой. Это подготовит код к загрузке на GitHub, и укажет Git управлять этими файлами.

```bash
git add --all
git commit -m 'adding my files to my repository'
```

5. Наконец, загрузите код на GitHub - вернитесь на веб-страницу GitHub, на которой вы находились, и введите в терминал команду:

```bash
git push -u origin master
```

6. Теперь, когда вы перейдёте по веб-адресу, созданному в GitHub, в новом окне браузера (*username.github.io*), вы увидите ваш сайт онлайн! Разошлите ссылку вашим друзьям, пусть оценят ваше мастерство.

**Примечание:** Если вы застряли, GitHub Pages homepage будет очень полезна для вас.

### Дальнейшее изучение GitHub

Если вы хотите сделать больше изменений на своём тестовом сайте и загрузить их в GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:
```

git add --all
git commit -m 'another commit'
git push
```

Вы можете заменить *another commit* более подходящим сообщением, описывающим какие изменения вы только что сделали.

Мы едва затронули Git. Чтобы узнать больше, начните с GitHub Help site.

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

К этому моменту, у вас должен быть собственный пример веб-сайта, доступный по уникальному веб-адресу. Отлично!

![](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website/hosted-final-site.png)

### Дальнейшее чтение

* Что такое веб-сервер?
* Что такое доменные имена?
* Сколько стоит сделать что-то в Интернете?
* Развёртывание сайта: хороший курс от Codecademy, который забегает немного вперёд и показывает некоторые дополнительные техники.
* Cheap or Free Static Website Hosting, статья написанная Скоттом Мюрреем содержит некоторые полезные идеи о доступных сервисах.
* Назад
* Обзор: Getting started with the web
* Далее


Всемирная сеть (веб) и веб-стандарты - Изучение веб-разработки

Всемирная сеть (веб) и веб-стандарты
====================================

Статья содержит общую информацию о всемирной сети (the Web) — откуда она взялась, что такое веб-стандарты, как они связанны, почему "веб разработчик" отличный карьерный выбор и чему полезному можно научиться изучая этот курс.

Краткая история сети веб
------------------------

Мы постарались максимально кратко изложить здесь информацию. Если вы более детально заинтересованы в истории веб сети, то попробуйте поискать это в интернете.

В конце 1960-х военные США разработали коммуникационную сеть ARPANET. Вполне можно её рассматривать в качестве прародителя современной сети, так как она работала с помощью коммутации пакетов, и для неё впервые была внедрена сетевая модель TCP/IP. Эти две технологии послужили основой, на которой затем был построен интернет.

В 1980 году Тим Бернерс-Ли (aka TimBL) написал программу под названием ENQUIRE, которая позволяла устанавливать связь между двумя узлами. Ничего не напоминает?

В 1989 году TimBL выступил в организации ЦЕРН с идеями о методах структурирования, обработке и обмена информацией (Information Management: A Proposal), предложив при этом концепцию "гипертекста". Идеи Тима были одобрены и он начал воплощать в реальность свой проект. Современная сеть построена на основании его работ.

К концу 1990-го года Тим Бернерс разработал все необходимые для запуска сети средства — HTTP, HTML, первый в мире веб браузер (WorldWideWeb), сервер HTTP и несколько веб страниц для наглядности.

В течение нескольких последующих лет веб сеть расширялась, выпускались новые браузеры, были установлены тысячи серверов и созданы миллионы веб страниц. Как и обещали, достаточно краткая история.

Стоит отметить, что в 1994 году TimBL основал консорциум Всемирной паутины (World Wide Web Consortium (W3C)) - организацию, связывающую множество компаний для сплочения усилий в области разработки веб технологий. После этого появились технологии, например, такие как CSS и JavaScript, которые преобразовали веб сеть в тот вид, в котором мы наблюдаем её сейчас.

Веб-стандарты
-------------

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

В качестве примера приведём стандарт HTML Living Standard. Он описывает как HTML (все элементы HTML, связанные с ними API и остальные близкие технологии) должны быть реализованы.

Веб-стандарты создаются организациями стандартов — институтами, которые приглашают группы людей из различных компаний для согласования того, как технологии должны применяться наиболее эффективным образом в рассматриваемых случаях. Самая известная организация веб-стандартов - W3C. Существуют и другие: WHATWG (ответственны за модернизацию языка html), ECMA (выпускают стандарты языка ECMAScript, на котором построен JavaScript), Khronos (создают технологии для 3D графики, например WebGL).

### "Открытые" стандарты

Один из ключевых аспектов веб-стандартов, который TimBL и W3C согласовали с самого начала, заключается в том, что сеть (и веб-технологии) должны быть свободны как для внесения вклада, так и для использования, и не должны быть обременены патентами/лицензированием. Таким образом, любой может бесплатно написать код для создания своего веб-сайта, и любой может внести свой вклад в процесс создания стандартов, в которых прописываются спецификации.

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

Это позволяет интернету оставаться свободно доступным общественным ресурсом.

### Не разорви сеть

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

Being a web developer is good
-----------------------------

The web industry is a very attractive market to enter if you are looking for a job. Recent published figures say that there are currently around 19 million web developers in the world, and that figure is set more than double in the next decade. And at the same time, there is a skill shortage in the industry — so what better time to learn web development?

It isn't all fun and games however — building web sites is a more complicated proposition than it used to be, and you'll have to put some time in to studying all the different technologies you need to use, all the techniques and best practices you need to know, and all the typical patterns you'll be called upon to implement. It'll take you a few months to really start to get into it, and then you'll need to keep learning so that your knowledge stays up-to-date with all the new tools and features that appear on the web platform, and keep practicing and refining your craft.

*The only constant is change.*

Does this sound hard? Don't worry — we aim to give you everything you need to know to get started, and things will get easier. Once you embrace the constant change and uncertainty of the web, you'll start to enjoy yourself. As a part of the web community, you'll have an entire web of contacts and useful material to help you, and you'll start to enjoy the creative possibilities it brings.

You're a digital creative now. Enjoy the experience, and the potential for earning a living.

Overview of modern web technologies
-----------------------------------

There are a number of technologies to learn if you want to be a front-end web developer. In this section we will describe them briefly. For a more detailed explanation of how some of them work together, read our article How the web works.

### Browsers

You are probably reading these words inside a web browser in this very moment (unless you've printed it out, or are using assistive technology, such as a screenreader to read it out to you). Web browsers are the software programs people use to consume the web, and include Firefox, Chrome, Opera, Safari, and Edge.

### HTTP

Hypertext Transfer Protocol, or HTTP, is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored). A typical conversation goes something like
```

"Hello web server. Can you give me the files I need to render bbc.co.uk"?

"Sure thing web browser — here you go"

[Downloads files and renders web page]
```

The actual syntax for HTTP messages (called requests and responses) is not that human-readable, but this gives you the basic idea.

### HTML, CSS, and JavaScript

HTML, CSS, and JavaScript are the main three technologies you'll use to build a website:

* Hypertext markup language, or **HTML**, is a markup language consisting of different elements you can wrap (mark up) content in to give it meaning (semantics) and structure. Simple HTML looks like this:

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

<p>This is a paragraph of text.</p>

<img src="cat.jpg" alt="A picture of my cat" />
```

If we adopted a house-building analogy, HTML would be like the foundations and walls of the house, which give it structure and hold it together.
* Cascading Style Sheets (**CSS**) is a rule-based language used to apply styles to your HTML, for example setting text and background colors, adding borders, animating things, or laying out a page in a certain way. As a simple example, the following code would turn our HTML paragraph red:

```css
p {
  color: red;
}
```

In the house analogy, CSS is like the paint, wallpaper, carpets and paintings you'd use to make the house look nice.
* **JavaScript** is the programming language we use to add interactivity to web sites, from dynamic style switching, to fetching updates from the server, right through to complex 3D graphics. The following simple JavaScript will store a reference to our paragraph in memory and change the text inside it:

```js
let pElem = document.querySelector("p");
pElem.textContent = "We changed the text!";
```

In the house analogy, JavaScript is like the cooker, TV, Microwave, or hairdryer — the things that give your house useful functionality
### Tooling

Once you've learned the "raw" technologies that can be used to build web pages (such as HTML, CSS, and JavaScript), you'll soon start to come across various tools that can be used to make your work easier or more efficient. Examples include:

* The developer tools inside modern browsers that can be used to debug your code.
* Testing tools that can be used to run tests to show whether your code is behaving as you intended it to.
* Libraries and frameworks built on top of JavaScript that allow you to build certain types of web site much more quickly and effectively.
* So-called "Linters", which take a set of rules, look at your code, and highlight places where you haven't followed the rules properly.
* Minifiers, which remove all the whitespace from your code files to make it so that they are smaller and therefore download from the server more quickly.
### Server-side languages and frameworks

HTML, CSS, and JavaScript are front-end (or client-side) languages, which means they are run by the browser to produce a website front-end that your users can use.

There are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the browser to be displayed. A typical use for a server-side language is to get some data out of a database and generate some HTML to contain the data, before then sending the HTML over to the browser to display it to the user.

Example server-side languages include ASP.NET, Python, PHP, and NodeJS.

Web best practices
------------------

We have briefly talked about the technologies that you'll use to build websites. Now let's discuss the best practices you should employ to make sure you are using those technologies in the best way that you can.

When doing web development, the main cause of uncertainty comes from the fact that you don't know what combination of technology each user will use to view your web site:

* User 1 might be looking at it on an iPhone, with a small, narrow screen.
* User 2 might be looking at it on a Windows laptop with a widescreen monitor attached to it.
* User 3 might be blind, and using a screenreader to read the web page out to them.
* User 4 might be using a really old desktop machine that can't run modern browsers.

Because you don't know exactly what your users will use, you need to design defensively — make your web site as flexible as possible, so that all of the above users can make use of it, even if they might not all get the same experience. In short, we are trying to make the web work for all, as much as possible.

You'll come across the below concepts at some point in your studies.

* **Cross-browser compatibility** is the practice of trying to make sure your webpage works across as many devices as possible. This includes using technologies that all the browsers support, delivering better experiences to browsers that can handle them (progressive enhancement), and/or writing code so that it falls back to a simpler but still usable experience in older browsers (graceful degradation). It also involves a lot of testing to see if anything fails in certain browsers, and then more work to fix those failures.
* **Responsive web design** is the practice of making your functionality and layouts flexible so they can automatically adapt to different browsers. An obvious example is a website that is laid out one way in a widescreen browser on the desktop, but displays as a more compact, single-column layout on mobile phone browsers. Try adjusting the width of your browser window now, and see what happens.
* **Performance** means getting web sites to load as quickly as possible, but also making them intuitive and easy to use so that users don't get frustrated and go somewhere else.
* **Accessibility** means making your websites usable by as many different kinds of people as possible (related concepts are diversity and inclusion, and inclusive design). This includes people with visual impairments, hearing impairments, cognitive disabilities, or physical disabilities. It also goes beyond people with disabilities — how about young or old people, people from different cultures, people using mobile devices, or people with unreliable or slow network connections?
* **Internationalization** means making websites usable by people from different cultures, who speak different languages to your own. There are technical considerations here (such as altering your layout so that it still works OK for right-to-left, or even vertical languages), and human ones (such as using simple, non-slang language so that people who have your language as their second or third language are more likely to understand your text).
* **Privacy & Security**. These two concepts are related but different. Privacy refers to allowing people to go about their business privately and not spying on them or collecting more of their data than you absolutely need to. Security refers to constructing your website in a secure way so that malicious users cannot steal information contained on it from you or your users.
See also
--------

* History of the World Wide Web
* How does the internet work?


Работа с файлами - Изучение веб-разработки

Работа с файлами
================

* Назад
* Обзор: Getting started with the web
* Далее

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

Где ваш веб-сайт должен располагаться на вашем компьютере?
----------------------------------------------------------

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

1. Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем `web-projects` (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.
2. Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её `test-site` (или как-то более творчески).
Небольшое отступление о регистре и пробелах
-------------------------------------------

Вы заметите, что в этой статье, мы просим вас называть папки и файлы полностью в нижнем регистре без пробелов. Это потому что:

1. Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в `test-site/MyImage.jpg`, а затем в другом файле вы пытаетесь вызвать изображение как `test-site/myimage.jpg`, это может не сработать.
2. Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: `my-file.html` лучше чем `my_file.html`.

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

Какую структуру должен иметь ваш веб-сайт?
------------------------------------------

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

1. **`index.html`**: Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем `index.html` и сохраните его прямо внутри вашей папки `test-site`.
2. **Папка `images`**: Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем `images` внутри вашей папки `test-site`.
3. **Папка `styles`**: Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем `styles` внутри вашей папки `test-site`.
4. **Папка `scripts`**: Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем `scripts` внутри вашей папки `test-site`.

**Примечание:** На компьютерах под управлением Windows у вас могут возникнуть проблемы с отображением имён файлов, поскольку у Windows есть опция **Скрывать расширения для известных типов файлов**, включённая по умолчанию. Обычно вы можете отключить её, перейдя в проводник, выбрать вариант **Свойства папки...** и снять флажок **Скрывать расширения для зарегистрированных типов файлов**, затем щёлкнуть **OK**. Для получения более точной информации, охватывающей вашу версию Windows, вы можете произвести поиск в Интернете.

Файловые пути
-------------

Для того, чтобы файлы общались друг с другом, вы должны указать файлам путь друг к другу - обычно один файл знает, где находится другой. Чтобы продемонстрировать это, мы вставим немного HTML в наш файл `index.html` и научим его отображать изображение, которое вы выбрали в статье "Каким должен быть ваш веб-сайт?"

1. Скопируйте изображение, которое вы выбрали ранее, в папку `images`.
2. Откройте ваш файл `index.html` и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим структуры более подробно.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <img src="" alt="Моё тестовое изображение" />
  </body>
</html>
```

3. Строка `<img src="" alt="Моё тестовое изображение">` - это HTML код, который вставляет изображение на страницу. Мы должны сказать HTML, где находится изображение. Изображение находится внутри папки *images*, которая находится в той же директории что и `index.html`. Чтобы спуститься вниз по нашей файловой структуре от `index.html` до нашего изображения, путь к файлу должен выглядеть так `images/your-image-filename`. Например наше изображение, названное `firefox-icon.png`, имеет такой путь к файлу: `images/firefox-icon.png`.
4. Вставьте путь к файлу в ваш HTML код между двойными кавычками `src=""`.
5. Сохраните ваш HTML файл, а затем загрузите его в вашем браузере (двойной щелчок по файлу). Вы должны увидеть вашу новую веб-страницу, отображающую ваше изображение!

![A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files/website-screenshot.png)

Некоторые общие правила о путях к файлам:

* Для ссылки на целевой файл в той же директории, что и вызывающий HTML файл, просто используйте имя файла, например, `my-image.jpg`.
* Для ссылки на файл в поддиректории, напишите имя директории в начале пути, плюс косую черту (forwardslash, слеш), например: `subdirectory/my-image.jpg`.
* Для ссылки на целевой файл в директории **выше** вызывающего HTML файла, напишите две точки. Например, если `index.html` находится внутри подпапки `test-site`, а `my-image.png` - внутри `test-site`, вы можете обратиться к `my-image.png` из `index.html`, используя `../my-image.png`.
* Вы можете комбинировать их так, как вам нравится, например `../subdirectory/another-subdirectory/my-image.png`.

На данный момент это все, что вам нужно знать

**Примечание:** Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например `C:\windows`. Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.

Что должно быть сделано?
------------------------

К настоящему моменту структура вашей папки должна выглядеть примерно так:

![A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files/file-structure.png)

* Назад
* Обзор: Getting started with the web
* Далее


Основы JavaScript - Изучение веб-разработки

Основы JavaScript
=================

* Назад
* Обзор: Getting started with the web
* Далее

JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.

Что такое JavaScript на самом деле?
-----------------------------------

JavaScript ("JS" для краткости) — это полноценный динамический язык программирования, который применяется к HTML документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.

JavaScript невероятно универсален и дружелюбен к новичкам. Обладая большим опытом, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!

JavaScript сам по себе довольно компактный, но очень гибкий. Разработчиками написано большое количество инструментов поверх основного языка JavaScript, которые разблокируют огромное количество дополнительных функций с очень небольшим усилием. К ним относятся:

* Программные интерфейсы приложения (API), встроенные в браузеры, обеспечивающие различные функциональные возможности, такие как динамическое создание HTML и установку CSS стилей, захват и манипуляция видеопотоком, работа с веб-камерой пользователя или генерация 3D графики и аудио сэмплов.
* Сторонние API позволяют разработчикам внедрять функциональность в свои сайты от других разработчиков, таких как Twitter или Facebook.
* Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.

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

Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!

Пример "hello world"
--------------------

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

Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать "hello world!" пример (стандарт в начальных примерах программирования).

**Предупреждение:** **Важно**: Если вы не следили за остальным нашим курсом, скачайте этот пример кода и используйте его в качестве стартовой точки.

1. Для начала перейдите на ваш тестовый сайт и создайте папку с именем 'scripts' (без кавычек). Затем, в новой папке скриптов, которую вы только что создали, создайте новый файл с именем `main.js`. Сохраните его в вашей папке `scripts`.
2. Далее перейдите в ваш `index.html` файл и введите следующий элемент на новой строке прямо перед закрывающим тегом `</body>`:

```html
<script src="scripts/main.js"></script>
```

3. В основном этот код выполняет ту же работу, что и элемент `<link>` для CSS — добавляет JavaScript на страницу, позволяя ему взаимодействовать с HTML (и CSS, и чем-нибудь ещё на странице).
4. Теперь добавьте следующий код в файл `main.js`:

```js
var myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";
```

5. Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите `index.html` в браузере. Вы должны увидеть что-то вроде этого:
 ![](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics/hello-world.png)

**Примечание:** Причиной, по которой мы поставили элемент `<script>` в нижней части HTML файла, является то, что HTML-элементы загружаются браузером в том порядке, в котором они расположены в файле. Поэтому, если JavaScript загружается первым и ему нужно взаимодействовать с HTML ниже его, он не сможет работать, так как JavaScript будет загружен раньше, чем HTML, с которым нужно работать. Поэтому, располагать JavaScript в нижней части HTML страницы считается лучшей стратегией.

### Что произошло?

Итак, ваш заголовок текста был изменён на "Hello world!" с помощью JavaScript. Мы сделали это с помощью вызова функции `querySelector()`, захватив ссылку на наш заголовок и сохранив её в переменной, названной `myHeading`. Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.

После этого, вы устанавливаете значение переменной `myHeading` в `textContent` свойство (которое представляет собой контент заголовка) "Hello world!".

Ускоренный курс по основам языка
--------------------------------

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

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

### Переменные

Переменные — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова `var` (не рекомендуется, продолжайте читать, чтобы получить объяснения) или `let`, за которым следует любое имя, которым вы захотите её назвать:

```js
let myVariable;
```

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

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

**Примечание:** JavaScript чувствителен к регистру — `myVariable` отличается от переменной `myvariable`. Если у вас возникают проблемы в вашем коде, проверьте регистр!

>
> \*\*Примечание:\*\*Для получения более подробной информации о разнице между var и let, смотрите: Разница между var и let.
>
>
>

После объявления переменной вы можете присвоить ей значение:

```js
myVariable = "Bob";
```

Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:

```js
var myVariable = "Bob";
```

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

```js
myVariable;
```

После установки значения переменной вы можете изменить его позже:
```

var myVariable = 'Bob';
myVariable = 'Steve';
```

Обратите внимание, что переменные имеют разные типы данных:

| Переменная | Пояснение | Пример |
| --- | --- | --- |
| String | Последовательность текста, называемая строкой. Чтобы указать, что это значение является строкой, вы должны заключить его в кавычки. | `var myVariable = 'Bob';` |
| Number | Числа. Числа не имеют кавычек вокруг них. | `var myVariable = 10;` |
| Boolean | Значение True(Правда)/False(Ложь). Слова `true` и `false` специальные ключевые слова в JS, и не нуждаются в кавычках. | `var myVariable = true;` |
| Array | Массив, который позволяет хранить несколько значений в одной ссылке. | `var myVariable = [1,'Bob','Steve',10];` Обратиться к каждому элементу массива можно так: `myVariable[0]`, `myVariable[1]`, и т.д. |
| Object | В принципе, что угодно. Все в JavaScript является объектом, и может храниться в переменной. Имейте это в виду, пока вы учитесь. | `var myVariable = document.querySelector('h1');` Все это из вышеприведённых примеров. |

Так для чего нам нужны переменные? Что ж, переменные должны были сделать что-нибудь интересное в программировании. Если значения не могли бы изменяться, то вы не могли бы ничего сделать динамическим, например, персонализировать приветственное сообщение или сменить изображение, отображаемое в галерее изображений.

### Комментарии

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

```js
/\*
Всё, что находится тут - комментарий.
\*/
```

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

```js
// Это комментарий
```

### Операторы

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

| Оператор | Пояснение | Символ(ы) | Пример |
| --- | --- | --- | --- |
| Сложение (Конкатенация) | Используется для сложения двух чисел или склеивания двух строк вместе. | `+` | `6 + 9; "Hello " + "world!";` |
| Вычитание, Умножение, Деление | Они делают то, чего вы от них ожидаете в математике. | `-`, `*`, `/` | `9 - 3; 8 * 2; // умножение в JS это звёздочка 9 / 3;` |
| Присваивание | Вы уже это видели: он присваивает значение переменной. | `=` | `var myVariable = 'Bob';` |
| Равенство (Тождество) | Делает проверку, если увидит, что два значения равны друг другу, то возвращает результат `true`/`false` (Boolean). | `===` | `var myVariable = 3; myVariable === 4;` |
| Отрицание (Неравенство) | Возвращает логически противоположное значение, которое ему предшествует; превращает `true` в `false`, и т.д. Когда используется вместе с оператором равенства, оператор отрицания проверяет, являются ли два значения *не* равными. | `!`, `!==` | Основное выражение `true`, но сравнение возвращает `false`, потому что мы отрицаем его: `var myVariable = 3; !(myVariable === 3);`Здесь мы проверяем "`myVariable` НЕ равно 3". Это возвращает `false`, потому что `myVariable` равно 3. `var myVariable = 3; myVariable !== 3;` |

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

**Примечание:** Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите `"35" + "25"` в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, `35 + 25`, то получите правильный результат.

### Условия

Условия — это конструкции в коде, которые позволяют проверить истинность или ложность выражения и выполнить другой код в зависимости от полученного результата. Самая распространённая форма условия — инструкция `if ... else`. Например:

```js
var iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Yay, I love chocolate ice cream!");
} else {
  alert("Awwww, but chocolate is my favorite...");
}
```

Выражение внутри `if ( ... )` — это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную `iceCream` со строкой `chocolate` и увидеть равны ли они. Если это сравнение возвращает `true`, выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции `else`.

### Функции

Функции - способ упаковки функциональности, которую вы хотите использовать повторно. Всякий раз, когда вам нужна определённая процедура, вы можете просто вызвать функцию по её имени, а не переписывать весь код каждый раз. Вы уже видели некоторые функции, описанные выше, например:

```js
var myVariable = document.querySelector("h1");
```

```js
alert("hello!");
```

Эти функции, `document.querySelector` и `alert`, встроены в браузер для того, чтобы вы использовали их всякий раз, когда вам это необходимо.

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

Например, функция `alert()` вызывает всплывающий блок, появляющийся в окне браузера, но мы должны дать ему строку в качестве аргумента, чтобы сказать функции, что писать во всплывающем блоке.

Хорошая новость заключается в том, что вы можете определить свои собственные функции — в следующем примере мы напишем простую функцию, которая принимает два числа в качестве аргументов и умножает их:

```js
function multiply(num1, num2) {
  var result = num1 \* num2;
  return result;
}
```

Попробуйте запустить вышеупомянутую функцию в консоли, затем попробуйте изменить аргументы, например:

```js
multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);
```

**Примечание:** Инструкция `return` сообщает браузеру, что нужно вернуть переменную `result` из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется областью видимости (en-US) переменной. (Читайте больше об области видимости переменных.)

### События

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

```js
document.querySelector("html").onclick = function () {
  alert("Ouch! Stop poking me!");
};
```

Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем `<html>` элемент и устанавливаем ему обработчик свойства `onclick` (en-US) анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика.

Обратите внимание, что

```js
document.querySelector("html").onclick = function () {};
```

эквивалентно

```js
var myHTML = document.querySelector("html");
myHTML.onclick = function () {};
```

Просто так короче.

Прокачаем пример нашего веб-сайта
---------------------------------

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

### Добавление смены изображения

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

1. В первую очередь найдите другое изображение, которые вы хотели бы показать на вашем сайте. Убедитесь что оно такого же размера, как ваше первое изображение или максимально близкое к нему.
2. Сохраните изображение в вашу папку `images`.
3. Переименуйте это изображение в 'firefox2.png' (без кавычек).
4. Перейдите в ваш файл `main.js` и введите следующий JavaScript. (Если ваш "hello world" JavaScript по-прежнему существует, удалите его.)

```js
var myImage = document.querySelector("img");

myImage.onclick = function () {
  var mySrc = myImage.getAttribute("src");
  if (mySrc === "images/firefox-icon.png") {
    myImage.setAttribute("src", "images/firefox2.png");
  } else {
    myImage.setAttribute("src", "images/firefox-icon.png");
  }
};
```

5. Сохраните все файлы и загрузите `index.html` в браузере. Теперь, когда вы щёлкните по изображению, оно должно измениться на другое!

Итак, мы сохраняем ссылку на наш элемент `<img>` в переменной `myImage`. Далее, мы создаём этой переменной обработчик события `onclick` с анонимной функцией. Теперь, каждый раз, когда на этот элемент изображения щёлкнут:

1. Мы получаем значение из атрибута `src` изображения.
2. Мы используем условие для проверки значения `src,` равен ли путь к исходному изображению:
    1. Если это так, мы меняем значение `src` на путь ко 2-му изображению, заставляя другое изображение загружаться внутри элемента `<image>`.
    2. Если это не так (значит, оно должно было уже измениться), мы меняем значение `src`, возвращаясь к первоначальному пути изображения, каким он был изначально.
### Добавление персонального приветственного сообщения

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

1. В `index.html`, добавьте следующую строку перед элементом `<script>`:

```html
<button>Change user</button>
```

2. В `main.js`, добавьте следующий код в конец файла, точно так, как написано - он захватит ссылки на новую кнопку и заголовок, и сохранит их в переменные:

```js
var myButton = document.querySelector("button");
var myHeading = document.querySelector("h1");
```

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

```js
function setUserName() {
  var myName = prompt("Please enter your name.");
  localStorage.setItem("name", myName);
  myHeading.textContent = "Mozilla is cool, " + myName;
}
```

Эта функция содержит функцию `prompt()` (en-US), которая вызывает диалоговое окно, немного похожее на `alert()` кроме того, что `prompt()` просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает **OK**. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием `localStorage`, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию `setItem()` из localStorage для создания и хранения данных в свойстве под названием `'name'`, и устанавливаем это значение в переменную `myName`, которая содержит имя введённое пользователем. В конце мы устанавливаем `textContent` заголовку в виде строки и имени пользователя.
4. Затем добавьте блок `if ... else` - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке:

```js
if (!localStorage.getItem("name")) {
  setUserName();
} else {
  var storedName = localStorage.getItem("name");
  myHeading.textContent = "Mozilla is cool, " + storedName;
}
```

Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте `name`. Если нет, то функция `setUserName()` запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохранённое имя, с помощью `getItem()` и устанавливаем `textContent` заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри `setUserName()`.
5. Наконец, установите обработчик события `onclick` на кнопку. При нажатии кнопки запускается функция `setUserName()`. Это позволяет пользователю установить новое имя, всякий раз, когда он захочет, нажатием кнопки:

```js
myButton.onclick = function () {
  setUserName();
};
```

Теперь, когда вы впервые заходите на сайт, он попросит вас указать имя пользователя, а затем предоставит вам персональное сообщение. Вы можете изменить имя в любое время, нажав на кнопку. В качестве дополнительного бонуса, поскольку имя хранится внутри localStorage, оно сохраняется после закрытия сайта, сохраняя при этом персонализированное сообщение при следующем открытии сайта!

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

Если вы следовали всем инструкциям в этой статье, в конечном итоге вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):

![](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics/website-screen-scripted.png)

Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на Github.

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

* Назад
* Обзор: Getting started with the web
* Далее


Введение в объекты JavaScript - Изучение веб-разработки

Введение в объекты JavaScript
=============================

В JavaScript большинство сущностей являются объектами, начиная с самой основной функциональности JavaScript, такой как строки (strings) и массивы (array), и заканчивая встроенными в браузер API. Вы можете даже создавать свои собственные объекты, чтобы инкапсулировать связанные между собой функции и переменные в эффективные пакеты и действовать как удобные хранилища данных. Понимание объектно-ориентированной природы JavaScript очень важно, если вы хотите продолжить дальнейшее более углублённое изучение языка. Поэтому мы предоставляем вам данный модуль, чтобы помочь вам разобраться в этом. Здесь мы детально обучим вас теории и синтаксису объектов, а затем рассмотрим, как создавать свои собственные объекты.

Необходимые знания
------------------

Перед тем, как начать изучение данного модуля, Вы должны иметь некоторое представление о HTML и CSS. Мы советуем вам поработать над разделами Введение в HTML и Введение в CSS перед изучением этого модуля JavaScript.

Также вам необходимо знать основы JavaScript перед подробным изучением объектов JavaScript. Предварительно поработайте с разделами Первые шаги в JavaScript и Структурные элементы в JavaScript перед началом изучения данного модуля.

**Примечание:** Если вы работаете за компьютером/планшетом/другим устройством, на котором у вас нет возможности создавать собственные файлы, постарайтесь поработать с примерами кода на платформах онлайн-программирования, таких, как JSBin or Thimble.

Руководства
-----------

Основы объектов

В первой статье мы рассмотрим объекты в JavaScript. Мы будем разбирать основы синтаксиса объектов JavaScript и заново изучим некоторые возможности JavaScript, которые мы уже исследовали ранее на курсе, подтвердив тот факт, что большая часть функциональности, с которой мы уже столкнулись, в действительности является объектами.

Объектно-ориентированный JavaScript для начинающих (en-US)

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

Прототипы объектов

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

Наследование в JavaScript

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

Работа с JSON-данными

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

Практика построения объектов

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

Задания
-------

Добавление функциональности к демо с прыгающими шариками

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


Решите общие проблемы в вашем JavaScript-коде - Изучение веб-разработки

Решите общие проблемы в вашем JavaScript-коде
=============================================

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

Частые ошибки начинающих
------------------------

### Правильное написание и оболочка

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

Некоторые общие встроенные функции браузера, которые вызывают проблемы:

| Correct | Wrong |
| --- | --- |
| `getElementsByTagName()` | `getElementbyTagName()` |
| `getElementsByName()` | `getElementByName()` |
| `getElementsByClassName()` | `getElementByClassName()` |
| `getElementById()` | `getElementsById()` |

### Положение двоеточия / точки с запятой

Вам нужно убедиться, что вы не помещаете точки с запятой неправильно. Например:

| Correct | Wrong |
| --- | --- |
| `elem.style.color = 'red';` | `elem.style.color = 'red;'` |

### Функции

Есть ряд вещей, которые могут пойти не так с функциями.

Одна из наиболее распространённых ошибок - объявить функцию, но нигде ее не вызвать. Например

:

```js
function myFunction() {
  alert("This is my function.");
}
```

Этот код ничего не сделает, если вы его не вызовете, например

```js
myFunction();
```

#### Область действия

Помните, что functions have their own scope —вы не можете получить доступ к значению переменной, установленному внутри функции извне функции, если вы не объявили переменную глобально (т. е. не внутри каких-либо функций), или return the value из функции.

#### Запуск кода после оператора возврата

Помните также, что когда вы возвращаете значение из функции, интерпретатор JavaScript выходит из функции - никакой код после выполнения оператора return не выполняется.

Фактически, некоторые браузеры (например, Firefox) выдадут вам сообщение об ошибке в консоли разработчика, если у вас есть код после оператора return. Firefox даёт вам «недостижимый код после оператора возврата».

### Обозначение объекта по сравнению с обычным назначением

Когда вы назначаете что-то в JavaScript, вы используете один знак равенства, например:

```js
var myNumber = 0;
```

Это не работает в Objects, однако - с объектами, вам нужно отделить имена членов от их значений, используя двоеточия, и разделить каждый элемент запятой, например:

```js
var myObject = {
  name: "Chris",
  age: 38,
};
```

Основные определения
--------------------

* What is JavaScript?
* What is a variable?
* What are strings?
* What is an array?
* What is a loop?

* What is a function?
* What is an event?
* What is an object?
* What is JSON?
* What is a web API?
* What is the DOM?
Basic use cases
---------------

### General

* How do you add JavaScript to your page?
* How do you add comments to JavaScript code?
### Variables

* How do you declare a variable?
* How do you initialize a variable with a value?
* How do you update a variable's value? (also see Assignment operators)
* What data types can values have in JavaScript?
* What does 'loosely typed' mean?
### Math

* What types of number do you have to deal with in web development?
* How do you do basic math in JavaScript?
* What is operator precedence, and how is it handled in JavaScript?
* How do you increment and decrement values in JavaScript?
* How do you compare values in JavaScript? (e.g. to see which one is bigger, or to see if one value is equal to another).
### Strings

* How do you create a string in JavaScript?
* Do you have to use single quotes or double quotes?
* How do you escape characters in strings?
* How do you join strings together?
* Can you join strings and numbers together?
* How do you find the length of a string?
* How you find what character is at a certain position in a string?
* How do you find and extract a specific substring from a string?
* How do you change the case of a string?
* How do you replace one specific substring with another?
### Arrays

* How do you create an array?
* How do you access and modify the items in an array? (this includes multidimensional arrays)
* How do you find the length of an array?
* How you add and remove array items?
* How do you split a string into array items, or join array items into a string?
### Debugging JavaScript

* What are the basic types of error?
* What are browser developer tools, and how do you access them?
* How do you log a value to the JavaScript console? (en-US)
* How do you use breakpoints, and other JavaScript debugging features? (en-US)

For more information on JavaScript debugging, see Handling common JavaScript problems (en-US); also see Other common errors for a description of common errors.

### Making decisions in code

* How do you execute different blocks of code, depending on a variable's value or other condition?
* How do you use if ...else statements?
* How do nest one decision block inside another?
* How do you use AND, OR, and NOT operators in JavaScript?
* How do you conveniently handle a large number of choices for one condition?
* How do you use a ternary operator to make a quick choice between two options based on a true or false test?
### Looping/iteration

* How do you run the same bit of code over and over again?
* How do you exit a loop before the end if a certain condition is met?
* How do you skip to the next iteration of a loop if a certain condition is met?
* How do you use while and do ... while loops?
* How to iterate over the elements in an array
* How to iterate over the elements in a multidimensional array
* How to iterate over the members in an object
* How to iterate over the members of an object nested inside an array
Intermediate use cases
----------------------

### Functions

* How do you find functions in the browser?
* What is the difference between a function and a method?
* How do you create your own functions?
* How do you run (call, or invoke) a function?
* What is an anonymous function?
* How do you specify parameters (or arguments) when invoking a function?
* What is function scope?
* What are return values, and how do you use them?
### Objects

* How do you create an object?
* What is dot notation?
* What is bracket notation?
* How do you get and set the methods and properties of an object?
* What is `this`, in the context of an object?
* What is object-oriented programming?
* What are constructors and instances, and how do you create them? (en-US)
* What different ways are there to create objects in JavaScript? (en-US)
### JSON

* How do you structure JSON data, and read it from JavaScript?
* How can you load a JSON file into a page?
* How do you convert a JSON object to a text string, and back again?
### Events

* What are event handlers and how do you use them?
* What are inline event handlers?
* What does the `addEventListener()` function do, and how do you use it?
* Which mechanism should I use to add event code to my web pages?
* What are event objects, and how do you use them?
* How do you prevent default event behaviour?
* How do events fire on nested elements? (event propagation, also related — event bubbling and capturing)
* What is event delegation, and how does it work?
### Object-oriented JavaScript

* What are object prototypes?
* What is the constructor property, and how can you use it?
* How do you add methods to the constructor?
* How do you create a new constructor that inherits its members from a parent constructor?
* When should you use inheritance in JavaScript?
### Web APIs

* How do you manipulate the DOM (e.g. adding or removing elements) using JavaScript?


Асинхронный JavaScript - Изучение веб-разработки

Асинхронный JavaScript
======================

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

Необходимые знания
------------------

Асинхронный JavaScript довольно сложная тема, и мы советуем пройти Первые шаги в JavaScript и Блоки в JavaScript прежде чем начать эту тему.

**Примечание:** Если вы работаете за компьютером/планшетом/другим устройством где у вас нет возможности создавать собственные файлы, вы можете попробовать(почти все) примеры кода в одном из веб-приложений, таких, как JSBin или Thimble.

Руководства
-----------

Введение в асинхронный JavaScript

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

Обработка асинхронных операций с помощью Промисов

Расскажем о промисах и том, как использовать API на их основе, а также объясним как работает функция с `async` и оператор `await`.

Реализация API на основе Промисов (en-US)

Статья о том, как реализовать собственный API на основе промисов.

Введение в воркеры (en-US)

Воркеры позволяют запускать код в отдельном потоке и не блокировать основной поток, чтобы код в нём оставался отзывчивым. В статье мы перепишем «тяжелую» синхронную функцию с использованием воркера.

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

* Асинхронное программирование из фантастической онлайн книги Марина Хавербеке, Выразительный JavaScript.


Клиентский веб API - Изучение веб-разработки

Клиентский веб API
==================

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

Прежде чем начать
-----------------

Убедитесь, что вы прочли и хорошо разбираетесь в следующих модулях (Первые шаги, Структурные элементы, и Введение в объекты). Эти модули включали в себя простое использование API, так как зачастую без них сложно писать примеры клиентского кода JavaScript. В данном модуле мы предполагаем, что вы хорошо знакомы с основами JavaScript, и немного подробнее рассмотрим общие веб-API.

Естественно знание HTML и CSS здесь также необходимо.

**Примечание:** Если вы работаете на устройстве, где у вас нет возможности создавать свои собственные файлы, вы можете проверить большинство примеров кода в онлайн-программах вроде JSBin или Thimble.

Руководства
-----------

Введение в различные web API

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

Управление документами

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

Получение данных с сервера

Другой очень распространённой задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки абсолютно новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые позволяют это, например `XMLHttpRequest` и Fetch API.

Сторонние API

API, которые мы рассматривали до сих пор, встроены в браузер, но не все API встроены в браузер. Многие крупные веб-сайты и сервисы, такие как Google Maps, Twitter, Facebook, PayPal и т.д. предоставляют API-интерфейсы, позволяющие разработчикам использовать свои данные (например, показывать ваш Twitter-поток в вашем блоге) или сервисы (например, отображение пользовательских карт Google на вашем сайте, или с помощью входа в систему Facebook для входа в систему пользователей). В этой статье рассматривается различие между API браузера и сторонними API и показано типичное использование последнего.

Рисование графики (en-US)

В браузере содержатся очень мощные инструменты графического программирования, начиная с языка Scalable Vector Graphics (SVG) и заканчивая API для рисования элементов HTML `<canvas>` (см. The Canvas API и WebGL). В статье содержится введение в Canvas API и дополнительные ресурсы, чтобы вы могли узнать больше.

Видео и аудио API (en-US)

HTML5 поставляется с элементами для размещения мультимедийных материалов в документах - `<video>` и `<audio>` - которые, в свою очередь, имеют свои собственные API для управления воспроизведением, поиском и т. д. В статье показано, как выполнять общие задачи, такие как создание пользовательских элементов управления воспроизведением.

Клиентское хранилище

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


Структурные элементы JavaScript - Изучение веб-разработки

Структурные элементы JavaScript
===============================

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

Предварительное условие
-----------------------

До начала изучения следующего раздела вам нужно тщательно ознакомиться с основами HTML и CSS, так же обязательно прочтите курс "Первые шаги в JavaScript".

**Примечание:** если устройство на котором вы изучаете данный курс не позволяет создавать/сохранять файлы, в большинстве случаев примеры кода могут быть запущены в таких онлайн приложениях как JSBin или Thimble.

Руководства
-----------

Принятие решений в вашем коде — условные конструкции

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

Зацикливание кода

Иногда требуется, чтобы действие исполнялось несколько раз подряд. Например, при просмотре списка имён. В программировании для данной цели успешно применяются циклы. Здесь мы познакомимся с использованием циклов в JavaScript.

Функции — блоки кода используемые многократно

Другая необходимая концепция в программировании это **функции**. **Функции** позволяют сохранить часть кода для решения определённой задачи в определённом блоке, и затем вызывать этот код, тогда, когда это тебе необходимо при помощи короткой команды — это намного лучше, чем писать один и тот же код несколько раз. В статье будут рассмотрена фундаментальная концепция функции: основной синтаксис, как вызывать и как определять функции, области видимости и параметры.

Создай свою функцию

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

Функции возвращают значения

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

Введение в события

События — это действия или явления, которые происходят в системе во время программирования, о которых система сообщает, и, при желании, на которые можно ответить. Например, когда пользователь кликает на кнопку на странице, возможно вы захотите вывести на экран блок с информацией, как ответ на это событие. В последней статье мы обсудим важные концепции, связанные с событиями, и увидим, как они работают в браузерах.

Проверка знаний
---------------

Следующая оценка проверит ваше понимание основ JavaScript, описанных в данном руководстве.

Фотогалерея

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


Первые шаги в JavaScript - Изучение веб-разработки

Первые шаги в JavaScript
========================

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

Предисловие
-----------

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

* Начало работы с Web (которое включает в себя общее введение в Javascript)
* Введение в HTML
* Введение в CSS

**Примечание:** Если вы работаете на компьютере, планшете или другом устройстве, где нет возможности полноценно работать с файлами, можете использовать такие онлайн сервисы как JSBin или Thimble, для запуска примеров кода.

Руководства
-----------

Что такое JavaScript?

Добро пожаловать на курс начинающего JavaScript разработчика от MDN! В первой статье мы рассмотрим JavaScript в общем приближении и постараемся ответить на вопросы "Что такое JavaScript?" и "Для чего он предназначен?", и закрепим верное понимание его назначения.

Первое погружение в JavaScript

Теперь, когда вы знаете кое-что о JavaScript, и что он может делать, мы предлагаем вам пройти интенсивный практический урок по базовой функциональности JavaScript. Здесь вы, шаг за шагом, создадите простую игру "Угадай число".

Что пошло не так? Устранение ошибок JavaScript

В процессе создания игры "Угадай число" из предыдущего урока, вы могли заметить что она не работала. Не стоит унывать - данная статья научит вас беречь собственные нервы, а так же, даст несколько советов о том как решать такие проблемы, искать и исправлять неполадки в JavaScript-коде.

Хранение нужной вам информации - Переменные

После прочтения предыдущих статей вы должны знать что из себя представляет JavaScript, что он может, как взаимодействует с другими web технологиями, и каковы его основные особенности в общем приближении. В этой статье спустимся к самым основам языка и поработаем с **Переменными**.

Базовая математика в JavaScript — числа и операторы

Здесь мы обсуждаем математику в JavaScript - каким образом мы можем манипулировать числами и операторами для работы с ними.

Работа с текстом — строки в JavaScript

Теперь мы обратим своё внимание на строки - так называются кусочки текста в программировании. В этой статье мы рассмотрим то что действительно необходимо знать про строки в JavaScript: как создать строку, делать escape (экранирование) символов с помощью кавычек, и объединять их.

Полезные строковые методы

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

Массивы

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

Проверка полученных знаний
--------------------------

Предложенное тестовое задание проверит ваше понимание основ JavaScript, которые вы получили пройдя предложенные выше уроки.

Генератор глупых историй

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