Video: Web Development Tutorial for Beginners (#1) - How to build webpages with HTML, CSS, Javascript 2025
Av John Paul Mueller
JavaScript bruker objekter i stor utstrekning. Å vite hvilke objekter å bruke og når er viktige deler av arbeidet med JavaScript. Ved å kjenne nettleseren, Core Document Object Model (DOM) og HTML DOM-objekter, kan du bygge en betydelig del av alle standardprogrammer (og mange enkle applikasjoner). Dette er de mest brukte JavaScript-objektene, så hold dem til fingertuppene.
Slik bruker du JavaScript-nettleserobjekter for å administrere applikasjonsmiljøet
JavaScript-nettobjekter gjør det mulig å oppdage og endre applikasjonsmiljøet. Ved å vite hvor brukeren har gått, hvor brukeren er nå, og hvor du kan ta brukeren, kan du effektivt kontrollere applikasjonsflyten. Selvfølgelig er det viktig å vite hvilken størrelse skjerm brukeren har slik at du kan presentere data på en måte som reflekterer fysikaliteten til brukerens enhet.
Følgende tabell beskriver noen av de mer interessante JavaScript-leseralternativene.
| Objekt | Beskrivelse |
|---|---|
| historie | Gir midler for å undersøke og flytte mellom nettadresser lagret
i nettleserens historie. Du kan se en komplett liste over metoder og egenskaper knyttet til dette objektet på www. w3schools. com / jsref / obj_history. asp. |
| plassering | Inneholder informasjon om den aktuelle nettadressen. Dette objektet gir også
midler for å utføre oppgaver som for eksempel lasting av en ny side eller lasting av gjeldende side. Du kan se en komplett liste over metoder og egenskaper knyttet til dette objektet på www. w3schools. com / jsref / obj_location. asp. |
| navigator | Inneholder informasjon om gjeldende nettleser. For eksempel
kan du bestemme nettlesertypen og om nettleseren har informasjonskapsler aktivert. Du kan se en komplett liste over metodene og egenskaper knyttet til dette objektet på www. w3schools. com / jsref / obj_navigator. asp. |
| skjerm | Angir de fysiske egenskapene til enheten som brukes til
vise siden, inkludert sidens høyde, bredde og fargedybde. Du kan se en komplett liste over metodene og egenskapene knyttet til dette objektet på www. w3schools. com / jsref / obj_screen. asp. |
| vindu | Gir tilgang til nettleservinduet slik at du kan
utføre oppgaver som å vise meldingsbokser. Når du arbeider med sider som inneholder rammer, oppretter nettleseren et vindu for hele HTML-dokumentet og et annet vindu for hver ramme.Du kan se en komplett liste over metodene og egenskapene som er knyttet til dette objektet på www. w3schools. com / jsref / obj_window. asp. |
Slik bruker du Core DOM-objekter for å administrere applikasjonsinnhold
Målet med en hvilken som helst JavaScript-applikasjon er å administrere innhold. Dette betyr å legge til, slette og redigere HTML-dokumentet som inneholder de ulike elementene som strukturerer og støtter innholdet. Disse objektene gir tilgang til alle dokumentdetaljer med hensyn til innhold.
| Objekt | Beskrivelse |
|---|---|
| Attr | Gir tilgang til individuelle attributter i dokumentet.
Du kan se en komplett liste over metodene og egenskapene knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_attr. asp. |
| dokument | Gir tilgang til hele dokumentet. Du kan bruke dette objektet
for å få tilgang til deler av dokumentet. I tillegg lar dette objektet vise informasjon direkte på siden og utføre andre oppgaver relatert til brukergrensesnittet. Du kan se en komplett liste over metodene og egenskapene knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_core_document. asp. |
| Element | Inneholder et enkelt dokumentelement av hvilken som helst type som støttes
som XML. Dette objektet gir tilgang til attributter gjennom Attr-objektet og egenskapene gjennom Node-objektet. Du kan se en komplett liste over metoder og egenskaper knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_element. asp. |
| Hendelser | Støtter tilgang til eksisterende arrangementer og opprettelse av nye.
Du kan se en komplett liste over metodene og egenskapene knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_event. asp. |
| HTMLElement | Inneholder et enkelt HTML-dokumentelement, for eksempel et
avsnitt eller en kontroll. Bruk Element og Node-objektene for å få tilgang til elementattributter og egenskaper. Du kan se en komplett liste over metodene og egenskapene knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_all. asp. |
| Knutep. | Definerer informasjonen til en gitt knutepunkt, som kan inneholde
dokumentet som helhet, et element i dokumentet og en attributt som er gitt som en del av et element, tekst og kommentarer. Du kan se en komplett liste over metodene og egenskapene som er tilknyttet med dette objektet på www. w3schools. com / jsref / dom_obj_node. asp. |
| NodeFilter | Angir hvilke noder som vises i en NodeIterator som brukes til å krysse listen over noder
i et dokument. Du kan se en komplett liste over metodene og egenskaper knyttet til dette objektet på // utvikler. mozilla. org / no / docs / DOM / NodeFilter. |
| NodeIterator | Gir en metode for å skaffe en liste over noder innenfor et
dokument. Ved å krysse listen over noder kan du finne bestemte noder og samhandle med dem. For eksempel kan du finne alle taggenodene og legge til et bestemt attributt til dem. Du kan se en komplett liste over metoder og egenskaper knyttet til dette objektet på // utvikler.mozilla. org / no / docs / DOM / NodeIterator. |
| NodeList | Inneholder en bestilt liste over alle noder i dokumentet
eller i et bestemt område av dokumentet. Du kan se en komplett liste over metoder og egenskaper knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_nodelist. asp. |
| NamedNodeMap | Inneholder en uordnet liste over alle noder i dokumentet
eller i et bestemt område av dokumentet. Du kan se en komplett liste over metoder og egenskaper knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_namednodemap. asp. |
Slik bruker du HTML DOM-objekter for å administrere struktur
Organiserer informasjonen brukeren ser på skjermen i en sammenhengende presentasjon ved hjelp av JavaScript, er viktig. Brukeren bør se HTML-dokumentstrukturen, men strukturen skal støtte innholdet - det bør ikke være oppmerksom på seg selv. Når du arbeider med en side, inneholder strukturen alt fra tabeller til kontroller som brukes til å kommunisere med og administrere innholdet som brukeren er mest interessert i å se. Følgende HTML DOM-objekter hjelper deg med å utføre denne oppgaven når du arbeider med JavaScript.
| Objekt | Beskrivelse |
|---|---|
| Dokument | Gir tilgang til alle elementene på en hel side. Hver
side lastet inn i en nettleser blir et dokumentobjekt som du får tilgang til ved hjelp av dokumentets søkeord. Du kan se en komplett liste av metodene og egenskapene knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_document. asp. |
| Begivenhet | Tillater samhandling med hendelsene og hendelseshåndteringene
knyttet til en side. Hver elementtype har spesifikke hendelser knyttet til den, for eksempel klikkhendelse som er knyttet til -knappobjektet. Du kan se en komplett liste over metoder og egenskaper knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_event. asp. |
| HTMLElement | Gir en grunnklass hvorfra alle HTML-elementene er avledet.
Denne grunnklassen definerer egenskapene og metodene som alle HTML elementene gir. Du kan se en komplett liste over metodene og egenskaper knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_all. asp. |
| Anker | Representerer en HTML-hyperkobling. Du kan se en komplett liste over
metodene og egenskapene knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_anchor. asp. |
| Område | Definerer området i et HTML-bildekart som brukes til å opprette
klikkbare regioner for et grafisk element. Du kan se en komplett liste over metoder og egenskaper knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_area. asp. |
| Base | Angir standardadressen eller et standardmål for alle koblinger
på en side. Du kan se en komplett liste over metodene og egenskaper knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_base. asp. |
| Kropp | Representerer taggen
en del av en side, inkludert alle elementene som finnes i -taggen. Du kan se en komplett liste over metodene og egenskapene knyttet til dette objektet på www.w3schools. com / jsref / dom_obj_body. asp. |
| Knapp | Representerer en knapp på en side. Dette objektet er spesielt
knyttet til taggen, i stedet for tagformen for -knappen. Du kan se en komplett liste over metodene og egenskapene knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_pushbutton. asp. |
| Form | Representerer et skjema og inneholder alle elementene i det
skjemaet. Du kan se en komplett liste over metodene og egenskapene knyttet til dette objektet på www. w3schools. com / jsref / dom_obj_form. asp. |
| Ramme og IFrame | Representerer en ramme (
-taggen) eller en inline-ramme ( |