Dieser Anleitung zeigt einen Kurs von JavaScript -Grundlagen bis hin zu Zwischenkonzepten und stützt sich aus meiner persönlichen Lernerfahrung. Ich habe wichtige Imbissbuden, praktische Beispiele und hilfreiche Hinweise zusammengestellt, um Ihre Lernreise reibungsloser zu machen. Lass uns eintauchen!

Inhaltsverzeichnis

1. Variablen
2. arrays
3. bedingte Aussagen
4. Funktionen
5. Objekte
6. Das Dom (Dokumentobjektmodell)
7. events
8. integrieren html und javascript

1. Variablen

Variablen sind Container für Daten, die in Ihren Programmen verwendet werden. JavaScript bietet zwei wichtige Möglichkeiten, sie zu deklarieren:

• let : für Variablen, deren Werte sich ändern könnten.
• const : für Werte, die konstant bleiben sollten.

Beispiel:

let age = 25;
const name = "Mario";

Variablen können Zahlen, Text (Zeichenfolgen), wahre/falsche Werte (Booleans) oder sogar undefinierte Werte halten. JavaScript bietet Standard -arithmetische Operatoren (, -,*, /, %) und den Exponentiationsoperator (**).

console.log(2 ** 3); // Output: 8

2. Arrays

arrays speichern mehrere Werte in einer einzelnen Variablen. Verwenden Sie Quadratklammern, um ein Array zu definieren:

let fruits = ["apple", "banana", "cherry"];

Zugriffselemente mit ihrem Index (ab 0) zugreifen:

console.log(fruits[0]); // Output: apple

Hinzufügen und Entfernen von Elementen:

Arrays sind dynamisch; Sie können sie ändern:

• . push () : fügt zum Ende ein Element hinzu.
• . unshift () : fügt dem Anfang ein Element hinzu.
• . pop () : entfernt das letzte Element.
• . Shift () : entfernt das erste Element.

Beispiel:

fruits.push("orange");
console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]

Suchen Sie Arrays:

• . indexof () : Findet den Index eines Wertes.
• . Include () : Überprüft, ob ein Wert existiert.

console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false

3. Bedingte Aussagen

Bedingte Anweisungen erlauben Ihrem Code, Entscheidungen zu treffen. if und else werden allgemein verwendet:

if (grade > 60) {
  console.log("You passed!");
} else {
  console.log("You failed!");
}

Vergleich Operatoren:

Diese Operatoren sind wichtig für die Bewertung von Bedingungen:

• === (strenge Gleichheit)
• ! == (strenge Ungleichheit)
• > (größer als)
• (weniger als)
• > = (größer als oder gleich)
• (weniger als oder gleich)

4. Funktionen

Funktionen sind wiederverwendbare Codeblöcke. Definieren Sie sie mit dem Schlüsselwort function :

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Output: Hello, Alice!

Parameter und Argumente:

Funktionen können Eingaben akzeptieren ( Parameter ) und sie verwenden, wenn sie mit Argumenten angerufen werden :

function add(a, b) {
  return a   b;
}
console.log(add(2, 3)); // Output: 5

5. Objekte

Objekte sind Sammlungen von Schlüsselwertpaaren wie Mini-Daten:

const car = {
  brand: "Tesla",
  model: "Model 3",
  year: 2020
};
console.log(car.brand); // Output: Tesla

Methoden in Objekten:

Objekte können auch Funktionen enthalten ( methoden ):

const phone = {
  brand: "Apple",
  ring() {
    console.log("Ring, ring! ?");
  }
};
phone.ring();

6. Das DOM (Dokumentobjektmodell)

Die Dom lässt JavaScript mit HTML -Elementen interagieren.

Elemente auswählen:

Verwenden Sie das Objekt document , um Elemente auszuwählen:

const heading = document.querySelector("h1");
console.log(heading.innerText); // Logs the text within the 
 tag

Elemente Aktualisieren:

Inhalt dynamisch ändern:

heading.innerText = "Welcome to JavaScript!";

7. Ereignisse

antworten auf Benutzeraktionen (Klicks, Tastendruck) mit . AddEventListener () :

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

Beispiel: Inkrementierung eines Zählers:

let count = 0;
button.addEventListener("click", () => {
  count  ;
  console.log(`Clicked ${count} times`);
});

8. Integration von HTML und JavaScript

add JavaScript direkt zu html mit Tags:

Für größere Skripte verlinken Sie eine externe . JS Datei:

Dies schließt meine JavaScript -Lernreise vom Anfänger auf Zwischenstufen ab! Ich hoffe, dieser Leitfaden erweist sich als hilfreich. Fühlen Sie sich frei, Ihre eigenen Lerntipps zu teilen oder Fragen in den Kommentaren zu stellen! Happy Coding! ✨