1 / 81

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

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

meir
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related