Was ist JavaScript und wie funktioniert es?

Werbung

JavaScript ist zu einem festen Bestandteil der modernen Webentwicklung geworden. Diese leistungsstarke Sprache hat sich zu einem unverzichtbaren Werkzeug entwickelt, das jeder Webentwickler verstehen kann.

JavaScript verfügt über spezielle Funktionen, die es von herkömmlichen Programmiersprachen unterscheiden. Wir werden untersuchen, was es ist, wie es funktioniert und was Sie damit machen können. Lassen Sie es uns zusammenfassen.

Was ist JavaScript?

JavaScript ist eine Skriptsprache für das Web. Es ist eine interpretierte Sprache, was bedeutet, dass kein Compiler erforderlich ist, um seinen Code wie C oder C ++ zu übersetzen. JavaScript-Code wird direkt in einem Webbrowser ausgeführt.

Die neueste Version der Sprache ist ECMAScript 2018, das im Juni 2018 veröffentlicht wurde.

JavaScript arbeitet mit HTML und CSS, um Webanwendungen oder Webseiten zu erstellen. JavaScript wird von den meisten modernen Webbrowsern wie Google Chrome, Firefox, Safari, Microsoft Edge, Opera usw. unterstützt. Die meisten mobilen Browser für Android und iPhone unterstützen jetzt auch JavaScript.

JavaScript steuert die dynamischen Elemente von Webseiten. Es funktioniert in Webbrowsern und in jüngerer Zeit auch auf Webservern. Application Programming Interfaces (API) werden auch von JavaScript unterstützt, wodurch Sie mehr Funktionen erhalten.

Das Verständnis der Funktionsweise von JavaScript ist etwas einfacher, wenn Sie verstehen, wie Webprogrammierung funktioniert. Lassen Sie uns also mehr erfahren.

Web App-Bausteine

Es gibt drei Komponenten, die Websites und Apps erstellen: HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) und JavaScript. Jeder hat eine Rolle beim Erstellen einer Web-App.

• HTML ist eine Auszeichnungssprache, die das Grundgerüst der Webseite erstellt. Alle Absätze, Abschnitte, Bilder, Überschriften und Texte sind in HTML geschrieben. Der Inhalt wird auf der Website in der Reihenfolge angezeigt, in der er in HTML geschrieben ist.
• CSS steuert den Stil und die zusätzlichen Aspekte des Layouts. CSS wird verwendet, um das Design der Website zu erstellen und die Farben, Schriftarten, Spalten, Rahmen usw. zu erstellen. Die Website reicht von einfachen Textelementen bis hin zu farbenfrohen Designs.
• Das dritte Element ist JavaScript. HTML und CSS erstellen die Struktur, aber von dort aus tun sie nichts. JavaScript erzeugt dynamische Aktivitäten in Ihrer App. Skripterstellung in JavaScript steuert Funktionen beim Klicken auf Schaltflächen, die Authentifizierung von Kennwortformularen und die Steuerung von Medien.

Alle drei Teile arbeiten im Einklang miteinander, um umfassende Apps zu erstellen. Es wäre eine gute Idee zu Erfahren Sie mehr über HTML und CSS Lernen Sie HTML und CSS mit diesen Schritt-für-Schritt-AnleitungenNeugierig auf HTML, CSS und JavaScript? Wenn Sie der Meinung sind, dass Sie ein Händchen dafür haben, wie man Websites von Grund auf neu erstellt, finden Sie hier einige großartige Schritt-für-Schritt-Anleitungen, die es wert sind, ausprobiert zu werden. Weiterlesen wenn Sie sich mit ihnen nicht ganz wohl fühlen.

Wie funktioniert JavaScript?

Bevor Sie JavaScript schreiben, ist es wichtig zu wissen, wie es unter der Haube funktioniert. Es gibt zwei wichtige Informationen: Die Funktionsweise des Webbrowsers und das Document Object Model (DOM).

