JavaScript kommer med et væld af indbyggede objekter, der hjælper dig med at udføre almindelige programmeringsopgaver. Du kan oprette en ny variabel af enhver type, du ønsker. JavaScript understøtter også en række andre indbyggede objekter, der hjælper dig interagere med de sider, du opretter. Der er tre grundlæggende objekttyper: browser, Document Object Model (DOM), og indbygget.
JavaScript browser objekter
Her er en hurtig oversigt over nogle af de mere interessante JavaScript browser objekter - dem, der vedrører, hvordan browseren udfører opgaver:
- historie: Giver midlerne til at undersøge og flytte mellem webadresser gemt i browserens historie.
- placering: Indeholder oplysninger om den aktuelle URL. Dette objekt indeholder også midler til at udføre opgaver såsom at indlæse en ny side eller genindlæse den aktuelle side.
- navigator: Indeholder oplysninger om den aktuelle browser. For eksempel kan du bestemme, hvilken type browser og version, og afgøre, om browseren har cookies aktiveret.
- skærmen: Angiver de fysiske egenskaber af den enhed bruges til at vise siden, herunder side højde, bredde og farvedybde.
- vindue: Giver adgang til browserens vindue, så du kan udføre opgaver såsom visning besked bokse. Når man arbejder med sider, der indeholder rammer, browseren skaber et vindue for hele HTML-dokument og et andet vindue for hver ramme.
Indbygget DOM objekter
JavaScript understøtter også specielle objekter for DOM. DOM er en platform og browser uafhængig måde at beskrive indholdet, struktur og stil af dokumenter. Hver side, du indlæse i browseren er en del af DOM.
Følgende liste giver et kort overblik over den indbyggede DOM objekter:
- Attr: Giver adgang til de enkelte attributter i dokumentet.
- dokument: Giver adgang til hele dokumentet. Du kan bruge dette objekt til adgang til nogen del af dokumentet. Desuden objektet kan du vise oplysninger direkte på siden og udføre andre opgaver i forbindelse med brugergrænsefladen.
- Element: Indeholder et enkelt dokument element i enhver type understøttes som XML. Dette objekt giver adgang til attributter gennem Attr objekt og egenskaber gennem Node objektet.
- Arrangementer: Understøtter adgang til eksisterende arrangementer og etablering af nye.
- HTMLElement: Indeholder en individuel HTML-dokument element, såsom et afsnit eller en kontrol. Brug elementet og Knude objekter for at få adgang til element attributter og egenskaber.
- Node: Definerer oplysninger om en given knude, som kan omfatte dokumentet som helhed, et element i dokumentet, en attribut leveres som en del af et element, tekst og kommentarer.
- NodeFilter: Angiver, hvilke knuder vises som en del af en NodeIterator bruges til at krydse en liste af knudepunkter i et dokument.
- NodeIterator: tilvejebringer en fremgangsmåde til opnåelse af en liste af knudepunkter i et dokument. Kørsel af listen over noder kan hjælpe dig med at finde bestemte noder og interagere med dem. For eksempel kan du finde alle de <input> Tag noder og tilføje en særlig egenskab for dem.
- NodeList: Indeholder en ordnet liste over alle de knudepunkter i det dokument eller i et bestemt område af dokumentet.
- NamedNodeMap: Indeholder en uordnet liste over alle de knudepunkter i det dokument eller i et bestemt område af dokumentet.
JavaScript understøtter en række yderligere indbyggede objekter. Disse beskriver simpelthen de objekter, du bruger mest. Check her for at se en komplet liste over indbyggede JavaScript-objekter.
Sådan bruger indbyggede objekter
Du kan bruge nogle af de indbyggede objekter til at skabe nogle interessante indhold til en side. Siden indeholder en simpel overskrift og følgende knap:
<Input type = "knappen"
value = "Skærmvisning Stats"
onclick = "DisplayScreenStats ()">
Når koden kalder DisplayScreenStats (), det forespørger brugeren om at vise statistik på skærmen. Når brugeren klikker OK, funktionen opnår og viser de nødvendige oplysninger ved at skabe de nødvendige noder på siden. Med andre ord, det eksempel faktisk tilføjer nye tags til siden for at indeholde den brugerdefinerede indhold.
Her er koden for DisplayScreenStats () funktion.
funktion DisplayScreenStats ()
{
// Spørg brugeren om at vise skærmen
// Information.
Var doit = window.confirm (
"Vis skærmbilledet dimensioner?");
// Hvis brugeren enig, vise informationen.
hvis (DOIT)
{
// Opret en ny <p> tag til at gemme data.
var Para = document.createElement ("p");
// Opret en ny <br> tag for at give plads.
var Spacer1 = document.createElement ("br");
var spacer2 = document.createElement ("br");
// Opret indhold til <p> tag.
Var Content1 = document.createTextNode (
"Bredde:" + window.screen.width);
Var indhold2 = document.createTextNode (
"Højde:" + window.screen.height);
Var Content3 = document.createTextNode (
"Farver:" + window.screen.colorDepth);
// Tilføj indhold til <p> tag.
Para.appendChild (Content1);
Para.appendChild (Spacer1);
Para.appendChild (indhold2);
Para.appendChild (spacer2);
Para.appendChild (Content3);
// Vis <p> tag på siden.
document.body.appendChild (Para);
}
}
Den bekræfte () -funktionen opretter en dialogboks, der indeholder to knapper: OK og Annuller. Når brugeren klikker OK, doit indeholder sandt. Ellers doit indeholder falsk. Det tester doit og når doit er sandt, den funktion opnår og viser statistik skærmen skærmen.
Den document.createElement () metode kan skabe nye elementer til dig. I dette eksempel kode bruger dem til at oprette en <p> tag og en <br> tag. Den <p> tag holder det indhold, du ønsker at se skærmen, og den <br> tag skaber plads mellem de enkelte statistikker. Du kan bruge denne metode til at skabe en juridisk tag, HTML5 understøtter.
Indholdet er tekst, så du skal bruge document.createTextNode () metode til at skabe en tekst node. Inden for denne node, du placerer det indhold, du vil have vist som en del af <p> tag. Den window.screen objekt giver adgang til ejendomme, der indeholder oplysninger om browserens vindue. I dette tilfælde viser programmet indholdet af bredde, højde og colorDepth egenskaber.
Alt du på dette punkt er en ny <p> tag, som ingen kan se. For at få vist <p> tag, koden kalder document.body.appendChild () for at tilføje <p> tag til resten af oplysningerne på siden. Oplysningerne fra din browser vil være anderledes, men siden vil hovedsagelig se det samme.
