JavaScript :: Синтаксис
http://belarusweb.net
Основы создания сайтов

JavaScript :: Синтаксис

Лексическая структура и лексемы

В данном пункте мы рассмотрим лексическую структуру JavaScript и начнем с определения.

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

Каждое отдельное правило в лексической структуре языка программирования называют лексемой. Она представляет собою минимальную единицу кода программы, которая имеет для интерпретатора определенный смысл и не может быть разбита на более мелкие логические части. К лексемам относятся литералы, идентификаторы, ключевые слова, знаки операторов и т.д. Пусть, например, у нас есть инструкция 'var b=5;', которая объявляет переменную и присваивает ей значение в виде числа 5. Эту инструкцию мы можем разбить на минимальные логические единицы, т.е. лексемы: ключевое слово 'var' (служит для объявления переменной), идентификатор 'b' (т.е. имя переменной), оператор присваивания '=' (в программировании знак равно используется не для сравнения, а для присвоения какого-либо значения), число '5' и знак ';' (точка с запятой используется программистами для разделения инструкций).

Литералы в JavaScript

Литералы представляют собой простые неименованные значения некоторого типа данных, написанные непосредственно в самом коде программы.

В качестве примеров приведем литералы, которые являются значениями различных типов данных: число 3.4, число 5 в примере выше, строка в двойных кавычках "яблоко", строка в одинарных кавычках 'две груши', логические значения true и false, литерал регулярного выражения /javascript/gi, инициализатор объекта {a:1, b:2} или инициализатор массива [1,2,3] и т.д.

Идентификаторы в JavaScript

Идентификаторы - это просто имена (например, переменных или функций). В JavaScript идентификаторы чувствительны к регистру символов, должны начинаться с буквы, знака подчеркивания '_' или знака доллара '$', после чего могут следовать любые буквы, цифры, символы подчеркивания или знаки доллара. При этом с цифры идентификаторы начинаться не должны, иначе интерпретатор не сможет отличить их от чисел.

Примерами идентификаторов могут служить: b (латинская буква), $b (начинается со знака доллара), _b (начинается со знака подчеркивания), $2b (включает цифру), ч (русская буква), _Чаво (начинается со знака подчеркивания и включает русские буквы, одна из которых заглавная), $G (начинается со знака доллара и включает заглавную латинскую букву), js_2 (разделяем буквы и цифру знаком подчеркивания), джаваScript (идентификатор из русских и латинских букв, записанный в 'верблюжей' нотации), магазин_shop (идентификатор из русских и латинских букв, записанный в 'змеиной' нотации) и т.д.

В то же время комбинации символов 15var_1, :Var_2 или var 3 не могут использоваться в качестве идентификаторов, т.к. они начинаются либо содержат недопустимые символы (имя третьего идентификатора содержит пробел). Также следует помнить про регистр используемых символов, поскольку, например, идентификаторы var_1, Var_1 и VAR_1 обозначают имена совершенно разных переменных или функций, т.к. регистр символов у них не совпадает.

Для лучшего восприятия кода следует давать идентификаторам понятные и по возможности краткие названия, которые бы соответствовали, например, хранящимся в переменных данным или же выполняемым функциями действиям. Кроме того, идентификаторы могут состоять не только из одной буквы, но даже из нескольких слов. Для таких случаев в программировании существуют два распространенных устоявшихся стиля записи идентификаторов, которые называются CamelCase (верблюжьяНотация) и Snake_case (змеиная_нотация). Если идентификатор состоит из одного слова, то в обоих случаях он пишется строчными буквами. При наличии двух и более слов, в 'верблюжей' нотации первое слово идентификатора пишется строчными буквами, а каждое последующее слово начинается с заглавной буквы. В 'змеиной' нотации все слова пишутся строчными буквами, но каждое последующее слово идентификатора отделяется от предыдущего знаком подчеркивания (см. пример №1). Что касается конкретно языка JavaScript, то в нем принято записывать идентификаторы в 'верблюжей' нотации, хотя при этом каждый программист сам решает какой стиль использовать. Также добавим, что смешивать два стиля никто не запрещает, однако в плане восприятия делать этого не рекомендуется.

var apple; 			  //Одинаково в любой нотации	
var go_to_str=23; //Змеиная нотация	
var goToStr=23; 	//Верлюжья нотация
var goTo_str=23; 	//Смешивать нотации можно, но не рекомендуется	

Пример №1 Стили записи идентификаторов в JavaScript

Как было показано в примерах выше, в качестве идентификаторов можно использовать не только латинские, но и, например, русские буквы. Такая возможность в JavaScript присутствует в связи с поддержкой языком набора символов стандарта Юникод (подробнее об этом смотрите здесь). В результате программисты из разных стран мира могут в случае необходимости использовать для идентификаторов буквы родного алфавита.