Der Webbrowser lädt eine Webseite, analysiert den HTML-Code und erstellt aus dem Inhalt ein sogenanntes Document Object Model (DOM). Das DOM zeigt Ihrem JavaScript-Code eine Live-Ansicht der Webseite.

Der Browser greift dann auf alles zu, was mit dem HTML verknüpft ist, wie Bilder und CSS-Dateien. Die CSS-Informationen stammen vom CSS-Parser.

HTML und CSS werden vom DOM zusammengestellt, um zuerst die Webseite zu erstellen. Anschließend lädt die JavaScript-Engine des Browsers JavaScript-Dateien und Inline-Code, führt den Code jedoch nicht sofort aus. Es wartet darauf, dass HTML und CSS vollständig geladen werden.

Sobald dies erledigt ist, wird das JavaScript in der Reihenfolge ausgeführt, in der der Code geschrieben wurde. Dies führt dazu, dass das DOM durch JavaScript-Code aktualisiert und vom Browser gerendert wird.

Die Reihenfolge hier ist wichtig. Wenn das JavaScript nicht auf den Abschluss von HTML und CSS warten würde, könnte es die DOM-Elemente nicht ändern.

Was kann ich mit JavaScript tun?

JavaScript ist eine vollwertige Programmiersprache, die die meisten Aufgaben einer normalen Sprache wie Python ausführen kann. Diese beinhalten:

• Variablen deklarieren Deklarieren von Variablen in JavaScriptUm mit JavaScript zu beginnen, müssen Sie Variablen verstehen. Hier sind drei Möglichkeiten, Variablen in JavaScript zu deklarieren. Weiterlesen .
• Speichern und Abrufen von Werten.
• Funktionen definieren und aufrufen, einschließlich Pfeilfunktionen.
• Definieren von JavaScript-Objekten und -Klassen.
• Laden und Verwenden externer Module.
• Schreiben von Ereignishandlern, die auf Klickereignisse reagieren.
• Servercode schreiben.
• Und vieles mehr.

Warnung: Schon seit JavaScript ist eine so mächtige Sprache JavaScript und Webentwicklung: Verwenden des DokumentobjektmodellsDieser Artikel führt Sie in das Dokumentenskelett ein, mit dem JavaScript arbeitet. Mit Kenntnissen dieses abstrakten Dokumentobjektmodells können Sie JavaScript schreiben, das auf jeder Webseite funktioniert. Weiterlesen Es ist auch möglich, Malware, Viren und Browser-Hacks zu schreiben, um sie den Benutzern zuzufügen. Diese reichen vom Diebstahl von Browser-Cookies, Passwörtern, Kreditkarten bis zum Herunterladen von Viren auf Ihren Computer.

Verwenden von JavaScript

Schauen wir uns einige JavaScript-Grundlagen mit Codebeispielen an.

Variablen deklarieren

JavaScript wird dynamisch typisiert, dh Sie müssen den Typ Ihrer Variablen in Ihrem Code nicht deklarieren.

sei num = 5; let myString = "Hallo"; var InterestRate = 0,25; 

Betreiber

Zusatz

12 + 5. >> 17. 

Subtraktion

20 - 8. >> 12. 

Multiplikation

5 * 2. >> 10. 

Einteilung

50 / 2. >> 25. 

Modul

45 % 4. >> 1. 

Arrays

let myArray = [1,2,4,5]; let stringArray = ["Hallo", "Welt"]; 

Funktionen

JavaScript kann Funktionen schreiben. Hier ist eine einfache Funktion, die Zahlen hinzufügt.

Funktion addNumbers (num1, num2) { return num1 + num2; } >> addNumbers (10,5); >> 15.

Schleifen

JavaScript kann Schleifen für die Iteration ausführen, wie z für Schleifen und while-Schleifen.

für (sei i = 0; i <3; i ++) {console.log ("echo!"); } >> echo! >> Echo! >> Echo! 

