Структура javascript

В этом разделе рассмотрена общая структура и синтаксис javascript-кода с учетом основных особенностей языка.

Он очень тесно связан с разделом сайта Основные элементы языка. Вы можете читать и то и другое в удобной вам последовательности.

ECMAScript

Стандарт (формальное описание синтаксиса и работы языка) javascript называется ECMAScript. На нем, кстати, основан не только javascript, но и несколько других языков, например ActionScript (Flash).

По ECMAScript есть спецификация, которая подробно описывает синтаксис, управляющие конструкции и базовые объекты языка.

Например, вот скрипт, который работает, используя только ECMAScript. Кстати, поэтому он будет работать и в других языках, основанных на ECMAScript, включая ActionScript:

var max = 5
try {
  for(var i=0; i<Number.POSITIVE_INFINITY; i++) {
    if (i>max) throw new Error("failed to reach the stars")
  }
} catch(e) { }

ECMAScript - и правда очень особенный язык. Особенно для тех, кто пришел из PHP, C, Java. В нем особым образом устроены объекты и функции.

Здесь мы пройдем по основным особенностям и отличиям языка.

Конструкции

Точка с запятой

Как и во многих языках, предложения на языке javascript можно разделять точкой с запятой.

Но при переходе на новую строку в javascript точка с запятой становится необязательна, ее можно не ставить.

Эти две строки полностью эквивалентны:

a = 5
a = 5;

В javascript перевод строки почти всегда подразумевает точку с запятой.

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

Вот так не будет работать:

var a = "длинная 
  строка "

Так как перевод строки подразумевает точку с запятой, и javascript поймет это как

var a = "длинная;
  строка ";

То есть, сообщит о незавершенной строке (unterminated literal) в первой строчке этого примера.

Или, например, следующие два примера кода эквивалентны:

return
  result;

то же самое, что и

return;
result;

и совсем не то же, что

return result

В обоих случаях будет возвращено значение undefined (это значение возвращает любая функция, где нет оператора return, либо оператор return вызван без аргумента), а не result.

Чтобы многострочные операторы работали как надо - перенос строки можно указывать обратным слешем "\", вот так:

var a = "длинная \
  строка "

return \
   result;

Полный список синтаксических конструкций и операторов приведен в справочнике. Они похожи на PHP/C/Java, но многие имеют особенности, знание которых поможет грамотно программировать на javascript.

Блоки

Блоки задаются фигурными скобками.

Локальные переменные объявляются при помощи var. Причем, в отличие от C/Java, сам по себе блок не задает отдельную область видимости.

var i = 0
{
  var i=5
  alert(i) // 5 
}
alert(i) // тоже 5

Комментарии

Комментарии возможны в двух вариантах // и /*...*/:

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

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

Переменные

Переменные в javascript слабо типизированы. Это означает, что при объявлении не нужно указывать тип. Можно присвоить любой переменной любое значение.

Однако при этом интерпретатор javascript (браузер) всегда знает, какого типа значение содержит данная переменная, а значит - какие операции к ней применимы.

Переменную не обязательно объявлять. Достаточно ее просто присвоить:

x = 5

Далее мы разберем основные типы переменных и действия с ними.

Функции

Функции задаются объявлением function со списком параметров:

function sayHello(name) {
    alert("Hello "+name)
}

Язык javascript предоставляет очень мощные возможности по работе с функциями.

Например:

• Неопределенное количество аргументов, подсредством arguments
• Замыкания

Область видимости

Директива var при объявлении переменной делает ее локальной, то есть видимой только внутри текущей функции. Все остальные переменные являются глобальными.

Локальная переменная объявляется так:

var i

При объявлении можно тут же присвоить переменной значение и объявить другие переменные:

// то же самое что 3 отдельных объявления c var
var a=5, b=6, str = "Строка"

В следующем примере переменная a в функции go объявлена как локальная. Поэтому глобальное значение a=1 не изменяется в процессе выполнения go.

a = 1
function go() {
    var a = 6
}

go()
alert(a) // => 1

А здесь - ключевое слово var опущено, поэтому значение меняется:

a = 1
function go() {
    a = 6
}

go()
alert(a) // => 6

