Лекции / Глава 20. Введение в JS

HTML, CSS, JS – три кита современного веб-программирования. HTML

обеспечивает структуру, CSS добавляет стиль, JS обеспечивает функциональность структурных элементов «веб-страницы». Как и в CSS, в JS

код находится непосредственно внутри веб-страницы.

1

Изначально JavaScript был создан, чтобы «сделать веб-страницы живыми».

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

страницы.

Скрипты распространяются и выполняются, как простой текст. Им не нужна специальная подготовка или компиляция для запуска.

Сегодня JavaScript может выполняться не только в браузере, но и на сервере или на любом другом устройстве, которое имеет специальную программу, называющуюся «движком» JavaScript.

У браузера есть собственный движок, который иногда называют

«виртуальная машина JavaScript».

В браузере для JavaScript доступно всё, что связано с манипулированием веб-страницами, взаимодействием с пользователем и веб-сервером.

Например, в браузере JavaScript может:

Добавлять новый HTML-код на страницу, изменять существующее содержимое, модифицировать стили.

Реагировать на действия пользователя, щелчки мыши,

перемещения указателя, нажатия клавиш.

Отправлять сетевые запросы на удалённые сервера, скачивать и загружать файлы (технологии AJAX и COMET).

Получать и устанавливать куки, задавать вопросы посетителю,

показывать сообщения.

Запоминать данные на стороне клиента («local storage»).

JavaScript – динамический язык, который позволяет определять типы данных и осуществлять синтаксический анализ и компиляцию «на лету», на этапе выполнения программы. Динамические языки удобны для быстрой разработки приложений. Например, можно изменить тип переменной, или

2

добавить новые свойства, или методы к объекту в то время, как программа работает.

Это свойство отличает динамические языки от статических языков программирования, в которых подобные изменения обычно невозможны.

§20.1 Инструкции

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

Однострочные комментарии начинаются с двойной косой черты //.

Многострочные комментарии начинаются косой чертой со звёздочкой /* и

заканчиваются звёздочкой с косой чертой */.

§20.2 Переменная

Переменной называется место хранения информации в памяти,

имеющее уникальное имя. Для создания переменной применяется ключевое слово let, после которого следует ее имя. Ключевыми называются слова,

зарезервированные в JS для выполнения различных операций.

Пример объявления переменной:

let pageHits;

Созданная переменная изначально пуста – она не имеет никакого значения. Для выполнения инициализации, достаточно записать следующее:

let pageHits = 300;

let name = “Zaid”;

Показанные выше строчки кода автоматически назначают переменной тип данных. Для первой строчки назначается численный тип данных, для второй строчки – текстовый тип данных.

ВJavaScript есть два ограничения, касающиеся имён переменных:

1.Имя переменной должно содержать только буквы, цифры или символы $ и _.

2.Первый символ не должен быть цифрой.

3

3. Нельзя использовать зарезервированные ключевые слова.

§20.3 Константы

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

используется ключевое слово const.

Пример объявления константы:

const pageHits = 300;

§20.4Типы данных

В JS три основных типа данных: text, number, boolean.

§20.4.1Text

Текстовые данные используются для хранения набора символов. Текст

вJS заключаются всегда в кавычки.

ВJavaScript существует три типа кавычек.

1.Двойные кавычки: "Привет".

2.Одинарные кавычки: 'Привет'.

3.Обратные кавычки: `Привет`.

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

Обратные кавычки же имеют «расширенный функционал». Они позволяют нам встраивать выражения в строку, заключая их в ${…}.

Например:

let name = "Иван"; // Вставим переменную

alert(`Привет, ${name}!`); // Привет, Иван! // Вставим выражение

alert(`результат: ${1 + 2}`); // результат: 3

4

§20.4.2 Number

Данный тип данных используется для хранения числовых данных,

например, массы или количества предметов. В JS они могут быть целыми, так и десятичными.

Существует множество операций для чисел, например, умножение *,

деление /, сложение +, вычитание - и так далее.

Кроме обычных чисел, существуют так называемые «специальные числовые значения», которые относятся к этому типу данных: Infinity (∞), -

Infinity и NaN (вычислительная ошибка).

§20.4.3Boolean

Логические значения имеют два значения – true и false. Поэтому с их помощью представляются процессы и объекты.

Тип данных определяет способ его обработки кодом программы.

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

§20.4.4 Значение «null»

Специальное значение null не относится ни к одному из типов,

описанных выше. Оно формирует отдельный тип, который содержит только значение null. Это значение представляет собой «ничего», «пусто» или

«значение неизвестно».

§20.4.5 Значение «undefined»

Оно означает, что «значение не было присвоено». Если переменная объявлена, но ей не присвоено никакого значения, то её значением будет undefined.

let age;

alert(age); // выведет "undefined"

§20.5 Условные операторы

