jQuery создан поверх JavaScript, богатого и выразительного языка, и основан на его правилах. В этом разделе рассматриваются основные понятия JavaScript, а также некоторые его ловушки, в которые попадают люди, не сталкивающиеся прежде с JavaScript. Хотя раздел больше ориентирован на тех, у кого нет опыта программирования, даже те люди, которые использовали другие языки программирования, могут извлечь пользу, изучая некоторые особенности JavaScript.
Вот простая программа на JavaScript, которая добавляет сообщение на страницу:
// создание функции, которая приветствует человека
var greet = function( person, message ) {
var greeting = 'Привет, ' + person + '!';
console.log( greeting + ' ' + message );
};
// используем функцию чтобы приветствовать Джори,
// передавая имя и желаемое сообщение
greet( 'Джори', 'Добро пожаловать в JavaScript' );
// используем функцию чтобы приветствовать Ребекку
greet( 'Ребекка', 'Спасибо, что присоединились к нам' );
Не переживайте, если вам не всё понятно что происходит в этой программе. Дальше мы поговорим о переменных, функциях и некоторых других строительных блоках JavaScript.
Комментарий о комментариях
Комментарии могут оказаться полезным инструментом для пояснения того, что происходит в куске кода. Содержание комментария не оказывает никакого влияния на работу кода. Некоторые люди любят интенсивно комментировать свой код, другие же предпочитают добавлять комментарии только для не очевидных вещей.
JavaScript допускает однострочные и многострочные комментарии. Однострочный комментарий начинается с //, многострочный комментарий начинается с /* и заканчивается */.
// Это однострочный комментарий
var foo;
/*
Это многострочный комментарий. Он может занимать
несколько строк, как здесь.
*/
Также иногда вы можете встретить многострочный комментарий, применяемый для комментирования строк:
function cornify( unicorns /* целое */, rainbows /* целое */ ) {
}
Строительные блоки JavaScript
Переменные
Переменные применяются для хранения значений, которые мы можем использовать позже. Переменные могут содержать любое значение — текст, числа, данные (такие как «массивы» и «объекты»), даже код (в виде «функций»). Мы объявляем переменную через выражение var:
var myName = 'Ребекка';
Имена переменных могут быть произвольными, не должны начинаться с цифры и не должны включать дефис.
Вы можете определить одну переменную на выражение:
var a = 1;
var b = 'два';
Вы также можете определить несколько переменных в одном выражении, разделив их запятыми:
var a = 1,
b = 'two';
После того, как переменной присвоено значение, вы можете использовать эту переменную, когда хотите получить доступ к её значению.
console.log( myName ); // Выводит «Ребекка»
Переменные являются ключевым понятием в философии «не повторяйся». Если вам нужно использовать значение несколько раз, вы, вероятно, пожелаете хранить его в переменной.
Функции
Функции являются основным строительным блоком программ JavaScript. Они предлагают способ, при котором мы можем положить небольшие кусочки функциональности в аккуратно завёрнутый пакет. Рассмотрим, к примеру, функцию, которая складывает два числа:
function(a, b) {
return a + b;
}
Эта функция принимает два аргумента: a и b, складывает их и возвращает результат.
Это корректный кусок JavaScript, но написан так, что у нас нет никакого способа вызвать функцию, если мы действительно хотим складывать два числа. Можем решить эту проблему присваивая нашу функцию переменной:
var addTwoNumbers = function(a, b) {
return a + b;
};
Мы взяли выражение функции и присвоили её переменной. Теперь мы можем вызвать нашу функцию, используя имя этой переменной:
console.log( addTwoNumbers(1, 1) ); // Выводит 2
Мы могли бы также использовать объявление функции, чтобы дать функции имя:
function addTwoNumbers(a, b) {
return a + b;
}
Это позволяет нам вызывать функцию как и раньше, но данный подход следует использовать с осторожностью, как описано в этом посте.
Итог: именовании функции через её объявление может иметь неожиданные результаты, если вы не в полной мере понимаете особенность JavaScript известную как «поднятие переменной». Тема выходит за рамки данного руководства, но сейчас мы будем придерживаться присвоения функций переменным.
Функции и область видимости переменных
Переменные, объявленные внутри функции с выражением var, доступны только внутри функции. Это обычная рекомендация и все переменные должны быть объявлены с var, если они не предполагаются глобальными, иными словами, доступными в любом месте кода. Обычно это не то чего бы вам хотелось, разве только нужно, чтобы другой код изменил значение переменной.
Что это значит, когда переменная доступна только внутри функции? Давайте взглянем на следующий код:
Внимание! Некорректный код
var myFunction = function() {
var foo = 'bar';
};
myFunction();
console.log( typeof foo ); // Вывод не определён
В приведённом выше примере, как только мы пытаемся использовать foo за пределами функции, даже просто для проверки её типа, наш браузер сообщит об ошибке и любой код после строки с foo работать не будет.
Следующий пример показывает, что у нас может быть две переменные с одинаковым именем, при этом каждая переменная находится в своей области видимости. В примере мы объявляем переменную foo и присваиваем ей значение qux. Затем внутри функции мы объявляем другую переменную с именем foo и присваиваем ей значение bar. Обратите внимание, что за пределами функции переменная foo не меняется, даже при создании переменной foo внутри функции.
var foo = 'qux';
var myFunction = function() {
var foo = 'bar';
};
console.log( foo ); // Выводит 'qux'
myFunction();
console.log( foo ); // По прежнему выводит 'qux'
Несмотря на то, что обе переменные названы одинаково, JavaScript считает их совершенно разными сущностями. Это одна из множества причин, почему важно давать переменным осмысленные имена.
Область видимости переменной является одним из фундаментальных понятий JavaScript и одним из понятий, с которым люди часто испытывают трудность. Важно помнить, что:
- вы всегда должны объявлять переменные с var;
- переменные, объявленные внутри функции через var, не доступны за пределами этой функции;
- переменные, объявленные без var, всегда глобальны.
Помните, что переменные, которые не объявлены с ключевым словом var являются глобальными неявно! В следующем примере переменная a доступна за пределами функции, потому что она не была объявлена с ключевым словом var — а это, как правило, нежелательно.
Внимание! Небезопасный код
function test() {
a = 1;
}
test();
console.log( a ); // Выводит 1