01DebugAndVars.md 18 KB
Введение, Отладка, Переменные и Типы данных
Алгоритмы и Блок-схемы
Все в программировании структурировано, подчиняется логике, алгоритмизированно.
Написание программы требует в первую очередь не знания языка, а умения строить логические цепочки, связывать события между собой, т.е. строить алгоритмы.
Для построения алгоритмов рекомендуется использовать блок-схемы. Первое время студентам настоятельно рекомендуется строить блок-схемы даже для самых простых задач, далее - только для тех, которые кажутся им сложными.
Блок-схемы
Блок-схемой называется графическое представление алгоритма. В блок-схеме шаг или последовательность шагов алгоритма представляется в виде блока, а между блоками устанавливаются связи.
Начало и конец алгоритма изображаются скругленными прямоугольниками, обычные действия - прямоугольниками, условия - ромбами, ввод и вывод данных - параллелограммами. Для более подробного ознакомления с блок-схемами читайте википедию на эту тему, и см. правило 2.
Для примера построим блок-схему алгоритма написания программы. Рекомендуется использовать Google Drawings (для этого создаем почту gmail, заходим на google drive, new->more->google drawings document)
Код и данные
Алгоритм, и, следовательно, программа его реализующая, включает в себя те или иные операции (код) над разнообразными данными.
2 + 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).
Очень удобно использовать консоль и пошаговую отладку одновременно. Консоль предоставляет все переменные и их текущие значения, которые сейчас есть в отлаживаемом коде, таким образом вы можете поэкспериментировать с этими значениями и, например, запустить из консоли следующий проблемный оператор в коде или его часть для нахождения логической ошибки.
Отладочный вывод
Вы всегда можете добавить console.log в место, где хотите получить информацию о состоянии программы. Этот способ хорош как дополнение к остальным.
Так же вы можете написать определенное условие для отладки, вставить в него console.log и поставить точку останова.
Комментирование как инструмент отладки
В любой момент вы можете выключить ту или иную часть кода, не стирая её с помощью синтаксиса комментариев.
var a = b + 5;
//a += prompt(); //однострочный комментарий, временно "выключаем" ввод пользователя.
//console.log(a); //выключенный отладочный вывод, что бы не мозолил глаза, пока не нужен
var c = somePerfectFunction(a) //функция работает хорошо
/* if (blahala){
asdfasdf
explodeMoon()
*/ //многострочный комментарий с большим куском кода, выключен потому что в нём куча ошибок.
Переменные, типы данных, базовые операции, скобки, выражения
Переменные
Переменной называется поименованная область в памяти, где хранятся данные. Переменная является ярлыком, меткой для определенной структуры данных определенного типа в оперативной памяти. Для того, чтобы создать переменную и записать в нее значение, используется оператор присвоения (=). Переменная может получать свое значение из других переменных с помощью операций над ними или другого кода. В целом можно сказать что код пишется для того, что бы одни данные (представленные в коде переменными) преобразовать к другим данным, которые нужны в результате исполнения программы.
Типы данных
Тип данных (тип) — множество значений и операций на этих значениях. Все виды данных в языках программирования можно отнести к двум группам: скалярные (простые) типы данных и структурированные (составные) типы данных.
Скалярные типы данных
- Number (число)
- Boolean (true или false)
Составные типы данных
- String (строка)
- Object (объект)
и другие.
На этом уроке мы работаем только со скалярным типом данных Number (число) и структурированным типом данных String(строка), представляющим собой последовательность символов. Подробнее структурированные типы данных будут рассмотрены на следующих уроках.
Далее представлены переменные различных типов:
var hands = 2; //количество рук
var fingersOnTheHand = 5; //количество пальцев на руках
var fingersOnTheFoot = fingersOnTheHand //на ногах - столько же
var foots = 2; //количество ног
var isEvening = true //сейчас вечер? - истина
var isSkyRed = false //небо красное? - ложь
var alphabet = "abcdefghijklmnopqrstuvwxyz" //строка с алфавитом
var capitalizedAlphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" //СТРОКА С АЛФАВИТОМ
Нестрогая динамическая типизация
Javascript - язык со нестрогой динамической типизацией.
Динамическая типизация означает, что одну и ту же переменную можно сначала инициализировать строкой, потом числом, потом булевым значением, и так далее. Языки со статической типизацией, как язык C, Java, подобного не позволяют.
Нестрогая типизация означает, что язык может сам определять и менять тип переменной в зависимости от контекста. К примеру, строка "1" может быть интерпретирована как число 1 в математических операциях, абсурдных для строки. У этого есть плюсы и минусы, однако надо быть аккуратным в использовании таких возможностей языка, из-за вероятности возникновения трудноустраняемых ошибок.
Простейшие операции
var totalFingers = foots*fingersOnTheFoot + hands*fingersOnTheHand //сколько всего пальцев на ногах и руках?
var numberOfLimbs = totalFingers / fingersOnTheHand //сколько у человека конечностей?
var numberOfHands = numberOfLimbs - foots //сколько у человека рук?
var numberOfOnes = 753 % 10 //количество единиц в числе 753
var Monday = 0; //программисты считают с нуля
var Tuesday = Monday;
Tuesday++; //инкремент, т. е. увеличение на 1
var Wednesday = Tuesday;
Wednesday += 1; //инкремент по-другому
var Saturday = 5;
var nextMonthWeekDay = ((28 % 7) + Wednesday) % 7 //в какой день недели будет следующее 1е число,
//если в этом месяце 28 день и начался этот месяц
//в среду?
Выражения
Выражением называется часть кода программы, которая при выполнении подменяется результатом (значением) её вычисления. Значение является экземпляром одного из типов данных JS. Обычно выражения вычисляются в первую очередь.
var a = 5
var b = 10
var c = a + b //эти две строки равнозначны
c = 15 //
var alphabet = "abcdefghijklmnopqrstuvwxyz" //строка с алфавитом
var alphabet2 = "abcdefghijklm" + "nopqrstuvwxyz" //строка с алфавитом
var alphabet3 = "abcdef" + "ghijklmnopqr" + "stuvwxyz" //строка с алфавитом
Для того, что бы убедится в том, что данная часть кода является выражением, оберните её в скобки. Если это не вызывает ошибки интерпретатора JS, значит данный кусок кода - выражение. Иначе это не выражение.
Первая программа.
В качестве первой программы мы сделаем конвертер валют, который в цикле спрашивает сумму, конвертирует и выводит сумму в другой валюте.
var USD2UAH = 27; //курс
var usdValue; //объявление переменной для результата
do{ //цикл
var uahValue = prompt("Введите сумму в грн.",""); //просим пользователя ввести сумму
usdValue = uahValue / USD2UAH; //переводим по курсу
alert("$ " + usdValue); //выводим сумму в долларах
}while(uahValue !== null) //пока пользователь не нажмет отмену