Введение
Алгоритмы и Блок-схемы
Все в программировании структурировано, подчиняется логике, алгоритмизированно.
Написание программы требует в первую очередь не знания языка, а умения строить логические цепочки, связывать события между собой, т.е. строить алгоритмы.
Алгоритм
В основе структурного программирования лежит триада
- последовательность
- ветвление
- цикл
Последовательность - выполнение действий одно за другим
Ветвление - выбор действия в зависимости от выполнения условия
Цикл - неоднократное повторение одной и той же последовательности действий
Программирование начинается с описания алгоритма
Алгоритм - это пошаговая система инструкций, определяющих процесс перехода от исходных данных ( на входе ) к искомому результату ( на выходе )
Если результат существует, алгоритм выполняется за конечное число шагов
Если искомого результата не существует, алгоритм или никогда не завершает работу, либо заходит в тупик
Одним из способов описания алгоритма является блок-схема
Блок-схемы
Определение
Блок-схемой называется графическое представление алгоритма. В блок-схеме шаг или последовательность шагов алгоритма представляется в виде блока, а между блоками устанавливаются связи.
Начало и конец алгоритма изображаются скругленными прямоугольниками, обычные действия - прямоугольниками, условия - ромбами, ввод и вывод данных - параллелограммами. Подробнее о блок-схеме можно почитать здесь.
Для примера построим блок-схему алгоритма написания программы.
Рекомендуется использовать Google Drawings (для этого необходима почта gmail)
Код и данные
Алгоритм, и, следовательно, программа его реализующая, включает в себя те или иные операции (код) над разнообразными данными.
12 + 2
В примере выше данными являются числа 2, кодом - оператор "+"
REPL
REPL (от англ. read-eval-print loop — цикл «чтение — вычисление — вывод») — форма организации простой интерактивной среды программирования в рамках средств интерфейса командной строки. википедия
REPL позволяет выполнять небольшие простые части кода (обычно часть строки-несколько строк) и сразу же видеть результат работы этого кода. Это очень удобно при изучении новых языков программирования, а также для экспериментов и отладки. Разобравшись с чем-то новым с помощью REPL строки кода могут быть добавлены в бОльшую программу.
Что происходит в REPL?
- Ввод строки на языке программирования. Текст считывается с того или иного поля ввода
- Выполнение этого кода, получение результата
- Вывод результата или ошибки как ответа пользователю.
Вы в любой момент можете взять интересующую Вас часть кода и проверить в REPL.
Даже если вы не знаете (пока) JS, вы можете использовать REPL как нормальный калькулятор.
Отладка
Браузер на обычном компьютере или ноутбуке содержит в себе средства отладки вида страницы (HTML/CSS) и сопутствующего JS-кода. Эти средства называются Developer Tools и вызываются по F12 Ctrl-Shift-I или Правая Кнопка->Посмотреть код элемента на странице.
Developer Tools содержит в себе множество средств отладки кода. Для хорошего понимания управляющих конструкций (условий и циклов) полезно разобраться с пошаговой отладкой - выполнением кода по шагам. Это позволяет увидеть, какие блоки кода выполняются или не выполняются в условных операторах и каковы значения переменных в каждый момент времени выполнения кода.
Для начала пошаговой отладки устанавливается точка останова - строка кода, с которой обычный режим выполнения прерывается и начинается отладка по шагам. В Developer Tools найдите вкладку Source, в ней свой файл c кодом, и кликните на номере нужной строки слева от текста кода.
Если вы используете repl.it, другие онлайн-IDE или console, то у вас будут определенные сложности с нахождением
вашего кода и строки в нём. Поэтому вы можете вставить ключевое слово debugger
в ваш код - это работает так же, как точка останова на
строке в Developer Tools.
Отладка по шагам.
Пошаговая отладка позволяет детально заглянуть в процесс выполнения вашего кода - вы можете узнать всё ли работает так, как нужно, в любой строке и таким образом упростить поиск логических ошибок в коде. Основные операции:
- Step over next function call (F10) - следующий шаг/оператор в вашем коде. После выполнения каждой команды вы можете ознакомится со значениями переменных, наведя на них курсор мыши, написав их в консоли, или же используя вкладку Watch
- Resume script execution (F8) - переход из режима отладки по шагам в обычный режим выполнения кода. Таким способом вы пропускаете хорошо отлаженные
части кода. Этот режим может быть прерван следующей точкой останова или ключевым словом
debugger
в коде. - Step into next function call (F11) - сделать следующий шаг в функцию, "зайти" в неё.
- Step out of current function (Shift-F11) - следующий шаг из функции, выйти из функции на уровень, который функцию вызвал.
Значение переменных и выражений
- Вы можете узнать значение переменных, наведя на них курсор мыши
- Вы можете узнать значение синтаксически верного выражения выделив его и наведя на него курсор мыши. Учтите, что при этом может быть вызвана та или иная функция и могут возникнуть побочные эффекты.
Пошаговая отладка и консоль (REPL).
Очень удобно использовать консоль и пошаговую отладку одновременно. Консоль предоставляет все переменные и их текущие значения, которые сейчас есть в отлаживаемом коде, таким образом вы можете поэкспериментировать с этими значениями и, например, запустить из консоли следующий проблемный оператор в коде или его часть для нахождения логической ошибки.
Редакторы кода
Codesandbox
CodeSandbox - это онлайн-редактор для быстрой веб-разработки. Позволяет создавать статических сайты, полнофункциональных веб-приложений или компонентов на любом устройстве с веб-браузером.
Visual code
VS code - редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений. Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, IntelliSense и средства для рефакторинга.
Atom
Atom — бесплатный текстовый редактор с открытым исходным кодом для Linux, macOS, Windows с поддержкой плагинов, написанных на Node.js, и встраиваемых под управлением Git.