• Like
Курс по уеб програмиране (2014), занятие №3 - JavaScript (част 1/2)
Upcoming SlideShare
Loading in...5
×

Курс по уеб програмиране (2014), занятие №3 - JavaScript (част 1/2)

  • 224 views
Uploaded on

Kурс по уеб програмиране (2014) …

Kурс по уеб програмиране (2014)
Занятие №3: JavaScript (част 1/2)
--
Въведение в JavaScript
Коментари
Запазени думи
Идентификатори
Типове данни
Литерали
Променливи
Оператори, изрази и съждения
Условия, условни преходи и оператори
Цикли
Функции

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
224
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 2014 Курс по уеб програмиране Занятие №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