Kурс по уеб програмиране (2015) Занятие №1: HTML -- Въведение в HTML Елементи и тагове Мета съдържание Структуриране на текст Хипервръзки Изображения Таблици Списъци Форматиране на таблици Форми Въведение в HTML 5 Структуриране на страница Форми и валидиране Аудио и видео

1. 2015
Курс по уеб програмиране
Занятие №3
JavaScript (част 1)

2. Съдържание
• Въведение в JavaScript
• Коментари
• Запазени думи
• Идентификатори
• Типове данни
• Литерали
• Променливи
• Оператори, изрази и съждения
• Условия, условни преходи и оператори
• Цикли
• Функции

3. Въведение в JavaScript
• Обектно-ориентиран, прототипен, динамичен,
функционален език за програмиране
• Място на JavaScript в World Wide Web
– HTML дава структура и съдържание на страниците
– CSS дава тяхното оформление, външния вид на страниците
– JavaScript дава поведението на страниците, взаимодействието с
потребителя, с функциите на браузера, с мрежата и т.н.
• Работи предимно в браузери, но е достъпен и на други
платформи
– PDF документи, специфични браузъри, настолни „джаджи” и др.
– Сървърни приложения (Node.js)

4. Въведение в JavaScript
• Историческа справка
– Разработен през 1995 Brendan Eich от Netscape
– През 1995 Netscape пускат първата версия на JavaScript в Netscape
Navigator 2.0
– През 1996 Microsoft включват поддръжка за JavaScript в Internet
Explorer 3.0
– През 1997 езикът е стандартизиран под името ECMAScript (ISO/IEC
16262)
– През 2011 е публикувана последната (засега) редакция 5.1 на
стандарта
• Различните реализации на JavaScript са диалекти на ECMAScript
– Специфики в поведението в различните браузъри

5. Въведение в JavaScript
• ВНИМАНИЕ! Шокиращ слайд!
• Динамичен и слабо типизиран език за програмиране
– Средата за изпълнение (т.нар. runtime) иззема редица функции на
компилатора, Just-in-Time компилиране (динамична транслация)
– Типовете данни са свързани със стойностите, а не с променливите
– Към обектите могат да се добавят, променят и премахват свойства
по време на изпълнение
• Прототипно-базиран език за програмиране
– В JavaScript не се създават нови типове, а се разширяват прототипи
– Обектите са реализирани като асоциативни списъци/масиви
създадени от определен обект – прототип
• Средата за изпълнение се грижи за управлението на паметта

6. Въведение в JavaScript
• ВНИМАНИЕ! Oще един шокиращ слайд!
• JavaScript има функции от първи клас
– Разглежда функциите като обекти от
първи клас
– Функциите могат да се предават като
параметри към други функции
– Функциите могат да се връщат като резултат от изпълнението
на други функции
– Функциите могат да се съхраняват в променливи и структури
• JavaScript поддържа анонимни функции
• „Класовете“ са прототипи, а „обектите“ - функции

7. Въведение в JavaScript
• СТИГА ПРИКАЗКИ!
• Среди за разработка на JavaScript
– Всеки (не)уважаван текстов редактор
• Notepad++
– Интегрирани среди за разработка
• NetBeans, Microsoft Visual Studio и др.
– Ние ще използваме Microsoft Visual Studio
• Поддържани браузери
– Internet Explorer, Mozilla Firefox, Google Chrome и др.
• Допълнителни инструменти
– Инструменти за разработчици на съответния браузер
– Самата среда за разработка

8. Въведение в JavaScript
• Как включваме JavaScript програмите (скриптовете) в
страниците си?
– Вграден в HTML в <script> таг:
<script type="text/javascript">
alert("Hello world!");
</script>
(атрибутът type не е задължителен, стойността "text/javascript"
се подразбира)

9. Въведение в JavaScript
• Как включваме JavaScript програмите (скриптовете) в
страниците си?
– Вграден в атрибут за хипервръзка на HTML елемент:
<a href="javascript:alert('Good boy!')">Click me!</a>
– Вграден в атрибут на събитие на HTML елемент:
<input type="button" value="Click me!"
onclick="javascript:alert('Good girl!')" />
(префиксът „javascript:” не е задължителен и се подразбира)

