|
@@ -3,6 +3,71 @@
|
|
Этот материал рассчитан на людей, которые уже знакомы с программированием на **PHP** и желают быстро разобраться с особенностями **Javascript**, без
|
|
Этот материал рассчитан на людей, которые уже знакомы с программированием на **PHP** и желают быстро разобраться с особенностями **Javascript**, без
|
|
которого сейчас не обойдется ни один веб-программист.
|
|
которого сейчас не обойдется ни один веб-программист.
|
|
|
|
|
|
|
|
+## Отладка.
|
|
|
|
+
|
|
|
|
+В отличие от обычной для **PHP** ситуации: отсутствия отладчика, для **JS** в браузере есть отличная среда отладки. Доступен отладчик по
|
|
|
|
+**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**) - следующий шаг *из* функции, выйти из функции на уровень, который функцию вызвал.
|
|
|
|
+
|
|
|
|
+### Значение переменных и выражений
|
|
|
|
+
|
|
|
|
+- Вы можете узнать значение переменных, наведя на них курсор мыши
|
|
|
|
+- Вы можете узнать значение синтаксически верного выражения выделив его и наведя на него курсор мыши. Учтите, что при этом может быть вызвана
|
|
|
|
+ та или иная функция и могут возникнуть побочные эффекты.
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+### Пошаговая отладка и консоль.
|
|
|
|
+
|
|
|
|
+Очень удобно использовать консоль и пошаговую отладку одновременно. Консоль предоставляет все переменные и их текущие значения, которые сейчас есть в
|
|
|
|
+отлаживаемом коде, таким образом вы можете поэкспериментировать с этими значениями и, например, запустить из консоли следующий проблемный оператор в коде
|
|
|
|
+или его часть для нахождения логической ошибки.
|
|
|
|
+
|
|
|
|
+### Отладочный вывод
|
|
|
|
+
|
|
|
|
+Вы всегда можете добавить `console.log` в место, где хотите получить информацию о состоянии программы. Этот способ хорош как дополнение к остальным.
|
|
|
|
+Так же вы можете написать определенное условие для отладки, вставить в него `console.log` и поставить **точку останова**.
|
|
|
|
+
|
|
|
|
+### Примеры ниже
|
|
|
|
+...могут быть запущены в отладочном режиме по красной кнопке :-), если вы откроете **Developer Tools**. Без **Developer Tools** они тоже работают.
|
|
|
|
+
|
|
|
|
+## Подключение
|
|
|
|
+
|
|
|
|
+"Корнем" **HTML**-документа является файл **html**, в котором указываются остальные части страницы - картинки, css, js файлы и код.
|
|
|
|
+
|
|
|
|
+### Подключение отдельных файлов и библиотек
|
|
|
|
+```html
|
|
|
|
+<script src="/path/to/script.js"></script>
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+### Подключение кода inline.
|
|
|
|
+
|
|
|
|
+```html
|
|
|
|
+<script>
|
|
|
|
+alert("AAaa");
|
|
|
|
+</script>
|
|
|
|
+```
|
|
|
|
+
|
|
## `use strict`
|
|
## `use strict`
|
|
|
|
|
|
Javascript-интерпретатор в браузере может работать в двух режимах: "обычном" и в "строгом":
|
|
Javascript-интерпретатор в браузере может работать в двух режимах: "обычном" и в "строгом":
|
|
@@ -175,3 +240,8 @@ echo ("Тут есть" . $a . "перенос" . $a . "строки");
|
|
|
|
|
|
Так как в **JS** нет отдельного оператора конкатенации (в **PHP** это `.`), то `+` между числами в строках может вас удивить:
|
|
Так как в **JS** нет отдельного оператора конкатенации (в **PHP** это `.`), то `+` между числами в строках может вас удивить:
|
|
![суть](https://pp.vk.me/c631923/v631923540/45dbe/uK3mUei6G5s.jpg)
|
|
![суть](https://pp.vk.me/c631923/v631923540/45dbe/uK3mUei6G5s.jpg)
|
|
|
|
+
|
|
|
|
+Для того что бы избежать подобных ситуаций, приводите числа в строках перед использованием в математических операциях:
|
|
|
|
+- `+"123"`. Простой и краткий способ для приведения строки к числу
|
|
|
|
+- `parseInt("123")` или `parseFloat("123.45")` работает схожим образом, однако обладает другими странностями и возможностями (например есть возможность
|
|
|
|
+ задать систему счисления)
|