JavaScript og webutvikling ved hjelp av dokumentobjektmodellen

Denne artikkelen vil introdusere deg til dokumentskjelettet som JavaScript fungerer med. Å ha et arbeidskunnskap om denne abstrakte dokumentobjektmodellen, kan du skrive JavaScript Hva er JavaScript, og kan Internett eksistere uten det? Hva er JavaScript, og kan Internett eksistere uten det? JavaScript er en av de tingene mange tar for gitt. Alle bruker det. Les mer som fungerer på en hvilken som helst nettside.

Introduksjon

Hvordan fungerer nettsider og JavaScript sammen, og hvordan kan de snakke med hverandre? Svarene ligger i å forstå hvordan Document Object Model fungerer.

Formålet med DOM

DOM organiserer innholdet på en nettside og gir et veikart inn i den. Modellen består av noder. Noder er ordnet inn i et hierarki som er best tenkt på som en trestruktur. Vi burde kunne ta noen HTML og representere den på den måten.

For eksempel er teksten i dette avsnittet en node i dokumentobjektmodellen. Avsnittet er en annen node og overordnet til tekstnoden. Dokumentet i seg selv er til slutt en overordnet node til begge.

Vi kan skrive JavaScript for å fungere på nettsiden ved å identifisere noder. Siden hvert innhold er en node, kan vi da skrive JavaScript som er relevant for den enheten vi ønsker å endre. Du vil merke at dette ligner hvordan CSS fungerer. Opprette webgrensesnitt: Hvor skal du begynne å lage webgrensesnitt: Hvor skal du begynne? Vi viser deg hvordan nettgrensesnitt bryter sammen, og påpeker de viktigste konseptene, verktøyene og byggeklossene som trengs for å gjør deg selv til en 21. århundre webdesigner. Les mer: Det gjelder stil, eller visuelt utseende, til innhold ved å bruke id og klassegenskaper av HTML-elementer, akkurat som JavaScript-kontrolleradferd.

Det er viktig å merke seg at CSS og JavaScript ikke finnes i DOM, men utenfor det. De begge manipulerer innholdet i DOM, i stedet for å bebo det.

Gjenbrukskode

Hvorfor er kildekoden for nettsider administrert på denne måten? Det er to hovedårsaker:

1. Lagring av JavaScript i separate filer gjør at koden kan gjenbrukes lettere. Når JavaScript er skrevet inn, ved siden av innholdet det er knyttet til, må det kopieres for at samme funksjonalitet skal forekomme andre steder.
2. JavaScript separert i en ekstern fil gjør kildekoden mer lesbar ved å fjerne funksjonaliteten til websiden (JavaScript) fra innholdet (HTML).

Nodene til DOM

Nodene du lager og kontrollerer, er begrenset til hva HTML-spesifikasjonen og nettleserne støtter. Det er en grunn til at HTML5s introduksjon av nye toppnivåelementer var viktig. Hva er HTML5, og hvordan endrer den måten jeg søker på? [MakeUseOf Forklarer] Hva er HTML5, og hvordan endrer den måten jeg bla gjennom? [MakeUseOf Forklarer] I løpet av de siste årene har du kanskje hørt begrepet HTML5 hver gang en gang. Uansett om du vet noe om webutvikling eller ikke, kan konseptet være litt nøysomt og forvirrende. Åpenbart, ... Les mer .

For våre formål er de viktigste typene av noder:

• Element
• Egenskap
• Tekst

Selv om spesifikasjonen faktisk lister tolv i det hele tatt.

Bruke et skript for å lage noder i DOM

For en enkel demonstrasjon skal vi bruke JavaScript for å lage et bestemt element.

Her viser vi hvor kraftig JS er ved å bruke den til å lage en av webens mest grunnleggende og vanlige nettsideobjekter, overskriften.

