Javascript-Tutorial: Hallo Welt

Dieses Tutorial hilft Ihnen, mit JavaScript zu beginnen. Es erklärt, was Sie benötigen, um Ihr erstes JavaScript-Programm zu schreiben. Es beginnt mit den Grundlagen: Sie lernen, wo Sie die benötigten Tools finden und herunterladen können, wie Sie diese Tools installieren, und es führt Sie bis zum Erstellen und Ausführen Ihres Codes. Wenn Sie noch nie ein JavaScript-Programm geschrieben haben, ist dies der richtige Ort, um zu beginnen. Wir haben diesen Artikel erstellt, damit Sie mit JavaScript beginnen und zu unseren SMS-Beispielen übergehen können. Wenn Sie bereits mit JavaScript vertraut sind, können Sie direkt zu einem der folgenden SMS-Projekte springen.

Javascript-SMS-Beispiele:

Javascript: SMS mit der HTTP-REST-API senden (Codebeispiel)
Javascript: Mehrere SMS mit der HTTP-REST-API senden (Codebeispiel)
Javascript: SMS mit der HTTP-REST-API planen (Codebeispiel)
Javascript: SMS mit der HTTP-REST-API empfangen (Codebeispiel)
Javascript: SMS mit der HTTP-REST-API löschen (Codebeispiel)
Laden Sie die neueste JavaScript-SMS-API-Bibliothek von Github herunter

Was ist HTML

Hypertext Markup Language (HTML) ist ein Werkzeug, um die Struktur einer Website zu definieren. HTML ist die Standard-Auszeichnungssprache für die Erstellung von Webseiten. Hand in Hand mit CSS sorgen sie dafür, dass Websites so aussehen, wie sie sind. HTML besteht aus einer Reihe von Elementen, die dem Browser mitteilen, wie der Inhalt angezeigt werden soll. In diesem Tutorial verwenden wir es, um die "Hallo Welt"-Nachricht anzuzeigen.

Was ist Javascript

JavaScript ist eine Skript-Programmiersprache. Sie ähnelt einer natürlichen Sprache wie Englisch. Sie wird verwendet, um mit einem Computer zu kommunizieren. Der Hauptunterschied zwischen einer natürlichen Sprache und einer Programmiersprache besteht darin, dass Programmiersprachen eine strengere Struktur haben, um dem Computer das Verständnis zu erleichtern. In diesem Tutorial verwenden wir JavaScript-Code, um die "Hallo Welt"-Nachricht auszugeben.

Was ist ein Webserver

Der Begriff Webserver kann sich auf Hardware oder Software oder auf beide beziehen, die zusammenarbeiten. Auf der Hardware-Seite ist ein Webserver ein Computer, der verwendet wird, um Webclients zu bedienen. Auf der Software-Seite laufen auf den Webservern PHP-Codes, die die HTTP-Anfragen der Webclients verarbeiten.

Was ist ein Webbrowser

Ein Webbrowser ist eine Anwendung zum Zugriff auf das World Wide Web. Wenn ein Benutzer eine Webseite von einer bestimmten Website anfordert, ruft der Webbrowser die erforderlichen Inhalte von einem Webserver ab und zeigt die Seite dann auf dem Gerät des Benutzers an. Es funktioniert so, dass der Benutzer HTTP-Anfragen an die Webserver stellen kann. Mit einem Webbrowser können wir auf den Webserver zugreifen, indem wir seine IP-Adresse oder seine Domain in das URL-Feld eingeben.

Was ist WAMP

WampServer bezieht sich auf eine Lösungsumgebung für das Microsoft Windows-Betriebssystem, die aus dem Apache-Webserver, OpenSSL für SSL-Unterstützung, der MySQL-Datenbank und der PHP-Programmiersprache besteht. WAMP fungiert wie ein virtueller Server auf Ihrem Computer. Es ermöglicht Ihnen, alle Webfunktionen ohne Konsequenzen zu testen, da es auf Ihrem Computer lokalisiert ist und nicht mit dem Web verbunden ist. Wir werden es verwenden, um unsere HTML-Website lokal zu hosten.

Wie Sie Ihr erstes Programm in Javascript schreiben

So schreiben Sie Ihr erstes Programm in Javascript:

1. Installieren Sie WAMP auf Ihrem Computer
2. Richten Sie den WAMP-Server ein
3. Erstellen Sie eine neue index.html-Datei
4. Verfassen Sie Ihr erstes HTML-Dokument
5. Schreiben Sie Ihren ersten Javascript-Code in die .html-Datei
6. Führen Sie Ihr erstes Javascript-Programm aus
7. Öffnen Sie den Inspect-Modus für Fehlermeldungen
8. Beheben Sie den Fehler

Voraussetzungen

• Windows 10-Computer
• WAMP-Umgebung
• Chrome-Browser
• HTML-Hallo-Welt-Beispiel
• Javascript-Hallo-Welt-Beispiel

WAMP herunterladen

In diesem Video werden wir den WAMP-Server herunterladen. Dies ist die Software, die wir verwenden werden, um unseren Javascript-Code zu hosten. Zuerst müssen Sie https://wampserver.com besuchen und den WampServer-Installer herunterladen (Video 1). Nachdem der Download abgeschlossen ist, befindet sich der Installer im Download-Verzeichnis Ihres Browsers. Das Öffnen dieser exe-Datei startet den Installationsprozess für den WAMP-Server.

WampServer herunterladen

Beginnen Sie, indem Sie https://wampserver.com in Ihrem Browser aufrufen. Klicken Sie oben auf die Schaltfläche Download, um automatisch zum Download-Bereich zu scrollen. Klicken Sie auf WAMPSERVER 64 BITS (X64), um den WampServer-Installer auf Ihren Computer herunterzuladen (Abbildung 1).

