Suche…
Bemerkungen
JavaScript (nicht zu verwechseln mit Java ) ist eine dynamische, schwach typisierte Sprache, die sowohl für clientseitige als auch für serverseitige Skriptsprache verwendet wird.
JavaScript ist eine von Groß- und Kleinschreibung abhängige Sprache. Dies bedeutet, dass die Sprache die Großbuchstaben von ihren Kleinbuchstaben unterscheidet. Schlüsselwörter in JavaScript sind alle Kleinbuchstaben.
JavaScript ist eine häufig verwendete Implementierung des ECMAScript-Standards.
Die Themen in diesem Tag beziehen sich oft auf die Verwendung von JavaScript im Browser, sofern nicht anders angegeben. JavaScript-Dateien können nicht direkt vom Browser ausgeführt werden. Sie müssen in ein HTML-Dokument eingebettet werden. Wenn Sie JavaScript-Code haben, den Sie ausprobieren möchten, können Sie ihn in einen Platzhalter-Inhalt wie diesen einbetten und das Ergebnis als example.html speichern:
<!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>
Versionen
| Ausführung | Veröffentlichungsdatum |
|---|---|
| 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 |
Verwenden der DOM-API
DOM steht für D OKUMENT O bject M odel. Es ist eine objektorientierte Darstellung strukturierter Dokumente wie XML und HTML .
Durch Festlegen der textContent Eigenschaft eines Element können Sie Text auf einer Webseite ausgeben.
Betrachten Sie beispielsweise das folgende HTML-Tag:
<p id="paragraph"></p>
Um die Eigenschaft textContent zu ändern, können Sie das folgende JavaScript ausführen:
document.getElementById("paragraph").textContent = "Hello, World";
Dadurch wird das Element mit dem ID- paragraph und der Textinhalt auf "Hallo, Welt" gesetzt:
<p id="paragraph">Hello, World</p>
Sie können JavaScript auch verwenden, um programmgesteuert ein neues HTML-Element zu erstellen. Betrachten Sie beispielsweise ein HTML-Dokument mit dem folgenden Hauptteil:
<body>
<h1>Adding an element</h1>
</body>
In unserem JavaScript erstellen wir ein neues <p> -Tag mit einer textContent Eigenschaft von und fügen es am Ende des HTML- textContent ein:
var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM
Dadurch wird Ihr HTML-Text wie folgt geändert:
<body>
<h1>Adding an element</h1>
<p>Hello, World</p>
</body>
Beachten Sie, dass zur Bearbeitung von Elementen im DOM mit JavaScript der JavaScript-Code ausgeführt werden muss, nachdem das entsprechende Element im Dokument erstellt wurde. Dies können Sie erreichen, indem Sie die JavaScript-Tags <script> hinter Ihren gesamten Inhalt <body> . Alternativ können Sie auch einen Ereignis-Listener verwenden , um z. window das onload Ereignis des window wird das Hinzufügen des Codes zu diesem Ereignis-Listener die Ausführung des Codes verzögern, bis der gesamte Inhalt der Seite geladen ist.
Eine dritte Möglichkeit, um sicherzustellen, dass alle DOMs geladen wurden, besteht darin , den DOM-Manipulationscode mit einer Timeout-Funktion von 0 ms zu umschließen . Auf diese Weise wird dieser JavaScript-Code am Ende der Ausführungswarteschlange erneut in eine Warteschlange gestellt, sodass der Browser die Möglichkeit hat, einige Nicht-JavaScript-Vorgänge abzuschließen, die auf den Abschluss warten, bevor er sich an diesem neuen JavaScript-Teil beteiligt.
Console.log () verwenden
Einführung
Alle modernen Webbrowser, NodeJs sowie fast alle anderen JavaScript-Umgebungen unterstützen das Schreiben von Meldungen an eine Konsole mithilfe einer Reihe von Protokollierungsmethoden. Die gebräuchlichste dieser Methoden ist console.log() .
In einer Browser-Umgebung wird die console.log() Funktion hauptsächlich zum Debuggen verwendet.
Fertig machen
Öffnen Sie die JavaScript-Konsole in Ihrem Browser, geben Sie Folgendes ein und drücken Sie die Eingabetaste :
console.log("Hello, World!");Dadurch wird Folgendes an der Konsole protokolliert:
Im obigen Beispiel gibt die console.log() Funktion Hello, World! an die Konsole und gibt undefined (oben im Ausgabefenster der Konsole angezeigt). Dies liegt daran, dass console.log() keinen expliziten Rückgabewert hat .
Protokollierungsvariablen
console.log() können Variablen jeder Art protokolliert werden. nicht nur strings. Geben Sie einfach die Variable ein, die in der Konsole angezeigt werden soll, zum Beispiel:
var foo = "bar";
console.log(foo);
Dadurch wird Folgendes an der Konsole protokolliert:
Wenn Sie zwei oder mehr Werte protokollieren möchten, trennen Sie diese einfach durch Kommas. Zwischen den einzelnen Argumenten werden während der Verkettung automatisch Leerzeichen hinzugefügt:
var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar); 
Platzhalter
Sie können console.log() in Kombination mit Platzhaltern verwenden:
var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);
Dadurch wird Folgendes an der Konsole protokolliert:
Objekte protokollieren
Unten sehen Sie das Ergebnis der Protokollierung eines Objekts. Dies ist häufig nützlich, um JSON-Antworten von API-Aufrufen zu protokollieren.
console.log({
'Email': '',
'Groups': {},
'Id': 33,
'IsHiddenInUI': false,
'IsSiteAdmin': false,
'LoginName': 'i:0#.w|virtualdomain\\user2',
'PrincipalType': 1,
'Title': 'user2'
});Dadurch wird Folgendes an der Konsole protokolliert:
HTML-Elemente protokollieren
Sie haben die Möglichkeit, jedes im DOM vorhandene Element zu protokollieren. In diesem Fall protokollieren wir das Body-Element:
console.log(document.body);
Dadurch wird Folgendes an der Konsole protokolliert:
Endnote
Weitere Informationen zu den Funktionen der Konsole finden Sie im Thema Konsole .
Window.alert () verwenden
Die alert zeigt ein visuelles Benachrichtigungsfeld auf dem Bildschirm an. Der Parameter für die Benachrichtigungsmethode wird dem Benutzer im Klartext angezeigt:
window.alert(message);
Da window das globale Objekt ist, können Sie auch die folgende Kurzschreibweise aufrufen:
alert(message);
Was macht also window.alert() ? Nehmen wir das folgende Beispiel:
alert('hello, world');
In Chrome würde das ein Popup wie folgt erzeugen: 
Anmerkungen
Die
alertMethode ist technisch gesehen eine Eigenschaft deswindowDa jedoch allewindowautomatisch globale Variablen sind, können wiralertals globale Variable und nicht als Eigenschaft deswindowverwenden.window.alert()bedeutet, dass Siealert()anstelle vonwindow.alert().
Anders als mit console.log , alert dient als modale Eingabeaufforderung Bedeutung , dass der Code ruft alert pausiert , bis die Eingabeaufforderung beantwortet wird. Normalerweise bedeutet dies, dass kein anderer JavaScript-Code ausgeführt wird, bis die Warnung abgewiesen wird:
alert('Pause!');
console.log('Alert was dismissed');
Die Spezifikation ermöglicht jedoch die Ausführung weiterer ereignisgetriggerten Codes, obwohl ein modales Dialogfeld noch angezeigt wird. In solchen Implementierungen ist es möglich, dass anderer Code ausgeführt wird, während der modale Dialog angezeigt wird.
Weitere Informationen zur Verwendung der alert Methode finden Sie im Thema Modal Prompts .
Die Verwendung von Warnmeldungen wird in der Regel nicht für andere Methoden empfohlen, bei denen Benutzer die Interaktion mit der Seite nicht blockieren - um eine bessere Benutzererfahrung zu erzielen. Trotzdem kann es für das Debugging nützlich sein.
In Chrome 46.0 wird window.alert() innerhalb eines <iframe> blockiert, es sei denn, das Sandbox-Attribut hat den Wert allow-modal .
Window.prompt () verwenden
Eine einfache Möglichkeit, eine Eingabe von einem Benutzer zu erhalten, ist die Verwendung der prompt() -Methode.
Syntax
prompt(text, [default]);
- text : Der in der Eingabeaufforderung angezeigte Text.
- default : Ein Standardwert für das Eingabefeld (optional).
Beispiele
var age = prompt("How old are you?");
console.log(age); // Prints the value inserted by the user
Wenn der Benutzer auf die Schaltfläche OK klickt, wird der Eingabewert zurückgegeben. Andernfalls gibt die Methode null .
Der Rückgabewert von prompt ist immer eine Zeichenfolge, es sei denn, der Benutzer klickt auf Abbrechen . In diesem Fall gibt er null . Safari ist eine Ausnahme, wenn der Benutzer auf Abbrechen klickt und die Funktion eine leere Zeichenfolge zurückgibt. Von dort können Sie den Rückgabewert in einen anderen Typ konvertieren, z. B. eine Ganzzahl .
Anmerkungen
- Während das Eingabeaufforderungsfeld angezeigt wird, kann der Benutzer nicht auf andere Teile der Seite zugreifen, da Dialogfelder modale Fenster sind.
- Ab Chrome 46.0 ist diese Methode in einem
<iframe>blockiert, sofern das Sandbox-Attribut nicht den Wert allow-modal hat.
Verwenden der DOM-API (mit grafischem Text: Canvas, SVG oder Bilddatei)
Canvas-Elemente verwenden
HTML bietet das Canvas-Element zum Erstellen rasterbasierter Bilder.
Erstellen Sie zunächst eine Leinwand zum Speichern von Bildpixelinformationen.
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
Wählen Sie dann einen Kontext für die Leinwand aus, in diesem Fall zweidimensional:
var ctx = canvas.getContext('2d');
Legen Sie dann Eigenschaften für den Text fest:
ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);
Fügen Sie dann das canvas Element in die Seite ein, um die folgenden Einstellungen zu übernehmen:
document.body.appendChild(canvas);
Verwendung von SVG
SVG dient zum Erstellen skalierbarer vektorbasierter Grafiken und kann in HTML verwendet werden.
Erstellen Sie zunächst einen SVG-Elementcontainer mit Abmessungen:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;
Erstellen Sie dann ein text mit den gewünschten Positionierungs- und Schriftarteigenschaften:
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';
Dann fügen Sie den eigentlichen Text zum anzuzeigen text
text.textContent = 'Hello world!';
Fügen Sie schließlich das text zu unserem svg Container hinzu und fügen Sie das svg Containerelement zum HTML-Dokument hinzu:
svg.appendChild(text);
document.body.appendChild(svg);
Bilddatei
Wenn Sie bereits über eine Bilddatei mit dem gewünschten Text verfügen und diese auf einem Server ablegen, können Sie die URL des Bildes und dann das Bild wie folgt zum Dokument hinzufügen:
var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);
Window.confirm () verwenden
Die window.confirm() -Methode zeigt ein modales Dialogfeld mit einer optionalen Nachricht und den beiden Schaltflächen OK und Cancel an.
Nehmen wir das folgende Beispiel:
result = window.confirm(message);
Die Nachricht ist hier die optionale Zeichenfolge, die im Dialogfeld angezeigt werden soll, und das Ergebnis ist ein boolescher Wert, der angibt, ob OK oder Abbrechen ausgewählt wurde (true bedeutet OK).
window.confirm() wird normalerweise verwendet, um eine Bestätigung des Benutzers window.confirm() bevor ein gefährlicher Vorgang ausgeführt wird, z.
if(window.confirm("Are you sure you want to delete this?")) {
deleteItem(itemId);
}
Die Ausgabe dieses Codes würde im Browser so aussehen:
Wenn Sie es für eine spätere Verwendung benötigen, können Sie das Ergebnis der Benutzerinteraktion einfach in einer Variablen speichern:
var deleteConfirm = window.confirm("Are you sure you want to delete this?");
Anmerkungen
- Das Argument ist optional und für die Spezifikation nicht erforderlich.
- Dialogfelder sind modale Fenster - sie hindern den Benutzer daran, auf den Rest der Programmoberfläche zuzugreifen, bis das Dialogfeld geschlossen wird. Aus diesem Grund sollten Sie keine Funktion überfordern, die ein Dialogfeld (oder ein modales Fenster) erstellt. Unabhängig davon gibt es sehr gute Gründe, die Verwendung von Dialogfeldern zur Bestätigung zu vermeiden.
- Ab Chrome 46.0 ist diese Methode in einem
<iframe>blockiert, sofern das Sandbox-Attribut nicht den Wert allow-modal hat. - Es wird allgemein akzeptiert, die Confirm-Methode mit entfernter Fensternotation aufzurufen, da das Fensterobjekt immer implizit ist. Es wird jedoch empfohlen, das Fensterobjekt explizit zu definieren, da sich das erwartete Verhalten aufgrund der Implementierung auf einer niedrigeren Bereichsebene mit ähnlich benannten Methoden ändern kann.