Памятка по основам JS. Комментированные примеры для тех кто изучает JS совершенно «с нуля»

Изучения любого языка начинается с изучения основных основ.
Ниже предоставлены основные принципы и идеи языка и синтаксиса.

Комментарии.

/*
Это блочный комментарий
*/

// Это однострочный комментарий

Переменные

var x,y,z; //объявление переменных. Все они примут значение undefined

var x = 1, y = 2 + x, z; //при объявлении переменные можно сразу проинициализировать

Литералы (то есть просто значения)

var x = 1; //целое число
var x = 1.0; //дробное число (не по значению, а по его машинному представлению в памяти)
var x = 3E23; //число c плавающей запятой: 3×10²³. Показатель степени может быть и отрицательным
var x = 0x1A; //целое число 26 в 16-ричной форме
var x = 010; //целое число 8 в 8-ричной форме
var x = Infinity; //числовое значение ∞
var x = NaN; //числовое значение, которое показывает отсутсвие значения.
//Т.е. значения нет, но тип у него всё равно числовой

var s = 'строка';
var s = "строка";

var b = true; //логическая величина «истина» (величина типа boolean)
var b = false; //логическая величина «дожь» (величина типа boolean)

var v = null; //отсутствующее значние типа object (также как NaN для типа number)

Выражения (добавим к литералам и переменным операторы (знаки операций) и получатся выражения)

арифметические операторы и оператор =

 

var y = 3 * (23 - 6) / 5 + 33;
var t1 = y++ * 2; // t1 будет равно y×2, но переменная y после этого увеличится на 1
var t2 = ++y * 2; // t1 будет равно (y+1)×2, и y увеличится на 1
x++; //можно использовать и как самостоятельный оператор. Это то же самое, как если бы написать x = x + 1
var t3 = t1 % 5; //остаток от деления на 5
var t4 = t3 = t2 = 2+2; //все три переменные будут равны 4.
//Многие операторы могут быть совмещены с присвоением. Вот наиболее употребимые.
x += 5; // увеличить x на 5
x -= 5; // уменьшить x на 5
x *= 5; // увеличить x в 5 раз
x /= 5; // уменьшить x в 5 раз.
//логические операторы и операторы сравнения дают результат true (истина) или false и часто применяются в условиях
var x = 5;
if(x > 5){
alert('X больше 5'); //Эта строка выполняется только если выражение x>5 равно true
}

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

 

== //равно
=== //эквивалентно (равно и тип данных совпадает) Нпапример 5 == ‘5’ — истина, но 5 === ‘5’ — нет.
!= // не равно
!== // не эквивалентно
> < >= <= // строгие и не строгие неравенства
Числа сравниваются по значению, а тексты по алфавиту (строка, которая по алфавиту дальше, та и больше)
Если типы данных в одном выражении перемешаны, то приведение произойдёт автоматически,
а это не всегда происходит так как мы наивно предполагаем.

Типы Данных

Простые типы

var n = 123; //number
var s = 'qwerty'; //string
var b = true; //boolean
var u; //undefined

определить тип переменной можно с помощью оператора typeof

console.log(typeof b); //с учётом предыдущих строк эта выведет в консоль «boolean»

Также можно проверить задано ли значние переменной

if(typeof someVariable !== "undefined"){ //т.е. если переменная someVariable всё-таки задана
//.. тогда что-то с ней делаем
// Если такую проверку сомнительной переменной не сделать, то обращение
// к незаданной переменной приведёт к ошибке и остановке выполнения всего скрипта
}

Объектные типы

 

var n = new Number(123); //object typeof(n)
var b = new Boolean(true); //object
var s = new String('qwe'); //object
var d = new Date(); //object
var o = new Object(); //object это же можно написать короче var o = {}
var a = new Array(); //object это же можно написать короче var a = []

на самом деле тип number тоже фактически является объектом, как и Number
такие пары типов — это наследие языка Java. Там также различаются типы
int и Integer, bool и Boolean, string и String, но в Java всё честно:
int — обычное скалярное значение, а Integer — объект. В JS всё смешалось,
оба типа из пары основываются на одном и том же прототипе

УПРАВЛЕНИЕ ХОДОМ ВЫПОЛНЕНИЯ (Flow Control)

Ветвления.

if(любое_выражение){ //это «любое выражение» называется «условием»
любые_команды; //эти команды выполнятся только если выражение выше
//при приведении к boolean даёт true. Иначе все они будут пропущены
}

if(условие){ //можно использовать 2 группы команд. Первая выполнится если условие выполняется, иначе выполнится вторая
...
}else{
...
}

if(условие1){
//это выполняется если условие1 даёт true
}else if(условие2){
//это выполняется если условие1 ложно, а условие2 истинно
}else if(условие2){
//это выполняется если условие1 ложно и условие2 тоже ложно, а истинно только третье
}.....{
…. и так далее
}else{
//а эту секцию можно добавить на самый крайний случай, когда ни одно из предыдущих условий не выполнилось
}

//часто так бывает, что от одной переменной или от одного выражения зависит каким из N путей дальше пойти
switch(выражение){
case значение1:
case значение2:

//это выполняется, если выражение==значение1 или значение2
break;
case значение3:

//это выполняется, если выражение==значение3
break;
........
default:

//эту секцию используют если ничего из вышеперечисленного не подходит, а сделать что-то всё же надо
}
//например, Царевич выбрал направления движения, и надо определить, что стало с конём и им самим
SelectedMovingDirection = 'right';
switch(SelectedMovingDirection){
case "left":
HorseState = 'dead';
TsarevitchState = 'dead';
break;
case "stright":
HorseState = 'alive';
TsarevitchState = 'dead';
break;
case "right":
HorseState = 'dead';
TsarevitchState = 'alive';
break;
}

ЦИКЛЫ (когда что-то выполняется по кругу несколько раз. (несклько — это от нуля до скольки угодно))

for(var i = 1; i <= 10; i++){ console.log(i); } //эту строку можно скопировать прямо в консоль
//здесь берётся новая переменная i которая получает значение 1, а затем увеличивается (i++),
//до тех пор пока она всё еще не больше 10. И на каждой итерации выводится в консоль
//вместо console/log() можно дыло бы делать что-то полезное. Например, добавлять строчки
в

/

//циклы не всегда нуждаются в такой переменной i, чтобы что-то делать повторно
while(условие_при_котором_нужно_начать_очередную_итерацию){
//что-то делаем снова и снова пока всё еще выполняется условие
//Такой цикл может не выполниться ни разу
}

do{
//а такой цикл гарантированно выполнится хотя бы один раз
}while(условие_при_котором_надо_повторить_еще_раз);

//Циклы, например, могут применяться для обработки массивов (чтобы
//что-то одинаковое сделать с каждым элементом)
banners = document.getElementsByClassName('banner'); //выбрать все элементы с классом banner
for(i = 0; i < banners.length; i++){
... banners[i] ...
}

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *