Шаг 1: Общие черты языков

Синтаксис

В любой письменности есть набор правил. Т.к. мы работаем в html разметке то подключение остальных языков выглядит так:

php: 

<? … код программы ... ?>
и / или
<?php … код программы ... ?>

js: 

<script> код </script>
и / или
<script type="text/javascript" src=" путь к файлу "></script>

css:

<style> код </style>
и / или
<link rel="stylesheet" type="text/css" href=" путь к файлу ">

; (точка с запятой) — обозначает конец выражения или конструкции (php, js, css, db)

php:

for($x=0 ; $x<10 ; $x++){
...
}

js:

var data = {
...
};

= (равно) — оператор присваивания, сравнения только в db (php, js, db)

db:

UPDATE `people` SET `name` = 'max';

‘ и « (кавычки одинарные и двойные) — так обозначают строки, используют 2 вида кавычек, чтобы «внутри» одних можно было использовать другие как текст. Т.к. первые кавычки считаются началом строки, а внутренние уже самим текстом.

js:

console.log( " Привет! " );

php:

echo '  Привет. Вы " ООО " или " ИП "?  ';

), }, ] (все виды скобок) — у них разные функции, главное надо знать все открытые скобки должны быть закрыты.

css:

body { margin: 0; }

, (запятая) — символ перечисления

js:

var list = [1 , 2 , 3]; 

Комментарии — используются для отключения кода, в этом случае “закомментированный” код будет игнорироваться, как будто его не существует. Это удобно если вам надо отключить код не удаляя его из файла.

js, php, css:

// текст до конца строки
## текст до конца строки
/* текст внутри обрамления */

db:

-- текст до конца строки

html:

<!-- текст внутри обрамления -->

Имена и переменные 

У переменных и блоков есть имена. По этим именам мы и будем обращаемся к ним. Есть даже набор правил, как правильно придумывать имена, чтобы было удобно читать код.

В php переменная объявляется через символ $ следом без пробела имя переменной, следом через символ = ее значение. Например назовем число «123» каким нибудь именем, чтобы когда нам понадобится просто обратится к нему по имени.

$x = 123;
$x = $y = 5;

В js: через оператор var, let, const следом через пробел имя переменной, следом через символ = ее значение.

var — область видимости классика, можно переопределять

let — область видимости ограничена { }, нельзя переопределять

const — область видимости классика , нельзя переопределять

var x = 123;
var x = 4, v = 5;
let x = 6;

При создании переменной, если такая переменная уже есть, то она заменится (переопределяется), если нет, то создается новая.

php:

$x = 10;
$x = 11; // теперь в x хранится 11, т.к. значение 10 заменили на 11.

В имени может использоваться латинские символы «a-zA-Z» , тире » — » нижнее подчеркивание » _ » и цифры » 0-9 » . Переменные не могут содержать только цифры. Имя переменной должно отражать то — что она хранит.

Плохо:

var trichetire = 3.14;

Хорошо:

var pi = 3.14;

В html и xml используются теги. Теги открываются <имя> и закрываются </имя>

<pi> 3.14 </pi>

В css по имени блока или по имени класса можно установить параметры стилей. Например, цвет текста, создадим блок в html и установим стиль.

html:

<div class=" pi ">3.14</div>

css:

.pi { color: red; }
div{ color: green; }

Типы данных

Первое и частое что используется в программировании — это данные. Данные бывают разных типов. Их не много и это очень удобно. Основные типы данных:

Число

Строка

Булево — может иметь только 2 значения «истина» или «ложь» (0 или 1)

Массив — это список например Вася, Саша, Маша

Функция — это часть кода названная одним именем.

Объект — более сложная форма массива. Отличие объекта от массива в том, что объект хранит в себе более сложные формы. Например объект — план квартир с расположением комнат, мебели, и их свойствами (размерами, цветами, положением), а массив — список номеров квартир и их хозяев.

Число может быть целое или дробное (с плавающей точкой), положительное или отрицательное и с числами можно выполнять все математические действия.

php:

$x = 1;
$y = 2;
$z = $x + $y; // в $z будет храниться значение 3

