Video: Web Development Tutorial for Beginners (#1) - How to build webpages with HTML, CSS, Javascript 2024
Av John Paul Mueller
JavaScript använder objekt i stor utsträckning. Att veta vilka objekt som ska användas och när är viktiga delar av att arbeta med JavaScript. Genom att känna till webbläsaren, Core Document Object Model (DOM) och HTML DOM-objekt kan du bygga en stor del av alla standardprogram (och många enkla applikationer). Dessa är de vanligaste JavaScript-objekten, så håll dem till hands.
Använda JavaScript-webbläsarobjekt för att hantera applikationsmiljön
Javascript-webbläsarobjekt gör det möjligt att upptäcka och ändra applikationsmiljön. Genom att veta var användaren har gått, var användaren är nu och var du kan ta användaren kan du effektivt styra applikationsflödet. Det är självklart viktigt att veta vilken skärm som användaren har för att kunna presentera data på ett sätt som återspeglar användarens enhetens fysikalitet.
Följande tabell visar några av de mer intressanta JavaScript-webbläsaralternativen.
| Objekt | Beskrivning |
|---|---|
| historia | Ger medel för att undersöka och flytta mellan webbadresser som är lagrade
i webbläsarens historia. Du kan se en komplett lista över de metoder och egenskaper som är associerade med det här objektet på www. W3Schools. com / jsref / obj_history. asp. Plats |
| Innehåller information om den aktuella webbadressen. Det här objektet ger också möjlighet att utföra uppgifter som att ladda upp en ny sida eller | om att ladda om den aktuella sidan. Du kan se en komplett lista över de metoder och egenskaper som är associerade med det här objektet på www. W3Schools. com / jsref / obj_location. asp.
navigator Innehåller information om den aktuella webbläsaren. Till exempel kan du bestämma webbläsartypen och om webbläsaren har |
| cookies aktiverade. Du kan se en komplett lista över metoder och | egenskaper som är associerade med det här objektet på www. W3Schools. com / jsref / obj_navigator. asp.
skärm Anger de fysiska egenskaperna hos den enhet som används för att visa sidan, inklusive sidhöjd, bredd och färgdjup. |
| Du kan se en komplett lista över metoder och egenskaper | som är associerade med det här objektet på www. W3Schools. com / jsref / obj_screen. asp.
fönstret Ger tillgång till webbläsarens fönster så att du kan utföra uppgifter som att visa meddelandefält. När du arbetar med |
| sidor som innehåller ramar skapar webbläsaren ett fönster för | hela HTML-dokumentet och ett annat fönster för varje ram.Du kan se
en komplett lista över metoder och egenskaper som är associerade med detta -objekt på www. W3Schools. com / jsref / obj_window. asp.
Så här använder du Core DOM-objekt för att hantera applikationsinnehåll Målet med någon JavaScript-applikation är att hantera innehåll. Det innebär att lägga till, radera och redigera HTML-dokumentet som innehåller de olika elementen som strukturerar och stöder innehållet. Dessa objekt ger tillgång till alla dokumentuppgifter med avseende på innehåll. |
Beskrivning
Attr
| Ger tillgång till enskilda attribut i dokumentet. | Du kan se en komplett lista över metoder och egenskaper |
|---|---|
| som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_attr. asp. | dokument
Ger tillgång till hela dokumentet. Du kan använda detta objekt för att komma åt någon del av dokumentet. Dessutom låter det här objektet |
| visa information direkt på sidan och utföra andra | uppgifter relaterade till användargränssnittet. Du kan se en komplett lista över
metoder och egenskaper som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_core_document. asp. Element Innehåller ett enskilt dokumentelement av vilken typ som helst som stöds som XML. Detta objekt ger tillgång till attribut genom Attr-objektet och egenskaperna genom nodobjektet. Du kan se en komplett lista över de metoder och egenskaper som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_element. asp. |
| Händelser | Stöder tillgång till befintliga händelser och skapande av nya.
Du kan se en komplett lista över metoder och egenskaper som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_event. asp. |
| HTMLElement | Innehåller ett enskilt HTML-dokumentelement, till exempel en
stycke eller en kontroll. Använd Element och Node-objekten för att få tillgång till |
| elementattribut och egenskaper. Du kan se en komplett lista över | metoder och egenskaper som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_all. asp.
Node Definierar uppgifterna för vilken nod som helst, som kan innehålla dokumentet som helhet, ett element i dokumentet och ett attribut för som tillhandahålls som en del av ett element, text och kommentarer. Du |
| kan se en komplett lista över metoder och egenskaper som är associerade | med det här objektet på www. W3Schools. com / jsref / dom_obj_node. asp.
NodeFilter Anger vilka noder visas som en del av en NodeIterator som används för att korsa listan över noder i ett dokument. Du kan se en komplett lista över metoder och egenskaper som är associerade med det här objektet på // developer. mozilla. org / sv-SE / docs / DOM / NodeFilter. |
| NodeIterator | Ger en metod för att erhålla en lista med noder inom ett
dokument. Genom att korsa listan med noder kan du hitta specifika noder och interagera med dem. Till exempel kan du hitta alla |
| taggenoderna och lägga till ett | särskilt attribut för dem. Du kan se en komplett lista över metoder och egenskaper som är associerade med det här objektet på // utvecklaren.mozilla. org / sv-SE / docs / DOM / NodeIterator.
NodeList Innehåller en ordnad lista över alla noder i dokumentet eller i ett visst område i dokumentet. Du kan se en komplett lista över metoder och egenskaper som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_nodelist. asp. |
| NamedNodeMap | Innehåller en orörd lista över alla noder i dokumentet
eller i ett visst område i dokumentet. Du kan se en komplett lista över metoder och egenskaper som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_namednodemap. asp. |
| Hur man använder HTML DOM-objekt för att hantera struktur | Det är viktigt att organisera informationen som användaren ser på skärmen i en sammanhängande presentation med hjälp av JavaScript. Användaren ska se HTML-dokumentstrukturen, men strukturen ska stödja innehållet - det bör inte uppmärksamma sig själv. När du arbetar med en sida innehåller strukturen allt från tabeller till kontroller som används för att interagera med och hantera det innehåll som användaren är mest intresserad av att se. Följande HTML DOM-objekt hjälper dig att utföra den här uppgiften när du arbetar med JavaScript.
Objekt Beskrivning Dokument |
Ger tillgång till alla element på en hel sida. Varje
sida som laddas in i en webbläsare blir ett dokumentobjekt som du åtkomst till med hjälp av dokumentets sökord. Du kan se en komplett lista
| av metoderna och egenskaperna som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_document. asp. | Händelse |
|---|---|
| Tillåt interaktion med händelser och händelsehanterare | som är associerade med en sida. Varje elementstyp har särskilda händelser
som är associerade med den, till exempel klickhändelsen som är associerad med -knappobjektet. Du kan se en komplett |
| lista över metoder och egenskaper som är associerade med det här objektet på | www. W3Schools. com / jsref / dom_obj_event. asp.
HTMLElement Ger en basklass från vilken alla HTML-element är härledda. Denna basklass definierar de egenskaper och metoder som alla HTML -element tillhandahåller. Du kan se en komplett lista över metoder och egenskaper som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_all. asp. |
| Anchor | Representerar en HTML-hyperlänk. Du kan se en komplett lista över
metoder och egenskaper som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_anchor. asp. Område Definierar området inom en HTML-bildkarta som används för att skapa |
| klickbara regioner för ett grafiskt element. Du kan se en komplett | lista över metoder och egenskaper som är associerade med det här objektet på
www. W3Schools. com / jsref / dom_obj_area. asp. |
| Bas | Anger standardadressen eller ett standardmål för alla länkar
på en sida. Du kan se en komplett lista över metoder och egenskaper som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_base. asp. Body |
| Representerar taggen | av en sida, inklusive alla element som ingår i den
-taggen. Du kan se en komplett lista över metoder och egenskaper som är associerade med det här objektet på www.W3Schools. com / jsref / dom_obj_body. asp. |
| Knapp | Representerar en knapp på en sida. Detta objekt är specifikt
förknippat med taggen, snarare än taggformen för -knappen. Du kan se en komplett lista över metoder och egenskaper |
| som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_pushbutton. asp. | Form
Representerar en blankett och innehåller alla element inom det här formuläret . Du kan se en komplett lista över metoder och egenskaper som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_form. asp. Ram och IFrame |
| Representerar en ram ( | -taggen) eller en inline-ram (-taggen) och alla element inom
den taggen. Du kan se en komplett lista över metoder och egenskaper |
| som är associerade med det här objektet på www. W3Schools. com / jsref / dom_obj_frame. asp. | Frameset
Ger tillgång till en ramsats som innehåller två eller flera ramar. |