10. Въведение в JavaScript
• Как включваме JavaScript програмите (скриптовете) в
страниците си?
– Като външен файл (с разширение “.js”) описан в <script> таг:
<script type="text/javascript" src="site.js"></script>
(атрибутът type не е задължителен, стойността "text/javascript"
се подразбира)

11. Въведение в JavaScript
• JavaScript конзола (или просто конзола)
– Място в браузера, където JavaScript програмите могат да записват
разнообразна информация за диагностика на тяхната работа в
съответния прозорец
– Конзолата е удобен инструмент за следене на работата на
JavaScript програма
– Конзолата в някои браузъри дава възможност за директно
въвеждане и изпълнение на JavaScript върху текущата страница
– Забележка: В Mozilla Firefox тази функционалност се нарича Web
Console, докато Browser Console е конзола за целия браузер)

12. Въведение в JavaScript
• JavaScript конзола (или просто конзола)
– Как да отворим конзолата?
• В Internet Explorer:
– Клавиша F12  клавишната комбинация Ctrl + 2 или панела „Console”
– Клавиша F12  клавишната комбинация Ctrl + ` или бутона „Show/hide console”
• В Google Chrome:
– Клавишната комбинация Ctrl + Shift + J
– Клавиша F12  клавиша Esc или панела „Console”
• В Mozilla Firefox:
– Клавишната комбинация Ctrl + Shift + K (или Command + Shift + K на Mac)
– Клавиша F12  панела „Console” (ако е инсталиран Firebug)
• В Opera:
– Клавишната комбинация Ctrl + Shift + I  панела „Console”

13. Въведение в JavaScript
• JavaScript конзола (или просто конзола)
– Браузерът предоставя вградения обект “console” със следните
основни функции (останалите – тук http://bit.ly/1ilyszf):
• console.assert(израз, съобщение)
Изписва съобщението съобщение, ако изразът израз не е верен
• console.clear()
Изчиства конзолата
• console.debug(съобщение), console.log(съобщение)
Извежда информативното съобщението съобщение в конзолата
• console.warn(съобщение)
Извежда съобщението за предупреждение съобщение в конзолата
• console.error(съобщение)
Извежда съобщението за грешка съобщение в конзолата
• console.trace(съобщение)
Извежда “stack trace” до текущото извикване

14. Въведение в JavaScript
• Методи за следене на изпълнението на програмата,
откриване и отстраняване на грешки
– Функцията alert – дава възможност за извеждане в (доста
примитивен) диалогов прозорец на подадено съобщение
– JavaScript конзола – дава възможност за извеждане в
конзолата на различни по вид съобщения за диагностика при
определени ситуации
– Вграден в браузера debugger – дава възможност за пълен
постъпков анализ на изпълнението на приложението
– Вграден в Microsoft Visual Studio debugger – подобно на
вградения в браузера debugger интегриран с Microsoft Internet
Explorer

15. Въведение в JavaScript - упражнение
1. Създайте нов файл с наименование „intro.html” и в него поставете следния HTML
код:
2. Създайте нов файл с наименование „intro.js” и поставете в него следния
JavaScript код:
3. Във файла „intro.html” добавете връзка към файла „intro.js”
4. Добавете записване на съобщения в конзолата до всяко извикване на „alert”
<script type="text/javascript">
alert("Hello world!");
</script>
<a href="javascript:alert('Good boy!')">Click me!</a>
<input type="button" value="Click me!"
onclick="javascript:alert('Good girl!')" />
console.log('File "intro.js" was just loaded.');

16. Коментари
• Какво е „коментар“?
– Коментарът е част от програмата, която не взима предвид
по време на изпълнение
– Подпомага документирането на кода
• Едноредови коментари
// едноредовите коментари започват с „//“
// и свършват с края на реда
• Многоредови коментари
/* ето така започват многоредовите коментари
и завършват така */

17. Коментари
• Някои интегрирани среди за разработка взимат предвид
специално форматирани коментари, за да подпомогнат
разработката
– Microsoft Visual Studio има поддържа IntelliSense за JavaScript с
използване на подобни коментари
– NetBeans използва JSDoc коментари

18. Запазени думи
• Какво е „запазена дума“?
– Дума със специално значение
• Част от самия език за програмиране
• Запазената дума не може да се използва като
идентификатор
• Пълен списък със запазените думи има в глава “7.6.1.
Reserved Words” на “ECMA-262” спецификацията

19. Идентификатори
• Какво е „идентификатор“?
– Наименование на определена програмна единица в кода дадено
от програмиста
• Правила
– Уникални в дадената област и не съвпадат със запазени думи
– Започват с буква от Unicode таблицата, „_“ или „$”
• По конвенция, идентификаторите започващи с “_” указват, че дадената
програмна единица не трябва да се използва от потребителите на
съответния код
• Според ECMA-262, идентификаторите започващи с ”$” са за
автоматично генериран код
– Продължават букви от Unicode таблицата, цифри или „_”

20. Идентификатори
• Наименованията на идентификаторите се определят от
програмиста
• Свободата в избора на програмиста може да доведе до
нечетим програмен код
• Принципите на доброто кодиране и конвенциите
изискват наименованията да носят смисъла на
това, което идентифицират
• Спазването на конвенциите води до по-четим,
по-качествен и по-разбираем програмен код

21. Типове данни
• Какво е „тип данни“?
– Класификационна система на данните
• Типът данни определя
– Множеството от възможни стойности
– Възможните операциите извършвани с данните
– Смисъла на данните
– Начина на тяхното съхранение
• В JavaScript не могат да се създават нови типове данни

22. Типове данни
• Примитивни (първични) типове данни
– Стойностите им се предават по стойност
– Това са типовете данни
• Boolean – представя истинност на някакво твърдение (двете стойности
true – за „истина“ и false – за „лъжа“)
• Number – цяло или десетично число (вътрешно всички числа се
съхраняват като 64-битови десетични числа с двойна точност), NaN (не
е число), +∞ (безкрайност), -∞ (отрицателна безкрайност), +0
(положителна нула) или -0 (отрицателна нула)
• String – множество от Unicode символи

23. Типове данни
• Референтни (съставни) типове данни
– Стойностите им се предават по референция
– Това са типовете данни
• Array – представлява множество от стойности адресирани чрез
цифров или низов ключ
• Object – представлява колекция от свойства (в частност функции)
– По-подробно за съставните типове данни ще говорим с
напредване на курса

24. Типове данни
• Специални типове данни
– Типове данни носещи по-специално значение
– Това са типовете данни
• Null – указва липсваща стойност
• Undefined – указва несъществуваща/неинициализирана
променлива/свойство

25. Литерали
• Какво е „литерал“?
– Запис в изходния код представящ фиксирана стойност от
определен тип
• Задаваните с литералите стойности са от примитивен и
специален тип
• Разграничават се литерали от следните типове
– Числови
– Низови
– Булеви (true или false)
– Нулев литерал (null)
– Недефиниран литерал (undefined)

26. Литерали
• Булеви литерали
– Могат да имат две стойности – true и false съответстващи на
истинно и неистинно твърдение
• Подробна информация за булевите литерали в глава „7.8.2.
Boolean Literals” на “ECMA-262” спецификацията

27. Литерали
• Числови литерали
– Могат да бъдат положителни или отрицателни числа, нула, NaN,
+Infinity, -Infinity, +0 или -0
– Целите числа могат да бъдат представени в десетичен,
шестнадесетичен (с префикс “0x”) или осмичен (с префикс “0”)
вид
010
– Десетичните числа съдържат десетична точка и/или са представени
в научна нотация (в експоненциален вид)
0.0001
1e-4
1.0e-4
• Подробна информация за числовите литерали в глава
„7.8.3. Numeric Literals” на “ECMA-262” спецификацията

28. Литерали
• Низови литерали
– Множество от символи заградено в единични или двойни кавички
– Между двойни кавички може да има единични и обратно
"Happy am I; from care I'm free!"
'"Avast, ye lubbers!" roared the technician.'
"45"
'c'
– За използване на специални символи, могат да се използват
възможностите за екраниране на низове със символа “”:
"The image path is "C:webstuffmypagegifsgarden.gif"."
'The caption reads, "After the snow of '97. Grandma's house is covered."'
"Okay, here's a new line!nLook at me - I'm on a new line!"
• Подробна информация за низовите литерали в глава „7.8.4.
String Literals” на “ECMA-262” спецификацията

29. Литерали
• Нулев литерал
– Има само една стойност – null съответстваща на
невалидна стойност
• Недефиниран литерал
– Има само една стойност – undefined съответстваща на
недефинирана или неинициализирана променлива (или
свойство)

30. Променливи
• Какво е „променлива“?
– Идентификатор с асоциирана с него стойност от определен
тип, която може да бъде променяна по време на изпълнение
на програмата
• Характеристики
– Наименование (напр. courseName)
– Текуща стойност (напр. "Курс по уеб програмиране")
– Променливите нямат тип
• Типът се определя от текущата стойност на променливата

31. Променливи
• Обявяване/деклариране
– Синтаксис
var идентификатор;
– Пример
var courseName;

32. Променливи
• Присвояване на стойност
– Синтаксис
идентификатор = израз;
– Пример
courseName = "Курс по уеб програмиране";
• Използване на стойност
– Синтаксис
идентификатор
– Пример
console.log(courseName);

33. Променливи
• Инициализация
– Първоначално задаване на стойност
– Преди инициализация, променливите имат стойност undefined
– Синтаксис
var идентификатор = израз;
– Пример
var courseName = "Курс по уеб програмиране";

34. Променливи
• Деклариране на няколко променливи в едно съждение
– Синтаксис
var идентификатор1[, идентификатор2…];
– Пример
var courseName, lecturerName;
var studentName = "Иван Петканов Драганов", studentClass;

35. Променливи
• Освобождаване на паметта заемана от променлива
– Става с присвояване на стойност null
– По този начин garbage collector разбира, че данните адресирани
от променливата вече не се използват (от нея)
– Синтаксис
идентификатор = null;
– Пример
courseName = null;

36. Оператори, изрази и съждения
• Какво е „оператор“? Какво е „операнд“?
– Операторите са синтактични конструкции на езика предназначени
за извършване на операции върху определени програмни единици
– операнди.
• Видове оператори според броя на операндите
– Унарни – с един операнд
– Бинарни – с два операнда
– Тернарни – с три операнда

37. Оператори, изрази и съждения
• Видове оператори според вида на операциите
– Аритметични операции
p / 2 * (p / 2 - a) * (p / 2 - b) * (p / 2 - c);
– Логически операции
toBe || !toBe;
– Побитови операции
drink | 2;
you & me;
strafeLeft << 3;
– Оператори за сравнение
firstName == "Иванчо";
– Оператори за присвоявяне
lastName = "Калпазанчо";
age += 1;

38. Оператори, изрази и съждения
• Други оператори
– Слепване на низове
– Достъпване на свойство
– Достъпване на индексиран елемент
– Групиране
– Условен оператор
– Създаване и изтриване на обект/структура
– Взимане на тип данни
– Проверка за наличие на свойство
– …

39. Оператори, изрази и съждения
• Какво е „израз“?
– Поредица от оператори, литерали и променливи даващи като
резултат определена стойност
– Изразите се изчисляват на базата на определени правила за
приоритет и асоциативност
• Приоритет на операциите
– Определя реда, в който се изпълняват операциите при изчисляване
на даден израз
• Асоциативност на операциите
– Набор от правила определящ реда на изпълнение на две
операции с един и същи приоритет около един и същи операнд

40. Оператори, изрази и съждения
• Какво е „съждение“?
– Съждението в езиците за програмиране е аналог на изречението –
то дава смисъл на „казаното“ и инструктира компютъра да
извърши определена дейност
– В JavaScript съжденията се отделят със символа “;”
• Какво е „блок“?
– Блокът е поредица от едно или повече съждения
– В JavaScript блоковете се оформят със затваряне на съжденията
между символите “{“ и “}”

41. Коментари, запазени думи, … - упражнение
1. Създайте нов файл с наименование „books.html”
2. Създайте нов файл с наименование „books.js” и го реферирайте от файла
„books.html”
3. Във файла „books.js” създайте променливи съхраняващи информация за книга:
„name”, „isbn”, „authors”, „numberOfPages”, „isAvailable”
4. Инициализирайте променливите „name”, „isbn” и „authors” с подходящи стойности
съответно за наименование на книгата, ISBN и автори
5. Напишете код, който да изведе текущите стойности на всички променливи в
конзолата
6. Задайте стойности на променливите „numberOfPages” и „isAvailable” с подходящи
стойности съответно за брой страници и дали книгата е налична или не
7. Повторете кода от т.6 в края на програмата и наблюдавайте разликата

42. Условия, условни преходи и оператори
• Какво е „условие“?
– Израз връщащ булев резултат
– Булеви променливи и литерали
– Сравнения
– Логически операции

43. Условия, условни преходи и оператори
• Сравнения
– Абстрактно равенство (==) и неравенство (!=)
var isIvancho = (firstName == "Иванчо");
var isKalpazanchev = (lastName != "Калпазанчев");
Подробна информация за абстрактното сравнение в глава „11.8.5.
The Abstract Relational Comparison Algorithm” на “ECMA-262”
спецификацията
– Стриктно равенство (===) и неравенство (!==)
var isEighteen = (age === "18");
var isOtherCourse = (courseName !== "Курс по уеб програмиране");
Подробна информация за стриктното сравнение в глава „11.9.6.
The Strict Equality Comparison Algorithm” на “ECMA-262”
спецификацията

44. Условия, условни преходи и оператори
• Сравнения
– По-малко (<) и по-голямо (>)
var isShortBook = (numberOfPages < 100);
var isGenius = (iq > 140);
– По-малко или равно (<=) и по-голямо или равно (>=)
var isInfant = (age <= 1.5);
var isAdult = (age >= 18);

45. Условия, условни преходи и оператори
• Логически операции
– Отрицание (!, логическо „не“)
var isUnderage = !isAdult;
– Конюнкция (&&, логическо „и“)
var isWunderkind = isUnderage && isGenius;
– Дизюнкция (||, логическо „или“)
var isSmartAss = usesSarcasm || isGenius;
– Изключваща дизюнкция (^, изключващо „или“)
var isRealLife = isPlayingAGoodBoy ^ isNotGoingToSunnyBeach;

46. Условия, условни преходи и оператори
• Закони на Де Морган
– Двойно отрицание
!(!b1) === b1
– Отрицание на конюнкцията
!(b1 && b2) === (!b1 || !b2)
– Отрицание на дизюнкцията
!(b1 || b2) === (!b1 && !b2)
• „Мързеливо“ пресмятане на условията
(false && b1 /* && ... */) === false
(true || b1 /* || ... */) === true

47. Условия, условни преходи и оператори
• Какво е „условен преход“?
– Конструкция на езика за програмиране
– Позволява изпълнението или неизпълнението на операции в
зависимост от условие
– Необходими за реално приложими програми

48. Условия, условни преходи и оператори
• Конструкция за условен преход if
– Условие
– Съждение/блок от операции
– Ако условието е изпълнено, се изпълнява съждението или
съжденията от блока от операции при изпълнено условие
– В противен случай не се изпълнява нищо

49. Условия, условни преходи и оператори
• Конструкция за условен преход if
– Синтаксис
if (условие)
съждение-или-блок-при-изпълнено-условие
– Пример
if (a > b)
console.log(a + ' е по-голямо от ' + b);
if (a < b) {
console.log(a + ' е по-малко от ' + b);
a = b;
}

50. Условия, условни преходи и оператори
• Конструкция за условен преход if…else
– Условие
– Операция/блок от операции при изпълнено условие
– Операция/блок от операции при неизпълнено условие
– Ако условието е изпълнено, се изпълнява съждението или
съжденията от блока от операции при изпълнено условие
– В противен случай се изпълнява съждението или съжденията от
блока от операции при неизпълнено условие

51. Условия, условни преходи и оператори
• Конструкция за условен преход if…else
– Синтаксис
if (условие)
съждение-или-блок-при-изпълнено-условие
else
съждение-или-блок-при-неизпълнено-условие
– Пример
if (d >= 0) {
console.log('Квадратното уравнение има реален корен.');
} else {
console.log('Квадратното уравнение няма реални корени.');
}

52. Условия, условни преходи и оператори
• Вложени конструкции за условен преход
– Съжденията/блоковете в конструкциите за условен преход могат да
представляват/съдържат други конструкции за условен преход
– Пример
if (rowIndex === 0) {
backgroundColor = '#555555';
color = 'White';
} else {
color = 'Black';
if (rowIndex % 2 == 0)
backgroundColor = '#f1f1f1';
else
backgroundColor = '#ffffff';
}

53. Условия, условни преходи и оператори
• Вложени конструкции за условен преход
– Често срещано е навързването (chaining) на такива конструкции
във вида if…else if…else… if…else…
– Пример
if (a > b) {
console.log('a е по-голямо от b.');
} else if (a < b) {
console.log('a е по-малко от b.');
} else {
console.log('a е равно на b.');
}

54. Условия, условни преходи и оператори
• Вложени конструкции за условен преход
– Често се налага да се прави навързано сравнение на стойността
на една и съща променлива/израз със множество стойности (на
променливи и/или изрази)
– Пример
if (day == 1) {
console.log('Понеделник');
} else if (day == 2) {
console.log('Вторник');
} else if (day == 3) {
console.log('Сряда');
} else if (day == 4) {
// …
} else {
console.log('Неизвестник');
}

55. Условия, условни преходи и оператори
• Конструкция за условен преход switch-case
– В гореспоменатия частен случай на навързване, може да
използваме конструкцията за условен преход switch-case
– Синтаксис
switch (стойност-или-израз) {
case стойност-или-израз-1:
съждение-или-блок
break;
case стойност-или-израз-2:
case стойност-или-израз-3:
съждение-или-блок
break;
// ...
default:
съждение-или-блок
break;
}

56. Условия, условни преходи и оператори
• Конструкция за условен преход switch-case
– Пример
switch (day) {
case 1:
console.log('Понеделник');
break;
case 2:
console.log('Вторник');
break;
case 3:
console.log('Сряда');
break;
case 4:
// ...
default:
console.log('Неизвестник');
break;
}

57. Условия, условни преходи и оператори
• Условен тернарен оператор (?:)
– Условие
– Стойност или израз, ако условието е изпълнено
– Стойност или израз, ако условието не е изпълнено
– Синтаксис
условие
? стойност-или-израз-1
: стойност-или-израз-2
– Пример
var timeOfDay = hours > 17 ? 'evening' : 'day';

58. Условия, условни преходи… - упражнение
1. Създайте нов файл с наименование „equation.html”
2. Създайте нов файл с наименование „equation.js” и го реферирайте от файла
„equation.html”
3. Напишете скрипт, който декларира променливите „a”, „b” и „c” съответстващи на
коефициентите в квадратно уравнение и ги инициализирайте със стойност:
4. Ако уравнението е квадратно, декларирайте променлива „d”, в която изчислете
дискриминантата. В зависимост от стойността ѝ изведете броя реални корени на
уравнението в конзолата като число и текст, както и самите корени
5. Ако уравнението е линейно, проверете дали има решение. Ако няма такова,
изведете съобщение, а в противен случай изведете неговото решение
6. Опитайте се да използвате условен тернарен оператор там, където това е
възможно
10 - Math.random() * 20

59. Условия, условни преходи… - упражнение
1. Създайте нов файл с наименование „chinese_calendar.html”
2. Създайте нов файл с наименование „chinese_calendar.js” и го реферирайте от
файла „chinese_calendar.html”
3. Напишете скрипт, който декларира променливата „year” съответстваща на година и
я инициализирайте със стойност:
4. Декларирайте променлива „sign” и изчислете стойността ѝ, като от годината
„year” извадите 4 и намерите остатъка от делене на 12
5. Покажете в конзолата съобщение от вида „2003 беше годината на Козата“, „2014 е
годината на Коня“ или „2092 ще бъде годината на Плъха“ според това дали
годината е в миналото, настоящето или бъдещето, като имате предвид, че според
стойността на променливата „sign” годините са: „плъх“ (0), „вол“ (1) „тигър“
(2), „заек“ (3), „дракон“ (4), „змия“ (5), „кон“ (6), „коза“ (7), „маймуна“
(8), „петел“ (9), „куче“ (10) и „прасе“ (11)
2000 + Math.floor(Math.random() * 100)

60. Цикли
• Какво е „цикъл“?
– Конструкция на езика за програмиране
– Позволява многократното изпълнение на една и съща поредица от
операции
– Итерация – еднократно изпълнение на операциите в цикъла
– Условие за преустановяване на цикъла
– Необходими за реално приложими програми
• Видове цикли
– Цикли с предусловие
– Цикли с постусловие
– Крайни цикли
– Безкрайни цикли

61. Цикли
• Цикъл с предусловие (while)
– Условие
– Блок от операции
– Условието се проверява преди изпълнението на итерацията
– Нула или повече итерации
– Синтаксис
while (условие) {
тяло-на-цикъла;
}
– Пример
var i = 0;
while (i < 10) {
console.log(++i);
}

62. Цикли
• Цикъл с постусловие (do…while)
– Блок от операции
– Условие
– Условието се проверява след изпълнението на итерацията
– Една или повече итерации
– Синтаксис
do {
тяло-на-цикъла;
} while (условие);
– Пример
var i = 0;
do {
console.log(++i);
} while (i < 10);

63. Цикли
• For цикъл (for)
– Инициализация – операции изпълнявани преди първата итерация на
цикъла (разделени със запетая)
– Условие – условие, при което да се изпълни следваща итерация
– Актуализация – операции изпълнявани след всяка итерация на
цикъла (разделени със запетая)
– Тяло на цикъла – операции, които трябва да изпълнят
– Всяка една от частите на цикъла може да липсва
– Нула или повече итерации

64. Цикли
• For цикъл (for)
– Синтаксис
for (инициализация; условие; актуализация) {
тяло-на-цикъла
}
– Пример
for (var i = 0; i < 10; i++) {
console.log(i);
}

65. Цикли
• Прекратяване на цикъл
– Прекратяване на текущия цикъл със запазената дума break
– Прекратяване на текущата итерация със запазената дума continue
• Безкраен цикъл
– Безкраен цикъл е този, при който условието е винаги изпълнено
– В такива случаи от цикъла може да се излезе с break
– В случай, че от цикъла не се излезе, се получава «зацикляне»
– Обикновено могат да се реализират и като крайни цикли
– Често обаче правят кода по-прост, бърз и/или четим

66. Цикли
• Вложени цикли
– Блокът с операции на един цикъл може да съдържа и други цикли
– Във всяка итерация на външния цикъл се изпълнява целият вътрешен
цикъл
– Пример
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
console.log(i + ' * ' + j + ' = ' + i * j);
}
}

67. Цикли - упражнение
1. Създайте нов файл с наименование „prime_numbers.html”
2. Създайте нов файл с наименование „prime_numbers.js” и го реферирайте от файла
„prime_numbers.html”
3. Напишете скрипт, който показва в конзолата всички прости числа между 0 и 100
4. Напишете скрипт, който генерира произволно просто число между 0 и 100 и го
извежда в конзолата

68. Цикли - упражнение
1. Създайте нов файл с наименование „factorial.html”
2. Създайте нов файл с наименование „factorial.js” и го реферирайте от файла
„factorial.html”
3. Напишете скрипт, който декларира променливата „n”, инициализирайте я с
произволно число между 0 и 15, намерете и покажете в конзолата факториел от
това число

69. Функции
• Какво е „функция“?
– Функция е подпрограма, която извършва конкретна дейност и
може да бъде извиквана от друга част от програмата
– Функциите могат да приемат един или повече параметри
– Функциите могат да връщат единична стойност като резултат
– Аргумент е стойността подавана на даден параметър
– Процедури наричаме функции, които не връщат резултат

70. Функции
• Приложение на функциите
– Разбиване на скрипта на по-конкретни задачи
– Преизползване на програмния код
– Разделяне на отговорностите и по-добра поддръжка
– Подобрена разбираемост на кода
• Характеристики на функциите
– Наименование
– Параметри
– Връщана стойност
• JavaScript предоставя базова библиотека от функции
подпомагащи разработчика

71. Функции
• Деклариране на функции
– Ключовата дума „function”
– Наименование
– Списък от параметрите (в обикновени скоби)
– Тяло на функцията
– Синтаксис
function наименование([параметър-1[, параметър-2…]]) {
тяло-на-функцията;
}
– Пример
function getArithmeticMean(x1, x2) {
return (x1 + x2) / 2;
}

72. Функции
• Използване на функции
– Наименование на обект, ако функцията е свойство на друг обект
– Наименованието на функцията
– Списък от аргументи (в обикновени скоби)
• Не е задължително подаването на стойности за всички параметри
• Параметрите без подадени стойности остават със стойност undefined
– Синтаксис
[обект.]наименование([аргумент-1[, аргумент-2…]])
– Пример
console.log(getArithmeticMean(5, 3));

73. Функции
• Изпълнението на функцията започва при нейното извикване
• Изпълнението на функция приключва:
– при достигане на края ѝ
– при достигане на ключовата дума return
– при възникване на грешка
• След изпълнение на функция, изпълнението продължава от
мястото, на което е била извикана
– Как се случва това?
• Върнатата от една функция стойност може да се използва в
израз

74. Функции
• Локални променливи за една функция са тези декларирани
в нейното тяло
• В тялото на една функция не могат да бъдат декларирани
повече от една променливи с едно и също наименование
• Локалните променливи не могат да бъдат достъпвани извън
функцията
• Параметрите имат статут на локални променливи
• Аргументите могат да се разглеждат и като масив
– Във функциите автоматично се генерира променлива с
идентификатор „arguments”, която съдържа информация за
извикването, в т.ч. за всички подадени аргументи

75. Функции
• Функциите могат да връщат само една стойност
• Ако искаме да върнем повече?!
– Връщаме стойностите в променлива от сложен (композитен) тип
– Като аргументи подаваме променливи от сложен тип

76. Функции
• Често използвани функции – символни низове
– Взимане на дължината на низ – String.length
– Превръщане между малки и големи букви – String.toLowerCase()
и String.toUpperCase()
– Извличане на подниз – String.substr() и String.substring()
– Търсене на подниз в низ – String.indexOf(), String.lastIndexOf()
– Замяна на низ в низ – String.replace()
– Подкастряне на низ – String.trim()
– Слепване на низове в низ – String.concat()
– Съединяване на масив от низове в низ – Array.join()
– Разделяне на низ на масив от низове – String.split()

77. Функции
• Често използвани функции – превръщане на данни
– Превръщане на стойност в низ – Object.toString()
– Превръщане на низ в цяло число – parseInt()
– Превръщане на низ в десетично число – parseFloat()
• Често използвани функции – математически операции
– Генериране на произволно число – Math.random()
– Повдигане на степен – Math.pow()

78. Функции
• Често използвани функции – взаимодействие с потребителя
– Извеждане на съобщение – alert()
– Извеждане на потвърждение – confirm()
– Извеждане на питане – prompt()
• Често използвани функции – манипулиране на HTML
– Добавяне на HTML към страницата – document.write()

79. Функции - упражнение
1. Създайте нов файл с наименование „prime_numbers2.html”
2. Създайте нов файл с наименование „prime_numbers2.js” и го реферирайте от файла
„prime_numbers2.html”
3. Копирайте скрипта от програмата „prime_numbers.js” и изнесете проверката за
просто число като функция с наименование „getIsPrimeNumber”

80. Въпроси?

81. Благодаря!
• Валери Дачев
– valery@david.bg
– @vdachev
– https://facebook.com/vdachev
• ДАВИД академия
– acad@david.bg
– http://acad.david.bg/
– @david_academy
– https://facebook.com/DavidAcademy