реклама

Тази статия ще ви запознае със скелета на документа, с който работи JavaScript. Имайки знания за работата на този абстрактен модел обект на документ, можете да пишете JavaScript Какво е JavaScript и може ли интернет да съществува без него?JavaScript е едно от онези неща, които мнозина приемат за даденост. Всички го използват. Прочетете още който работи на всяка уеб страница.

Въведение

Как уеб страниците и JavaScript работят заедно и как могат да разговарят помежду си? Отговорите се крият в разбирането как работи Document Object Model.

Цел на DOM

DOM организира съдържанието на уеб страница и предоставя пътна карта в нея. Моделът е съставен от възли. Възлите са подредени в йерархия, която най-добре се мисли като дървовидна структура. Трябва да можем да вземем всеки HTML и да го представим по този начин.

Например, текстът на този параграф е възел в Модела на обект на документ. Параграфът е друг възел и родител на текстовия възел. Самият документ в крайна сметка е родителски възел и на двамата.

Илюстрация на модел на обект на документ
Кредит за изображение: Birger Eriksson чрез Wikimedia Commons

Можем да напишем JavaScript, за да действаме на уеб страницата, като идентифицираме възли. Тъй като всяко парче съдържание е възел, след това можем да напишем JavaScript, който е от значение за каквото образувание искаме да променим. Ще забележите, че това е подобно на как работи CSS Създаване на уеб интерфейси: откъде да започнемЩе ви покажем как се разграждат уеб интерфейсите, след което ще посочим ключовите концепции, инструменти и градивни елементи, необходими, за да си направите уеб дизайнер на 21 век. Прочетете още : прилага стил или визуален външен вид към съдържанието, като използва атрибути на id и клас на HTML елементи, точно както JavaScript контролира поведението.

Важно е да се отбележи, че CSS и JavaScript не се намират в DOM, а извън него. И двамата манипулират съдържанието на DOM, вместо да го обитават.

Повторно използване на код

Защо изходният код за уеб страници се управлява по този начин? Има две основни причини:

  1. Съхраняването на JavaScript в отделни файлове позволява по-лесно използване на кода. Когато JavaScript е написан на линия, до съдържанието, с което е свързано, той трябва да бъде копиран, за да се появи същата функционалност на друго място.
  2. JavaScript, разделен на външен файл, прави изходния код по-четим, като премахва функционалността на уеб страницата (JavaScript) от съдържанието (HTML).

Възлите на DOM

Възлите, които създавате и контролирате, са ограничени до това, което HTML спецификацията и браузърите поддържат. Това е една от причините за това Въвеждането на HTML5 с нови елементи от най-високо ниво беше важно Какво е HTML5 и как се променя начина, по който преглеждам? [MakeUseOf обяснява]През последните няколко години може би сте чували понякога HTML5 от време на време. Независимо дали знаете нещо за уеб разработката или не, концепцията може да бъде донякъде мъглява и объркваща. Очевидно е, че ... Прочетете още .

За нашите цели най-важните видове възли са:

  • елемент
  • Атрибут
  • Текст

Макар че спецификацията всъщност изброява общо дванадесет.

Използване на скрипт за създаване на възли в DOM

За целта на проста демонстрация, ще използваме JavaScript, за да създадем един конкретен елемент.

Тук ще ви покажем колко мощен е JS, като го използваме, за да създадете един от най-основните и най-разпространени обекти в уеб страницата, заглавието.

За да следвате този пример, създаването на цял виртуален сървър не си струва труда Как да създадете виртуална среда за уеб разработка и сървърИ така, как да балансирате способността си да мултизадачите с вашата нужда да разработвате уеб приложения в родния контекст, където те ще се изпълняват? Въведете виртуални машини. Прочетете още , затова използвайте онлайн пясъчна кутия. Ще искате леко тенис игрище, с което да експериментирате като JSBin. JSBin е страхотен, защото е многостранен и включва начин да видите и манипулирате всичко: HTML, JS, CSS и преглед на уеб страницата наведнъж.

(Codepen е подобно и в името на този пример ще работи също толкова добре.)

JSBin може също така динамично да създава URL адреси за вашия JS скриппад, които могат да се споделят по-късно. Ето този, който генерирах за този пример.

Възпроизведох и коментирах следните фрагменти за създаване на нова H1 заглавие в тялото:

  • HTML фрагментHTML фрагмент с маркирани маркери за използване с демонстрацията на модела на обект на документ
  • JavaScript фрагмент
    // декларира нова променлива, за да държи нов h1 елемент var newHeading = document.createElement ("h1"); // добавете текстовия възел към документа var h1Text = document.createTextNode ("Ниво на заглавие 1"); // направи го възлово устройство на новата рубрика newHeading.appendChild (h1Text); // добавете това като дъще на елемент, определен като "bt" document.getElementById ("bt"). appendChild (newHeading);

Което създава нов елемент H1 и неговото съдържание е пряко подчинено на

отварящ маркер.

Обърнете внимание, че изходният HTML код в левия панел не се променя. Този код е доста лесен за четене в този пример. В разширения Javascript нещата могат да станат много по-сложни.

Малко за лексикалната структура на JavaScript

Горният фрагмент носи малко обяснение.

  • Var създава променлива, която съхранява произволна стойност за вашия код, който да използва.
  • = е оператор за присвояване. Тук тя работи с Var термин и името на новата променлива (напр. newHeading) за формиране на пълна декларация.
  • object.method е извикване, което използва синтаксис „точка“, за да раздели обекти, като документот методите, които се използват по отношение на тях, както в getElementById.
    • Концепцията за „Обекти“ в програмирането Откъде „Обектно ориентирано“ програмиране получи името си?Обектно ориентираното не е просто произволна модна дума, която чувате в кръговете за програмиране. За името има причина - но какво? Присъединете се към мен, докато изследвам някои основи на програмните концепции и обяснявам ... Прочетете още заслужава много дискусии и е извън обхвата на тази статия. Достатъчно е да се каже, че те са важни компоненти на вашето приложение.
    • Методите са това, което очаквате: определена процедура или планирано действие, което може да се приложи към обектите.

Със сигурност сме ви покрили с много страхотни ресурси за изучаване на JavaScript Наистина научете JavaScript с 5 най-добри курсове за УдемиJavaScript е езикът за програмиране в мрежата. Ако имате причина да научите JavaScript, тези пет отлични курса от Udemy могат да бъдат мястото, където да започнете своето кодиране. Прочетете още . Проверете отново в нашата програмиране раздел за още повече.

Какво следва

Една от най-популярните рамки, която използва JavaScript е JQuery Направете уеб интерактивна: Въведение в jQueryjQuery е скриптова библиотека от страна на клиента, която почти всеки съвременен уебсайт използва - прави уебсайтовете интерактивни. Това не е единствената Javascript библиотека, но тя е най-развитата, най-поддържаната и най-широко използваната ... Прочетете още . Това е важна основа за най-новата итерация на богати уеб страници и приложения и е мястото, където може да искате да започнете следващите.

Тази статия помогна ли ви да научите повече за стартирането на JavaScript? Имате различен подход? Искаме да чуем от вас в коментарите по-долу!

Кредитна снимка: Imagentle чрез Shutterstock.com

Родриго се радва на техническо писане, уеб разработка и потребителско изживяване. Когато той не се занимава с прекалено мислене, блъскане по клавиатура или натискане на пиксели, той се наслаждава на страхотната култура на открито и киберпанк.