JS-Tutorial

JS-HAUS JS-Einführung JS Wohin JS-Ausgabe JS-Anweisungen JS-Syntax JS-Kommentare JS-Variablen JS Let JS Konst JS-Operatoren JS-Arithmetik JS-Aufgabe JS-Datentypen JS-Funktionen JS-Objekte JS-Ereignisse JS-Strings JS-String-Methoden Suche nach JS-Strings JS-String-Vorlagen JS-Nummern JS-Zahlenmethoden JS-Arrays JS-Array-Methoden JS-Array-Sortierung JS-Array-Iteration JS-Array-Konstante JS-Daten JS-Datumsformate JS Date Get-Methoden JS-Datumssatzmethoden JS Math JS Zufällig JS Boolesche Werte JS-Vergleiche JS-Bedingungen JS-Schalter JS-Schleife für JS-Schleife für In JS-Schleife für Of JS-Schleife While JS Pause JS-Iterables JS-Sets JS-Karten JS Typeof JS-Typkonvertierung JS Bitweise JS RegExp JS-Fehler JS-Bereich JS Heben Strenger JS-Modus JS dieses Schlüsselwort JS-Pfeilfunktion JS-Klassen JS JSON JS-Debugging JS-Styleguide JS Best Practices JS-Fehler JS-Leistung JS Reservierte Wörter

JS-Versionen

JS-Versionen JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-Geschichte

JS-Objekte

Objektdefinitionen Objekteigenschaften Objektmethoden Objektanzeige Objektzugriffsmethoden Objektkonstruktoren Objekt-Prototypen Objekt-Iterables Objektsätze Objektkarten Objektreferenz

JS-Funktionen

Funktionsdefinitionen Funktionsparameter Funktionsaufruf Funktionsaufruf Funktion anwenden Funktionsschließungen

JS-Klassen

Klasse Einführung Klassenvererbung Klasse statisch

JS asynchron

JS-Rückrufe JS asynchron JS verspricht JS Async/Warten

JS-HTML-DOM

DOM-Einführung DOM-Methoden DOM-Dokument DOM-Elemente DOM-HTML DOM-Formulare DOM-CSS DOM-Animationen DOM-Ereignisse DOM-Ereignis-Listener DOM-Navigation DOM-Knoten DOM-Sammlungen DOM-Knotenlisten

Stückliste des JS-Browsers

JS-Fenster JS-Bildschirm JS-Standort JS-Geschichte JS-Navigator JS-Popup-Warnung JS-Timing JS-Cookies

JS-Web-APIs

Web-API-Einführung Web Forms-API Webprotokoll-API Webspeicher-API Web Worker-API Web-Fetch-API Web-Geolocation-API

JS AJAX

AJAX-Einführung AJAX-XMLHttp AJAX-Anfrage AJAX-Antwort AJAX-XML-Datei AJAX-PHP AJAX ASP AJAX-Datenbank AJAX-Anwendungen AJAX-Beispiele

JS JSON

JSON-Einführung JSON-Syntax JSON vs. XML JSON-Datentypen JSON-Parsing JSON-Stringify JSON-Objekte JSON-Arrays JSON-Server JSON-PHP JSON-HTML JSON JSONP

JS vs. jQuery

jQuery-Selektoren jQuery-HTML jQuery-CSS jQuery-DOM

JS-Grafik

JS-Grafik JS-Leinwand JS Plotly JS Chart.js JS Google-Diagramm JS D3.js

JS-Beispiele

JS-Beispiele JS-HTML-DOM JS-HTML-Eingabe JS-HTML-Objekte JS-HTML-Ereignisse JS-Browser JS-Editor JS-Übungen JS-Quiz JS-Zertifikat

JS-Referenzen

JavaScript-Objekte HTML-DOM-Objekte


JavaScript -Variablen

4 Möglichkeiten, eine JavaScript-Variable zu deklarieren:

  • Verwenden var
  • Verwenden let
  • Verwenden const
  • Nichts verwenden

Was sind Variablen?

Variablen sind Container zum Speichern von Daten (Speichern von Datenwerten).

In diesem Beispiel sind x, yund z, Variablen, die mit dem varSchlüsselwort deklariert werden:

Beispiel

var x = 5;
var y = 6;
var z = x + y;

In diesem Beispiel sind x, yund z, Variablen, die mit dem letSchlüsselwort deklariert werden:

Beispiel

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

In diesem Beispiel sind x, yund z, nicht deklarierte Variablen:

Beispiel

x = 5;
y = 6;
z = x + y;

Aus all den obigen Beispielen können Sie erraten:

  • x speichert den Wert 5
  • y speichert den Wert 6
  • z speichert den Wert 11

Wann sollte man JavaScript-Variablen verwenden?

Deklarieren Sie JavaScript-Variablen immer mit var, let, oder const.

Das varSchlüsselwort wird von 1995 bis 2015 im gesamten JavaScript-Code verwendet.

Die Schlüsselwörter letund constwurden 2015 zu JavaScript hinzugefügt.

Wenn Sie möchten, dass Ihr Code in einem älteren Browser ausgeführt wird, müssen Sie var.


Wann sollte JavaScript const verwendet werden?

Wenn Sie eine allgemeine Regel wollen: Deklarieren Sie Variablen immer mit const.

Wenn Sie glauben, dass sich der Wert der Variablen ändern kann, verwenden Sie let.

In diesem Beispiel sind price1, price2und total, Variablen:

Beispiel

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

Die beiden Variablen price1und price2 werden mit dem constSchlüsselwort deklariert.

Dies sind konstante Werte und können nicht geändert werden.

Die Variable totalwird mit dem letSchlüsselwort deklariert.

Dies ist ein Wert, der geändert werden kann.


Genau wie Algebra

Genau wie in der Algebra enthalten Variablen Werte:

let x = 5;
let y = 6;

Genau wie in der Algebra werden Variablen in Ausdrücken verwendet:

let z = x + y;

Aus dem obigen Beispiel können Sie erraten, dass die Summe 11 beträgt.

Notiz

Variablen sind Container zum Speichern von Werten.



JavaScript-Identifikatoren

Alle JavaScript- Variablen müssen mit eindeutigen Namen identifiziert werden .

Diese eindeutigen Namen werden als Bezeichner bezeichnet .

Bezeichner können Kurznamen (wie x und y) oder aussagekräftigere Namen (age, sum, totalVolume) sein.

Die allgemeinen Regeln für den Aufbau von Namen für Variablen (eindeutige Bezeichner) sind:

  • Namen können Buchstaben, Ziffern, Unterstriche und Dollarzeichen enthalten.
  • Namen müssen mit einem Buchstaben beginnen
  • Namen können auch mit $ und _ beginnen (wir werden es in diesem Tutorial jedoch nicht verwenden)
  • Bei Namen wird zwischen Groß- und Kleinschreibung unterschieden (y und Y sind unterschiedliche Variablen)
  • Reservierte Wörter (wie JavaScript-Schlüsselwörter) können nicht als Namen verwendet werden

Notiz

Bei JavaScript-Bezeichnern wird zwischen Groß- und Kleinschreibung unterschieden.


Der Zuweisungsoperator

In JavaScript ist das Gleichheitszeichen ( =) ein „Zuweisungs“-Operator, kein „Gleich“-Operator.

Das ist anders als in der Algebra. Folgendes ergibt in der Algebra keinen Sinn:

x = x + 5

In JavaScript macht es jedoch durchaus Sinn: Es weist x den Wert von x + 5 zu.

(Es berechnet den Wert von x + 5 und trägt das Ergebnis in x ein. Der Wert von x wird um 5 erhöht.)

Notiz

Der „gleich“-Operator wird wie ==in JavaScript geschrieben.


JavaScript-Datentypen

JavaScript-Variablen können Zahlen wie 100 und Textwerte wie "John Doe" enthalten.

In der Programmierung werden Textwerte als Textstrings bezeichnet.

JavaScript kann viele Arten von Daten verarbeiten, aber denken Sie zunächst nur an Zahlen und Zeichenfolgen.

Strings werden in doppelte oder einfache Anführungszeichen geschrieben. Zahlen werden ohne Anführungszeichen geschrieben.

Wenn Sie eine Zahl in Anführungszeichen setzen, wird sie als Textzeichenfolge behandelt.

Beispiel

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

Deklarieren einer JavaScript-Variablen

Das Erstellen einer Variablen in JavaScript wird als "Deklarieren" einer Variablen bezeichnet.

Sie deklarieren eine JavaScript-Variable mit dem varoder dem letSchlüsselwort:

var carName;
oder:
let carName;

Nach der Deklaration hat die Variable keinen Wert (technisch gesehen ist sie undefined).

Um der Variablen einen Wert zuzuweisen , verwenden Sie das Gleichheitszeichen:

carName = "Volvo";

Sie können der Variablen auch einen Wert zuweisen, wenn Sie sie deklarieren:

let carName = "Volvo";

Im folgenden Beispiel erstellen wir eine Variable mit dem Namen carNameund weisen ihr den Wert „Volvo“ zu.

Dann "geben" wir den Wert innerhalb eines HTML-Absatzes mit id="demo" aus:

Beispiel

<p id="demo"></p>

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

Notiz

Es ist eine gute Programmierpraxis, alle Variablen am Anfang eines Skripts zu deklarieren.


Eine Anweisung, viele Variablen

Sie können viele Variablen in einer Anweisung deklarieren.

Beginnen Sie die Anweisung mit varund trennen Sie die Variablen durch Kommas :

Beispiel

let person = "John Doe", carName = "Volvo", price = 200;

Eine Deklaration kann mehrere Zeilen umfassen:

Beispiel

let person = "John Doe",
carName = "Volvo",
price = 200;

Wert = undefiniert

In Computerprogrammen werden Variablen oft ohne Wert deklariert. Der Wert kann etwas sein, das berechnet werden muss, oder etwas, das später bereitgestellt wird, wie z. B. eine Benutzereingabe.

Eine ohne Wert deklarierte Variable hat den Wert undefined.

Die Variable carName hat undefinednach der Ausführung dieser Anweisung den Wert:

Beispiel

let carName;

Neudeklaration von JavaScript-Variablen

Wenn Sie eine mit deklarierte JavaScript-Variable erneut deklarieren var, verliert sie ihren Wert nicht.

Die Variable carNamehat nach der Ausführung dieser Anweisungen immer noch den Wert "Volvo":

Beispiel

var carName = "Volvo";
var carName;

Notiz

letSie können eine mit oder deklarierte Variable nicht erneut deklarieren const.

Das wird nicht funktionieren:

let carName = "Volvo";
let carName;

JavaScript-Arithmetik

Wie bei der Algebra können Sie mit JavaScript-Variablen rechnen, indem Sie Operatoren wie =und verwenden +:

Beispiel

let x = 5 + 2 + 3;

Sie können auch Strings hinzufügen, aber Strings werden verkettet:

Beispiel

let x = "John" + " " + "Doe";

Versuchen Sie auch Folgendes:

Beispiel

let x = "5" + 2 + 3;

Notiz

Wenn Sie eine Zahl in Anführungszeichen setzen, werden die restlichen Zahlen als Zeichenfolgen behandelt und verkettet.

Versuchen Sie jetzt Folgendes:

Beispiel

let x = 2 + 3 + "5";

JavaScript Dollarzeichen $

Da JavaScript ein Dollarzeichen als Buchstaben behandelt, sind Bezeichner, die $ enthalten, gültige Variablennamen:

Beispiel

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

Die Verwendung des Dollarzeichens ist in JavaScript nicht sehr verbreitet, aber professionelle Programmierer verwenden es oft als Alias ​​für die Hauptfunktion in einer JavaScript-Bibliothek.

In der JavaScript-Bibliothek jQuery beispielsweise dient die main-Funktion $zur Auswahl von HTML-Elementen. In jQuery $("p");bedeutet "alle p Elemente auswählen".


JavaScript-Unterstrich (_)

Da JavaScript den Unterstrich als Buchstaben behandelt, sind Bezeichner, die _ enthalten, gültige Variablennamen:

Beispiel

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

Die Verwendung des Unterstrichs ist in JavaScript nicht sehr verbreitet, aber eine Konvention unter professionellen Programmierern ist es, ihn als Alias ​​für "private (versteckte)" Variablen zu verwenden.


Testen Sie sich mit Übungen

Übung:

Erstellen Sie eine Variable namens carNameund weisen Sie ihr den Wert Volvozu.

var  = "";