Кстати, глобальных переменных в javascript на самом деле нет. То, что называют "глобальными" - на самом деле свойства специального объекта window. Например, в последнем примере alert(window.a) тоже выдало бы 6.

Все "глобальные" переменные привязаны к своему окну. Разные окна и фреймы имеют разные "глобальные" переменные, которыми могут обмениваться друг с другом.

Вообще, глобальных переменных в JS рекомендуется избегать, особенно при написании библиотек и компонент, которые предполагается использовать в разных приложениях.

Как правило - всё, что относится к компоненту, объявляется в виде свойств единого глобального объекта: ExtJS, dojo и т.п. Вы можете увидеть это в любом известном JS-фреймворке.

Обратите внимание, в javascript все директивы var срабатывают при входе в функцию, неважно где они находятся.

Например, посмотрим на функцию:

function cmp(a,b) {
  if (a>b) {
    res = 1
  } else if (a<b) {
    res = -1
  } else {
    var res = 0
  }
  
  return res
}

При входе в функцию интерпретатор javascript находит все объявления var и создает соответствующие локальные переменные.

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

Основные типы

Строки

Для объявления строк используются кавычки - простые ' или двойные ". Между ними нет никакой разницы.

a = 'моя'
b = "строка"

Для конкатенации строк используется оператор +.

a = "моя"
b = "строка"
alert(a + ' ' + b)

Более подробно строки и другие базовые типы рассмотрены в статье Базовые типы: Строки, Числа, Boolean.

Объекты

Javascript - объектный язык. В нем все является объектами. Строки, числа, функции и массивы - все это объекты со своими методами и свойствами. Это надо знать и иметь в виду с самого начала.

Методы объектов вызываются через точку. Например, у строки String есть метод toUpperCase, возвращающий строку в верхнем регистре:

name = "Vasya"

alert( name.toUpperCase() )

Или даже так:

alert( "Vasya".toUpperCase() )

Практически всё в javascript делается при помощи вызова методов различных объектов.

Объекты создаются функциями-конструкторами при помощи директивы new.
Вы можете почитать о них подробнее в разделе Объекты, ООП

Массивы

В javascript есть два основных способа объявить массив.

Для массива с числовыми индексами обычно используется объект типа Array.

arr = new Array("my", "array")
alert(arr.length)  // 2

Свойство length содержит длину массива, которая всегда равна последнему индексу (в примере выше - это 1) плюс один.

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

arr = [ "my", "array" ]
alert(arr[0]) // "my" <- нумерация от нуля

Новые элементы можно добавить в конец методом push.
Для перебора значений используется цикл for.

arr = ["первый", "второй"]
arr.push("третий")

for(var i=0; i<arr.length; i++) {
  alert(arr[i]) 
}

Более подробно массивы с числовыми индексами рассмотрены в статье Массивы .

Ассоциативные массивы

Для массивов, ключи которых являются строками, используется Object.
Следующая запись задает ассоциативный массив с ключами n и str:

obj = { 
  n: 1,
  str: "Вася"
}

Для получения свойства объекта используется оператор-аксессор: точка либо квадратные скобки.

obj = {   n: 1,  str: "Вася" }

alert(obj.n) // точка 
alert(obj["n"])

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

var key = "str"
alert(obj[key])

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

При обращении к отсутствующему свойству возвращается специальное значение undefined.

a = { }  // пустой объект
alert(a.something)  // undefined
alert(a.blabla === undefined)

В примере был использован оператор сравнения без приведения типа.

Более подробно о том, как перебирать ключи массива, и о самих объектах - вы можете узнать из статьи Объекты Javascript в примерах.

Другие типы, функции, конструкции

Более подробно обо всем этом можно почитать в разделе сайта Основные элементы языка.

Резюме

• Вы разобрали основы языка javascript.
• Узнали, какие базовые типы в нем есть
• Ознакомились с синтаксисом функций и заданием переменных в javascript
• Освоили основные операции с числовыми и ассоциативными массивами

Очень хорошо, если вы нашли возможность прочитать статьи по ссылкам.
Впрочем, чтобы двигаться дальше - хватит и материала в этой статье.

• Введение
• Основы javascript
• DOM: работа с HTML-страницей
• События
• Объекты, ООП
• AJAX
• Особенности регулярных выражений в Javascript