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


Eine JavaScript-Funktion ist ein Codeblock, der zur Ausführung einer bestimmten Aufgabe entwickelt wurde.

Eine JavaScript-Funktion wird ausgeführt, wenn „etwas“ sie aufruft (aufruft).


Beispiel

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}

JavaScript-Funktionssyntax

Eine JavaScript-Funktion wird mit dem functionSchlüsselwort definiert, gefolgt von einem Namen , gefolgt von Klammern () .

Funktionsnamen können Buchstaben, Ziffern, Unterstriche und Dollarzeichen enthalten (dieselben Regeln wie bei Variablen).

Die Klammern können durch Kommas getrennte Parameternamen enthalten:
( parameter1, parameter2, ... )

Der von der Funktion auszuführende Code steht in geschweiften Klammern: {}

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

Funktionsparameter sind innerhalb der Klammern () in der Funktionsdefinition aufgeführt.

Funktionsargumente sind die Werte, die von der Funktion empfangen werden, wenn sie aufgerufen wird.

Innerhalb der Funktion verhalten sich die Argumente (die Parameter) wie lokale Variablen.

Eine Funktion ist in anderen Programmiersprachen weitgehend dasselbe wie eine Prozedur oder eine Subroutine.


Funktionsaufruf

Der Code innerhalb der Funktion wird ausgeführt, wenn "etwas" die Funktion aufruft (aufruft):

  • Wenn ein Ereignis eintritt (wenn ein Benutzer auf eine Schaltfläche klickt)
  • Wenn es vom JavaScript-Code aufgerufen (aufgerufen) wird
  • Automatisch (selbst aufgerufen)

Später in diesem Tutorial erfahren Sie noch viel mehr über Funktionsaufrufe.



Funktion zurück

Wenn JavaScript eine returnAnweisung erreicht, stoppt die Ausführung der Funktion.

Wenn die Funktion von einer Anweisung aufgerufen wurde, kehrt JavaScript zurück, um den Code nach der aufrufenden Anweisung auszuführen.

Funktionen berechnen oft einen Rückgabewert . Der Rückgabewert wird an den "Aufrufer" "zurückgesendet":

Beispiel

Berechnen Sie das Produkt zweier Zahlen und geben Sie das Ergebnis zurück:

let x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

Das Ergebnis in x ist:

12

Warum Funktionen?

Sie können Code wiederverwenden: Definieren Sie den Code einmal und verwenden Sie ihn viele Male.

Sie können denselben Code viele Male mit unterschiedlichen Argumenten verwenden, um unterschiedliche Ergebnisse zu erzielen.

Beispiel

Fahrenheit in Celsius umrechnen:

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

Der ()-Operator ruft die Funktion auf

Unter Verwendung des obigen Beispiels toCelsiusbezieht sich auf das Funktionsobjekt und toCelsius()auf das Funktionsergebnis.

Der Zugriff auf eine Funktion ohne () gibt das Funktionsobjekt anstelle des Funktionsergebnisses zurück.

Beispiel

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Als Variablenwerte verwendete Funktionen

Funktionen können in allen Arten von Formeln, Zuweisungen und Berechnungen genauso verwendet werden wie Variablen.

Beispiel

Anstatt eine Variable zu verwenden, um den Rückgabewert einer Funktion zu speichern:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

Sie können die Funktion direkt als Variablenwert verwenden:

let text = "The temperature is " + toCelsius(77) + " Celsius";

Sie werden später in diesem Tutorial noch viel mehr über Funktionen erfahren.


Lokale Variablen

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

Auf lokale Variablen kann nur innerhalb der Funktion zugegriffen werden.

Beispiel

// code here can NOT use carName

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

// code here can NOT use carName

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.


Testen Sie sich mit Übungen

Übung:

Führen Sie die Funktion mit dem Namen aus myFunction.

function myFunction() {
  alert("Hello World!");
}
;