Zoeken…
Opmerkingen
JavaScript (niet te verwarren met Java ) is een dynamische, zwak getypte taal die wordt gebruikt voor client-side en server-side scripting.
JavaScript is een hoofdlettergevoelige taal. Dit betekent dat de taal hoofdletters als verschillend van hun tegenhangers in kleine letters beschouwt. Sleutelwoorden in JavaScript zijn allemaal kleine letters.
JavaScript is een veelgebruikte implementatie van de ECMAScript-standaard.
Onderwerpen in deze tag verwijzen vaak naar het gebruik van JavaScript in de browser, tenzij anders vermeld. JavaScript-bestanden alleen kunnen niet rechtstreeks door de browser worden uitgevoerd; het is noodzakelijk om ze in een HTML-document in te sluiten. Als u een JavaScript-code hebt die u wilt proberen, kunt u deze in sommige placeholder-inhoud zoals deze insluiten en het resultaat opslaan als example.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
Inline script (option 1):
<script>
// YOUR CODE HERE
</script>
External script (option 2):
<script src="your-code-file.js"></script>
</body>
</html>
versies
| Versie | Publicatiedatum |
|---|---|
| 1 | 1997/06/01 |
| 2 | 1998/06/01 |
| 3 | 1998-12-01 |
| E4X | 2004-06-01 |
| 5 | 2009-12-01 |
| 5.1 | 2011-06-01 |
| 6 | 2015/06/01 |
| 7 | 2016/06/14 |
| 8 | 2017/06/27 |
De DOM API gebruiken
DOM staat voor DOCUMENT O bject M odel. Het is een objectgeoriënteerde weergave van gestructureerde documenten zoals XML en HTML .
Het instellen van de eigenschap textContent van een Element is een manier om tekst op een webpagina uit te voeren.
Overweeg bijvoorbeeld de volgende HTML-tag:
<p id="paragraph"></p>
Om de eigenschap textContent te wijzigen, kunnen we de volgende JavaScript uitvoeren:
document.getElementById("paragraph").textContent = "Hello, World";
Dit selecteert het element dat met de id- paragraph en stelt de tekstinhoud in op "Hallo wereld":
<p id="paragraph">Hello, World</p>
U kunt JavaScript ook gebruiken om programmatisch een nieuw HTML-element te maken. Overweeg bijvoorbeeld een HTML-document met de volgende inhoud:
<body>
<h1>Adding an element</h1>
</body>
In ons JavaScript maken we een nieuwe <p> -tag met de eigenschap textContent van en voegen deze toe aan het einde van de body:
var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM
Dat zal uw HTML-inhoud als volgt wijzigen:
<body>
<h1>Adding an element</h1>
<p>Hello, World</p>
</body>
Merk op dat om JavaScript-elementen in de DOM te kunnen manipuleren, de JavaScript-code moet worden uitgevoerd nadat het relevante element in het document is gemaakt. Dit kan worden bereikt door de JavaScript <script> -tags achter al uw andere <body> -inhoud te plaatsen. Als alternatief kunt u ook een gebeurtenislistener gebruiken om bijvoorbeeld naar te luisteren. window de onload gebeurtenis van window , zal het toevoegen van uw code aan die gebeurtenislistener de uitvoering van uw code vertragen totdat de volledige inhoud op uw pagina is geladen.
Een derde manier om ervoor te zorgen dat al uw DOM is geladen, is om de DOM-manipulatiecode te verpakken met een time-outfunctie van 0 ms . Op deze manier wordt deze JavaScript-code opnieuw in de wachtrij geplaatst aan het einde van de uitvoeringswachtrij, wat de browser de kans geeft om een aantal niet-JavaScript-dingen te voltooien die wachten om te voltooien voordat hij dit nieuwe stuk JavaScript bijwoonde.
Console.log () gebruiken
Invoering
Alle moderne webbrowsers, NodeJ's en bijna elke andere JavaScript-omgeving ondersteunen het schrijven van berichten naar een console met behulp van een reeks logboekmethoden. De meest voorkomende van deze methoden is console.log() .
In een browseromgeving wordt de functie console.log() voornamelijk gebruikt voor het opsporen van fouten.
Ermee beginnen
Open de JavaScript-console in uw browser, typ het volgende en druk op Enter :
console.log("Hello, World!");Hiermee wordt het volgende bij de console vastgelegd:
In het bovenstaande voorbeeld drukt de functie console.log() Hello, World! naar de console en retourneert undefined (hierboven weergegeven in het uitvoervenster van de console). Dit komt omdat console.log() geen expliciete retourwaarde heeft .
Logvariabelen
console.log() kan worden gebruikt om allerlei variabelen te loggen; niet alleen snaren. Geef gewoon de variabele op die u in de console wilt weergeven, bijvoorbeeld:
var foo = "bar";
console.log(foo);
Hiermee wordt het volgende bij de console vastgelegd:
Als u twee of meer waarden wilt vastleggen, scheidt u ze eenvoudig met komma's. Spaties worden automatisch toegevoegd tussen elk argument tijdens aaneenschakeling:
var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar); 
placeholders
U kunt console.log() in combinatie met tijdelijke aanduidingen:
var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);
Hiermee wordt het volgende bij de console vastgelegd:
Objecten loggen
Hieronder zien we het resultaat van het loggen van een object. Dit is vaak handig voor het loggen van JSON-antwoorden van API-aanroepen.
console.log({
'Email': '',
'Groups': {},
'Id': 33,
'IsHiddenInUI': false,
'IsSiteAdmin': false,
'LoginName': 'i:0#.w|virtualdomain\\user2',
'PrincipalType': 1,
'Title': 'user2'
});Hiermee wordt het volgende bij de console vastgelegd:
HTML-elementen loggen
U hebt de mogelijkheid om elk element in het DOM te loggen. In dit geval registreren we het element body:
console.log(document.body);
Hiermee wordt het volgende bij de console vastgelegd:
Eindnotitie
Zie het onderwerp Console voor meer informatie over de mogelijkheden van de console.
Window.alert () gebruiken
De alert geeft een visueel waarschuwingsvak op het scherm weer. De waarschuwingsmethode parameter wordt weergegeven aan de gebruiker in platte tekst:
window.alert(message);
Omdat window het globale object is, kunt u ook de volgende steno gebruiken:
alert(message);
Dus wat doet window.alert() ? Laten we het volgende voorbeeld nemen:
alert('hello, world');
In Chrome zou dat een pop-up als deze produceren: 
Notes
De
alertis technisch gezien een eigenschap van hetwindow, maar omdat allewindowautomatisch globale variabelen zijn, kunnen wealertals een globale variabele in plaats van als een eigenschap vanwindow- wat betekent dat u directalert()kunt gebruiken in plaats vanwindow.alert().
In tegenstelling tot het gebruik van console.log , alert fungeert als een modale prompt betekenis dat de code roeping alert wordt onderbroken totdat de prompt wordt beantwoord. Traditioneel betekent dit dat er geen andere JavaScript-code zal worden uitgevoerd totdat de melding wordt verwijderd:
alert('Pause!');
console.log('Alert was dismissed');
De specificatie staat echter toe dat andere door een gebeurtenis getriggerde code kan worden uitgevoerd, hoewel er nog steeds een modaal dialoogvenster wordt weergegeven. In dergelijke implementaties is het mogelijk om andere code uit te voeren terwijl het modale dialoogvenster wordt getoond.
Meer informatie over het gebruik van de alert is te vinden in het onderwerp Modals-prompts .
Het gebruik van waarschuwingen wordt meestal afgeraden ten gunste van andere methoden die gebruikers niet blokkeren van interactie met de pagina - om een betere gebruikerservaring te creëren. Desalniettemin kan het handig zijn voor het debuggen.
Beginnend met Chrome 46.0, wordt window.alert() geblokkeerd in een <iframe> tenzij het sandbox-kenmerk de waarde allow-modal heeft .
Window.prompt () gebruiken
Een eenvoudige manier om invoer van een gebruiker te krijgen, is door de methode prompt() gebruiken.
Syntaxis
prompt(text, [default]);
- tekst : de tekst die wordt weergegeven in het promptvenster.
- standaard : een standaardwaarde voor het invoerveld (optioneel).
Voorbeelden
var age = prompt("How old are you?");
console.log(age); // Prints the value inserted by the user
Als de gebruiker op OK klikt, wordt de invoerwaarde geretourneerd. Anders retourneert de methode null .
De retourwaarde van de prompt is altijd een tekenreeks, tenzij de gebruiker op Annuleren klikt en in dat geval null retourneert. Safari is een uitzondering, omdat de functie een lege tekenreeks retourneert wanneer de gebruiker op Annuleren klikt. Van daaruit kunt u de retourwaarde omzetten in een ander type, zoals een geheel getal .
Notes
- Terwijl het promptvenster wordt weergegeven, heeft de gebruiker geen toegang tot andere delen van de pagina, omdat dialoogvensters modale vensters zijn.
- Vanaf Chrome 46.0 wordt deze methode geblokkeerd in een
<iframe>tenzij het sandbox-kenmerk de waarde allow-modal heeft.
De DOM API gebruiken (met grafische tekst: Canvas, SVG of afbeeldingsbestand)
Canvaselementen gebruiken
HTML biedt het canvas-element voor het bouwen van op raster gebaseerde afbeeldingen.
Bouw eerst een canvas voor het vasthouden van pixelinformatie.
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
Selecteer vervolgens een context voor het canvas, in dit geval tweedimensionaal:
var ctx = canvas.getContext('2d');
Stel vervolgens eigenschappen met betrekking tot de tekst in:
ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);
Voeg vervolgens het canvas element in de pagina om van kracht te worden:
document.body.appendChild(canvas);
SVG gebruiken
SVG is voor het bouwen van schaalbare vectorgebaseerde afbeeldingen en kan worden gebruikt binnen HTML.
Maak eerst een SVG-elementcontainer met afmetingen:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;
Bouw vervolgens een text met de gewenste positionering en lettertype-kenmerken:
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';
Voeg vervolgens de tekst toe die moet worden weergegeven aan het text :
text.textContent = 'Hello world!';
Voeg ten slotte het text aan onze svg container en voeg het svg containerelement toe aan het HTML-document:
svg.appendChild(text);
document.body.appendChild(svg);
Beeldbestand
Als u al een afbeeldingsbestand met de gewenste tekst hebt en dit op een server plaatst, kunt u de URL van de afbeelding toevoegen en vervolgens de afbeelding als volgt aan het document toevoegen:
var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);
Window.confirm () gebruiken
De methode window.confirm() geeft een modaal dialoogvenster weer met een optioneel bericht en twee knoppen, OK en Annuleren.
Laten we nu het volgende voorbeeld nemen:
result = window.confirm(message);
Hier is bericht de optionele tekenreeks die in het dialoogvenster moet worden weergegeven en is het resultaat een Booleaanse waarde die aangeeft of OK of Annuleren is geselecteerd (true betekent OK).
window.confirm() wordt meestal gebruikt om bevestiging van de gebruiker te vragen voordat een gevaarlijke bewerking wordt uitgevoerd, zoals het verwijderen van iets in een Configuratiescherm:
if(window.confirm("Are you sure you want to delete this?")) {
deleteItem(itemId);
}
De uitvoer van die code zou er in de browser als volgt uitzien:
Als u het nodig hebt voor later gebruik, kunt u het resultaat van de interactie van de gebruiker eenvoudig opslaan in een variabele:
var deleteConfirm = window.confirm("Are you sure you want to delete this?");
Notes
- Het argument is optioneel en niet vereist door de specificatie.
- Dialoogvensters zijn modale vensters - ze voorkomen dat de gebruiker toegang krijgt tot de rest van de interface van het programma totdat het dialoogvenster wordt gesloten. Om deze reden moet u geen enkele functie gebruiken die een dialoogvenster (of modaal venster) maakt. En hoe dan ook, er zijn zeer goede redenen om het gebruik van dialoogvensters voor bevestiging te vermijden.
- Vanaf Chrome 46.0 wordt deze methode geblokkeerd in een
<iframe>tenzij het sandbox-kenmerk de waarde allow-modal heeft. - Het is gebruikelijk om de bevestigingsmethode aan te roepen met de vensternotatie verwijderd, omdat het vensterobject altijd impliciet is. Het wordt echter aanbevolen om het vensterobject expliciet te definiëren, omdat verwacht gedrag kan veranderen als gevolg van implementatie op een lager scoopniveau met methoden met dezelfde naam.