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

Курс по уеб програмиранеЗанятие №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" се подразбира)

страниците си?– Вграден в атрибут за хипервръзка на HTML елемент:

<a href="javascript:alert('Good boy!')">Click me!</a>

– Вграден в атрибут на събитие на HTML елемент:

(префиксът „javascript:” не е задължителен и се подразбира)

страниците си?– Като външен файл (с разширение “.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><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.00011e-41.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:\\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” спецификацията

Литерали• Нулев литерал– Има само една стойност – 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';

elsebackgroundColor = '#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:

// ...default:

Условия, условни преходи и оператори• Конструкция за условен преход 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

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

Documents

Училищен курс по програмиране на...

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

Училищен курс по програмиране на...

Уеб Анализ

Курс по уеб програмиране (2014),...

Училищен курс по програмиране на...

Курс по програмиране на c# 2013 - 2....

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

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

Училищен курс по програмиране на...

Курс по уеб програмиране (2014),...

Училищен курс по програмиране на...

Училищен курс по програмиране на...

Училищен курс по програмиране на...

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

Курс по уеб програмиране (2015),...

Училищен курс по програмиране на...

Курс по уеб програмиране (2014),...

Училищен курс по програмиране на...

Курс по програмиране на c# 2013 - 7....