|
@@ -0,0 +1,229 @@
|
|
|
|
|
+# Введение, Отладка, Переменные и Типы данных
|
|
|
|
|
+
|
|
|
|
|
+## Алгоритмы и Блок-схемы
|
|
|
|
|
+Все в программировании структурировано, подчиняется логике, **алгоритмизированно**.
|
|
|
|
|
+
|
|
|
|
|
+Написание программы требует в первую очередь не знания языка, а умения строить логические цепочки, связывать события между собой, т.е. строить алгоритмы.
|
|
|
|
|
+
|
|
|
|
|
+Для построения алгоритмов рекомендуется использовать блок-схемы. Первое время студентам настоятельно рекомендуется строить блок-схемы даже для самых простых задач, далее - только для тех, которые кажутся им сложными.
|
|
|
|
|
+
|
|
|
|
|
+## Блок-схемы
|
|
|
|
|
+
|
|
|
|
|
+**Блок-схемой** называется графическое представление алгоритма. В блок-схеме шаг или последовательность шагов алгоритма представляется в виде блока, а между блоками устанавливаются связи.
|
|
|
|
|
+
|
|
|
|
|
+Начало и конец алгоритма изображаются скругленными прямоугольниками, обычные действия - прямоугольниками, условия - ромбами, ввод и вывод данных - параллелограммами. Для более подробного ознакомления с
|
|
|
|
|
+блок-схемами читайте [википедию](https://ru.wikipedia.org/wiki/%D0%91%D0%BB%D0%BE%D0%BA-%D1%81%D1%85%D0%B5%D0%BC%D0%B0) на эту тему, и см. правило 2.
|
|
|
|
|
+
|
|
|
|
|
+Для примера построим блок-схему алгоритма написания программы. Рекомендуется использовать Google Drawings (для этого создаем почту gmail, заходим на google drive, new->more->google drawings document)
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+## Код и данные
|
|
|
|
|
+
|
|
|
|
|
+Алгоритм, и, следовательно, программа его реализующая, включает в себя те или иные операции (код) над разнообразными данными.
|
|
|
|
|
+
|
|
|
|
|
+```javascript
|
|
|
|
|
+2 + 2
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+В примере выше данными являются числа 2, кодом - оператор "+"
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+## REPL
|
|
|
|
|
+
|
|
|
|
|
+**REPL** (от англ. *read-eval-print loop — цикл «чтение — вычисление — вывод»*) — форма организации простой интерактивной среды программирования в рамках средств интерфейса командной строки.
|
|
|
|
|
+[википедия](https://ru.wikipedia.org/wiki/REPL)
|
|
|
|
|
+
|
|
|
|
|
+REPL позволяет выполнять небольшие простые части кода (обычно часть строки-несколько строк) и сразу же видеть результат работы этого кода. Это очень удобно при изучении новых языков программирования, а также для
|
|
|
|
|
+экспериментов и отладки. Разобравшись с чем-то новым с помощью REPL строки кода могут быть добавлены в бОльшую программу.
|
|
|
|
|
+
|
|
|
|
|
+Что происходит в REPL?
|
|
|
|
|
+- Ввод строки на языке программирования. Текст считывается с того или иного поля ввода
|
|
|
|
|
+- Выполнение этого кода, получение результата
|
|
|
|
|
+- Вывод результата или ошибки как ответа пользователю.
|
|
|
|
|
+
|
|
|
|
|
+Вы в **любой** момент можете взять интересующую Вас часть кода и проверить в REPL.
|
|
|
|
|
+
|
|
|
|
|
+Даже если вы не знаете (пока) **JS**, вы можете использовать **REPL** как нормальный калькулятор.
|
|
|
|
|
+
|
|
|
|
|
+## Отладка
|
|
|
|
|
+
|
|
|
|
|
+**Браузер** на обычном компьютере или ноутбуке содержит в себе средства отладки вида страницы (**HTML**/**CSS**) и сопутствующего **JS**-кода.
|
|
|
|
|
+Эти средства называются **Developer Tools** и вызываются по **F12** **Ctrl-Shift-I** или Правая Кнопка->Посмотреть код элемента на странице.
|
|
|
|
|
+
|
|
|
|
|
+**Developer Tools** содержит в себе множество средств отладки кода. Для хорошего понимания управляющих конструкций (**условий** и **циклов**) полезно
|
|
|
|
|
+разобраться с **пошаговой отладкой** - выполнением кода по шагам. Это позволяет увидеть, какие блоки кода выполняются или не выполняются в условных
|
|
|
|
|
+операторах и каковы значения переменных в каждый момент времени выполнения кода.
|
|
|
|
|
+
|
|
|
|
|
+Для начала пошаговой отладки устанавливается **точка останова** - строка кода, с которой обычный режим выполнения прерывается и начинается отладка по шагам.
|
|
|
|
|
+В **Developer Tools** найдите вкладку *Source*, в ней свой файл c кодом, и кликните на номере нужной строки слева от текста кода.
|
|
|
|
|
+
|
|
|
|
|
+Если вы используете [repl.it](http://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` и поставить **точку останова**.
|
|
|
|
|
+
|
|
|
|
|
+### Комментирование как инструмент отладки
|
|
|
|
|
+
|
|
|
|
|
+В любой момент вы можете выключить ту или иную часть кода, не стирая её с помощью **синтаксиса комментариев**.
|
|
|
|
|
+```javascript
|
|
|
|
|
+
|
|
|
|
|
+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(строка), представляющим собой последовательность символов. Подробнее структурированные типы
|
|
|
|
|
+данных будут рассмотрены на следующих уроках.
|
|
|
|
|
+
|
|
|
|
|
+Далее представлены переменные различных типов:
|
|
|
|
|
+
|
|
|
|
|
+```javascript
|
|
|
|
|
+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 в математических операциях, абсурдных для
|
|
|
|
|
+строки. У этого есть плюсы и минусы, однако надо быть аккуратным в использовании таких возможностей языка, из-за вероятности возникновения трудноустраняемых ошибок.
|
|
|
|
|
+
|
|
|
|
|
+### Простейшие операции
|
|
|
|
|
+
|
|
|
|
|
+```javascript
|
|
|
|
|
+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**. Обычно выражения вычисляются в первую очередь.
|
|
|
|
|
+
|
|
|
|
|
+```javascript
|
|
|
|
|
+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**, значит данный кусок кода - выражение. Иначе это не выражение.
|
|
|
|
|
+
|
|
|
|
|
+### Первая программа.
|
|
|
|
|
+
|
|
|
|
|
+В качестве первой программы мы сделаем конвертер валют, который в цикле спрашивает сумму, конвертирует и выводит сумму в другой валюте.
|
|
|
|
|
+
|
|
|
|
|
+```javascript
|
|
|
|
|
+var USD2UAH = 27; //курс
|
|
|
|
|
+var usdValue; //объявление переменной для результата
|
|
|
|
|
+
|
|
|
|
|
+do{ //цикл
|
|
|
|
|
+ var uahValue = prompt("Введите сумму в грн.",""); //просим пользователя ввести сумму
|
|
|
|
|
+ usdValue = uahValue / USD2UAH; //переводим по курсу
|
|
|
|
|
+ alert("$ " + usdValue); //выводим сумму в долларах
|
|
|
|
|
+}while(uahValue !== null) //пока пользователь не нажмет отмену
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+#### Подключение и его последовательность
|
|
|
|
|
+
|
|
|
|
|
+Для подключения JS можно пользоваться следующими способами:
|
|
|
|
|
+```html
|
|
|
|
|
+<script>
|
|
|
|
|
+ alert('Hello JS')
|
|
|
|
|
+</script>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+или же использовать отдельный файл:
|
|
|
|
|
+
|
|
|
|
|
+```html
|
|
|
|
|
+<script src='js/myjs.js'></script>
|
|
|
|
|
+```
|
