Was ist JavaScript? Lerne, wie du dich zum Erfolg programmierst

Handeln, sei es der erste Schritt beim Erlernen eines neuen Hobbys oder der Umzug quer durchs Land in Ihre Traumstadt, kann eine aufregende Erfahrung sein.

Während viele Website-Builder bequeme Drag-and-Drop-Oberflächen bieten, kann das Beherrschen von JavaScript Ihnen eine unvergleichliche Kontrolle über Ihre Online-Präsenz geben. In der heutigen technikgetriebenen Welt ist eine Website sowohl für Einzelpersonen als auch für Unternehmen unerlässlich. JavaScript zu lernen ist der Schlüssel, um sein volles Potenzial zu entfalten, ansprechende Erlebnisse zu schaffen und Ihre Website von den unzähligen anderen, die mit Website-Baukästen erstellt wurden, zu unterscheiden.

Das Erlernen von Programmieren und den Aufbau Ihrer Website kann anfangs überwältigend erscheinen. Sie könnten denken: „Ein vergessenes Zeichen und mein gesamter Code ist falsch.“ Sie sind nicht allein mit diesem Gedanken, aber es ist am besten, die Ärmel hochzukrempeln und einfach anzufangen.

Wenn Sie den Code auf Ihrer Website wie Schichten betrachten, ist HTML die erste Schicht, gefolgt von CSS und dann JavaScript. Diese drei Sprachen, die Web- und Mobile-App-Entwickler verwenden, arbeiten zusammen, um eine Website zu erstellen, und jede tut etwas anderes:

• HTML definiert den Inhalt auf der Webseite.
• CSS legt das Layout und den Stil der Webseite fest.
• JavaScript programmiert das Verhalten auf der Webseite.

Sie führen den Code in einem Tab aus, wenn Sie eine Seite in Ihrem Browser laden. Sobald HTML und CSS vollständig geladen sind, wird JavaScript in der JavaScript-Engine des Browsers aktiviert. Dies stellt sicher, dass die Struktur (Überschriften, Absätze usw.) und der Stil (Schriftgröße, Farben usw.) vorhanden sind, wenn JavaScript geladen wird.

Wofür wird JavaScript verwendet?

Die Hauptsprache von JavaScript besteht aus einer langen Liste von Programmierfunktionen, die es Ihnen ermöglichen, viele Aktionen auf Ihrer Website auszuführen. Zum Beispiel wird JavaScript verwendet, um Code als Reaktion auf bestimmte Ereignisse auf der Webseite auszuführen. Wenn Sie ein „Klick“-Ereignis in Ihrem Code verwendet haben, würde es erkennen, wann ein Button geklickt wird, und die spezifische Aktion ausführen. Das JavaScript sagt Websites oder Apps, etwas in Echtzeit zu tun, ohne die gesamte Seite neu zu laden, was Interaktionen effizienter macht.

Zusätzlich zur Klickfunktion kann JavaScript verschiedene HTML- und CSS-Codes ändern, ausblenden oder anzeigen.

Wenn Ihr Browser einen JavaScript-Codeblock sieht, führt er ihn in der Reihenfolge aus, das heißt von oben nach unten. Deshalb ist es wichtig, darauf zu achten, in welcher Reihenfolge und wo Sie diesen Code einfügen.

Unsicher, wann Sie JavaScript in Aktion gesehen haben? Denken Sie daran, wann Ihre Facebook-Timeline automatisch aktualisiert wurde oder wenn Google Suchbegriffe basierend auf ein paar Buchstaben Ihrer Suchanfrage vorschlägt. Ja -- beides JavaScript.

Was kann JavaScript tun?

Haben Sie etwas Bestimmtes im Kopf für Ihre Webseite und sind sich nicht sicher, ob es mit JavaScript gemacht werden kann? Hier sind nur einige Aktionen, die JavaScript auf Ihrer Website ausführen kann:

• Auf Benutzeraktionen, Mausklicks, Tastendrücke und Mausbewegungen reagieren
• Cookies abrufen und setzen, Nachrichten anzeigen, den Besucher Fragen stellen
• Den bestehenden Inhalt ändern und Stile zu HTML modifizieren
• Dateien herunterladen und hochladen
• Daten von einem Server senden und anfordern, ohne die Seite neu zu laden

Es ist mit der Manipulation von Webseiten oder der Interaktion mit dem Benutzer verbunden, und JavaScript kann es tun.

