JavaScript - Syntax: A Beginner's Guide

Hallo zusammen, zukünftige JavaScript-Zauberer! Ich freue mich sehr, euer Guide auf dieser aufregenden Reise in die Welt der JavaScript-Syntax zu sein. Als jemand, der seit Jahren Programmieren unterrichtet, kann ich euch sagen, dass das Beherrschen der Syntax so ist wie das Lernen des Alphabets, bevor man Gedichte schreibt. Es mag grundlegend erscheinen, aber es ist die Grundlage für alles, was wir gemeinsam aufbauen werden. Also, tauchen wir ein!

JavaScript - Syntax

JavaScript Syntax: Die Bausteine des Codes

Die JavaScript-Syntax ist der Satz von Regeln, der definiert, wie JavaScript-Programme aufgebaut sind. Denkt daran wie die Grammatik der JavaScript-Sprache. Genau wie wir uns an Grammatikregeln halten müssen, um verständlich zu sprechen, müssen wir Syntaxregeln befolgen, damit unser Code für den Computer verständlich ist.

Dein erstes JavaScript-Code

Lassen wir mit einem einfachen "Hello, World!"-Programm beginnen. Dies ist oft das erste Programm, das man schreibt, wenn man eine neue Sprache lernt.

console.log("Hello, World!");

Wenn du diesen Code ausführst, siehst du "Hello, World!" in der Konsole ausgegeben. Lassen wir es auseinandernehmen:

  • console ist ein Objekt, das von JavaScript bereitgestellt wird und uns Zugang zur Browser-Debugging-Konsole gibt.
  • .log() ist eine Methode des console-Objekts, die das übergebene Argument ausgibt.
  • "Hello, World!" ist eine Zeichenkette (eine Abfolge von Zeichen), die wir ausgeben möchten.

JavaScript-Werte

In JavaScript arbeiten wir mit verschiedenen Arten von Werten. Die Hauptarten sind:

  1. Zahlen: 42, 3.14
  2. Zeichenketten: "Hello", 'JavaScript'
  3. Booleans: true, false
  4. Objekte: {name: "John", age: 30}
  5. Arrays: [1, 2, 3, 4]
  6. Funktionen: function greet() { console.log("Hi!"); }

Hier ist ein Beispiel, das verschiedene Arten von Werten verwendet:

let age = 25;  // Number
let name = "Alice";  // String
let isStudent = true;  // Boolean
let person = {name: "Bob", age: 30};  // Object
let numbers = [1, 2, 3, 4, 5];  // Array

console.log(age);  // Ausgabe: 25
console.log(name);  // Ausgabe: Alice
console.log(isStudent);  // Ausgabe: true
console.log(person.name);  // Ausgabe: Bob
console.log(numbers[2]);  // Ausgabe: 3

Leerzeichen und Zeilenumbrüche

JavaScript ist sehr nachsichtig, wenn es um Leerzeichen (Spaces, Tabs und Zeilenumbrüche) geht. Du kannst sie verwenden, um deinen Code lesbarer zu machen, ohne seine Funktionalität zu beeinflussen.

let x = 5;
let y = 10;
let z = x + y;

// Dies ist äquivalent zu:
let x=5;let y=10;let z=x+y;

// Und sogar dies:
let x = 5
let y = 10
let z = x + y

Semikolons sind optional

In JavaScript sind Semikolons am Ende von Anweisungen optional. Es wird jedoch generell als gute Praxis angesehen, sie einzubeziehen.

let a = 5;  // Mit Semikolon
let b = 10  // Ohne Semikolon

// Beide sind gültig, aber das Hinzufügen von Semikolons wird empfohlen

Gross- und Kleinschreibung

JavaScript ist grosschreibungssensibel. Das bedeutet, dass myVariable, MyVariable und MYVARIABLE alle unterschiedliche Variablen sind.

let myVariable = "Hello";
let MyVariable = "World";

console.log(myVariable);  // Ausgabe: Hello
console.log(MyVariable);  // Ausgabe: World

JavaScript und Camel Case

