Программы
Язык программирования 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>

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

Также может быть вам интересно:

Настраиваем шрифты в xorg (FreeBSD и Linux)

Если выделить главные преимущества Unix-like систем перед Windows, то в первой десятке будет красота шрифтов. Для меня это очень важный пункт, так как за чёткими и аккуратными шрифтами можно и просидеть дольше без покрасневших глаз.

Читать »

Rcconf. Включение и отключение демонов при загрузке

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

Читать »
Фото Python: Встроенные типы данных (list, set, dict, etc)

Python: Встроенные типы данных (list, set, dict, etc)

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

Фото Python: типы данных, переменные, логическое ветвление и циклы

Python: типы данных, переменные, логическое ветвление и циклы

Первая часть заметок о Python. О базовых типах, переменных, ветвлении и циклах.

Фото Как сделать свою middleware в Django (с примерами)

Как сделать свою middleware в Django (с примерами)

Middleware или "промежуточное программное обеспечение" - элегантный способ установить общие правила обработки запросов и ответов приложения. Давайте напишем парочку middleware, чтобы понять, как они работают.

Фото Как настроить отправку почты из Django

Как настроить отправку почты из Django

Письма об ошибках, отчёты на почту, восстановление паролей - всё это полезно при работе с сайтом. Django предоставляет удобный способ это сделать с минимумом настроек!

Фото Новый оператор match-case в Python

Новый оператор match-case в Python

В новой версии Python (3.10) появится новый оператор. Новый оператор сопоставления по шаблону (match-case).

Фото Нет слов, одни... однострочники

Нет слов, одни... однострочники

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

Фото Добавляем переменные в контекст Django шаблонов (свой контекст-процессор)

Добавляем переменные в контекст Django шаблонов (свой контекст-процессор)

В Django вы можете передавать данные в шаблоны посредством контекстов. Контекст передаётся из контроллера (view в терминах Django), однако, если одни и те же данные нужны в разных местах, лучше сделать свой контекст-процессор.

Фото Пример своей консольной команды в Django проекте

Пример своей консольной команды в Django проекте

Если вы работали с Django проектом, то, скорее всего, запускали команды из консоли (manage.py). В Django есть простой способ писать свои команды для управления проектом.