🧡🧡🧡 HAPPY CODING 🧡🧡🧡

Support the author to create more educational materials

30 Days Of JavaScript: Introduction

_{Author: Asabeneh Yetayeh
January, 2020}

🇬🇧 English 🇪🇸 Spanish 🇮🇹 Italian 🇷🇺 Russian 🇹🇷 Turkish 🇦🇿 Azerbaijan 🇰🇷 Korean 🇻🇳 Vietnamese 🇵🇱 Polish

Day 2 >>

• 30 Days Of JavaScript
• 📔 Day 1
  • Introduction
  • Requirements
  • Setup
    • Install Node.js
    • Browser
      • Installing Google Chrome
      • Opening Google Chrome Console
      • Writing Code on Browser Console
        • Console.log
        • Console.log with Multiple Arguments
        • Comments
        • Syntax
      • Arithmetics
    • Code Editor
      • Installing Visual Studio Code
      • How to Use Visual Studio Code
  • Adding JavaScript to a Web Page
    • Inline Script
    • Internal Script
    • External Script
    • Multiple External Scripts
  • Introduction to Data types
    • Numbers
    • Strings
    • Booleans
    • Undefined
    • Null
  • Checking Data Types
  • Comments Again
  • Variables
• 💻 Day 1: Exercises

Glückwunsch, dass Sie sich entschieden haben, an der 30 Tage JavaScript-Programmierung Challenge teilzunehmen. In diesem Wettbewerb lernen Sie alles, was Sie brauchen, um ein JavaScript-Programmierer zu werden, und generell das ganze Konzept der Programmierung. Am Ende der Challenge erhalten Sie ein 30DaysOfJavaScript-Programming-Challenge-Zertifikat. Falls Sie Hilfe benötigen oder anderen helfen möchten, können Sie der [Telegrammgruppe] (https://t.me/ThirtyDaysOfJavaScript) beitreten.

Die 30DaysOfJavaScript-Herausforderung ist ein Leitfaden für Anfänger und fortgeschrittene JavaScript-Entwickler. Willkommen bei JavaScript. JavaScript ist die Sprache des Webs. Mir macht es Spaß, JavaScript zu verwenden und zu lehren, und ich hoffe, Sie werden es auch tun.

In dieser JavaScript-Herausforderung lernen Sie Schritt für Schritt JavaScript, die beliebteste Programmiersprache in der Geschichte der Menschheit. JavaScript wird verwendet um Websites interaktiv zu gestalten, um mobile Anwendungen, Desktop-Anwendungen und Spiele zu entwickeln. Heutzutage kann JavaScript auch für maschinelles Lernen und AI verwendet werden. JavaScript (JS) hat in den letzten Jahren an Popularität gewonnen und ist seit sechs Jahren in Folge die führende Programmiersprache und ist die am häufigsten verwendete Programmiersprache auf Github.

Für die Teilnahme an dieser Challenge sind keine Vorkenntnisse im Programmieren erforderlich. Du brauchst nur:

1. Motivation
2. Einen Computer
3. Internet
4. Ein Browser
5. Ein Code-Editor

Ich glaube, Sie haben die Motivation und den starken Wunsch, ein Entwickler zu sein, einen Computer und Internet. Wenn du das hast, dann hast du alles, um loszulegen.

Sie brauchen Node.js vielleicht nicht sofort, aber vielleicht für später. Installieren Sie node.js.

Nach dem Herunterladen doppelklicken und installieren

Wir können überprüfen, ob node auf unserem lokalen Rechner installiert ist, indem wir unser Geräteterminal oder die Eingabeaufforderung öffnen.

asabeneh $ node -v
v12.14.0

Als ich dieses Tutorial erstellt habe, habe ich die Node-Version 12.14.0 verwendet, aber jetzt ist die empfohlene Version von Node.js für den Download die Version 14.17.6, wenn Sie dieses Material verwenden, haben Sie vielleicht eine höhere Node.js-Version.

Es gibt viele Browser auf dem Markt. Ich empfehle jedoch dringend Google Chrome.

Installieren Sie [Google Chrome] (https://www.google.com/chrome/), falls Sie noch keinen Browser haben. Wir können kleinen JavaScript-Code auf der Browserkonsole schreiben, aber wir verwenden die Browserkonsole nicht zur Entwicklung von Anwendungen.

Sie können die Google Chrome-Konsole öffnen, indem Sie entweder auf die drei Punkte in der oberen rechten Ecke des Browsers klicken, Weitere Tools -> Entwicklertools wählen oder eine Tastenkombination verwenden. Ich bevorzuge die Verwendung von Tastenkombinationen.

Chrome öffnen](images/opening_developer_tool.png)

So öffnen Sie die Chrome-Konsole mit einem Tastaturkürzel.

Mac
Command+Option+J

Windows/Linux:
Ctl+Shift+J

After you open the Google Chrome console, try to explore the marked buttons. We will spend most of the time on the Console. The Console is the place where your JavaScript code goes. The Google Console V8 engine changes your JavaScript code to machine code. Let us write a JavaScript code on the Google Chrome console:

We can write any JavaScript code on the Google console or any browser console. However, for this challenge, we only focus on Google Chrome console. Open the console using:

Mac
Command+Option+I

Windows:
Ctl+Shift+I

Um unseren ersten JavaScript-Code zu schreiben, haben wir eine integrierte Funktion console.log() verwendet. Wir haben ein Argument als Eingabedaten übergeben, und die Funktion zeigt die Ausgabe an. Wir haben 'Hello, World' als Eingabedaten oder Argument in der Funktion console.log() übergeben.

console.log('Hallo, Welt!')

Die Funktion console.log() kann mehrere durch Kommas getrennte Parameter annehmen. Die Syntax sieht wie folgt aus:konsole.log(param1, param2, param3)

console.log('Hallo', 'Welt', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Willkommen', 'bis', 30, 'Tage', 'Von', 'JavaScript')

Wie Sie aus dem obigen Codeschnipsel ersehen können, kann console.log() mehrere Argumente annehmen.

Herzlichen Glückwunsch! Sie haben Ihren ersten JavaScript-Code mit console.log() geschrieben.

Wir können Kommentare zu unserem Code hinzufügen. Kommentare sind sehr wichtig, um den Code besser lesbar zu machen und um Anmerkungen in unserem Code zu hinterlassen. JavaScript führt den Kommentarteil unseres Codes nicht aus. In JavaScript ist jede Textzeile, die mit // beginnt, ein Kommentar, und alles, was wie dieses // eingeschlossen ist, ist ebenfalls ein Kommentar.

Beispiel: Einzeiliger Kommentar

``js // Dies ist der erste Kommentar
// Dies ist der zweite Kommentar
// Ich bin ein einzeiliger Kommentar

**Beispiel: Mehrzeiliger Kommentar**

```js
/*
Dies ist ein mehrzeiliger Kommentar  
 Mehrzeilige Kommentare können mehrere Zeilen umfassen  
 JavaScript ist die Sprache des Webs  
 */

Programmiersprachen sind den menschlichen Sprachen ähnlich. Englisch und viele andere Sprachen verwenden Wörter, Phrasen, Sätze, zusammengesetzte Sätze und andere mehr, um eine sinnvolle Nachricht zu vermitteln. Die englische Bedeutung von Syntax ist die Anordnung von Wörtern und Phrasen, um wohlgeformte Sätze in einer Sprache zu bilden. Die technische Definition von Syntax ist die Struktur von Anweisungen in einer Computersprache. Programmiersprachen haben eine Syntax. JavaScript ist eine Programmiersprache, und wie andere Programmiersprachen hat sie ihre eigene Syntax. Wenn wir keine Syntax schreiben, die JavaScript versteht, wird es verschiedene Arten von Fehlern auslösen. Wir werden später verschiedene Arten von JavaScript-Fehlern untersuchen. Sehen wir uns zunächst einmal die Syntaxfehler an.

Ich habe absichtlich einen Fehler gemacht. Daraufhin meldet die Konsole Syntaxfehler. Eigentlich ist die Syntax sehr informativ. Sie informiert darüber, welche Art von Fehler gemacht wurde. Wenn wir den Leitfaden zur Fehlerrückmeldung lesen, können wir die Syntax korrigieren und das Problem beheben. Der Prozess der Identifizierung und Beseitigung von Fehlern in einem Programm wird Debugging genannt. Lassen Sie uns die Fehler beheben:

console.log('Hallo, Welt!')
console.log('Hallo, Welt!')

Bis jetzt haben wir gesehen, wie man Text mit console.log() ausgibt. Wenn wir einen Text oder eine Zeichenkette mit console.log() ausgeben, muss der Text innerhalb von einfachen Anführungszeichen, doppelten Anführungszeichen oder einem Backtick stehen. Beispiel:

console.log('Hallo, Welt!')
console.log("Hallo, Welt!")
console.log(`Hallo, Welt!`)

Lassen Sie uns nun das Schreiben von JavaScript-Codes mit console.log() auf der Google Chrome-Konsole für Zahlendatentypen weiter üben. Zusätzlich zum Text können wir mit JavaScript auch mathematische Berechnungen durchführen. Lassen Sie uns die folgenden einfachen Berechnungen durchführen. Es ist möglich, JavaScript-Code auf der Google Chrome-Konsole direkt ohne die Funktion console.log() zu schreiben. Sie ist jedoch in dieser Einführung enthalten, weil der Großteil dieser Herausforderung in einem Texteditor stattfinden würde, wo die Verwendung der Funktion obligatorisch wäre. Sie können direkt mit Anweisungen auf der Konsole herumspielen.

console.log(2 + 3) // Addition
console.log(3 - 2) // Subtraktion
console.log(2 * 3) // Multiplikation
console.log(3 / 2) // Division
console.log(3 % 2) // Modulus - Ermitteln des Rests
console.log(3 ** 2) // Potenzierung 3 ** 2 == 3 * 3

Wir können unsere Codes auf der Browserkonsole schreiben, aber für größere Projekte wird das nicht reichen. In einer realen Arbeitsumgebung verwenden Entwickler verschiedene Code-Editoren, um ihre Codes zu schreiben. In dieser 30-Tage-JavaScript-Herausforderung werden wir Visual Studio Code verwenden.

Visual Studio Code ist ein sehr beliebter Open-Source-Texteditor. Ich empfehle Visual Studio Code herunterzuladen, aber wenn Sie andere Editoren bevorzugen, können Sie gerne mit dem arbeiten, was Sie haben.

Wenn Sie Visual Studio Code installiert haben, können Sie es jetzt benutzen.

Öffnen Sie Visual Studio Code durch einen Doppelklick auf das Symbol. Wenn Sie es öffnen, erhalten Sie diese Art von Schnittstelle. Versuchen Sie, mit den beschrifteten Symbolen zu interagieren.

JavaScript kann auf drei verschiedene Arten zu einer Webseite hinzugefügt werden:

• Inline-Skript
• Internes Skript
• Externes Skript
• Mehrere externe Skripte_

Die folgenden Abschnitte zeigen verschiedene Möglichkeiten, JavaScript-Code zu Ihrer Webseite hinzuzufügen.

Erstellen Sie einen Projektordner auf Ihrem Desktop oder an einem beliebigen Ort, nennen Sie ihn 30DaysOfJS und erstellen Sie eine index.html Datei im Projektordner. Fügen Sie dann den folgenden Code ein und öffnen Sie ihn in einem Browser, zum Beispiel Chrome.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>30DaysOfScript:Inline Script</title>
  </head>
  <body>
    <button onclick="alert('Welcome to 30DaysOfJavaScript!')">Click Me</button>
  </body>
</html>

Jetzt haben Sie gerade Ihr erstes Inline-Skript geschrieben. Mit der eingebauten Funktion alert() können wir eine Pop-up-Warnmeldung erstellen.

Das interne Skript kann im head oder im body geschrieben werden, aber es ist vorzuziehen, es im Body des HTML-Dokuments unterzubringen. Zuerst schreiben wir es in den Kopfteil der Seite.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>30DaysOfScript:Internal Script</title>
    <script>
      console.log('Welcome to 30DaysOfJavaScript')
    </script>
  </head>
  <body></body>
</html>

In den meisten Fällen schreiben wir ein internes Skript auf diese Weise. Den JavaScript-Code in den Body-Abschnitt zu schreiben, ist die bevorzugte Option. Öffnen Sie die Browserkonsole, um die Ausgabe von "console.log()" zu sehen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>30DaysOfScript:Internal Script</title>
  </head>
  <body>
    <button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
    <script>
      console.log('Welcome to 30DaysOfJavaScript')
    </script>
  </body>
</html>

Öffnen Sie die Konsole des Browsers, um die Ausgabe von console.log() zu sehen.

Ähnlich wie das interne Skript kann der Link zum externen Skript in der Kopfzeile oder im Textkörper platziert werden, wobei es vorzuziehen ist, ihn in den Textkörper zu setzen. Zunächst sollten wir eine externe JavaScript-Datei mit der Erweiterung .js erstellen. Alle Dateien, die mit der Endung .js enden, sind JavaScript-Dateien. Erstellen Sie eine Datei mit dem Namen introduction.js in Ihrem Projektverzeichnis, schreiben Sie den folgenden Code und verlinken Sie diese .js-Datei am Ende des Textkörpers.

console.log('Welcome to 30DaysOfJavaScript')

Externe Skripte im head:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>30DaysOfJavaScript:External script</title>
    <script src="introduction.js"></script>
  </head>
  <body></body>
</html>

Externe Skripte im body:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>30DaysOfJavaScript:External script</title>
  </head>
  <body>
    <!-- Der externe JavaScript-Link kann in der Kopfzeile oder im Textkörper stehen --> 
    <!-- Vor dem schließenden Tag des Körpers ist der empfohlene Platz für das externe JavaScript-Skript -->
    <script src="introduction.js"></script>
  </body>
</html>

Öffnen Sie die Browserkonsole, um die Ausgabe von console.log() zu sehen.

Wir können auch mehrere externe JavaScript-Dateien mit einer Webseite verknüpfen. Erstellen Sie eine Datei helloworld.js im Ordner 30DaysOfJS und schreiben Sie den folgenden Code.

console.log('Hello, World!')

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Multiple External Scripts</title>
  </head>
  <body>
    <script src="./helloworld.js"></script>
    <script src="./introduction.js"></script>
  </body>
</html>

_Ihre Datei main.js sollte unter allen anderen Skripten stehen. Es ist sehr wichtig, sich dies zu merken.

In JavaScript und auch in anderen Programmiersprachen gibt es verschiedene Arten von Datentypen. Die folgenden sind die primitiven JavaScript-Datentypen: String, Number, Boolean, undefined, Null, und Symbol.

• Ganze Zahlen: Ganzzahlige (negative, null und positive) Zahlen Beispiel: ... -3, -2, -1, 0, 1, 2, 3 ...
• Fließkommazahlen: Dezimalzahl Beispiel: ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...

Eine Sammlung von einem oder mehreren Zeichen zwischen zwei einfachen Anführungszeichen, doppelten Anführungszeichen oder Backticks.

Beispiel:

'a'
'Asabeneh'
"Asabeneh"
'Finland'
'JavaScript is a beautiful programming language'
'I love teaching'
'I hope you are enjoying the first day'
`We can also create a string using a backtick`
'A string could be just as small as one character or as big as many pages'
'Any data type under a single quote, double quote or backtick is a string'

Ein boolescher Wert ist entweder Wahr oder Falsch. Jeder Vergleich ergibt einen booleschen Wert, der entweder wahr oder falsch ist.

Ein boolescher Datentyp ist entweder ein wahrer oder ein falscher Wert.

Beispiel:

true // wenn das Licht an ist, ist der Wert true
false // wenn das Licht aus ist, ist der Wert false

Wenn wir in JavaScript einer Variablen keinen Wert zuweisen, ist der Wert undefiniert. Wenn eine Funktion nichts zurückgibt, ist der Wert außerdem undefiniert.

let vorname
console.log(vorname) // undefiniert, da noch kein Wert zugewiesen ist

Null in JavaScript means an empty value.

let emptyValue = null

Um den Datentyp einer bestimmten Variablen zu überprüfen, verwenden wir den Operator typeof. Siehe das folgende Beispiel.

console.log(typeof 'Asabeneh') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined

Denken Sie daran, dass die Kommentierung in JavaScript ähnlich wie in anderen Programmiersprachen ist. Kommentare sind wichtig, um Ihren Code besser lesbar zu machen. Es gibt zwei Arten des Kommentierens:

• Einzeilige Kommentierung
• Multiline commenting

// Kommentierung des Codes selbst mit einem einzelnen Kommentar
// let vorname = 'Asabeneh'; einzeiliger Kommentar
// let nachname = 'Yetayeh'; einzeiliger Kommentar

Mehrzeilige Kommentierung:

/*
  let location = 'Helsinki';
  let age = 100;
  let isMarried = true;
  Dies ist ein mehrzeiliger Kommentar
*/

Variablen sind Behälter für Daten. Variablen werden verwendet, um Daten an einem Speicherplatz zu speichern. Wenn eine Variable deklariert wird, wird ein Speicherplatz reserviert. Wenn einer Variablen ein Wert (Daten) zugewiesen wird, wird der Speicherplatz mit diesen Daten gefüllt. Um eine Variable zu deklarieren, verwenden wir die Schlüsselwörter var, let oder const.

Für eine Variable, die sich zu einem anderen Zeitpunkt ändert, verwenden wir let. Wenn sich die Daten überhaupt nicht ändern, verwenden wir const. Zum Beispiel ändern sich PI, der Name des Landes und die Schwerkraft nicht, und wir können const verwenden. Wir werden var in dieser Aufgabe nicht verwenden und ich empfehle Ihnen auch nicht, es zu verwenden. Es ist eine fehleranfällige Art, Variablen zu deklarieren, und hat viele Lecks. Wir werden mehr über var, let und const im Detail in anderen Abschnitten (scope) sprechen. Für den Moment ist die obige Erklärung ausreichend.

Ein gültiger JavaScript-Variablenname muss die folgenden Regeln befolgen:

• Ein JavaScript-Variablenname darf nicht mit einer Zahl beginnen.
• Ein JavaScript-Variablenname darf keine Sonderzeichen außer Dollarzeichen und Unterstrich enthalten.
• Ein JavaScript-Variablenname folgt einer camelCase-Konvention.
• Ein JavaScript-Variablenname sollte keine Leerzeichen zwischen den Wörtern enthalten.

Im Folgenden finden Sie Beispiele für gültige JavaScript-Variablen.

firstName
lastName
country
city
capitalCity
age
isMarried

first_name
last_name
is_married
capital_city

num1
num_1
_num_1
$num1
year2020
year_2020

Die erste und zweite Variable in der Liste entspricht der camelCase-Konvention für die Deklaration in JavaScript. In diesem Material werden wir CamelCase-Variablen (CamelWithOneHump) verwenden. Wir verwenden CamelCase(CamelWithTwoHump), um Klassen zu deklarieren, wir werden über Klassen und Objekte in einem anderen Abschnitt diskutieren.

Beispiel für ungültige Variablen:

  first-name
  1_num
  num_#_1

Lassen Sie uns Variablen mit verschiedenen Datentypen deklarieren. Um eine Variable zu deklarieren, müssen wir das Schlüsselwort let oder const vor dem Variablennamen verwenden. Nach dem Variablennamen schreiben wir ein Gleichheitszeichen (Zuweisungsoperator) und einen Wert (zugewiesene Daten).

// Syntax
let nameOfVariable = value

Der NameOfVriable ist der Name, der verschiedene Daten des Wertes speichert. Siehe unten für detaillierte Beispiele.

Beispiele für deklarierte Variablen

// Deklaration verschiedener Variablen mit unterschiedlichen Datentypen
let firstName = 'Asabeneh' // Vorname einer Person
let lastName = 'Yetayeh' // Nachname einer Person
let country = 'Finnland' // Land
let city = 'Helsinki' // Hauptstadt
let age = 100 // Alter in Jahren
let isMarried = true

console.log(firstName, lastName, country, city, age, isMarried)

Asabeneh Yetayeh Finland Helsinki 100 true

// Declaring variables with number values
let age = 100 // age in years
const gravity = 9.81 // earth gravity  in m/s2
const boilingPoint = 100 // water boiling point, temperature in °C
const PI = 3.14 // geometrical constant
console.log(gravity, boilingPoint, PI)

9.81 100 3.14

// Variablen können auch in einer Zeile durch Komma getrennt deklariert werden, ich empfehle jedoch eine separate Zeile, um den Code besser lesbar zu machen
let name = 'Asabeneh', job = 'teacher', live = 'Finland'
console.log(name, job, live)

Asabeneh teacher Finland

Wenn Sie die Datei index.html im Ordner 01-Day aufrufen, sollten Sie Folgendes erhalten:

🌕 Du bist großartig! Du hast soeben Tag 1 der Herausforderung bestanden und bist auf dem Weg zur Größe. Mach jetzt ein paar Übungen für dein Gehirn und deine Muskeln.

1. Schreiben Sie einen einzeiligen Kommentar, der besagt, Kommentare können Code lesbar machen.

2. Schreiben Sie einen weiteren einzeiligen Kommentar, der besagt, Willkommen bei 30DaysOfJavaScript

3. Schreibe einen mehrzeiligen Kommentar, der besagt, Kommentare können den Code lesbar, einfach wiederverwendbar und informativ

4. Erstellen Sie eine variable.js-Datei und deklarieren Sie Variablen und weisen Sie die Datentypen string, boolean, undefined und null zu.

5. Erstellen Sie die Datei datatypes.js und verwenden Sie den JavaScript-Operator typeof, um verschiedene Datentypen zu überprüfen. Prüfen Sie den Datentyp jeder Variablen

6. Deklaration von vier Variablen ohne Zuweisung von Werten

7. Deklarieren Sie vier Variablen mit zugewiesenen Werten

8. Deklarieren Sie Variablen, um Ihren Vornamen, Nachnamen, Familienstand, Land und Alter in mehreren Zeilen zu speichern

9. Deklarieren Sie Variablen zum Speichern Ihres Vornamens, Nachnamens, Familienstandes, Landes und Alters in einer einzigen Zeile

10. Deklarieren Sie zwei Variablen myAge und yourAge und weisen Sie ihnen Anfangswerte zu und protokollieren Sie sie in der Browserkonsole.

I am 25 years old.
You are 30 years old.

🎉 CONGRATULATIONS ! 🎉

Day 2 >>