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 -Bereich

Scope bestimmt die Zugänglichkeit (Sichtbarkeit) von Variablen.

JavaScript hat 3 Arten von Bereichen:

  • Bereich blockieren
  • Funktionsumfang
  • Globaler Geltungsbereich

Bereich blockieren

Vor ES6 (2015) hatte JavaScript nur Global Scope und Function Scope .

ES6 hat zwei wichtige neue JavaScript-Schlüsselwörter eingeführt: letund const.

Diese beiden Schlüsselwörter stellen den Blockbereich in JavaScript bereit.

Auf Variablen, die innerhalb eines { }-Blocks deklariert sind, kann nicht von außerhalb des Blocks zugegriffen werden:

Beispiel

{
  let x = 2;
}
// x can NOT be used here

Mit dem Schlüsselwort deklarierte Variablen varkönnen KEINEN Blockbereich haben.

Auf innerhalb eines { }-Blocks deklarierte Variablen kann von außerhalb des Blocks zugegriffen werden.

Beispiel

{
  var x = 2;
}
// x CAN be used here

Lokaler Geltungsbereich

Innerhalb einer JavaScript-Funktion deklarierte Variablen werden für die Funktion LOCAL .

Beispiel

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

Lokale Variablen haben einen Funktionsumfang :

Auf sie kann nur innerhalb der Funktion zugegriffen werden.

Da lokale Variablen nur innerhalb ihrer Funktionen erkannt werden, können gleichnamige Variablen in verschiedenen Funktionen verwendet werden.

Lokale Variablen werden erstellt, wenn eine Funktion gestartet wird, und gelöscht, wenn die Funktion abgeschlossen ist.


Funktionsumfang

JavaScript hat einen Funktionsbereich: Jede Funktion erstellt einen neuen Bereich.

Innerhalb einer Funktion definierte Variablen sind von außerhalb der Funktion nicht zugänglich (sichtbar).

varMit , let und deklarierte Variablen constsind ziemlich ähnlich, wenn sie innerhalb einer Funktion deklariert werden.

Sie alle haben Funktionsumfang :

function myFunction() {
  var carName = "Volvo";   // Function Scope
}
function myFunction() {
  let carName = "Volvo";   // Function Scope
}
function myFunction() {
  const carName = "Volvo";   // Function Scope
}

Globale JavaScript-Variablen

Eine außerhalb einer Funktion deklarierte Variable wird zu GLOBAL .

Beispiel

let carName = "Volvo";
// code here can use carName

function myFunction() {
// code here can also use carName
}

Eine globale Variable hat einen globalen Gültigkeitsbereich :

Alle Skripte und Funktionen einer Webseite können darauf zugreifen. 


Globaler Geltungsbereich

Global deklarierte Variablen (außerhalb jeder Funktion) haben globalen Gültigkeitsbereich .

Auf globale Variablen kann von überall in einem JavaScript-Programm zugegriffen werden.

varMit , let und deklarierte Variablen constsind ziemlich ähnlich, wenn sie außerhalb eines Blocks deklariert werden.

Sie alle haben einen globalen Geltungsbereich :

var x = 2;       // Global scope
let x = 2;       // Global scope
const x = 2;       // Global scope

JavaScript-Variablen

In JavaScript sind Objekte und Funktionen ebenfalls Variablen.

Der Umfang bestimmt die Zugänglichkeit von Variablen, Objekten und Funktionen aus verschiedenen Teilen des Codes.



Automatisch global

Wenn Sie einer nicht deklarierten Variablen einen Wert zuweisen, wird sie automatisch zu einer GLOBAL - Variablen.

In diesem Codebeispiel wird eine globale Variable deklariert carName, auch wenn der Wert innerhalb einer Funktion zugewiesen wird.

Beispiel

myFunction();

// code here can use carName

function myFunction() {
  carName = "Volvo";
}

strikter Modus

Alle modernen Browser unterstützen die Ausführung von JavaScript im "Strict Mode".

In einem späteren Kapitel dieses Tutorials erfahren Sie mehr über die Verwendung des strikten Modus.

Im "Strict Mode" sind nicht deklarierte Variablen nicht automatisch global.


Globale Variablen in HTML

Bei JavaScript ist der globale Geltungsbereich die JavaScript-Umgebung.

In HTML ist der globale Gültigkeitsbereich das Fensterobjekt.

Mit dem Schlüsselwort definierte globale Variablen vargehören zum Fensterobjekt:

Beispiel

var carName = "Volvo";
// code here can use window.carName

Mit dem Schlüsselwort definierte globale Variablen letgehören nicht zum Fensterobjekt:

Beispiel

let carName = "Volvo";
// code here can not use window.carName

Warnung

Erstellen Sie KEINE globalen Variablen, es sei denn, Sie beabsichtigen dies.

Ihre globalen Variablen (oder Funktionen) können Fenstervariablen (oder Funktionen) überschreiben.
Jede Funktion, einschließlich des Fensterobjekts, kann Ihre globalen Variablen und Funktionen überschreiben.


Die Lebensdauer von JavaScript-Variablen

Die Lebensdauer einer JavaScript-Variablen beginnt mit ihrer Deklaration.

(Lokale) Funktionsvariablen werden gelöscht, wenn die Funktion abgeschlossen ist.

In einem Webbrowser werden globale Variablen gelöscht, wenn Sie das Browserfenster (oder die Registerkarte) schließen.


Funktionsargumente

Funktionsargumente (Parameter) funktionieren als lokale Variablen innerhalb von Funktionen.