JavaScript a vývoj webu: Použití objektového modelu dokumentu

reklama

Tento článek vás seznámí s kostrou dokumentu, se kterou JavaScript pracuje. Po práci s tímto abstraktním objektovým modelem dokumentu můžete psát JavaScript Co je to JavaScript a může bez něj existovat internet?JavaScript je jednou z těch věcí, které mnozí považují za samozřejmost. Každý to používá. Přečtěte si více který funguje na jakékoli webové stránce.

Úvod

Jak webové stránky a JavaScript spolupracují a jak jsou schopny spolu mluvit? Odpovědi spočívají v pochopení toho, jak funguje Object Object Model.

Účel DOM

DOM organizuje obsah webové stránky a poskytuje do ní cestovní mapu. Model je tvořen uzly. Uzly jsou uspořádány do hierarchie, která se nejlépe považuje za stromovou strukturu. Měli bychom být schopni vzít jakýkoli HTML a reprezentovat ho tímto způsobem.

Například textem tohoto odstavce je uzel v rámci Object Object Model. Odstavec je dalším uzlem a rodičem textového uzlu. Samotný dokument je nakonec nadřazeným uzlem obou.

Můžeme napsat JavaScript tak, aby působil na webové stránce pomocí identifikace uzlů. Protože každý obsah je uzlem, můžeme napsat JavaScript, který je relevantní pro jakoukoli entitu, kterou chceme změnit. Všimněte si, že je to podobné jak funguje CSS Vytváření webových rozhraní: Kde začítUkážeme vám, jak se webová rozhraní rozpadá, a pak poukázat na klíčové koncepty, nástroje a stavební bloky potřebné k tomu, abyste se stali webovým designérem 21. století. Přečtěte si více : aplikuje styl nebo vizuální vzhled na obsah pomocí atributů id a class prvků HTML, stejně jako JavaScript řídí chování.

Je důležité si uvědomit, že CSS a JavaScript se nenacházejí v DOMu, ale mimo něj. Oba manipulují s obsahem DOM, místo aby ho obývali.

Opětovné použití kódu

Proč je zdrojový kód webových stránek takto spravován? Existují dva hlavní důvody:

1. Ukládání JavaScriptu do samostatných souborů umožňuje snadnější opětovné použití kódu. Je-li JavaScript vložen inline, musí se vedle obsahu, ke kterému je přidružen, zkopírovat, aby se stejná funkce mohla vyskytnout i jinde.
2. JavaScript oddělený do externího souboru umožňuje lepší čitelnost zdrojového kódu odstraněním funkčnosti webové stránky (JavaScript) z obsahu (HTML).

Uzly DOM

Uzly, které vytvoříte a ovládáte, jsou omezeny na to, co specifikace HTML a prohlížeče podporují. To je jeden důvod Důležité bylo zavedení nových prvků na nejvyšší úrovni HTML5 Co je HTML5 a jak se mění způsob procházení? [MakeUseOf vysvětluje]Během několika posledních let jste možná slyšeli pojem HTML5 jednou za čas. Ať už víte něco o vývoji webových stránek nebo ne, může být tento koncept poněkud mlhavý a matoucí. Očividně,... Přečtěte si více .

Pro naše účely jsou nejdůležitějšími typy uzlů:

• Živel
• Atribut
• Text

Ačkoli specifikace ve skutečnosti uvádí celkem dvanáct.

Použití skriptu k vytvoření uzlů v DOM

Pro jednoduchou demonstraci použijeme JavaScript k vytvoření jednoho konkrétního prvku.

Zde vám ukážeme, jak mocný je JS, pomocí kterého vytvoříte jeden z nejzákladnějších a nejběžnějších objektů webové stránky, nadpis.