Оператор if(...) вычисляет условие в скобках и, если результат true,

то выполняет блок кода.

5

Пример использования:

let year = prompt('В каком году появилась спецификация

1

ECMAScript-2015?', '')

2 if (year == 2015) alert( 'Вы правы!' )

Оператор if (…) вычисляет выражение в скобках и преобразует

результат к логическому типу.

Существует пара правил перевода значений к логическому виду:

1.Число 0, пустая строка "", null, undefined и NaN становятся false. Из-за этого их называют «ложными» («falsy») значениями.

2.Остальные значения становятся true, поэтому их называют

«правдивыми» («truthy»).

Оператор if может содержать необязательный блок «else» («иначе»).

Выполняется, когда условие ложно.

Иногда, нужно проверить несколько вариантов условия. Для этого используется блок else if.

Например:

let year = prompt('В каком году появилась

1

спецификация ECMAScript-2015?', '');

2if (year < 2015) {

3alert( 'Это слишком рано...' );

4} else if (year > 2015) {

5alert( 'Это поздновато' );

6} else {

7alert( 'Верно!' );

8}

Для изменения значения переменной в зависимости от условия используется «условный» оператор «вопросительный знак», который позволяет нам сделать это более коротким и простым способом.

6

Оператор представлен знаком вопроса ?. Его также называют

«тернарный», так как этот оператор, единственный в своём роде, имеет три

аргумента.

Синтаксис:

let result = условие ? значение1 : значение2;

Сначала вычисляется условие: если оно истинно, тогда возвращается

значение1, в противном случае – значение2.

Например:

let accessAllowed = (age > 18) ? true : false;

Технически, мы можем опустить круглые скобки вокруг age > 18.

Оператор вопросительного знака имеет низкий приоритет, поэтому он выполняется после сравнения >.

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

Например:

1.Функция prompt отображает модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена. Она принимает два аргумента – текст для отображения в окне и необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.

2.Первый знак вопроса проверяет age < 3.

3.Если верно – возвращает 'Здравствуй, малыш!'. В противном случае,

проверяет выражение после двоеточия „":"“, вычисляет age < 18.

4.Если это верно – возвращает 'Привет!'. В противном случае, проверяет выражение после следующего двоеточия „":"“, вычисляет age < 100.

7

5.Если это верно – возвращает 'Здравствуйте!'. В противном случае,

возвращает выражение после последнего двоеточия – 'Какой необычный возраст!'.

Вот как это выглядит при использовании if..else:

§20.6 Функции

Зачастую нам надо повторять одно и то же действие во многих частях программы. Чтобы не повторять один и тот же код во многих местах,

придуманы функции. Функции являются основными «строительными блоками» программы.

Пример объявления функции:

1function showMessage()

2{

3alert( 'Всем привет!' );

4}

8

Вначале идёт ключевое слово function, после него имя функции, затем список параметров в круглых скобках через запятую (в вышеприведённом примере он пустой) и, наконец, код функции, также называемый «телом функции», внутри фигурных скобок.

1function имя(параметры)

2{

3...тело...

4}

Наша новая функция может быть вызвана по её имени:

showMessage();

Переменные, объявленные внутри функции, видны только внутри этой функции. Такие переменные называются локальными.

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

глобальными или внешними.

Пример использования глобальных и локальных переменных:

1let userName = 'Вася'; //глобальная функция

2function showMessage() {

let message = 'Привет, ' + userName; //локальная

3

функция

4alert(message);

5}

6showMessage(); // Привет, Вася

7

Внешняя переменная используется, только если внутри функции нет такой локальной. Если одноимённая переменная объявляется внутри функции,

тогда она перекрывает внешнюю.

9

Мы можем передать внутрь функции любую информацию, используя параметры (также называемые аргументы функции). В нижеприведённом примере функции передаются два параметра: from и text.

function showMessage(from, text) { // аргументы: from,

1

text

2alert(from + ': ' + text);

3}

showMessage('Максим', 'Привет!'); // Максим: Привет!

4

(1)

Когда функция вызывается в строке 1, переданные значения копируются в локальные переменные from и text. Затем они используются в теле функции.

Если параметр не указан, то его значением становится undefined.

Например, вышеупомянутая функция showMessage(from, text) может быть вызвана с одним аргументом:

showMessage("Максим");

Это не приведёт к ошибке. Такой вызов выведет "Аня: undefined". В

вызове не указан параметр text, поэтому предполагается, что text ===

undefined.

Если мы хотим задать параметру text значение по умолчанию, мы должны указать его после =:

function showMessage(from, text = "текст не добавлен")

1

{

2alert( from + ": " + text );

3}

4showMessage("Максим"); // Максим: текст не добавлен

Теперь, если параметр text не указан, его значением будет "текст не

добавлен". В данном случае "текст не добавлен" это строка, но на её

10