SlideShare a Scribd company logo

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

Download as PPTX, PDF
DAVID Academy, profile picture
DAVID Academy

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

Education
1 of 81
Downloaded 21 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
2014 Курс по уеб програмиране Занятие №3 JavaScript (част 1)
Съдържание • Въведение в JavaScript • Коментари • Запазени думи • Идентификатори • Типове данни • Литерали • Променливи • Оператори, изрази и съждения • Условия, условни преходи и оператори • Цикли • Функции
Въведение в JavaScript • Обектно-ориентиран, прототипен, динамичен, функционален език за програмиране • Място на JavaScript в World Wide Web – HTML дава структура и съдържание на страниците – CSS дава тяхното оформление, външния вид на страниците – JavaScript дава поведението на страниците, взаимодействието с потребителя, с функциите на браузера, с мрежата и т.н. • Работи предимно в браузери, но е достъпен и на други платформи – PDF документи, специфични браузъри, настолни „джаджи” и др. – Сървърни приложения (Node.js)
Въведение в 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 – Специфики в поведението в различните браузъри
Въведение в JavaScript • ВНИМАНИЕ! Шокиращ слайд! • Динамичен и слабо типизиран език за програмиране – Средата за изпълнение (т.нар. runtime) иззема редица функции на компилатора, Just-in-Time компилиране (динамична транслация) – Типовете данни са свързани със стойностите, а не с променливите – Към обектите могат да се добавят, променят и премахват свойства по време на изпълнение • Прототипно-базиран език за програмиране – В JavaScript не се създават нови типове, а се разширяват прототипи – Обектите са реализирани като асоциативни списъци/масиви създадени от определен обект – прототип • Средата за изпълнение се грижи за управлението на паметта
Въведение в JavaScript • ВНИМАНИЕ! Oще един шокиращ слайд! • JavaScript има функции от първи клас – Разглежда функциите като обекти от първи клас – Функциите могат да се предават като параметри към други функции – Функциите могат да се връщат като резултат от изпълнението на други функции – Функциите могат да се съхраняват в променливи и структури • JavaScript поддържа анонимни функции • „Класовете“ са прототипи, а „обектите“ - функции
Въведение в JavaScript • СТИГА ПРИКАЗКИ! • Среди за разработка на JavaScript – Всеки (не)уважаван текстов редактор • Notepad++ – Интегрирани среди за разработка • NetBeans, Microsoft Visual Studio и др. – Ние ще използваме Microsoft Visual Studio • Поддържани браузери – Internet Explorer, Mozilla Firefox, Google Chrome и др. • Допълнителни инструменти – Инструменти за разработчици на съответния браузер – Самата среда за разработка
Въведение в JavaScript • Как включваме JavaScript програмите (скриптовете) в страниците си? – Вграден в HTML в <script> таг: <script type="text/javascript"> alert("Hello world!"); </script> (атрибутът type не е задължителен, стойността "text/javascript" се подразбира)
Въведение в 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:” не е задължителен и се подразбира)
Въведение в JavaScript • Как включваме JavaScript програмите (скриптовете) в страниците си? – Като външен файл (с разширение “.js”) описан в <script> таг: <script type="text/javascript" src="site.js"></script> (атрибутът type не е задължителен, стойността "text/javascript" се подразбира)
Въведение в JavaScript • JavaScript конзола (или просто конзола) – Място в браузера, където JavaScript програмите могат да записват разнообразна информация за диагностика на тяхната работа в съответния прозорец – Конзолата е удобен инструмент за следене на работата на JavaScript програма – Конзолата в някои браузъри дава възможност за директно въвеждане и изпълнение на JavaScript върху текущата страница – Забележка: В Mozilla Firefox тази функционалност се нарича Web Console, докато Browser Console е конзола за целия браузер)
Въведение в 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”
Въведение в JavaScript • JavaScript конзола (или просто конзола) – Браузерът предоставя вградения обект “console” със следните основни функции (останалите – тук http://bit.ly/1ilyszf): • console.assert(израз, съобщение) Изписва съобщението съобщение, ако изразът израз не е верен • console.clear() Изчиства конзолата • console.debug(съобщение), console.log(съобщение) Извежда информативното съобщението съобщение в конзолата • console.warn(съобщение) Извежда съобщението за предупреждение съобщение в конзолата • console.error(съобщение) Извежда съобщението за грешка съобщение в конзолата • console.trace(съобщение) Извежда “stack trace” до текущото извикване
Въведение в JavaScript • Методи за следене на изпълнението на програмата, откриване и отстраняване на грешки – Функцията alert – дава възможност за извеждане в (доста примитивен) диалогов прозорец на подадено съобщение – JavaScript конзола – дава възможност за извеждане в конзолата на различни по вид съобщения за диагностика при определени ситуации – Вграден в браузера debugger – дава възможност за пълен постъпков анализ на изпълнението на приложението – Вграден в Microsoft Visual Studio debugger – подобно на вградения в браузера debugger интегриран с Microsoft Internet Explorer
Въведение в 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.');
Коментари • Какво е „коментар“? – Коментарът е част от програмата, която не взима предвид по време на изпълнение – Подпомага документирането на кода • Едноредови коментари // едноредовите коментари започват с „//“ // и свършват с края на реда • Многоредови коментари /* ето така започват многоредовите коментари и завършват така */
Коментари • Някои интегрирани среди за разработка взимат предвид специално форматирани коментари, за да подпомогнат разработката – Microsoft Visual Studio има поддържа IntelliSense за JavaScript с използване на подобни коментари – NetBeans използва JSDoc коментари
Запазени думи • Какво е „запазена дума“? – Дума със специално значение • Част от самия език за програмиране • Запазената дума не може да се използва като идентификатор • Пълен списък със запазените думи има в глава “7.6.1. Reserved Words” на “ECMA-262” спецификацията
Идентификатори • Какво е „идентификатор“? – Наименование на определена програмна единица в кода дадено от програмиста • Правила – Уникални в дадената област и не съвпадат със запазени думи – Започват с буква от Unicode таблицата, „_“ или „$” • По конвенция, идентификаторите започващи с “_” указват, че дадената програмна единица не трябва да се използва от потребителите на съответния код • Според ECMA-262, идентификаторите започващи с ”$” са за автоматично генериран код – Продължават букви от Unicode таблицата, цифри или „_”
Идентификатори • Наименованията на идентификаторите се определят от програмиста • Свободата в избора на програмиста може да доведе до нечетим програмен код • Принципите на доброто кодиране и конвенциите изискват наименованията да носят смисъла на това, което идентифицират • Спазването на конвенциите води до по-четим, по-качествен и по-разбираем програмен код
Типове данни • Какво е „тип данни“? – Класификационна система на данните • Типът данни определя – Множеството от възможни стойности – Възможните операциите извършвани с данните – Смисъла на данните – Начина на тяхното съхранение • В JavaScript не могат да се създават нови типове данни
Типове данни • Примитивни (първични) типове данни – Стойностите им се предават по стойност – Това са типовете данни • Boolean – представя истинност на някакво твърдение (двете стойности true – за „истина“ и false – за „лъжа“) • Number – цяло или десетично число (вътрешно всички числа се съхраняват като 64-битови десетични числа с двойна точност), NaN (не е число), +∞ (безкрайност), -∞ (отрицателна безкрайност), +0 (положителна нула) или -0 (отрицателна нула) • String – множество от Unicode символи
Типове данни • Референтни (съставни) типове данни – Стойностите им се предават по референция – Това са типовете данни • Array – представлява множество от стойности адресирани чрез цифров или низов ключ • Object – представлява колекция от свойства (в частност функции) – По-подробно за съставните типове данни ще говорим с напредване на курса
Типове данни • Специални типове данни – Типове данни носещи по-специално значение – Това са типовете данни • Null – указва липсваща стойност • Undefined – указва несъществуваща/неинициализирана променлива/свойство
Литерали • Какво е „литерал“? – Запис в изходния код представящ фиксирана стойност от определен тип • Задаваните с литералите стойности са от примитивен и специален тип • Разграничават се литерали от следните типове – Числови – Низови – Булеви (true или false) – Нулев литерал (null) – Недефиниран литерал (undefined)
Литерали • Булеви литерали – Могат да имат две стойности – true и false съответстващи на истинно и неистинно твърдение • Подробна информация за булевите литерали в глава „7.8.2. Boolean Literals” на “ECMA-262” спецификацията
Литерали • Числови литерали – Могат да бъдат положителни или отрицателни числа, нула, NaN, +Infinity, -Infinity, +0 или -0 – Целите числа могат да бъдат представени в десетичен, шестнадесетичен (с префикс “0x”) или осмичен (с префикс “0”) вид 010 – Десетичните числа съдържат десетична точка и/или са представени в научна нотация (в експоненциален вид) 0.0001 1e-4 1.0e-4 • Подробна информация за числовите литерали в глава „7.8.3. Numeric Literals” на “ECMA-262” спецификацията
Литерали • Низови литерали – Множество от символи заградено в единични или двойни кавички – Между двойни кавички може да има единични и обратно "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” спецификацията
Литерали • Нулев литерал – Има само една стойност – null съответстваща на невалидна стойност • Недефиниран литерал – Има само една стойност – undefined съответстваща на недефинирана или неинициализирана променлива (или свойство)
Променливи • Какво е „променлива“? – Идентификатор с асоциирана с него стойност от определен тип, която може да бъде променяна по време на изпълнение на програмата • Характеристики – Наименование (напр. courseName) – Текуща стойност (напр. "Курс по уеб програмиране") – Променливите нямат тип • Типът се определя от текущата стойност на променливата
Променливи • Обявяване/деклариране – Синтаксис var идентификатор; – Пример var courseName;
Променливи • Присвояване на стойност – Синтаксис идентификатор = израз; – Пример courseName = "Курс по уеб програмиране"; • Използване на стойност – Синтаксис идентификатор – Пример console.log(courseName);
Променливи • Инициализация – Първоначално задаване на стойност – Преди инициализация, променливите имат стойност undefined – Синтаксис var идентификатор = израз; – Пример var courseName = "Курс по уеб програмиране";
Променливи • Деклариране на няколко променливи в едно съждение – Синтаксис var идентификатор1[, идентификатор2…]; – Пример var courseName, lecturerName; var studentName = "Иван Петканов Драганов", studentClass;
Променливи • Освобождаване на паметта заемана от променлива – Става с присвояване на стойност null – По този начин garbage collector разбира, че данните адресирани от променливата вече не се използват (от нея) – Синтаксис идентификатор = null; – Пример courseName = null;
Оператори, изрази и съждения • Какво е „оператор“? Какво е „операнд“? – Операторите са синтактични конструкции на езика предназначени за извършване на операции върху определени програмни единици – операнди. • Видове оператори според броя на операндите – Унарни – с един операнд – Бинарни – с два операнда – Тернарни – с три операнда
Оператори, изрази и съждения • Видове оператори според вида на операциите – Аритметични операции p / 2 * (p / 2 - a) * (p / 2 - b) * (p / 2 - c); – Логически операции toBe || !toBe; – Побитови операции drink | 2; you & me; strafeLeft << 3; – Оператори за сравнение firstName == "Иванчо"; – Оператори за присвоявяне lastName = "Калпазанчо"; age += 1;
Оператори, изрази и съждения • Други оператори – Слепване на низове – Достъпване на свойство – Достъпване на индексиран елемент – Групиране – Условен оператор – Създаване и изтриване на обект/структура – Взимане на тип данни – Проверка за наличие на свойство – …
Оператори, изрази и съждения • Какво е „израз“? – Поредица от оператори, литерали и променливи даващи като резултат определена стойност – Изразите се изчисляват на базата на определени правила за приоритет и асоциативност • Приоритет на операциите – Определя реда, в който се изпълняват операциите при изчисляване на даден израз • Асоциативност на операциите – Набор от правила определящ реда на изпълнение на две операции с един и същи приоритет около един и същи операнд
Оператори, изрази и съждения • Какво е „съждение“? – Съждението в езиците за програмиране е аналог на изречението – то дава смисъл на „казаното“ и инструктира компютъра да извърши определена дейност – В JavaScript съжденията се отделят със символа “;” • Какво е „блок“? – Блокът е поредица от едно или повече съждения – В JavaScript блоковете се оформят със затваряне на съжденията между символите “{“ и “}”
Коментари, запазени думи, … - упражнение 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 в края на програмата и наблюдавайте разликата
Условия, условни преходи и оператори • Какво е „условие“? – Израз връщащ булев резултат – Булеви променливи и литерали – Сравнения – Логически операции
Условия, условни преходи и оператори • Сравнения – Абстрактно равенство (==) и неравенство (!=) 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” спецификацията
Условия, условни преходи и оператори • Сравнения – По-малко (<) и по-голямо (>) var isShortBook = (numberOfPages < 100); var isGenius = (iq > 140); – По-малко или равно (<=) и по-голямо или равно (>=) var isInfant = (age <= 1.5); var isAdult = (age >= 18);
Условия, условни преходи и оператори • Логически операции – Отрицание (!, логическо „не“) var isUnderage = !isAdult; – Конюнкция (&&, логическо „и“) var isWunderkind = isUnderage && isGenius; – Дизюнкция (||, логическо „или“) var isSmartAss = usesSarcasm || isGenius; – Изключваща дизюнкция (^, изключващо „или“) var isRealLife = isPlayingAGoodBoy ^ isNotGoingToSunnyBeach;
Условия, условни преходи и оператори • Закони на Де Морган – Двойно отрицание !(!b1) === b1 – Отрицание на конюнкцията !(b1 && b2) === (!b1 || !b2) – Отрицание на дизюнкцията !(b1 || b2) === (!b1 && !b2) • „Мързеливо“ пресмятане на условията (false && b1 /* && ... */) === false (true || b1 /* || ... */) === true
Условия, условни преходи и оператори • Какво е „условен преход“? – Конструкция на езика за програмиране – Позволява изпълнението или неизпълнението на операции в зависимост от условие – Необходими за реално приложими програми
Условия, условни преходи и оператори • Конструкция за условен преход if – Условие – Съждение/блок от операции – Ако условието е изпълнено, се изпълнява съждението или съжденията от блока от операции при изпълнено условие – В противен случай не се изпълнява нищо
Условия, условни преходи и оператори • Конструкция за условен преход if – Синтаксис if (условие) съждение-или-блок-при-изпълнено-условие – Пример if (a > b) console.log(a + ' е по-голямо от ' + b); if (a < b) { console.log(a + ' е по-малко от ' + b); a = b; }
Условия, условни преходи и оператори • Конструкция за условен преход if…else – Условие – Операция/блок от операции при изпълнено условие – Операция/блок от операции при неизпълнено условие – Ако условието е изпълнено, се изпълнява съждението или съжденията от блока от операции при изпълнено условие – В противен случай се изпълнява съждението или съжденията от блока от операции при неизпълнено условие
Условия, условни преходи и оператори • Конструкция за условен преход if…else – Синтаксис if (условие) съждение-или-блок-при-изпълнено-условие else съждение-или-блок-при-неизпълнено-условие – Пример if (d >= 0) { console.log('Квадратното уравнение има реален корен.'); } else { console.log('Квадратното уравнение няма реални корени.'); }
Условия, условни преходи и оператори • Вложени конструкции за условен преход – Съжденията/блоковете в конструкциите за условен преход могат да представляват/съдържат други конструкции за условен преход – Пример if (rowIndex === 0) { backgroundColor = '#555555'; color = 'White'; } else { color = 'Black'; if (rowIndex % 2 == 0) backgroundColor = '#f1f1f1'; else backgroundColor = '#ffffff'; }
Условия, условни преходи и оператори • Вложени конструкции за условен преход – Често срещано е навързването (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.'); }
Условия, условни преходи и оператори • Вложени конструкции за условен преход – Често се налага да се прави навързано сравнение на стойността на една и съща променлива/израз със множество стойности (на променливи и/или изрази) – Пример if (day == 1) { console.log('Понеделник'); } else if (day == 2) { console.log('Вторник'); } else if (day == 3) { console.log('Сряда'); } else if (day == 4) { // … } else { console.log('Неизвестник'); }
Условия, условни преходи и оператори • Конструкция за условен преход switch-case – В гореспоменатия частен случай на навързване, може да използваме конструкцията за условен преход switch-case – Синтаксис switch (стойност-или-израз) { case стойност-или-израз-1: съждение-или-блок break; case стойност-или-израз-2: case стойност-или-израз-3: съждение-или-блок break; // ... default: съждение-или-блок break; }
Условия, условни преходи и оператори • Конструкция за условен преход 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; }
Условия, условни преходи и оператори • Условен тернарен оператор (?:) – Условие – Стойност или израз, ако условието е изпълнено – Стойност или израз, ако условието не е изпълнено – Синтаксис условие ? стойност-или-израз-1 : стойност-или-израз-2 – Пример var timeOfDay = hours > 17 ? 'evening' : 'day';
Условия, условни преходи… - упражнение 1. Създайте нов файл с наименование „equation.html” 2. Създайте нов файл с наименование „equation.js” и го реферирайте от файла „equation.html” 3. Напишете скрипт, който декларира променливите „a”, „b” и „c” съответстващи на коефициентите в квадратно уравнение и ги инициализирайте със стойност: 4. Ако уравнението е квадратно, декларирайте променлива „d”, в която изчислете дискриминантата. В зависимост от стойността ѝ изведете броя реални корени на уравнението в конзолата като число и текст, както и самите корени 5. Ако уравнението е линейно, проверете дали има решение. Ако няма такова, изведете съобщение, а в противен случай изведете неговото решение 6. Опитайте се да използвате условен тернарен оператор там, където това е възможно 10 - Math.random() * 20
Условия, условни преходи… - упражнение 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)
Цикли • Какво е „цикъл“? – Конструкция на езика за програмиране – Позволява многократното изпълнение на една и съща поредица от операции – Итерация – еднократно изпълнение на операциите в цикъла – Условие за преустановяване на цикъла – Необходими за реално приложими програми • Видове цикли – Цикли с предусловие – Цикли с постусловие – Крайни цикли – Безкрайни цикли
Цикли • Цикъл с предусловие (while) – Условие – Блок от операции – Условието се проверява преди изпълнението на итерацията – Нула или повече итерации – Синтаксис while (условие) { тяло-на-цикъла; } – Пример var i = 0; while (i < 10) { console.log(++i); }
Цикли • Цикъл с постусловие (do…while) – Блок от операции – Условие – Условието се проверява след изпълнението на итерацията – Една или повече итерации – Синтаксис do { тяло-на-цикъла; } while (условие); – Пример var i = 0; do { console.log(++i); } while (i < 10);
Цикли • For цикъл (for) – Инициализация – операции изпълнявани преди първата итерация на цикъла (разделени със запетая) – Условие – условие, при което да се изпълни следваща итерация – Актуализация – операции изпълнявани след всяка итерация на цикъла (разделени със запетая) – Тяло на цикъла – операции, които трябва да изпълнят – Всяка една от частите на цикъла може да липсва – Нула или повече итерации
Цикли • For цикъл (for) – Синтаксис for (инициализация; условие; актуализация) { тяло-на-цикъла } – Пример for (var i = 0; i < 10; i++) { console.log(i); }
Цикли • Прекратяване на цикъл – Прекратяване на текущия цикъл със запазената дума break – Прекратяване на текущата итерация със запазената дума continue • Безкраен цикъл – Безкраен цикъл е този, при който условието е винаги изпълнено – В такива случаи от цикъла може да се излезе с break – В случай, че от цикъла не се излезе, се получава «зацикляне» – Обикновено могат да се реализират и като крайни цикли – Често обаче правят кода по-прост, бърз и/или четим
Цикли • Вложени цикли – Блокът с операции на един цикъл може да съдържа и други цикли – Във всяка итерация на външния цикъл се изпълнява целият вътрешен цикъл – Пример for (var i = 0; i < 10; i++) { for (var j = 0; j < 10; j++) { console.log(i + ' * ' + j + ' = ' + i * j); } }
Цикли - упражнение 1. Създайте нов файл с наименование „prime_numbers.html” 2. Създайте нов файл с наименование „prime_numbers.js” и го реферирайте от файла „prime_numbers.html” 3. Напишете скрипт, който показва в конзолата всички прости числа между 0 и 100 4. Напишете скрипт, който генерира произволно просто число между 0 и 100 и го извежда в конзолата
Цикли - упражнение 1. Създайте нов файл с наименование „factorial.html” 2. Създайте нов файл с наименование „factorial.js” и го реферирайте от файла „factorial.html” 3. Напишете скрипт, който декларира променливата „n”, инициализирайте я с произволно число между 0 и 15, намерете и покажете в конзолата факториел от това число
Функции • Какво е „функция“? – Функция е подпрограма, която извършва конкретна дейност и може да бъде извиквана от друга част от програмата – Функциите могат да приемат един или повече параметри – Функциите могат да връщат единична стойност като резултат – Аргумент е стойността подавана на даден параметър – Процедури наричаме функции, които не връщат резултат
Функции • Приложение на функциите – Разбиване на скрипта на по-конкретни задачи – Преизползване на програмния код – Разделяне на отговорностите и по-добра поддръжка – Подобрена разбираемост на кода • Характеристики на функциите – Наименование – Параметри – Връщана стойност • JavaScript предоставя базова библиотека от функции подпомагащи разработчика
Функции • Деклариране на функции – Ключовата дума „function” – Наименование – Списък от параметрите (в обикновени скоби) – Тяло на функцията – Синтаксис function наименование([параметър-1[, параметър-2…]]) { тяло-на-функцията; } – Пример function getArithmeticMean(x1, x2) { return (x1 + x2) / 2; }
Функции • Използване на функции – Наименование на обект, ако функцията е свойство на друг обект – Наименованието на функцията – Списък от аргументи (в обикновени скоби) • Не е задължително подаването на стойности за всички параметри • Параметрите без подадени стойности остават със стойност undefined – Синтаксис [обект.]наименование([аргумент-1[, аргумент-2…]]) – Пример console.log(getArithmeticMean(5, 3));
Функции • Изпълнението на функцията започва при нейното извикване • Изпълнението на функция приключва: – при достигане на края ѝ – при достигане на ключовата дума return – при възникване на грешка • След изпълнение на функция, изпълнението продължава от мястото, на което е била извикана – Как се случва това? • Върнатата от една функция стойност може да се използва в израз
Функции • Локални променливи за една функция са тези декларирани в нейното тяло • В тялото на една функция не могат да бъдат декларирани повече от една променливи с едно и също наименование • Локалните променливи не могат да бъдат достъпвани извън функцията • Параметрите имат статут на локални променливи • Аргументите могат да се разглеждат и като масив – Във функциите автоматично се генерира променлива с идентификатор „arguments”, която съдържа информация за извикването, в т.ч. за всички подадени аргументи
Функции • Функциите могат да връщат само една стойност • Ако искаме да върнем повече?! – Връщаме стойностите в променлива от сложен (композитен) тип – Като аргументи подаваме променливи от сложен тип
Функции • Често използвани функции – символни низове – Взимане на дължината на низ – String.length – Превръщане между малки и големи букви – String.toLowerCase() и String.toUpperCase() – Извличане на подниз – String.substr() и String.substring() – Търсене на подниз в низ – String.indexOf(), String.lastIndexOf() – Замяна на низ в низ – String.replace() – Подкастряне на низ – String.trim() – Слепване на низове в низ – String.concat() – Съединяване на масив от низове в низ – Array.join() – Разделяне на низ на масив от низове – String.split()
Функции • Често използвани функции – превръщане на данни – Превръщане на стойност в низ – Object.toString() – Превръщане на низ в цяло число – parseInt() – Превръщане на низ в десетично число – parseFloat() • Често използвани функции – математически операции – Генериране на произволно число – Math.random() – Повдигане на степен – Math.pow()
Функции • Често използвани функции – взаимодействие с потребителя – Извеждане на съобщение – alert() – Извеждане на потвърждение – confirm() – Извеждане на питане – prompt() • Често използвани функции – манипулиране на HTML – Добавяне на HTML към страницата – document.write()
Функции - упражнение 1. Създайте нов файл с наименование „prime_numbers2.html” 2. Създайте нов файл с наименование „prime_numbers2.js” и го реферирайте от файла „prime_numbers2.html” 3. Копирайте скрипта от програмата „prime_numbers.js” и изнесете проверката за просто число като функция с наименование „getIsPrimeNumber”
Въпроси?
Благодаря! • Валери Дачев – valery@david.bg – @vdachev – https://facebook.com/vdachev • ДАВИД академия – acad@david.bg – http://acad.david.bg/ – @david_academy – https://facebook.com/DavidAcademy

More Related Content

PPTX
Курс по уеб програмиране (2015), занятие №1 - HTML
DAVID Academy
 
PPTX
Курс по уеб програмиране (2015), занятие №2 - CSS
DAVID Academy
 
PPTX
Курс по уеб програмиране (2015), занятие №3 - JavaScript (част 1/2)
DAVID Academy
 
PPTX
Курс по информационни технологии (2013) - 1. Desktop приложения. Windows Form...
DAVID Academy
 
PPTX
Училищен курс по програмиране на C# (2013/2014), занятие №12
DAVID Academy
 
PPTX
Училищен курс по програмиране на C# (2013/2014), занятие №7
DAVID Academy
 
PPTX
Училищен курс по програмиране на C# (2013/2014), занятие №13
DAVID Academy
 
PPTX
Курс по уеб програмиране (2014), занятие №1 - HTML
DAVID Academy
 
Курс по уеб програмиране (2015), занятие №1 - HTML
DAVID Academy
 
Курс по уеб програмиране (2015), занятие №2 - CSS
DAVID Academy
 
Курс по уеб програмиране (2015), занятие №3 - JavaScript (част 1/2)
DAVID Academy
 
Курс по информационни технологии (2013) - 1. Desktop приложения. Windows Form...
DAVID Academy
 
Училищен курс по програмиране на C# (2013/2014), занятие №12
DAVID Academy
 
Училищен курс по програмиране на C# (2013/2014), занятие №7
DAVID Academy
 
Училищен курс по програмиране на C# (2013/2014), занятие №13
DAVID Academy
 
Курс по уеб програмиране (2014), занятие №1 - HTML
DAVID Academy
 

What's hot (14)

PPTX
Училищен курс по програмиране на C# (2013/2014), занятие №8
DAVID Academy
 
PPTX
Училищен курс по програмиране на C# (2013/2014), занятие №1
DAVID Academy
 
PPTX
Курс по програмиране на C# 2013 - 1. Въведение в компютърното програмиране и C#
DAVID Academy
 
PPTX
Училищен курс по програмиране на C# (2013/2014), занятие №10
DAVID Academy
 
PPTX
Училищен курс по програмиране на C# (2013/2014), занятие №11
DAVID Academy
 
PPTX
Курс по уеб програмиране (2014), занятие №2 - CSS
DAVID Academy
 
PPTX
Курс по програмиране на C# 2013 - 2. Конзолен вход и изход. Условни преходи. ...
DAVID Academy
 
PPTX
Училищен курс по програмиране на C# (2013/2014), занятие №14
DAVID Academy
 
PPTX
Училищен курс по програмиране на C# (2013/2014), занятие №2
DAVID Academy
 
PPTX
Курс по уеб програмиране (2015), занятие №4 - JavaScript (част 2/2)
DAVID Academy
 
PPTX
Училищен курс по програмиране на C# (2013/2014), занятие №9
DAVID Academy
 
PPTX
Училищен курс по програмиране на C# (2013/2014), занятие №3
DAVID Academy
 
PPT
Nakov - RDBMS Systems - Intro
Svetlin Nakov
 
PPTX
Училищен курс по програмиране на C# (2013/2014), занятие №4
DAVID Academy
 
Училищен курс по програмиране на C# (2013/2014), занятие №8
DAVID Academy
 
Училищен курс по програмиране на C# (2013/2014), занятие №1
DAVID Academy
 
Курс по програмиране на C# 2013 - 1. Въведение в компютърното програмиране и C#
DAVID Academy
 
Училищен курс по програмиране на C# (2013/2014), занятие №10
DAVID Academy
 
Училищен курс по програмиране на C# (2013/2014), занятие №11
DAVID Academy
 
Курс по уеб програмиране (2014), занятие №2 - CSS
DAVID Academy
 
Курс по програмиране на C# 2013 - 2. Конзолен вход и изход. Условни преходи. ...
DAVID Academy
 
Училищен курс по програмиране на C# (2013/2014), занятие №14
DAVID Academy
 
Училищен курс по програмиране на C# (2013/2014), занятие №2
DAVID Academy
 
Курс по уеб програмиране (2015), занятие №4 - JavaScript (част 2/2)
DAVID Academy
 
Училищен курс по програмиране на C# (2013/2014), занятие №9
DAVID Academy
 
Училищен курс по програмиране на C# (2013/2014), занятие №3
DAVID Academy
 
Nakov - RDBMS Systems - Intro
Svetlin Nakov
 
Училищен курс по програмиране на C# (2013/2014), занятие №4
DAVID Academy
 
Ad

Viewers also liked (6)

PPT
Събиране и изваждане на трицифрени числа - 3 клас
Дарина Железова
 
PPT
годишен преговор по математика 3 клас
Stela Doncheva
 
PPT
Умножение на числата до 1000 с едноцифрено число- упражнение
Златка Вълчинова
 
PPTX
забавна математика
Теа Стоянова
 
PDF
Забавни задачи по математика
Павлина Иванова
 
PPSX
видове триъгълници според страните, математика 2 клас
Gesho13
 
Събиране и изваждане на трицифрени числа - 3 клас
Дарина Железова
 
годишен преговор по математика 3 клас
Stela Doncheva
 
Умножение на числата до 1000 с едноцифрено число- упражнение
Златка Вълчинова
 
забавна математика
Теа Стоянова
 
Забавни задачи по математика
Павлина Иванова
 
видове триъгълници според страните, математика 2 клас
Gesho13
 
Ad

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

PPT
Nakov High Quality Code
Svetlin Nakov
 
PPT
High Quality Code Introduction
Svetlin Nakov
 
ODP
Mozllla Labs presentation
Bogomil Shopov
 
PPT
Svetlin Nakov - .NET Framework Overview
Svetlin Nakov
 
PPTX
Курс по програмиране за напреднали (2012) - 1. Обектно-ориентирано програмира...
DAVID Academy
 
DOCX
Programirane i organizaciq
Martin Aleksandrov
 
DOCX
Защита при създаването на PHP-приложения
Nikolay Milkov
 
PPTX
JavaScript навсякъде
Stoyan Stefanov
 
PPTX
Какво ново в Joomla?- Joomla! Day 2013 Bulgaria
Mihail Semerdzhiev
 
PDF
Тестове на уеб приложения
Kalin Vasilev
 
PPT
Nakov - .NET Framework Overview + Security
Svetlin Nakov
 
PPTX
Python choreographe NAOqi Framework
Atelier for robotics
 
PPTX
Acceptance testing with Selenium 2 and PHPUnit
Bisser Todorov
 
PDF
11086 browser security-presentation
Atanas Sqnkov
 
PPTX
[Dev.bg] CI from scratch with Jenkins
Borislav Traykov
 
PPT
Module1
lorda1990
 
PPTX
Php security
Nikolai
 
PDF
Drupal course-plovdiv-week1-day-1
Kalin Chernev
 
PPT
e-School Beta
Георги Банков
 
ODP
AJAX и създаване на богати потребителски интерфейси в браузър
svilen.ivanov
 
Nakov High Quality Code
Svetlin Nakov
 
High Quality Code Introduction
Svetlin Nakov
 
Mozllla Labs presentation
Bogomil Shopov
 
Svetlin Nakov - .NET Framework Overview
Svetlin Nakov
 
Курс по програмиране за напреднали (2012) - 1. Обектно-ориентирано програмира...
DAVID Academy
 
Programirane i organizaciq
Martin Aleksandrov
 
Защита при създаването на PHP-приложения
Nikolay Milkov
 
JavaScript навсякъде
Stoyan Stefanov
 
Какво ново в Joomla?- Joomla! Day 2013 Bulgaria
Mihail Semerdzhiev
 
Тестове на уеб приложения
Kalin Vasilev
 
Nakov - .NET Framework Overview + Security
Svetlin Nakov
 
Python choreographe NAOqi Framework
Atelier for robotics
 
Acceptance testing with Selenium 2 and PHPUnit
Bisser Todorov
 
11086 browser security-presentation
Atanas Sqnkov
 
[Dev.bg] CI from scratch with Jenkins
Borislav Traykov
 
Module1
lorda1990
 
Php security
Nikolai
 
Drupal course-plovdiv-week1-day-1
Kalin Chernev
 
e-School Beta
Георги Банков
 
AJAX и създаване на богати потребителски интерфейси в браузър
svilen.ivanov
 

More from DAVID Academy (13)

PPTX
Курс по уеб програмиране (2014), занятие №4 - JavaScript (част 2/2)
DAVID Academy
 
DOCX
Училищен курс по програмиране на C# (2013/2014) - Помагало
DAVID Academy
 
DOCX
Училищен курс по програмиране на C# (2013/2014) - Упражнения
DAVID Academy
 
PPTX
Курс по информационни технологии (2013) - 5. HTTP & Web Services
DAVID Academy
 
PPTX
Курс по информационни технологии (2013) - 4. XML, XSD, XML в .NET Framework
DAVID Academy
 
PPTX
Курс по информационни технологии (2013) - 3. ADO.NET, LINQ to SQL
DAVID Academy
 
PPTX
Курс по информационни технологии (2013) - 2. Бази данни. Системи за управлени...
DAVID Academy
 
PPTX
Курс по информационни технологии (2013) - 0. Представяне
DAVID Academy
 
DOCX
Курс по информационни технологии (2013) - Помагало
DAVID Academy
 
DOCX
Курс по програмиране на C# (2013) - Упражнения
DAVID Academy
 
PPTX
Курс по програмиране на C# 2013 - 9. Делегати. Събития. Ламбда функции
DAVID Academy
 
PPTX
Курс по програмиране на C# 2013 - 8. Полиморфизъм. Абстракция. Шаблони. Вград...
DAVID Academy
 
PPTX
Курс по програмиране на C# 2013 - 7. Свойства. Индексатори. Наследяване. Изкл...
DAVID Academy
 
Курс по уеб програмиране (2014), занятие №4 - JavaScript (част 2/2)
DAVID Academy
 
Училищен курс по програмиране на C# (2013/2014) - Помагало
DAVID Academy
 
Училищен курс по програмиране на C# (2013/2014) - Упражнения
DAVID Academy
 
Курс по информационни технологии (2013) - 5. HTTP & Web Services
DAVID Academy
 
Курс по информационни технологии (2013) - 4. XML, XSD, XML в .NET Framework
DAVID Academy
 
Курс по информационни технологии (2013) - 3. ADO.NET, LINQ to SQL
DAVID Academy
 
Курс по информационни технологии (2013) - 2. Бази данни. Системи за управлени...
DAVID Academy
 
Курс по информационни технологии (2013) - 0. Представяне
DAVID Academy
 
Курс по информационни технологии (2013) - Помагало
DAVID Academy
 
Курс по програмиране на C# (2013) - Упражнения
DAVID Academy
 
Курс по програмиране на C# 2013 - 9. Делегати. Събития. Ламбда функции
DAVID Academy
 
Курс по програмиране на C# 2013 - 8. Полиморфизъм. Абстракция. Шаблони. Вград...
DAVID Academy
 
Курс по програмиране на C# 2013 - 7. Свойства. Индексатори. Наследяване. Изкл...
DAVID Academy
 

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

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