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

массивы

и те же числа в одном и том же порядке), или 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 — например, для

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

145

Поиск элементов DOM

Когда вы открываете HTML-документ, браузер преобразовывает его

элементы в древовидную структуру — дерево DOM . На рис. 9.1 изобра-

жено простое дерево DOM — мы уже встречали его в пятой главе, когда

говорили об иерархии HTML. Браузер дает JavaScript-программистам

возможность доступа к этой древовидной структуре при помощи