PHP/php2js.md

Javascript для PHP'истов

Этот материал рассчитан на людей, которые уже знакомы с программированием на PHP и желают быстро разобраться с особенностями Javascript, без которого сейчас не обойдется ни один веб-программист.

Отладка.

В отличие от обычной для PHP ситуации: отсутствия отладчика, для JS в браузере есть отличная среда отладки. Доступен отладчик по 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) - следующий шаг из функции, выйти из функции на уровень, который функцию вызвал.

Значение переменных и выражений

• Вы можете узнать значение переменных, наведя на них курсор мыши
• Вы можете узнать значение синтаксически верного выражения выделив его и наведя на него курсор мыши. Учтите, что при этом может быть вызвана та или иная функция и могут возникнуть побочные эффекты.

Пошаговая отладка и консоль.

Очень удобно использовать консоль и пошаговую отладку одновременно. Консоль предоставляет все переменные и их текущие значения, которые сейчас есть в отлаживаемом коде, таким образом вы можете поэкспериментировать с этими значениями и, например, запустить из консоли следующий проблемный оператор в коде или его часть для нахождения логической ошибки.

Отладочный вывод

Вы всегда можете добавить console.log в место, где хотите получить информацию о состоянии программы. Этот способ хорош как дополнение к остальным. Так же вы можете написать определенное условие для отладки, вставить в него console.log и поставить точку останова.

Примеры ниже

...могут быть запущены в отладочном режиме по красной кнопке :-), если вы откроете Developer Tools. Без Developer Tools они тоже работают.

Подключение

"Корнем" HTML-документа является файл html, в котором указываются остальные части страницы - картинки, css, js файлы и код.

Подключение отдельных файлов и библиотек

<script src="/path/to/script.js"></script>

Подключение кода inline.

<script>
alert("AAaa");
</script>

use strict

Javascript-интерпретатор в браузере может работать в двух режимах: "обычном" и в "строгом":

• Обычный режим предназначен для совместимости.
• Строгий режим включает современный стандарт Javascript (ECMAScript 5 или новее)

В зависимости от режима поведение интерпретатора может меняться. Далее это будет упоминаться в тех или иных моментах. По умолчанию интерпретатор работает в обычном режиме, для включение строгого режима используется строка 'use strict' в начале Javascript-кода.

"use strict";

или

'use strict';

Переменные и типы данных

В отличие от PHP, Perl и Shell-интерпретаторов, с которых это и пошло, в Javascript переменные объявляются без знака $:

a = 5;

$a = 5;

Такой код в обычном режиме Javascript декларирует глобальную переменную, которая становится полем объекта window, даже если переменная определена внутри функции:

a = 5;
function b(){
    a = 10;
}
b()
alert(a);

Код выше аналогичен:

$a = 5;
function b(){
    global $a;
    $a = 10;
}
b();
echo($a);

Для декларации локальных переменных используется ключевое слово var.

a = 5;
function b(){
    var a = 10;
}
b();
alert(a);

Код выше аналогичен:

$a = 5;
function b(){
    $a = 10;
}
b();
echo($a);

В строгом режиме определение переменных без var недопустимо и вызывает ошибку:

'use strict';

var a = 5; //без var тут бы была ошибка
function b(){
    var a = 10;
}
b();
alert(a);

Во избежание ошибок ВСЕГДА определяйте переменные через var.

Типы данных

Основные типы данных в JS совпадают с типами данных PHP, за некоторыми исключениями:

• Целые и дробные числа представлены едиными типом Number
• Под "массивом" в JS подразумевается массив с целочисленными ключами.
• Ассоциативные массивы и объекты - это одно и то же;
• Для переменных без значения и значений отсутствующих ключей в ассоциативных массивах вместо PHP NULL используется аналогичный тип undefined
• Так же существует тип null, который применяется программистами для задания "пустых" значений и/или в DOM.

;

В отличие от PHP и многих других языков с C-подобным синтаксисом, в JS точка с запятой не является обязательной, однако нужна в некоторых случаях, например при написании операторов в одну строку:

var a = 5
var b = 6
var c = "string"
var d

a ++; b += a; d = c + a;

Во избежание ошибок просто добавляйте ; "как обычно", в конце строки

Комментарии

Как в PHP.

Строки, переменные в них и конкатенация

В отличие от PHP, в JS нет разницы между одинарными и двойными кавычками:

var a = "\n";
var b = '\n';

alert(a == b);

$a = "\n";
$b = '\n';

echo (a == b);

В отличие от PHP, в JS нет подстановки переменных в строках в двойных кавычках:

var a = "\n";

alert("Тут нет a переноса a строк");

$a = "\n";

echo ("Тут есть $a перенос $a строки");

Таким образом, для добавления значения переменной в строку надо использовать конкатенацию В отличие от PHP, в JS конкатенация делается с помощью оператора +, а не .:

var a = '\n';

alert("Тут есть" + a + "перенос" + a + "строки");

$a = "\n";

echo ("Тут есть" . $a . "перенос" . $a . "строки");

+ и динамическая типизация.

Так как в JS нет отдельного оператора конкатенации (в PHP это .), то + между числами в строках может вас удивить:

Для того что бы избежать подобных ситуаций, приводите числа в строках перед использованием в математических операциях:

• +"123". Простой и краткий способ для приведения строки к числу
• parseInt("123") или parseFloat("123.45") работает схожим образом, однако обладает другими странностями и возможностями (например есть возможность задать систему счисления)