Video: Code The Snake Game Using JavaScript and HTML5 2024
Af John Paul Mueller
JavaScript bruger genstande udførligt. At vide, hvilke objekter der skal bruges, og hvornår er vigtige dele af arbejdet med JavaScript. Ved at kende browseren, Core Document Object Model (DOM) og HTML DOM objekter kan du bygge en betydelig del af enhver standard applikation (og mange enkle applikationer). Disse er de mest brugte JavaScript-objekter, så hold dem lige ved hånden.
Sådan bruges JavaScript Browserobjekter til at styre applikationsmiljøet
JavaScript-browserobjekter gør det muligt at opdage og ændre applikationsmiljøet. Ved at vide, hvor brugeren er gået, hvor brugeren er nu, og hvor du kan tage brugeren, kan du effektivt styre applikationsflowet. Det er selvfølgelig vigtigt at vide, hvilken skærmstørrelse brugeren har, så du kan præsentere data på en måde, der afspejler fysiske egenskaber hos brugerens enhed.
Nedenstående tabel beskriver nogle af de mere interessante JavaScript-browserindstillinger.
| Objekt | Beskrivelse |
|---|---|
| historie | Giver midler til at undersøge og flytte mellem webadresser, der er gemt
i browserens historie. Du kan se en komplet liste over de metoder og egenskaber, der er knyttet til dette objekt på www. w3schools. dk / jsref / obj_history. asp. |
| placering | Indeholder oplysninger om den aktuelle URL. Dette objekt giver også
midler til at udføre opgaver som f.eks. Indlæsning af en ny side eller genindlæsning af den aktuelle side. Du kan se en komplet liste over de metoder og egenskaber, der er knyttet til dette objekt på www. w3schools. dk / jsref / obj_location. asp. |
| navigator | Indeholder oplysninger om den aktuelle browser. For eksempel
kan du bestemme browstertypen, og om browseren har cookies aktiveret. Du kan se en komplet liste over metoderne og egenskaber tilknyttet dette objekt på www. w3schools. dk / jsref / obj_navigator. asp. |
| skærm | Angiver de fysiske egenskaber ved den enhed, der bruges til
visning af siden, herunder sidehøjde, bredde og farvedybde. Du kan se en komplet liste over metoder og egenskaber der er knyttet til dette objekt på www. w3schools. dk / jsref / obj_screen. asp. |
| vindue | Giver adgang til browservinduet, så du kan
udføre opgaver som at vise meddelelsesbokse. Når du arbejder med sider, der indeholder rammer, opretter browseren et vindue til hele HTML-dokumentet og et andet vindue for hver ramme.Du kan se en komplet liste over de metoder og egenskaber, der er knyttet til dette objekt på www. w3schools. dk / jsref / obj_window. asp. |
Sådan bruges Core DOM-objekter til at styre applikationsindhold
Målet med enhver JavaScript-applikation er at administrere indhold. Dette betyder at tilføje, slette og redigere HTML-dokumentet, der indeholder de forskellige elementer, der strukturerer og understøtter indholdet. Disse objekter giver adgang til alle dokumentets detaljer med hensyn til indhold.
| Objekt | Beskrivelse |
|---|---|
| Attr | Giver adgang til individuelle attributter i dokumentet.
Du kan se en komplet liste over metoder og egenskaber der er knyttet til dette objekt på www. w3schools. dk / jsref / dom_obj_attr. asp. |
| dokument | Giver adgang til hele dokumentet. Du kan bruge dette objekt
for at få adgang til nogen del af dokumentet. Desuden lader dette objekt vise oplysninger direkte på siden og udføre andre opgaver relateret til brugergrænsefladen. Du kan se en komplet liste over metoderne og egenskaberne forbundet med dette objekt på www. w3schools. dk / jsref / dom_obj_core_document. asp. |
| Element | Indeholder et individuelt dokumentelement af enhver type understøttet
som XML. Dette objekt giver adgang til attributter gennem Attr-objektet og egenskaberne gennem Node-objektet. Du kan se en komplet liste over de metoder og egenskaber, der er knyttet til dette objekt på www. w3schools. dk / jsref / dom_obj_element. asp. |
| Begivenheder | Understøtter adgang til eksisterende arrangementer og oprettelse af nye.
Du kan se en komplet liste over metoder og egenskaber der er knyttet til dette objekt på www. w3schools. dk / jsref / dom_obj_event. asp. |
| HTMLElement | Indeholder et individuelt HTML-dokumentelement, såsom et
afsnit eller en kontrol. Brug elementelementerne og Node til at få adgang til elementattributter og egenskaber. Du kan se en komplet liste over metoderne og egenskaberne forbundet med dette objekt på www. w3schools. dk / jsref / dom_obj_all. asp. |
| Knude | Definerer detaljerne for en given node, som kan indeholde
dokumentet som helhed, et element i dokumentet og en attributt, der leveres som en del af et element, tekst og kommentarer. Du kan se en komplet liste over de metoder og egenskaber, der er knyttet til med dette objekt på www. w3schools. dk / jsref / dom_obj_node. asp. |
| NodeFilter | Angiver hvilke noder der vises som en del af en NodeIterator, der bruges til at krydse listen over noder
i et dokument. Du kan se en komplet liste over metoderne og egenskaber der er knyttet til dette objekt på // developer. mozilla. org / da-DK / docs / DOM / NodeFilter. |
| NodeIterator | Giver en metode til at opnå en liste over noder inden for et
dokument. Ved at krydse listen over noder kan du finde bestemte noder og interagere med dem. Du kan f.eks. Finde alle taggenoderne og tilføje en bestemt attribut til dem. Du kan se en komplet liste over de metoder og egenskaber, der er knyttet til dette objekt på // developer.mozilla. org / da-DK / docs / DOM / NodeIterator. |
| NodeList | Indeholder en ordnet liste over alle noderne i dokumentet
eller i et bestemt område af dokumentet. Du kan se en komplet liste over metoder og egenskaber der er knyttet til dette objekt på www. w3schools. dk / jsref / dom_obj_nodelist. asp. |
| NamedNodeMap | Indeholder en uordnet liste over alle noderne i dokumentet
eller i et bestemt område af dokumentet. Du kan se en komplet liste over metoder og egenskaber der er knyttet til dette objekt på www. w3schools. dk / jsref / dom_obj_namednodemap. asp. |
Sådan bruger du HTML DOM-objekter til at styre strukturen
At organisere de oplysninger, brugeren ser på skærmen, til en sammenhængende præsentation ved hjælp af JavaScript, er vigtig. Brugeren skal se HTML-dokumentstrukturen, men strukturen skal understøtte indholdet - det bør ikke være opmærksom på sig selv. Når du arbejder med en side, indeholder strukturen alt fra tabeller til kontroller, der bruges til at interagere med og styre det indhold, som brugeren er mest interesseret i at se. Følgende HTML DOM-objekter hjælper dig med at udføre denne opgave, når du arbejder med JavaScript.
| Objekt | Beskrivelse |
|---|---|
| Dokument | Giver adgang til alle elementer på en hel side. Hver
side, der er indlæst i en browser, bliver et dokumentobjekt, som du har adgang til ved hjælp af dokumentets søgeord. Du kan se en komplet liste af metoderne og egenskaberne tilknyttet dette objekt på www. w3schools. dk / jsref / dom_obj_document. asp. |
| Hændelse | Tillader interaktion med begivenheder og hændelseshåndteringsværktøjer
tilknyttet en side. Hver elementtype har specifikke begivenheder der er knyttet til det, såsom klikhændelsen, der er forbundet med -knappen. Du kan se en komplet liste over metoder og egenskaber der er knyttet til dette objekt på www. w3schools. dk / jsref / dom_obj_event. asp. |
| HTMLElement | Giver en basisklasse, hvorfra alle HTML-elementer er afledt.
Denne basisklasse definerer de egenskaber og metoder, som alle HTML elementer giver. Du kan se en komplet liste over metoderne og egenskaber tilknyttet dette objekt på www. w3schools. dk / jsref / dom_obj_all. asp. |
| Anker | Representerer en HTML-hyperlink. Du kan se en komplet liste over
metoderne og egenskaberne forbundet med dette objekt på www. w3schools. dk / jsref / dom_obj_anchor. asp. |
| Område | Definerer området inden for et HTML-billedkort, der bruges til at oprette
klikbare regioner for et grafisk element. Du kan se en komplet liste over metoder og egenskaber der er knyttet til dette objekt på www. w3schools. dk / jsref / dom_obj_area. asp. |
| Base | Angiver standardadressen eller et standardmål for alle links
på en side. Du kan se en komplet liste over metoderne og egenskaber tilknyttet dette objekt på www. w3schools. dk / jsref / dom_obj_base. asp. |
| Krop | Representerer taggen
en del af en side, herunder alle de elementer, der er indeholdt i den tag. Du kan se en komplet liste over metoder og egenskaber der er knyttet til dette objekt på www.w3schools. dk / jsref / dom_obj_body. asp. |
| Knap | Representerer en knap på en side. Dette objekt er specifikt
forbundet med taggen snarere end tagformen . Du kan se en komplet liste over metoder og egenskaber der er knyttet til dette objekt på www. w3schools. dk / jsref / dom_obj_pushbutton. asp. |
| Form | Representerer en formular og indeholder alle elementerne i den
formular. Du kan se en komplet liste over metoder og egenskaber der er knyttet til dette objekt på www. w3schools. dk / jsref / dom_obj_form. asp. |
| Ramme og IFrame | Representerer en ramme (
-taggen) eller en inline-ramme ( |