Курс по уеб програмиране

1. Курс по уеб програмиране Занятие №3JavaScript (част 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> таг:<scripttype="text/javascript">alert("Hello world!");</script>(атрибутът type не е задължителен, стойността "text/javascript"се подразбира)

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

10. Въведение в JavaScript • Как включваме JavaScript програмите (скриптовете) в страниците си? • Като външен файл (с разширение “.js”) описан в <script> таг:<scripttype="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 Studiodebugger – подобно на вградения в браузера debugger интегриран с Microsoft Internet Explorer

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

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

17. Коментари • Някои интегрирани среди за разработка взимат предвид специално форматирани коментари, за да подпомогнат разработката • MicrosoftVisual 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.00011e-41.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:\\webstuff\\mypage\\gifs\\garden.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идентификатор; • ПримерvarcourseName;

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

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

34. Променливи • Деклариране на няколко променливив едно съждение • Синтаксисvarидентификатор1[, идентификатор2…]; • ПримерvarcourseName, lecturerName;varstudentName = "Иван Петканов Драганов", 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. Коментари, запазени думи, … - упражнение Създайте нов файл с наименование „books.html” Създайте нов файл с наименование „books.js” и го реферирайте от файла „books.html” Във файла „books.js” създайте променливи съхраняващи информация за книга:„name”, „isbn”,„authors”, „numberOfPages”, „isAvailable” Инициализирайте променливите „name”, „isbn” и „authors” с подходящи стойности съответно за наименование на книгата, ISBN и автори Напишете код, който да изведе текущите стойности на всички променливи в конзолата Задайте стойности на променливите „numberOfPages” и „isAvailable” с подходящи стойности съответно за брой страници и дали книгата е налична или не Повторете кода от т.6 в края на програмата и наблюдавайте разликата

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

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

44. Условия, условни преходи и оператори • Сравнения • По-малко (<) и по-голямо (>)varisShortBook= (numberOfPages < 100);varisGenius= (iq > 140); • По-малко или равно (<=) и по-голямо или равно (>=)varisInfant = (age <= 1.5);varisAdult = (age >= 18);

45. Условия, условни преходи и оператори • Логически операции • Отрицание (!, логическо „не“)varisUnderage= !isAdult; • Конюнкция (&&, логическо „и“)varisWunderkind = isUnderage && isGenius; • Дизюнкция (||, логическо „или“)varisSmartAss= usesSarcasm|| isGenius; • Изключваща дизюнкция (^, изключващо „или“)varisRealLife= 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 • Условие • Операция/блок от операциипри изпълнено условие • Операция/блок от операции при неизпълнено условие • Ако условието е изпълнено, се изпълнява съждението или съжденията от блока от операции при изпълнено условие • В противен случай се изпълнява съждението или съжденията от блока от операции при неизпълнено условие