sei i = 0; while (i <3) {console.log ("echo!"); i ++; } >> echo! >> Echo! >> Echo! 

Bemerkungen

// Einen Kommentar schreiben. 

/ * Einen mehrzeiligen Kommentar schreiben. Sie können so viele Zeilen verwenden, wie Sie möchten. um Text aufzubrechen und Kommentare lesbarer zu machen. */

In einer Webseite

Die häufigste Methode zum Laden von JavaScript auf einer Webseite ist die Verwendung von Skript HTML-Tag. Abhängig von Ihren Anforderungen können Sie eine der folgenden Methoden verwenden.

• Laden Sie eine externe JavaScript-Datei wie folgt in eine Webseite:
• Sie können die vollständige URL wie folgt angeben, wenn das Javascript von einer anderen Domain als der Webseite stammt:
• JavaScript kann direkt in den HTML-Code eingebettet werden. Hier ist ein.

Abgesehen von diesen Methoden gibt es Möglichkeiten, JavaScript-Code bei Bedarf zu laden. Tatsächlich gibt es Frameworks zum Laden und Ausführen von JavaScript-Modulen mit geeigneten Abhängigkeiten, die zur Laufzeit aufgelöst werden.

Dies sind fortgeschrittenere Themen. Im Moment lernen Sie die Grundlagen.

Beispiel für JavaScript-Codefragmente

Hier sind einige einfache JavaScript-Codebeispiele, um zu veranschaulichen, wie es auf Webseiten verwendet wird. Dies sind Beispiele für Code, der mit dem DOM funktioniert.

• Im Folgenden werden alle ausgewählt Fett gedruckt Elemente im Dokument und setzt die Farbe des ersten auf rot.

  var elems = document.getElementsByTagName ('b'); elems [0] .style.color = 'rot'; 

• Möchten Sie das Bild in einem ändern img Etikett? Im Folgenden wird ein Ereignishandler für das zugeordnet klicken Ereignis einer Taste.

  Bild ändern

• Aktualisieren Sie den Textinhalt eines Absatzes (p) Element? Stellen Sie die innerHTML Eigenschaft des Elements wie gezeigt:

  Hallo Welt
  Klick mich

Diese Codebeispiele bieten nur einen Einblick in die Möglichkeiten, die Sie mit JavaScript auf Ihrer Webseite haben. Es gibt Viele Tutorials, die Ihnen das Codieren beibringen können Werbegeschenk: Lernen Sie das Codieren mit 27 Stunden Video-TutorialsDas Ultimate Coding Bundle, das fünf Videokurse und 27 Stunden Premium-Unterricht umfasst, ist derzeit KOSTENLOS. Weiterlesen um Ihnen den Einstieg zu erleichtern. Sie können es auf jeder Webseite ausprobieren, auch auf dieser! Öffnen Sie Ihre Konsole und probieren Sie JavaScript-Code aus.

Jetzt wissen Sie, was JavaScript tut

Hoffentlich hat diese Einführung einige Einblicke in JavaScript gebracht und Sie für die Webprogrammierung begeistert. Sie können alles in rekapitulieren unser handliches JavaScript-Spickzettel Das ultimative JavaScript-SpickzettelHolen Sie sich mit diesem Spickzettel eine kurze Auffrischung zu JavaScript-Elementen. Weiterlesen . Es gibt viel mehr über JavaScript zu lernen. Wenn Sie sich wohler fühlen, versuchen Sie es doch einmal Erfahren Sie, wie Sie das Dokumentobjektmodell verwenden? Sie könnten auch sein Interesse an TypeScript Was ist TypeScript und warum sollten Entwickler es versuchen?Finden Sie es schwierig, JavaScript anzupassen, nachdem Sie eine andere Programmiersprache gelernt haben? Hier erfahren Sie, wie TypeScript Ihnen beim Wechsel helfen kann. Weiterlesen .