Синтаксис
В любой письменности есть набор правил. Т.к. мы работаем в 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 ){ ... }