Виселица!
124 Часть I. Основы Что мы узнали Не так-то много страниц, а вы уже создали свою первую игру на JavaScript! Как видите, циклы и условные конструкции совершенно необходимы при написании игр и других интерактивных программ; без этих управляющих конструкций программе остается лишь завершиться, едва начав работу. В восьмой главе мы познакомимся с функциями, что позволит нам запускать один и тот же фрагмент кода из разных мест программы. УПРА ЖНЕНИЯ Вот несколько упражнений по усовершенствованию игры «виселица», которую мы написали в этой главе. #1. Больше слов Добавьте новые слова в массив words. Не забывайте, что все буквы должны быть строчными. #2. Заглавные буквы Если игрок введет заглавную букву, она не совпадет с такой же строчной буквой в загаданном слове. Эту вероятность можно учесть, преобразовав введенную букву в строчный регистр. (Подсказка: для этого подойдет метод toLowerCase.) #3. Ограничение по ходам Сейчас наша «Виселица» позволяет угадывать буквы сколько угодно раз, до победного конца. Добавьте в программу переменную для учета попыток и завершайте игру, если игрок израсходовал все попытки. (Подсказка: проверяйте значение этой переменной в том же цикле while, где проверяется условие remainingLetters > 0, а с помощью операции && можно убедиться, что сразу два логических условия дают true — см. вторую главу.) #4. Исправьте ошибку В игре есть ошибка: если вы будете снова и снова вводить одну и ту же букву, которая есть в загаданном слове, remainingLetters будет снова и снова уменьшаться. Постарайтесь это исправить! (Подсказка: можно добавить проверку еще одного условия — что в соответствующем элементе answerArray все еще стоит знак подчеркивания. Если там другой символ, значит, эта буква уже угадана.)
126 8 ФУ Н К Ц И И Функции — это механизм для многократного использования частей кода. Они позволяют запускать один и тот же код из разных мест программы без необходимости его копировать. Кроме того, если вы «спрячете» сложные фрагменты кода внутри функций, вам будет легче сосредоточиться на проектировании программы — так вы будете налаживать взаимодействие между функциями, а не барахтаться в мелких деталях, из которых состоит код этих фрагментов. Организация кода в виде небольших, легко контролируемых частей позволяет видеть общую картину и думать о строении программы на более высоком уровне. Функции очень удобны, когда нужно многократно выполнять в программе некие расчеты или другие действия. Мы уже пользовались готовыми функциями, такими как Math.random, Math.fl oor, alert, prompt и confi rm. А в этой главе мы научимся создавать свои функции. Базовое устройство функции На рис. 8.1 показано строение функции. Код внутри фигурных скобок называется телом функции — аналогично циклам, где код в фигурных скобках зовется телом цикла. function () { console log ( "Делаем что-то" ); } Тело функции записывается в фигурных скобках Рис. 8.1. Синтаксис создания функции
127 Создаем простую функцию Давайте создадим функцию, которая печатает фразу «Привет, мир!». Введите в консоли браузера следующий код. Чтобы перейти к новой строке без выполнения уже введенных команд, используйте SHIFT-ENTER. var ourFirstFunction = function () { console.log("Привет, мир!"); }; Этот код создает новую функцию, сохраняя ее в переменной ourFirstFunction. Вызов функции Чтобы запустить код функции (то есть ее тело), нужно эту функцию вызвать. Для этого укажите ее имя, а следом — открывающую и закрывающую скобки, вот так: ourFirstFunction(); Привет, мир! При вызове ourFirstFunction выполняется ее тело, то есть команда console.log("Привет, мир!");, и текст, который мы таким образом выводим, появляется в консоли на следующей строке: "Привет, мир!" Однако, вызвав эту функцию из браузера, можно заметить в консоли еще одну строчку — с маленькой, указывающей влево стрелкой, как на рис. 8.2. Это значение, которое возвращает функция. Рис. 8.2. Вызов функции, возвращаемое значение которой не определеноВозвращаемое значение — это значение, которое функция выдает наружу, чтобы потом его можно было использовать где угодно в программе. В данном случае это undefi ned, поскольку мы не указывали возвращаемое значение в теле функции, мы лишь дали команду вывести Our first function — наша первая функция 128 Часть I. Основы текст в консоль. Функция всегда будет возвращать undefi ned, если в теле функции нет указания вернуть что-нибудь другое. (В разделе «Возврат значения из функции» ! В консоли Chrome и примерах кода в этой книге возвращаемые значе- ния помечены разными цветами в зависимости от их типа данных, тогда как текст, напечатанный через console.log, всегда показан черным цветом. Передача аргументов в функцию Наша функция ourFirstFunction выводит одну и ту же строку при каждом вызове, однако хотелось бы, чтобы поведением функции можно было управлять. Чтобы функция могла изменять поведение в зависимости от значений, нам понадобятся аргументы. Список аргументов указывается в скобках после имени функции — как при ее создании, так и при вызове. Функция sayHelloTo использует аргумент (name), чтобы поздороваться с человеком, имя которого передано в аргументе: var sayHelloTo = function (name) { console.log("Привет, " + name + "!"); }; Здесь мы создали функцию и сохранили ее в переменной sayHelloTo. При вызове функция печатает строку "Привет, " + name + "!", заменяя name на значение, переданное в качестве аргумента. На рис. 8.3 показан синтаксис создания функции с одним аргументом. function ( argument ) { console log ( "Передан аргумент: " + argument); } Аргумент можно использовать в теле функции Имя аргумента Рис. 8.3. Синтаксис создания функции с одним аргументом Вызывая функцию, которая принимает аргумент, введите значение, которое вы хотите использовать в качестве этого аргумента в скобках после имени функции. Например, чтобы поздороваться с Ником, можно ввести: Say hello to — скажи привет [кому-то]
8. Функции 129 sayHelloTo("Ник"); Привет, Ник! А с Анной поздороваться можно так: sayHelloTo("Анна"); Привет, Анна! Каждый раз при вызове функции переданный нами аргумент name подставляется в строку, которую печатает функция. Поэтому, когда мы передаем значение "Ник", в консоли появляется "Привет, Ник!", а когда пишем "Анна", мы видим в консоли "Привет, Анна!". Печатаем котиков! Кроме того, переданный в функцию аргумент может указывать, сколько раз требуется что-то сделать. Например, функция drawCats выводит в консоль смайлы — кошачьи мордочки (вот такие: =^.^=). Задавая аргумент howManyTimes, мы сообщаем ей, сколько таких смайлов нужно напечатать: var drawCats = function (howManyTimes) { for (var i = 0; i < howManyTimes; i++) { console.log(i + " =^.^="); } }; Тело функции представляет собой цикл for, который повторяется столько раз, сколько указано в аргументе howManyTimes (поскольку переменная i сначала равна 0, а затем возрастает до значения howManyTimes - 1). На каждом повторе цикла функция выводит в консоль строку i + « =^.^=». Вот что мы увидим, вызвав эту функцию со значением 5 в качестве аргумента howManyTimes: drawCats(5); 0 =^.^= 1 =^.^= 2 =^.^= 3 =^.^= 4 =^.^= Draw cats — рисовать котов How many times — сколько раз 130 Часть I. Основы Попробуйте задать howManyTimes значение 100, чтобы напечатать 100 кошачьих мордочек! Передача в функцию нескольких аргументов В функцию можно передать больше одного значения, задав несколько аргументов. Для этого перечислите аргументы в скобках после имени функции, разделив их запятыми. На рис. 8.4 показан синтаксис создания функции, принимающей два аргумента. function (argument1, argument2) { console log ( "Первый аргумент: " + argument1); console log ( "Второй аргумент: " + argument2); } В теле функции можно использовать оба аргумента Имена аргументов пишутся через запятую Рис. 8.4. Синтаксис создания функции с двумя аргументами Фунция printMultipleTimes похожа на drawCats, однако она принимает еще один аргумент с именем whatToDraw. var printMultipleTimes = function (howManyTimes, whatToDraw) { for (var i = 0; i < howManyTimes; i++) { console.log(i + " " + whatToDraw); } }; Функция printMultipleTimes печатает строку, переданную в аргументе whatToDraw столько раз, сколько указано в аргументе howManyTimes. Второй аргумент сообщает функции, что печатать, а первый — сколько раз это нужно печатать. Вызывая функцию с несколькими аргументами, перечислите нужные вам значения через запятую в скобках после имени функции. Например, чтобы напечатать кошачьи мордочки с помощью функции printMultipleTimes, вызывайте ее так: printMultipleTimes(5, "=^.^="); 0 =^.^= 1 =^.^= Print multiple times — напечатать многократно What to draw — что рисовать
8. Функции 131 2 =^.^= 3 =^.^= 4 =^.^= А чтобы четыре раза напечатать смайлик «^_^», вызывайте printMultipleTimes так: printMultipleTimes(4, "^_^"); 0 ^_^ 1 ^_^ 2 ^_^ 3 ^_^ Здесь при вызове printMultipleTimes мы указали значение 4 для аргумента howManyTimes и строку «^_^» для аргумента whatToDraw. В результате цикл выполнил четыре повтора (переменная i менялась от 0 до 3), каждый раз печатая i + " " + "^ _ ^". Чтобы дважды напечатать (>_<), введите: printMultipleTimes(2, "(>_<)"); 0 (>_<) 1 (>_<) На этот раз мы передали число 2 для аргумента howManyTimes и строку «(>_<)» для whatToDraw. Возврат значения из функции До сих пор все наши функции выводили текст в консоль с помощью console.log. Это простой и удобный способ отображения данных, однако мы не сможем потом взять это значение из консоли и использовать его в коде. Вот если бы наша функция выдавала значение так, чтобы его потом можно было использовать в других частях программы... Как я уже говорил, функции могут возвращать значение. Вызвав функцию, которая возвращает значение, мы можем затем использовать это значение в своей программе (сохранив его в переменной, передав в другую функцию или объединив с другими данными). Например, следующий код прибавляет 5 к значению, которое возвращает вызов Math.fl oor(1.2345): 5 + Math.floor(1.2345); 6
132 Часть I. Основы Math.fl oor — функция, которая берет переданное ей число, округляет его вниз до ближайшего целого значения и возвращает результат. Глядя на вызов функции Math.fl oor(1.2345), представьте, что вместо него в коде стоит значение, возвращаемое этой функцией, — в данном случае это число 1. Теперь давайте создадим функцию, которая возвращает значение. Вот функция double, которая принимает аргумент number и возвращает произведение number * 2. Иными словами, значение, которое возвращает эта функция, вдвое больше переданного ей аргумента. var double = function (number) { return number * 2; }; Чтобы вернуть из функции значение, используйте оператор return, после которого укажите само это значение. В строке мы воспользовались return, вернув из функции double число number * 2. Теперь можно вызывать нашу функцию double и удваивать числа: double(3); 6 Возвращаемое значение (6) показано здесь второй строкой. Хоть функции и способны принимать несколько аргументов, вернуть они могут лишь одно значение. А если вы не укажете в теле функции, что именно надо возвращать, она вернет undefi ned. Вызов функции в качестве значения Когда функция вызывается из кода программы, значение, возвращаемое этой функцией, подставляется туда, где происходит вызов. Давайте воспользуемся функцией double, чтобы удвоить пару чисел и затем сложить результаты: double(5) + double(6); 22 Здесь мы дважды вызвали функцию double и сложили значения, которые вернули эти два вызова. То же самое было бы, если бы вместо вызова double(5) стояло число 10, а вместо double(6) — число 12. Double — здесь «удвоить» Return — здесь «выход из функции», возвращение 8. Функции 133 Также вызов функции можно указать в качестве аргумента другой функции, при вызове которой в аргумент попадет значение, возвращенное первой функцией. В следующем примере мы вызываем функцию double, передавая ей в качестве аргумента вызов double с аргументом 3. Вызов double(3) даст 6, так что double(double(3)) упрощается до double(6), что, в свою очередь, упрощается до 12. double(double(3)); 12 Вот как JavaScript вычисляет это выражение: 12 double( 6 ) double( 3 * 2 ) double( double(3) ); 6 * 2
Тело функции double возвращает number * 2, поэтому в точке мы заменяем double(3) на 3 * 2. В точке мы заменяем 3 * 2 на 6. Затем в точке мы делаем то же, заменяя double(6) на 6 * 2. И наконец, в точке мы можем заменить 6 * 2 числом 12. Упрощаем код с помощью функций В третьей главе мы использовали методы Math.random и Math.fl oor, чтобы выбирать случайные слова из массивов и генерировать дразнилки. В этом разделе мы перепишем генератор дразнилок, упростив его с помощью функций. Функция для выбора случайного слова Вот как мы выбирали случайное слово из массива в третьей главе: randomWords[Math.floor(Math.random() * randomWords.length)];
134 Часть I. Основы Если поместить этот код в функцию, можно многократно вызывать его для получения случайного слова из массива — вместо того чтобы вводить тот же код снова и снова. Например, давайте определим такую функцию pickRandomWord: var pickRandomWord = function (words) { return words[Math.floor(Math.random() * words.length)]; }; Все, что мы сделали, — поместили прежний код в функцию. Теперь можно создать массив randomWords. var randomWords = ["Планета", "Червяк", "Цветок", "Компьютер"]; С помощью функции pickRandomWord мы можем получить случайное слово из этого массива, вот так: pickRandomWord(randomWords); " Цветок " При этом нашу функцию можно использовать с любым массивом. Например, получить случайное имя из массива имен: pickRandomWord(["Чарли", "Радж", "Николь", "Кейт", "Сэнди"]); " Радж " Генератор случайных дразнилок Теперь давайте перепишем генератор дразнилок, используя нашу функцию для выбора случайных слов. Для начала вспомним, как выглядел код из третьей главы: var randomBodyParts = ["глаз", "нос", "череп"]; var randomAdjectives = ["вонючая", "унылая", "дурацкая"]; var randomWords = ["муха", "выдра", "дубина", "мартышка", "крыса"]; // Выбор случайной части тела из массива randomBodyParts: var randomBodyPart = randomBodyParts[Math.floor(Math.random() * 3)]; // Выбор случайного прилагательного из массива randomAdjectives: var randomAdjective = randomAdjectives[Math.floor(Math.random() * 3)]; // Выбор случайного слова из массива randomWords: var randomWord = randomWords[Math.floor(Math.random() * 5)]; Pick random word — выбрать случайное слово
8. Функции 135 // Соединяем случайные строки в предложение: var randomInsult = "У тебя " + randomBodyPart + " словно " + randomAdjective + " " + randomWord + "!!!"; randomInsult; " У тебя нос словно дурацкая выдра!!! " Обратите внимание — конструкция words[Math.fl oor(Math. random() * length)] повторяется здесь несколько раз. Воспользовавшись функцией pickRandomWord, можно переписать программу таким образом: var randomBodyParts = ["глаз", "нос", "череп"]; var randomAdjectives = ["вонючая", "унылая", "дурацкая"]; var randomWords = ["муха", "выдра", "дубина", "мартышка", "крыса"]; // Соединяем случайные строки в предложение: var randomString = "У тебя " + pickRandomWord(randomBodyParts) + " словно " + pickRandomWord(randomAdjectives) + " " + pickRandomWord(randomWords) + "!!!"; randomString; " У тебя нос словно дурацкая выдра!!! " Этот код отличается от прежнего двумя моментами. Во-первых, мы использовали функцию pickRandomWord для выбора случайного слова из массива вместо того, чтобы каждый раз писать words[Math.fl oor(Math.random() * length)]. А во-вторых, вместо того чтобы сохранять каждое случайное слово в переменной перед тем, как добавлять его к итоговой строке, мы сразу объединяем возвращаемые из функции значения, формируя таким образом строку. Вызов функции можно рассматривать как значение, которое эта функция возвращает, поэтому все, что мы тут делаем, — это объединяем строки. Как видите, новую версию программы гораздо легче читать. Да и писать ее тоже было легче, поскольку часть повторяющегося кода мы вынесли в функцию. Делаем генератор дразнилок функцией Можно еще усовершенствовать наш генератор случайных дразнилок, сделав его функцией, которая возвращает дразнилки: var generateRandomInsult = function () { var randomBodyParts = ["глаз", "нос", "череп"]; var randomAdjectives = ["вонючая", "унылая", "дурацкая"]; var randomWords = ["муха", "выдра", "дубина", "мартышка", "крыса"]; Generate random insult — сгенерировать случайную дразнилку 136 Часть I. Основы // Соединяем случайные строки в предложение: var randomString = "У тебя " + pickRandomWord(randomBodyParts) + " словно " + pickRandomWord(randomAdjectives) + " " + pickRandomWord(randomWords) + "!!!"; return randomString; }; generateRandomInsult(); " У тебя череп словно унылая дубина!!! " generateRandomInsult(); " У тебя нос словно дурацкая мартышка!!! " generateRandomInsult(); " У тебя глаз словно вонючая муха!!! " Наша новая функция generateRandomInsult представляет собой все тот же код, помещенный в тело функции без аргументов. Мы добавили лишь одну строку, помеченную , где мы возвращаем сгенерированную строку randomString. Трижды вызвав функцию generateRandomInsult, мы каждый раз получали новую дразнилку. Теперь весь код находится в функции, и это означает, что для генерации дразнилки мы можем просто вызывать эту функцию, а не копировать в консоль один и тот же код каждый раз, когда понадобится когонибудь подразнить. Ранний выход из функции по return Как только JavaScript, выполняя код функции, встречает оператор return, он завершает функцию, даже если после return еще остался какой-нибудь код. Оператор return часто используют, чтобы выйти из функции в самом начале, если какие-нибудь из переданных аргументов имеют некорректные значения — то есть если с такими аргументами функция не сможет правильно работать. Например, следующая функция возвращает строку с информацией о пятой букве вашего имени. Если в имени, переданном в аргументе name, меньше пяти букв, будет выполнен return, чтобы сразу же выйти из функции. При этом оператор return в конце функции (тот, что возвращает сообщение о пятой букве) так и не будет выполнен.
8. Функции 137 var fifthLetter = function (name) { if (name.length < 5) { return; } return "Пятая буква вашего имени: " + name[4] + "."; }; В строке мы проверяем длину переданного имени — уж не короче ли оно пяти символов? Если это так, в строке мы выполняем return, чтобы незамедлительно выйти из функции. Давайте попробуем эту функцию в деле. fifthLetter("Николай"); " Пятая буква вашего имени: л. " В имени Николай больше пяти букв, так что функция fi fthLetter благополучно завершается, вернув пятую букву имени Николай, то есть л. Попробуем вызвать ее еще раз с именем покороче: fifthLetter("Ник"); undefined Когда мы вызвали fi fthLetter для имени Ник, функция распознала, что имя недостаточно длинное, и сразу завершилась, выполнив оператор return в строке . Поскольку никакого значения после этого return не указано, функция вернула undefi ned. Многократное использование return вместо конструкции if... else Можно многократно использовать return внутри разных конструкций if, чтобы возвращать из функции разные значения в зависимости от входных данных. Предположим, вы пишете игру, в которой игроки награждаются медалями согласно набранным очкам. Счету меньше трех очков соответствует бронзовая медаль, счету от трех до шести — серебряная, а счету от семи и выше — золотая. Fifth letter — пятая буква 138 Часть I. Основы var medalForScore = function (score) { if (score < 3) { return "Бронзовая"; } if (score < 7) { return "Серебряная"; } return "Золотая"; }; В строке мы возвращаем значение "Бронзовая" и выходим из функции, если счет меньше трех очков. Если мы достигли строки , значит, счет как минимум равен трем очкам, поскольку, будь он меньше трех, мы бы уже вышли из функции (выполнив return в первом операторе if). И наконец, если мы достигли строки , значит, на счету как минимум семь очков, проверять больше нечего и можно спокойно вернуть значение "Золотая". Хотя мы проверяем здесь несколько условий, необходимости использовать цепочку конструкций if... else нет. Мы используем if... else, когда хотим убедиться, что будет выбран лишь один из вариантов. Однако если в каждом варианте выполняется return, это также гарантирует однозначный выбор (поскольку выйти из функции можно лишь один раз). СОКРАЩЕННА Я ЗА ПИСЬ ПРИ СОЗ Д АНИИ ФУ НКЦИЙ Есть длинный и короткий способы записи функций. Я использую длинную запись, поскольку она наглядно демонстрирует, что функция хранится в переменной. Тем не менее вам стоит знать и о короткой записи, поскольку ее используют многие JavaScript-разработчики. Возможно, и вы сами, достаточно поработав с функциями, предпочтете короткую запись. Вот пример длинной записи: var double = function (number) { return number * 2; }; Короткая запись той же функции выглядит так: function double(number) { return number * 2; } Medal for score — медаль за очки Score — счет, очко (очки)
8. Функции 139 Как видите, при длинной записи мы явно создаем переменную и сохраняем в ней функцию, так что имя double записывается прежде ключевого слова function. Напротив, при короткой записи сначала идет ключевое слово function, а затем название функции. В этом случае JavaScript создает переменную double неявным образом. На техническом сленге длинная запись называется функциональным выражением, а короткая — объявлением функции. Что мы узнали Функции позволяют повторно использовать фрагменты кода. Они могут работать по-разному в зависимости от переданных аргументов и могут возвращать значение в то место кода, откуда они были вызваны. Также функции дают возможность называть фрагменты кода понятными именами, чтобы, глядя на название, мы могли сразу понять, что функция делает. В следующей главе мы узнаем, как писать JavaScript-код для работы с HTML-элементами. 140 Часть I. Основы УПРА ЖНЕНИЯ Выполните эти упражнения, чтобы попрактиковаться в использовании функций. #1. Математические расчеты и функции Создайте две функции, add и multiply; пусть каждая принимает по два аргумента. Функция add должна складывать аргументы и возвращать результат, а функция multiply — перемножать аргументы. С помощью только этих двух функций вычислите следующее несложное выражение: 36325 * 9824 + 777 #2. Совпадают ли массивы? Напишите функцию areArraysSame, которая принимает два массива с числами в качестве аргументов. Она должна возвращать 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. «Виселица» и функции Давайте вернемся к игре «Виселица» из седьмой главы и перепишем ее с помощью функций. Я уже переписал основной код игры. Некоторые его части заменены вызовами функций. Вам осталось лишь запрограммировать эти функции! Are arrays same — одинаковы ли массивы Add — прибавить Multiply — умножить
// Создайте здесь свои функции // word: загаданное слово var word = pickWord(); // answerArray: итоговый массив var answerArray = setupAnswerArray(word); // remainingLetters: сколько букв осталось угадать var remainingLetters = word. length ; while (remainingLetters > 0) { showPlayerProgress(answerArray); // guess: ответ игрока 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); Этот вариант с использованием функций почти так же прозрачен, как псевдокод из седьмой главы. Обратите внимание, как функции помогают сделать код более понятным. Вот объявления функций, код которых вам нужно написать: 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 показывает игроку отгаданное слово // и поздравляет его с победой }; Show player progress — показать прогресс игрока Show answer and congratulate player — показать ответ и поздравить игрока
Ч АС Т Ь I I Продвинутый JavaScript
Ч АС Т Ь I I Ч АС Т Ь I I Продвинутый Продвинутый JavaScript JavaScript
145 9 D O M И J Q U E RYДо сих пор мы использовали JavaScript для относительно простых задач, вроде вывода текста в консоли браузера или отображения диалогов alert и prompt. Однако помимо этого JavaScript позволяет взаимодействовать с HTML-элементами на веб-страницах, меняя их поведение и внешний вид. В этой главе мы поговорим о двух технологиях, которые помогут вам писать гораздо более мощный JavaScript-код: это DOM и jQuery. DOM — это средство, позволяющее JavaScript-коду взаимодействовать с содержимым веб-страниц. Браузеры используют DOM для структурирования страниц и их элементов (параграфов, заголовков и т. д.), а JavaScript может разными способами манипулировать элементами DOM. Например, скоро вы узнаете, как при помощи JavaScript-программы менять заголовки HTML-документов, подставляя туда значение, полученное из диалога prompt. Также мы познакомимся с удобным инструментом под названием jQuery, который кардинально упрощает работу с DOM. jQuery содержит набор функций, которые позволяют найти нужные вам элементы и произвести с ними определенные действия. В этой главе мы узнаем, как c помощью DOM и jQuery изменять существующие элементы DOM, а также создавать новые, полностью контролируя содержимое веб-страниц из JavaScript-кода. Также мы выясним, как использовать jQuery для анимации элементов DOM — например, для плавного появления и исчезновения изображений и текста. DOM — Document Object Model — объектная модель документа 146 Часть II. Продвинутый JavaScript Поиск элементов DOM Когда вы открываете HTML-документ, браузер преобразовывает его элементы в древовидную структуру — дерево DOM. На рис. 9.1 изображено простое дерево DOM — мы уже встречали его в пятой главе, когда говорили об иерархии HTML. Браузер дает JavaScript-программистам возможность доступа к этой древовидной структуре при помощи специальных методов DOM.
перейти в каталог файлов
| Образовательный портал
Как узнать результаты егэ
Стихи про летний лагерь
3агадки для детей |