Ein häufiges Beispiel für JavaScript, das auf Websites zunehmend beliebt ist, ist das Auslösen eines Pop-ups, wenn sich Ihre Maus bewegt, um den Tab zu schließen. Zum Beispiel, als ich meine Maus bewegte, um die Colourpop-Homepage zu schließen, erhielt ich dieses Pop-up:

Foto mit freundlicher Genehmigung von Colourpop.com

In diesem Fall möchte Colourpop, dass ich mich für ihren E-Mail-Newsletter anmelde, bevor ich meinen Browser schließe und ihre Website verlasse. Dank JavaScript verfolgte der Code meine Maus, als sie sich dem Schließen des Browsers näherte, und löste einen Call-to-Action aus, um sich für ihren E-Mail-Newsletter anzumelden, bevor ich gehen konnte.

Wie JavaScript funktioniert

JavaScript-Code wird innerhalb eines Webbrowsers mit einer spezialisierten Softwarekomponente namens JavaScript-Engine ausgeführt. Beliebte Engines sind V8 (verwendet in Chrome) und SpiderMonkey (verwendet in Firefox).

Der Ausführungsprozess umfasst zwei Hauptkomponenten:

• Event Loop: Dieser Mechanismus verwaltet asynchrone Operationen, wie das Verarbeiten von Benutzerinteraktionen oder das Stellen von Netzwerk-Anfragen. Er funktioniert, indem er einen Call-Stack zur Speicherung der aktuell ausgeführten Funktionen und eine Callback-Warteschlange für Aufgaben, die auf die Ausführung warten, aufrechterhält.
• Browser-API: Der Browser stellt eine Reihe von Funktionen und Methoden bereit, die als Browser-API bekannt sind, die es JavaScript-Code ermöglichen, mit dem Document Object Model (DOM), der Struktur einer Webseite, zu interagieren und Ereignisse wie Button-Klicks oder Seitenladevorgänge zu verarbeiten.

Die JavaScript-Engine, der Event Loop, und die Browser-API ermöglichen es JavaScript, dynamische und interaktive Webseiten zu erstellen, die auf Benutzeraktionen reagieren und Echtzeit-Feedback bieten.

JavaScript-Syntax

Während HTML und CSS spezifischen Code haben, der häufig verwendet wird, hat JavaScript Hunderte und Aberhunderte von Codierungsoptionen, die Sie verwenden können.

In Bezug auf die JavaScript-Syntax werden feste Werte innerhalb des Codes als Literale bezeichnet, während variable Werte als Variablen bezeichnet werden.

Literale

Feste Werte oder Literale gibt es in verschiedenen Formen. Sie können Zahlen sein, mit oder ohne Dezimalstellen, oder Textstrings, die mit doppelten oder einfachen Anführungszeichen geschrieben werden.

JavaScript-Strings speichern oder manipulieren Text und bestehen aus den Zeichen, die innerhalb der Anführungszeichen geschrieben sind. Im untenstehenden Fall ist G2 Learning Hub der feste Wert, der als String geschrieben ist.

var blogName = ‘G2 Learning Hub’;

Variablen

Variablen innerhalb von JavaScript sind Container, die Datenwerte speichern und mit den Schlüsselwörtern var, let oder const geschrieben werden (von denen jedes leicht unterschiedliche Anwendungsfälle hat). Im folgenden Beispiel sind a, b und c Variablen:

var a = 2;
let b = 4;
const c = a + b;

Es ist üblich, Variablen wie in der Algebra zu betrachten. In diesem Fall würde const c also 6 ergeben. Das Gleichheitszeichen wird verwendet, um die Werte den Variablen zuzuweisen und wird als Zuweisungsoperator bezeichnet. Das Pluszeichen ist ein arithmetischer Operator, der Werte berechnet.

Wenn Sie Ihre Variablen benennen, denken Sie daran, dass sie einzigartig sein müssen. Diese werden als Bezeichner bezeichnet. Sie können kurze Namen (wie a und b) oder beschreibendere (wie Alter und Summe) sein.

Beim Auswählen von Namen für Ihre Variablen oder eindeutigen Bezeichnern beachten Sie:

• Namen können Buchstaben, Zahlen, Unterstriche und Dollarzeichen enthalten
• Namen sind case-sensitive
• Namen müssen mit einem Buchstaben, einem Dollarzeichen oder einem Unterstrich beginnen, aber nicht mit einer Zahl

