Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Имам идея да започна да публикувам кратки уроци/статии, които да се фокусират върху работата на едно единствено нещо. Това може да бъде HTML елемент, CSS свойство, JavaScript код, кратка функция или дизайн и т.н.

Има няколко причини за това:

1. Фокус върху градивните елементи

   Всяка голяма и на пръв поглед трудна за разбиране идея в работата ни като уеб разработчици (например framework (работна рамка), помощна библиотека, плъгин, метод на работа и т.н.) в своята си основа е изградена от множество индивидуални елементи, които успешно взаимодействат помежду си.

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

   Точно затова е изключително важно да разберем как работят основните елементи на дадения език и да се научим да ги използваме правилно. Това ще ни освободи от зависимостта на най-новите тенденции и ще ни даде фундаментално знание, което ще ни служи с години наред.

2. Искам да окуража споделянето на знание дори и в най-минимална форма

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

3. Споделяне на малките успехи в ежедневието

   Всяка стъпка, която ни приближава към постигането на определена цел е един малък успех. Споделянето им е от голямо значение, защото те ни мотивират да продължаваме да работим, дават ни увереност, чувство за прогрес и сближаване с хората около нас. Всеки голям успех е изграден от множество по-малки. Следващия път, когато постигнеш нещо, не забравяй да го споделиш, колкото и малко да изглежда то!

4. Затвърждаване на наученото

   Колкото повече упражняваме дадено нещо, толкова по-добри ставаме в него. Това важи за всичко в ежедневието ни. Ако искаш да станеш добър програмист, пиши код. Ако искаш да станеш добър уеб дизайнер, създавай дизайни, които правят сайта разбираем и лесен за узползване.

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

Ще завърша с няколко мъдри думи от Kyle Simpson:

it is only by deeply understanding the simple things that we can simply understand the deep things.

— getify (@getify) September 22, 2015

Стига с филосифията. Време е да премина към същността на урока.

Днес искам да си припомня как работи метода forEach(), който е част от Array обекта в JavaScript.

Накратко казано, forEach() се използва за обхождане (итерация) на масив. Масива може да бъде съставен от всякакъв тип данни - числа, низове текст, булеви стойности, обекти и т.н.

Синтаксис

Синтаксиса на forEach() изглежда така:

arrayName.forEach(function(element, index, array) {
  // „Тяло” на функцията
}, thisArg);

arrayName е името на масива, който искаме да обходим.

forEach() метода преминава през всеки елемент от масива във възходящ ред като изпълнява callback функция за всеки от тях. Тя приема три параметъра:

• element - настоящия елемент от масива
• index - индекса, на който се намира настоящия елемент
• array - масива, върху който прилагаме forEach()

thisArg е втори, незадължителен параметър на forEach(), който определя стойността на this в callback функцията.

Първи пример

Разполагам с масив от числа и искам да разбера на колко е равен квадрата на всяко едно от тях. Елементарно:

[4, 12, 27, 14].forEach(function(number) {
   console.log(number + " на квадрат е " + number * number);
});

Резултат:

Когато започне да се изпълнява този код, number приема първия елемент от масива. Това е числото 4. То отива в „тялото” на функцията, където може да послужи за извършването на някакви операции. След като и този код се изпълни, number приема втория елемент и т.н. до последния.

Важно е да отбележа, че операциите, които се извършват с елемента в callback функцията, не се отразяват на елемента намиращ се в оригиналния масив.

Чрез console.log() принтирам в конзолата желания израз, след като number се замести със съответното число и се извършат нужните математически изчисления.

След като вече е ясно как работи forEach(), ще разгледам един по-сложен пример.

Втори пример

Да предположим, че получавам задачка да създам функция, която приема масив с обекти, извършва някаква „магия” и връща определена информация. Всеки обект представлява отделна книга, която има свойства като ISBN номер, заглавие, автор и цена. Резултатът, който трябва да върна от тази функция, е нов масив, който съдържа единствено заглавията на книгите.

Масива, с който трябва да работя, изглежда така:

var books = [
  {isbn: 0596517742, title: "JavaScript: The Good Parts", author: "Douglas Crockford", price: 13.57},
  {isbn: 1593275846, title: "Eloquent JavaScript: A Modern Introduction to Programming", author: "Marijn Haverbeke", price: 17.00},
  {isbn: 0596806752, title: "JavaScript Patterns", author: "Stoyan Stefanov", price: 12.67}
];

Резултатът трябва да изглежда така:

["JavaScript: The Good Parts", "Eloquent JavaScript: A Modern Introduction to Programming", "JavaScript Patterns"];

Хм, изглежда интересно! Ще пробвам с forEach()! Но трябва да започвам! Нямам цял ден на разположение. А и някой друг от екипа зависи от списъка със заглавия, за да продължи работата си!

Ето моето решение:

function getTitles(books) {
  var result = [];

  books.forEach(function(book) {
    result.push(book.title);
  });

  return result;
}

// Същия масив, който представих по-горе. Тук го пропускам, за да направя кода по-кратък
var books = [...];

var titles = getTitles(books);

// Принтиране на резултата в конзолата
console.log(titles);

Резултат:

Кратко обяснение

В titles запазвам резултата, който се връща след извикване на getTitles(). getTitles() приема един аргумент и това е масива с обекти.

Във функцията getTitles() декларирам и инициализирам нов, празен масив, в който ще запазя заглавията var result = [];.

След това използвам forEach() за обхождане на изпратения масив. Знам, че callback функцията приема три аргумента. На мен ми е нужен само първия. Ще го наименувам book.

books.forEach(function(book) {
  result.push(book.title);
});

В „тялото” на forEach() използвам друг Array метод - push(). Него ще го разгледам в друг урок. Накратко, той ни позволява до добавим (натикаме) нов елемент в края на определен масив. В случая това е масива result, който създадох по-рано.

Последното нещо във функцията getTitles() е return result;, което ми позволява да върна масива със заглавия обратно на titles.

Чрез console.log(titles); принтирам стойноста на titles в конзолата, за да проверя дали резутата наистина е този, който очаквам в действителност.

Заключение

Започнах този урок с идеята да бъде като кратко напомняне за работата на forEach() метода в JavaScript. Оказа се обаче, че стана по-дълъг от очакваното. Въпреки това на мен определено ми беше от полза да си припомня всичко това. Надявам се ти също да си открил/а нещо полезно за себе си.

Допълнителна информация

• forEach() в MDN
• The Array forEach method в Egghead

Снимка от cookbookman17.