| Previous | Table of Contents | Next |
| JavaScript Math Object | JavaScript Document Object |
Het JavaScript-vensterobject staat bovenaan de JavaScript-objecthiërarchie en vertegenwoordigt het browservenster (of vensters als er meer dan één browservenster tegelijk geopend is). Tot dit hoofdstuk hebben we ons gericht op de internals en syntaxis van JavaScript. In dit hoofdstuk zullen we beginnen om dingen te laten gebeuren op het scherm (die, immers, is een van de belangrijkste doeleinden van JavaScript). Het vensterobject stelt ontwikkelaars in staat om taken uit te voeren zoals het openen en sluiten van browservensters, het weergeven van waarschuwings-en prompt-dialoogvensters en het instellen van time-outs (het specificeren van een actie die na een bepaalde periode moet plaatsvinden). Hoewel Timeouts een functie zijn van het window object zullen we ze behandelen in het Javascript Timeouts hoofdstuk, in plaats van in dit hoofdstuk.
Referencing the JavaScript window Object
zoals behandeld in JavaScript Object Basics is het meestal nodig om dot-notation te gebruiken bij toegang tot Eigenschappen of methoden van een object. Het volgende scriptfragment heeft bijvoorbeeld toegang tot de write () – methode van het documentobject:
document.write("Hello");
het vensterobject is het hoogste object van de objecthiërarchie. Als zodanig, wanneer een object methode of eigenschap wordt verwezen in een script zonder de objectnaam en punt prefix wordt aangenomen dat JavaScript een lid van het venster object. Dit betekent bijvoorbeeld dat bij het aanroepen van de window alert() methode om een waarschuwingsvenster weer te geven het venster. prefix is niet verplicht. Daarom is de volgende methode roept bereiken hetzelfde ding:
window.alert();alert()
report this ad JavaScript window Object Properties
Het Javascript window object bevat een aantal eigenschappen die kunnen worden geïnspecteerd en gebruikt in een script:
- venster.gesloten: Deze eigenschap geeft aan of een venster al dan niet is gesloten wanneer meerdere vensters worden gebruikt.
- venster.defaultstatus / venster.status: defaultstatus specificeert het standaardbericht dat wordt weergegeven in de statusbalk van de browser. status geeft een tijdelijk bericht op dat in de statusbalk van de browser moet worden weergegeven in plaats van het standaardbericht. Uitgeschakeld in veel browsers.
- venster.frames-als het venster frames bevat bevat deze array de array van frame objecten (zie JavaScript Arrays details over toegang tot arrays).
- window.name -vensters die door een script worden geopend, moeten een naam krijgen. Deze eigenschap bevat de naam van het bijbehorende vensterobject.
- venster.opener-wanneer een venster geopend is in een script dat zich in een ander venster bevindt, bevat deze eigenschap van het dochtervenster een referentievenster dat het venster geopend heeft.
- venster.parent-bij het werken met frames in een venster bevat deze eigenschap een verwijzing naar het vensterobject dat het frame bevat.
- venster.scherm-een object dat informatie bevat over het scherm waarop het venster wordt weergegeven (eigenschappen in dit object omvatten hoogte, breedte, availHeight, availWidth en colorDepth).
- venster.self-een verwijzing naar het huidige venster.
- venster.top-een verwijzing naar het venster op het hoogste niveau bij het werken met frames.
browservensters Openen met JavaScript
een nieuw browservenster kan worden geopend vanuit een JavaScript-script met behulp van de open () – methode van het window-object. De syntaxis voor het openen van een nieuw venster is als volgt:
newWindowObj = window.open("URL", "WindowName", "feature, feature, feature ... ");
het volgende geeft een uitleg van de argumenten die worden doorgegeven aan de open() methode:
- URL – geeft de URL van de webpagina aan die in het nieuwe venster moet worden geladen. Als er geen URL is opgegeven, wordt een leeg venster geladen.
- WindowName-specificeert de vensternaam en wordt gebruikt om naar het venster te verwijzen.
- functies-een door komma ‘ s gescheiden lijst met functies waarmee u het uiterlijk van het venster kunt aanpassen. Opties zijn:
| Setting | Uitleg | |
|---|---|---|
| breedte | hiermee Geeft u de oorspronkelijke breedte van het browser-venster (zie innerWidth voor de grootte van het gebied inhoud) | |
| hoogte | Hiermee wordt de initiële hoogte van het browser-venster (zie innerHeight voor de grootte van het gebied inhoud) | |
| innerWidth | hiermee Geeft u de oorspronkelijke breedte van het venster gebied inhoud | |
| innerHeight | Hiermee wordt de initiële hoogte van het venster inhoud gebied | outerWidth | de initiële breedte van het navigatorvenster |
| outerHeight | de initiële hoogte van het navigatorvenster | |
| werkbalk | geeft aan of het venster de browserwerkbalk moet bevatten of niet | status | geeft aan of het venster al dan niet de statusbalk van de browser moet bevatten |
| afhankelijk | geeft aan of het venster moet sluiten in harmonie met het bovenliggende venster | menubalk | geeft aan of het venster bevat het browsermenu |
| locatie | geeft aan of het venster het browserlocatie/URL-vak | |
| schuifbalken | verbergt/toont browser horizontale/verticale schuifbalken | |
| resizable | geeft aan of de gebruiker het recht heeft om het venster te wijzigen nadat het verschijnt. | |
| mappen | geeft aan of het venster de persoonlijke werkbalk van de browser moet bevatten. | |
| copyHistory | geeft aan of het nieuwe venster een kopie moet bevatten van de URL-geschiedenis van het aanroepende venster | |
| left | geef het aantal pixels OP Vanaf de linkerkant van het scherm naar het nieuwe venster | |
| top | geef het aantal pixels OP Vanaf de bovenkant van het scherm naar het nieuwe venster | |
| alwayslowered | maakt een nieuw venster aan dat altijd onder de andere browservensters wordt geplaatst. Vaak gebruikt voor die vervelende pop-under advertenties. | |
| alwaysRaised | maakt een nieuw venster aan dat altijd boven de andere browservensters op het scherm wordt geplaatst. | |
| z-lock | vergrendelt het niveau waarop de browser verschijnt ten opzichte van andere browservensters. |
de hoogte -, breedte-en positiefuncties worden ingesteld met behulp van getallen. De overige opties kunnen worden ingesteld met true of false waarden (ook ja, nee en 1 en 0 kunnen worden gebruikt in plaats van true En false). Een afwezig attribuut wordt als onwaar beschouwd. Het volgende voorbeeld maakt een nieuw venster aan met een menubalk, een specifieke dimensie en geen werkbalk:
newWindowObj = window.open("URL", "WindowName", "toolbar=0, menubar=1, innerHeight=200, innerWidth=300");
browservensters sluiten met JavaScript
een venster kan worden gesloten met de methode close() van het window object. De naam van het venster (opgegeven in de open() methode) moet worden verwezen bij het uitvoeren van een sluiten, zodat u zeker bent om het juiste venster te sluiten. Bijvoorbeeld de volgende code maakt een nieuw venster aan en maakt een drukknop die, wanneer u erop klikt, het nieuwe venster sluit:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Close Window" onclick="newWindowObj.close()" /></form>
Het is ook mogelijk om het venster te sluiten dat het huidige venster opende met behulp van de eigenschap opener van het huidige vensterobject:
window.opener.close()
Dit zal het venster sluiten dat het venster opende waarin het bovenstaande script wordt uitgevoerd.
vensters verplaatsen en herschalen
een venster kan worden verplaatst naar specifieke coördinaten op het scherm met behulp van de methode moveTo() van het vensterobject, die X-en y-coördinaten als argumenten neemt. Het volgende voorbeeld verplaatst een nieuw venster naar locatie 100, 200 op het scherm wanneer de “Move Window” knop wordt ingedrukt:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>
naast het verplaatsen van een venster naar een specifieke nieuwe locatie is het ook mogelijk om een venster relatief aan zijn huidige locatie op het scherm te verplaatsen met behulp van de moveby() methode van het Javascript window object. Nogmaals neemt de methode x-en y-waarden die worden toegevoegd aan de huidige X-en y-coördinaten van het opgegeven venster. Negatieve waarden kunnen worden gebruikt om de richting van de beweging te veranderen:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>
De venstermethoden resizeTo() en resizeBy() werken op dezelfde manier, zodat u de grootte van een venster kunt wijzigen naar een specifieke grootte, of naar een nieuwe grootte ten opzichte van de huidige grootte.
Vensterfocus wijzigen
wanneer een venster het momenteel geselecteerde venster op het scherm is, wordt gezegd dat het focus heeft. Typisch, klikken met de muisaanwijzer in een venster geeft dat venster focus. Met JavaScript is het mogelijk om programmatisch de focus van een venster te veranderen met behulp van de focus() en blur() methoden. Het volgende voorbeeld toont een nieuw venster, vervaagt het zodat het openingsvenster nog steeds focus heeft en biedt een knop om de focus naar het nieuwe venster te schakelen:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");newWindowObj.blur();</script><form action="null"> <input type="button" value="Focus New Window" onclick="newWindowObj.focus()" /></form>
dialoogvensters van het berichtenvenster
Het Javascript – vensterobject biedt methoden om drie typen dialoogvensters van het bericht weer te geven, de dialoogvensters waarschuwing, bevestiging en prompt:
- alert-bedoeld om een bericht aan de gebruiker weer te geven. Het bevat een bericht gebied waar het waarschuwingsbericht moet worden weergegeven en een” OK ” knop die de gebruiker kan klikken om het dialoogvenster te sluiten. De alert () methode neemt een enkel argument dat het bericht moet worden weergegeven in het dialoogvenster. Het volgende fragment van de webpagina toont een waarschuwingsvenster met het bericht ” U heeft geen geldig wachtwoord “wanneer op de knop” waarschuwing tonen”wordt geklikt:
<form action="null"> <input type="button" value="Show Alert" onclick="window.alert('You do not have a valid password')" /></form>
- bevestiging – wordt gebruikt wanneer een ja of nee antwoord van de gebruiker moet worden verkregen. Dit dialoogvenstertype wordt weergegeven met een bericht en “OK” en “annuleren” knoppen. De methode confirm () neemt het bericht dat aan de gebruiker moet worden getoond als argument en geeft true of false terug, afhankelijk van of de gebruiker “OK” of “Cancel”heeft ingedrukt:
<script language="JavaScript" type="text/javascript">function showConfirmation(){ var result = confirm("Would you like to continue?"); if (result) document.write("Continue"); else document.write("Do not continue");}</script><form action="null"> <input type="button" value="Show Confirmation" onclick="showConfirmation()" /></form>
- prompt – ontworpen om informatie van de gebruiker te verkrijgen. Het dialoogvenster bestaat uit een bericht aan de gebruiker, een tekst invoerveld voor het invoeren van gegevens en Ok en annuleren knoppen. De prompt () methode neemt het bericht te worden weergegeven als een argument en retourneert de waarde ingevoerd door de gebruiker:
<script language="JavaScript" type="text/javascript">function showPrompt(){ var userInput = prompt("Please enter your name:"); document.write("Hello, " + userInput);}</script><form action="null"> <input type="button" value="Show Prompt" onclick="showPrompt()" /></form>
| Previous | Table of Contents | Next |
| JavaScript Math Object | JavaScript Document Object |