#8 – Циклы в JavaScript. Операторы циклов

За счет циклов вы можете создавать код, что будет циклично выполнен определенное количество раз. Мы в уроке рассмотрим создание циклов в языке JavaScript. Мы изучим циклы: for, while и do while. Дополнительно нами будут изучены операторы для циклов.
Видеоурок
В языке JavaScript, как и в большинстве других языков, существует 3 основных вида циклов. Каждый из них выполняет одну и ту же роль, но записывается по-разному. Рассмотрим все три цикла.
Цикл For
В цикле for все условия записываются в одном месте, что очень удобно во многих случаях. Стандартная запись такого цикла выглядит следующим образом:
for (var i = 0; i < 10; i++) console.log(i);
В объявлении цикла записывается следующее: переменная цикла, её начальное значение и диапазон. В примере выше будут выведены числа от 0 до 10.
Если в теле цикла всего одна строка кода, то фигурные скобки можно пропустить и не записывать их.
Цикл While
Суть цикла while не особо отличается от цикла for . Единственное отличие заключается в способе записи цикла. В while необходимо прописать лишь условие, а все остальные параметры записываются вне цикла:
var i = 1; // Создание переменной while (i
Цикл Do While
Цикл схож с циклом while по форме написания, но при этом работает немного по-другому. Цикл do..while будет выполнен один раз сто процентов, а дальше проверит условие и если оно верно, то цикл будет выполняться дальше:
var x = 13; do < x--; console.log(x); >while (x > 10);
Как видно из примера, цикл изначально неверный, но это не мешает ему сработать один раз.
Операторы для работы в циклах
Существует три основных оператора для работы в циклах:
- Оператор break - служит для выхода из цикла полностью;
- Оператор continue - пропускает лишь одну итерацию и не выходит из цикла.
Весь код будет доступен после подписки на проект!
Циклы

