Първи стъпки в JavaScript — Цикли

Поредицата от въведение в 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 и цикълът ще прекрати изпълнението си. В края на скрипта извеждаме съобщение, че “детето” вече е достатъчно възрастно за да гласува.

Операторът ++, използван по-горе, увеличава стойността на променлива с 1. Стига променливата да е от тип целочислено число.

Ето още няколко думи относно присвояването на стойности на променливи.

Ако сте имали предишен опит с кой-да-е програмен език, можете да прескочите до 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.