+= — прибавить к текущей переменной
-= — отнять от текущей переменной
*= — умножить текущую переменную на то что после равно
/= — разделить текущую переменную на то что после равно
++ — увеличить на единицу (инкремент)
— — уменьшить на единицу (декремент)

php:

$x = 4;
$x += 6; // в x хранится 10

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

В php для этого используется символ » . » (точка).

$x = "1";
$y = "2";
$z = $x . $y; // в $z будет хранится строка "12"

В js для этого используется символ » + » (плюс). 

var x =  " 1 " ;
var y =  " два " ;
var z = x + y; // в $z будет хранится строка  " 1два " 

Булево (bool) число может иметь всего 2 значения true (истина) и false (ложь). Этот тип данных используется в логических конструкциях. Например: если ваш рост больше 170 и вам 21 год, то булево значение вернет true, во всех остальных случаях false. 

Логические операторы

! — логическое «НЕ», обозначает отрицание, превращает истину в ложь, а ложь в истину.

php: $x = !false; // в x хранится true

AND, && — «И», и a и b должны быть истинным

php: $x = $a and $b // true если $a true и $b true

OR, || — «ИЛИ», или a или b или оба должны быть истинным

php: $x = $a or $b // true если $a true или $b true

XOR — исключающее «ИЛИ», или a или b, но не оба должны быть истинным

php: $x = $a xor $b // true если $a true или $b true, но не оба

Операторы сравнения

== — сравнение, два значения должны быть равны

=== — тождественное равенство, сравнивает не только значения но и типы данных

php:

$x = 1=='1'; // в x хранится true, обратите внимание сравниваем строку с числом
$y = 1==='1'; // в y хранится false

js:

var x = 1==2; // в x хранится false
var y = 1!==1; // в y хранится false, потому что 1 тождественно равно

!= — не равно

<> — не равно

!== — тождественно не равно

> — больше

< — меньше

>= — больше либо равно, равно всегда после символа >

<= — меньше либо равно, равно всегда после символа <

Массив (array) — это список. В тех случаях, когда необходимо перебрать данные он отлично для этого подходит. Или если у переменной должно быть несколько значений. Для создания массива используется ключевое слово array( … ) или [ … ] (квадратные скобки) Например: 

php:

$mas = array( 10, 11, 15, 18 );
$mas = [ 'яблоко', 'груша', 'банан' ];

js: 

var mas = array( 'Иванова', 'Петрова' );
var mas = [ 'Apple', 'Samsung', 'LG' ];

В массиве всегда хранится связка ключ и значение, если ключ явно не указан, то это индекс — порядковый номер значения. Нумерация в массиве начинается с 0. Например в массиве [ ‘a’, ‘b’, ‘c’ ] ключ у значения ‘a’ будет 0, ‘b’ — 1, ‘c’ — 2. К строке тоже можно обращаться как к массиву:

php:

$text = 'I am array!';
$text[3] - буква m (начинаем считать 0=I, 1=пробел, 2-a, 3-m )

Вместо числового индекса ключ массива может содержать имя для ячейки. Такой массив называется ассоциативным. И обращаться к данным в массиве будем по имени. Похоже на переменную в переменной. 

php: 

$mas = [ 'x' => 10, 'y' => 11 ];
$mas['y']; // вернет 11

js:

var coord = array( 'x' => 12, 'y' => 15 );
coord['x']; // вернет 12

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

Например функция «принеси чай» включает в себя действия «взять кружку», «налить воду», «насыпать чай», и доп действие «насыпать сахар». Функция определяется ключевым словом function далее следует имя функции «prinesi_chai» и в скобках входные параметры — переменные “param”. Тело функции (то что функция выполняет) обрамляется фигурными скобками {}. Далее мы можем вызвать функцию с указанием ее имени и параметров, в случае если параметров нет то просто пустых скобок.

php:

function prinesi_chai( $param1, $param2 ){ … } // объявили
prinesi_chai( ’Малиновый’, ’Без сахара’ ); // вызвали

js:

function prinesi_chai( param1, param2, param3 ){ … } // объявили
var prinesi_chai = function(){ … } // или так объявили
prinesi_chai(); // вызвали