Чтобы понять действие условных операторов, мы предлагали представить их в виде разветвлений на дороге, по которой двигается интерпретатор JavaScript. Циклы можно представить как разворот на дороге, возвращающий обратно, который заставляет интерпретатор многократно проходить через один и тот же участок программного кода.
В языке JavaScript имеется четыре цикла: while, do/while, for и for/in. Каждому из них посвящен один из следующих подразделов. Одно из обычных применений циклов - обход элементов массива.
Цикл while
Оператор if является базовым условным оператором в языке JavaScript, а базовым циклом для JavaScript можно считать цикл while. Он имеет следующий синтаксис:
while (выражение)
Цикл while начинает работу с вычисления выражения. Если это выражение имеет ложное значение, интерпретатор пропускает инструкцию, составляющую тело цикла, и переходит к следующей инструкции в программе. Если выражение имеет истинное значение, то выполняется инструкция, образующая тело цикла, затем управление передается в начало цикла и выражение вычисляется снова. Иными словами, интерпретатор снова и снова выполняет инструкцию тела цикла, пока значение выражения остается истинным. Обратите внимание, что имеется возможность организовать бесконечный цикл с помощью синтаксиса while(true).
Обычно не требуется, чтобы интерпретатор JavaScript снова и снова выполнял одну и ту же операцию. Почти в каждом цикле с каждой итерацией цикла одна или несколько переменных изменяют свои значения. Поскольку переменная меняется, действия, которые выполняет инструкция, при каждом проходе тела цикла могут отличаться.
Кроме того, если изменяемая переменная (или переменные) присутствует в выражении, значение выражения может меняться при каждом проходе цикла. Это важно, т.к. в противном случае выражение, значение которого было истинным, никогда не изменится и цикл никогда не завершится! Ниже приводится пример цикла while, который выводит числа от 0 до 9:
var count = 0; while (count
Как видите, в начале переменной count присваивается значение 0, а затем ее значение увеличивается каждый раз, когда выполняется тело цикла. После того как цикл будет выполнен 10 раз, выражение вернет false (т.е. переменная count уже не меньше 10), инструкция while завершится и интерпретатор перейдет к следующей инструкции в программе. Большинство циклов имеют переменные-счетчики, аналогичные count. Чаще всего в качестве счетчиков цикла выступают переменные с именами i, j и k, хотя для того чтобы сделать программный код более понятным, следует давать счетчикам более наглядные имена.
Цикл do/while
Цикл do/while во многом похож на цикл while, за исключением того, что выражение цикла проверяется в конце, а не в начале. Это значит, что тело цикла всегда выполняется как минимум один раз. Эта инструкция имеет следующий синтаксис:
do < инструкция >while (выражение);
Цикл do/while используется реже, чем родственный ему цикл while. Дело в том, что на практике ситуация, когда вы заранее уверены, что потребуется хотя бы один раз выполнить тело цикла, несколько необычна. Ниже приводится пример использования цикла do/while:
function printArray(a) < var len = a.length, i = 0; if (len == 0) console.log("Пустой массив"); else < do < console.log(a[i]); >while (++i < len); >> printArray([1,5,6,8]);
Между циклом do/while и обычным циклом while имеется два отличия. Во-первых, цикл do требует как ключевого слова do (для отметки начала цикла), так и ключевого слова while (для отметки конца цикла и указания условия). Во-вторых, в отличие от цикла while, цикл do завершается точкой с запятой. Цикл while необязательно завершать точкой с запятой, если тело цикла заключено в фигурные скобки.
Цикл for
Цикл for представляет собой конструкцию цикла, которая часто оказывается более удобной, чем цикл while. Цикл for упрощает конструирование циклов, следующих шаблону, общему для большинства циклов. Большинство циклов имеют некоторую переменную-счетчик. Эта переменная инициализируется перед началом цикла и проверяется перед каждой итерацией. Наконец, переменная-счетчик инкрементируется или изменяется каким-либо другим образом в конце тела цикла, непосредственно перед повторной проверкой переменной. Инициализация, проверка и обновление - это три ключевых операции, выполняемых с переменной цикла. Инструкция for делает эти три шага явной частью синтаксиса цикла:
for(инициализация; проверка; инкремент)
Инициализация, проверка и инкремент - это три выражения (разделенных точкой с запятой), которые ответственны за инициализацию, проверку и увеличение переменной цикла. Расположение их в первой строке цикла упрощает понимание того, что делает цикл for, и не позволяет забыть инициализировать или увеличить переменную цикла.
Проще всего объяснить работу цикла for, показав эквивалентный ему цикл while:
инициализация; while(проверка)
Другими словами, выражение инициализации вычисляется один раз перед началом цикла. Это выражение, как правило, является выражением с побочными эффектами (обычно присваиванием). В JavaScript также допускается, чтобы выражение инициализации было инструкцией объявления переменной var, поэтому можно одновременно объявить и инициализировать счетчик цикла.
Выражение проверки вычисляется перед каждой итерацией и определяет, будет ли выполняться тело цикла. Если результатом проверки является истинное значение, выполняется инструкция, являющаяся телом цикла. В конце цикла вычисляется выражение инкремент. Чтобы использование этого выражения имело смысл, оно должно быть выражением с побочными эффектами. Обычно это либо выражение присваивания, либо выражение, использующее оператор ++ или --.
Вывести числа от 0 до 9 можно также с помощью цикла for, как показано ниже, в противовес эквивалентному циклу while, показанному в примере ранее:
for (var count = 0; count < 10; count++) console.log(count);
Конечно, циклы могут быть значительно более сложными, чем в этих простых примерах, и иногда в каждой итерации цикла изменяется несколько переменных. Эта ситуация - единственный случай в JavaScript, когда часто применяется оператор «запятая» - он позволяет объединить несколько выражений инициализации и инкрементирования в одно выражение, подходящее для использования в цикле for:
var i,j; for (i = 0, j = 0; i < 10; i++, j++) // Выведет в консоли таблицу квадратов чисел от 0 - 9 console.log('%s * %s = %s', i, j, i*j);
Цикл for/in
Цикл for/in использует ключевое слово for, но он в корне отличается от обычного цикла for. Цикл for/in имеет следующий синтаксис:
for (переменная in объект)
В качестве переменной здесь обычно используется имя переменной, но точно так же можно использовать инструкцию var, объявляющую единственную переменную. Параметр объект - это выражение, возвращающее объект. И как обычно, инструкция - это инструкция или блок инструкций, образующих тело цикла.
Для обхода элементов массива естественно использовать обычный цикл for:
var arr = [1,2,3,4,5]; for (var i = 0; i < arr.length; i++) < // Присваивать индексы в массиве переменной i console.log(arr[i]); // Вывести значение каждого элемента массива >
Инструкция for/in так же естественно позволяет выполнить обход свойств объекта:
// Создадим новый объект var obj = ; for (var i in obj) < // Вывести значение каждого свойства объекта console.log(obj[i]); >
Чтобы выполнить инструкцию for/in, интерпретатор JavaScript сначала вычисляет выражение объект. Если оно возвращает значение null или undefined, интерпретатор пропускает цикл и переходит к следующей инструкции. Если выражение возвращает простое значение, оно преобразуется в эквивалентный объект-обертку. В противном случае выражение возвращает объект. Затем интерпретатор выполняет по одной итерации цикла для каждого перечислимого свойства объекта. Перед каждой итерацией интерпретатор вычисляет значение выражения, сохраняет его в переменной и присваивает ему имя свойства (строковое значение).
Обратите внимание, что переменная в цикле for/in может быть любым выражением, возвращающим значение, которое можно использовать слева от оператора присваивания. Это выражение вычисляется в каждой итерации цикла, т.е. каждый раз оно может возвращать разные значения. Например, чтобы скопировать имена всех свойств объекта в массив, можно использовать следующий цикл:
var obj = ; var arr = [], i = 0; for (arr[i++] in obj); // пустое тело цикла console.log(arr); // ["name", "password"]
В действительности цикл for/in может совершать обход не по всем свойствам объекта, а только по перечислимым свойствам. Многочисленные встроенные методы, определяемые в базовом языке JavaScript, не являются перечислимыми. Например, все объекты имеют метод toString(), но цикл for/in не перечислит свойство toString. Кроме встроенных методов также не являются перечислимыми многие другие свойства встроенных объектов. При этом все свойства и методы, определяемые пользователем, являются перечислимыми. Унаследованные свойства, которые были определены пользователем, также перечисляются циклом for/in.
Если в теле цикла for/in удалить свойство, которое еще не было перечислено, это свойство перечислено не будет. Если в теле цикла создать новые свойства, то обычно такие свойстве не будут перечислены. (Однако некоторые реализации могут перечислять унаследованные свойства, добавленные в ходе выполнения цикла.)
Какие циклы существуют в языке javascript
Циклы позволяют в зависимости от определенных условий выполнять некоторое действие множество раз. В JavaScript имеются следующие виды циклов:
Цикл for
Цикл for имеет следующее формальное определение:
for ([инициализация счетчика]; [условие]; [изменение счетчика]) < // действия >
Например, используем цикл for для перебора чисел от 0 до 4:
for(let i = 0; i console.log("Конец работы");
Первая часть объявления цикла - let i = 0 - создает и инициализирует счетчик - переменную i. И перед выполнением цикла ее значение будет равно 0. По сути это то же самое, что и объявление переменной.
Третья часть - i++ - приращение счетчика на единицу.
То есть при запуске переменная i равна 0. Это значение отвечает условию i
console.log(i);
После выполнения блока цикла выполняется треться часть объявления цикла - приращение счетчика. То есть переменная i сановится равной 1. Это значение также отвечает условию, поэтому блок цикла снова выполняется. Таким образом, блок цикла сработает 5 раз, пока значение i не станет равным 5. Это значение НЕ отвечает условию, поэтому произойдет выход из цикла. И управление программой перейдет к инструкциям, которые идут после блока цикла. Консольный вывод программы:
0 1 2 3 4 Конец работы
Каждое отдельное повторение цикла называется итерацией. Таким образом, в данном случае сработают 5 итераций.
При этом необязательно увеличивать счетчик на единицу, можно производить с ним другие действия, например, уменьшать на единицу:
for(let i = 10; i > 5; i--)
В данном случае на консоль выводится числа от 10 до 6.
Или увеличим счетчик на 2:
for(let i = 0; i
Здесь выводятся на консоль все четные числа от 0 до 8
При этом можно опускать различные части объявления цикла:
let i = 0; for(; i
В данном случае переменная i определена вне цикла. В самом объявлении цикла есть только условие, остальные две части отсутствуют. Изменение переменной происходит в самом блоке цикла: оно увеличивается на 10. В итоге на консоль будут выведены числа 0, 10, 20, 30, 40, 50.
Счетчик удобно использовать как индекс элементов массива и таким образом перебирать массив:
const people = ["Tom", "Sam", "Bob"]; for(let i=0; i
Консольный вывод браузера:
Tom Sam Bob
Применение нескольких счетчиков в цикле
При необходимости можно использовать несколько счетчиков:
for(let i = 1, j=1; i < 5, j < 4; i++, j++)< console.log(i + j); >// 1 итерация: i=1, j=1; i + j = 2 // 2 итерация: i=2, j=2; i + j = 4 // 3 итерация: i=3, j=3; i + j = 6
Здесь теперь используются два счетчика и два условия. Рассмотрим пошагово, что здесь происходит:
-
Первая итерация. Начальные значения переменных i и y:
i=1, j=1;
Для каждой переменной установлены свои условия. И вначале начальные значения переменных соответствуют этим условиям:
В блоке цикла выводится сумма этих переменных. И дальше значения обоих переменных увеличиваются на единицу. Они становятся равны
i=2, j=2;
i=2, j=2;
После выполнения блока цикла значения обоих переменных увеличиваются на единицу. Они становятся равны
i=3, j=3;
i=3, j=3;
После выполнения блока цикла значения обоих переменных увеличиваются на единицу. Они становятся равны
i=4, j=4;
Выполнение действий в объявлении цикла
Стоит отметит, что третья часть цикла, где обычно происходит изменение счетчика в реальности представляет произвольное действие, которое выполняется после завершения цикла. Так, мы можем написать следующим образом:
for(let i = 0; i < 5; console.log(i++)); console.log("Конец работы");
Здесь не определено блока цикла, а сами действия цикла определены в третьей части заголовка цикла - console.log(i++)
Аналогично в первой части определения цикла - инициализации мы можем выполнять некоторые действия, а не обязательно только объявление счетчика:
let i=0; for(console.log("Init"); i
Здесь определение счетчика вынесено вне цикла, а в инициализационной части цикла на консоль выводится строка. Вывод браузера:
Init 0 1 2 3 4
Вложенные циклы
Одни циклы могут внутри себя содержать другие:
for(let i=1; i >
Здесь один цикл включается в себя другой. ВО внешнем цикле определяется переменная i. Вначале она равна 1 и это значение соответствует условию цикла ( i
Во внутреннем цикле определяется переменная-счетчик j, которая изначально равна 1, и потом внутренний цикл выполняет 5 итераций, пока переменная j не станет равна 5.
После того, как блок внешнего цикла завершен, переменная i увеличивается на 1 и становится равной 2, что опять же соответствует условию. И снова выполняется блок внешнего цикла. В этом блоке снова выполняются пять итераций внутреннего цикла. И так далее. В итоге внутренний цикл будет выполняться 25 раз.
Используя вложенные циклы и несколько счетчиков можно перебирать многомерные массивы:
const people = [["Tom", 39], ["Sam", 28],["Bob", 42]]; for(let i=0; i < 3; i++)< // перебираем двухмерный массив for(let j=0; j < 2; j++)< // перебираем вложенные массивы console.log(people[i][j]); >console.log("================ browser"> Tom 39 ================= Sam 28 ================= Bob 42 =================
Цикл while
Цикл while выполняется до тех пор, пока некоторое условие истинно. Его формальное определение:
while(условие) < // действия >
Опять же выведем с помощью while числа от 1 до 5:
let i = 1; while(i
Цикл while здесь будет выполняться, пока значение i не станет равным 6.
do..while
В цикле do сначала выполняется код цикла, а потом происходит проверка условия в инструкции while. И пока это условие истинно, цикл повторяется. Например:
let i = 1; do< console.log(i); i++; >while(iЗдесь код цикла сработает 5 раз, пока i не станет равным 5. При этом цикл do гарантирует хотя бы однократное выполнение действий, даже если условие в инструкции while не будет истинно.
Операторы continue и break
Иногда бывает необходимо выйти из цикла до его завершения. В этом случае мы можем воспользоваться оператором break :
for(let i=1; i console.log("Конец работы");Данный цикл увеличивает переменную i c 1 до 6 включая, то есть согласно условию цикла блок цикла должен выполняться 6 раз, то есть поизвести 6 итераций. Однако поскольку в блоке цикла происходит поверка if(i===4) break; , то, когда значение переменной i достигнет 4, то данное условие прервет выполнение цикла с помощью оператора break. И цикл заершит работу.
1 2 3 Конец работыЕсли нам надо просто пропустить итерацию, но не выходить из цикла, мы можем применять оператор continue . Например, изменим предыдущий пример, только вместо break используем оператор continue :
for(let i=1; i console.log("Конец работы");В этом случае, когда значение переменная i станет равной 4 , то выражение i===4 возвратит true , поэтому будет выполняться конструкция if(i===4) continue; . С помощью оператора continue она завершит текущую итерацию, далее идущие инструкции цикла не будут выполняться, а произойдет переход к следующей итерации:
1 2 3 5 6 Конец работыfor..in
Цикл for..in предназначен главным образом для перебора объектов. Его формальное определение:
for (свойство in объект) < // действия >Этот цикл перебирает все свойства объекта. Например:
const person = ; for(prop in person)
Здесь перебирается объект person, который имеет два свойства - name и age. Соответственно на консоли мы увидим:
name ageПолучив свойтсва и используя специальный синтаксис объект[свойство] , мы можем получить значение каждого свойства:
const person = ; for(prop in person)
name Tom age 37Цикл for. of
Цикл for. of предназначен для перебора наборов данных. Например, строка представляет фактически набор символов. И мы можем перебрать ее с помощью данного цикла:
const text = "Hello"; for(char of text)
В итоге цикл перебирает все символы строки text и помещает каждый текущий символ в переменную ch , значение которой затем выводится на консоль.
H e l l oДругим примером может быть перебор массива:
const people = ["Tom", "Sam", "Bob"]; for(const person of people)
В данном случае цикл перебирает элементы массива people. Каждый элемент последовательно помещается в константу person . И далее мы можем вывести ее значение на консоль:
Циклы в JavaScript
Думаю, каждый программист знает, что такое цикл. Но для начинающих кратко поясню: цикл - это последовательность одинаковых действий. То есть участок кода, который необходимо выполнить несколько раз. Подробнее о циклах вообще см. здесь.
Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:
В JavaScript, как и в большинстве других языков программирования, есть несколько видов циклов: цикл с предусловие ( while ), цикл с постусловием ( do-while ), цикл по параметру ( for ), цикл перебора свойств объекта ( for-in ). Далее все эти виды циклов рассмотрим более подробно.
Цикл while в JavaScript
Цикл этого вида является основным. Синтаксис:
while (Выражение) Инструкция
В этом цикле сначала вычисляется Выражение. Если выражение ИСТИННО, то выполняется Инструкция. Если выражение ЛОЖНО, то цикл НЕ выполняется (либо прерывается).
Инструкций может быть несколько (в этом случае они должны быть заключены в операторные скобки).
var i = 0; while (i < 10) < document.write(i); i = i + 1; //Обязательно. >В теле цикла мы каждый раз увеличиваем значение переменной i на единицу. Но мы это делаем уже ПОСЛЕ того, как выводим значение на экран. Поэтому в данном примере мы выводим числа от 0 до 9.
Почему только до 9? Потому что в нашем случае выражение (i , когда переменная i равна 10 , уже будет ложным. И, поскольку это цикл с предусловием (то есть мы СНАЧАЛА проверяем выражение, а ПОТОМ, в зависимости от результата, выполняем или не выполняем цикл), то тело цикла уже НЕ будет выполнено, когда i равна 10 .
Цикл do-while в JavaScript
do Инструкция while (Выражение);
В этом цикле сначала выполняется Инструкция, затем вычисляется Выражение. Если выражение ИСТИННО, то цикл повторяется, если ложно, то прекращается. Поскольку выражение проверяется после выполнения тела цикла, такой цикл будет выполнен хотя бы один раз.
Также обратите внимание, что в конце точка с запятой обязательна (в цикле while точка с запятой не обязательна, если тело цикла заключено в фигурные скобки). Пример:
var i = 100; do < document.write(i); i = i + 1; //Обязательно. >while (i < 10);В этом примере, несмотря на то, что проверяемое выражение изначально ложно (100 , цикл всё-равно будет выполнен один раз и выведет на экран число 100.
Цикл for в JavaScript
Это, пожалуй, самый удобный и безопасный цикл. Безопасный, потому что сделать его бесконечным почти невозможно. И простой, потому что значение переменной-счётчика не надо увеличивать в теле цикла - оно увеличивается автоматически. Синтаксис:
for (Инициализация; Выражение; Счётчик) Инструкция;Для понимания лучше сразу покажу пример:
Мы здесь делаем то же самое, что и в примере с циклом while , однако весь исходный код поместился в одну строчку и нам не надо писать лишние строки. К тому же мы здесь точно не забудем увеличивать или уменьшать счётчик, и таким образом избежим бесконечного цикла.
Цикл for-in в JavaScript
Если вы пока не сталкивались с объектно-ориентированным программированием (ООП), то с таким видом цикла вы не встречались. Синтаксис:
for (Переменная in Объект) Инструкция;
Здесь Переменная должна быть либо именем переменной, либо инструкцией var, объявляющей переменную, либо элементом массива, либо свойством объекта (то есть должна быть чем-то таким, что может находиться левой части выражения присваивания). Параметр Объект – это имя объекта или выражение, результатом которого является объект.
Этот цикл предоставляет возможность перебора всех свойств Объекта. Тело такого цикла выполняется один раз для каждого свойства Объекта.
var Coord = x:10, y:5, z:15>; for (var p in Coord) document.write("Coord." + p + " = " + Coord[p] + "
");Здесь мы сначала создаём объект Coord, у которого есть свойства x, y, z. Затем в цикле перебираем эти свойства и выводим на экран их имена и значения. В итоге на экран будет выведено:
Coord.x = 10 Coord.y = 5 Coord.z = 15Надо сказать, что не все свойства объектов видны циклу for-in , и также есть довольно много особенностей использования этого цикла. Но это отдельная и довольно большая тема.
Бесконечный цикл в JavaScript
ВАЖНО! Не забывайте, что циклы могут быть бесконечными, что приведёт к зависанию вашего сценария. Чтобы этого избежать - в теле цикла не должно быть кода, который каким-то образом может привести к тому, что Выражение всегда будет истинным.
Примеры бесконечных циклов:
var i = 0; //Бесконечный цикл, где мы забыли о счётчике while (i < 10) < document.write(i); >//Бесконечный цикл, где мы уменьшаем счётчик, а не увеличиваем while (i < 10) < document.write(i); i--; > //Цикл for при желании тоже можно сделать бесконечным for (i = 0; i < 10; i++) < document.write(i); i = 0; >Наиболее часто новички совершают ошибку из первого примера, то есть просто забывают про счётчик. Обратите внимание на цикл for - его при желании тоже можно сделать бесконечным.
Прерывание и продолжение циклов в JavaScript
Иногда необходимо прервать цикл раньше, чем он закончит все итерации. В других случаях требуется пропустить некоторые итерации. Подробно об этом я написал здесь, так что повторяться не буду.
Скажу только, что для прерывания цикла используется инструкция break , а для продолжения - continue . Примеры:
var i = 1; for (i = 1; i < 10; i++) < document.write('Привет, МИР! ' + i + '
'); if (i == 5) break; else document.write('Эта строка не будет выведена 5-й раз!
'); > i = 0; while (i < 10) < i++; if (i == 5) < document.write('Строка № 5 не будет выведена
'); continue; > document.write('Привет, МИР! ' + i + '
'); >Если в примерах что-то непонятно, то пояснения см. здесь.
Вложенный цикл в JavaScript
Циклы могут быть вложенными. Пример:
for (var i = 1; i < 5; i++) //Строки for (var j = 1; j < 4; j++) //Столбцы < document.write(' | ' + i + '-' + j); if (j == 3) document.write(' |
'); >Здесь вложенный цикл выделен красным цветом. Этот пример выведет на экран таблицу из 4-х строк и 3-х столбцов:
| 1-1 | 1-2 | 1-3 | | 2-1 | 2-2 | 2-3 | | 3-1 | 3-2 | 3-3 | | 4-1 | 4-2 | 4-3 |ВНИМАНИЕ! Помните, что инструкция break выполняет выход только из самого внутреннего цикла. То есть если break используется во вложенном цикле, то этот цикл прервётся, но внешний цикл будет продолжать работу.
Эта статья - лишь капля в море знаний о JavaScript. Если хотите испить эту чашу до дна, то изучить этот язык, а также jQuery и Ajax можно здесь:
