web разработка
|
|
|
- Pancho Borisov
- преди 5 години
- Прегледи:
Препис
1 МИЛЕНА ТОМОВА - НПО ВРАЦА СОФТУЕР ОБЩЕСТВО - КУРС WEB РАЗРАБОТКА ВЕРСИЯ 4 web разработка JavaScript DOM манипулации
2 Съдържание DOM елементи Обхождане на DOM - дървото Добавяне, премахване, променяне на елементи Промяна на DOM - дървото Оптимизиране на DOM операциите
3 DOM елементи
4 DOM елементи - преговор Всеки DOM елемент е JavaScript обект, съответстващ на елемент от HTML. o Селектираме ги, като използваме някой от DOM селекторите. o Създаваме ги динамично с код.
5 DOM елементи DOM елементите могат да бъдат променяни Следните промени се прилагат веднага върху DOM и HTML страницата //промяна съдържанието на div-елемент selecteddiv.innerhtml = "changed"; //променяме фона на div на "#456" selecteddiv.style.background = "#456"; демо
6 Обхождане на DOM
7 Обхождане на DOM DOM елементите притежават свойства, отнасящи се до тяхната позиция в DOM - дървото: o Техния родител - parent o Техните деца - children o Техните роднини- siblings Елементите непосредствено преди и след елемента. Тези свойства могат да бъдат използвани за обхождане на DOM - дървото.
8 Обхождане на DOM parentnode element.parentnode o Връща директния родител на елемента o Родителя на document е null childnodes element.childnodes o Връща nodelist с всички деца - child nodes Включително текста - text nodes Включително whitespaces
9 Traversing the DOM DOM елементите имат някои свойства за специалните елементи, намиращи се около тях - o first /last child nodes o Елементите преди/след избран елемент/node Свойства - o firstchild / lastchild o nextsibling / nextelementsibling o previoussibling / previouselementsibling
10 Манипулиране на DOM - дървото
11 Манипулиране на DOM - дървото Може да променяме DOM - дървото динамично, с помощта на JS Създаваме HTML елементи Премахваме HTML елементи Променяне на HTML елементите - o Тяхното съдържание o Стилизирането им o Техните атрибути - src, href
12 createelement() DOM притежава метод за създаване на HTML елементи o document.createelement(elementname) o Връща обект от съответния тип HTML елемент. //createdelement.clonenode(true) var lielement = document.createelement("li");
13 appendchild() Когато създаваме HTML елемент динамично, той е просто един JavaScript обект, който o Все още не е част от DOM - дървото /на уеб страницата/. o Новият HTML елемент трябва да бъде добавен /appended/ към DOM - дървото. var studentslist = document.createelement("ul"); var studentli = document.createelement("li"); studentslist.appendchild(studentli); document.body.appendchild(studentslist);
14 insertbefore() DOM API поддържа методи за вмъкване на елемент преди и след конкретен елемент. o o appendchild() вмъква елемента винаги в края parent.insertbefore(newnode, specificelement)
15 Премахване на елементи
16 removechild() Премахваме елемент с element.removechild(eltoremove) o Подаваме елемента, който ще премахваме на неговия родител
17 Променяне на елемент/и
18 Променяне на елемент/и DOM елементите могат да бъдат премахнати и/или променени o Както конкретен елемент, така и неговите деца. DOM API дава възможност всеки елемент от DOM - дървото да бъде променян o o Променяйки свойствата му/properties Променяйки външния му вид
19 Променяне на елемент/и Всеки HTML елемент е уникален в DOM - дървото Ако променим с JavaScript неговия външен вид или позиция - той си е все още същия елемент - обект.
20 Променяне на Стила на елемент
21 element.style.property Стилът на всеки HTML елемент, може да бъде променян с JavaScript o Като променяме стиловите атрибути Променяме - inline - стила, не CSS документ /Какъв е приоритетът на inline - стила, спрямо останалите начини за задаване на стил на HTML елементите?/
22 element.style.property var div = document.getelementbyid("content"); div.style.display = "block"; div.style.width = "123px";
23 Оптимизиране на DOM операциите
24 Оптимизация на операциите с DOM Добавянето на елементи към DOM - дървото е много бавна операция Когато добавяме елемент към DOM - дървото, то се зарежда отначало Препоръчително е новосъздадените елементи да бъдат добавяни заедно.
25 documentfragment За целта използваме елемента DocumentFragment Той е малък DOM елемент, без родители Използва се за съхранение на готовите за прикачване, новосъздадени елементи едновременно към DOM - дървото.
26 documentfragment Прикачването на DocumentFragment - елемента към DOM - дървото, добавя само неговите деца - елементи. var dfrag = document.createdocumentfragment(); dfrag.appendchild(div); //appending more elements.. document.body.appendchild(dfrag);
SEO анализ за puppospiele.de
Скорост зареждане 77 / 100 Скорост Непременно поправете: Оптимизирайте изображенията Правилното форматиране и компресиране на изображенията може да спести много байтове данни. Оптимизирайте следните изображения,
Release notes_V3.0_BG
БЕЛЕЖКИ КЪМ ВЕРСИЯ V3.0 Hilti ON!Track Дата на излизане: 09.06.2018 г. 1 Важни моменти на версията 2 2 Нови функции 3 2.1 От местоположение и количество в потвърждение на доставката 3 2.2 Потвърждение
Стилове в интернет страници
инж. Елена Гълбачева Най-често използвания език за управление изгледа на интернет страници. По принцип CSS може да се използва найобщо за XML документи, но най-честата употреба е съвместно с HTML за задаване
ЕВРОПЕЙСКИ СЪЮЗ Европейки фонд за регионално развитие Инвестираме във вашето бъдеще ОПЕРАТИВНА ПРОГРАМА Развитие на конкурентоспособността на българск
BG161PO003-1.1.06-0022-C0001 Ръководство за работа със системата Този документ е създаден с финансовата подкрепа на Оперативна програма на българската икономика 2007-2013, съфинансирана от Европейския
DOT NET 3.1
.NET технологии Изграждане на уеб приложения с ASP.NET Forms Управление на състоянието (state) State Повечето приложения използват данни (променливи), които трябва да се съхранят по време на няколко заявки
Уеб системи и технологии - Упражнение 4
УПРАЖНЕНИЕ 4: ВИДОВЕ СИМВОЛИ И ТЯХНОТО ФОРМАТИРАНЕ. СТРУКТУРИРАНЕ И ОФОРМЯНЕ НА ТЕКСТОВЕ. СПИСЪЦИ. Какво се разглежда в тази тема: Параграфи: o Нов параграф ; o Нов ред в текущ параграф .
ФАКУЛТЕТ "МЕЖДУНАРОДНА ИКОНОМИКА И АДМИНИСТРАЦИЯ" КАТЕДРА "ИНФОРМАТИКА И ИКОНОМИКА" ГРАФИК ЗА ЛЕКЦИИ на магистърски програми "Дигитален маркетинг и уе
ФАКУЛТЕТ "МЕЖДУНАРОДНА ИКОНОМИКА И АДМИНИСТРАЦИЯ" КАТЕДРА "ИНФОРМАТИКА И ИКОНОМИКА" ГРАФИК ЗА ЛЕКЦИИ на магистърски програми "Дигитален маркетинг и уеб дизайн" - 1 курс, випуск 2018/2019 Учебна 2018/19
http://it.souprovadia.info 1. Какво е облак (Cloud) Най-общо: Технологии и услуги (софтуер, хардуер, масиви от данни), достъпни през интернет; Разполагаме с... Място, където може да се качват файлове,
HTML - формат на текст
ТЕКСТ Езикът HTML ви позволява да разполагате текст на страницата, да го подравнявате, оцветявате, да задавате големината на шрифта и самия шрифт. Нека да направим една страница и да разположим някакъв
CSRF on JSON data
Cross-Site Request Forgery (CSRF) on JavaScript Object Notation (JSON) data Garo Garabedyan, TU-Sofia CSRF Cross-Site Request Forgery (CSRF) е широко използвана уязвимост на уеб страниците. В тази атака
ЕВРОПЕЙСКА КОМИСИЯ ГЕНЕРАЛНА ДИРЕКЦИЯ ИНФОРМАТИКА Компонент, свързан с изпълнението на политиката по инициативата WiFi4EU Ръководство за прилагане v1.
ЕВРОПЕЙСКА КОМИСИЯ ГЕНЕРАЛНА ДИРЕКЦИЯ ИНФОРМАТИКА Компонент, свързан с изпълнението на политиката по инициативата WiFi4EU Ръководство за прилагане v1.0 Съдържание 1. Въведение... 2 2. Поддържани браузъри...
Формуляри
1. Основни тагове при изграждане на формуляр (form) - отварящ таг, затварящ таг - таг input, който може да съдържа няколко атрибута, няма затварящ таг и затова наклонената затваряща черта се изписва в
достига до ясно таргетирано, динамично общество, компактно в интересите си към различни спортове и аутдор културата. Медията ни е насочена към
360 360 достига до ясно таргетирано, динамично общество, компактно в интересите си към различни спортове и аутдор културата. Медията ни е насочена към дългосрочни партньорства, с цел постигане на трайна
WEB портал за съобщаване на проблеми в СО Район Банкя Ръководство на потребителя I. Общ изглед на портала, вход и регистриране на потребител След отва
WEB портал за съобщаване на проблеми в СО Район Банкя Ръководство на потребителя I. Общ изглед на портала, вход и регистриране на потребител След отварянето на линка на портала http://bt.bg73.net/ се визуализира
ЕДИС СОФТУЕР ЕООД Пловдив, тел , ЕДИС-АСО ИЗТЕГЛЯНЕ И ИНСТАЛИРАНЕ НА АКТУАЛИЗАЦИЯТ
ЕДИС СОФТУЕР ЕООД Пловдив, тел. 0888-640825, 0877-660667 office@edis-bg.com, https://www.edis-bg.com ЕДИС-АСО ИЗТЕГЛЯНЕ И ИНСТАЛИРАНЕ НА АКТУАЛИЗАЦИЯТА \ Пловдив, юни 2019 г. - 1 - 1. ОПРЕДЕЛЯНЕ НА ТЕКУЩАТА
МИНИСТЕРСТВО НА ОБРАЗОВАНИЕТО И НАУКАТА
МИНИСТЕРСТВО НА ОБРАЗОВАНИЕТО И НАУКАТА У Ч Е Б Н А П Р О Г Р А М А ЗА ЗАДЪЛЖИТЕЛНА ПРОФЕСИОНАЛНА ПОДГОТОВКА ПО ПРОГРАМИРАНЕ И АЛГОРИТМИЧНИ ЕЗИЦИ ЗА ПРОФЕСИЯ: КОД 482010 ИКОНОМИСТ - ИНФОРМАТИК СПЕЦИАЛНОСТ:
HTML - списъци
СПИСЪЦИ Езикът HTML ви дава възможност да използвате три вида списъци - подредени, неподредени и списъци с обяснения. Подредените списъци са номерирани и изглеждат така : 1. Иван 2. Георги 3. Захари Неподредените
Видеорекордер АHD-3908 Ръководство за експлоатация Моделите от тази серия са отличен избор за цифрово наблюдение на обекти в различни сфери, където во
Видеорекордер АHD-3908 Ръководство за експлоатация Моделите от тази серия са отличен избор за цифрово наблюдение на обекти в различни сфери, където водещ фактор е сигурността. Вградената LINUX операционна
Динамична памет Трифон Трифонов Увод в програмирането, спец. Компютърни науки, 1 поток, спец. Софтуерно инженерство, 2016/17 г. 21 декември 2016 г. Тр
Динамична памет Трифон Трифонов Увод в програмирането, спец. Компютърни науки, 1 поток, спец. Софтуерно инженерство, 2016/17 г. 21 декември 2016 г. Трифон Трифонов (УП 16/17) Динамична памет 21 декември
document
АГЕНЦИЯ ПО ОБЩЕСТВЕНИ ПОРЪЧКИ 1000 София, ул. Леге 4 факс: 940 7078 e-mail: rop@aop.bg, e-rop@aop.bg интернет адрес: http://www.aop.bg РЕШЕНИЕ Проект на решение Решение за публикуване Номер: БТГ-РД-07-59А
Партида: РЕШЕНИЕ (версия 4) Проект на решение 53 Решение за публикуване Номер: 26 от 29/03/2016 дд/мм/гггг РЕШЕНИЕ А) за откриване на процедура
Проект на решение 53 Решение за публикуване Номер: 26 от 29/03/2016 дд/мм/гггг РЕШЕНИЕ А) за откриване на процедура Б) за промяна 6 3В) за прекратяване на процедура за възлагане на обществена поръчка Обектът
ОБРАЗОВАНИЕ И НАУКА ЗА ЛИЧНОСТНО И ОБЩЕСТВЕНО РАЗВИТИЕ Национална научна конференция гр. Смолян, октомври, 2017 г. НЯКОИ ВЪЗМОЖНОСТИ ЗА ПРЕПОДАВ
ОБРАЗОВАНИЕ И НАУКА ЗА ЛИЧНОСТНО И ОБЩЕСТВЕНО РАЗВИТИЕ Национална научна конференция гр. Смолян, 27 28 октомври, 2017 г. НЯКОИ ВЪЗМОЖНОСТИ ЗА ПРЕПОДАВАНЕ НА СЪЗДАВАНЕ НА ИНТЕРАКТИВЕН ИНТЕРФЕЙС В УЧИЛИЩЕ
Допълнения в периода Версия Модул Документи Към Права на достъп до екземпляри документи е добавено право Изтриване на док
Допълнения в периода 25.04.2019 28.05.2019 Версия 4.42.0 Модул Документи Към Права на достъп до екземпляри документи е добавено право Изтриване на документ. Новото право е с по-нисък приоритет от правото
Microsoft Word ELANA-Global-Trader-FX.docx
ELANA Global Trader Валутна търговия (FX) за десктоп, таблет и смартфон КРАТКО РЪКОВОДСТВО ЗА РАБОТА Ръководство за работа с платформа ELANA Global Trader за валутна търговия FX. Страница 1 от 14 Какво
ППМГ Академик Иван Ценов гр. Враца - съвременно и модерно училище с европейски облик
ППМГ Академик Иван Ценов гр. Враца - съвременно и модерно училище с европейски облик Профилирана природо-математическа гимназия Академик Иван Ценов гр.враца Пет паралелки (130 ученици) За учебната 2019/2020
НАРЕДБА 4 от 31 май 2019 г. за специализираната електронна система за проследяване и анализ на лекарствените продукти Раздел I Общи положения Чл. 1. С
НАРЕДБА 4 от 31 май 2019 г. за специализираната електронна система за проследяване и анализ на лекарствените продукти Раздел I Общи положения Чл. 1. С тази наредба се уреждат условията и редът за: 1. предоставяне,
ПРИМЕРЕН ГРАФИК ЗА ОБУЧЕНИЯТА по Национална програма Обучение за ИТ кариера График на учебните занятия за ученици, които са в XII клас през учебната 2
ПРИМЕРЕН ГРАФИК ЗА ОБУЧЕНИЯТА по Национална програма Обучение за ИТ кариера График на учебните занятия за ученици, които са в XII клас през учебната 2019/2020 г. и ще се обучават за трета година по Националната
“ Ада – софт “ – софтуер за автоматизиране на финансово – счет
Офис София ж.к. Младост 1, бл.27 тел.: (02) 974 43 50 (02) 974 37 39 e-mail: office@ada-soft.bg РАЗРАБОТКА, ПРОДАЖБА И ВНЕДРЯВАНЕ НА ИКОНОМИЧЕСКИ СОФТУЕР. ОДИТ РЪКОВОДСТВО ЗА РАБОТА ISO 9001:2008 от Bureau
Анализ и оптимизация на софтуерни приложения
Анализ и оптимизация на софтуерни приложения Александър Пенев Васил Василев Съдържание 1. Производителност 2. Оптимизация 3. Методи за оптимизация 2/18 Защо производителността е важна? Дава възможност
Динамична памет. Конструктори и деструктори Любомир Чорбаджиев Технологическо училище Електронни системи Технически университет, София
Динамична памет. Конструктори и деструктори Любомир Чорбаджиев Технологическо училище Електронни системи Технически университет, София lchorbadjiev@elsys-bg.org Revision : 1.3 16 ноември 2004 г. Пример: