» Структура и синтаксис JavaScript (выжимка)

Структура и синтаксис JavaScript (выжимка)

В этом посте я собрал основную выжимку по структуре и синтаксису языка JavaScript. Зачем, если есть нормальные книги посвещенные JavaScript? Этот пост может пригодиться, в качестве некого справочного материала или шпаргалки для тех кто уже пользовался JavaScript.

Я по своему опыту знаю, что не важно сколько ты работал на том или ином языке или технологии, достаточно прекратить его использовать и через некоторое время обязательно запамятаешь элементарно как функцию или класс объявить. Чтобы минимизировать время «восстановления», я решил создать данную выжимку по структуре и синтаксисе JavaScript

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

Бывают двух типов

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

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

/* многострочный комментарий

2. Вставка скрипта main.js в HTML

В заголовке сайта (между <head> </head>)

   <script type="text/javascript" src="main.js"></script>

1	<script type="text/javascript" src="main.js"></script>

3. Переменные

JavaScript не жестко типизированный язык, это означает что переменным не надо указывать тип, интерпретатор сам разберется. Для объявление переменной достаточно написать

var x=1;

var x=1;

Причем типов в Js всего 4-е:

var x=1;  //переменная целого типа
var y=1.5;  //переменная вещественного типа
var z="abc"; //переменная типа строка, ковычка может быть " или ' разницы нет
var k=true; //переменная логического типа

var x=1; //переменная целого типа

var y=1.5; //переменная вещественного типа

var z="abc"; //переменная типа строка, ковычка может быть " или ' разницы нет

var k=true; //переменная логического типа

4. Функции

В JavaScript можно создать два вида функций именованные и анонимные.

Именованная функция (стандартная, часто применяемая)

function sum(x,y) {
    return x+y
}

function sum(x,y) {

return x+y

}

Видна везде (даже до объявления функции) и вызывается так

x=sum(2,3);

1	x=sum(2,3);

Функцию можно присвоить переменной

s=sum;
x=s(2,3); // сработает как и sum(2,3)

1 2	s=sum; x=s(2,3); // сработает как и sum(2,3)

Анонимная функция

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

var sum = function(x,y) {

return x+y

}

Анонимная функция вызывается также как и именованная (т.е. x=sum(2,3)), ее так-же можно присваивать другой переменной (s=sum). Отличие заключается в следующем:

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

if (str=="dva") { var sum = function(x,y) { return x+y; } } if (str=="tri") { var sum = function(x,y,z) { return x+y+z; } }

1
2
3
4
5
6

if (str=="dva") {
var sum = function(x,y) { return x+y; }
}
if (str=="tri") {
var sum = function(x,y,z) { return x+y+z; }
}

С именованной так не выйдет, интерпретатор JavaScript сначала ищет именованные функции, далее заносит их в память, а потом только выполняет скрипт, т.е. именованный функции объявляются сразу, не важно где они находяться

Передача параметров функции по ссылке и по значению

В JavaScript в отличие от С/C++ нельзя явно указать функции как в нее передавать параметры, по ссылки или по значению. Но важно помнить, что если в качестве параметров в функцию (именованная или анонимная не важно) мы передаем простые типы вроде: целых чисел, вещественных, логических, строк, то они всегда передаются по значению (входящий параметры не изменяются, функция работает с их копиями). В случаем если в функцию передаем массивы или объекты, они передаются по ссылке (входящие параметры изменяются, функция работает с ними напрямую).

Передача функции в качестве аргумента другой функции

Функцию (именованную и анонимную, не важно) можно передавать по ссылке в качестве аргумента другой функции, например

function sum(x,y) {
    return x+y;
}
function factor(f,i) {  // factor-функция множитель, умножает  
    return i*f(2,1);     // результат функции f
}
factor(sum,3); // в качестве функции f используем функцию sum

function sum(x,y) {

return x+y;

}

function factor(f,i) { // factor-функция множитель, умножает

return i*f(2,1); // результат функции f

}

factor(sum,3); // в качестве функции f используем функцию sum

Результат функции factor будет равен 9, т.к. если умножить значение переменной i=3 на результат работы функция sum с аргументами 2,1 будет 9.

5. Условные операторы

Основной синтаксис if, switch

Оператор if…else

if (условие)  {
  этот код работает при выполненном условии
}
else {
этот код работает, если условие не выполнено
}

if (условие) {

этот код работает при выполненном условии

}

else {

этот код работает, если условие не выполнено

}

Оператор switch

switch (выражение) {
    case значение_выражения:
        код;
    case значение_выражения2:
        код;
    default: код, который выполниться при отсутствие совпадений
    во всех case
}

switch (выражение) {

case значение_выражения:

код;

case значение_выражения2:

код;

default: код, который выполниться при отсутствие совпадений

во всех case

}

Тут, думаю особо комментировать нечего.

6. Операторы цикла

Основной синтаксис for, while

Оператор for

for (var i=0;i<10;i++) {
   код;
}

for (var i=0;i<10;i++) {

код;

}

Оператор while

// проверка вначале
while(i<5) { … }
// условие потом
do { … } while (i<5)

// проверка вначале

while(i<5) { … }

// условие потом

do { … } while (i<5)

Цикл while работает пока условие истинно. Ключевые слова, которые иногда используют в циклах break, continue;

break — завершает текущий цикл и передает управление на следующий вызов
continue — прекращает текущую итерацию цикла и продолжает выполнение со следующей итерации

7. Массивы

Есть два способа как задать массив, пустой массив или со значениями

Пустой

var a = new Array(); // в качестве аргумента можно задать длину массива
// а можно так
var a = [];

var a = new Array(); // в качестве аргумента можно задать длину массива

// а можно так

var a = [];

Со значениями

var a = new Array("a", 1, true)
// а можно так
var a = ["a", 1, true]

var a = new Array("a", 1, true)

// а можно так

var a = ["a", 1, true]

Чтобы добавить новый элемент (цифру 7) в массив

a.push(7);
// или так
a[a.length]=7;

a.push(7);

// или так

a[a.length]=7;

Новый элемент добавляется в конец массива Чтобы удалить последний элемент массива

a.pop();

a.pop();

Для обращения к элементу массива, необходимо указать его индекс в квадратных скобках, например выведем на экран 0-ой элемент массива.

alert(a[0]);

1	alert(a[0]);

8. Объекты

В JavaScript в отличие от С++ нет понятие классов, объекты тут создаются не как экземпляры некого класса, а с нуля, с последующим указанием свойств и методов или с помощью функции-конструктора. Почему такие различия? А все дело в том, что JavaScript язык не чисто объектно-ориентированного программирования, он принадлежит к некому диалекту ООП, одним из его способов, который называется прототипно-ориентированное программирование. Хватит теории, рассмотрим как создавать объекты

var myOb = {
  name: "Vladik",    //свойство name
  family: "Ivanov",  //свойство family
  print:function(str) { //метод print(str)
   if (str=="name")
      alert(this.name);
   if (str=="family")
       alert(this.family);
  }
};

var myOb = {

name: "Vladik", //свойство name

family: "Ivanov", //свойство family

print:function(str) { //метод print(str)

if (str=="name")

alert(this.name);

if (str=="family")

alert(this.family);

}

};

Есть второй вариант как создать объект, но в этом случае свойства и методы добавляются отдельно

var myOb = new Object(); 
myOb.name = "Vladik";   // добавляем свойство name
myOb.family = "Ivanov"; // добавляем свойство family
myOb.print=function(str) { //добавляем метод print(str)
   if (str=="name")
      alert(this.name);
   if (str=="family")
       alert(this.family);
};

var myOb = new Object();

myOb.name = "Vladik"; // добавляем свойство name

myOb.family = "Ivanov"; // добавляем свойство family

myOb.print=function(str) { //добавляем метод print(str)

if (str=="name")

alert(this.name);

if (str=="family")

alert(this.family);

};

(P.S. Все свойства объектов — public, в JavaScript при определении свойства в отличие от С++ никак нельзя ограничить к нему доступ. )

Обращаться к свойствам и методам следует так

alert(myOb.name); // печать свойства name
myOb.print("family"); //вызов метода print(str)

1 2	alert(myOb.name); // печать свойства name myOb.print("family"); //вызов метода print(str)

А что если нам надо создать множество объектов похожих на myOb с различными name и family? Тут возникает необходимость использовать конструктор

Функция — конструктор

Конструктор это некое подобие класса, он задает по каким правилам должен строиться объект (конструктор в JavaScript это не часть класса как в С++, тут вообще нет классов, это обычная функция). Пример

function Person (name_p,family_p) {
   this.name=name_p;    // свойство name 
   this.family=family_p;   // свойство family
   this.print=function(str) { //метод print(str)
   if (str=="name")
      alert(this.name);
   if (str=="family")
       alert(this.family);
  };
}

function Person (name_p,family_p) {

this.name=name_p; // свойство name

this.family=family_p; // свойство family

this.print=function(str) { //метод print(str)

if (str=="name")

alert(this.name);

if (str=="family")

alert(this.family);

};

}

Создаем объекты с помощью конструктора person

var p1=new Person("Vladik","Ivanov");
var p2=new Person("Dima","Petrov");

1 2	var p1=new Person("Vladik","Ivanov"); var p2=new Person("Dima","Petrov");

Вызываем методы данных объектов

p1.print("name"); // выведет Vladik
p2.print("family"); //выведет Petrov

1 2	p1.print("name"); // выведет Vladik p2.print("family"); //выведет Petrov

Мы умеем создавать объекты по некоторому подобию, используя функцию-конструктор,

Теперь разберемся с наследованием

Наследование

В JavaScript наследование происходит от объекта к объекту, а не от класса к классу как в С++. Мы научились создавать объекты с нуля и с помощью функции конструктора, теперь нам надо создать объект, который будет потомком данного объекта. Например создадим объект p_debt который будет потомком объекта p1. В p_debt мы укажем какие долги за персоной p1.

Сначала создадим функцию-конструктор объекта p_debt, назовем ее person_debt

function Person_debt (date_debt, amount_debt) {
   this.date=date_debt;    // свойство "дата взятия долга" 
   this.amount=amount_debt;   // свойство "сумма долга"
}

function Person_debt (date_debt, amount_debt) {

this.date=date_debt; // свойство "дата взятия долга"

this.amount=amount_debt; // свойство "сумма долга"

}

Теперь укажем конструктору от какого объекта будут наследовать его объекты (заметьте не от какой функции-конструктора, а от какого объекта, в JavaScript наследование происходит от объекта к объекту). Указывать мы будем через специальное свойство prototype.

Person_debt.prototype=p1;

1	Person_debt.prototype=p1;

Создадим объект p_debt, наследника p1

var p_debt=new Person_debt("01.01.2013","30 000rub");

1	var p_debt=new Person_debt("01.01.2013","30 000rub");

Объект p_debt имеет все свойства унаследованные от p1, пример

alert(p_debt.name);
alert(p_debt.family);
alert(p_debt.date);
alert(p_debt.amount);

alert(p_debt.name);

alert(p_debt.family);

alert(p_debt.date);

alert(p_debt.amount);

То, что мы сделали можно изобразить таким образом

В результате этих действий мы получаем, что p_debt, является наследником p1 (или по другому сказать p1 прототип для p_debt)

Дочерних объектов от объекта p1 от может быть множество, создадим их

var p_debt2=new Person_debt("09.04.2013","12 000rub");
var p_debt3=new Person_debt("26.08.2013","1 000rub");
var p_debt4=new Person_debt("12.11.2013","70 000rub");

var p_debt2=new Person_debt("09.04.2013","12 000rub");

var p_debt3=new Person_debt("26.08.2013","1 000rub");

var p_debt4=new Person_debt("12.11.2013","70 000rub");

( У персоны p1, может быть много долгов)

Т.к. мы создаем объекты с помощью конструктора person_debt, то все созданное будут наследниками объекта p1, изобразим визуально что получилось

P.S. в версии JavaScript «ECMA Script 5» появился способ создать объект сразу с указанием прототипа для него, без всяких функций-конструкторов

var p_debt5=Object.create(p1); // создадим объект, p1 прототип
p_debt5.date="12.02.2013";    // свойство "дата взятия долга" 
p_debt5.amount="1200rub";   // свойство "сумма долга"

var p_debt5=Object.create(p1); // создадим объект, p1 прототип

p_debt5.date="12.02.2013"; // свойство "дата взятия долга"

p_debt5.amount="1200rub"; // свойство "сумма долга"

Перекрытие свойств и методов при наследование

Если мы в объекте-потомке укажем такое же свойство что и в его прототипе, оно перекроется (замениться), например добавим объекту p_debt свойство name

p_debt.name="Arkashka";

1	p_debt.name="Arkashka";

Выведем свойство name объекта p_debt

p_debt.print("name"); // выведет Arkaska

1	p_debt.print("name"); // выведет Arkaska

Методы в прототипах

Методы можно объявлять не только через функцию-конструктор, как например print в Person, но и через прототип данной функции. Дело в том, что если функции не указать прототип явно, то он будет создан автоматически — пустой Object, как например для функции Person. Присвоив метод данному прототипу, мы заставим его унаследовать всем дочерним объектам от объекта созданного с помощью Person.

Например создадим метод print_person через прототип

Person.prototype.print_person=function () { //метод print_person
   alert(this.name+' '+this.family);  
};

Person.prototype.print_person=function () { //метод print_person

alert(this.name+' '+this.family);

};

Преимущество в следующем, этот метод будет виден объектам которые уже инициализированы. Как пример, метод print_person можно использовать в уже созданных объектах p1,p2 и p_debt,p_debt2,p_debt3,p_debt4.

P.S. Стоит отметить, как говорят некоторые статьи на хабре, что создаются методы через прототип в разы быстрее чем методы созданные через конструктор.

В посте я рассмотрел основной синтаксис и структуру кода на языке JavaScript, надеюсь это кому-то было полезно.

Вам будет интересно:

Буду признателен если вы поделитесь данным постом

Комментарии

Sergey пишет:

Полезный пост.
За плечами солидный опыт на C, C++, C#, JAVA как раз искал такую выжимку. После прочтения позволяет +- свободно читать JS код чего для понимания достаточно.
Спасибо.
admin пишет:

Спасибо вам Сергей!
Шо пишет:

Если шо, на 2019 год не актуально
admin пишет:

Спасибо, мы с вами решили проблему, подправил пост по поводу объявление переменных. Теперь актуально =)

Записки инженера