Browse Source

php2js begin

me@helium 8 years ago
parent
commit
a8e408da98
1 changed files with 70 additions and 0 deletions
  1. 70 0
      php2js.md

+ 70 - 0
php2js.md

@@ -3,6 +3,71 @@
 Этот материал рассчитан на людей, которые уже знакомы с программированием на **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`
 
 Javascript-интерпретатор в браузере может работать в двух режимах: "обычном" и в "строгом":
@@ -175,3 +240,8 @@ echo ("Тут есть" . $a . "перенос" . $a . "строки");
 
 Так как в **JS** нет отдельного оператора конкатенации (в **PHP** это `.`), то `+` между числами в строках может вас удивить:
 ![суть](https://pp.vk.me/c631923/v631923540/45dbe/uK3mUei6G5s.jpg)
+
+Для того что бы избежать подобных ситуаций, приводите числа в строках перед использованием в математических операциях:
+- `+"123"`. Простой и краткий способ для приведения строки к числу
+- `parseInt("123")` или `parseFloat("123.45")` работает схожим образом, однако обладает другими странностями и возможностями (например есть возможность
+   задать систему счисления)