Структура и синтаксис JavaScript (выжимка)
В этом посте я собрал основную выжимку по структуре и синтаксису языка JavaScript. Зачем, если есть нормальные книги посвещенные JavaScript? Этот пост может пригодиться, в качестве некого справочного материала или шпаргалки для тех кто уже пользовался JavaScript.
Я по своему опыту знаю, что не важно сколько ты работал на том или ином языке или технологии, достаточно прекратить его использовать и через некоторое время обязательно запамятаешь элементарно как функцию или класс объявить. Чтобы минимизировать время «восстановления», я решил создать данную выжимку по структуре и синтаксисе JavaScript
1. Коментарии
Бывают двух типов
1 2 3 |
/ однострочный комментарий / /* многострочный комментарий */ |
2. Вставка скрипта main.js в HTML
В заголовке сайта (между <head> </head>)
1 |
<script type="text/javascript" src="main.js"></script> |
3. Переменные
JavaScript не жестко типизированный язык, это означает что переменным не надо указывать тип, интерпретатор сам разберется. Для объявление переменной достаточно написать
1 |
var x=1; |
Причем типов в Js всего 4-е:
1 2 3 4 |
var x=1; //переменная целого типа var y=1.5; //переменная вещественного типа var z="abc"; //переменная типа строка, ковычка может быть " или ' разницы нет var k=true; //переменная логического типа |
4. Функции
В JavaScript можно создать два вида функций именованные и анонимные.
Именованная функция (стандартная, часто применяемая)
1 2 3 |
function sum(x,y) { return x+y } |
Видна везде (даже до объявления функции) и вызывается так
1 |
x=sum(2,3); |
Функцию можно присвоить переменной
1 2 |
s=sum; x=s(2,3); // сработает как и sum(2,3) |
Анонимная функция
1 2 3 |
var sum = function(x,y) { return x+y } |
Анонимная функция вызывается также как и именованная (т.е. x=sum(2,3)), ее так-же можно присваивать другой переменной (s=sum). Отличие заключается в следующем:
- анонимная функция работает только после объявления
- вытекает из первого, анонимную функцию можно определять в условных операторах (например, в зависимости от условия, функцию sum мы можем объявить с разными количеством аргументов)
123456if (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++ нельзя явно указать функции как в нее передавать параметры, по ссылки или по значению. Но важно помнить, что если в качестве параметров в функцию (именованная или анонимная не важно) мы передаем простые типы вроде: целых чисел, вещественных, логических, строк, то они всегда передаются по значению (входящий параметры не изменяются, функция работает с их копиями). В случаем если в функцию передаем массивы или объекты, они передаются по ссылке (входящие параметры изменяются, функция работает с ними напрямую).
Передача функции в качестве аргумента другой функции
Функцию (именованную и анонимную, не важно) можно передавать по ссылке в качестве аргумента другой функции, например
1 2 3 4 5 6 7 |
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
1 2 3 4 5 6 |
if (условие) { этот код работает при выполненном условии } else { этот код работает, если условие не выполнено } |
Оператор switch
1 2 3 4 5 6 7 8 |
switch (выражение) { case значение_выражения: код; case значение_выражения2: код; default: код, который выполниться при отсутствие совпадений во всех case } |
Тут, думаю особо комментировать нечего.
6. Операторы цикла
Основной синтаксис for, while
Оператор for
1 2 3 |
for (var i=0;i<10;i++) { код; } |
Оператор while
1 2 3 4 |
// проверка вначале while(i<5) { … } // условие потом do { … } while (i<5) |
Цикл while работает пока условие истинно. Ключевые слова, которые иногда используют в циклах break, continue;
- break — завершает текущий цикл и передает управление на следующий вызов
- continue — прекращает текущую итерацию цикла и продолжает выполнение со следующей итерации
7. Массивы
Есть два способа как задать массив, пустой массив или со значениями
Пустой
1 2 3 |
var a = new Array(); // в качестве аргумента можно задать длину массива // а можно так var a = []; |
Со значениями
1 2 3 |
var a = new Array("a", 1, true) // а можно так var a = ["a", 1, true] |
Чтобы добавить новый элемент (цифру 7) в массив
1 2 3 |
a.push(7); // или так a[a.length]=7; |
Новый элемент добавляется в конец массива Чтобы удалить последний элемент массива
1 |
a.pop(); |
Для обращения к элементу массива, необходимо указать его индекс в квадратных скобках, например выведем на экран 0-ой элемент массива.
1 |
alert(a[0]); |
8. Объекты
В JavaScript в отличие от С++ нет понятие классов, объекты тут создаются не как экземпляры некого класса, а с нуля, с последующим указанием свойств и методов или с помощью функции-конструктора. Почему такие различия? А все дело в том, что JavaScript язык не чисто объектно-ориентированного программирования, он принадлежит к некому диалекту ООП, одним из его способов, который называется прототипно-ориентированное программирование. Хватит теории, рассмотрим как создавать объекты
1 2 3 4 5 6 7 8 9 10 |
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); } }; |
Есть второй вариант как создать объект, но в этом случае свойства и методы добавляются отдельно
1 2 3 4 5 6 7 8 9 |
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 при определении свойства в отличие от С++ никак нельзя ограничить к нему доступ. )
Обращаться к свойствам и методам следует так
1 2 |
alert(myOb.name); // печать свойства name myOb.print("family"); //вызов метода print(str) |
А что если нам надо создать множество объектов похожих на myOb с различными name и family? Тут возникает необходимость использовать конструктор
Функция — конструктор
Конструктор это некое подобие класса, он задает по каким правилам должен строиться объект (конструктор в JavaScript это не часть класса как в С++, тут вообще нет классов, это обычная функция). Пример
1 2 3 4 5 6 7 8 9 10 |
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
1 2 |
var p1=new Person("Vladik","Ivanov"); var p2=new Person("Dima","Petrov"); |
Вызываем методы данных объектов
1 2 |
p1.print("name"); // выведет Vladik p2.print("family"); //выведет Petrov |
Мы умеем создавать объекты по некоторому подобию, используя функцию-конструктор,
Теперь разберемся с наследованием
Наследование
В JavaScript наследование происходит от объекта к объекту, а не от класса к классу как в С++. Мы научились создавать объекты с нуля и с помощью функции конструктора, теперь нам надо создать объект, который будет потомком данного объекта. Например создадим объект p_debt который будет потомком объекта p1. В p_debt мы укажем какие долги за персоной p1.
Сначала создадим функцию-конструктор объекта p_debt, назовем ее person_debt
1 2 3 4 |
function Person_debt (date_debt, amount_debt) { this.date=date_debt; // свойство "дата взятия долга" this.amount=amount_debt; // свойство "сумма долга" } |
Теперь укажем конструктору от какого объекта будут наследовать его объекты (заметьте не от какой функции-конструктора, а от какого объекта, в JavaScript наследование происходит от объекта к объекту). Указывать мы будем через специальное свойство prototype.
1 |
Person_debt.prototype=p1; |
Создадим объект p_debt, наследника p1
1 |
var p_debt=new Person_debt("01.01.2013","30 000rub"); |
Объект p_debt имеет все свойства унаследованные от p1, пример
1 2 3 4 |
alert(p_debt.name); alert(p_debt.family); alert(p_debt.date); alert(p_debt.amount); |
То, что мы сделали можно изобразить таким образом
В результате этих действий мы получаем, что p_debt, является наследником p1 (или по другому сказать p1 прототип для p_debt)
Дочерних объектов от объекта p1 от может быть множество, создадим их
1 2 3 |
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» появился способ создать объект сразу с указанием прототипа для него, без всяких функций-конструкторов
1 2 3 |
var p_debt5=Object.create(p1); // создадим объект, p1 прототип p_debt5.date="12.02.2013"; // свойство "дата взятия долга" p_debt5.amount="1200rub"; // свойство "сумма долга" |
Перекрытие свойств и методов при наследование
Если мы в объекте-потомке укажем такое же свойство что и в его прототипе, оно перекроется (замениться), например добавим объекту p_debt свойство name
1 |
p_debt.name="Arkashka"; |
Выведем свойство name объекта p_debt
1 |
p_debt.print("name"); // выведет Arkaska |
Методы в прототипах
Методы можно объявлять не только через функцию-конструктор, как например print в Person, но и через прототип данной функции. Дело в том, что если функции не указать прототип явно, то он будет создан автоматически — пустой Object, как например для функции Person. Присвоив метод данному прототипу, мы заставим его унаследовать всем дочерним объектам от объекта созданного с помощью Person.
Например создадим метод print_person через прототип
1 2 3 |
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, надеюсь это кому-то было полезно.
Вам будет интересно:
Буду признателен если вы поделитесь данным постом
Полезный пост.
За плечами солидный опыт на C, C++, C#, JAVA как раз искал такую выжимку. После прочтения позволяет +- свободно читать JS код чего для понимания достаточно.
Спасибо.
Спасибо вам Сергей!
Если шо, на 2019 год не актуально
Спасибо, мы с вами решили проблему, подправил пост по поводу объявление переменных. Теперь актуально =)