Функция ограничивает область видимости переменных, т.е. те переменные которые созданы внутри функции не будут видны «снаружи».

В php чтобы переменная была видна снаружи ее необходимо явно назначить глобальной с помощью оператора global. В js переменная по умолчанию глобальная.

php:

$y = 5;
function set(){
    global $y; // y глобальная поэтому = 5, x - локальная и пока что не существует
    $x = 1; // создали x
    $y += $x; // в y хранится 6
}
$y += $x; // в y хранится 6 т.к. x не существует за пределами функции то прибавлять нечего

В функцию можно передать значения и они станут локальными (доступными внутри функции и недоступными снаружи), при объявлении функции в скобках указываются имена переменных через запятую, при вызове передаются значения:

js:

function sum( x, y ){
    var z = x + y;
}

sum( 5, 6 ); // вызвали функцию z станер равно 11

Функция может возвращать значение. Для этого необходимо указать оператор return. В этом случае функция завершится немедленно и вернет данное значение. 

js:

function pi(){
    return 1+2.14;
    z = 11; // этот код не выполнится т.к. в предыдущей строке мы вышли из функции
}
var pi = pi();

Функция может вызывать сама себя, это называется рекурсия. Может быть очень полезна для построения дерева, или построения url пути. Но надо работать аккуратно, т.к. можно уйти в бесконечную рекурсию, т.е. функция будет вызывать себя снова и снова.

Объекты немного похожи на массивы но более сложны и хранят в себе целые конструкции. В объекте могут хранится как переменные (их называют свойствами) так и функции (их называют методами). Вот примеры создания объектов:

php:

class MyClass{
	public $x = 10;
	public function show(){
		... код ...
	}
}

$obj = new MyClass;
$obj->x;
$obj->show();

js:

var obj = new MyClass;
obj.show();

или

var obj = { ‘x’: 12, ‘y’: 5 }; // создали
obj.x; // обратились к х

В js объекты играют большую роль нежели в php, т.к. некоторые методы в js уже присутствуют у переменных. В php же это вызов функции. Например выведем количество символов в строке: 

js: var x = 'server' . length; // в x хранится 6
php: $x = strlen( 'server' ); // в x хранится 6

В css блок стилей напоминают объект вида «параметр: значение», для целостного понимания так и будем считать. Например установим цвет текста:

css:

