# Введение в языки программирования и инструменты разработки

Этот урок охватывает основы языков программирования. Рассматриваемые здесь темы применимы к большинству современных языков программирования. В разделе «Инструменты разработки» вы узнаете о полезном программном обеспечении, которое поможет вам как разработчику.

![Введение в программирование](/sketchnotes/webdev101-programming.png)

> Скетчноут [Tomomi Imura](https://twitter.com/girlie_mac)

## Предлекционный квиз

[Предлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1)

## Введение

В этом уроке мы рассмотрим:

- Что такое программирование?
- Типы языков программирования
- Основные элементы программы
- Полезный софт и инструментарий для профессионального разработчика

> Этот урок можно пройти на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa)!

## Что такое программирование?

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

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

✅ Проведите небольшое исследование: кто считается первым в мире программистом?

## Языки программирования

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

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

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

Следующий код иллюстрирует разницу между языком высокого уровня (JavaScript) и языком низкого уровня (ARM ассемблер).

```javascript
let number = 10;
let n1 = 0,
  n2 = 1,
  nextTerm;

for (let i = 1; i <= number; i++) {
  console.log(n1);
  nextTerm = n1 + n2;
  n1 = n2;
  n2 = nextTerm;
}
```

```c
 area ascen,code,readonly
 entry
 code32
 adr r0,thumb+1
 bx r0
 code16
thumb
 mov r0,#00
 sub r0,r0,#01
 mov r1,#01
 mov r4,#10
 ldr r2,=0x40000000
back add r0,r1
 str r0,[r2]
 add r2,#04
 mov r3,r0
 mov r0,r1
 mov r1,r3
 sub r4,#01
 cmp r4,#00
 bne back
 end
```

Вы не поверите, но _они оба делают одно и то же_: выводят последовательность Фибоначчи до 10.

✅ Последовательность Фибоначчи [определена](https://ru.wikipedia.org/wiki/Числа_Фибоначчи) как набор чисел, каждое из которых является суммой двух предыдущих, начиная с 0 и 1.

## Элементы программы

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

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

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

✅ Вы узнаете больше об этом типе инструкций в следующих уроках.

## Инструметы разработки

[![Инструметы разработки](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")

> 🎥 Нажмите на изображение выше, чтобы просмотреть видео об инструментах

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

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

### Редакторы

Один из важнейших инструментов разработки программного обеспечения - редактор. Редакторы - это место, где вы пишете свой код, а иногда и где вы запускаете свой код.

Разработчики полагаются на редакторы кода и по нескольким дополнительным причинам.:

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

#### Популярные редакторы и расширения для веб-разработки

- [Visual Studio Code](https://code.visualstudio.com/)
  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Atom](https://atom.io/)
  - [spell-check](https://atom.io/packages/spell-check)
  - [teletype](https://atom.io/packages/teletype)
  - [atom-beautify](https://atom.io/packages/atom-beautify)

### Браузеры

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

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

#### Популярные браузеры и инструменты разработки

- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
- [Firefox](https://developer.mozilla.org/docs/Tools)

### Инструменты командной строки

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

### Популярные параметры командной строки

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

_💻 = предустановлен в операционной системе._

#### Windows

- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
- [mintty](https://mintty.github.io/)

#### MacOS

- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
- [iTerm](https://iterm2.com/)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)

#### Linux

- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)

#### Популярные инструменты командной строки

- [Git](https://git-scm.com/) (💻 on most operating systems)
- [NPM](https://www.npmjs.com/)
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)

### Документация

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

#### Популярная документация по веб-разработке

- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), от Mozilla, создателей браузера [Firefox](https://www.mozilla.org/firefox/)
- [Frontend Masters](https://frontendmasters.com/learn/)
- [Web.dev](https://web.dev), от Google, создателей браузера [Chrome](https://www.google.com/chrome/)
- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), для [Microsoft Edge](https://www.microsoft.com/edge)

✅ Проведите небольшое исследование: теперь, когда вы знаете основы среды веб-разработчика, сравните и сопоставьте ее со средой веб-дизайнера.

---

## 🚀 Челлендж

Сравните несколько языков программирования. В чем заключаются уникальные черты JavaScript и Java? Как насчет COBOL vs. Go?

## Постлекционный квиз

[Постлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2)

## Обзор и самообучение

Изучите немного разные языки программирования, доступные программисту. Попробуйте написать строку на одном языке, а затем повторите ее на двух других. Какие языки вы изучаете?

## Задание

[Чтение документации](assignment.md)