1. Erste Schritte mit JavaScript

CoderStudio, 18.03.2023 11:50
1. Erste Schritte mit JavaScript

Was ist JavaScript?

JavaScript (JS) ist eine Programmiersprache, die bei der Erstellung dynamischer Webseiten hilft. Sie hilft bei der Implementierung komplexer Webfunktionen in Ihre Webseiten, z. B. bei der Aktualisierung der Benutzeroberfläche der Webseite und bei der Durchführung einiger Aktionen wie dem Senden von HTTP-Anfragen an den Server, wenn ein Benutzer auf eine Schaltfläche klickt, und vieles mehr.

JavaScript wird auch auf der Serverseite verwendet, zum Beispiel zum Erstellen von HTTP-Anforderungs-APIs, zum Lesen von Daten aus der Datenbank und vielem mehr.

Wie fügt man JavaScript zu einer Webseite hinzu?

Es gibt 2 Möglichkeiten, JavaScript zu Ihrer HTML-Seite hinzuzufügen.

  1. Intern
    In Ihrer HTML-Datei können Sie den <script> Tag verwenden, um JavaScript in Ihrer Datei hinzuzufügen.
    Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Basics</title>
</head>
<body>
    <h1>
        Js Code 
    </h1>
    <script>
        console.info('My First JS Code');
    </script>
</body>
</html>
Es gibt 2 Möglichkeiten JavaScript zu Ihrer HTML-Seite hinzuzufügen

Hinweis: console.info('<Ihr Text>') hilft beim Drucken der Ausgabe.

Die Konsole in den Browser-Entwicklerwerkzeugen ist ein von den Browsern bereitgestelltes Werkzeug, mit dem Sie die Ausgaben Ihres JavaScript-Codes sehen und Ihren JavaScript-Code auch ausführen können.

2. Extern

Dies umfasst zwei Schritte;

1. Erstellen Sie eine externe JavaScript-Datei. JavaScript-Dateien werden mit der Erweiterung ".js" erstellt. So wie eine Textdatei eine ".txt" am Ende hat und eine Videodatei eine ".mp4"-Erweiterung.

Beispiel;

Beispiel

2. Jetzt müssen wir nur noch den Pfad der js-Datei in die HTML-Datei einfügen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Basics</title>
</head>
<body>
    <h1>
        Js Code 
    </h1>
    <script src="index.js" ></script>
</body>
</html>
2 Jetzt müssen wir nur noch den Pfad der js-Datei in die HTML-Datei einfügen

Wie funktioniert JavaScript?

Bevor wir das verstehen, sollten wir uns klar machen, was eine Laufzeitumgebung ist.

Laufzeitumgebung

Eine Laufzeitumgebung ist eine Umgebung, in der der Code erfolgreich ausgeführt werden kann. Diese Umgebung stellt die erforderlichen Bibliotheken usw. bereit, damit der Code erfolgreich ausgeführt werden kann.

JS-Engine

Eine JavaScript-Engine ist ein Programm, das den JavaScript-Code liest und ihn in Maschinencode umwandelt (Codes, die von einer Maschine verstanden werden, um ihre Bedeutung zu steuern) und schließlich den Maschinencode ausführt.

Eine Kombination aus JS-Engine und einigen zusätzlichen Bibliotheken und Dienstprogrammen bildet eine Laufzeitumgebung.

Die wichtigsten Browser verfügen über JS-Engines, die den JavaScript-Code ausführen.

Google Chrome -> V8

Safari -> JavaScriptCore

Firefox -> SpiderMonkey

Wie speichert man Daten/Informationen in JavaScript-Code zur späteren Verwendung?

Angenommen, Sie möchten, dass zwei Zahlen auf Ihrer Webseite addiert werden und die Summe dann irgendwo im Speicher abgelegt wird, damit Sie sie später in Ihrem Code verwenden können. Um auf den gespeicherten Wert (die Summe) im Code zuzugreifen bzw. ihn zu lesen, müssten wir auf ihn verweisen, richtig? Denn wir können nicht die ganze Zeit konstante Werte (3, 34 usw.) eingeben.

Wir erstellen also einen benannten Container, in dem wir unsere Werte speichern und später im Code verwenden können. Wir nennen sie "Variablen".

Eine Variable ist ein Container, der einen Wert enthält, den wir in unserem Code verwenden können.

Deklarieren einer Variable

Das Erstellen einer Variable wird als Deklaration einer Variable bezeichnet.