div{ color: #00a232; } 

Существует 2 подхода процедурное программирование и объективно ориентированный программирование ООП. При процедурном стиле большие куски кода выносят в функции код линейный. Процедурный стиль весьма прост и ограничен, а ООП только кажется сложнее, на самом деле добавляется больше возможностей. В php и js ООП значительно отличается, но в общем принципы лежат одинаковые.

php:

процедурно:

function get_text( $text ){
	return $text;
}
print get_text( "Имя любимое мое." );

ооп:

class Name
{
	public $text;
	public function get_text(){
		return $this->text;
	}
}
$name = new Name();
$name->text = "Имя любимое мое.";
print $name->get_text();

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

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

php: unset( $x, $y );
js: delete( x, y );

Вывод данных

Для вывода строки в php используются операторы print и echo, однако если вывести массив то получим сообщение array (массив). Функция print_r() и var_dump() очень полезны в отладке, т.к. выведут не только строки но и массивы или объекты.

php:

print 'Привет';
echo 'Здрасте';
print_r( 'Добрый день' );
var_dump( 'Добрый день' );
<?='Сокращенная запись вывода'?>

В js используется все пространство браузера. Поэтому вывести мы можем в документ document.write() (обратите внимание вызываем метод объекта document), в всплывающем сообщение функция alert(), и вывести в консоль разработчика console.log().

js:

console.log( 'Привет' );
alert( 'Здрасте' );
document.write( 'Добрый день' );

Область видимости

Область видимости — это часть кода (часто заключенные в фигурные скобки » { … } » ), например функция или объект, в которой доступна переменная, свойство или метод. Это позволяет использовать одинаковые имена и исключить часть ошибок. У php и js этот механизм немного различается. Разница лишь в том, что php не будет искать переменные снаружи. если явно это не указать. В то время как js если не найдет переменную внутри, пойдет искать ее снаружи.

php:

$x = 1;			/* объявили переменную x */
$y = 2;			/* объявили переменную y */

function show(){
	echo $x; 	/* тут x своя, т.е. пустое значение */
global $y;	/* объявили что y можно искать снаружи */
echo $y; 	/* тут y глобальная, т.е. = 2 */
}
show();

js:

var x = 1;			/* объявили переменную x */
var y = 2;			/* объявили переменную y */
function show(){
	console.log(x); 	/* тут x не найдена внутри, ищет снаружи, т.е. = 1 */
	x = 5			/* предопределили, без var */
console.log(x); 	/* x = 5 */
var y = 3;		/* объявили y внутри функции, указали var */
console.log(y); 	/* тут y локальная, т.е. = 3 */
}
show();
console.log(x);			/* т.к. работали внутри функции, поэтому x = 5 */
console.log(y);			/* не коснулось, т.к. в функции своя y, поэтому y = 2 */

Если глобальную переменную переопределить она изменится везде. Если создать и изменить локальную переменную, то глобальная останется неизменна. Всегда помните про область видимости. Бывает непонятно куда пропадают и почему меняются те или иные переменные.

Условия

Программа часто должна вести себя по разному, в зависимости от условия. Для этого существует оператор if (если) else (иначе). Нам помогут операторы сравнения и булево значение. Если (if) значение в скобках истинно, то выполняется тело обрамлено кавычками {}, иначе (else) другая часть. При этом другая часть будет проигнорирована. Можно указывать несколько вариантов используя elseif. Например проверить правильно ли ввели пароль:

php:

if( $pass == '12345' ){
print ‘доступ открыт’;
}else{
print ‘доступ закрыт’;
}

js:

if( x < 0 ){
	console.log( 'x меньше нуля' );
}elseif( x > 0 ){
	console.log( 'x больше нуля' );
}else{
	console.log( 'x равно нуля' );
}

Код php можно вставить в html и условия будут работать:

... разметка html
<? if ( $count ): ?>
	<div class=" super "> Мы нашли 10000 записей </div>
<? else: ?>
	<div class=" error "> Ошибка, попробуйте ввести другой запрос. </div>
<? endif; ?>
... разметка html

Сокращенная запись if else выглядит так в ( )? скобках условия, если верно то до : (двоеточия) если ложно то после:

php, js:

( true )? 'истина' : ' ложно ';

Если вариаций много можно воспользоваться другой конструкцией. Программа берет то что в скобках switch и сравнивает с case, если совпадения не находит вываливается в default. Если после сравнения указать break то сравнение немедленно прекратится. Сравнение соответствует знаку ===, т.е. сравниваются не только значения но и типы данных.

php:

switch ( $x ) {
	case 0: // число
	case '1':
	case 2:
		print ' Опять двойка ';
		break;
	case 3:
		print 'Тройка';
default:
print 'Хорошая оценка';	
}

если x число 1, то условие не выполнено, т.к. число 1 тождественно не равно строке ‘1’.

Циклы

Когда необходимо выполнить какое то действие несколько раз, то поручите это циклам. Цикл объявляется ключевым словом while() принимает 1 параметр условие. Цикл будет выполнятся до тех пор, пока условие верно. Например выполним 10 повторений:

php:

$x = 0;
while( $x<10 ){
    $x++;
    ...
}

При использовании конструкции do while мы можем быть уверены что цикл выполнится хотя бы 1 раз. Т.е. функция сначало зайдет в тело цикла, а потом уже проверит условие.

js:

var x = 0;
do{
    ...
    x++;
} while( x<10 );

Второй тип цикла for() далее идут 3 параметра, начальное значение, условие и счетчик. Например выполним 10 повторений, x=0 каждый виток цикла увеличивает x на 1 x++, и так пока x не станет равно 10 и перестанет подходить по условию:

js:

for( var x=0; x<10; x++ ){ ... }

В php есть специальный цикл foreach() который перебирает массив. Принимает 2-3 параметра: массив, оператор as и связка ключ => значение, ключ можно не указывать.

$mass = [ 1, 2, 3 ];
foreach( $mass as $k=>$v ){ .. }
или
foreach( $mass as $v ){ ... }