Share
Hallo und herzlich willkommen zum ersten Teil einer hoffentlich umfangreichen Serie, die die Kernaspekte der JavaScript-Programmiersprache und der DOM-API behandelt.
Obwohl Frameworks wie jQuery, Prototype und MooTools großartige Möglichkeiten sind, Browserfehler zu unterdrücken und die Entwicklung zu beschleunigen, ist es wichtig, die zugrunde liegenden Technologien zu kennen und zu verstehen. In dieser Serie erfahren Sie, was Sie über JavaScript und das Document Object Model (DOM) wissen müssen. Selbst wenn Sie auf eine bestimmte Bibliothek schwören, wird dies immer noch von Vorteil sein - zu wissen, wie etwas unter der Haut funktioniert, kann nur eine gute Sache sein!
JavaScript ist ein dynamisch, lose getippt, Prototyp-basiert Programmiersprache, die in vielen verschiedenen Umgebungen verwendet wird. Sie ist nicht nur die vorherrschende clientseitige Programmiersprache des Webs, sondern auch Plugins für IDEs, in PDF-Dateien und als Basis für andere Plattformen und höhere Abstraktionen.
JavaScript basiert auf dem ECMAScript-Standard (ECMA-262) und wurde von Brendan Eich von Netscape erstellt. Ursprünglich hieß es LiveScript, wurde aber später in JavaScript umbenannt, wahrscheinlich mit der einzigen Absicht, Verwirrung zu verursachen.
Hier sind einige Features etwas detaillierter:
Das Verständnis der obigen Punkte ist für das Erlernen von JavaScript nicht wichtig. Es sind nur ein paar Ideen, um Ihr Gehirn in Gang zu bringen und sollten Ihnen helfen, JavaScript von anderen Programmiersprachen zu unterscheiden.
Das Document Object Model, normalerweise als DOM abgekürzt, ist die API, über die JavaScript mit dem Inhalt einer Website interagiert. JavaScript und das DOM werden normalerweise als eine Einheit betrachtet, da JavaScript meist für diesen Zweck verwendet wird (Interaktion mit Inhalten im Web). Die DOM-API wird verwendet, um auf HTML- und XML-Dokumente zuzugreifen, sie zu durchsuchen und zu bearbeiten.
Hier einige bemerkenswerte Dinge über das DOM:
') dann kann über das DOM als Knoten darauf zugegriffen werden.
Wenn Sie Firefox verwenden und das Firebug-Addon nicht bereits installiert haben, empfehle ich, dass Sie es jetzt herunterladen und installieren. Dies ist ein sehr nützliches Werkzeug, um ein gutes Bild der gesamten Dokumentstruktur zu erhalten.
Wenn Sie JavaScript auf einer Website verwenden möchten, muss es in einem SCRIPT-Element enthalten sein:
JavaScript!
Wie Sie sehen, haben wir am unteren Rand unseres Dokuments ein SCRIPT-Element. Das TYPE-Attribut sollte strikt auf 'application / javascript' gesetzt werden. Aber es ist keine Überraschung, dass dies in Internet Explorer nicht funktioniert. Daher haben wir entweder 'text / javascript' oder überhaupt kein TYPE-Attribut. Wenn Sie sich für die Validierung interessieren, wird der frühere Vorschlag wahrscheinlich zu Ihnen passen.
Sie haben auch bemerkt, dass wir innerhalb dieses SCRIPT-Elements einige auskommentierte Zeilen haben. Diese informieren XHTML-unterstützende Browser, dass der Inhalt des SCRIPT-Elements "Zeichendaten" ist und nicht als XHTML-Markup interpretiert werden sollte. Es ist nur wirklich notwendig, wenn Sie entweder die '<' or '>'Zeichen in Ihrem JavaScript-Code. Natürlich können Sie all dies vergessen, wenn Sie reines HTML verwenden.
Jedes JavaScript, das wir in dieses SCRIPT-Element einfügen, wird beim Laden der Seite ausgeführt. Die einzige Ausnahme ist, wenn ein SCRIPT-Element ein Attribut 'defer' hat. Wenn ein Browser auf ein SCRIPT-Element trifft, wird der Code standardmäßig angehalten und ausgeführt. Anschließend wird das Dokument weiter analysiert. Das DEFER-Attribut informiert den Browser, dass der Code keinen Code zum Ändern des Dokuments enthält und daher später ausgeführt werden kann. Das einzige Problem dabei ist, dass es nur im IE funktioniert. Es ist daher am besten, dieses Attribut zu vermeiden.
Wenn Sie eine Verknüpfung zu einer externen Skriptdatei herstellen möchten, fügen Sie Ihrem SCRIPT-Element einfach ein SRC-Attribut hinzu, das seiner Position entspricht. Normalerweise ist es besser, separate Skriptdateien zu haben, als Code inline zu schreiben, da der Browser die Datei zwischenspeichern kann. Darüber hinaus brauchen Sie sich um keinen CDATA-Quatsch zu sorgen:
Bevor wir mit dem DOM fortfahren, ist es eine gute Idee, einige Grundkenntnisse in JavaScript zu haben. Wenn Sie Schwierigkeiten haben, einige davon zu verstehen, machen Sie sich keine Sorgen - Sie werden sie irgendwann abholen!
In JavaScript können Sie verschiedene Arten von Werten haben. Es gibt Zahlen, Strings, Booleans, Objekte, Undefined und Null:
Einzeilige Kommentare werden mit zwei Schrägstrichen (//) geschrieben. Der restliche Text in dieser Zeile wird vom Parser als Kommentar angenommen. Mehrzeilige Kommentare werden mit '/ *' und '* /' gekennzeichnet, um den Kommentar zu beenden.
In JavaScript werden alle Zahlen als Gleitkommawerte dargestellt. Denken Sie bei der Definition einer Zahlenvariablen daran, diese nicht in Anführungszeichen zu setzen.
// Hinweis: Verwenden Sie IMMER 'var', um eine Variable zu deklarieren: var leftSide = 100; var topSide = 50; var areaOfRectangle = leftSide * topSide; // = 5000
Jede Zeichenfolge, die Sie definieren, wird wörtlich genommen, JavaScript wird sie nicht verarbeiten. Eine Zeichenfolge ist eine Folge von Unicode-Zeichen und sollte in ein passendes Paar aus einfachen oder doppelten Anführungszeichen eingeschlossen werden.
var firstPart = 'Hallo'; var secondPart = 'Welt!'; var allOfIt = firstPart + "+ secondPart; // Hello World! // Das Zeichen + wird als String-Verkettungsoperator // verwendet (es wird auch zur numerischen Addition verwendet)
Boolesche Typen sind hilfreich, wenn Sie eine Bedingung auswerten möchten, um festzustellen, ob sie bestimmte Kriterien erfüllt. Es gibt nur zwei mögliche boolesche Werte: true und false. Jeder Vergleich mit logischen Operatoren führt zu einem Boolean.
5 === (3 + 2); // = true // Sie können Variablen boolesche Werte zuweisen: var veryTired = true; // So kannst du es testen: if (veryTired) // sleep
Das oben angezeigte '===' ist ein Vergleichsoperator, den wir später behandeln werden.
Eine Funktion ist ein spezialisiertes Objekt:
Accentsconagua
// Mit dem Funktionsoperator eine neue Funktion erstellen: function myFunctionName (arg1, arg2) // Hier geht der Funktionscode ein. // Wenn Sie den Namen der Funktion weglassen, erstellen Sie // eine "anonyme Funktion": function (arg1, arg2) // Hier geht der Funktionscode ein. // Beim Ausführen einer Funktion wird einfach darauf verwiesen, // und dann eine Klammer (mit Argumenten) hinzugefügt: myFunctionName (); // Keine Argumente myFunctionName ('foo', 'bar'); // mit Argumenten // Sie können eine Funktion auch ausführen, ohne // dass sie einer Variablen zugewiesen wird: (function () // Dies wird als selbstaufrufende anonyme Funktion bezeichnet.) (); Ein Array ist ebenfalls ein spezialisiertes Objekt und kann eine beliebige Anzahl von Datenwerten enthalten. Um auf Datenwerte innerhalb eines Arrays zuzugreifen, müssen Sie eine Zahl verwenden, die als "Index" des Elements bezeichnet wird, das Sie abzurufen versuchen:
// 2 verschiedene Arten, ein neues Array zu deklarieren, // wörtlich: var fruit = ['apple', 'lemon', 'banana']; // Verwendung des Array-Konstruktors: var fruit = new Array ('Apfel', 'Zitrone', 'Banane'); Obst [0]; // Zugriff auf das 1. Element des Arrays (Apfel) Obst [1]; // Zugriff auf das 2. Element des Arrays (Zitrone) Obst [2]; // Zugriff auf das dritte Element des Arrays (Banane) Ein Objekt ist eine Sammlung von benannten Werten (Schlüssel-Wert-Paaren). Es ähnelt einem Array, der einzige Unterschied besteht darin, dass Sie für jeden Datenwert einen Namen angeben können.
// 2 verschiedene Arten, ein neues Objekt zu deklarieren, // wörtliche (geschweifte Klammern): var profile = Name: 'Bob', Alter: 99, Job: 'Freelance Hitman'; // Verwendung des Objektkonstruktors: var profile = new Object (); profile.name = 'Bob'; profile.age = 99; profile.job = 'Freiberuflicher Hitman';
Eines der häufigsten Konstrukte in JavaScript ist das 'ANSONSTEN' Aussage. Es geht ungefähr so:
var legalDrinkingAge = 21; var yourAge = 29; if (yourAge> = legalDrinkingAge) // Wir können 'alert' verwenden, um den Benutzer zu benachrichtigen: alert ('Sie können trinken.'); else alert ('Sorry, Sie können nicht trinken.'); Anstatt alle hier aufzulisten, schlage ich vor, den MDC-Artikel zu Operatoren zu besuchen. Es erklärt sie sehr detailliert. Ich habe ein paar Beispiele erstellt, um Ihnen einen Eindruck davon zu vermitteln, wie einige der Operatoren unten verwendet werden:
// Additioa / Substraction / Multiplizieren / Dividieren var someMaths = 2 + 3 + 4 - 10 * 100/2; // Gleichheit if (2 == (5 - 3) / * Do stuff * / // == prüft die Gleichheit // Ungleichung if (2! = (5 - 3) / * Do stuff * / / / Strikte Gleichheitsoperatoren: // (Ich schlage vor, diese zu verwenden) 2 === 2 // Anstelle von 2 == 2 2! == 3 // Anstelle von 2! = 3 // Zuweisung: var numberOfFruit = 9; numberOfFruit - = 2; // Wie "numberOfFruit = numberOfFruit - 2" numberOfFruit + = 2; // Wie "numberOfFruit = numberOfFruit + 2"
Eine Schleife ist nützlich, wenn Sie alle Elemente in einem Array oder alle Elemente eines Objekts durchgehen müssen. Die häufigste Methode zum Schleifen in JavaScript ist die Verwendung der Anweisung FOR oder WHILE.
var envatoTutSites = ['NETTUTS', 'PSDTUTS', 'AUDIOTUTS', 'AETUTS', 'VECTORTUTS']; // WHILE loop var counter = 0; var lengthOfArray = envatoTutSites.length; während (Zähler < lengthOfArray) alert(envatoTutSites[counter]); counter++; // Same as counter += 1; // FOR loop // (The i stands for "iterator" - you could name it anything) for (var i = 0, length = envatoTutSites.length; i < length; i++) alert(envatoTutSites[i]);
Nehmen wir an, wir haben ein XHTML-Basisdokument, das einen Absatz und eine ungeordnete Liste enthält:
JavaScript! Mein erster Absatz…
In diesem ersten Beispiel greifen wir auf unseren Absatz über die DOM-Methode 'getElementById' zu:
(Dieser Code gehört zum SCRIPT-Element in der obigen Vorlage.).
var introParagraph = document.getElementById ('intro'); // Wir haben jetzt einen Verweis auf den DOM-Knoten. Dieser DOM-Knoten // repräsentiert den Intro-Absatz. Die Variable 'introParagraph' ist jetzt eine Referenz auf den DOM-Knoten. Mit diesem Knoten können wir eine Reihe von Dingen ausführen - wir können dessen Inhalt und Attribute abfragen und jeden Aspekt davon bearbeiten. Wir können es entfernen, klonen oder in andere Bereiche des DOM-Baums verschieben.
Auf alles, was in einem Dokument vorhanden ist, können wir mit JavaScript und der DOM-API zugreifen. Daher möchten wir möglicherweise auf ähnliche Weise auf die ungeordnete Liste zugreifen. Das einzige Problem ist, dass sie keine ID hat. Sie könnten ihm eine ID geben und dann dieselbe Methode wie oben verwenden oder wir können mit 'getElementsByTagName' darauf zugreifen:
var allUnorderedLists = document.getElementsByTagName ('ul'); // 'getElementsByTagName' gibt eine Live-Knotensammlung / -Liste zurück // - Dies ist einem Array sehr ähnlich, mit einigen geringfügigen Unterschieden. Die Methode 'getElementsByTagName' gibt eine Liste / Liste aktiver Knoten zurück. Es ähnelt einem Array dahingehend, dass es eine length-Eigenschaft hat. Zu beachten ist, dass diese Sammlungen "live" sind. Wenn Sie dem DOM ein neues Element hinzufügen, wird die Sammlung selbst aktualisiert. Da es sich um ein Array-ähnliches Objekt handelt, können wir über einen Index auf jeden Knoten von 0 bis zur Gesamtlänge der Sammlung (minus 1) zugreifen:
// Zugriff auf eine ungeordnete Liste: [0] index var unorderedList = document.getElementsByTagName ('ul') [0]; // Liste der Knoten aller Listenelemente innerhalb des UL erstellen: var allListItems = unorderedList.getElementsByTagName ('li'); // Jetzt können wir jedes Listenelement mit einer FOR-Schleife durchlaufen: for (var i = 0, length = allListItems.length; i < length; i++) // Extract text node within and alert its content: alert( allListItems[i].firstChild.data ); 
Der Begriff "Durchqueren" wird verwendet, um die Aktion des Durchlaufens des DOM zu beschreiben, wobei Knoten gefunden werden. Die DOM-API bietet uns viele Knoteneigenschaften, mit denen wir alle Knoten innerhalb eines Dokuments auf und ab bewegen können.
Diese Eigenschaften sind allen Knoten inhärent und ermöglichen den Zugriff auf verwandte / nahe Knoten:
Wie Sie sehen können, ist das Durchqueren des DOM-Objekts unglaublich einfach. Es ist nur der Fall, wenn Sie die Eigenschaftsnamen kennen.
Eine Anmerkung zur obigen Grafik: Die Listenelemente können auf diese Weise nur abgerufen werden, wenn sich zwischen ihnen kein Leerzeichen befindet. Da sich in einem Dokument Textknoten und Elementknoten befinden können, ist der Raum zwischen den '
So funktionieren alle wichtigen JavaScript-Bibliotheken hinter den Kulissen. Verwenden Sie native DOM-Methoden und -Eigenschaften, um Ihnen durch eine schön geschliffene Abstraktion Zugriff auf diese Elemente zu gewähren. Was Sie von den Frameworks abtrennt, ist, dass Sie jetzt eine Vorstellung davon haben, wie Sie ohne Framework auskommen können (falls Sie dies nicht bereits getan haben).!
Nun, das war es für den ersten Teil. Ich hoffe, Sie haben aus all meinen Wanderungen etwas gelernt. Im nächsten Teil der Serie werden wir uns hoffentlich auf einige anwendbare Beispiele konzentrieren. Wir werden wahrscheinlich auch das Browserereignismodell behandeln.
In der Zwischenzeit und wenn Sie es nicht bereits getan haben, lesen Sie diese Gespräche von Doug Crockford (Yahoo! Video-Site):
Danke fürs Lesen!