Beispiel:

let number1; 
let number2; 
let sum;

Hier erstellen wir zwei Variablen number1 und number2.

Initialisierung einer Variable

Nun können wir diesen Variablen einige Werte zuweisen. Dies wird als Initialisierung einer Variable bezeichnet.

Beispiel;

number1 = 28;
number2 = 30;
sum = number1 + number2;

Sie können eine Variable gleichzeitig deklarieren und initialisieren, etwa so;

let number3  = 35;

Aktualisieren einer Variable

Sie können eine Variable einfach aktualisieren, indem Sie einen neuen Wert in die Variable eingeben.

number1 = 32; 

Was sind die verschiedenen Arten der Deklaration einer Variable? let, var und const

  1. let: wird verwendet, wenn Sie eine Variable verwenden wollen, die später im Code aktualisiert werden kann.
let number4 = 5;

2. const: wird verwendet, wenn eine Variable verwendet wird, deren Wert sich später im Code nicht ändern darf. Wenn Sie eine const deklarieren, müssen Sie sie sofort initialisieren.

const pi = 3.14

3. var: Dies ist ähnlich wie let, aber let ist neu und wird empfohlen.

Wie man Variablen benennt

  1. JavaScripts reserviert einige Wörter wie let, var, const, function usw. Stellen Sie also bei der Deklaration einer Variablen sicher, dass Sie das reservierte Schlüsselwort nicht verwenden.
  2. Halten Sie den ersten Buchstaben in einem Kleinbuchstaben.
  3. Verwenden Sie keine Zahl als erstes Zeichen des Variablennamens.
  4. Verwenden Sie keine Sonderzeichen als erstes Zeichen der Variablen.
  5. Bitte beachten Sie, dass bei Variablen zwischen Groß- und Kleinschreibung unterschieden wird. Groß-/Kleinschreibung bedeutet, dass eine Variable mit Kleinbuchstaben anders behandelt wird als eine Variable mit Großbuchstaben.
    so wird "myage" anders als "myAge" sein.

Datentypen in JavaScript

Primitive Typen

Alle primitiven Typen sind die grundlegendsten und einfachsten Typen von Werten, die Sie in einer Variablen speichern können. Diese Typen sind unveränderlich, d. h. ihr ursprünglicher Wert kann nicht geändert werden.

  • Null-Typ: "null" bedeutet, dass die Variable auf gar nichts zeigt.
    Eine Variable vom Typ "null", die auf nichts zeigt, kann wie folgt erstellt werden;
let num1;
num1 = null;
  • Undefinierter Typ: "undefined" bedeutet, dass die erstellte Variable keinen Wert enthält. Wenn Sie also eine Variable deklarieren, aber nicht initialisieren, wird der Variablen automatisch "undefined" zugewiesen.
Alle primitiven Typen sind die grundlegendsten und einfachsten Typen von Werten die Sie
  • Boolescher Typ: Boolesche Typen geben zwei Arten von Werten an: "wahr" und "falsch".
  • Zahlentyp: Der Typ Zahl ist für Zahlen wie die Werte 4, 5, -16, 16,5 usw. gedacht.
Alle primitiven Typen sind die grundlegendsten und einfachsten Typen von Werten die Sie

Hinweis: typeof wird verwendet, um den Typ einer Variablen zu prüfen.

NaN ("Not a Number") steht für eine besondere Art von Zahlenwert, der auftritt, wenn das Ergebnis einer arithmetischen Operation nicht als Zahl ausgedrückt werden kann.

Beispiel;

Beispiel
  • String-Typ: Dieser Typ steht für textuelle Daten.
Beispiel

Nicht-primitive Datentypen

  1. Objekt: Dieser Typ wird zum Speichern von Schlüssel-Wert-Paaren verwendet, wobei die Werte von beliebigem Datentyp sein können.
Beispiel

2. Array-Objekt: Dieser Datentyp hilft bei der Speicherung einer Sammlung von verschiedenen Werten unterschiedlicher Datentypen.

2 Array-Objekt Dieser Datentyp hilft bei der Speicherung einer Sammlung von

Es gibt noch so viel mehr über JavaScript zu wissen. Wenn Sie neugierig sind, finden Sie hier eine Liste mit Ressourcen;

1. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript

2. https://www.freecodecamp.org/news/what-is-javascript

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

Vielen Dank fürs Lesen!

Lernen Sie weiter, und wachsen Sie weiter!