Case-Sensitive

Egal, für welche Art von Aktion Sie JavaScript-Code schreiben, es ist wichtig zu beachten, dass JavaScript case-sensitive ist. Die Variable lastName und lastname wären zwei verschiedene Codezeilen.

var lastname, lastName;
lastname = ‘Jones’;
lastName = ‘Smith’;

Die häufigste Art, wie Programmierer in JavaScript codieren, ist die Verwendung von Camel Case. Das bedeutet, dass das erste Wort mit einem Kleinbuchstaben beginnt und jedes folgende Wort mit einem Großbuchstaben.

JavaScript schreiben üben

Bereit, JavaScript zu üben, bevor Sie es auf Ihrer Website starten? Wenn Sie Chrome verwenden, können Sie dies einfach mit der integrierten Konsole tun.

Gehen Sie zuerst zur Google-Startseite. Unter „Ansicht“ scrollen Sie zu Entwickler und wählen Sie JavaScript-Konsole.

Dies bringt einen JavaScript-Editor direkt im Browser hoch, den Sie verwenden können, um Ihren Code in Echtzeit zu sehen. Für dieses Beispiel möchte ich eine Warnung erstellen, die sagt: „Hallo, willkommen im G2 Learning Hub.“

Dazu würde ich tippen:

alert („Hallo, willkommen im G2 Learning Hub“)

In diesem Fall ist alert eine eingebaute „Aktion“, die dem Browser übersetzt, ein Warnfeld anzuzeigen, und der Text ist der String.

Wenn ich die Eingabetaste drücke, erhalte ich dieses Popup:

Um Variablen in Aktion zu sehen, kann ich JavaScript verwenden, um zu wissen, dass mein Name Mara ist und dass ich möchte, dass das Popup mein Name ist.

Der Code, den ich in die JavaScript-Konsole eingegeben habe, lautet:

var name = “Mara”

Dann habe ich einfach name eingegeben und dann die Eingabetaste gedrückt, und es wusste, dass mein Name Mara ist. Für die Warnung habe ich getippt: alert(name), die Eingabetaste gedrückt und dieses Popup erhalten.

Sobald ich den Code verwendet habe, um meinen Namen zu spezifizieren und ihn in Anführungszeichen zu setzen, wusste der Code, dass der String für name Mara ist.

Wenn ich versuchen würde, eine Warnung für einen String zu machen, den ich noch nicht erstellt oder definiert habe, alert (message), erhalte ich einen Fehler.

Vor- und Nachteile von JavaScript

JavaScript bietet mehrere Vorteile, hat aber auch einige Nachteile.

Vorteile

• Vielseitigkeit: Die Anpassungsfähigkeit von JavaScript ermöglicht es, sowohl für die Erstellung des Frontends (Benutzeroberfläche) als auch des Backends (Server-seitige Logik) von Webanwendungen verwendet zu werden.
• Interaktivität: JavaScript ermöglicht es Webseiten, dynamisch und interaktiv zu sein, auf Benutzeraktionen zu reagieren und Echtzeit-Feedback zu geben.

Nachteile

• Sicherheit: JavaScript kann anfällig für Sicherheitslücken sein, wie z.B. Cross-Site-Scripting (XSS)-Angriffe, wenn es nicht sorgfältig gehandhabt wird.
• Browser-Kompatibilität: Verschiedene Webbrowser können JavaScript-Code unterschiedlich interpretieren, was zu potenziellen Inkonsistenzen in der Anzeige oder Funktion von Webseiten führen kann.

Das Verständnis dieser Vor- und Nachteile hilft Entwicklern, fundierte Entscheidungen über die Verwendung von JavaScript zu treffen.

Taten sagen mehr als Worte

Wenn Sie eine bestimmte Aktion auf einer Webseite, die Sie erstellen, ausführen lassen möchten, ist JavaScript der richtige Weg. Als das Sahnehäubchen oder die letzte Code-Schicht auf Ihrer Website kann der einfachste Code Ihre Webseite auf die nächste Ebene heben und das Benutzererlebnis verbessern.

Suchen Sie nach den nächsten Schritten? Entdecken Sie unser Website-Bau-Hub, wo Sie 50 Ressourcen kostenlos erhalten können!

Dieser Artikel wurde ursprünglich 2019 veröffentlicht. Er wurde mit neuen Informationen aktualisiert.