Меню

Първи стъпки в правене на сайтове

Влез Излез

Първи стъпки в JavaScript – част 4 – Цикли

Поредицата от въведение в JavaScript продължава с урок за цикли. Най-общо циклите изпълняват поредица от команди до удовлетворяване на дадено условие.

while цикъл

Това е един от основните цикли в повечето езици за програмиране. Цялостният синтаксис е както следва:

while (condition) {
	codeToExecute();
}

В скобите поставяме условие (в примера това е променливата condition) по същия начин, по който задаваме условия на if-statement и докато това условие е вярно, кодът заграден от фигурни/големи скоби (в примера това е функцията codeToExecute()) ще се изпълнява.

Ето и един реален пример:

var age = 5;

while (age < 18) {
	alert('Все още не можеш да гласуваш. Изчакай една година, пък ще видим какво ще стане.');
	age++;
}

alert('Вече си на 18 - можеш да упражниш правото си на глас.');

В този пример отначало инициализираме променлива age със стойност 5, която образно представя годините на едно дете. След това с while цикъл проверяваме дали годините са по-малко от 18 и докато са, всеки път извеждаме съобщение, че детето още няма право да гласува. Всеки път когато изведем съобщението, добавяме още една година към възрастта му*, така че в един момент age ще бъде равно на 18 и цикълът ще прекрати изпълнението си. В края на скрипта извеждаме съобщение, че „детето“ вече е достатъчно възрастно за да гласува.

* Операторът „++“ добавен към името на целочислена променлива прибавя едно към стойността на целочислена променлива. Ето още няколко думи относно присвояването на стойности на променливи, тъй като за момента не съм отделил внимание на това. Ако сте имали предишен опит с кой-да-е програмен език, можеде да прескочите до for цикъл или даже направо до следващия урок.

В JavaScript присвояваме стойност на дадена променлива по следния начин:

var intVariable = 1; // целочислена променлива
var numberVariable = 5.55; // променлива от тип number
var stringVariable = 'OK'; // текстова променлива
var booleanVariable = true; // булева променлива
var arrayVariable = [1, 2, 3]; // масив
var objectVariable = { property: 'Value', otherProp: 5 }; // обект

При работа с целочислени променливи имаме и няколко начина за промяна на стойността им:

intVariable = intVariable + 1; // новата стойност е равна на старата плюс едно
intVariable += 1; // кратък начин за постигане на същия резултат
intVariable++; // още по-кратък начин

for цикъл

Синтаксисът на този цикъл е както следва:

for (initiate; condition; after) {
	codeToExecute();
}

С initiate означаваме инициализирането на променливи, които се използват в цикъла. Condition отново е условие, което трябва да е вярно, за да се изпълни тялото на цикъла (тяло на цикъла наричаме кодът, заграден от фигурни скоби), а с after описваме кратко действие, което ще се изпълнява в края на всеки блок. Поставяме това в самото инициализиране на цикъла за прегледност, тъй като това конкретно действие най-често може да промени истинността на условието за повторение на цикъла.

Ето как можем да реализираме предния пример с for цикъл:

for (var age = 5; age < 18; age++) {
	alert('Все още не можеш да гласуваш. Изчакай една година, пък ще видим какво ще стане.');
}

alert('Вече си на 18 - можеш да упражниш правото си на глас.');

Изглежда по-кратко, нали? Така е, защото for цикълът е предназначен именно за да улесни подобна структура. С него лесно можем да изпълним определен брой пъти един и същ блок. В крайна сметка той се свежда отново до while цикъл, просто началното инициализиране на променливата age и инкрементирането й (операторът ++ се нарича инкрементиране) се извършват при описването на цикъла, а не съответно преди него и в тялото му. По този начин се получава една по-добра прегледност на кода, стига да използваме цикъла по подходящ начин.

for цикълът е много подходящ за обхождане на елементи от масив. Ето примерно как можем да намерим сумата на всички елементи от един масив (нека като начално условие поставим всеки елемент да е число).

var myArray = [1, 4, 8, 12, 3, 23, 6, 2];

for (var i = 0, sum = 0; i < myArray.length; i++) {
	sum += myArray[i];
}

alert(sum);

Забелязахте ли нещо интересно в кода? Ето няколко бележки, за да поясним, ако нещо не ви е ясно:

Първо създаваме нова променлива на име myArray, на коята задаваме поредица от целочислени стойности. След това идва ред на нашия for цикъл. Забележете, че в частта за инициализиране всъщност задаваме стойност не само на променливата i, но и на sum, която ще използваме. Просто трябва да разделим двете със запетая и ще инициализираме и двете променливи.

Условието на цикъла е i да е по-малко от броя на елементите в масива, който взимаме чрез property-то length на масива. Всеки масив има такова property, което е равно на броя на елементите му.

Накрая задаваме и инкрементирането на i, което искаме да извършим при всяко изпълнение на тялото на цикъла.

В самото тяло към sum добавяме и поредния елемент от масива. Елементи от масива можем да достъпим като към името на променливата, съдържаща масива, добавим квадратни/средни скоби и в тях зададем поредния номер на елемента, който искаме. Трябва да се отбележи, че този номер е с нулево индексиране. Това ще рече, че първият елемент всъщност е myArray[0], а последният е myArray[myArray.length – 1]. Ако номера на последния елемент малко ви обърква – проигрейте на ум в главата си какви биха били номерата на елементи от масив с дължина 3 (нека ви подскажа – 0, 1 и 2 :P).

След като вече знаете за нулевото индексиране на масивите, може би също ви се изяснява и защо в цикъла инициализираме i със стойност 0 и защо проверката е i < myArray.length, вместо i <= myArray.length, което е проверка за по-малко или равно.

Съществуват и други начини за употреба на for цикъл, но тях ще разгледаме друг път.

for in

Този цикъл наподобява много for цикъл, но повече е ориентиран към обекти, чиито property-та искаме да прегледаме.

Нека направо да прегледаме един пример:

var person = { age: 18, name: 'Джон Доу' };

for (var prop in person) {
	alert(prop + ': ' + person[prop]);
}

Първоначално създаваме променлива person, която е обект с две property-та – age и name. Стойностите им са съответно 18 и „Джон Доу“. Чрез for in цикъла ние обхождаме всички property-та на обекта, като при всеки цикъл променливата prop има стойност името на property-то. Това е важно – prop не е стойността на даденото property, а името му. В нашия цикъл ще имаме две изпълнения на тялото, като първия път prop ще има стойност „age“, а втория – „name“.

По подобен начин на достъпване на елементи от масив по техния номер, ние можем да достъпваме стойност на property на даден обект чрез квадратни скоби. Така че person.age е същото като person[‘age’]. Разликата е там, че при използване на квадратни скоби можем да използваме променлива, чиято стойност да е „age“. Така в нашия цикъл person[prop] ни връща стойността на текущото property.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax