Знакомство с языком JavaScript: Часть 1. Основы

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

Крис Хэдлок, Web-разработчик/дизайнер, Studio Sedition

Фото Криса ХэдлокаКрис Хэдлок (Kris Hadlock) занимается разработкой и Web-дизайном по контрактам с 1996 года. Работал над проектами для таких компаний, как SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software и Fire Mountain Gems. Автор книг Ajax for Web Application Developers (издательство Sams) и The ActionScript Migration Guide (издательство New Riders), а также журналист и писатель, публиковавшийся на многочисленных Web-сайтах и в журналах по дизайну, в том числе Peachpit.com, InformIT.com и Practical Web Design. Крис – основатель студии Web-дизайна и разработки программного обеспечения www.studiosedition.com, специализирующейся в области синтеза формы и функциональности.



13.04.2012

Популярность языка JavaScript постоянно растет, и, вероятно, он является самым известным языком программирования для Интернета. Его можно использовать на различных платформах и Web-браузерах, и он ни в чем не отстает от обычных языков программирования. Существует множество библиотек, которые помогают при программировании на JavaScript, ускоряют процесс разработки и т. д. Проблема заключается в том, что иногда эти библиотеки находятся так "далеко" от исходного языка, что начинающим программистам не хватает понимания основ языка. В этой статье рассматриваются основы языка, включая базовые принципы JavaScript, чтобы предоставить начинающим пользователем основополагающие знания о языке. В статье представлены примеры кода, показывающие, как работают различные аспекты языка.

Наработка навыков использования JavaScript

Эта статья является частью курса по развитию навыков использования JavaScript. Дополнительную информацию можно найти в полном руководстве по JavaScript.

Знакомство с языком JavaScript

Язык JavaScript – это бесплатный язык сценариев, исполняемых на стороне клиента, который позволяет создавать интерактивные HTML-страницы. "На стороне клиента" (client-side) означает, что JavaScript запускается в Web-браузере и не используется на стороне сервера. Сценарии на стороне клиента позволяют пользователю интерактивно взаимодействовать с Web-страницей после того, как она была обработана сервером и загружена Web-браузером. Например, в GoogleMaps применение языка JavaScript дает пользователям возможность взаимодействовать с картой, перемещать её, приближать и удалять и т.д. Без JavaScript Web-страницу приходилось бы обновлять при каждом взаимодействии с пользователем, если, конечно, не использовать такие плагины, как Adobe Flash или Microsoft® Silverlight. Язык JavaScript не требует плагинов.

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

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

