Schau dir unseren Video-Leitfaden<\/a> zu JavaScript an<\/h3>\n<\/kinsta-video>\nWas ist JavaScript?<\/h2>\n
Einfach ausgedr\u00fcckt ist JavaScript eine beliebte Skriptsprache<\/a>, um interaktive Funktionen und andere dynamische Webinhalte zu Webseiten hinzuzuf\u00fcgen. Bekannte Beispiele f\u00fcr JavaScript-Inhalte sind ausf\u00fcllbare Formulare, Diashows in Fotogalerien und animierte Grafiken.<\/p>\nJavaScript ist auch relativ intuitiv und einfach zu erlernen. Es ist ein hervorragender Ausgangspunkt f\u00fcr diejenigen, die mehr \u00fcber die Entwicklung von Webseiten lernen wollen.<\/p>\n
JavaScript ist die letzte Schicht der Funktionalit\u00e4t auf hochinteraktiven Webseiten. HTML<\/a> bietet die grundlegende Struktur f\u00fcr die Seite. CSS<\/a> ist das modische Element deiner Webseite – es legt den Stil deiner Seite fest. JavaScript f\u00fcgt dann die Aufregung hinzu.<\/p>\nWenn du JavaScript lernst, ist es wichtig, die Beziehung zwischen HTML, CSS und JavaScript zu verstehen, und wie sie bei der Darstellung einer Webseite zusammenkommen.<\/p>\n
Wof\u00fcr JavaScript verwendet wird<\/h2>\n
JavaScript hat verschiedene Anwendungen<\/a>, die jeder, der interaktive Webseiten oder mobile Anwendungen besucht hat, wahrscheinlich schon erlebt hat. W\u00e4hrend die Entwicklung von Webseiten – einschlie\u00dflich des Hinzuf\u00fcgens von Elementen wie interaktiven Formularen und Animationen – die traditionellste Anwendung f\u00fcr JavaScript ist, findet es auch Verwendung in:<\/p>\n\n- Webbrowser-basierte Spiele<\/strong> – einschlie\u00dflich 2D- und 3D-Spiele<\/li>\n
- Entwicklung von mobilen Anwendungen<\/strong> – vorteilhaft, weil es unabh\u00e4ngig von der Smartphone-Plattform ist<\/li>\n
- Pr\u00e4sentationen<\/strong> – die Erstellung von webbasierten animierten Slide Decks<\/li>\n<\/ul>\n
Obwohl die meisten JavaScript-Anwendungen clientseitig sind, ist JavaScript auch bei serverseitigen Anwendungen hilfreich, z.B. bei der Erstellung von Webservern.<\/p>\n![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/dinosaur-gameover-1024x358.png\")
Das Dinosaurier-Spiel, ein Beispiel f\u00fcr ein eingebautes Webbrowser-Spiel, das mit JavaScript erstellt wurde<\/figcaption><\/figure>\nUnterschiede zwischen Java und JavaScript<\/h2>\n
Zun\u00e4chst 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\u00fcr die Entwicklung von Webseiten und Webanwendungen. Sie haben jedoch deutliche Unterschiede, darunter:<\/p>\n
\n- Objektorientierte Programmierung:<\/strong> Java ist eine objektorientierte Programmiersprache<\/a>. JavaScript ist eine objektorientierte Skriptsprache.<\/li>\n
- Syntax<\/strong>: Die Syntax von JavaScript ist nicht so formal und strukturiert wie die von Java. Daher ist sie f\u00fcr die meisten Benutzer einfacher.<\/li>\n
- Kompilierung<\/strong>: Java ist eine kompilierte Sprache, w\u00e4hrend JavaScript eine interpretierte Sprache ist, die zur Laufzeit Zeile f\u00fcr Zeile interpretiert wird; kompilierte Sprachen sind tendenziell schneller, aber interpretierte Sprachen sind tendenziell flexibler.<\/li>\n
- Umgebung<\/strong>: Du kannst Java-Anwendungen in praktisch jeder Umgebung verwenden, indem sie in virtuellen Maschinen oder Browsern<\/a> laufen; JavaScript ist nur f\u00fcr Browser geeignet.<\/li>\n
- Memory Verbrauch<\/strong>: Java ist speicherintensiver<\/a> als JavaScript; dies macht JavaScript f\u00fcr Webseiten und Webanwendungen vorteilhafter.<\/li>\n<\/ul>\n
Ist JavaScript sicher?<\/h2>\n
Obwohl JavaScript weit verbreitet ist und f\u00fcr die Webentwicklung genutzt wird, hat es bekannte Schwachstellen. Eine der h\u00e4ufigsten Cyberattacken, die durch JavaScript-Schwachstellen eingef\u00fchrt werden, ist der Cross-Site-Scripting (XSS)-Angriff. Cyberkriminelle nutzen XSS-Angriffe, um sich Zugang zu Identit\u00e4tsdaten zu verschaffen und diese zu stehlen. Um Exploits zu minimieren, ist es wichtig, deinen Code w\u00e4hrend der Entwicklung zu testen und zu \u00fcberpr\u00fcfen<\/a>. 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<\/a> pr\u00fcft SAST deinen Code auf die Verletzung von Sicherheitsregeln und vergleicht die gefundenen Schwachstellen zwischen dem Quell- und Zielzweig. Du wirst benachrichtigt, wenn die Abh\u00e4ngigkeiten deines Projekts von neu entdeckten Schwachstellen betroffen sind.<\/p>\nVanilla JavaScript<\/h2>\n
Vanilla JavaScript ist eine leichtgewichtige Implementierung der reinen JavaScript-Sprache ohne zus\u00e4tzliche Bibliotheken. Hier bezieht sich der Begriff „Vanilla“ auf unangepasstes JavaScript. Viele gro\u00dfe Unternehmen nutzen Vanilla JS<\/a>, darunter Google, Microsoft, Apple, Amazon und andere. Vanilla JavaScript ist ein hervorragender Weg, um die Grundlagen der JavaScript-Programmierung zu erlernen<\/a>, bevor du dich mit fortgeschrittenen Funktionen besch\u00e4ftigst, die in Bibliotheken angeboten werden.<\/p>\nJavaScript-Bibliotheken<\/h2>\n
Eine JavaScript-Bibliothek ist eine Sammlung von vorprogrammiertem Code, der bestimmte Funktionen ausf\u00fchrt. Bibliotheken erm\u00f6glichen es auch Anf\u00e4ngern, schnell n\u00fctzliche Webseiten zu erstellen. Und sie sparen sowohl Anf\u00e4ngern als auch erfahrenen Nutzern viel Zeit bei der Erstellung von Seiten und Anwendungen. Es gibt zwar viele JavaScript-Bibliotheken<\/a>, aber zu den beliebtesten geh\u00f6ren jQuery, Anime.js, Animate on Scroll und Leaflet.js.<\/p>\nWie JavaScript mit Webseiten-Frameworks zusammenh\u00e4ngt<\/h2>\n
Webseiten-Frameworks sind fortgeschrittene Webseiten-Builder, die in der Regel \u00fcber umfangreiche Bibliotheken mit vorgefertigten Funktionen und Test-Suiten verf\u00fcgen. Du bist vielleicht mit serverseitigen Frameworks wie Laravel<\/a>, Ruby on Rails oder Django vertraut. Aber es gibt auch einige beliebte JavaScript-basierte Frameworks f\u00fcr die Kundenseite, darunter React.js, Vue.js und Node.js<\/a>.<\/p>\n![\"React](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reactjs2.jpg\")
React Bibliothek (Bildquelle: Betica)<\/figcaption><\/figure>\nDas JavaScript DOM<\/h2>\n
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<\/a>, 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<\/a>, Buttons, Links, etc.).<\/p>\nGrundlegende Komponenten von JavaScript<\/h2>\n
Wie bei anderen Programmiersprachen<\/a> auch, verwendet JavaScript Variablen, um die Speicherorte von Daten zu identifizieren. Variablen k\u00f6nnen entweder global (von jeder Funktion im Code zug\u00e4nglich) oder lokal, auch block-scoped genannt (nur in dem Block zug\u00e4nglich, in dem sie deklariert wurden), sein. Variablen k\u00f6nnen entweder feste Werte (Konstanten, bekannt als Literale) oder ver\u00e4nderbare Werte enthalten. JavaScript hat eine spezielle Syntax, um Konstanten und Variablen zu deklarieren (zu erstellen) und ihnen Werte zuzuweisen.<\/p>\nDeklaration einer Konstante<\/h3>\n
Echte Konstanten werden mit einer const<\/code> Deklaration erstellt<\/a>.Const<\/code> erstellt schreibgesch\u00fctzte, unver\u00e4nderbare, block-scoped Konstanten („block-scoped“ bedeutet, dass die Konstante nicht von au\u00dferhalb ihres deklarierten Blocks zug\u00e4nglich ist). Ein Beispiel f\u00fcr die Verwendung von const zum Erstellen einer Konstante ist:<\/p>\nconst GOLDEN_RATIO = 1.618; \/\/ create a constant named GOLDEN_RATIO with value 1.618<\/code><\/pre>\nBeachte die Verwendung von Gro\u00dfbuchstaben f\u00fcr die Benennung der Konstante; dies ist eine allgemein akzeptierte Namenskonvention, obwohl sie nicht erforderlich ist. Variablennamen, einschlie\u00dflich const Namen, m\u00fcssen mit einem Buchstaben (Klein- oder Gro\u00dfbuchstaben), dem Unterstrich (_<\/code>), oder dem Dollarzeichen ($<\/code>). Die Gro\u00df- und Kleinschreibung wird beachtet, also achte darauf, wie du deine Variablen benennst. Konstanten m\u00fcssen, im Gegensatz zu Variablen, bei der Erstellung einen Wert zugewiesen bekommen. Die folgende Anweisung wird einen Fehler zur\u00fcckgeben:<\/p>\nconst GOLDEN_RATIO;<\/code><\/pre>\nDeklarieren einer Variable<\/h3>\n
Variablen werden mit dem Keyword var<\/code> deklariert<\/a>. Ihnen muss bei der Deklaration kein Wert zugewiesen werden, obwohl dies zul\u00e4ssig ist und h\u00e4ufig gemacht wird. Das Keyword var<\/code> hat einen globalen Geltungsbereich und keinen Block-Geltungsbereich (es sei denn, es befindet sich in einer Funktion, dann hat es einen Funktions-Geltungsbereich).<\/p>\nvar variable1; \/\/ declare a variable called variable1\n\nvar variable2 = \"2021\"; \/\/ declare a string variable called variable2 and initialize with value 2021\n\nvariable1 = \"Thank goodness it's\" \/\/ assign string value to previously declared variable variable1\n\nconsole.log(variable1 + \" \" + variable2); \/\/ display \"Thank goodness it's 2021\"<\/code><\/pre>\nBeachte, dass Anweisungen in JavaScript mit einem Semikolon enden m\u00fcssen. Du kannst Kommentare mit \/\/<\/code> erstellen – JavaScript ignoriert alles zwischen \/\/<\/code> und dem Ende der Zeile. Variablen k\u00f6nnen 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.<\/p>\nHoisting<\/h2>\n
Jetzt, wo du die Variablendeklaration in JavaScript<\/a> verstanden hast, k\u00f6nnen 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\u00e4hrend Hoisting die Programmierung vereinfachen kann, indem es dem Programmierer erlaubt, einen Fehler bei der Deklaration zu korrigieren, ohne durch den Code zur\u00fcckbl\u00e4ttern zu m\u00fcssen, ist die Deklaration von Variablen nach der Verwendung nicht mit den besten Programmierpraktiken<\/a> vereinbar. Hoisting kann auch unerwartete Probleme verursachen, haupts\u00e4chlich weil Hoisting nur f\u00fcr 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 \u00fcberpr\u00fcfen:<\/p>\nvar variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nconsole.log(variable_1 + \" \" + variable_2); \/\/\n\nvar variable_2 = \"2021\" \/\/ declare and initialize a string variable called variable2<\/code><\/pre>\nW\u00e4hrend das Hoisting die Deklaration variable_2<\/code> an den Anfang des Blocks verschiebt, verschiebt es nicht den zugewiesenen Wert. Diese Logik funktioniert in etwa gleich wie die folgende Syntax:<\/p>\nvar variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nvar variable_2;\n\nconsole.log(variable1 + \" \" + variable2); \/\/\n\nvariable_2 = \"2021\" \/\/ assign string value to variable2<\/code><\/pre>\nIn 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\u00f6gliche Probleme zu vermeiden und sauberen Code zu erstellen.<\/p>\n
Objekte<\/h2>\n
JavaScript basiert auf dem Konzept von Objekten<\/a>. Objekte sind Container, die Properties, Methoden oder beides einschlie\u00dfen k\u00f6nnen. Betrachte ein einfaches Beispiel. Du hast ein Objekt namens „Land“. Zu seinen Properties geh\u00f6ren der Name, der Kontinent, die Hauptstadt und die Bev\u00f6lkerung. Du kannst dieses Objekt auf verschiedene Arten mit JavaScript erstellen. Erstens kannst du das Objektliteral oder den Objektinitialisierer verwenden:<\/p>\nvar country = {\n\n name:\"France\",\n\n continent:\"Europe\",\n\n capital:\"Paris\",\n\n population:62250000;\n\n}<\/code><\/pre>\nDu kannst auch ein Objekt instanziieren und dann seine Properties zuweisen:<\/p>\n
var country = new Object();\n\ncountry.name = \"France\";\n\ncountry.continent = \"Europe\";\n\ncountry.capital = \"Paris\";\n\ncountry.population = 62250000;<\/code><\/pre>\nBeachte, dass du dich auf die Eigenschaften eines Objekts mit der Syntax object.property<\/code> beziehst. Schlie\u00dflich kannst du Objekte mit Hilfe von Konstruktorfunktionen erstellen:<\/p>\nfunction country(name, continent, capital, population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n}<\/code><\/pre>\nDas Erzeugen einer Instanz des Objekts w\u00fcrde dann durch erfolgen:<\/p>\n
france = new country(\"France\",\"Europe\",\"Paris\",62250000)<\/code><\/pre>\nObject Properties k\u00f6nnen Variablen oder Funktionen sein. Wenn eine Property eine Funktion ist, wird sie als Methode bezeichnet (siehe unten).<\/p>\n
Objekte vs. Klassen<\/h3>\n
Kurz gesagt, eine Klasse ist eine generische Strukturvorlage f\u00fcr ein Objekt. Klassen verwenden die Konstruktorform, um Objekte zu beschreiben.<\/p>\n
class country {\n\n Constructor (name,continent,capital,population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n }\n\n}<\/code><\/pre>\nGenau wie bei Objekten, k\u00f6nnen Klassen Methoden haben.<\/p>\n
Arbeiten mit Konstanten und Variablen<\/h2>\n
Wie in anderen Sprachen gibt es auch in JavaScript mehrere Arten von Operatoren<\/a> f\u00fcr die Verwendung mit Variablen und Funktionen, von denen die meisten sofort erkennbar sein werden:<\/p>\n\n- Zuweisungsoperatoren (
=<\/code>, +=<\/code>, -=<\/code>, *=<\/code>, \/=<\/code>, %=<\/code>)<\/li>\n- Vergleichsoperatoren (
==<\/code>, ===<\/code>, !=<\/code>, !==<\/code>, ><\/code>, >=<\/code>, <<\/code>, <=<\/code>)<\/li>\n- Bitweise und logische Operatoren (siehe unten)<\/li>\n
- Arithmetische Operatoren (
+<\/code>, -<\/code>, *<\/code>, \/<\/code>, %<\/code>, ++<\/code>, --<\/code>)<\/li>\n- Spezielle Operatoren<\/li>\n<\/ul>\n
Ein paar Operatoren sind Programmieranf\u00e4ngern<\/a> weniger vertraut, wie z.B. identische und nicht identische Vergleichsoperatoren. ===<\/code> vergleicht, ob zwei Operanden sowohl den gleichen Wert als auch den gleichen Typ haben (d.h. sie sind identisch). !==<\/code> vergleicht, ob zwei Operanden nicht identisch sind. Betrachte das folgende Beispiel:<\/p>\nvar variable_1 = 5; \/\/ declare variable_1 and assign numeric value 5\n\nvar variable_2 = \"5\"; \/\/ declare variable_2 and assign string value \"5\"\n\nconsole.log(variable_1 === variable_2);\n\nconsole.log(variable_1 !== variable_2);<\/code><\/pre>\nDie Ausgabe f\u00fcr diesen Codeschnipsel w\u00fcrde lauten:<\/p>\n
FALSE\nTRUE<\/code><\/pre>\nEs ist auch wichtig, den Unterschied zwischen =<\/code> (ein Zuweisungsoperator) und ==<\/code> (ein Vergleichsoperator) zu verstehen. W\u00e4hrend =<\/code> den Wert einer Variablen festlegt, pr\u00fcft ==<\/code>, ob zwei Operanden den selben Wert haben, einschlie\u00dflich, ob eine Variable einen bestimmten Wert hat. Du solltest den =<\/code> Operator nicht in bedingten Anweisungen (wie IF-Anweisungen) verwenden, um die Gleichwertigkeit zu pr\u00fcfen.<\/p>\nBitweise und logische Operatoren<\/h3>\n
JavaScript unterst\u00fctzt die Operationen AND (&<\/code>), OR (|<\/code>), NOT (~<\/code>), und XOR (^<\/code>). In JavaScript sind diese als bitweise Operatoren bekannt. Bitweise Operationen wandeln die Operanden in 32-Bit Bin\u00e4rdarstellungen um, bevor sie ausgef\u00fchrt werden (z.B. 20 wird zu 10100). Diese Operationen werden bitweise genannt, weil sie die umgewandelten Operanden Bit f\u00fcr Bit vergleichen<\/a> und dann ein 32-Bit bin\u00e4res Ergebnis zur\u00fcckgeben, das in eine ganze Zahl umgewandelt wird. Beispiel:<\/p>\nvar variable_1 = 20;\n\nvar variable_2 = 50;\n\nconsole.log(variable_1 | variable_2) \/\/ display the result of variable_1 OR variable_2<\/code><\/pre>\nKonvertiere Operanden in bin\u00e4r:<\/p>\n
20 = 010100\n\n50 = 110010<\/code><\/pre>\nEine OR-Verkn\u00fcpfung gibt true (1) zur\u00fcck, 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 &&<\/code> (logisches AND), ||<\/code> (logisches OR) und !<\/code> (logisches NOT).<\/p>\nvar variable_1;\n\nvar variable_2;\n\nvariable _1 = (6 > 5); \/\/ sets variable_1 to true or 1\n\nvariable_2 = (7 <= 6); \/\/ sets variable_2 to false or 0\n\nConsole.log(variable_1 && variable_2); \/\/ displays 0<\/code><\/pre>\nFunktionen und Methoden<\/h2>\n
Betrachte Funktionen als die Arbeitspferde in JavaScript. Sie sind Codebl\u00f6cke, die bestimmte Aufgaben erf\u00fcllen. Wenn du mit Prozeduren und Subroutinen in anderen Programmiersprachen vertraut bist, wirst du Funktionen sofort erkennen. Funktionen werden mit der folgenden Syntax definiert:<\/p>\n
function function_name(parameter list) {\n\n \/\/ tasks to be performed\n\n}<\/code><\/pre>\nDas Definieren von Funktionen ist nur der erste Schritt, sp\u00e4ter musst du die Funktionen mit ()<\/code> im Code aufrufen:<\/p>\n$()<\/h3>\n
Die Funktion $()<\/code> ist eine Abk\u00fcrzung f\u00fcr die getElementByID-Methode, die, wie oben erw\u00e4hnt, die ID eines bestimmten Elements des HTML-DOMs zur\u00fcckgibt. Sie wird h\u00e4ufig verwendet, um Elemente in einem Dokument zu manipulieren. $()<\/code> erm\u00f6glicht eine k\u00fcrzere und effizientere Programmierung von JavaScript. Traditionelle Methode:<\/p>\ndocument.getElementByID(\"element_id\")\n\n$() method:\n\n$(\"element_id\")<\/code><\/pre>\nFunktion vs. Methode<\/h3>\n
Funktionen f\u00fchren Aufgaben aus; Methoden sind Properties von Objekten, die eine Funktionsdefinition enthalten. Die Syntax f\u00fcr den Aufruf von Methoden ist object.function()<\/code>. Funktionen sind in sich geschlossen; Methoden sind mit Objekten verbunden. Im obigen Beispiel bezieht sich die Methode document.getElementByID(\"element_id\")<\/code> auf ein Objekt (document<\/code>) und die zugeh\u00f6rige Property f\u00fcr dieses Objekt (getElementbyID()<\/code>). Es gibt zwei Arten von Methoden in JavaScript:<\/p>\n\n- Instanzmethoden<\/li>\n
- Statische Methoden<\/li>\n<\/ul>\n
Instanzmethoden k\u00f6nnen auf die Properties einer Objektinstanz zugreifen und diese manipulieren. Instanzmethoden k\u00f6nnen 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\u00f6nnen nur auf statische Felder zugreifen; sie k\u00f6nnen nicht auf Instanzfelder zugreifen.<\/p>\n
Promises in JavaScript<\/h2>\n
Ein Promise ist ein Objekt, das ein Ergebnis zu einem zuk\u00fcnftigen Zeitpunkt<\/a> produziert. In der JavaScript-Terminologie werden Promises als produzierender und konsumierender Code bezeichnet. Funktionen k\u00f6nnen eine unbestimmte und signifikante Zeitspanne<\/a> in Anspruch nehmen. Der konsumierende Code wartet auf die Ergebnisse des asynchronen produzierenden Codes, bevor er seine Funktionen ausf\u00fchrt. Promises definieren die Beziehung zwischen dem produzierenden Code und dem konsumierenden Code. Promises haben drei m\u00f6gliche Zust\u00e4nde: ausstehend, erf\u00fcllt 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\u00fcllt noch zur\u00fcckgewiesen wurde. Erf\u00fcllt bedeutet, dass das Promise aufgel\u00f6st zur\u00fcckgegeben wurde. Abgelehnt bedeutet, dass das Promise zur\u00fcckgegangen ist. Ein Promise, das sich nicht mehr im Schwebezustand befindet, gilt als erledigt. Eine Beispielsyntax f\u00fcr das Erstellen eines Promise ist:<\/p>\nvar newPromise = new Promise(\n\n function(resolve, reject) {\n\n \/\/ condition to be tested\n\n }\n\n)<\/code><\/pre>\nEnclosures in JavaScript<\/h2>\n
Closures sind ein JavaScript-Feature, das Programmierer oft verbl\u00fcfft<\/a>, 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 \u00fcbergeordneten Funktion, zus\u00e4tzlich zu den globalen Variablen, auf die normalerweise zugegriffen werden kann. Beachte, dass die innere Funktion zwar auf die Variablen der \u00e4u\u00dferen 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\u00e4nglich, und der Scope wird pro Aufruf erstellt, nicht generisch f\u00fcr die Funktion. Closures adressieren die Tatsache, dass Variablen normalerweise verschwinden, nachdem eine Funktion beendet wurde. Sie erlauben es auch, dass Variablen zug\u00e4nglich bleiben, nachdem eine Funktion gelaufen ist. Betrachte den folgenden Beispielcode:<\/p>\nfunction outer_closure_function() {\n\n var outer_variable = \"we want to keep the outer variable\";\n\n var inner_closure_function = function() {\n\n inner_variable = \"use closures because\"\n\n console.log(inner_variable + \" \" + outer_variable);\n\n }\n\n return inner_closure_function;\n\n}\n\nvar closure = outer_closure_function(); \/\/ returns a reference to inner_closure_function\n\nclosure(); \/\/ displays \"use closures because we want to keep the outer variable\"<\/code><\/pre>\nUm zu verstehen, wie das Closure funktioniert, gehe Zeile f\u00fcr Zeile durch den Code. Zuerst definierst du die \u00e4u\u00dfere Funktion und dann eine Variable, die mit ihr verbunden ist. Als n\u00e4chstes 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\u00e4chstes folgt eine Anweisung, die die innere Funktion zur\u00fcckgibt. Aber was zur\u00fcckgegeben wird, ist nicht das Ergebnis der inneren Funktion; stattdessen ist es die Funktion selbst. Wenn du also closure als outer_closure_function<\/code> definierst, gibt sie nicht den tats\u00e4chlichen Wert der inneren Funktion zur\u00fcck. Stattdessen gibt sie eine Referenz auf inner_closure_function<\/code> zur\u00fcck. Auch wenn die \u00e4u\u00dfere Funktion nach dieser Anweisung abgeschlossen ist und outer_variable<\/code> offiziell nicht mehr existiert. Aber sie wird immer noch in der Referenz auf inner_closure_function<\/code> beibehalten. Wenn du nun closure in der letzten Anweisung aufrufst, wird das gew\u00fcnschte Ergebnis angezeigt. Um Closures besser zu verstehen, solltest du selbst ein paar Beispiele programmieren und testen<\/a>. Es braucht Zeit, um sie richtig zu verstehen. Au\u00dferdem hilft dir das wiederholte Aktualisieren und Testen dabei, eine agile Entwicklungsmentalit\u00e4t zu entwickeln. Behalte dabei aber immer die Sicherheitsprobleme im Hinterkopf<\/a> – JavaScript kann anf\u00e4llig f\u00fcr schwerwiegende Sicherheitsprobleme sein, wie SQL- und LDAP-Injections<\/a>, XSS-Angriffe, etc.<\/p>\nZusammenfassung<\/h2>\n
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\u00fcber nachdenken, JavaScript zu lernen. Es ist eine einfache und leicht zu erlernende Einf\u00fchrung in die Webseiten- und Anwendungsprogrammierung<\/a>, die dir helfen kann, deiner Seite hochgradig interaktive Funktionen hinzuzuf\u00fcgen, ohne zu viel Zeit in den Lernprozess zu investieren. JavaScript ist auch eine gute M\u00f6glichkeit, deine Programmierkenntnisse zu verbessern<\/a>, falls du dich dazu entscheidest, auf die n\u00e4chste Stufe zu wechseln.<\/p>\n","protected":false},"excerpt":{"rendered":"Wer kennt nicht die Aufforderung, Java zu aktualisieren, wenn man versucht, auf bestimmte Webseiten zuzugreifen? W\u00e4hrend viele Menschen mit Java von interaktiven Webseiten-Funktionen vertraut sind, sind …<\/p>\n","protected":false},"author":178,"featured_media":43053,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[952],"class_list":["post-43046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-javascript-tutorials"],"yoast_head":"\n
Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets<\/title>\n<meta name=\"description\" content=\"Lerne, was JavaScript im Detail ist, seine Hauptmerkmale, Vorteile und wie es sich von Java unterscheidet. Au\u00dferdem werden wir JS mit Codebeispielen entdecken.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets\" \/>\n<meta property=\"og:description\" content=\"Lerne, was JavaScript im Detail ist, seine Hauptmerkmale, Vorteile und wie es sich von Java unterscheidet. Au\u00dferdem werden wir JS mit Codebeispielen entdecken.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-13T13:47:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:20:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/what-is-javascript.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nahla Davies\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Lerne, was JavaScript im Detail ist, seine Hauptmerkmale, Vorteile und wie es sich von Java unterscheidet. Au\u00dferdem werden wir JS mit Codebeispielen entdecken.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/what-is-javascript.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nahla Davies\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"14\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\"},\"author\":{\"name\":\"Nahla Davies\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/7be3f509e7393507bdeb76947810fcd5\"},\"headline\":\"Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets\",\"datePublished\":\"2021-08-13T13:47:10+00:00\",\"dateModified\":\"2025-10-01T19:20:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\"},\"wordCount\":2810,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/what-is-javascript.jpeg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\",\"name\":\"Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/what-is-javascript.jpeg\",\"datePublished\":\"2021-08-13T13:47:10+00:00\",\"dateModified\":\"2025-10-01T19:20:12+00:00\",\"description\":\"Lerne, was JavaScript im Detail ist, seine Hauptmerkmale, Vorteile und wie es sich von Java unterscheidet. Au\u00dferdem werden wir JS mit Codebeispielen entdecken.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/what-is-javascript.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/what-is-javascript.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript-Tutorials\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/javascript-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/7be3f509e7393507bdeb76947810fcd5\",\"name\":\"Nahla Davies\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/de7167e50927dbee1296fd97629d66bc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/de7167e50927dbee1296fd97629d66bc?s=96&d=mm&r=g\",\"caption\":\"Nahla Davies\"},\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/nahladavies\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets","description":"Lerne, was JavaScript im Detail ist, seine Hauptmerkmale, Vorteile und wie es sich von Java unterscheidet. Au\u00dferdem werden wir JS mit Codebeispielen entdecken.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/","og_locale":"de_DE","og_type":"article","og_title":"Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets","og_description":"Lerne, was JavaScript im Detail ist, seine Hauptmerkmale, Vorteile und wie es sich von Java unterscheidet. Au\u00dferdem werden wir JS mit Codebeispielen entdecken.","og_url":"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2021-08-13T13:47:10+00:00","article_modified_time":"2025-10-01T19:20:12+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/what-is-javascript.jpeg","type":"image\/jpeg"}],"author":"Nahla Davies","twitter_card":"summary_large_image","twitter_description":"Lerne, was JavaScript im Detail ist, seine Hauptmerkmale, Vorteile und wie es sich von Java unterscheidet. Au\u00dferdem werden wir JS mit Codebeispielen entdecken.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/what-is-javascript.jpeg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Nahla Davies","Gesch\u00e4tzte Lesezeit":"14\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/"},"author":{"name":"Nahla Davies","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/7be3f509e7393507bdeb76947810fcd5"},"headline":"Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets","datePublished":"2021-08-13T13:47:10+00:00","dateModified":"2025-10-01T19:20:12+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/"},"wordCount":2810,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/what-is-javascript.jpeg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/","url":"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/","name":"Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/what-is-javascript.jpeg","datePublished":"2021-08-13T13:47:10+00:00","dateModified":"2025-10-01T19:20:12+00:00","description":"Lerne, was JavaScript im Detail ist, seine Hauptmerkmale, Vorteile und wie es sich von Java unterscheidet. Au\u00dferdem werden wir JS mit Codebeispielen entdecken.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/what-is-javascript.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/what-is-javascript.jpeg","width":1460,"height":730,"caption":"Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"JavaScript-Tutorials","item":"https:\/\/kinsta.com\/de\/thema\/javascript-tutorials\/"},{"@type":"ListItem","position":3,"name":"Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/7be3f509e7393507bdeb76947810fcd5","name":"Nahla Davies","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/de7167e50927dbee1296fd97629d66bc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/de7167e50927dbee1296fd97629d66bc?s=96&d=mm&r=g","caption":"Nahla Davies"},"url":"https:\/\/kinsta.com\/de\/blog\/author\/nahladavies\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/43046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/178"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=43046"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/43046\/revisions"}],"predecessor-version":[{"id":58771,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/43046\/revisions\/58771"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43046\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43046\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43046\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43046\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43046\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43046\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43046\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43046\/translations\/jp"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43046\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/43053"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=43046"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=43046"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=43046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Was ist JavaScript?<\/h2>\n
Einfach ausgedr\u00fcckt ist JavaScript eine beliebte Skriptsprache<\/a>, um interaktive Funktionen und andere dynamische Webinhalte zu Webseiten hinzuzuf\u00fcgen. Bekannte Beispiele f\u00fcr JavaScript-Inhalte sind ausf\u00fcllbare Formulare, Diashows in Fotogalerien und animierte Grafiken.<\/p>\n JavaScript ist auch relativ intuitiv und einfach zu erlernen. Es ist ein hervorragender Ausgangspunkt f\u00fcr diejenigen, die mehr \u00fcber die Entwicklung von Webseiten lernen wollen.<\/p>\n JavaScript ist die letzte Schicht der Funktionalit\u00e4t auf hochinteraktiven Webseiten. HTML<\/a> bietet die grundlegende Struktur f\u00fcr die Seite. CSS<\/a> ist das modische Element deiner Webseite – es legt den Stil deiner Seite fest. JavaScript f\u00fcgt dann die Aufregung hinzu.<\/p>\n 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.<\/p>\n JavaScript hat verschiedene Anwendungen<\/a>, die jeder, der interaktive Webseiten oder mobile Anwendungen besucht hat, wahrscheinlich schon erlebt hat. W\u00e4hrend die Entwicklung von Webseiten – einschlie\u00dflich des Hinzuf\u00fcgens von Elementen wie interaktiven Formularen und Animationen – die traditionellste Anwendung f\u00fcr JavaScript ist, findet es auch Verwendung in:<\/p>\n Obwohl die meisten JavaScript-Anwendungen clientseitig sind, ist JavaScript auch bei serverseitigen Anwendungen hilfreich, z.B. bei der Erstellung von Webservern.<\/p>\n Zun\u00e4chst 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\u00fcr die Entwicklung von Webseiten und Webanwendungen. Sie haben jedoch deutliche Unterschiede, darunter:<\/p>\n Obwohl JavaScript weit verbreitet ist und f\u00fcr die Webentwicklung genutzt wird, hat es bekannte Schwachstellen. Eine der h\u00e4ufigsten Cyberattacken, die durch JavaScript-Schwachstellen eingef\u00fchrt werden, ist der Cross-Site-Scripting (XSS)-Angriff. Cyberkriminelle nutzen XSS-Angriffe, um sich Zugang zu Identit\u00e4tsdaten zu verschaffen und diese zu stehlen. Um Exploits zu minimieren, ist es wichtig, deinen Code w\u00e4hrend der Entwicklung zu testen und zu \u00fcberpr\u00fcfen<\/a>. 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<\/a> pr\u00fcft SAST deinen Code auf die Verletzung von Sicherheitsregeln und vergleicht die gefundenen Schwachstellen zwischen dem Quell- und Zielzweig. Du wirst benachrichtigt, wenn die Abh\u00e4ngigkeiten deines Projekts von neu entdeckten Schwachstellen betroffen sind.<\/p>\n Vanilla JavaScript ist eine leichtgewichtige Implementierung der reinen JavaScript-Sprache ohne zus\u00e4tzliche Bibliotheken. Hier bezieht sich der Begriff „Vanilla“ auf unangepasstes JavaScript. Viele gro\u00dfe Unternehmen nutzen Vanilla JS<\/a>, darunter Google, Microsoft, Apple, Amazon und andere. Vanilla JavaScript ist ein hervorragender Weg, um die Grundlagen der JavaScript-Programmierung zu erlernen<\/a>, bevor du dich mit fortgeschrittenen Funktionen besch\u00e4ftigst, die in Bibliotheken angeboten werden.<\/p>\n Eine JavaScript-Bibliothek ist eine Sammlung von vorprogrammiertem Code, der bestimmte Funktionen ausf\u00fchrt. Bibliotheken erm\u00f6glichen es auch Anf\u00e4ngern, schnell n\u00fctzliche Webseiten zu erstellen. Und sie sparen sowohl Anf\u00e4ngern als auch erfahrenen Nutzern viel Zeit bei der Erstellung von Seiten und Anwendungen. Es gibt zwar viele JavaScript-Bibliotheken<\/a>, aber zu den beliebtesten geh\u00f6ren jQuery, Anime.js, Animate on Scroll und Leaflet.js.<\/p>\n Webseiten-Frameworks sind fortgeschrittene Webseiten-Builder, die in der Regel \u00fcber umfangreiche Bibliotheken mit vorgefertigten Funktionen und Test-Suiten verf\u00fcgen. Du bist vielleicht mit serverseitigen Frameworks wie Laravel<\/a>, Ruby on Rails oder Django vertraut. Aber es gibt auch einige beliebte JavaScript-basierte Frameworks f\u00fcr die Kundenseite, darunter React.js, Vue.js und Node.js<\/a>.<\/p>\n 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<\/a>, 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<\/a>, Buttons, Links, etc.).<\/p>\n Wie bei anderen Programmiersprachen<\/a> auch, verwendet JavaScript Variablen, um die Speicherorte von Daten zu identifizieren. Variablen k\u00f6nnen entweder global (von jeder Funktion im Code zug\u00e4nglich) oder lokal, auch block-scoped genannt (nur in dem Block zug\u00e4nglich, in dem sie deklariert wurden), sein. Variablen k\u00f6nnen entweder feste Werte (Konstanten, bekannt als Literale) oder ver\u00e4nderbare Werte enthalten. JavaScript hat eine spezielle Syntax, um Konstanten und Variablen zu deklarieren (zu erstellen) und ihnen Werte zuzuweisen.<\/p>\n Echte Konstanten werden mit einer Beachte die Verwendung von Gro\u00dfbuchstaben f\u00fcr die Benennung der Konstante; dies ist eine allgemein akzeptierte Namenskonvention, obwohl sie nicht erforderlich ist. Variablennamen, einschlie\u00dflich const Namen, m\u00fcssen mit einem Buchstaben (Klein- oder Gro\u00dfbuchstaben), dem Unterstrich ( Variablen werden mit dem Keyword Beachte, dass Anweisungen in JavaScript mit einem Semikolon enden m\u00fcssen. Du kannst Kommentare mit Jetzt, wo du die Variablendeklaration in JavaScript<\/a> verstanden hast, k\u00f6nnen 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\u00e4hrend Hoisting die Programmierung vereinfachen kann, indem es dem Programmierer erlaubt, einen Fehler bei der Deklaration zu korrigieren, ohne durch den Code zur\u00fcckbl\u00e4ttern zu m\u00fcssen, ist die Deklaration von Variablen nach der Verwendung nicht mit den besten Programmierpraktiken<\/a> vereinbar. Hoisting kann auch unerwartete Probleme verursachen, haupts\u00e4chlich weil Hoisting nur f\u00fcr 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 \u00fcberpr\u00fcfen:<\/p>\n W\u00e4hrend das Hoisting die Deklaration In 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\u00f6gliche Probleme zu vermeiden und sauberen Code zu erstellen.<\/p>\n JavaScript basiert auf dem Konzept von Objekten<\/a>. Objekte sind Container, die Properties, Methoden oder beides einschlie\u00dfen k\u00f6nnen. Betrachte ein einfaches Beispiel. Du hast ein Objekt namens „Land“. Zu seinen Properties geh\u00f6ren der Name, der Kontinent, die Hauptstadt und die Bev\u00f6lkerung. Du kannst dieses Objekt auf verschiedene Arten mit JavaScript erstellen. Erstens kannst du das Objektliteral oder den Objektinitialisierer verwenden:<\/p>\n Du kannst auch ein Objekt instanziieren und dann seine Properties zuweisen:<\/p>\n Beachte, dass du dich auf die Eigenschaften eines Objekts mit der Syntax Das Erzeugen einer Instanz des Objekts w\u00fcrde dann durch erfolgen:<\/p>\n Object Properties k\u00f6nnen Variablen oder Funktionen sein. Wenn eine Property eine Funktion ist, wird sie als Methode bezeichnet (siehe unten).<\/p>\n Kurz gesagt, eine Klasse ist eine generische Strukturvorlage f\u00fcr ein Objekt. Klassen verwenden die Konstruktorform, um Objekte zu beschreiben.<\/p>\n Genau wie bei Objekten, k\u00f6nnen Klassen Methoden haben.<\/p>\n Wie in anderen Sprachen gibt es auch in JavaScript mehrere Arten von Operatoren<\/a> f\u00fcr die Verwendung mit Variablen und Funktionen, von denen die meisten sofort erkennbar sein werden:<\/p>\n Ein paar Operatoren sind Programmieranf\u00e4ngern<\/a> weniger vertraut, wie z.B. identische und nicht identische Vergleichsoperatoren. Die Ausgabe f\u00fcr diesen Codeschnipsel w\u00fcrde lauten:<\/p>\n Es ist auch wichtig, den Unterschied zwischen JavaScript unterst\u00fctzt die Operationen AND ( Konvertiere Operanden in bin\u00e4r:<\/p>\n Eine OR-Verkn\u00fcpfung gibt true (1) zur\u00fcck, 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 Betrachte Funktionen als die Arbeitspferde in JavaScript. Sie sind Codebl\u00f6cke, die bestimmte Aufgaben erf\u00fcllen. Wenn du mit Prozeduren und Subroutinen in anderen Programmiersprachen vertraut bist, wirst du Funktionen sofort erkennen. Funktionen werden mit der folgenden Syntax definiert:<\/p>\n Das Definieren von Funktionen ist nur der erste Schritt, sp\u00e4ter musst du die Funktionen mit Die Funktion Funktionen f\u00fchren Aufgaben aus; Methoden sind Properties von Objekten, die eine Funktionsdefinition enthalten. Die Syntax f\u00fcr den Aufruf von Methoden ist Instanzmethoden k\u00f6nnen auf die Properties einer Objektinstanz zugreifen und diese manipulieren. Instanzmethoden k\u00f6nnen 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\u00f6nnen nur auf statische Felder zugreifen; sie k\u00f6nnen nicht auf Instanzfelder zugreifen.<\/p>\n Ein Promise ist ein Objekt, das ein Ergebnis zu einem zuk\u00fcnftigen Zeitpunkt<\/a> produziert. In der JavaScript-Terminologie werden Promises als produzierender und konsumierender Code bezeichnet. Funktionen k\u00f6nnen eine unbestimmte und signifikante Zeitspanne<\/a> in Anspruch nehmen. Der konsumierende Code wartet auf die Ergebnisse des asynchronen produzierenden Codes, bevor er seine Funktionen ausf\u00fchrt. Promises definieren die Beziehung zwischen dem produzierenden Code und dem konsumierenden Code. Promises haben drei m\u00f6gliche Zust\u00e4nde: ausstehend, erf\u00fcllt 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\u00fcllt noch zur\u00fcckgewiesen wurde. Erf\u00fcllt bedeutet, dass das Promise aufgel\u00f6st zur\u00fcckgegeben wurde. Abgelehnt bedeutet, dass das Promise zur\u00fcckgegangen ist. Ein Promise, das sich nicht mehr im Schwebezustand befindet, gilt als erledigt. Eine Beispielsyntax f\u00fcr das Erstellen eines Promise ist:<\/p>\n Closures sind ein JavaScript-Feature, das Programmierer oft verbl\u00fcfft<\/a>, 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 \u00fcbergeordneten Funktion, zus\u00e4tzlich zu den globalen Variablen, auf die normalerweise zugegriffen werden kann. Beachte, dass die innere Funktion zwar auf die Variablen der \u00e4u\u00dferen 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\u00e4nglich, und der Scope wird pro Aufruf erstellt, nicht generisch f\u00fcr die Funktion. Closures adressieren die Tatsache, dass Variablen normalerweise verschwinden, nachdem eine Funktion beendet wurde. Sie erlauben es auch, dass Variablen zug\u00e4nglich bleiben, nachdem eine Funktion gelaufen ist. Betrachte den folgenden Beispielcode:<\/p>\n Um zu verstehen, wie das Closure funktioniert, gehe Zeile f\u00fcr Zeile durch den Code. Zuerst definierst du die \u00e4u\u00dfere Funktion und dann eine Variable, die mit ihr verbunden ist. Als n\u00e4chstes 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\u00e4chstes folgt eine Anweisung, die die innere Funktion zur\u00fcckgibt. Aber was zur\u00fcckgegeben wird, ist nicht das Ergebnis der inneren Funktion; stattdessen ist es die Funktion selbst. Wenn du also closure als 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\u00fcber nachdenken, JavaScript zu lernen. Es ist eine einfache und leicht zu erlernende Einf\u00fchrung in die Webseiten- und Anwendungsprogrammierung<\/a>, die dir helfen kann, deiner Seite hochgradig interaktive Funktionen hinzuzuf\u00fcgen, ohne zu viel Zeit in den Lernprozess zu investieren. JavaScript ist auch eine gute M\u00f6glichkeit, deine Programmierkenntnisse zu verbessern<\/a>, falls du dich dazu entscheidest, auf die n\u00e4chste Stufe zu wechseln.<\/p>\n","protected":false},"excerpt":{"rendered":" Wer kennt nicht die Aufforderung, Java zu aktualisieren, wenn man versucht, auf bestimmte Webseiten zuzugreifen? W\u00e4hrend viele Menschen mit Java von interaktiven Webseiten-Funktionen vertraut sind, sind …<\/p>\n","protected":false},"author":178,"featured_media":43053,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[952],"class_list":["post-43046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-javascript-tutorials"],"yoast_head":"\nWof\u00fcr JavaScript verwendet wird<\/h2>\n
\n
Unterschiede zwischen Java und JavaScript<\/h2>\n
\n
Ist JavaScript sicher?<\/h2>\n
Vanilla JavaScript<\/h2>\n
JavaScript-Bibliotheken<\/h2>\n
Wie JavaScript mit Webseiten-Frameworks zusammenh\u00e4ngt<\/h2>\n
Das JavaScript DOM<\/h2>\n
Grundlegende Komponenten von JavaScript<\/h2>\n
Deklaration einer Konstante<\/h3>\n
const<\/code> Deklaration erstellt<\/a>.Const<\/code> erstellt schreibgesch\u00fctzte, unver\u00e4nderbare, block-scoped Konstanten („block-scoped“ bedeutet, dass die Konstante nicht von au\u00dferhalb ihres deklarierten Blocks zug\u00e4nglich ist). Ein Beispiel f\u00fcr die Verwendung von const zum Erstellen einer Konstante ist:<\/p>\nconst GOLDEN_RATIO = 1.618; \/\/ create a constant named GOLDEN_RATIO with value 1.618<\/code><\/pre>\n_<\/code>), oder dem Dollarzeichen ($<\/code>). Die Gro\u00df- und Kleinschreibung wird beachtet, also achte darauf, wie du deine Variablen benennst. Konstanten m\u00fcssen, im Gegensatz zu Variablen, bei der Erstellung einen Wert zugewiesen bekommen. Die folgende Anweisung wird einen Fehler zur\u00fcckgeben:<\/p>\nconst GOLDEN_RATIO;<\/code><\/pre>\nDeklarieren einer Variable<\/h3>\n
var<\/code> deklariert<\/a>. Ihnen muss bei der Deklaration kein Wert zugewiesen werden, obwohl dies zul\u00e4ssig ist und h\u00e4ufig gemacht wird. Das Keyword var<\/code> hat einen globalen Geltungsbereich und keinen Block-Geltungsbereich (es sei denn, es befindet sich in einer Funktion, dann hat es einen Funktions-Geltungsbereich).<\/p>\nvar variable1; \/\/ declare a variable called variable1\n\nvar variable2 = \"2021\"; \/\/ declare a string variable called variable2 and initialize with value 2021\n\nvariable1 = \"Thank goodness it's\" \/\/ assign string value to previously declared variable variable1\n\nconsole.log(variable1 + \" \" + variable2); \/\/ display \"Thank goodness it's 2021\"<\/code><\/pre>\n\/\/<\/code> erstellen – JavaScript ignoriert alles zwischen \/\/<\/code> und dem Ende der Zeile. Variablen k\u00f6nnen 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.<\/p>\nHoisting<\/h2>\n
var variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nconsole.log(variable_1 + \" \" + variable_2); \/\/\n\nvar variable_2 = \"2021\" \/\/ declare and initialize a string variable called variable2<\/code><\/pre>\nvariable_2<\/code> an den Anfang des Blocks verschiebt, verschiebt es nicht den zugewiesenen Wert. Diese Logik funktioniert in etwa gleich wie die folgende Syntax:<\/p>\nvar variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nvar variable_2;\n\nconsole.log(variable1 + \" \" + variable2); \/\/\n\nvariable_2 = \"2021\" \/\/ assign string value to variable2<\/code><\/pre>\nObjekte<\/h2>\n
var country = {\n\n name:\"France\",\n\n continent:\"Europe\",\n\n capital:\"Paris\",\n\n population:62250000;\n\n}<\/code><\/pre>\nvar country = new Object();\n\ncountry.name = \"France\";\n\ncountry.continent = \"Europe\";\n\ncountry.capital = \"Paris\";\n\ncountry.population = 62250000;<\/code><\/pre>\nobject.property<\/code> beziehst. Schlie\u00dflich kannst du Objekte mit Hilfe von Konstruktorfunktionen erstellen:<\/p>\nfunction country(name, continent, capital, population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n}<\/code><\/pre>\nfrance = new country(\"France\",\"Europe\",\"Paris\",62250000)<\/code><\/pre>\nObjekte vs. Klassen<\/h3>\n
class country {\n\n Constructor (name,continent,capital,population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n }\n\n}<\/code><\/pre>\nArbeiten mit Konstanten und Variablen<\/h2>\n
\n
=<\/code>, +=<\/code>, -=<\/code>, *=<\/code>, \/=<\/code>, %=<\/code>)<\/li>\n==<\/code>, ===<\/code>, !=<\/code>, !==<\/code>, ><\/code>, >=<\/code>, <<\/code>, <=<\/code>)<\/li>\n+<\/code>, -<\/code>, *<\/code>, \/<\/code>, %<\/code>, ++<\/code>, --<\/code>)<\/li>\n===<\/code> vergleicht, ob zwei Operanden sowohl den gleichen Wert als auch den gleichen Typ haben (d.h. sie sind identisch). !==<\/code> vergleicht, ob zwei Operanden nicht identisch sind. Betrachte das folgende Beispiel:<\/p>\nvar variable_1 = 5; \/\/ declare variable_1 and assign numeric value 5\n\nvar variable_2 = \"5\"; \/\/ declare variable_2 and assign string value \"5\"\n\nconsole.log(variable_1 === variable_2);\n\nconsole.log(variable_1 !== variable_2);<\/code><\/pre>\nFALSE\nTRUE<\/code><\/pre>\n=<\/code> (ein Zuweisungsoperator) und ==<\/code> (ein Vergleichsoperator) zu verstehen. W\u00e4hrend =<\/code> den Wert einer Variablen festlegt, pr\u00fcft ==<\/code>, ob zwei Operanden den selben Wert haben, einschlie\u00dflich, ob eine Variable einen bestimmten Wert hat. Du solltest den =<\/code> Operator nicht in bedingten Anweisungen (wie IF-Anweisungen) verwenden, um die Gleichwertigkeit zu pr\u00fcfen.<\/p>\nBitweise und logische Operatoren<\/h3>\n
&<\/code>), OR (|<\/code>), NOT (~<\/code>), und XOR (^<\/code>). In JavaScript sind diese als bitweise Operatoren bekannt. Bitweise Operationen wandeln die Operanden in 32-Bit Bin\u00e4rdarstellungen um, bevor sie ausgef\u00fchrt werden (z.B. 20 wird zu 10100). Diese Operationen werden bitweise genannt, weil sie die umgewandelten Operanden Bit f\u00fcr Bit vergleichen<\/a> und dann ein 32-Bit bin\u00e4res Ergebnis zur\u00fcckgeben, das in eine ganze Zahl umgewandelt wird. Beispiel:<\/p>\nvar variable_1 = 20;\n\nvar variable_2 = 50;\n\nconsole.log(variable_1 | variable_2) \/\/ display the result of variable_1 OR variable_2<\/code><\/pre>\n20 = 010100\n\n50 = 110010<\/code><\/pre>\n&&<\/code> (logisches AND), ||<\/code> (logisches OR) und !<\/code> (logisches NOT).<\/p>\nvar variable_1;\n\nvar variable_2;\n\nvariable _1 = (6 > 5); \/\/ sets variable_1 to true or 1\n\nvariable_2 = (7 <= 6); \/\/ sets variable_2 to false or 0\n\nConsole.log(variable_1 && variable_2); \/\/ displays 0<\/code><\/pre>\nFunktionen und Methoden<\/h2>\n
function function_name(parameter list) {\n\n \/\/ tasks to be performed\n\n}<\/code><\/pre>\n()<\/code> im Code aufrufen:<\/p>\n$()<\/h3>\n
$()<\/code> ist eine Abk\u00fcrzung f\u00fcr die getElementByID-Methode, die, wie oben erw\u00e4hnt, die ID eines bestimmten Elements des HTML-DOMs zur\u00fcckgibt. Sie wird h\u00e4ufig verwendet, um Elemente in einem Dokument zu manipulieren. $()<\/code> erm\u00f6glicht eine k\u00fcrzere und effizientere Programmierung von JavaScript. Traditionelle Methode:<\/p>\ndocument.getElementByID(\"element_id\")\n\n$() method:\n\n$(\"element_id\")<\/code><\/pre>\nFunktion vs. Methode<\/h3>\n
object.function()<\/code>. Funktionen sind in sich geschlossen; Methoden sind mit Objekten verbunden. Im obigen Beispiel bezieht sich die Methode document.getElementByID(\"element_id\")<\/code> auf ein Objekt (document<\/code>) und die zugeh\u00f6rige Property f\u00fcr dieses Objekt (getElementbyID()<\/code>). Es gibt zwei Arten von Methoden in JavaScript:<\/p>\n\n
Promises in JavaScript<\/h2>\n
var newPromise = new Promise(\n\n function(resolve, reject) {\n\n \/\/ condition to be tested\n\n }\n\n)<\/code><\/pre>\nEnclosures in JavaScript<\/h2>\n
function outer_closure_function() {\n\n var outer_variable = \"we want to keep the outer variable\";\n\n var inner_closure_function = function() {\n\n inner_variable = \"use closures because\"\n\n console.log(inner_variable + \" \" + outer_variable);\n\n }\n\n return inner_closure_function;\n\n}\n\nvar closure = outer_closure_function(); \/\/ returns a reference to inner_closure_function\n\nclosure(); \/\/ displays \"use closures because we want to keep the outer variable\"<\/code><\/pre>\nouter_closure_function<\/code> definierst, gibt sie nicht den tats\u00e4chlichen Wert der inneren Funktion zur\u00fcck. Stattdessen gibt sie eine Referenz auf inner_closure_function<\/code> zur\u00fcck. Auch wenn die \u00e4u\u00dfere Funktion nach dieser Anweisung abgeschlossen ist und outer_variable<\/code> offiziell nicht mehr existiert. Aber sie wird immer noch in der Referenz auf inner_closure_function<\/code> beibehalten. Wenn du nun closure in der letzten Anweisung aufrufst, wird das gew\u00fcnschte Ergebnis angezeigt. Um Closures besser zu verstehen, solltest du selbst ein paar Beispiele programmieren und testen<\/a>. Es braucht Zeit, um sie richtig zu verstehen. Au\u00dferdem hilft dir das wiederholte Aktualisieren und Testen dabei, eine agile Entwicklungsmentalit\u00e4t zu entwickeln. Behalte dabei aber immer die Sicherheitsprobleme im Hinterkopf<\/a> – JavaScript kann anf\u00e4llig f\u00fcr schwerwiegende Sicherheitsprobleme sein, wie SQL- und LDAP-Injections<\/a>, XSS-Angriffe, etc.<\/p>\nZusammenfassung<\/h2>\n