Nach Konvention verwendet JavaScript Camel Case für Variablen- und Funktionsnamen. Das bedeutet, wir beginnen mit einem Kleinbuchstaben und kapitalisieren die erste Silbe jedes folgenden Wortes.

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;

console.log(fullName);  // Ausgabe: John Doe

JavaScript-Schlüsselwörter

JavaScript hat eine Reihe von reservierten Wörtern, die du nicht als Variablennamen verwenden kannst. Diese werden als Schlüsselwörter bezeichnet. Hier sind einige gängige:

Schlüsselwort Beschreibung
let Declariert eine blockscoped Variable
const Declariert eine blockscoped, unveraenderliche Konstante
if Markiert einen Block von Anweisungen, der unter einer Bedingung ausgeführt wird
for Markiert einen Block von Anweisungen, der in einer Schleife ausgeführt wird
function Declariert eine Funktion
return Verlaesst eine Funktion
true Ein Boolean-Wert
false Ein Boolean-Wert

JavaScript-Bezeichner

Ein Bezeichner ist ein Name, den du einer Variable, Funktion oder Eigenschaft gibst. Hier sind die Regeln für gueltige Bezeichner:

  1. Kann Buchstaben, Ziffern, Unterstriche und Dollarzeichen enthalten
  2. Muss mit einem Buchstaben, Unterstrich (_) oder Dollarzeichen ($) beginnen
  3. Grosschreibungssensibel
  4. Darf kein reserviertes Schlüsselwort sein
// Gueltige Bezeichner
let myVariable = 5;
let _privateVar = 10;
let $specialVar = 15;

// Ungueltige Bezeichner
// let 123abc = 20;  // Kann nicht mit einer Ziffer beginnen
// let my-var = 25;  // Kann keine Bindestriche verwenden
// let let = 30;     // Kann keine reservierten Schlüsselwörter verwenden

Kommentare in JavaScript

Kommentare werden verwendet, um Notizen zu deinem Code hinzuzufuegen oder um bestimmte Teile des Codes von der Ausfuehrung auszuschliessen. Es gibt zwei Arten von Kommentaren in JavaScript:

// Dies ist ein Einzeilchen-Kommentar

/*
Dies ist ein
Mehrzeilchen-Kommentar
*/

let x = 5;  // Du kannst auch Kommentare am Ende einer Zeile hinzufuegen

Operatoren in JavaScript

Operatoren werden verwendet, um Operationen auf Variablen und Werte durchzufuehren. Hier sind einige gängige Operatoren:

Operator Beschreibung Beispiel
+ Addition 5 + 3
- Subtraktion 5 - 3
* Multiplikation 5 * 3
/ Division 15 / 3
% Modulus (Rest) 5 % 2
++ Inkrement x++
-- Dekrement x--
== Gleich 5 == 5
=== Strenge Gleichheit 5 === "5"
!= Ungleich 5 != 3
> Groesser als 5 > 3
< Kleiner als 3 < 5

Ausdruecke in JavaScript

Ein Ausdruck ist eine Kombination aus Werten, Variablen und Operatoren, die einen Wert bewertet. Hier sind einige Beispiele:

let x = 5;
let y = 3;

console.log(x + y);  // Ausgabe: 8
console.log(x * y);  // Ausgabe: 15
console.log(x > y);  // Ausgabe: true
console.log(x === "5");  // Ausgabe: false

JavaScript-Zeichensatz

JavaScript verwendet den Unicode-Zeichensatz. Das bedeutet, es kann mit Zeichen aus vielen verschiedenen Sprachen und Emoji arbeiten! Hier ist ein spaßiges Beispiel:

let greeting = "Hello! ?";
let name = "Alice";
console.log(greeting + " " + name);  // Ausgabe: Hello! ? Alice

Und das war's, Leute! Wir haben die Grundlagen der JavaScript-Syntax behandelt. Denkt daran, Übung macht den Meister. Es ist完全normal, wenn nicht alles sofort verstanden wird. Bleibt experimentierfreudig, bleibt codend und vor allem, spaßt euch daran! ??‍??‍?

Credits: Image by storyset