Programmering

JavaScript och webbutveckling med hjälp av dokumentobjektmodellen

JavaScript och webbutveckling med hjälp av dokumentobjektmodellen / Programmering

Denna artikel kommer att introducera dig till det dokumentskelett som JavaScript fungerar med. Med en fungerande kunskap om denna abstrakta dokumentobjektmodell kan du skriva JavaScript. Vad är JavaScript, och kan Internet existera utan det? Vad är JavaScript, och kan Internet existera utan det? JavaScript är ett av de saker som många tar för givet. Alla använder det. Läs mer som fungerar på vilken webbsida som helst.

Introduktion

Hur fungerar webbsidor och JavaScript tillsammans och hur kan de prata med varandra? Svaren ligger i att förstå hur Document Object Model fungerar.

Syftet med DOM

DOM organiserar innehållet på en webbsida och ger en vägkarta i den. Modellen består av noder. Noder är inordnade i en hierarki som man bäst betraktar som en trädstruktur. Vi borde kunna ta någon HTML och representera den på så sätt.

Texten till denna paragraf är till exempel en nod inom dokumentobjektmodellen. Stycket är en annan nod och moderen till textnoden. Dokumentet i sig är i sista hand en moderkod till båda.

Bildkredit: Birger Eriksson via Wikimedia Commons

Vi kan skriva JavaScript för att agera på webbsidan genom att identifiera noder. Eftersom varje innehållsdel är en nod, kan vi då skriva JavaScript som är relevant för vilken enhet vi vill ändra. Du kommer märka att det här liknar hur CSS fungerar Skapa webbgränssnitt: Var ska man börja skapa webbgränssnitt: Var ska vi börja? Vi visar hur webgränssnitt bryts ner, peka ut de nyckelkoncept, verktyg och byggstenar som behövs för att gör dig till en 21st century webbdesigner. Läs mer: det gäller stil, eller visuellt utseende, till innehåll med hjälp av id och klassattribut av HTML-element, precis som JavaScript-kontroller beteende.

Det är viktigt att notera att CSS och JavaScript, finns inte i DOM, men utanför det. De manipulerar både innehållet i DOM, snarare än att bevara det.

Återanvändningskod

Varför hanteras källkoden för webbsidor på detta sätt? Det finns två huvudorsaker:

  1. Att lagra JavaScript i separata filer möjliggör enklare återanvändning av kod. När JavaScript är skrivet inline, bredvid innehållet som det är associerat med, måste det kopieras för att samma funktionalitet ska uppstå på annat håll.
  2. JavaScript separeras i en extern fil gör källkoden mer läsbar genom att ta bort funktionen på webbsidan (JavaScript) från innehållet (HTML).

DOMENS nodar

De noder du skapar och kontrollerar är begränsade till vad HTML-specifikationen och webbläsarna stöder. Det är en orsak till att HTML5: s introduktion av nya element på toppnivå var viktigt. Vad är HTML5, och hur ändrar det hur jag bläddrar? [MakeUseOf Förklarar] Vad är HTML5, och hur ändrar det hur jag bläddrar? [MakeUseOf Explains] Under de senaste åren har du kanske hört termen HTML5 varje gång i taget. Oavsett om du vet någonting om webbutveckling eller inte, kan konceptet vara lite nebulous och förvirrande. Självklart, ... Läs mer .

För våra syften är de viktigaste typerna av noder:

  • Element
  • Attribut
  • Text

Även om specifikationen faktiskt listar tolv totalt.

Använda ett skript för att skapa nodar i DOM

För en enkel demonstration ska vi använda JavaScript för att skapa ett visst element.

Här visar vi hur kraftfull JS är genom att använda den för att skapa ett av webens mest grundläggande och vanliga webbsidobjekt, rubriken.

