Программы
Язык программирования JavaScript

Язык программирования JavaScript

Есть много удобных и хорошо продуманных языков. Сюда можно отнести C, Python, Java и т.д. Сразу оговорюсь, идеальных нет. Есть языки интересные, эклектичные, рождённые в муках безысходности. Это Perl, Bash, JavaScript. Именно о последнем мы сегодня и поговорим.

Есть много удобных и хорошо продуманных языков. Сюда можно отнести C, Python, Java и т.д. Сразу оговорюсь, идеальных нет.

Есть языки интересные, эклектичные, рождённые в муках безысходности. Это Perl, Bash, JavaScript. Именно о последнем мы сегодня и поговорим.

В 1992-ом ребята из Nombas разработали концепт — язык программирования Cmm — C-минус-минус. Отсутствие необходимости управлять вручную памятью, встраиваемость в браузеры (Netscape 16 бит под Windows). Это было весело, здорово… но всего лишь концепт.

Не прошло и 3-х лет, как в 1995-ом ребята из Netscape осознали, что было бы неплохо добавить язык программирования в браузер, чтобы он позволял «склеивать» плагины, Java-апплеты и прочие ресурсы страниц.

Историю того, что JavaScript так называется, отчего пригорает у многих HR-ов («А что, и там и там Java»), можно свести к одному слову. Хайп. Java тогда была популярна. Такие дела.

В итоге — в лучших традициях IT был «изобретён» такой язык в самые сжатые сроки. В ответ Netscape ребята из Microsoft (а они были основными конкурентами на браузерном рынке) создали свою реализацию — JScript.

Далее — времена тяжкой стандартизации: ECMAScript — так называется стандарт языка. За долгое время эволюций язык претерпел (и продолжает претерпевать) много изменений. Сегодня мы рассмотрим базовые возможности ECMAScript 5.

Для начала нам потребуется в инструментах разработчика открыть вкладку «Console»:

Переменные в JavaScript

Что бы мы не делали: складывали числа, изменяли строки — в любом случае нам было бы неплохо всё это куда-то складывать. Именно про это и переменные.

Объявление (создание) переменных JavaScript

Создание переменных в JavaScript более часто называют «объявлением» переменных.

Создать переменную можно с помощью ключевого слова var:

var year;
console.log("Год", year);

А посмотреть, что же внутри переменной — с помощью console.log.


После объявления переменные пусты — «undefined» — не определена.

А можно и сразу присвоить какое-то значение:

С числами всё более-менее ясно. Со строками — не забудьте заключить их в кавычки.

Локальные переменные JavaScript

Переменная, объявленная внутри функции JavaScript становится локальной и будет доступна только в пределах этой функции. (переменная имеет локальную область видимости).

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

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

var a = 12;

function localVar () {
    var a = 42;
    console.log('В localVar a=42', a);
}

localVar();
console.log("Глобально переменная всё равно a=12", a);

С функциями мы познакомимся в этом же уроке, чуть ниже.

Глобальные переменные JavaScript

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

Глобальные переменные уничтожаются когда вы закрываете страницу.

Если вы объявляете переменную, не используя «var», переменная всегда становится глобальной.

О вреде глобальных переменных мы поговорим позже. Но поверьте, слишком много времени потрачено на отладку программ, использующих глобальные переменные.

Функции в JavaScript

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

function note (userName, text) {
    return '<div>' + userName + ' пишет:</div>' +
        '<p>' + text + '</p>';
}

Как можно видеть,

  • функция определяется ключевым словом function,
  • дальше идёт название функции («note»),
  • в скобках перечисляются параметры функции — то, что будет ей передано для обработки,
  • тело функции — обычный JavaScript код, заключённый в фигурные скобки,
  • функция заканчивает свою работу по слову return, возвращая значение, переданное return.

Логические условия и циклы

Часто бывает, что нам нужно не просто написать рецепт:

  1. возьмите кастрюлю,
  2. добавьте литр воды,
  3. доведите до кипения

— кипяток готов!

Часто порядок действий зависит от каких-то условий. Давайте напишем функцию, которая возвращает человеко-читаемое сообщение о количестве комментариев:

function commentCountText(count) {
    if (count < 0) {
        return "Ошибка - отрицательное количество комментариев";
    }
    
    if (count == 0) {
        return "Ни одного комментария";
    }
    
    if (count % 10 == 1) {
        return count + " комментарий";
    }
    
    if (count % 10 < 5) {
        return count + " комментария";
    }
    
    return count + " комментариев";
}

Если count < 0 — то что-то пошло не так. Если 0 — то пишем, что комментариев нет. Если остаток от деления (этот самый процент) на 10 равен 1, то одно и т. д.

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

Циклы в JavaScript

Логические ветвления — это хорошо. А что, если нам надо сделать что-то повторяющееся? Например, проверить, что наша функция для вывода текста «столько-то комментариев», работает нормально для первых 10-ти. Можно руками написать 10 вызовов, а можно сделать это в цикле!

for (var i = 1; i <= 10; i = i + 1) {
    commentCountText(i);
}

Мы увидим результаты 10-ти вызовов commentCountText с параметрами от 1 до 10. Как же это получилось? Используем ключевое слово for, в скобочках 3 действия, разделённых «;». Разберём от первого к последнему:

  1. var i = 1 — до начала цикла объявим i = 1;
  2. i <= 10 — условие работы цикла — «продолжаем, пока i меньше или равно 10»;
  3. i = i + 1 — каждый раз, когда заканчивается цикл, делаем это действие — увеличиваем i на 1 (также это можно было сделать операцией i++).

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

Это стандартный цикл в стиле языка C. Есть ещё пара типов цикла for. Он довольно полезный в некоторых ситуациях. Давайте объявим массив (коллекция подряд идущих элементов) чисел:

var numList = [1, 3, 4, 5, 9];

И с помощью операции for of проверим их на чётность:

for (var num of numList) {
    if (num % 2 == 1) {
        console.log(num, "- число нечётное");
    }
    else {
        console.log(num, "- число чётное");
    }
}

Условие if — мы уже знаем. А вот конструкцию else — ещё нет. Это необязательная часть условного оператора if-else. Блок кода, который идёт в фигурных скобках после if, выполняется в случае, когда условие истинно. Блок else — выполняется, когда условие оказалось ложным. Думаю, из примера это уже стало ясно, но я уточнил.

for of работает как «перебор» от первого элемента коллекции к последнему. Так мы пройдёмся по всем элементам из numList (1, 3, 4 и т.д.) по одному и для каждого из них (будет лежать в переменной num) мы выполним блок операций цикла — пройдёмся по всем и скажем — а чётное число или нет.

Задание

Напишите функцию, выводящую список комментариев пользователей. Параметр функции — список комментариев. Например:

var comments = ['Первый тут', 'Я ничего не понял', 'Когда уже начнём писать вконтактик?'];
printComments(comments);

Вывод:

<div>Первый тут</div>
<div>Я ничего не понял</div>
<div>Когда уже начнём писать вконтактик?</div>

Доп. задание

Добавьте в функцию ещё один параметр — reverse, если туда передаётся 0, то функция работает, как описано выше. Если туда передано какое-то другое число — порядок вывода комментариев меняется на противоположный. Например:

var comments = ['Первый тут', 'Я ничего не понял', 'Когда уже начнём писать вконтактик?'];
printComments(comments, 1);

Вывод:

<div>Когда уже начнём писать вконтактик?</div>
<div>Я ничего не понял</div>
<div>Первый тут</div>

— в стиле блога (новые сверху).