Wer kennt nicht die Aufforderung, Java zu aktualisieren, wenn man versucht, auf bestimmte Webseiten zuzugreifen?
Während viele Menschen mit Java von interaktiven Webseiten-Funktionen vertraut sind, sind die Nutzer vielleicht weniger vertraut mit JavaScript – oder sie halten die beiden fälschlicherweise für das Selbe.
In diesem Artikel besprechen wir, was JavaScript ist und die Unterschiede zwischen Java und JavaScript. Dann bieten wir dir einen Überblick über einige der wichtigsten Funktionen von JavaScript.
Los geht’s!
Schau dir unseren Video-Leitfaden zu JavaScript an
Was ist JavaScript?
Einfach ausgedrückt ist JavaScript eine beliebte Skriptsprache, um interaktive Funktionen und andere dynamische Webinhalte zu Webseiten hinzuzufügen. Bekannte Beispiele für JavaScript-Inhalte sind ausfüllbare Formulare, Diashows in Fotogalerien und animierte Grafiken.
JavaScript ist auch relativ intuitiv und einfach zu erlernen. Es ist ein hervorragender Ausgangspunkt für diejenigen, die mehr über die Entwicklung von Webseiten lernen wollen.
JavaScript ist die letzte Schicht der Funktionalität auf hochinteraktiven Webseiten. HTML bietet die grundlegende Struktur für die Seite. CSS ist das modische Element deiner Webseite – es legt den Stil deiner Seite fest. JavaScript fügt dann die Aufregung hinzu.
Wenn du JavaScript lernst, ist es wichtig, die Beziehung zwischen HTML, CSS und JavaScript zu verstehen, und wie sie bei der Darstellung einer Webseite zusammenkommen.
Wofür JavaScript verwendet wird
JavaScript hat verschiedene Anwendungen, die jeder, der interaktive Webseiten oder mobile Anwendungen besucht hat, wahrscheinlich schon erlebt hat. Während die Entwicklung von Webseiten – einschließlich des Hinzufügens von Elementen wie interaktiven Formularen und Animationen – die traditionellste Anwendung für JavaScript ist, findet es auch Verwendung in:
- Webbrowser-basierte Spiele – einschließlich 2D- und 3D-Spiele
- Entwicklung von mobilen Anwendungen – vorteilhaft, weil es unabhängig von der Smartphone-Plattform ist
- Präsentationen – die Erstellung von webbasierten animierten Slide Decks
Obwohl die meisten JavaScript-Anwendungen clientseitig sind, ist JavaScript auch bei serverseitigen Anwendungen hilfreich, z.B. bei der Erstellung von Webservern.
Unterschiede zwischen Java und JavaScript
Zunächst ist es wichtig zu wissen, dass Java und JavaScript nicht miteinander verwandt sind, obwohl sie den Begriff „Java“ teilen. Sowohl Java als auch JavaScript sind Sprachen für die Entwicklung von Webseiten und Webanwendungen. Sie haben jedoch deutliche Unterschiede, darunter:
- Objektorientierte Programmierung: Java ist eine objektorientierte Programmiersprache. JavaScript ist eine objektorientierte Skriptsprache.
- Syntax: Die Syntax von JavaScript ist nicht so formal und strukturiert wie die von Java. Daher ist sie für die meisten Benutzer einfacher.
- Kompilierung: Java ist eine kompilierte Sprache, während JavaScript eine interpretierte Sprache ist, die zur Laufzeit Zeile für Zeile interpretiert wird; kompilierte Sprachen sind tendenziell schneller, aber interpretierte Sprachen sind tendenziell flexibler.
- Umgebung: Du kannst Java-Anwendungen in praktisch jeder Umgebung verwenden, indem sie in virtuellen Maschinen oder Browsern laufen; JavaScript ist nur für Browser geeignet.
- Memory Verbrauch: Java ist speicherintensiver als JavaScript; dies macht JavaScript für Webseiten und Webanwendungen vorteilhafter.
Ist JavaScript sicher?
Obwohl JavaScript weit verbreitet ist und für die Webentwicklung genutzt wird, hat es bekannte Schwachstellen. Eine der häufigsten Cyberattacken, die durch JavaScript-Schwachstellen eingeführt werden, ist der Cross-Site-Scripting (XSS)-Angriff. Cyberkriminelle nutzen XSS-Angriffe, um sich Zugang zu Identitätsdaten zu verschaffen und diese zu stehlen. Um Exploits zu minimieren, ist es wichtig, deinen Code während der Entwicklung zu testen und zu überprüfen. Testmethoden wie statisches und dynamisches Application Security Testing (SAST und DAST) helfen dabei, Schwachstellen an allen Punkten des Softwareentwicklungslebenszyklus zu identifizieren. Laut den Sicherheitsanalysten von Cloud Defense prüft SAST deinen Code auf die Verletzung von Sicherheitsregeln und vergleicht die gefundenen Schwachstellen zwischen dem Quell- und Zielzweig. Du wirst benachrichtigt, wenn die Abhängigkeiten deines Projekts von neu entdeckten Schwachstellen betroffen sind.
Vanilla JavaScript
Vanilla JavaScript ist eine leichtgewichtige Implementierung der reinen JavaScript-Sprache ohne zusätzliche Bibliotheken. Hier bezieht sich der Begriff „Vanilla“ auf unangepasstes JavaScript. Viele große Unternehmen nutzen Vanilla JS, darunter Google, Microsoft, Apple, Amazon und andere. Vanilla JavaScript ist ein hervorragender Weg, um die Grundlagen der JavaScript-Programmierung zu erlernen, bevor du dich mit fortgeschrittenen Funktionen beschäftigst, die in Bibliotheken angeboten werden.
JavaScript-Bibliotheken
Eine JavaScript-Bibliothek ist eine Sammlung von vorprogrammiertem Code, der bestimmte Funktionen ausführt. Bibliotheken ermöglichen es auch Anfängern, schnell nützliche Webseiten zu erstellen. Und sie sparen sowohl Anfängern als auch erfahrenen Nutzern viel Zeit bei der Erstellung von Seiten und Anwendungen. Es gibt zwar viele JavaScript-Bibliotheken, aber zu den beliebtesten gehören jQuery, Anime.js, Animate on Scroll und Leaflet.js.
Wie JavaScript mit Webseiten-Frameworks zusammenhängt
Webseiten-Frameworks sind fortgeschrittene Webseiten-Builder, die in der Regel über umfangreiche Bibliotheken mit vorgefertigten Funktionen und Test-Suiten verfügen. Du bist vielleicht mit serverseitigen Frameworks wie Laravel, Ruby on Rails oder Django vertraut. Aber es gibt auch einige beliebte JavaScript-basierte Frameworks für die Kundenseite, darunter React.js, Vue.js und Node.js.
Das JavaScript DOM
Das DOM, oder Document Object Model, fungiert als Schnittstelle zwischen einer Programmiersprache wie JavaScript und einem zugrundeliegenden Dokument – speziell HTML und XML Dokumenten. DOM ist ein W3C (World Wide Web Consortium) Standard, definiert als „eine plattform- und sprachneutrale Schnittstelle, die es Programmen und Skripten erlaubt, dynamisch auf den Inhalt, die Struktur und den Stil eines Dokuments zuzugreifen und diese zu aktualisieren.“ Dokumente bestehen aus einer Sammlung von einzelnen Elementen und Properties (Text, Buttons, Links, etc.).
Grundlegende Komponenten von JavaScript
Wie bei anderen Programmiersprachen auch, verwendet JavaScript Variablen, um die Speicherorte von Daten zu identifizieren. Variablen können entweder global (von jeder Funktion im Code zugänglich) oder lokal, auch block-scoped genannt (nur in dem Block zugänglich, in dem sie deklariert wurden), sein. Variablen können entweder feste Werte (Konstanten, bekannt als Literale) oder veränderbare Werte enthalten. JavaScript hat eine spezielle Syntax, um Konstanten und Variablen zu deklarieren (zu erstellen) und ihnen Werte zuzuweisen.
Deklaration einer Konstante
Echte Konstanten werden mit einer const Deklaration erstellt.Const erstellt schreibgeschützte, unveränderbare, block-scoped Konstanten („block-scoped“ bedeutet, dass die Konstante nicht von außerhalb ihres deklarierten Blocks zugänglich ist). Ein Beispiel für die Verwendung von const zum Erstellen einer Konstante ist:
const GOLDEN_RATIO = 1.618; // create a constant named GOLDEN_RATIO with value 1.618Beachte die Verwendung von Großbuchstaben für die Benennung der Konstante; dies ist eine allgemein akzeptierte Namenskonvention, obwohl sie nicht erforderlich ist. Variablennamen, einschließlich const Namen, müssen mit einem Buchstaben (Klein- oder Großbuchstaben), dem Unterstrich (_), oder dem Dollarzeichen ($). Die Groß- und Kleinschreibung wird beachtet, also achte darauf, wie du deine Variablen benennst. Konstanten müssen, im Gegensatz zu Variablen, bei der Erstellung einen Wert zugewiesen bekommen. Die folgende Anweisung wird einen Fehler zurückgeben:
const GOLDEN_RATIO;Deklarieren einer Variable
Variablen werden mit dem Keyword var deklariert. Ihnen muss bei der Deklaration kein Wert zugewiesen werden, obwohl dies zulässig ist und häufig gemacht wird. Das Keyword var hat einen globalen Geltungsbereich und keinen Block-Geltungsbereich (es sei denn, es befindet sich in einer Funktion, dann hat es einen Funktions-Geltungsbereich).
var variable1; // declare a variable called variable1
var variable2 = "2021"; // declare a string variable called variable2 and initialize with value 2021
variable1 = "Thank goodness it's" // assign string value to previously declared variable variable1
console.log(variable1 + " " + variable2); // display "Thank goodness it's 2021"Beachte, dass Anweisungen in JavaScript mit einem Semikolon enden müssen. Du kannst Kommentare mit // erstellen – JavaScript ignoriert alles zwischen // und dem Ende der Zeile. Variablen können eine Vielzahl von Datentypen enthalten, darunter Zahlen, Strings und Objekte. Die Zuweisung von Variablen in JavaScript ist dynamisch. Du kannst also eine Variable im selben Code einem anderen Datentyp zuweisen.
Hoisting
Jetzt, wo du die Variablendeklaration in JavaScript verstanden hast, können wir besprechen, wie JavaScript mit dem Ort der Variablendeklaration umgeht. Die allgemein akzeptierte Programmierpraxis sieht vor, dass man Variablen deklariert, bevor man sie definiert, oder zur gleichen Zeit. Einige Programmiersprachen verlangen dies sogar. JavaScript erlaubt es jedoch, Variablen zu deklarieren, nachdem sie definiert oder verwendet wurden. Mit einem Feature namens Hoisting, verschiebt JavaScript die Deklarationen an den Anfang des aktuellen Skripts oder der Funktion. Während Hoisting die Programmierung vereinfachen kann, indem es dem Programmierer erlaubt, einen Fehler bei der Deklaration zu korrigieren, ohne durch den Code zurückblättern zu müssen, ist die Deklaration von Variablen nach der Verwendung nicht mit den besten Programmierpraktiken vereinbar. Hoisting kann auch unerwartete Probleme verursachen, hauptsächlich weil Hoisting nur für die Deklaration gilt. Wenn eine Variable in der gleichen Anweisung deklariert und initialisiert wird, erzeugt Hoisting eine Deklaration am Anfang des Blocks und weist der Variable einen undefinierten Wert zu. Somit wird jede Verwendung der Variable im Block vor der eigentlichen Deklarationsanweisung annehmen, dass die Variable undefiniert ist, anstatt den Initialisierungswert zu haben. Lass uns das obige Beispiel verwenden, um das Verhalten des Hoisting zu überprüfen:
var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1
console.log(variable_1 + " " + variable_2); //
var variable_2 = "2021" // declare and initialize a string variable called variable2Während das Hoisting die Deklaration variable_2 an den Anfang des Blocks verschiebt, verschiebt es nicht den zugewiesenen Wert. Diese Logik funktioniert in etwa gleich wie die folgende Syntax:
var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1
var variable_2;
console.log(variable1 + " " + variable2); //
variable_2 = "2021" // assign string value to variable2In beiden Szenarien ist der finale Wert „Thank goodness it’s 2021“ nicht Teil der Ausgabe. Wir empfehlen dir, die Best Practice der Deklaration von Variablen zu nutzen, um mögliche Probleme zu vermeiden und sauberen Code zu erstellen.
Objekte
JavaScript basiert auf dem Konzept von Objekten. Objekte sind Container, die Properties, Methoden oder beides einschließen können. Betrachte ein einfaches Beispiel. Du hast ein Objekt namens „Land“. Zu seinen Properties gehören der Name, der Kontinent, die Hauptstadt und die Bevölkerung. Du kannst dieses Objekt auf verschiedene Arten mit JavaScript erstellen. Erstens kannst du das Objektliteral oder den Objektinitialisierer verwenden:
var country = {
name:"France",
continent:"Europe",
capital:"Paris",
population:62250000;
}Du kannst auch ein Objekt instanziieren und dann seine Properties zuweisen:
var country = new Object();
country.name = "France";
country.continent = "Europe";
country.capital = "Paris";
country.population = 62250000;Beachte, dass du dich auf die Eigenschaften eines Objekts mit der Syntax object.property beziehst. Schließlich kannst du Objekte mit Hilfe von Konstruktorfunktionen erstellen:
function country(name, continent, capital, population) {
country.name = name;
country.continent = continent;
country.capital = capital;
country.population = population;
}Das Erzeugen einer Instanz des Objekts würde dann durch erfolgen:
france = new country("France","Europe","Paris",62250000)Object Properties können Variablen oder Funktionen sein. Wenn eine Property eine Funktion ist, wird sie als Methode bezeichnet (siehe unten).
Objekte vs. Klassen
Kurz gesagt, eine Klasse ist eine generische Strukturvorlage für ein Objekt. Klassen verwenden die Konstruktorform, um Objekte zu beschreiben.
class country {
Constructor (name,continent,capital,population) {
country.name = name;
country.continent = continent;
country.capital = capital;
country.population = population;
}
}Genau wie bei Objekten, können Klassen Methoden haben.
Arbeiten mit Konstanten und Variablen
Wie in anderen Sprachen gibt es auch in JavaScript mehrere Arten von Operatoren für die Verwendung mit Variablen und Funktionen, von denen die meisten sofort erkennbar sein werden:
- Zuweisungsoperatoren (
=,+=,-=,*=,/=,%=) - Vergleichsoperatoren (
==,===,!=,!==,>,>=,<,<=) - Bitweise und logische Operatoren (siehe unten)
- Arithmetische Operatoren (
+,-,*,/,%,++,--) - Spezielle Operatoren
Ein paar Operatoren sind Programmieranfängern weniger vertraut, wie z.B. identische und nicht identische Vergleichsoperatoren. === vergleicht, ob zwei Operanden sowohl den gleichen Wert als auch den gleichen Typ haben (d.h. sie sind identisch). !== vergleicht, ob zwei Operanden nicht identisch sind. Betrachte das folgende Beispiel:
var variable_1 = 5; // declare variable_1 and assign numeric value 5
var variable_2 = "5"; // declare variable_2 and assign string value "5"
console.log(variable_1 === variable_2);
console.log(variable_1 !== variable_2);Die Ausgabe für diesen Codeschnipsel würde lauten:
FALSE
TRUEEs ist auch wichtig, den Unterschied zwischen = (ein Zuweisungsoperator) und == (ein Vergleichsoperator) zu verstehen. Während = den Wert einer Variablen festlegt, prüft ==, ob zwei Operanden den selben Wert haben, einschließlich, ob eine Variable einen bestimmten Wert hat. Du solltest den = Operator nicht in bedingten Anweisungen (wie IF-Anweisungen) verwenden, um die Gleichwertigkeit zu prüfen.
Bitweise und logische Operatoren
JavaScript unterstützt die Operationen AND (&), OR (|), NOT (~), und XOR (^). In JavaScript sind diese als bitweise Operatoren bekannt. Bitweise Operationen wandeln die Operanden in 32-Bit Binärdarstellungen um, bevor sie ausgeführt werden (z.B. 20 wird zu 10100). Diese Operationen werden bitweise genannt, weil sie die umgewandelten Operanden Bit für Bit vergleichen und dann ein 32-Bit binäres Ergebnis zurückgeben, das in eine ganze Zahl umgewandelt wird. Beispiel:
var variable_1 = 20;
var variable_2 = 50;
console.log(variable_1 | variable_2) // display the result of variable_1 OR variable_2Konvertiere Operanden in binär:
20 = 010100
50 = 110010Eine OR-Verknüpfung gibt true (1) zurück, wenn eines der beiden Bits 1 ist, also ist der angezeigte Vergleichswert 110110 oder 53. In JavaScript bezieht sich der Begriff logischer Operator auf Operationen, deren Operanden nur die booleschen Werte 0 oder 1 haben. Die logischen Operatoren in JavaScript sind && (logisches AND), || (logisches OR) und ! (logisches NOT).
var variable_1;
var variable_2;
variable _1 = (6 > 5); // sets variable_1 to true or 1
variable_2 = (7 <= 6); // sets variable_2 to false or 0
Console.log(variable_1 && variable_2); // displays 0Funktionen und Methoden
Betrachte Funktionen als die Arbeitspferde in JavaScript. Sie sind Codeblöcke, die bestimmte Aufgaben erfüllen. Wenn du mit Prozeduren und Subroutinen in anderen Programmiersprachen vertraut bist, wirst du Funktionen sofort erkennen. Funktionen werden mit der folgenden Syntax definiert:
function function_name(parameter list) {
// tasks to be performed
}Das Definieren von Funktionen ist nur der erste Schritt, später musst du die Funktionen mit () im Code aufrufen:
$()
Die Funktion $() ist eine Abkürzung für die getElementByID-Methode, die, wie oben erwähnt, die ID eines bestimmten Elements des HTML-DOMs zurückgibt. Sie wird häufig verwendet, um Elemente in einem Dokument zu manipulieren. $() ermöglicht eine kürzere und effizientere Programmierung von JavaScript. Traditionelle Methode:
document.getElementByID("element_id")
$() method:
$("element_id")Funktion vs. Methode
Funktionen führen Aufgaben aus; Methoden sind Properties von Objekten, die eine Funktionsdefinition enthalten. Die Syntax für den Aufruf von Methoden ist object.function(). Funktionen sind in sich geschlossen; Methoden sind mit Objekten verbunden. Im obigen Beispiel bezieht sich die Methode document.getElementByID("element_id") auf ein Objekt (document) und die zugehörige Property für dieses Objekt (getElementbyID()). Es gibt zwei Arten von Methoden in JavaScript:
- Instanzmethoden
- Statische Methoden
Instanzmethoden können auf die Properties einer Objektinstanz zugreifen und diese manipulieren. Instanzmethoden können auch entweder eine andere Instanzmethode oder eine statische Methode aufrufen. Statische Methoden enthalten Logik, die sich auf eine Klasse bezieht, anstatt auf eine Instanz der Klasse. Um eine statische Methode zu erstellen, musst du das Wort static vor der Funktionsdefinition verwenden. Statische Methoden können nur auf statische Felder zugreifen; sie können nicht auf Instanzfelder zugreifen.
Promises in JavaScript
Ein Promise ist ein Objekt, das ein Ergebnis zu einem zukünftigen Zeitpunkt produziert. In der JavaScript-Terminologie werden Promises als produzierender und konsumierender Code bezeichnet. Funktionen können eine unbestimmte und signifikante Zeitspanne in Anspruch nehmen. Der konsumierende Code wartet auf die Ergebnisse des asynchronen produzierenden Codes, bevor er seine Funktionen ausführt. Promises definieren die Beziehung zwischen dem produzierenden Code und dem konsumierenden Code. Promises haben drei mögliche Zustände: ausstehend, erfüllt oder abgelehnt. In der Definition eines Promises werden zwei Argumente angegeben: resolve oder reject. Pending ist der Anfangszustand eines Promises und bedeutet, dass das Promise weder erfüllt noch zurückgewiesen wurde. Erfüllt bedeutet, dass das Promise aufgelöst zurückgegeben wurde. Abgelehnt bedeutet, dass das Promise zurückgegangen ist. Ein Promise, das sich nicht mehr im Schwebezustand befindet, gilt als erledigt. Eine Beispielsyntax für das Erstellen eines Promise ist:
var newPromise = new Promise(
function(resolve, reject) {
// condition to be tested
}
)Enclosures in JavaScript
Closures sind ein JavaScript-Feature, das Programmierer oft verblüfft, obwohl sie gar nicht so kompliziert sind. JavaScript Closures sind Methoden, um den Betrieb von verschachtelten Funktionen zu adressieren. Genauer gesagt erlauben Closures einer inneren Funktion den Zugriff auf den Inhalt einer übergeordneten Funktion, zusätzlich zu den globalen Variablen, auf die normalerweise zugegriffen werden kann. Beachte, dass die innere Funktion zwar auf die Variablen der äußeren Funktion zugreifen kann, der umgekehrte Fall aber nicht zutrifft. Um Closures zu verstehen, musst du dich an die Scope-Grundlagen erinnern. Variablen innerhalb einer Funktion sind in der Regel nur von dieser Funktion aus zugänglich, und der Scope wird pro Aufruf erstellt, nicht generisch für die Funktion. Closures adressieren die Tatsache, dass Variablen normalerweise verschwinden, nachdem eine Funktion beendet wurde. Sie erlauben es auch, dass Variablen zugänglich bleiben, nachdem eine Funktion gelaufen ist. Betrachte den folgenden Beispielcode:
function outer_closure_function() {
var outer_variable = "we want to keep the outer variable";
var inner_closure_function = function() {
inner_variable = "use closures because"
console.log(inner_variable + " " + outer_variable);
}
return inner_closure_function;
}
var closure = outer_closure_function(); // returns a reference to inner_closure_function
closure(); // displays "use closures because we want to keep the outer variable"Um zu verstehen, wie das Closure funktioniert, gehe Zeile für Zeile durch den Code. Zuerst definierst du die äußere Funktion und dann eine Variable, die mit ihr verbunden ist. Als nächstes definierst du die innere Funktion. Es ist wichtig zu beachten, dass du die innere Funktion nicht aufgerufen hast – du hast sie nur definiert. Als nächstes folgt eine Anweisung, die die innere Funktion zurückgibt. Aber was zurückgegeben wird, ist nicht das Ergebnis der inneren Funktion; stattdessen ist es die Funktion selbst. Wenn du also closure als outer_closure_function definierst, gibt sie nicht den tatsächlichen Wert der inneren Funktion zurück. Stattdessen gibt sie eine Referenz auf inner_closure_function zurück. Auch wenn die äußere Funktion nach dieser Anweisung abgeschlossen ist und outer_variable offiziell nicht mehr existiert. Aber sie wird immer noch in der Referenz auf inner_closure_function beibehalten. Wenn du nun closure in der letzten Anweisung aufrufst, wird das gewünschte Ergebnis angezeigt. Um Closures besser zu verstehen, solltest du selbst ein paar Beispiele programmieren und testen. Es braucht Zeit, um sie richtig zu verstehen. Außerdem hilft dir das wiederholte Aktualisieren und Testen dabei, eine agile Entwicklungsmentalität zu entwickeln. Behalte dabei aber immer die Sicherheitsprobleme im Hinterkopf – JavaScript kann anfällig für schwerwiegende Sicherheitsprobleme sein, wie SQL- und LDAP-Injections, XSS-Angriffe, etc.
Zusammenfassung
Wenn du daran interessiert bist, mehr mit deinen Webseiten zu machen, als du mit den Standarddiensten wie Wix und Square erreichen kannst, solltest du darüber nachdenken, JavaScript zu lernen. Es ist eine einfache und leicht zu erlernende Einführung in die Webseiten- und Anwendungsprogrammierung, die dir helfen kann, deiner Seite hochgradig interaktive Funktionen hinzuzufügen, ohne zu viel Zeit in den Lernprozess zu investieren. JavaScript ist auch eine gute Möglichkeit, deine Programmierkenntnisse zu verbessern, falls du dich dazu entscheidest, auf die nächste Stufe zu wechseln.
