Obwohl einige aktuelle JavaScript-Frameworks wie jQuery, Prototype und MooTools die Effizienz unserer Front-End-Entwicklung verbessern und Browserkompatibilitätsprobleme gut lösen können, müssen wir dennoch eine solide Grundlage in der JavaScript-Technologie schaffen. In diesem Artikel wird die Essenz von JavaScript und dem Document Object Model (DOM) vorgestellt.
JavsScript ist eine dynamische, lose typisierte, prototypbasierte Programmiersprache, die in einer Vielzahl von Umgebungen verwendet werden kann. Sie ist nicht nur eine beliebte Web-Client-Programmiersprache, sondern kann auch für IDE-Plug-Ins, PDF-Dateien oder noch abstraktere Konzepte für andere Plattformen verwendet werden.
JavaScript ist eine Sprache, die auf dem ECMAScript-Standard (ECMA-262) basiert, der von Brendan Eich von Netscape erstellt wurde. Ursprünglich hieß es LiveScript, wurde aber später in JavaScript geändert, was einer der Gründe ist, warum viele Leute es mit Java verwechseln. Hier ist eine detaillierte Beschreibung einiger seiner Funktionen:
◆Dynamische Programmiersprachen werden zur Laufzeit ausgeführt, sie werden nicht kompiliert. Aus diesem Grund wird JavaScript manchmal eher als Skriptsprache denn als echte Programmiersprache betrachtet (offensichtlich ein Missverständnis).
◆Lose typisierte Sprachen erfordern kein starkes Typsystem. Wenn Sie (im Gegensatz zu JavaScript) C- oder Java-Programmierung verwenden, wissen Sie, dass Sie so etwas wie „int“ (Ganzzahl) deklarieren müssen. Der Unterschied zu JavaScript besteht darin, dass Sie den Typ nicht angeben müssen.
◆In JavaScript verwenden wir Prototypen, um ähnliche Effekte wie die Vererbung zu erzielen. JavaScript unterstützt keine Klassen.
◆JavaScript ist auch eine funktionale Sprache, die Funktionen als Prioritätsobjekte behandelt. Es basiert auf dem Lambda-Konzept.
Das Verständnis der oben genannten Konzepte ist für das Erlernen der JavaScript-Technologie nicht sehr relevant. Es vermittelt lediglich jedem ein erstes und korrektes Verständnis von JavaScript und den wesentlichen Unterschied zwischen JavaScript und anderen Programmiersprachen.
Dokumentobjektmodell
Dokumentobjektmodell (Document Object Model), üblicherweise als DOM bezeichnet, ist die Schnittstelle zwischen Website-Inhalten und JavaScript. Da JavaScript zur am häufigsten verwendeten Sprache geworden ist, werden JavaScript und das DOM oft als separate Einheiten behandelt. Die DOM-Schnittstelle wird verwendet, um auf HTML- und XML-Dokumente zuzugreifen, sie zu durchlaufen und zu steuern.
Hier sind einige wichtige Dinge, die Sie über das DOM wissen sollten:
◆Das Window-Objekt ist ein globales Objekt, Sie versuchen einfach, „window“ zu verwenden, um darauf zuzugreifen. Das Window-Objekt enthält Ihren gesamten auszuführenden JavaScript-Code. So wie alle Objekte Eigenschaften und Methoden enthalten.
◆Attribute sind Variablen, die unter dem Objekt gespeichert sind. Alle auf der Webseite erstellten Variablen werden zu Eigenschaften des Fensterobjekts.
◆Methoden sind Funktionen, die unter dem Objekt gespeichert sind. Während alle Funktionen unter dem Fensterobjekt gespeichert sind, können Sie sie mithilfe von „Methoden“ referenzieren.
◆DOM erstellt eine hierarchische Struktur relativ zur Webdokumentstruktur, und die Hierarchie besteht aus Knoten. Es gibt viele verschiedene Arten von DOM-Knoten, die wichtigsten davon sind „Element“, „Text“ und „Dokument“.
◆Der Knoten „Element“ stellt das Element auf der Seite dar. Wenn Sie also ein Absatzelement („
“) auf der Seite haben, können Sie über den DOM-Knoten darauf zugreifen.
◆Der Knoten „Text“ stellt den gesamten Text auf der Seite (im Element) dar. Wenn sich also Textinhalt im Absatz der Seite befindet, können Sie über den DOM-Knoten darauf zugreifen.
◆Der Knoten „Dokument“ repräsentiert das gesamte Dokument. (Es ist der Wurzelknoten des DOM-Baums)
◆ Beachten Sie außerdem, dass die Elementattribute die DOM-Knoten selbst sind.
◆Verschiedene Layout-Engines weisen bestimmte Unterschiede in der Ausführung von DOM-Standards auf. Beispielsweise kann der FireFox-Browser, der die Gecko-Layout-Engine verwendet, eine gute Leistung erbringen (aber er entspricht nicht vollständig der W3C-Spezifikation), aber der IE, der die Trident-Engine verwendet, ist für seine vielen Fehler und die unvollständige Implementierung des DOM-Standards bekannt. Dies ist einer der Schwachpunkte bei der Front-End-Entwicklung.
JavaScriptScript-Elemente in Webseiten
Wenn Sie JavaScript auf Ihrer Website verwenden möchten, müssen Sie diese in ein Skriptelement einbinden:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.php.cn">
<html xmlns="http://www.php.cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript!</title>
</head>
<body>
<script type="text/javascript">
// <![CDATA[
// ]]>
</script>
</body>
</html>Wie Sie sehen können Unterhalb des Dokuments befindet sich ein Skriptelement. Streng genommen sollte das Typattribut tatsächlich auf „application/javascript“ gesetzt werden, aber erwartungsgemäß funktioniert es unter dem IE-Browser nicht richtig. Daher verwenden wir „text/javascript“ oder verwenden das Typattribut nicht, wenn es Ihnen wichtig ist Informationen zur Überprüfung der W3C-Spezifikation des Codes. Wenn ja, wird empfohlen, ersteres zu verwenden („Text/Javascript“).
Sie werden außerdem feststellen, dass wir innerhalb des Skriptelements auch ein Paar auskommentierter Codezeilen haben, die XHTML-fähigen Browsern mitteilen, dass der Inhalt im Skriptelement Zeichendaten sind und nicht als solche interpretiert werden sollten XHTML-Markup. Dies ist erforderlich, wenn Sie die Zeichen „<“ oder „>“ in Ihrem JavaScript-Code verwenden möchten. Wenn Sie normalen HTML-Code verwenden, können Sie diesen natürlich vollständig ignorieren.
defer-Attribut
Der JavaScript-Code in unserem Skriptelement wird während des Seitenlesevorgangs ausgeführt. Die einzige Ausnahme besteht, wenn das Skriptelement das defer-Attribut hat. Wenn der Browser auf ein Skriptelement stößt, stoppt er standardmäßig und führt den Code aus, bevor er mit der Dokumentanalyse fortfährt. Das Defer-Attribut teilt dem Browser mit, dass der Code nicht dokumentierten Code enthält und später ausgeführt werden kann. Das einzige Problem dabei ist, dass es nur im IE verfügbar ist. Wir sollten also versuchen, es nicht zu verwenden und es einfach zu verstehen.
Externes Skript verlinken
Wenn Sie eine Verbindung zu einer externen Skriptdatei herstellen möchten, müssen Sie Ihrem Skriptelement lediglich ein src-Attribut mit der Dateiadresse hinzufügen. Die Skriptdatei zu trennen und unabhängig aufzurufen ist in der Tat eine bessere Idee als Inline-Skripte. Das bedeutet, dass der Browser die Datei zwischenspeichern kann und Sie sich keine Gedanken über CDATA-Unsinn machen müssen.
JavaScript-Grundlagen
Es ist notwendig, etwas zu lernen, bevor wir fortfahren Sprechen Sie über DOM. Die Grundlagen von JavaScript. Wenn Sie Schwierigkeiten haben, etwas zu verstehen, machen Sie sich keine Sorgen, Sie werden es früher oder später herausfinden. Es gibt verschiedene Arten von Werten in JavaScript: Numerisch, String, Boolesch, Objekt, Undefiniert und Null. Einzeilige Kommentare verwenden zwei Schrägstriche (//), und alles innerhalb dieser Zeile wird als Kommentarinhalt verstanden. Mehrzeilige Kommentare verwenden „/*“ und „*/“, um den Kommentarabsatz zu vervollständigen.
Zahl
Alle numerischen Werte werden in JavaScript als Gleitkommawerte dargestellt. Denken Sie daran, beim Definieren numerischer Variablen keine Anführungszeichen zu verwenden.
// Hinweis: Verwenden Sie immer „var“, um Variablen zu deklarieren: var leftSide = 100;
var topSide = 50;
var areaOfRectangle = leftSide * topSide;
var allOfIt = firstPart + ' ' + secondPart; // + Zeichen für String-Verkettung!
// (Kann auch für mathematische Additionsoperationen verwendet werden)
Boolean
Der Typ Boolean ist nützlich, wenn Sie bedingte Urteile fällen, um festzustellen, ob bestimmte Kriterien erfüllt sind. Boolean hat zwei mögliche Werte: wahr und falsch. Das Ergebnis jedes Vergleichs unter Verwendung logischer Algorithmen ist boolesch.
5 === (3 + 2); // = true // Sie können boolesche Werte für Variablen deklarieren:
var veryTired = true; :if (veryTired) {
// Ihr Code
}
Das „===“, das Sie oben sehen, ist ein Vergleichsoperator, den wir später besprechen werden.
Funktion
// Hier ist der Code der Funktion
}
// Wenn Sie Lassen Sie den Funktionsnamen weg, dann erstellen Sie eine „anonyme Funktion“:
function(arg1, arg2) {
// Hier ist der Code der Funktion
}
// Um die Funktion auszuführen, müssen Sie nur eine Referenz erstellen und Klammern (mit Parametern) verwenden:
myFunctionName(); // ohne Parameter
myFunctionName('foo', 'bar');
// Sie können Funktionen auch ausführen, ohne Variablen zu deklarieren
(function(){
// Dies ist die sogenannte selbstaufrufende anonyme Funktion
})( );
Array
Ein Array ist ebenfalls ein spezialisiertes Objekt, das eine beliebige Datenmenge enthalten kann. Um auf Daten in einem Array zuzugreifen, müssen Sie eine Zahl verwenden, die auf den „Index“ im Array verweist.
var Fruit = ['apple', 'lemon', 'banana']; :
var Fruit = new Array('apple', 'lemon', 'banana');
fruit[0] // Zugriff auf das erste Datenelement (Apfel) im Array
Fruit[1]; // Zugriff auf das zweite Datenelement im Array (Zitrone)
Frucht[2] // Zugriff auf das dritte Datenelement im Array (Banane)
Objekt
An Das Objekt ist eine benannte Sammlung von Werten (Schlüssel-Wert-Paaren), die einem Array sehr ähnlich ist. Der einzige Unterschied besteht darin, dass Sie für jeden Datenwert einen Namen angeben können.
// Zwei verschiedene Arten, Objekte zu deklarieren, " "
// Literal (geschweifte Klammern):
" Name: 'Li',
" Alter : 23, job: 'Web Developer'
}; ;
profile.age = 23;
profile.job = 'Web Developer';
if/else-Anweisung
if/else-Anweisung ist die häufigste Struktur in JavaScript Wie folgt:
var legalDrinkingAge = 21; var yourAge = 23; if ( yourAge >= legalDrinkingAge )
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