Att följa med det här exemplet är att skapa en hel virtuell server inte är värt besväret Hur man skapar en virtuell webbutvecklingsmiljö och -server Hur man skapar en virtuell webbutvecklingsmiljö och -server Så hur balanserar du din förmåga att multi-task med din Behöver du utveckla webbapps i det inhemska sammanhanget där de ska springa? Ange virtuella maskiner. Läs mer, så använd en online sandlåda. Du vill ha en lätt lekplats att experimentera med som JSBin. JSBin är bra eftersom det är multi-paned och innehåller ett sätt att se och manipulera allt: HTML, JS, CSS och förhandsgranskningen av webbsidan på en gång.

(Codepen är liknande, och för det här exemplets skull fungerar det lika bra.)

JSBin kan också dynamiskt skapa webbadresser för din JS-scratchpad som kan delas senare. Här är den jag genererade för det här exemplet.

Jag har reproducerat och kommenterat följande snippets för att producera en ny H1-rubrik i kroppen:

  • HTML-kod
  • JavaScript-kod 
    // förklara en ny variabel för att hålla ett nytt h1-element var newHeading = document.createElement ("h1"); // lägg till textnodet i dokumentet var h1Text = document.createTextNode ("Heading Level 1"); // gör det till en barnnod i det nya rubriken newHeading.appendChild (h1Text); // lägg till detta som ett barn av element definierat som "bt" document.getElementById ("bt"). appendChild (newHeading);

Vilket skapar ett nytt H1-element och dess innehåll är direkt underordnad öppnings tagg.

Observera att källkoden HTML i den vänstra rutan inte ändras. Den koden är ganska lätt att läsa i det här exemplet. I avancerad Javascript kan sakerna bli mycket mer komplexa.

Lite om den Lexical struktur av JavaScript

Ovanstående kod har en liten förklaring.

  • var skapar en variabel, som lagrar ett godtyckligt värde för din kod att använda.
  • = är en uppdragsoperatör. Här arbetar den med var termen och den nya variabelns namn (t ex newHeading) för att bilda en fullständig deklaration.
  • object.method är en invokation som använder “punkt” syntax för att skilja objekt, som dokumentera, från de metoder som används för dem, som i getElementById.
    • Konceptet av “objekt” i programmering Var fick "Objektorienterad" programmering få sitt namn från? Var fick "Objektorienterad" programmering få sitt namn från? Objektorienterad är inte bara ett slumpmässigt buzzword som du hör i programmeringscirklar. Det finns en anledning bakom namnet - men vad? Gå med i mig när jag utforskar några av grundarna för att programmera koncept och förklara ... Läs mer meriter mycket diskussion och ligger utanför ramen för denna artikel. Något att säga att de är viktiga komponenter i din ansökan.
    • Metoder är vad du kan förvänta dig: ett visst förfarande eller en planerad åtgärd som kan tillämpas på objekten.

Vi har verkligen fått dig täckt med massor av bra resurser för att lära dig JavaScript Lär dig verkligen JavaScript med 5 Top Udemy-kurser Lär dig verkligen JavaScript med 5 Top Udemy-kurser Javascript är programmets språk på webben. Om du har en anledning att lära sig JavaScript, kan dessa fem utmärkta kurser från Udemy vara platsen för att börja din kodningsresa. Läs mer . Kolla tillbaka till vår programmeringssektion för ännu mer.

Vad kommer härnäst

En av de mest populära ramarna som använder JavaScript är JQuery Making the Web Interactive: En introduktion till jQuery Att göra webben interaktiv: En introduktion till jQuery jQuery är ett skrivbibliotek på klientsidan som nästan alla moderna webbplatser använder - det gör webbplatser interaktiva . Det är inte det enda Javascript-biblioteket, men det är den mest utvecklade, mest stödda och mest använda ... Läs mer. Det är en viktig grund för den senaste iterationen av rika webbsidor och applikationer, och det är där du kanske vill börja nästa.

Hjälpte den här artikeln dig att lära dig mer om att börja JavaScript? Har du ett annat tillvägagångssätt? Vi vill höra från dig i kommentarerna nedan!

Bildkredit: Imagentle via Shutterstock.com

Utforska mer om: JavaScript, Programmering.