Перед началом изучения языка следует познакомиться с его основными принципами:

  • чтобы добавить JavaScript-код в HTML-файл, его необходимо поместить внутрь тегов script и добавить в файл атрибут text/javascript (см. листинг 1);
  • все выражения в JavaScript оканчиваются точкой с запятой;
  • язык чувствителен к регистру символов;
  • имена всех переменных должны начинаться с буквы или символа подчеркивания;
  • можно использовать комментарии, чтобы выделить определенные строки в сценарии; комментарии должны начинаться с двойного прямого слеша (//), за которым следует текст комментария;
  • комментарии также можно использовать для отключения фрагментов сценария; для отключения нескольких строк можно использовать конструкцию /* фрагмент кода */; любой код внутри /**/ не будет запускаться во время выполнения.
Листинг 1. Листинг 1. Теги script и атрибут type необходимы для добавления JavaScript на HTML-страницу
<script type="text/javascript"></script>

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

Листинг 2. Листинг 2. Использование комментариев для скрытия JavaScript-кода в Web-браузерах, не поддерживающих этот язык.
<script type="text/javascript">
<!--
Example statement here
//-->
</script>

Проще всего добавить JavaScript-код на Web-страницу, если загрузить его из внешнего JS-файла с помощью атрибута src в теге script (см. листинг 3).

Листинг 3. Листинг 3. Подключение внешнего JS-файла к HTML-странице
<script type="text/javascript" src="path/to/javascript.js"></script>

Подключение JavaScript-кода через внешние JS-файлы стало общепринятой практикой в силу нескольких причин:

  • поисковые машины могут быстрее обрабатывать и индексировать Web-сайты, если HTML-страницы последних содержат меньше кода;
  • JavaScript-код, отделенный от HTML-кода, «чище», и им гораздо легче управлять;
  • так как к HTML-странице можно подключать несколько JS-файлов, можно поместить JS-файлы на сервере в отдельную структуру каталогов, аналогично графическим файлам, что упростит управление кодом. «Чистый» и организованный код – это ключ к удобному управлению Web-сайтом.

Переменные

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

Таблица 1. Таблица 1. Выражения JavaScript
ВыражениеОписание
Арифметическоевычисляется в число
Строковоевычисляется в строку
Логическоевычисляется в Boolean-значение (true или false)

Существуют переменные двух типов: локальные и глобальные. Локальные переменные объявляются с помощью ключевого слова var, а глобальные – без него. При использовании var переменная считается локальной, так как она доступна только в той области, где была объявлена. Например, если объявить локальную переменную внутри функции (этот случай будет рассмотрен в следующих разделах), то к ней нельзя будет получить доступ за пределами функции, и она станет локальной переменной данной функции. Если же объявить эту же переменную без var, то она будет доступна по всему сценарию, а не только в этой функции.

В листинге 4 приведен пример локальной переменной num, которой присвоено значение 10.

Листинг 4. Листинг 4. Объявление локальной переменной
var num = 10;

Для доступа к значению переменной num в другой части сценария достаточно просто сослаться на переменную по имени, как показано в листинге 5.

Листинг 5. Листинг 5. Получение доступа к значению переменной
document.write("значение num равно: "+ num);

Результатом этого выражения будет "значение num равно: 10". Функция document.write выводит данные на Web-страницу. Эта функция будет использоваться на протяжении всей статьи для вывода результатов работы примеров на Web-страницу.

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

Листинг 6. Листинг 6. Хранение арифметических выражений
var num = (5 + 5);
document.write("значение num равно: "+ num);

Для изменения значения переменной следует сослаться на неё по имени и присвоить ей новое значение с помощью знака = (см. листинг 7). Разница заключается в том, что в этом случае не требуется использовать ключевое слово var, так как переменная уже объявлена.

Листинг 7. Листинг 7. Изменить значение существующей переменной
var num = 10;
document.write("значение num равно: "+ num);

// присвоить переменной значение 15
num = 15;
document.write("новое значение num равно: "+ num);

В результате запуска сценария на странице будет напечатано "значение num равно: 10", а затем "новое значение num равно: 15".

Кроме переменных, этот раздел знакомит с операторами языка, которые подробно рассматриваются далее. Знак равенства "=", используемый для присвоения значений переменным, - это оператор присваивания, а знак "+", используемый для сложения "5+5", - это арифметический оператор. В следующем разделе описаны все операторы, присутствующие в языке JavaScript, и правила их использования.


Операторы

В JavaScript операторы требуются для выполнения любого действия - сложения, вычитания, сравнения и т.д. В языке существует четыре типа операторов:

  • арифметические;
  • присваивания;
  • сравнения;
  • логические;

Арифметические операторы

Арифметические операторы выполняют базовые математические действия, такие как сложение, вычитание, умножение, деление и другие. В таблице 2 перечислены все арифметические операторы, доступные в языке JavaScript.

Таблица 2. Таблица 2. Арифметические операторы
ОператорОписание
+Сложение
-Вычитание
*Умножение
/Деление
%вычисление остатка от деления
++Инкремент
--Декремент

Операторы присваивания

Арифметические операторы выполняют базовые математические действия, а операторы присваивания присваивают значения переменным JavaScript. В предыдущем разделе был продемонстрирован оператор присваивания, чаще всего используемый для присваивания значений переменным. В таблице 3 перечислены все операторы присваивания, доступные в языке JavaScript.

Таблица 3. Таблица 3. Операторы присваивания
ОператорОписание
=Равно
+=присвоить переменной результат сложения
-=присвоить переменной результат вычитания
*=присвоить переменной результат умножения
/=присвоить переменной результат деления
%=присвоить переменной результат вычисления остатка от деления

Как было показано выше, можно использовать знак = для присваивания переменной самостоятельного значения или значения выражения, но сейчас будет продемонстрирована более сложная техника. Присваивание переменной результата сложения может показаться несколько сложным, но, как показано в листинге 8, на самом деле все просто.

Листинг 8. Листинг 8. Присвоить переменной результат сложения
var num = 10;
document.write("значение num равно: "+ num);

// присвоить переменной значение 15
num += 5;
document.write("новое значение num равно: "+ num);

В результате запуска сценария на странице будет напечатано "значение num равно: 10", а после этого "новое значение num равно: 15". Как видно оператор присваивает переменной num результат сложения числа 5 и старого значения переменной num. Этот пример можно считать упрощенной записью аналогичного сценария, приведенного в листинге 9.

Листинг 9. Листинг 9. Более сложный способ присвоить переменной результат сложения
var num = 10;
document.write("значение num равно: "+ num);

// присвоить переменной значение 15
num = (num + 5);
document.write("новое значение num равно: "+ num);

Операторы сравнения

Операторы сравнения определяют отношения между переменными или их значениями. Эти операторы используются в условных выражениях для создания логических выражений, имеющих значения true или false, путем сравнения переменных или их значений. В таблице 4 перечислены операторы сравнения, доступные в JavaScript.

Таблица 4. Таблица 4. Операторы сравнения
ОператорОписание
==равенство
===равенство по значению и типу объекта
!=неравенство
>больше чем
<меньше чем
>=больше или равно
<=меньше или равно

Сравнение переменных и их значений – это ключевой аспект при написании любых алгоритмов сортировки. В примере в листинге 10 показано, как использовать оператор сравнения, чтобы определить, равны ли "10" и "1" или нет.

Листинг 10. Листинг 10. Использование оператора сравнения
document.write(10 == 1);

Логические операторы

Логические операторы в основном используются в условных выражениях для связывания операторов сравнения. В таблице 5 перечислены все логические операторы, имеющиеся в языке JavaScript.

Таблица 5. Таблица 5. Логические операторы
ОператорОписание
&&И
||ИЛИ
!НЕ

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


Массивы

Массивы похожи на переменные, но отличаются от них тем, что могут хранить несколько значений и выражений под одним именем. Возможность хранения нескольких значений в одной переменой – это главное преимущество массива. В JavaScript для массивов не существует ограничений на количество или тип данных, которые будут в нем храниться, пока эти данные находятся в области видимости массива. Доступ к значению любого элемента массива можно получить в любой момент времени после объявления массива в сценарии. Хотя в JS-массиве можно хранить данные любого типа, включая другие массивы, обычно в массиве хранятся однородные данные и его название также каким-то образом связано с хранящимися данными. В листинге 11 представлены примеры использования массивов для хранения однородных данных.

Листинг 11. Листинг 11. Хранение однородных значений в массиве
var colors = new Array("orange", "blue", "red", "brown");
var shapes = new Array("circle", "square", "triangle", "pentagon");

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

Хотя доступ к значениям в массиве осуществляется легко, но есть одна тонкость. Массив всегда начинается с 0-го, а не первого элемента, что поначалу может смущать. Нумерация элементов начинается с 0, 1, 2, 3 и т.д. Для доступа к элементу массива необходимо использовать его идентификатор, соответствующий позиции элемента в массиве (см. листинг 12).

Листинг 12. Листинг 12. Хранение однородных элементов в массиве
var colors = new Array("orange", "blue", "red", "brown"); 
document.write("Orange: "+ colors[0]);
document.write("Blue: "+ colors[1]);
document.write("Red: "+ colors[2]);
document.write("Brown: "+ colors[3]);

Тем же способом можно присвоить значение элементу, находящемуся на определенной позиции в массиве, или обновить значение элемента в массиве (см. листинг 13).

Листинг 13. Листинг 13. Присваивание значений элементам, находящихся на определенных позициях в массиве.
var colors = new Array();
colors[0] = "orange";
colors[1] = "blue";
colors[2] = "red";
colors[3] = "brown";
document.write("Blue: "+ colors[1]);

//изменить значение blue на purple
colors[1] = "purple";
document.write("Purple: "+ colors[1]);

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


Условные выражения

Во всех языках программирования основой для создания бизнес-логики являются условные выражения, и JavaScript - не исключение. Условные выражения определяют, какое действие должно быть выполнено в зависимости от условий, установленных в сценарии. В JavaScript существуют четыре способа создания условных выражений, описанные в таблице 6.

Таблица 6. Таблица 6. Условные выражения
ВыражениеОписание
ifиспользуется для выполнения сценария, если определенное условие истинно (равно true)
if...elseиспользуется для выполнения одного сценария, если условие истинно, или другого сценария, если данное условие ложно (равно false)
if...else if...elseиспользуется для выполнения одного сценария, если одно из множества условий истинно, или другого сценария, когда все условия ложны
switchиспользуется для выполнения одного из нескольких сценариев

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

Листинг 14. Листинг 14. Использование if
var num = 10;
if(num == 5)
{
   document.write("num равно 5");
}

Выражение if...else используется, когда в случае истинности условия следует выполнить один сценарий, а в случае ложности - другой.

Листинг 15. Листинг 15. Использование if else
var num = 10;
if(num == 5)
{
   document.write("num равно 5");
}
else
{
   document.write("num НЕ равно 5, num равно: "+ num);
}

Выражение if...else if...else используется, когда есть несколько сценариев, которые должны выполняться в зависимости от истинности различных условий, как показано в листинге 16.

Листинг 16. Листинг 16. Использование if...else if...else
var num = 10;
if(num == 5)
{
     document.write("num равно 5");
}
else if(num == 10)
{
   document.write("num равно 10");
}
else
{
   document.write("num равно: "+ num);
}

switch-выражения отличаются от if-выражений тем, что они не могут сравнивать значение переменной с определенным значением. В листинге 17 приведен пример, когда для выбора выполняемого сценария удобно использовать switch-выражение.

Листинг 17. Листинг 17. Использование switch
var num = 10;
switch(num)
{
   case 5:
      document.write("num равно 5");
      break;
   case 10:
      document.write("num равно 10");
      break;
   default:
      document.write("num равно: "+ num);
}

В листинге 17 можно видеть использование case и default блоков и выражений break. Эти блоки и выражения – обязательная часть switch-конструкции. Блок case определяет, что значение, используемое в switch, равно значению, используемому в данном case-блоке. Выражение break прерывает или останавливает выполнение последующих выражений в конструкции switch. В блоке default определяется сценарий, который будет выполнен, если не будет выполнен ни один из блоков case или в выполненных case-блоках отсутствовали инструкции break. В листинге 18 показано, как одновременно могут выполниться несколько case-блоков и default-блок в случае, если в выполненных case-блоках отсутствовали инструкции break.

Листинг 18. Листинг 18. Последовательное выполнение нескольких строк кода из-за отсутствия break
var num = 10;
switch(num)
{
   case 5:
      document.write("num равно 5");
      break;
   case 10:
      document.write("num равно 10");
   default:
      document.write("num равно: "+ num);
}

В результате выполнения этого сценария будет выведено "num равно 10", а затем "num равно: 10." Такая ситуация называется "сквозное падение сквозь switch".

Как упоминалось в начале, условные выражения – это "скелет" для «наращивания» бизнес-логики в любом языке программирования, но без помощи функций получится "вырастить" только большое количество запутанного кода.


Функции

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

Функция оформляется в коде очень просто: она начинается с ключевого слова function, за которым следует пробел и название функции. Название функции может быть любым, но желательно, чтобы оно имело отношение к задаче, которую выполняет функция. В листинге 19 приведен пример функции, изменяющей значение существующей переменной.

Листинг 19. Листинг 19. Пример простой функции
var num = 10;
function changeVariableValue()
{
   num = 11;
}
changeVariableValue();
document.write("num равно: "+ num);

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

Функции также могут принимать данные через входные параметры. Функция может иметь один или несколько параметров, и в вызове функции будет передаваться столько параметров, сколько объявлено в сигнатуре функции. Важно не путать понятие "параметр" с "аргументом". Параметр – это часть определения (или сигнатуры) функции, а аргумент – это выражение, используемое при вызове функции. В листинге 20 приведен пример функции, имеющей параметры, и вызова функции с использованием аргументов.

Листинг 20. Листинг 20. Использование параметров функций
var num = 10;
function increase(_num)
{
   _num++;
}
increase(num);
document.write("num равно: "+ num);

Функция в листинге 20 увеличивает значение переданного аргумента. В данном случае аргумент – это ранее объявленная переменная. При передаче этой переменной в функцию в качестве аргумента её значение увеличивается и становится равным 11.

В функциях также используются выражения return. Эти выражения возвращают значение, полученное после выполнения сценария в функции. Например, можно присвоить переменной значение, возвращенное функцией. В листинге 21 показано, как вернуть значение из функции после выполнения сценария.

Листинг 21. Листинг 21. Использование выражения return в функции
function add(_num1, _num2)
{
   return _num1+_num2;
}
var num = add(10, 10);
document.write("num равно: "+ num);

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


Циклы

Как было продемонстрировано выше, массивы – это удобный способ хранить большое количество многократно используемых данных, но это ещё не всё. Циклы for и while предоставляют средства для итерирования по этим массивам, доступа к их значениям и использования их в сценариях.

Чаще всего в JavaScript используется цикл for. Этот цикл обычно состоит из переменой, которой присваивается числовое значение, затем эта переменная используется с оператором сравнения для проверки условия, а в конце числовое значение переменной увеличивается или уменьшается. В ходе сравнения в цикле for обычно определяется, что числовое значение исходной переменной больше или меньше определенного числового значения. Если это условие выполняется (равно true), то цикл выполняется и значение переменной увеличивается или уменьшается, пока условие не станет равным false. В листинге 22 приведен пример цикла for, работающего, пока числовое значение переменной меньше длины массива.

Листинг 22. Листинг 22. Использование цикла for для итерирования по массиву
var colors = new Array("orange", "blue", "red", "brown");
for(var i=0; i<colors.length; i++)
{
    document.write("цвет: "+ colors[i] +"<br/>");
}

Свойство length (длина) у массива содержит числовое значение, равное количеству элементов в массиве. Не забывайте, что индексация массива начинается с 0. Поэтому если в массиве 4 элемента, то значение length равно 4, а доступные индексы – 0, 1, 2, 3.

Другой тип цикла - цикл while. Считается, что этот цикл работает "быстрее" цикла for, но он не очень подходит для итерирования по массивам, и его лучше применять в случаях, когда необходимо выполнять сценарий до тех пор, пока условие истинно. В листинге 23 приведен исходный код цикла while, в котором сценарий выполняется до тех пор, пока значение численной переменной меньше 10.

Листинг 23. Листинг 23. Синтаксис цикла while
var i = 0;
while(i<10)
{
   document.write(i +"<br/>");
   i++;
}

Цикл while в данном сценарии содержит строку, в которой числовая переменная инкрементируется до тех пор, пока условие цикла не станет равным false. Без этой строки цикл оказался бы бесконечным.


Заключение

Язык JavaScript –один из самых популярных языков программирования, и эта статья пытается раскрыть секрет его популярности. Этот простой язык сценариев обладает огромными возможности. Достаточно сказать, что он позволяет посетителям Web-сайтов взаимодействовать с Web-страницей после того, как она была загружена Web-браузером. В этой статье представлены основные сведения, необходимые для изучения JavaScript. После её изучения читатель будет иметь представление о том, как работают библиотеки JavaScript и как использовать их для упрощения разработки бизнес-логики Web-страниц, работающей на стороне клиента. Следующая статья закрепит эти знания на практике и познакомит с объектами JavaScript.

Ресурсы

Научиться

Получить продукты и технологии

  • После изучения основ языка JavaScript можно перейти к изучению библиотеки jQuery library, использование которой позволяет ускорить процесс разработки.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, SOA и web-сервисы
ArticleID=810155
ArticleTitle=Знакомство с языком JavaScript: Часть 1. Основы
publish-date=04132012