ЕзП – Курс PDF

HTML и JavaScript сценарии  Източниците обхващат как HTML-документите се описват и как JavaScript може да добави функционалност (поведение).  HTML предоставя съдържанието, логическата структура и CSS е за представяне.  JavaScript сценариите (скриптовете) са програмен код, написан...

HTML и JavaScript сценарии  Източниците обхващат как HTML-документите се описват и как JavaScript може да добави функционалност (поведение).  HTML предоставя съдържанието, логическата структура и CSS е за представяне.  JavaScript сценариите (скриптовете) са програмен код, написан на JavaScript и вграден директно в HTML страници. 1. Въведение в JavaScript  Ролята на JavaScript: Да разшири функционалността на уеб страниците. o Примери включват валидиране на потребителски вход, създаване на интерактивни бутони, създаване на динамични ефекти, създаване на изскачащи съобщения и извършване на изчисления.  JavaScript е скриптов език от страна на клиента, който се изпълнява от браузъра. Той е интерпретиран език.  Как се изпълнява JavaScript код: o При зареждане на страницата o В отговор на събития, като кликвания на мишката или въвеждане от клавиатурата 2. История на JavaScript  JavaScript е създаден от Netscape през 1995 г.  Езикът е стандартизиран от Европейската асоциация на производителите на компютри (ECMA).  Има няколко версии на JavaScript (1.0, 1.1, 1.2…) и той продължава да се развива.  Различните версии на браузърите поддържат различни версии на JavaScript. 3. JavaScript Програмен Код  JavaScript е интерпретиран език, което означава, че кодът се изпълнява ред по ред.  JavaScript кодът може да бъде вграден в HTML страници и се изпълнява от браузъра на клиента.  Изпълнението на JavaScript програма може да се случи при зареждане на страницата или въз основа на събития.  Примери за събития: зареждане/разтоварване на страници, зареждане на изображения, кликвания и движение на мишката, избор на текст и подаване на форми. 4. Отстраняване на грешки в JavaScript  Съвременните браузъри имат конзоли за показване на грешки.  Браузърът Internet Explorer използва F12, докато други използват Ctrl+Shift+I или подобни, за да получат достъп до конзолата.  Източниците насочват към уеб страница с ресурси за отстраняване на грешки и тестване на HTML, CSS и JavaScript. 5. Синтаксис на JavaScript   Лексикални елементи: Те формират основните градивни елементи на езика.  Идентификатори: Имена, дадени на променливи и функции. Примери: addNums, x13.  Резервирани думи: Специални ключови думи с предварително определени значения, които не могат да се използват за други цели.  Коментари: Текст, игнориран от компилатора, използван за документация, може да бъде едноредов (//) или многоредов (). 6. Общи правила за синтаксиса  JavaScript различава малки и главни букви, пример и Пример се третират като различни.  Всяка декларация или дефиниция трябва да завършва с точка и запетая (;). 7. Типове данни  Типовете данни определят валидните операции върху определен вид данни.  Примерите включват - Цели числа, реални числа, символи, логически данни.  Типовете данни позволяват: o Представяне на константи от определен тип. o Извършване на операции, валидни за типа данни. o Установяване на отношения.  JavaScript има вградени (предварително дефинирани) функции и глобални променливи, които работят с данни.  Сложните типове данни могат да бъдат конструирани от комбинации от константи и операции.  Примитивните типове данни в JavaScript: o String (низ), Number (число), Boolean (логически), Array (масив), Object (обект), Undefined (недефиниран) и Null (нула). 8. Константи  Константа е стойност на данните, която не може да се променя по време на изпълнение на програмата.  Константите могат да бъдат числа, булеви стойности, низове. o Числовите константи могат да бъдат цели или реални числа, като 102 или -2.16. o Булевите константи са true или false. o Низовите константи са последователности от знаци в кавички, например "He said, "JavaScript is an interesting language."". 9. Променливи  Променлива е място за съхранение в паметта за стойност, която може да се променя по време на изпълнение на програмата.  Променливите трябва да получат име, за да бъдат идентифицирани в програмата.  Декларирането и инициализирането на променлива се извършва със синтаксис var име на променлива = стойност;. o Пример: var count = 5;.  Можете да декларирате множество променливи едновременно: var x, y, sum;  Ако променлива е декларирана без стойност, нейната първоначална стойност е undefined. 10.Характеристики на променливите  Променливите в JavaScript са нетипизирани, което означава, че не е необходимо да декларирате типа на променливата, преди да й присвоите стойност.   Стойността на променливата може да бъде променена на различен тип по време на изпълнение. 11.Взаимодействие с потребителя  JavaScript може да използва диалогови прозорци (изскачащи кутии) за комуникация с потребителя.  Три вградени JavaScript функции за това: o Alert boxes: Показват съобщение на потребителя с бутон "OK". o Confirm boxes: Питат потребителя за потвърждение, с опции "OK" (true) и "Cancel" (false). o Prompt boxes: Питат потребителя за вход, с опции "OK" и "Cancel", "OK" връща въведените данни, "Cancel" връща null. 12.Оператори  Операторите се използват за извършване на операции върху данни.  JavaScript има: o Оператори за присвояване. o Аритметични оператор. o Оператори за сравнение. o Логически оператори.  Операторите се прилагат върху операнди.  Изразите се изчисляват до стойности. 13.Оператори за присвояване  Операторът за присвояване (=) присвоява стойност на променлива.  Съкратените оператори за присвояване комбинират присвояване с аритметични операции, като +=, -=, *=, /=, %=. 14.Аритметични оператори  Аритметичните оператори извършват математически изчисления, като събиране (+), изваждане (-), умножение (*), деление (/), модул (%).  Операторите за увеличаване (++) и намаляване (--) увеличават или намаляват стойността с 1. 15.Оператори за сравнение  Операторите за сравнение сравняват две стойности, като равно (==), не равно (!=), по- голямо от (>), по-малко от (=), по-малко или равно на ( o Основни методи на Date:  getDate(): Връща деня от месеца (1-31)  getDay(): Връща деня от седмицата (0-6)  getFullYear(): Връща годината (4 цифри)  getHours(): Връща часа (0-23)  getMonth(): Връща месеца (0-11)  getSeconds(): Връща секундите (0-59)  getTimezoneOffset(): Връща разликата в минути между локално време и Greenwich Mean Time (GMT)  setDate(): Задава номера на месеца в обект date  setFullYear(): Задава номера на годината (4 цифри) на обект date  toDateString(): Преобразува дата от обект Date в низ  toString(): Преобразува обект Date в низ  Boolean обект: Научете, че обектът Boolean представлява булева стойност (true или false) o Булевите стойности се създават с конструктора new Boolean() o Ако не е дадена стойност или стойността е 0, -0, null, "", false, undefined или NaN, обектът получава стойност false. Във всички останали случаи стойността е true, дори ако дадената стойност е низът "false" o Примери за създаване на Boolean обекти: var myBoolean = new Boolean();, var myBoolean = new Boolean(0);, които са false, и var myBoolean = new Boolean(true) или var myBoolean = new Boolean("Richard");, които са true  Динамичност на уеб-страници 1. Въведение  Динамичност на уеб-страници: Какво е и как се постига? - Динамичността позволява на уеб страниците да реагират и да се променят в отговор на действия от потребителя  Технологии: Използването на DHTML (Dynamic HTML), който е комбинация от HTML, CSS и JavaScript, и DOM  DOM (Document Object Model): За промяна на съдържанието на страницата  CSS и DOM: За промяна на оформлението на страницата  HTML: За функционални HTML елементи/тагове и атрибути за събития (взаимодействие с потребителя и реакция на събития) 2. Клиентски обекти в JavaScript  Представяне: Какво представляват клиентските обекти – те са обекти, които се съдържат в уеб-страницата в браузъра. Те зависят от съдържанието на HTML страницата.  Изграждане: Изграждат се при зареждане на HTML страницата. Примери включват прозорец, HTML документ и HTML елементи/тагове.  Включват: o Обекти на браузъра (window, history, location, navigator, и др.). Определени са от модела Browser Object Model (BOM). o Обекти на HTML-документа (document, body, и др.). DOM обектите, определени са от Document Object Model (DOM).  Възможности: Позволяват на JavaScript кода да променя, изтрива и добавя характеристики на HTML елементите от уеб страницата.  Характеристики: Имат свойства и методи за достъп (чрез "точкова нотация"), и реагират на събития.  Йерархия на обектите: Обектите са подредени в йерархия, като обектите на по-горно ниво съдържат свойства на обекти от по-ниско ниво.  Различни обекти: Различните обекти са представени на йерархична схема с window като корен и обекти като document, location, history, navigator, forms, images и други. 3. Обект на браузъра. Обект window  Представлява: Прозореца на браузъра, в който се визуализират страниците.  Корен: Той е коренът в йерархията на обектите на HTML страницата.  Свойства: Всички клиентски обекти стават негови свойства4. Всички глобални обекти, включени в JavaScript кода, автоматично стават характеристики на window.  Глобални променливи и функции: Глобалните променливи са методи и функции са свойства на window.  Свойства на window: Някои свойства са closed, document, history, innerHeight, innerWidth, navigator и други.  Методи на window: Някои методи са alert(), blur(), close(), confirm(), focus(), move(), open(), print(), prompt(), resizeBy(), scrollBy() и setTimeout().  Примери: При достъп до характеристиките, обектът window се подразбира, например window.open("http://www.uni-plovdiv.bg/");, open("", "", "width=200,height=100"); или close(). 4. Обекти на HTML-документа  Дървовидна йерархия: Браузърът генерира дървовидна йерархия на обекти, съответстваща на елементите в HTML документа.  Core DOM: Моделът Core DOM представлява изгледи, интерфейси за достъп до възлите и връзките им родител-наследник.  HTML DOM: Моделът HTML DOM е разширение на Core DOM с по-специфични интерфейси за HTML елементите. Тук се следва основно HTML DOM модела.  Общи правила за обработка o Вградени свойства и методи: Всеки обект има вградени свойства и методи, съответстващи на типа му. o Свойства, съответстващи на атрибутите: Свойствата съответстват на атрибутите на HTML елементите (например, document.body.bgColor отговаря на атрибута bgcolor на ). o Достъп до свойства и методи: Използва се "точкова нотация", за четене и промяна на свойства, например document.body.text="red". o Общи свойства: Някои общи свойства са id, name, href, alt, title, src и други. o Други общи свойства: innerHTML, className, tagName, offsetWidth, scrollHeight, scrollTop, nodeType и style.  Обект document o Представлява: HTML страницата, визуализирана в браузъра. o Най-често използван обект: Използва се в "client-side" програмирането. o Предоставя: Достъп до всички елементи от йерархията на страницата, методи за извличане на данни и определен набор от данни. o Вградени свойства: body, cookie, documentElement, domain, lastModified, title, anchors[], forms[], images[], links[]. o Вградени методи: clear(), createAttribute(), createElement(), createTextNode(), focus(), getElementById(), getElementsByName(), getElementsByTagName(), open(), write(), writeln(). o Примери: Различни примери за използване на свойства и методи, като document.write(document.title), document.open("text/html","replace") или document.getElementById("id1").  Примери за document object: Има примери за използване на свойства и методи, като document.write(txt.length);, document.write(txt.toUpperCase());, document.write("Num images: "+document.images.length).  Обект body o Представлява: Тялото на HTML документа. o Вградени свойства: alink, background, bgcolor, link, text, vlink.  Други основни обекти: o Anchor (): Има свойства като href, name, методи като blur() и focus(). o Image (): Има свойства като border, height, width. o Table (): Има масиви като cells, rows, свойства като caption, summary, и методи като deleteRow(), insertRow(). 5. Промяна на съдържанието на HTML-страницата  Постига се: Чрез клиентските обекти и техните свойства и методи.  Пример: Добавяне на редове в таблица чрез JavaScript.  6. Промяна на оформлението на HTML-страницата  Постига се: Чрез свойството style, което е общо за обектите в HTML документа, и задаване на стойности на неговите атрибути.  Вградени CSS стилове: Промяната се извършва само на вградени (inline) CSS стилове, не на вътрешни и външни стилове.  Примери: style.width, style.marginTop, style.backgroundImage, document.body.style.background="red" 7. Взаимодействие с потребителя и реакция на събития  Постига се: Чрез функционални HTML елементи/тагове и техните атрибути за събития.  Функционалност: Използват се HTML елементи, които генерират събития, и JavaScript функции, които обработват събитията.  Основни елементи за взаимодействие: Форма (form), поле за отметка (checkbox), бутон за избор (radio), бутон (button), текстово поле (text), поле за въвеждане на парола (password), списък (select) и многоредово поле за въвеждане на текст (textarea).  Форми: Използват се с таг o Атрибути: autocomplete, enctype, name, novalidate.  Таг : Представя различните елементи за взаимодействие o Видове: checkbox, radio, button, text, password, submit.  Атрибути на елементи: value, readonly, disabled, size, maxlength, min, max, multiple, required, autofocus.  Атрибути за събития: o Най-важните атрибути за взаимодействие с потребителя са атрибутите за събития.18. o Най-използвани: onafterprint, onload, onchange, onfocus, onselect, action, onkeydown, onkeypress, onkeyup, onclick, ondblclick, onmousedown, и др. o Съпоставяне на функции: За да се изпълни дадена функция при събитие, се използва атрибут, който е равен на името на JavaScript функция, например.  Достъп до данни: o Данните, въведени от потребителя, могат да се достъпят чрез JavaScript функции, обработчици на събития, или с помощта на клиентските HTML DOM обекти18. o Извличането на данни от всички видове елементи става с функциите document.getElementById(), document.getElementsByName() и document.getElementsByTagName().  Извличане на данни от форми: o Формите се достъпват чрез масива document.forms, или по име на формата, например document.forms или document.Form1. o Аналогично, достъпът до други елементи се прави по име, например текстовото поле с име Firstname = document.Form1.FirstName.value.  Методи на HTML DOM обекти за събития: o blur(): Премахва фокуса от елемента. o click(): Изпраща събитие "кликване" към елемента. o focus(): Поставя фокуса върху елемента (от клавиатурата).