Следует отметить еще один важный момент: JavaScript резервирует часть идентификаторов для ключевых слов самого языка, поэтому они не могут использоваться программистами в качестве идентификаторов. Например, зарезервированными являются слова: break, continue, function, for, if, return, new, null, this и т.д. Мы не будем приводить здесь полный список зарезервированных слов, т.к. со временем сможем познакомиться с ними в процессе изучения JavaScript.

Инструкции и точка с запятой в JavaScript

Как и во многих других языках программирования в JavaScript каждая инструкция (команда на языке JavaScript) отделяется от других точкой с запятой ';', которая обычно ставится в той же строке в конце каждой инструкции. Если инструкция является последней в программе либо далее идет закрывающая фигурная скобка '}', то после нее точку с запятой разрешается не ставить. Также можно опускать точку с запятой между двумя соседними инструкциями, которые находятся на разных строках, но только в тех случаях, когда интерпретатор JavaScript однозначно не сможет продолжить синтаксический разбор следующей инструкции без точки с запятой (см. пример №2).

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">	
	<!--  Не забываем про заголовок документа  -->
	<title>Порядок интерпретации точки с запятой в JavaScript</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>

	<p>
		<dfn class="definition_word">Совет.</dfn> Чтобы не допускать 
		случайных ошибок, всегда завершайте инструкции точкой с запятой 
		в независимости от того, находятся инструкции на одной или же 
		на разных строках.
	</p>

	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.definition_word{ 
color: blue;
}














		
		
		
    
//Здесь браузер интерпретирует разрыв строки как точку с запятой,
//т.к. он не сможет правильно интерпретировать инструкцию 
//'var b=1 var' без точки с запятой 
var b=1 
var d=2
 
//Находим первый абзац по его id
var p_1=document.getElementById('p_1'); 
//Вставляем в него значение переменной b
p_1.innerHTML=b; //Выведет 1

//Находим второй абзац по его id
var p_2=document.getElementById('p_2'); 
//Вставляем в него значение переменной d
p_2.innerHTML=d; //Выведет 2


//Здесь браузер не будет считать разрыв строки точкой с запятой,
//т.к. он может получить более длинную инструкцию 'var e = 3'
//А вот разрыв строки после 3 он посчитает точкой с запятой, иначе 
//разбор инструкции 'var e = 3 var p_3=document.getElementById('p_3');' 
//вызвал бы ошибку

var e
=
3
		
var p_3=document.getElementById('p_3'); 
//Вставляем в него значение переменной e
p_3.innerHTML=e; //Выведет 3		

Пример №2 Порядок интерпретации точки с запятой в JavaScript

Из общего правила преобразования интерпретатором разрыва строки в точку с запятой имеются два исключения:

  • разрыв строки между ключевыми словами return, break или continue и выражениями, которые следуют сразу за ними, браузеры всегда преобразуют в точку с запятой (см. пример №3);
HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">	
	<!--  Не забываем про заголовок документа  -->
	<title>Разрывы строк и служебные слова return, break, continue</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>

	<p>
		<dfn class="definition_word">Совет.</dfn> Не вставляйте разрывы 
		строк между ключевыми словами return, break или continue и 
		следующими за ними выражениями.
	</p>

	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>
    
    
    
    
        
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.definition_word{ 
color: blue;
}










    
    
    
    
    
    
    
    
         
//Определим функцию
function my_func_1(){
	//Определим в ней локальную переменную
	var x=7;
	//Напишем инструкцию на разных строках
	return 
	x;
}

//Выведет undefined, т.к. инструкция вывода 
//интерпретировалась как   return; x;, т.е.
//интерпретатор преобразовал разрыв строки в ';' 

//Находим первый абзац по его id
var p_1=document.getElementById('p_1'); 
//Вставляем в него результат вызова функции
p_1.innerHTML=my_func_1(); 

//-------------------

//Определим функцию
function my_func_2(){
	//Определим в ней локальную переменную
	var x=8;
	//Попробуем записать инструкцию в одной строке 
	return x;
}

//Выведет как и ожидалось 8
//Находим первый абзац по его id
var p_2=document.getElementById('p_2'); 
//Вставляем в него результат вызова функции
p_2.innerHTML=my_func_2(); 

Пример №3 Разрывы строк и return, break, continue

  • при использовании операторов ++ (увеличивает значение на 1) и -- (уменьшает значение на 1) в постфиксной форме записи (т.е. когда они идут после выражения), их следует писать в той же строке, что и выражение, за которым они следуют, т.к. интерпретатор посчитает текущий префиксный оператор (т.е. идущий перед выражением), относящимся к выражению, которое следует далее за данным оператором (см. пример №4).
HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">	
	<!--  Не забываем про заголовок документа  -->
	<title>Разрывы строк и операторы ++ и --</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>	
	<p id="p_4"></p>	
	<p id="p_5"></p>	
	<p id="p_6"></p>	

	<p>
		<dfn class="definition_word">Совет.</dfn> Чтобы не возникало досадных 
		ошибок, нужно завершать инструкции точкой с запятой и стараться вмещать 
		каждую отдельную инструкцию на одной строке.
	</p>

	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
        
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.definition_word{ 
color: blue;
}

















    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
         
//Присвоим переменным значения
var x=1; 
var y=2;

//Здесь интерпретатор браузера посчитает оператор ++
//не постфиксным (идущим после) оператором переменной x, а  
//префиксным (идущим перед) оператором переменной y !!!
//Интерпретируется как   x; ++y;, а не  x++; y; 
x
++
y; 
 
//Находим абзац по его id
var p_1=document.getElementById('p_1'); 
//Вставляем в него значение переменной
//Останется 1
p_1.innerHTML=x; 

//Находим абзац по его id
var p_2=document.getElementById('p_2'); 
//Вставляем в него значение переменной
//Выведет 3, т.к. интерпретатор отнес ++ к y
p_2.innerHTML=y; 

//--------------------

//Запишем ++ на одной строке с переменной х
//Интерпретируется как   x++; y;	
x++
y;

//Находим абзац по его id
var p_3=document.getElementById('p_3'); 
//Вставляем в него значение переменной
//Выведет 2, т.к. интерпретатор отнес ++ к x
p_3.innerHTML=x; 

//Находим абзац по его id
var p_4=document.getElementById('p_4'); 
//Вставляем в него значение переменной
//Останется 3
p_4.innerHTML=y; 

//--------------------

//Чтобы не возникало досадных ошибок, лучше завершать 
//инструкции точкой с запятой и стараться 
//вмещать каждую отдельную инструкцию на одной строке,
//тогда не нужно будет думать о таких исключениях!!!

//Интерпретируется как   x++; y;	
x++;
y;

//Находим абзац по его id
var p_5=document.getElementById('p_5'); 
//Вставляем в него значение переменной
//Выведет 3, т.к. интерпретатор отнес ++ к x
p_5.innerHTML=x; 

//Находим абзац по его id
var p_6=document.getElementById('p_6'); 
//Вставляем в него значение переменной
//Останется 3
p_6.innerHTML=y; 

Пример №4 Разрывы строк и операторы ++ и --

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

Комментарии в JavaScript

Еще одной важной частью синтаксиса любого языка программирования являются комментарии. В JavaScript используются как однострочные комментарии, так и многострочные. Для однострочных комментариев используется комбинация символов '//'. Они идут только до конца строки и весь код после символов '//' интерпретатором игнорируется. Многострочные комментарии представляют собой любой текст, расположенный между комбинациями символов '/*' и '*/'. Как следует из названия, многострочные комментарии могут содержать несколько строк, но при этом не могут быть вложенными друг в друга (см. пример №5).

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">	
	<!--  Не забываем про заголовок документа  -->
	<title>Комментарии в JavaScript</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	
	<p>
		Многострочные комментарии могут содержать несколько строк, но 
		при этом не могут быть вложенными друг в друга!
	</p>

	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.definition_word{ 
color: blue;
}

















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

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

/* А это многострочный комментарий,
расположеный на нескольких строках */

//-------------------------------

/* var x=3; этот код игнорируется интерпретатором,
т.к. он считается комментарием */

//Находим абзац по его id
var p_1=document.getElementById('p_1'); 
//Вставляем в него значение переменной
//Выведет undefined
p_1.innerHTML=x; 

//А этот код  будет интерпретирован правильно
var x=3; 

//Находим абзац по его id
var p_2=document.getElementById('p_2'); 
//Вставляем в него значение переменной
//Выведет 3
p_2.innerHTML=x; 

//-------------------------------

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

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

//Здесь, если раскомментировать однострочный комментарий,
//при выполнении скрипта возникнет ошибка (попробуйте)
// /* Вложенные /* многострочные */ комментарии запрещены */

Пример №5 Комментарии в JavaScript

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

  • освежить в памяти программиста различные мелкие детали;
  • подсказывают, какую задачу решает тот или иной фрагмент кода, в особенности, если код чужой;
  • позволяют в случае необходимости временно закомментировать фрагмент кода, например, во время отладки программы;
  • играют роль предупреждений, например, о необходимости применения именно данного решения, а не на первый взгляд более очевидного.

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

Форматирование javascript-кода

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

Быстрый переход к другим страницам