Chcete-li následovat tento příklad, vytvoření celého virtuálního serveru nestojí za problém Jak vytvořit virtuální vývojové prostředí webu a serverJak tedy vyvážit vaši schopnost více úkolů s potřebou vyvíjet webové aplikace v nativním kontextu, kde budou spuštěny? Zadejte virtuální stroje. Přečtěte si více , použijte online karanténu. Budete chtít experimentovat s lehkým hřištěm jako JSBin. JSBin je skvělý, protože má více funkcí a zahrnuje způsob, jak vidět a manipulovat se vším: HTML, JS, CSS a náhled webové stránky najednou.

(Codepen je podobný a pro tento příklad bude fungovat stejně dobře.)

JSBin může také dynamicky vytvářet adresy URL pro váš zápisník JS, které lze později sdílet. Tady je ten, který jsem pro tento příklad vygeneroval.

Pro reprodukci nového čísla H1 v těle jsem reprodukoval a komentoval následující úryvky:

• Fragment HTML
• Úryvek JavaScriptu

  // deklarovat novou proměnnou pro uložení nového prvku h1 var newHeading = document.createElement ("h1"); // přidat textový uzel do dokumentu var h1Text = document.createTextNode ("Heading Level 1"); // učinit z něj podřízený uzel nového záhlaví newHeading.appendChild (h1Text); // připojí to jako podřízený prvek definovaný jako „bt“ document.getElementById ("bt"). appendChild (newHeading);

Což vytváří nový prvek H1 a jeho obsah je přímo podřízen

úvodní značka.

Zdrojový kód HTML v levém podokně se nezmění. Tento kód je v tomto příkladu poměrně snadno čitelný. V pokročilém Javascriptu mohou být věci mnohem složitější.

Trochu o lexikální struktuře JavaScriptu

Výše uvedený úryvek obsahuje malé vysvětlení.

• var vytvoří proměnnou, která ukládá libovolnou hodnotu, kterou má váš kód použít.
• = je operátor přiřazení. Zde pracuje s var výraz a název nové proměnné (např. newHeading), aby se vytvořilo úplné prohlášení.
• object.method je vyvolání, které používá „tečkovou“ syntaxi k oddělení objektů, jako je dokument, z metod používaných ve vztahu k nim, jako v getElementById.
  • Koncept „Objekty“ v programování Odkud pochází „objektově orientované“ programování?Objektově orientovaný není jen náhodný bzučák, který slyšíte v programovacích kruzích. Za jménem je důvod - ale co? Připojte se ke mně, když prozkoumám některé základy programovacích konceptů a vysvětlím ... Přečtěte si více zasluhuje si hodně diskuse a je mimo rozsah tohoto článku. Stačí říci, že jsou důležitými součástmi vaší aplikace.
  • Metody jsou to, co byste očekávali: konkrétní postup nebo plánovaná akce, kterou lze na objekty použít.

Určitě jsme vás pokryli spoustou skvělých zdroje pro výuku JavaScriptu Opravdu se naučte JavaScript s 5 nejlepšími kursy UdemyJavaScript je programovací jazyk webu. Pokud máte důvod se naučit JavaScript, těchto pět vynikajících kurzů od Udemy by mohlo být místem, kde můžete začít s kódováním. Přečtěte si více . Podívejte se zpět do našeho programování sekce pro ještě více.

Co bude dál

Jeden z nejpopulárnějších rámců, které používají JavaScript, je JQuery Vytvoření interaktivního webu: Úvod do jQueryjQuery je skriptovací knihovna na straně klienta, kterou téměř každý moderní web používá - díky tomu jsou webové stránky interaktivní. Není to jediná knihovna Javascript, ale je to nejrozvinutější, nejvíce podporovaná a nejrozšířenější ... Přečtěte si více . Je to důležitý základ pro nejnovější iteraci bohatých webových stránek a aplikací a můžete začít další.

Pomohl vám tento článek dozvědět se více o začátku JavaScriptu? Máte jiný přístup? Chceme od vás slyšet v komentářích níže!

Obrázek Kredit: Imagentle přes Shutterstock.com