Um JavaScript in einem Browser verwenden zu können, muss die vom Browser geladene HTML-Seite JavaScript-Code enthalten. Es gibt verschiedene Möglichkeiten, JavaScript-Code einzufügen. Wir können:
- Fügen Sie JavaScript in den HTML-Header ein.
- Fügen Sie JavaScript in den HTML-Text ein (normalerweise unten).
- Enthält JavaScript-Dateien von derselben Website wie die HTML-Seite
- Enthält JavaScript-Dateien von anderen Websites.
Die Wahl zwischen HTML-Header und -Body ist ein Zeitproblem. Wenn Sie Code in den HTML-Header einfügen, kann dieser bei der Anzeige des HTML-Bodys verwendet werden. Das Kompilieren von JavaScript-Code nimmt jedoch Zeit in Anspruch. Um die Reaktionsfähigkeit des Webs zu verbessern, wird daher manchmal JavaScript-Code am Ende des HTML-Texts platziert. Wenn Sie es unten im Textkörper platzieren, kann der Browser die Seite anzeigen, während der JavaScript-Code geladen und kompiliert wird. Idealerweise befindet sich der Code, der beim Anzeigen der Seite verwendet wird, in der Kopfzeile, während der Code, der danach verwendet wird, unten im Hauptteil der Seite platziert werden kann.
Wenn JavaScript zu schwer wird, ist es eine gute Programmierpraxis, den Code in separaten Dateien abzulegen. Es ermöglicht auch die Wiederverwendung von Code, sodass viele Seiten dieselbe JavaScript-Datei laden können. Es ist auch üblich, dass bereitgestellte JavaScript-Dateien (z. B. verschiedene Frameworks) auf der Website des Betreuers oder auf einer öffentlichen Spiegelseite gehostet werden, sodass der Code aktualisiert werden kann (Fehlerbehebungen), ohne dass Benutzer ihre Webseiten ändern müssen.
In beiden Fällen gibt es Leistungsvorteile , da der Browser die einzelnen Dateien zwischenspeichern kann, sodass sie nicht für jede Webseite, die sie verwendet, neu von der Remote-Website geladen werden müssen.
Eine Funktion enthält einen Codeblock, ein Unterprogramm oder eine Unterroutine, die erst aufgerufen wird, wenn sie aufgerufen wird. Es gibt viele integrierte Funktionen in Javascript sowie die Möglichkeit, benutzerdefinierte Funktionen zu erstellen.
Ähnlich wie PHP bietet JavaScript die Möglichkeit, Funktionen zu definieren und zu verwenden, um JavaScript-Code so zu packen, dass er an verschiedenen Stellen verwendet werden kann. Durch die Verwendung des Funktionsnamens in einer Anweisung können Sie den Code der Funktion ausführen. Darüber hinaus können Sie Parameter an eine Funktion übergeben, um deren Verhalten zu ändern. Die Funktion kann auch den Wert zurückgeben, der bei jedem Aufruf verwendet werden soll.
Andere Funktionen und Ereignishandler können Funktionen aufrufen, beispielsweise wenn eine Seite geladen wird oder wenn der Benutzer durch Interaktion mit der Seite ein Ereignis generiert. Sie können optionale Parameter oder ein Ereignisobjekt übergeben, das vom Seitenelement generiert wird, das die Funktion aufruft.
Beim Schreiben von Funktionen müssen Sie bestimmte Regeln befolgen:
- Alle Funktionen beginnen mit dem Funktionsschlüsselwort (einem Wort mit einer besonderen Bedeutung in JavaScript).
- Nach dem Funktionsschlüsselwort geben wir den Namen der Funktion an
- Dem Funktionsnamen folgt eine Reihe von Klammern ().
- Schreiben Sie abschließend den Codeblock, der ausgeführt werden soll, wenn die Funktion aufgerufen wird, in geschweifte Klammern {}
Im Vergleich zu PHP und anderen Programmiersprachen bietet die Programmiersprache JavaScript eine sehr flexible Möglichkeit, Funktionen zu deklarieren und zu verwenden. JavaScript-Funktionen können auf folgende Weise deklariert werden:
function function-name (arg1, arg2, ...)
{
statements;
}
var x = function (arg1, arg2, ...) { statements; };
var x = new Function(arg1, arg2..., "Function Body");Ein Beispiel für eine einfache Funktion, die eine einfache „Hallo“-Nachricht ausgibt, ist:
function hello()
{
document.write("hello<br>");
}
var hello = function () { document.write("hello<br>"); }Das Format der Deklaration ist das gleiche wie zuvor, wobei <script>-Tags zum Einschließen der JavaScript-Deklaration verwendet wurden. Die vollständige HTML-Datei, die die obige Funktion definiert und aufruft, sieht also so aus:
<!DOCTYPE html> <html lang=”en”>
<head> <meta charset=”utf8”>
<title> The Javascript Functional Hello</title>
<script language="javascript"> <!— function hello() { document.write("hello<br>"); } // --> </script>
</head>
<body>
<script language="javascript"> <!-- hello(); // -->
</script>
</body>
</htmDas letzte Attribut der Funktion ist der optionale Rückgabewert. Dies wird erreicht, indem eine Return-Anweisung in den Funktionskörper eingefügt wird. Das Format der Return-Anweisung ist:
return value;Wenn eine Return-Anweisung auftritt, wird die Funktion sofort beendet und gibt den Wert an die Stelle zurück, an der die Funktion aufgerufen wurde. Um dies zu demonstrieren, können Sie eine Funktion definieren, die die Differenz zwischen zwei Zahlen zurückgibt, etwa so:
function diff(x, y)
{
var d = x-y;
if (d < 0)
return y-x;
else
return d;
}JavaScript prüft nicht, ob die Anzahl der Argumente in der formalen Definition mit der Anzahl der Argumente im tatsächlichen Funktionsaufruf übereinstimmt. Alle zusätzlichen Argumente im Funktionsaufruf werden ignoriert und allen zusätzlichen Argumenten in der formalen Definition (zu wenige im tatsächlichen Aufruf) wird ein undefinierter Wert zugewiesen.
benannte Funktion
- Funktionsnamen dürfen nur Buchstaben, Zahlen oder Symbole und enthalten.
$_ - Das erste Zeichen darf keine Zahl sein.
function calculate_age()
function _name_()
function a$56enn ()Die folgenden Namen sind ungültig und führen zu einem Fehler:
function sayHi@()
function 1name()JavaScript-Variablen
| War | Erstellen Sie neue globale Variablen (keine Bereichsbeschränkungen im Code). |
| lassen | Erstellt eine neue lokale Variable (Bereich existiert nur im aktuellen Codeblock). |
| Konstante | Erstellen Sie globale Konstanten, die nicht geändert werden können (keine Bereichsbeschränkungen im Code). |
Syntax zum Deklarieren und Initialisieren von Variablen:
var myInteger = 10;
var myString = “Hello World！”;或
var myArray = new Array（）;
let name = “John”
const pi = 3.14Variablen können unterschiedliche Datentypen speichern. Zu den häufigsten gehören:
| Saiten | Eine Gruppe von Zeichen, die in Anführungszeichen geschrieben sind, z. B. „John Doe“. |
| Zahlen | Zahlen können mit oder ohne Dezimalstellen angegeben werden. Wenn die Zahl groß oder klein ist, kann sie in wissenschaftlicher (exponentieller) Schreibweise geschrieben werden |
| Boolesche Werte | bedeutet wahr oder falsch |
| Arrays | Eine Gruppe von Elementen, die durch eckige Klammern dargestellt werden, wobei die Werte durch Kommas getrennt werden. Die Array-Indizierung beginnt bei Null, das erste Element ist also [0], das zweite [1] und so weiter. |
| Objekte | Eine Sammlung von Schlüssel-Wert-Paaren wird als Objekt bezeichnet. Jedes Schlüssel-Wert-Paar ist ein Attribut. |
| Nicht definiert | Wenn einer Variablen kein Wert zugewiesen ist, ist ihr Wert undefiniert |
Bitte beachten Sie den folgenden Code:
let age = 20;
let firstName = 'John';
let lastName = "Doe";
let isStudent = true;- In der ersten Zeile deklarieren wir eine Variable, der eine Zahl zugewiesen ist
- In der zweiten und dritten Zeile deklarieren wir Variablen, denen Strings zugewiesen sind. Beachten Sie, wie Anführungszeichen beider Typen beim Zuweisen von Zeichenfolgenwerten verwendet werden (d. h. „“ und „“).
- In Zeile 4 deklarieren wir eine Variable, die einen booleschen Wert speichert .
Wie bereits erwähnt, werden Variablen auch häufig zum Speichern von HTML-Objekten verwendet, etwa so:
let paragraph = document.getElementById("test");Variablenwert ändern
Nachdem eine Variable deklariert wurde, kann ihr Wert geändert werden. Betrachten Sie den folgenden Code:
let age = 20;
alert(age);
age = 30;
alert(age);Deklarieren Sie zunächst die Variable Alter, weisen Sie ihr den Wert 20 zu und zeigen Sie sie dann in der Warnung an. Allerdings wird der Variable Alter dann der Wert 30 zugewiesen. Das bedeutet, dass der Wert 20 aus dem bei der Deklaration der Variablen erstellten Speicherplatz entfernt und durch den Wert 30 ersetzt wurde.
Es ist jedoch wichtig zu beachten, dass der folgende Code einen Fehler verursacht:
let age = 20;
alert(age);
let age = 30;
alert(age); Das Problem mit dem obigen Code besteht darin, dass die Variable in der dritten Zeile neu deklariert wird age. In JavaScript let haben mit Schlüsselwörtern deklarierte Variablen einen Gültigkeitsbereich auf Blockebene. Dies bedeutet, dass derselbe Variablenname nicht wiederholt im selben Bereich deklariert werden kann. Die Neudeklaration in der dritten Zeile age ist also nicht legal. Wenn Sie den Wert einer Variablen ändern möchten, sollten Sie age diese direkt zuweisen, ohne let sie erneut zu deklarieren.
Benannte Variablen
- Variablennamen dürfen nur Buchstaben, Zahlen oder Symbole enthalten.
$_ - Das erste Zeichen darf keine Zahl sein.
let persons_age = 20;
let _name_ = "John"
let a$56enn = false;Die folgenden Namen sind ungültig und führen zu einem Fehler:
let name@ = "John";
let 9name = "John";Der Vorname enthält unzulässige Zeichen und der zweite Name beginnt mit einer Zahl.
Hinweis: Genau wie Funktionen sollten Variablen immer mit beschreibenden Namen benannt werden. CamelCase wird verwendet, wenn der Name mehrere Wörter enthält . Hier kommen die Wörter nacheinander und jedes Wort beginnt mit einem Großbuchstaben, mit Ausnahme des ersten, wie etwa „someVariableName“. Nur weil ein Variablenname keinen Fehler verursacht, heißt das nicht, dass es ein guter Name ist!
JavaScript unterstützt die folgenden Arten von Operatoren.
- Rechenzeichen
- Vergleichsoperator
- Logischer (oder relationaler) Operator
- Aufgabenverwalter
- Bedingter (oder ternärer) Operator
Diese ähneln anderen Sprachen, unterscheiden sich jedoch aufgrund der dynamisch typisierten Natur der Variablen in der Sprache.
Wie Sie oben sehen können, wird der Zuweisungsoperator „=“ verwendet, um einen Wert in einer Variablen zu platzieren. In typisierten Sprachen gibt es eine Typprüfung, um zu sehen, ob die Variable auf der rechten Seite den richtigen Typ der Variablen hat. In JavaScript gibt es keine Typprüfung, stattdessen werden Variablen entsprechend dem ihnen zugewiesenen Typ angepasst. Die folgenden drei Anweisungen veranschaulichen, wie Variablen Typen ignorieren. Die Syntax der if-else-if-Anweisung lautet wie folgt:
var x; // new variable are assigned value ‘undefined’
x = 23; // x now has a integer value
x = ’hello world’;// x now has a string valueDer Gleichheitsoperator verfügt auch über einige neue Eigenschaften in JavaScript. Der Operator „==" vergleicht Werte nach der Typkonvertierung, und der Operator „===" führt einen strikten Vergleich ohne Typkonvertierung durch, z. B.
5 =='5' // returns true
5 === '5' // returns falseUngleichungsoperator '! =' und '! ==' verhält sich genauso.
Es gibt zwei Operatoren, die den Typ eines Ausdrucks testen. Diese sind nützlich, da es nicht ungewöhnlich ist, dass wir eine Variable oder einen Parameter einer Funktion prüfen möchten, die einen sinnvollen Wert enthält. Beispielsweise möchte eine numerische Funktion möglicherweise prüfen, ob sie einen numerischen Parameter hat.
typeof x // returns the type of the value in x as a stringNachdem Sie sich die JavaScript-Werttypen angesehen haben, werden Sie sich die Typen und Instanzen von Operatoren ansehen.
Bearbeiten Sie Zeichenfolgen und Zahlen
Zeichenfolgen und Zahlen werden auf ähnliche Weise dargestellt, wie Sie es in C# oder Java verwenden würden. Allerdings stellt JavaScript auch eine Reihe von Eigenschaften für die von Ihnen erstellten Zeichenfolgen bereit. Einer der weniger klaren Aspekte von JavaScript ist der Unterschied zwischen String-Typen und String-Objekten. Die Zuordnung zwischen den beiden ist nicht klar, aber jede Zeichenfolge kann als Objekt mit jeweils zugehörigen Eigenschaften betrachtet werden.
Angenommen, es gibt eine Aussage:
var name = "Reza";Über diese Zeichenfolge kann auf Eigenschaften zugegriffen werden. Zum Beispiel:
name.length – returns the length of the string
name.indexOf("rr") – returns the index of the string “rr” (0 is first position)Darüber hinaus gibt es viele Mitgliedsfunktionen zum Bearbeiten von Zeichenfolgen.
Zahlen verfügen außerdem über eine Reihe von Eigenschaften, die primitiven numerischen Werten zugeordnet werden können. Angenommen, Sie haben die folgenden numerischen Variablen:
var age = 21;Eigenschaft age.toString() Konvertiert eine Zahl in einen String-Wert. Es wird automatisch aufgerufen, wenn ein Operator einen Zeichenfolgenwert erfordert, beispielsweise in einem Ausdruck:
"my age is "+ageBedingte JavaScript-Anweisungen
JavaScript unterstützt bedingte Anweisungen der folgenden Form:
- if-Anweisung
- switch case-Anweisung
- Wann während, und
- für für
Die Syntax der if-else-if-Anweisung lautet wie folgt:
if (expression 1) {
Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
Statement(s) to be executed if expression 3 is true
} else {
Statement(s) to be executed if no expression is true
}Die Syntax der Switch-Case-Anweisung lautet wie folgt:
switch (expression) {
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
}Die Syntax der while-Anweisung lautet wie folgt:
while (expression) {
Statement(s) to be executed if expression is true
}Die Syntax der For-Anweisung lautet wie folgt: −
for (initialization; test condition; iteration statement) {
Statement(s) to be executed if test condition is true
}JavaScript-Array
JavaScript-Arrays sind den Arrays, die Sie in anderen Programmiersprachen verwenden, sehr ähnlich. Der Hauptunterschied besteht darin, dass Arrays in JavaScript keine feste Größe haben, wie Sie sie wahrscheinlich kennen. Arrays in JavaScript haben eine dynamische Länge und erweitern sich frei, wenn Sie ihnen mehr Werte zuweisen. Der zweite Unterschied besteht darin, dass Arrays nicht unbedingt Werte desselben Typs enthalten.
Tatsächlich kann man sich ein Array als einen speziellen Objekttyp vorstellen, dessen Elemente aus den Zahlen 0, 1, 2, ... statt aus Zeichenfolgen bestehen. Denken Sie daran, dass wir auf Elemente in Objekten wie Arrays zugreifen können.
Arrays ähneln eher Objekten, da sie über Eigenschaften und Methoden verfügen. Angenommen, wir haben die folgende Array-Deklaration.
var colours = ["red", "green", "blue"];Die Länge des Arrays kann als Längenattribut ermittelt werden:
colours.lengthArrays können mit der Sortierfunktion sortiert werden:
colours.sort();JavaScript-Debugging
Die Methode console.log() kann aufgerufen werden , um Fehler anzuzeigen, ohne die Codeausführung zu stoppen.
Beim Debuggen kann es vorkommen, dass Sie die Ausführung Ihres Codes stoppen müssen. Sie können dies tun , indem Sie die Funktion „alert()“ aufrufen .
Hier eine Reihe von Beispielen:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>Fehlerbehandlung (Ausnahme)
JavaScript implementiert auch die Ausnahmebehandlung, wird in der Dokumentation jedoch als Fehlerbehandlung bezeichnet. Ausnahmen in anderen modernen Sprachen wie C# oder Java sind Ihnen bekannt. JavaScript verwendet einen sehr ähnlichen Mechanismus.
Die Hauptanweisung ist die Try-Catch-Struktur, die derselben Anweisung in C# und Java sehr ähnlich ist. Das allgemeine Format ist:
try {
// lots of statements
}
catch (err) {
// error processing code
}
finally { // optional
// code that is always executed (whether error or not)
}Mit JavaScript können Sie auch Ihre eigenen Fehler auslösen, die durch Catch-Anweisungen behandelt werden, z. B.
try {
// lots of statements
throw 234;
// lots of statements
throw "oops error";
// more statements
}
catch (err) {
// error processing code
}
Beachten Sie, dass in diesem Beispiel die Art und Weise, wie der Fehler ausgelöst wird, beliebiger Art sein kann. In diesem Beispiel werden Zahlen und Zeichenfolgen als Fehlerwerte ausgelöst.