WAMP installieren

Der nächste Schritt nach dem Herunterladen von WampServer ist die Installation. Dieses Video zeigt Ihnen, wie Sie den Setup erfolgreich abschließen können. Öffnen Sie den Installer, konfigurieren Sie die Installationsdetails und warten Sie, bis der Prozess abgeschlossen ist (Video 2). Wenn Sie WAMP Server installiert haben, wird er automatisch gestartet. Jetzt, da WAMP Server läuft, können Sie mit dem Programmieren in Javascript beginnen.

Schreiben und laden Sie Ihre erste HTML-Seite herunter

Um Ihr erstes HTML-Dokument zu schreiben, sollten Sie eine neue index.html-Datei im \www\-Ordner des WampServers erstellen.
Pfad: C:\wamp64\www\

<!DOCTYPE html>
<html>
	<head>
		<title>Hallo Welt!</title>
	</head>
	<body>
		<h1 id="text">Hallo Welt!</h1>
	</body>
</html>
	

Schreiben Sie Ihr erstes HTML-Dokument

Dieses Video zeigt Ihnen, wie Sie ein HTML-Dokument erstellen können (Video 3). Wir werden dieses Dokument später lokal hosten. Da wir einen WampServer auf unserem Computer betreiben, können wir unsere Dateien unter der URL http://localhost/ ansehen. Dazu sollten Sie Ihre HTML-Datei im \www\-Ordner erstellen oder ablegen.
Pfad: C:\wamp64\www\

Schreiben und führen Sie Ihr erstes Javascript-Programm aus

In diesem Beispiel werden wir den Text im <h1>-Tag mit der ID "text" ersetzen. Dazu verwenden wir den integrierten JavaScript-Query-Selector. Das mag kompliziert erscheinen, ist aber einfach. Wir werden das Element mit der ID "text" auswählen und dessen innerText-Attribut (für unser Element ist das wie eine Eigenschaft einer Person) auf den Text "Hallo Ozeki!" setzen.

/*Dieser JavaScript-Code ersetzt den Text im Tag
mit der ID "text".*/
document.getElementById("text").innerText = "Hallo Ozeki!";
	

Schreiben und führen Sie Ihren JavaScript-Code aus

Dieses Video zeigt, wie Sie JavaScript-Code schreiben und in Ihrem Browser ausführen können (Video 4). Der Befehl selbst, der die Nachricht anzeigt, muss in Script-Tags stehen. Diese Tags zeigen an, dass dieses Stück JavaScript-Code hier ausgeführt werden soll. Der Code selbst ist eine Funktion, die "Hallo Ozeki" als Argument enthält. Nachdem Sie Ihren Code geschrieben und gespeichert haben, können Sie ihn in Ihrem Browser ausführen.

Fügen Sie einen Fehler in den JavaScript-Code ein

Wenn wir einen Fehler in unserem JavaScript-Code machen, können wir unsere Fehler im Browser-Inspektionsmodus ansehen. Dazu sollten wir mit der rechten Maustaste klicken und Untersuchen aus dem Menü auswählen. Oder wir können einfach (Strg + Umschalt + I) drücken. Dort wählen wir die Konsole aus, und alle Fehler werden angezeigt.

Was ist ein Syntaxfehler?

Syntaxfehler bedeutet "Ich verstehe nicht". Wenn Sie mit jemandem auf Englisch sprechen und er nicht versteht, was Sie sagen, wird er antworten: "Ich verstehe nicht". Wenn Sie mit einem Computer in JavaScript sprechen und der Computer nicht versteht, was Sie sagen, wird er mit "Syntaxfehler" antworten.

Wie geht man mit einem Syntaxfehler in JavaScript um?

Im folgenden Code werden wir absichtlich einen Syntaxfehler erzeugen, indem wir kein Semikolon nach der "Hallo Welt"-Zeile setzen. Sie werden sehen, wie der Computer reagiert, wie wir den Fehler beheben und wie wir das Computerprogramm erfolgreich ausführen.

Beheben Sie den Fehler in Ihrem JavaScript-Code

Dieses Video zeigt Ihnen, wie Sie mit dem Inspektionsmodus Ihres Browsers überprüfen können, ob ein Fehler in Ihrem Code vorliegt. Dies ist eine unglaublich hilfreiche Funktion, um Ihnen bei der Fehlerbehebung zu helfen (Video 5). Die Debug-Konsole im Inspektionsmodus zeigt Fehlermeldungen an, die darauf hinweisen, was schiefgelaufen ist. Sie können auf den Index dieser Fehlermeldungen klicken, um die genaue Codezeile hervorzuheben, die den Fehler verursacht hat.

Zusammenfassung

Der obige Artikel handelt davon, was Sie in Ihr erstes JavaScript-Programm schreiben müssen, nämlich einen "Hallo Welt"-Beispielcode. Dieses Programm mag einfach erscheinen und nicht viel tun, aber so beginnen große Dinge; indem Sie dieser Anleitung folgen, haben Sie Ihren ersten Schritt zum JavaScript-Entwickler gemacht. Zu wissen, wie man in JavaScript programmiert und Programme als Lösung für Ihre Probleme erstellt, wird Ihnen sehr helfen, die Arbeit reibungsloser zu gestalten.

Was Sie hier gelernt haben, ist wertvoll, es gibt weitere nützliche Anleitungen auf der Ozeki-Website, gehen Sie es an! Fahren wir mit dem nächsten Artikel zu diesem Thema fort: Wie Sie SMS von JavaScript aus senden.

Laden Sie jetzt das Ozeki SMS Gateway herunter und legen Sie los!