For å følge med dette eksempelet, er det ikke verdt å opprette en hel virtuell server. Hvordan lage en virtuell webutviklingsmiljø og -server Hvordan lage en virtuell webutviklingsmiljø og -server Så hvordan balanserer du muligheten til multi-oppgave med din må du utvikle webapper i den innfødte konteksten der de skal kjøre? Skriv inn virtuelle maskiner. Les mer, så bruk en online sandkasse. Du vil ha en lett lekeplass for å eksperimentere med som JSBin. JSBin er flott fordi det er multi-paned, og inkluderer en måte å se og manipulere alt på: HTML, JS, CSS og forhåndsvisning av nettsiden alt på en gang.

(Codepen er lik, og for dette eksemplets skyld vil det fungere like bra.)

JSBin kan også dynamisk opprette nettadresser for JS-skrapelodden som kan deles senere. Her er den jeg genererte for dette eksemplet.

Jeg har reprodusert og kommentert følgende utdrag for å produsere en ny H1-overskrift i kroppen:

• HTML-kode
• JavaScript-kode

  // erklære en ny variabel for å holde et nytt h1 element var newHeading = document.createElement ("h1"); // legg til tekstnoden til dokumentet var h1Text = document.createTextNode ("Overskrift Nivå 1"); // gjør det til en barnekode av den nye overskriften newHeading.appendChild (h1Text); // legg til dette som et barn av element definert som "bt" document.getElementById ("bt"). appendChild (newHeading);

Som skaper et nytt H1-element og dets innhold direkte underordnet åpningstegn.

Legg merke til at kilden HTML i venstre rute ikke endres. Denne koden er ganske lett å lese i dette eksemplet. I avansert Javascript kan ting bli mye mer komplisert.

En liten om Lexical Structure of JavaScript

Ovennevnte brikke har en liten forklaring.

• Var lager en variabel, som lagrer en vilkårlig verdi for koden din skal bruke.
• = er en oppdragsoperatør. Her opererer den med Var termen og den nye variabelenes navn (for eksempel newHeading) for å danne en fullstendig deklarasjon.
• object.method er en invokasjon som bruker “punktum” syntaks for å skille objekter, som dokument, fra metodene som brukes i forhold til dem, som i getElementById.
  • Konseptet av “objekter” i programmering Hvor fikk "Objektorientert" programmering få navn fra? Hvor fikk "Object Oriented" Programmering få navnet sitt? Objektorientert er ikke bare et tilfeldig buzzword du hører i programmeringssirkler. Det er en grunn bak navnet - men hva? Bli med meg da jeg undersøker noen av grunnleggende prinsippene for programmeringskonsepter og forklarer ... Les mer fortjener mye diskusjon og er utenfor rammen av denne artikkelen. Nok til å si at de er viktige komponenter i søknaden din.
  • Metoder er det du forventer: en bestemt prosedyre eller planlagt handling som kan brukes på objektene.

Vi har sikkert fått deg dekket med mange gode ressurser for å lære JavaScript Lær deg JavaScript med 5 Top Udemy Courses Lær deg JavaScript med 5 Top Udemy Courses JavaScript er programmeringsspråket på nettet. Hvis du har grunn til å lære JavaScript, kan disse fem utmerkede kursene fra Udemy være stedet å begynne din kodende reise. Les mer . Gå tilbake til vår programmeringsseksjon for enda mer.

Hva blir det neste

En av de mest populære rammene som bruker JavaScript, er JQuery Making The Web Interactive: En introduksjon til jQuery Gjør Internett interaktivt: En introduksjon til jQuery jQuery er et script-bibliotek på klientsiden som nesten alle moderne nettsider bruker - det gjør nettsider interaktive . Det er ikke det eneste Javascript-biblioteket, men det er den mest utviklede, mest støttede og mest brukte ... Les mer. Det er et viktig grunnlag for den nyeste iterasjonen av rike nettsider og applikasjoner, og det er her du kanskje vil starte neste.

Hjalp denne artikkelen deg til å lære mer om begynnelsen av JavaScript? Har du en annen tilnærming? Vi vil høre fra deg i kommentarene nedenfor!

Image Credit: Imagentle via Shutterstock.com

Utforsk mer om: JavaScript, Programmering.