JavaScript для самых маленьких (Узнаем что такое циклы)

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

            Давайте разберем сначала, что такое цикл. Представьте, что вы пошли в магазин для того, что бы купить яблоки. Вам необходимо 20 яблок взяв корзинку вы подходите к полке с яблоками, берете первое яблоко тщательно проверяете его и если оно подходит под ваши требования, то кладете его в корзину и тяните руку за следующим яблоком. После вы протягиваете руку к полке и берете второе яблоко, тщательно осмотрев его вы находите изъян и видите гниль и вы кладете его обратно на полку, а затем берете новое яблоко, так же проверяете его и на нем тоже оказывается изъян и вы тоже откладываете его в сторону и так пока вы не найдете то, что вам нужно.  Вот так же работает цикл в JavaScript, а теперь мы посмотрим как он выглядит в живую :-).

            Ну, начнем пожалуй с самого распространенному по применению – это оператор for.  Синтаксис этого оператора выглядит следующим образом:

                       

            for(var i=0;i

{здесь пишем какое либо условие или выражение}

 

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

 

            var i=0;  

 

Эта переменная и будет перебирать (как говорилось из примера яблоки) а в нашем случае цифры, от 0 до 2, всего должно получиться 3 цифры «0,1,2». Счет начинается с той цифры которой вы назначите переменную, если вы бы написали i=1 то цикла выдал бы езультаты «1,2». Теперь двигаемся дальше, что бы разобрать почему цикл считает до 3ох. Смотрим дальше и видим такую страшную комбинацию:

           

            i

А вот это называется условие, те кто учил в школе математику взглянув на это сразу понимает в чем дело. Ну опять же для те кто в танке, объясняю: i-это переменная, вот эта скобка i меньше 3ох именно по этому мы получаем все значения которые заканчиваются на 2. Далее идут вообще не понятки какие то плюсики в совокупности с переменной.

 

            i++

 

Если после переменной пишутся два знака +, то это означает прибавить к переменной 1.

То есть с каждым разом прохождения цикла переменная i увеличивается на 1, так же это можно записывать следующим образом i=i+1  и так же будет увеличиваться на 1. Это называется конкатенация, ну мы будем пользоваться этим оператором ++.

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

            {}

 

Между этих скобок будет находиться грубо говоря то, что будет проделываться несколько раз пока не закончится цикл. Что бы вам было понятно давайте сделаем пример:

           

            for(var i=0;i

{alert(i)}

 

Откройте ваш созданный до этого файл и перепечатайте (Так лучше запоминается), а после откройте этот файл в своем браузере. Кстати в прошлой статье я забыл сказать кто открывает файлы с кодом JavaScript  через браузер Internet Explorer, необходимо на желтой полоске сверху нажать правой кнопкой мыши и выбрать «Разрешить заблокированное содержимое» для разрешения выполнения сценариев JavaScript.

            И так, после открытия браузера у вас должно выскочить маленькое окошко с цифрой 0, когда вы нажмете кнопку ОК, то цикл закончит свой первый круг, переменная i  прибавиться на 1 и начнется второй  круг цикла начиная с 1. Пройдет условие так как i  меньше 3ох,  и выскочит окошко с цифрой 2. После опять прибавится к переменной i цифра 1 и переменная начнется с 2 опять пройдет условие так как 2 меньше 3ох. И вам выведется новое сообщение с цифрой 2, после нажатия закончится 3 круг и пойдет 4ый. Переменная прибавится еще на 1 и будет равна 3, но условие не пройдет, так как 3 не меньше 3 так что цикл остановится и последнее сообщение это будет цифра 2.

            А теперь самостоятельно используя знания полученные из пред идущей статьи выведете даны на страничку вашего браузера. Что бы получилось вот так

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Но! Оператор цикла не один FOR, есть и ряд других. Давайте их тоже разберем.

            Оператор WHILE относительно FOR отличается синтаксисом. Записывается он следующим образом:

 

                        var i=0;

                        while(i

                                   {Тут пишем условия или выражения}

 

Заметьте, переменную нужно назначать заранее, так как синтаксис не предусматривает создание переменной в самом операторе. И еще заметьте, что не ставится знак ++ для прибавления. Это нужно ставить в фигурный скобках, а если не поставить то  цикл будет длиться бесконечно потому, что ваша переменная не прибавляется и все время будет равна 0. И из-за этого браузер повиснет вместе с вашим компом :-). Ну, если интересно посмотреть, что будет то напишите:

 

                        var i=0;

                        while(i

                                   {document.write(i)}

 

Вы получите тормознутый браузер, большое расходование процессорного времени и кучу нулей. И так нажмите комбинацию клавиш Ctrl+F4. Ну, а правильно будет записать так:

 

                        var i=0;

                        while(i

                                   {

i++;

document.write(i)}

 

 

Вот теперь должен получиться  вот такой результат 123. Заметили, начинается не с нуля, а с цифры 1, так как этот цикл начинает со следующей цифры и еще останавливается только после того как переменная будет равна 3. А если поменять местами i++, точнее поставить их вниз то мы получим такую же картину как с циклом FOR, то есть 012. А все это потому что ты сам можешь регулировать как будет выводить информацию твой цикл. Если ставишь переменную перед выводом     как показано в примере, то он сперва высчитывает, точнее прибавляет 1 а потом выводит информацию, именно по этому начинается с цифры 1 и в последний момент когда срабатывает последнее условие то в переменную прибавляется цифра 1 и в конце получается 3. А когда прибавление стоит после вывода информации то сперва вывод начинается с 0 и заканчивается 2.

            Рассмотрим следующий цикл под названием switch. Этот цикл больше похож на условие (условия мы будем проходить в следующей статье), так вот этот цикл работает на такой основе. Ему задается условие а он ищет подходящий ответ  и выбирает его. Короче давайте перейдем к синтаксису:

 

                                   var i =0;

switch(i)

{

case 1:

break

case 2:

break

case 0:

                                               break

document.writeln(i)

}

 

Выглядит все очень страшно, но на самом деле все очень просто. У нас есть переменная со значением 0, мы впихиваем ее в switch(i) а цикл ищет последующее значение которые находятся в фигурных скобках. А значения указываются после оператора CASE . Если значение равно переменной то цикл останавливается оператором break. Вот и все дела. Ну вообщем то и все что вам пока нужно знать о циклах, до встречи в следующей статье…