Книга: JavaScript. Подробное руководство, 6-е издание

1.1 Базовый JavaScript

1.1 Базовый JavaScript

Этот раздел представляет собой обзор языка JavaScript, а также обзор первой части этой книги. После этой вводной главы мы опустимся на самый нижний уровень JavaScript: в главе 2 «Лексическая структура» будут описаны основные лексические конструкции JavaScript, такие как комментарии, точки с запятой и набор символов Юникода. В главе 3 «Типы данных, значения и переменные» мы начнем рассматривать более интересные темы: здесь будут описаны переменные JavaScript и значения, которые можно присваивать этим переменным. Ниже приводится пример программного кода, иллюстрирующий предмет обсуждения этих двух глав:

// Все, что следует за двумя символами слэша, является комментарием.
// Внимательно читайте комментарии: они описывают программный код JavaScript.
// Переменная - это символическое имя некоторого значения.
// Переменные объявляются с помощью ключевого слова var:
var х; // Объявление переменной с именем х.
// Присваивать значения переменным можно с помощью знака =
х = 0;             // Теперь переменная х имеет значение 0
х                  // => 0: В выражениях имя переменной замещается ее значением.
// JavaScript поддерживает значения различных типов
х = 1;             // Числа.
х = 0.01;          // Целые и вещественные числа представлены одним типом,
х = "hello world"; // Строки текста в кавычках,
х = 'JavaScript';  // Строки можно также заключать в апострофы,
х = true;          // Логические значения,
х = false;         // Другое логическое значение.
х = null;          // null - особое значение, обозначающее "нет значения",
х = undefined;     // Значение undefined подобно значению null.

Двумя другими очень важными типами данных, которыми могут манипулировать программы на JavaScript, являются объекты и массивы. Они будут рассматриваться в главе 6 «Объекты» и в главе 7 «Массивы» однако они настолько важны, что вы не раз встретитесь с ними, прежде чем дойдете до этих глав.

// Наиболее важным типом данных в JavaScript являются объекты.
// Объект - это коллекция пар имя/значение или отображение строки в значение.
var book = {           // Объекты заключаются в фигурные скобки.
  topic: "JavaScript", // Свойство "topic" имеет значение "JavaScript",
  fat: true            // Свойство "fat" имеет значение true.
};                     // Фигурная скобка отмечает конец объекта.
// Доступ к свойствам объектов выполняется с помощью . или []:
book.topic                // => "JavaScript"
book["fat"]               // => true: другой способ получить значение свойства,
book.author = "Flanagan": // Создать новое свойство присваиванием,
book.contents = {};       // {} - пустой объект без свойств.
// JavaScript поддерживает массивы (списки с числовыми индексами) значений:
var primes = [2, 3, 5, 7]; // Массив из 4 значений, ограничивается [ и ].
primes[0]                  // => 2: первый элемент (с индексом 0) массива,
primes.length              // => 4: количество элементов в массиве.
primes[primes.length-1]    // => 7: последний элемент массива.
primes[4] = 9:             // Добавить новый элемент присваиванием.
primes[4] = 11;            // Или изменить значение имеющегося элемента.
var empty = [];            // [] - пустой массив без элементов.
empty.length               // => О
// Массивы и объекты могут хранить другие массивы и объекты:
var points = [             // Массив с 2 элементами.
  {х:0, у:0},              // Каждый элемент - это объект.
  {х: 1, у: 1}
];
var data = { // Объект с 2 свойствами
  triall: [[1.2], [3.4]],  // Значение каждого свойства - это массив.
  trial2: [[2,3]. [4,5]]   // Элементами массива являются массивы.
};

Синтаксические конструкции, представленные выше и содержащие списки элементов массивов в квадратных скобках или отображения свойств объектов в значения внутри фигурных скобок, часто называют выражениями инициализации, которые будут рассматриваться в главе 4 «Выражения и операторы». Выражение - это фраза на языке JavaScript, которую можно вычислить, чтобы получить значение. Например, применение . и [ ] для ссылки на значение свойства объекта или элемента массива является выражением. Возможно, вы заметили, что в листинге, приведенном выше, в строках, содержащих только выражение, комментарии начинаются со стрелки (=>), за которой следует значение выражения. Этому соглашению мы будем следовать на протяжении всей книги.

Наиболее типичным способом формирования выражений в JavaScript является использование операторов, подобно тому, как показано ниже:

// Операторы выполняют действия со значениями (операндами) и воспроизводят
// новое значение. Наиболее часто используемыми являются арифметические операторы:
3+2      // => 5: сложение
3-2      // => 1: вычитание
3*2      // => 6: умножение
3/2      // => 1.5: деление
points[1].x - points[0].x // => 1: можно использовать более сложные операнды
"3" + "2"                 // => "32": + складывает числа, объединяет строки
// В JavaScript имеются некоторые сокращенные формы арифметических операторов
var count = 0; // Объявление переменной
count++;       // Увеличение значения переменной на 1
count--;       // Уменьшение значения переменной на 1
count += 2;    // Добавить 2: то же, что count = count + 2;
count *= 3;    // Умножить на 3: то же, что count = count * 3;
count          // => 6: имена переменных сами являются выражениями
// Операторы сравнения позволяют проверить два значения на равенство
// или неравенство, выяснить, какое значение меньше или больше, и т. д.
// Они возвращают значение true или false.
var х = 2, у = 3; // Знаки = выполняют присваивание, а не сравнение
x == y            // => false: равенство
x != y            // => true: неравенство
x < y             // => true: меньше
x <= y            // => true: меньше или равно
x > y             // => false: больше
x >= y            // => false: больше или равно
"two" == "three"  // => false: две разных строки
"two" > "three"   // => true: при упорядочении по алфавиту строка "tw” больше, чем "th"
false == (х > у)  // => true: false равно false
// Логические операторы объединяют или инвертируют логические значения
(х == 2) && (у == 3) // => true: оба сравнения истинны. && - "И"
(х > 3) || (у < 3)   // => false: оба сравнения ложны. || - "ИЛИ"
!(х == у)            // => true: ! инвертирует логическое значение

Если фразы в языке JavaScript называются выражениями, то полные предложения называются инструкциями; они рассматриваются в главе 5 «Инструкции». В программном коде, приведенном выше, строки, заканчивающиеся точками с запятой, являются инструкциями. (В примере ниже можно увидеть инструкции, состоящие из нескольких строк, которые не завершаются точками с запятой.) Между инструкциями и выражениями много общего. Грубо говоря, выражение - это конструкция, которая вычисляет значение, но ничего не делает: она никак не изменяет состояние программы. Инструкции, напротив, не имеют значения (или их значение не представляет интереса для нас), но они изменяют состояние программы. Выше уже были показаны инструкции объявления переменных и присваивания значений. Еще одной обширной категорией инструкций являются управляющие конструкции, такие как условные инструкции и инструкции циклов. Примеры этих инструкций будут показаны далее, после того, как мы познакомимся с функциями.

Функция - это именованный и параметризованный блок программного кода JavaScript, который определяется один раз, а использоваться может многократно. Формальное знакомство с функциями мы отложим до главы 8 «Функции», однако, как и в случае с объектами и массивами, мы много раз встретимся с функциями, прежде чем доберемся до этой главы. Ниже приводятся несколько примеров простых функций:

// Функции - это параметризованные блоки программного кода JavaScript,
// которые можно вызывать многократно.
function plus1(x) { // Определить функцию с именем "plusr и с параметром "х"
  return х+1;       // Вернуть значение на 1 больше полученного
}                   // Функции заключаются в фигурные скобки
plus1(y) // => 4: у имеет значение 3, поэтому этот вызов вернет 3+1
var square = function(x) { // Функции можно присваивать переменным
  return х*х;              // Вычислить значение функции
};                         // Точка с запятой отмечает конец присваивания.
square(plus1(y))           // => 16: вызов двух функций в одном выражении

При объединении функций с объектами получаются методы.

// Функции, присвоенные свойствам объектов, называются методами.
// Все объекты в JavaScript имеют методы:
var а = [];    // Создать пустой массив
а.push(1,2,3); // Метод push() добавляет элементы в массив
a.reverse();   // Другой метод: переставляет элементы в обратном порядке
// Можно определять собственные методы. Ключевое слово "this" ссылается на объект,
// в котором определен метод: в данном случае на массив points,
points.dist = function() { // Метод вычисления расстояния между точками
var р1 = this[0];      // Первый элемент массива, относительно которого вызван метод
var р2 = this[1];      // Второй элемент объекта "this"
var а = р2.х-р1.х;     // Разность координат X
var b = р2.у-р1.у;     // Разность координат Y
return Math.sqrt(a*a + // Теорема Пифагора
                 b*b); // Math.sqrtO вычисляет корень квадратный
};
points.dist() // => 1.414: расстояние между 2-мя точками

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

// В JavaScript имеются условные инструкции и инструкции циклов, синтаксически
// похожие на аналогичные инструкции С, C++, Java и в других языках.
function abs(x) {  // Функция, вычисляющая абсолютное значение
  if (х >= 0) {    // Инструкция if ...
    return х;      // выполняет этот код, если сравнение дает true.
  }                // Конец предложения if.
  else {           // Необязательное предложение else выполняет свой код,
    return -x;     // если сравнение дает значение false.
  }                // Фигурные скобки можно опустить, если предложение
                   // содержит 1 инструкцию.
}                  // Обратите внимание на инструкции return внутри if/else.
function factorial(n) { // Функция, вычисляющая факториал
  var product = 1;      // Начать с произведения, равного 1
  while(n > 1) {        // Повторять инструкции в {}, пока выраж. в () истинно
    product *= n;       // Сокращенная форма выражения product = product * n;
    n--;                // Сокращенная форма выражения n = п - 1
  }                     // Конец цикла
  return product;       // Вернуть произведение
}
factorial(4)            // => 24: 1*4*3*2
function factorial2(n) { // Другая версия, использующая другой цикл
  var і, product = 1;    // Начать с 1
  for(i=2; і <= n; i++)  // і автоматически увеличивается с 2 до n
    product *= i;        // Выполнять в каждом цикле. {} можно опустить,
                         // если тело цикла состоит из 1 инструкции
  return product;        // Вернуть факториал
}
factorial2(5)            // => 120: 1*2*3*4*5

JavaScript - объектно-ориентированный язык, но используемая в нем объектная модель в корне отличается от модели, используемой в большинстве других языков. В главе 9 «Классы и модули» детально рассматривается объектно-ориентированное программирование на языке JavaScript на большом количестве примеров; эта глава является одной из самых больших в книге. Ниже приводится очень простой пример, демонстрирующий определение класса JavaScript для представления точек на плоскости. Объекты, являющиеся экземплярами этого класса, обладают единственным методом с методом r(), который вычисляет расстояние между данной точкой и началом координат:

// Определение функции-конструктора для инициализации нового объекта Point
function Point(x,y) { // По соглашению имя конструкторов начинается с заглавного символа
  this.x = x;         // this - ссылка на инициализируемый объект
  this.у = у;         // Сохранить аргументы в свойствах объекта
} // Ничего возвращать не требуется
// Чтобы создать новый экземпляр, необходимо вызвать функцию-конструктор
// с ключевым словом "new"
var р = new Point(1, 1); // Точка на плоскости с координатами (1,1)
// Методы объектов Point определяются за счет присваивания функций свойствам
// объекта-прототипа, ассоциированного с функцией-конструктором.
Point.prototype.r = function() {
  return Math.sqrt( // Вернуть корень квадратный от x2 + y2
          this.x * this.x + // this - это объект Point, относительно которого...
          this.у * this.у   // ...вызывается метод.
  );
};
// Теперь объект p типа Point (и все последующие объекты Point) наследует метод r()
p.r()       // => 1.414...

Глава 9 является кульминацией первой части, а главы, которые следуют за ней, связывают некоторые оборванные концы и завершают исследование базового языка. В главе 10 «Шаблоны и регулярные выражения» описывается грамматика регулярных выражений и демонстрируются приемы использования регулярных выражений для реализации сопоставления с текстовыми шаблонами. В главе 11 «Подмножества и расширения JavaScript» рассматриваются подмножества и расширения базового языка JavaScript. Наконец, прежде чем перейти к исследованию клиентского JavaScript в веб-броузерах, в главе 12 «Серверный JavaScript» будут представлены два способа использования JavaScript за пределами веб-броузеров.

Оглавление книги