Ник Морган - JavaScript для детей. Самоучитель по программированию

Хотя мы проверяем здесь несколько условий, необходимости исполь-

зовать цепочку конструкций if... else нет. Мы используем if... else,

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

Однако если в каждом варианте выполняется return, это также гаран-

тирует однозначный выбор (поскольку выйти из функции можно лишь

один раз).

СОКРАЩЕННА Я ЗА ПИСЬ ПРИ СОЗ Д АНИИ ФУ НКЦИЙ

Есть длинный и короткий способы записи функций. Я использую длинную

запись, поскольку она наглядно демонстрирует, что функция хранится

в переменной. Тем не менее вам стоит знать и о короткой записи, поскольку

ее используют многие JavaScript-разработчики. Возможно, и вы сами,

достаточно поработав с функциями, предпочтете короткую запись.

Вот пример длинной записи:

var double = function (number) {

return number * 2;

};

Короткая запись той же функции выглядит так:

function double(number) {

return number * 2;

}

138 Часть I. Основы

Как видите, при длинной записи мы явно создаем переменную и сохра-

няем в ней функцию, так что имя double записывается прежде ключевого

слова function. Напротив, при короткой записи сначала идет ключевое

слово function, а затем название функции. В этом случае JavaScript соз-

дает переменную double неявным образом.

На техническом сленге длинная запись называется функциональным

выражением , а короткая — объявлением функции .

Что мы узнали

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

работать по-разному в зависимости от переданных аргументов и могут

возвращать значение в то место кода, откуда они были вызваны. Также

функции дают возможность называть фрагменты кода понятными име-

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

делает.

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

с HTML-элементами.

8. Функции 139

УПРА ЖНЕНИЯ

Выполните эти упражнения, чтобы попрактиковаться в исполь-

зовании функций.

#1. Математические расчеты и функции

Add —

Создайте две функции, add и multiply; пусть каждая принимает

прибавить

по два аргумента. Функция add должна складывать аргументы

Multiply —

и возвращать результат, а функция multiply — перемножать

умножить

аргументы.

С помощью только этих двух функций вычислите следующее

несложное выражение:

36325 * 9824 + 777

#2. Совпадают ли массивы?

Are arrays

Напишите функцию areArraysSame, которая принимает два

same —

массива с числами в качестве аргументов. Она должна возвра-

одинаковы ли

щать true, если эти массивы одинаковые (то есть содержат одни

массивы

и те же числа в одном и том же порядке), или false, если мас-

сивы различаются. Убедитесь, что ваша функция работает пра-

вильно, запустив такой код:

areArraysSame([1, 2, 3], [4, 5, 6]);

false

areArraysSame([1, 2, 3], [1, 2, 3]);

true

areArraysSame([1, 2, 3], [1, 2, 3, 4]);

false

Подсказка 1: вам понадобится перебрать все значения из пер-

вого массива в цикле for и убедиться, что они совпадают со зна-

чениями из второго массива. Вы можете вернуть false прямо

из тела for, если обнаружите несовпадающие значения.

Подсказка 2: вы можете сразу выйти из функции, пропустив

цикл for, если у массивов разная длина.

#3. «Виселица» и функции

Давайте вернемся к игре «Виселица» из седьмой главы и перепи-

шем ее с помощью функций.

Я уже переписал основной код игры. Некоторые его части

заменены вызовами функций. Вам осталось лишь запрограмми-

ровать эти функции!

140 Часть I. Основы

// Создайте здесь свои функции

// word: загаданное слово

var word = pickWord();

// answerArray: итоговый массив

var answerArray = setupAnswerArray(word);

// remainingLetters: сколько букв осталось угадать

var remainingLetters = word.length;

while (remainingLetters > 0) {

showPlayerProgress(answerArray);

Show player

// guess: ответ игрока

progress —

var guess = getGuess();

показать

if (guess === null) {

прогресс

игрока

break;

} else if (guess.length !== 1) {

alert("Пожалуйста, введите одиночную букву.");

} else {

// correctGuesses: количество открытых букв

var correctGuesses = updateGameState(guess, word,

answerArray);

remainingLetters -= correctGuesses;

}

}

showAnswerAndCongratulatePlayer(answerArray);

Show answer

and congratulate

player —

Этот вариант с использованием функций почти так же прозра-

показать ответ

чен, как псевдокод из седьмой главы. Обратите внимание, как

и поздравить

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

игрока

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

var pickWord = function () {

// Возвращает случайно выбранное слово

};

var setupAnswerArray = function (word) {

// Возвращает итоговый массив для заданного слова word

};

var showPlayerProgress = function (answerArray) {

// С помощью alert отображает текущее состояние игры

};

var getGuess = function () {

// Запрашивает ответ игрока с помощью prompt

};

var updateGameState = function (guess, word, answerArray) {

// Обновляет answerArray согласно ответу игрока (guess)

// возвращает число, обозначающее, сколько раз буква guess

// встречается в слове, чтобы можно было обновить значение

// remainingLetters

};

var showAnswerAndCongratulatePlayer = function (answerArray) {

// С помощью alert показывает игроку отгаданное слово

// и поздравляет его с победой

};

Ч АС Т Ь I I

Продвинутый

JavaScript

Ч АС Т Ь I I

Про

Пр д

о ви

в н

и у

н ты

т й

ы

й

Jav

Ja a

v S

a c

S r

c i

r p

i t

p

9

D O M И J Q U E RY

До сих пор мы использовали JavaScript для относительно простых

задач, вроде вывода текста в консоли браузера или отображения диа-

логов alert и prompt. Однако помимо этого JavaScript позволяет вза-

имодействовать с HTML-элементами на веб-страницах, меняя их пове-

дение и внешний вид. В этой главе мы поговорим о двух технологиях,

которые помогут вам писать гораздо более мощный JavaScript-код: это

DOM и jQuery.

DOM — это средство, позволяющее JavaScript-коду взаимодейство-

DOM —

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

Document

турирования страниц и их элементов (параграфов, заголовков и т. д.),

Object Model —

объектная

а JavaScript может разными способами манипулировать элементами

модель

DOM. Например, скоро вы узнаете, как при помощи JavaScript-программы

документа

менять заголовки HTML-документов, подставляя туда значение, полу-

ченное из диалога prompt.

Также мы познакомимся с удобным инструментом под названием

jQuery, который кардинально упрощает работу с DOM. jQuery содержит

набор функций, которые позволяют найти нужные вам элементы и про-

извести с ними определенные действия.

В этой главе мы узнаем, как c помощью DOM и jQuery изменять суще-

ствующие элементы DOM, а также создавать новые, полностью контро-

лируя содержимое веб-страниц из JavaScript-кода. Также мы выясним,

как использовать jQuery для анимации элементов DOM — например, для

плавного появления и исчезновения изображений и текста.