JavaScript

 // Voorbeeld JavaScript
functie halloWereld () {
	waarschuwing ( 'Hallo wereld' );
}
venster . onload = halloWereld ;

JavaScript (kortweg JS ) is een scripttaal die oorspronkelijk door Netscape in 1995 is ontwikkeld voor dynamische HTML in webbrowsers om gebruikersinteracties te evalueren, inhoud te wijzigen, opnieuw te laden of te genereren en zo de mogelijkheden van HTML en CSS uit te breiden. ^[3] Tegenwoordig wordt JavaScript ook buiten browsers gebruikt, bijvoorbeeld op servers en in microcontrollers. ^{[4] [5]}

De huidige naam van de taal die oorspronkelijk LiveScript heette, is in 1996 ontstaan ​​uit een samenwerking tussen Netscape en Sun Microsystems . Hun Java-applets , gemaakt met de programmeertaal Java , eveneens gepubliceerd in 1995, werden met behulp van LiveScript in Netscape Navigator geïntegreerd. Om te profiteren van de populariteit van Java, werd LiveScript omgedoopt tot JavaScript, hoewel de twee talen onafhankelijk van elkaar zijn ontwikkeld en totaal verschillende basisconcepten hebben.

De taalkern van JavaScript, gestandaardiseerd als ECMAScript ( ECMA 262), beschrijft een dynamisch getypte , objectgeoriënteerde , maar klasseloze scripttaal. Het doet recht aan alle objectgeoriënteerde programmeerparadigma's, onder meer op basis van prototypes , waarvan de declaratie mogelijk wordt gemaakt vanuit ECMAScript 6 met een syntaxis vergelijkbaar met die in class-based programmeertalen. JavaScript kan naar behoefte objectgeoriënteerd , procedureel of functioneel worden geprogrammeerd. ^[6]

ontwikkeling

JavaScript- syntaxis is vergelijkbaar met C- afstammelingen. Ondanks de naam en syntactische gelijkenis heeft JavaScript weinig gemeen met Java . In JavaScript wordt overerving bijvoorbeeld niet ondersteund door klassen , maar door prototypes .

In het verleden werd JavaScript vooral aan de clientzijde gebruikt. JavaScript of de ECMAScript-implementaties, bijvoorbeeld met het framework Node.js ^[7] en als JScript of JScript .NET in een ASP- of ASP.NET- omgeving op Microsoft Internet Information Services maken ook server-side applicaties mogelijk. Andere voorbeelden van JavaScript-programmering aan de serverzijde zijn POW en Jaxer, die zijn gebaseerd op de Mozilla JavaScript-engine SpiderMonkey , V8CGI, die is gebaseerd op de JavaScript-implementatie V8 en is geïntegreerd in de Apache HTTP-server , en QML , een uitgebreide vorm van JavaScript voor tekenoppervlakken en animaties.

De taal wordt ook gebruikt als scripttaal voor games en applicatieprogramma 's, aangezien de taalkern slechts enkele objecten bevat en de interpreter die nodig is om scripts die in JavaScript zijn geformuleerd uit te voeren, daarom relatief klein kan worden gehouden.

Bovendien wordt JavaScript gebruikt als de lingua franca in de MongoDB- database en in microcontrollers. ^{[4] [5]}

gebruik maken van

Typische toepassingsgebieden

Typische toepassingsgebieden van JavaScript in de webbrowser zijn:

• dynamische manipulatie van websites met behulp van het Document Object Model
• Plausibiliteitscontrole ( gegevensvalidatie ) van formulierinvoer vóór verzending naar de server
• Weergave van dialoogvensters
• Gegevens verzenden en ontvangen zonder dat de browser de pagina opnieuw hoeft te laden ( Ajax )
• Zoektermen voorstellen terwijl u typt
• Reclamebanners of ticker
• Verduistering van e-mailadres om spam tegen te gaan
• Wijzig meerdere frames tegelijk of verwijder de pagina uit de frameset
• Lees- en schrijftoegang tot cookies en de webopslag in de browser

misbruik

Sommige toepassingen die mogelijk zijn met JavaScript werken deels tegen de wensen van de gebruiker in of zijn in tegenspraak met het principe van de minste verrassing . Sommige browsers bieden daarom functies aan die dergelijke JavaScript-functies onderdrukken.

Voorbeelden:

Opmerking in de Firefox-browser voor veel dialoogvensters

• Verhulling van internetadressen waarnaar een link verwijst
• Het contextmenu deactiveren om het moeilijker te maken om afbeeldingen of de hele pagina op te slaan
• De kopieerfunctie uitschakelen om het kopiëren van tekst of afbeeldingen moeilijker te maken
• Ongevraagde (reclame) pop-ups of pop-unders of opeenvolgende dialoogvensters die de gebruiker hinderen
• Onbedoeld sluiten van het browservenster
• Onbedoeld formaat wijzigen van het browservenster
• Barrièrevrije websites worden gekenmerkt door het feit dat ze zoveel mogelijk onbeperkt kunnen worden gebruikt, zelfs als JavaScript is uitgeschakeld. Het gedeactiveerde JavaScript beperkt de bruikbaarheid van een website gedeeltelijk.
• Maatregelen waarmee een gebruiker kan worden herkend wanneer deze een website op een later tijdstip bezoekt, waarbij de beveiligingsinstellingen van de browser worden omzeild (zie anonimiteit op internet )
• Bij kwetsbare webapplicaties kan JavaScript ook misbruikt worden door derden, bijvoorbeeld via XSS (code-injectie).

verhaal

Op 18 september 1995 bracht Netscape de vorige versie van Navigator 2.0 uit, een browser met een ingebouwde scripttaal, die toen LiveScript heette en was ontwikkeld door Brendan Eich . De taal kan onder andere de formulierinvoer van de gebruiker controleren voordat deze wordt verzonden. Op 4 december 1995 kondigden Netscape en Sun Microsystems een samenwerking aan gericht op de directe interactie van LiveScript met Java-applets. Sun ontwikkelde de benodigde Java-klassen, Netscape de LiveConnect- interface en hernoemde de taal naar JavaScript (JavaScript 1.0). ^{[8] [9]} JavaScript is sinds de overname van Sun Microsystems een handelsmerk van Oracle . ^[10]

Met de eerste bètaversie van Navigator 3.0 introduceerde Netscape JavaScript 1.1 op 29 april 1996. In dezelfde versie waren er de innovaties om toegang te krijgen tot afbeeldingen en zogenaamde rollover-graphics te maken . LiveConnect was nu een integraal onderdeel van de browser. Met de bètaversie van Internet Explorer 3 presenteerde Microsoft in mei 1996 zijn eerste JScript-compatibele browser. Dit was het begin van de browseroorlog . ^{[11] [12]}

Met de aankondiging van de Netscape Communicator werd JavaScript 1.2 uitgebracht op 15 oktober 1996; Netscape Communicator 4.0 met JavaScript 1.2 verscheen echter pas op 4 juni 1997. Eveneens in juni 1997 publiceerde de European Computer Manufacturers Association haar standaard ECMA-262 (ECMAScript) , die samen met Netscape was ontwikkeld en bedoeld was om de elementen van een scripttaal. Dit werd de ISO-norm ISO / IEC 16262: 1998 Informatietechnologie - ECMAScript-taalspecificatie in april 1998. Op 1 oktober 1997 kwam Internet Explorer 4 uit, die het taalbereik van JavaScript 1.1 bestreek. Daarnaast werden eigen extensies gepubliceerd die leidden tot verschillen in compatibiliteit tussen Navigator en Internet Explorer en die een DOM-achtige syntax verschaften die het mogelijk maakte om toegang te krijgen tot alle elementen van de website en deze naar wens aan te passen.

De JavaScript-interpreter Rhino , geïmplementeerd in Java, werd vanaf versie 6.0 geleverd als onderdeel van de Java-runtime-omgeving als onderdeel van de Java-runtime-omgeving . ^[13] In juli 1998 werd met de bètaversie van Netscape Communicator 4.5 JavaScript 1.3, die al beschikbaar was in versie 4.06 van Netscape Communicator, gepubliceerd. ^[14] In oktober 1998 introduceerde Netscape JavaScript 1.4. Deze versie was volledig compatibel met ECMA-262. Een browser met ondersteuning voor deze versie verscheen echter niet. ^{[15] [16]} In april 2000 werd de Preview Release 1 van Navigator 6 geleverd met JavaScript 1.5 en DOM Level 1. Op 5 juni 2002 werd Mozilla 1.0 uitgebracht met JavaScript 1.5 (JavaScript-versie 1.5 komt overeen met ECMA-262 versie 3 ), ^[17] op 29 november 2005 Mozilla Firefox 1.5 met JavaScript 1.6 ^[18] , op 12 juli 2006 Mozilla Firefox 2.0b1 met JavaScript 1.7 ^[19] en op 18 december 2007 Mozilla Firefox 3.0b2 met JavaScript 1.8. ^[20]

Versiegeschiedenis van JavaScript

Versiegeschiedenis van ECMAScript (ECMA-262)

De huidige versie is de 2020-versie, die in juni 2020 werd gepubliceerd als "ECMAScript 2020". ^[22] Dit wordt gevolgd door jaarlijkse updates. ^[23] De standaarden zijn ontwikkeld op GitHub. ^[24]

veiligheid

Sandbox-principe

JavaScript wordt in de browser uitgevoerd in een zogenaamde sandbox . Het effect hiervan is dat je in JavaScript alleen toegang hebt tot de objecten van de browser en geen toegang hebt tot het bestandssysteem . Een uitzondering is leestoegang tot een bestand dat door de gebruiker is geselecteerd via het dialoogvenster voor bestandsselectie, gestart met het HTML-element <input type="file"> .

Om beveiligingsproblemen zoals cross-site scripting te voorkomen , wordt elke website of webapplicatie geïsoleerd binnen de browser uitgevoerd en wordt gegevensuitwisseling voorkomen. Zonder deze bescherming zou het mogelijk zijn om aan de ene kant kwaadaardige code uit te voeren die bijvoorbeeld bank- of inloggegevens leest of manipuleert in andere browservensters die tegelijkertijd geopend zijn.

Bepaalde veiligheidsrelevante browserfuncties, zoals het sluiten van het browservenster, het verbergen en weergeven van werkbalken , het wijzigen van de startpagina van de browser, toegang tot het klembord of het uitlezen van de laatst bezochte webpagina's van de gebruiker, worden ook beschermd door verplichte invoer van de gebruiker.

Een script wordt standaard uitgevoerd als een enkele thread in een browser. Wachtloops of lange berekeningen moeten daarom worden vermeden in JavaScript-programma's. Met Worker objecten is het mogelijk om extra threads te maken. ^[40]

JavaScript uitschakelen

In veel JavaScript-compatibele browsers kan JavaScript worden uitgeschakeld of afzonderlijke acties, zoals het wijzigen van de tekst in de statusbalk of het manipuleren van browservensters, worden gedeactiveerd. In sommige browsers kan dit ook worden geautomatiseerd door middel van extensies die JavaScript specifiek voor pagina's met witte en zwarte lijsten activeren en deactiveren . Als gevolg hiervan kunnen ontwikkelaars er niet op vertrouwen dat JavaScript-programma's zich in elke omgeving op dezelfde manier gedragen of helemaal niet werken.

Taalelementen

Gegevenstypen

JavaScript wordt dynamisch getypt . Dit betekent dat de toewijzing van waarden aan variabelen niet onderhevig is aan typegebonden beperkingen. Er zijn echter verschillende extensies voor JavaScript die statisch typen als optie of verplicht vereisen, bijvoorbeeld TypeScript van Microsoft . ^[41]

Vanwege de dynamische typering is het gegevenstype geen eigenschap van een variabele, maar eerder de eigenschap van de huidige waarde (of de eigenschap van een letterlijke ) in relatie tot de runtime. Het datatype van een waarde kan worden bepaald met de unaire operator typeof .

Primitieve gegevenstypen

Primitieve gegevenstypen omvatten waarden voor getallen, tekenreeksen, Booleaanse waarden en symbolen. Strings zijn van het type String ( typeof retourneert "string" ), numerieke waarden van het type Number ( typeof retourneert "number" ), Booleaanse waarden (het Boolean typeof retourneert "boolean" ). Een ander, zij het zelden gebruikt, primitief gegevenstype is symbol , dat als identificatie fungeert (zie ook trefwoord symbol ) ( typeof geeft "symbol" ).

Een speciaal geval is het type Undefined met undefined als de enige waarde ( typeof geeft "undefined" ).

Geen primitieve gegevenstypen

Functies zijn geen primitief type; typeof retourneert "function" . Voor alle andere waarden - inclusief reguliere expressies, arrays en de waarde null - retourneert typeof de tekenreekswaarde "object" . In tegenstelling tot andere programmeertalen zijn er geen echte associatieve arrays in JavaScript. ^[42]

Objecten die zijn gemaakt met de vooraf gedefinieerde constructorfuncties String() , Number() en Boolean() gedragen zich als waarden van de overeenkomstige gegevenstypen - de operator typeof retourneert echter "object" . Dergelijke objecten staan ​​bekend als wrapper-objecten . Er is geen constructorfunctie met dezelfde naam voor het symboolgegevenstype . Het volgende is een voorbeeld van een variabele en het bijbehorende wrapper-object:

 let variabele = "voorbeeldtekst" ;
// De "alert"-functie geeft het resultaat "string" weer in een venster.
alert (typeof variabel);

variabele = nieuwe String ( "voorbeeldtekst" );
alert (typeof variabel); // resulteert in "object"

Omgekeerd worden waarden van de primitieve typen Number , Boolean en String indien nodig automatisch omgezet in objecten van de bijbehorende constructorfunctie:

 let variabele = "voorbeeldtekst" ;
alert ( variabele . lengte ); // resultaten in 12

Controle structuren

JavaScript kent de gebruikelijke besturingsstructuren . Als deze meer dan één instructie moeten bevatten, moet een blok tussen accolades worden gebruikt. Instructies worden afgesloten met een puntkomma. In de meeste gevallen is dit optioneel; de automatische puntkomma-invoeging betekent dat deze meestal automatisch wordt toegevoegd.

if-else (voorwaardelijke verklaring)

 als ( voorwaarde ) {
    instructies ;
} anders {
    instructies ;
}

Afkorting voor voorwaardelijke waardetoewijzingen:

 variabele = toestand ? waardeAlsTrue : waardeAlsFalse ;

schakelbesturingsstructuur:

 schakelaar ( variabele ) {
    case waarde1:
        instructies ;
        breken ;
    case waarde2:
        instructies ;
        breken ;
    standaard :
        instructies ;
}

herhalingslus

 terwijl ( voorwaarde ) {
    instructies ;
}

doe-terwijl lus

 doe {
    instructies ;
} while ( voorwaarde );

for loop

 for ( start-expressie ; voorwaarde ; iteratie- expressie ) {
    instructies ;
}

voor ... in lus

Met deze instructie worden alle eigen en geërfde eigenschappen van een object doorlopen, die het interne attribuut Enumerable hebben. ^[43] Dit attribuut is geïntroduceerd in ECMA Script 5 en is niet ingesteld voor bepaalde ingebouwde eigenschappen (zoals de functie toString van het prototype Object), maar kan meestal door de gebruiker worden ingesteld (en verwijderd). ^[44] De eigenschapsnaam wordt bij elke lusdoorgang toegewezen aan een gespecificeerde variabele.

 for ( laat eigenschapsnaam in object ) {
    instructies ;
}

voor... van lus

Deze besturingsstructuur werkt als een for… in lus, met dit verschil dat de opgegeven variabele niet de eigenschapsnaam krijgt, maar de eigenschapswaarde. ^[45]

 voor ( laat waarde van object ) {
    instructies ;
}

variabelen

Variabelen moeten in JavaScript worden gedeclareerd met let of var en zijn dan geldig binnen het bereik waarin ze zijn gedeclareerd, waarbij let het bereik meer beperkt dan var . ^[46] Als variabelen worden gebruikt zonder ze expliciet te verklaren op voorhand, worden ze impliciet aangegeven als eigenschappen van het globale object (in het browser window ); dit gedrag kan worden bereikt met de instructie "use strict"; voorkomen. Een speciaal kenmerk van JavaScript is het hijsen van variabelen, wat ervoor zorgt dat alle variabelen en functies die in een codesectie zijn gedeclareerd tijdens de verwerking automatisch naar het begin worden gebracht (alleen de declaratie, maar niet hun waardetoewijzing).

Omvang van variabelen

Variabelen gedeclareerd binnen functies of als functieparameters hebben lokale geldigheid; Variabelen die buiten functies zijn gedeclareerd, zijn globaal geldig. Globaal voor JavaScript in browsers betekent dat variabelen die op deze manier zijn gedeclareerd, geldig zijn voor de hele website en voor alle actieve JavaScripts. Aangezien dit kan leiden tot ongewenste neveneffecten met andere scripts die in de pagina zijn geïntegreerd (zoals plug-ins van derden, webanalyse of advertentiebanners), moeten globale variabelen zoveel mogelijk worden vermeden.

 laat een , b ; // expliciete declaratie van een globale variabele
een = 1 ; // definitie van een variabele
console . logboek ( een ); // resulteert in 1

c = 2 ; // impliciete verklaring zonder let - er is geen variabele, maar ...
console . logboek ( c ); // geeft 2
console . log (. venster c); // ... er is een eigenschap toegewezen aan het globale object (venster)
console . log (. venster a); // Fout

functie foo ( e ) { // schone declaratie van een functieparameter
    laat f , g = 5 ; // schone declaratie en definitie van een lokale variabele
    console . logboek ( een ); // globale variabelen zijn overal geldig
    console . logboek ( c ); // Ook eigenschappen van het globale object
    console . logboek ( e ); // Functieparameters hebben hetzelfde bereik als lokale variabelen
    h = 7 ; // de impliciet gedeclareerde h is een globale variabele
}

foo ( een );

console . logboek ( e ); // Fout omdat de functieparameter e alleen geldig is binnen de functie
console . logboek ( f ); // Fout omdat de variabele f alleen geldig is binnen de functie

console . logboek ( h ); // resulteert in 7 - (zie hierboven)
console . log (. venster h); // geeft 7 terug - de globale variabele is een eigenschap van window

constanten

Constanten moeten worden gedeclareerd met const , ze moeten een waarde krijgen tijdens de initialisatie. Voor het geldigheidsgebied gelden dezelfde voorwaarden als voor variabele declaraties met let . Constanten kunnen niet worden gewijzigd door ze opnieuw toe te wijzen, maar - als de constanten objecten zijn - kunnen individuele eigenschappen van de constanten worden gewijzigd. ^[47]

Functies

Functies zijn volwaardige objecten in JavaScript. Ze hebben methoden en eigenschappen, kunnen worden gemaakt en overschreven, worden doorgegeven als argumenten aan functies en kunnen door hen worden gemaakt en geretourneerd.

In het laatste geval wordt een afsluiting gemaakt , ook wel functieafsluiting genoemd, waarmee bijvoorbeeld gegevensinkapseling kan worden gerealiseerd:

 laat bericht = functie () {
    laat geheim = 42 ;

    terugkeer function () {
        terug geheim ;
    };
};

// bericht is een functie die wordt geretourneerd door bericht
laat bericht = bericht ();
waarschuwing ( soort geheim ); // niet gedefinieerd
waarschuwing ( bericht ()); // 42

Niet elk argument van een functie hoeft te worden opgegeven bij het aanroepen ervan. De waarde undefined is ingesteld voor ontbrekende argumenten; Sinds ECMAScript 2015 kunnen parameters ook worden gedefinieerd met standaardwaarden. De argumenten zijn ook toegankelijk binnen de functie via het object arguments .

generatie

Er zijn verschillende manieren om functies in JavaScript te maken: ^[48]

• Functieverklaringen:

 functie f ( x , y ) {
    keer x + y terug ;
}

• Functie-uitdrukkingen:

 laat f = functie ( x , y ) {
    keer x + y terug ;
};

• Onmiddellijk aangeroepen functie-uitdrukkingen:

Anonieme functies kunnen ook direct worden uitgevoerd zonder ze eerst aan een variabele toe te wijzen. Dit kan worden gebruikt om het bereik van variabelen in te kapselen.

 ( functie ( x , y ) {
    keer x + y terug ;
}) ( 2 , 3 );

• Genoemde functie-uitdrukkingen:

Aan de variabele f een functie met de identifier g toegekend. Buiten de functie kan het worden aangesproken met f , binnen met f en g .

 laat f = functie g ( x , y ) {
    keer x + y terug ;
};

• Functie Constructeurs:

 laat f = nieuwe functie ( 'x' , 'y' , 'retour x + y;' );

• Pijl Functies:

De ronde haakjes zijn optioneel als de functie precies één argument heeft. Als de accolades worden weggelaten, moet u precies één uitdrukking zonder return specificeren als de return-waarde. Elke code kan worden opgegeven met accolades, maar return moet worden gebruikt voor return-waarden.

 ( x , y ) => x + y ;
( x , y ) => { retour x + y ; };
x => x + 1 ;
x => { retour x + 1 ; };

// Een op deze manier gecreëerde functie kan natuurlijk ook aan een variabele worden toegewezen
laat f = ( x , y ) => x + y ;

voorbeeld

Een functionele en recursieve implementatie van het Euclidische algoritme met twee argumenten ziet er als volgt uit:

 functie euclides ( a , b ) {
    als ( b === 0 )
        retourneer een ;

    retourneer euclides ( b , a % b );
}

Implementatie van het Euclidische algoritme met een willekeurig aantal argumenten:

 functie ggT (... getallen ) {
    if ( nummers . lengte === 0 ) // (1.)
        retourneer 0 ;

    if ( nummers . lengte === 1 ) // (2.)
        return cijfers [0];

    nummers terugsturen . verminderen ( euclides ); // (3.)
}

console . log ( ggd ()); // 0
console . log ( ggd ( 4 )); // 4
console . log ( ggd ( 24 , 36 , 84 )); // 12

1. Als ggT zonder een argument, wordt nul geretourneerd.
2. Als ggT met precies één argument, dan wordt het argument zelf geretourneerd. Dit wordt ook wel identiteit genoemd .
3. Vermindert numbers tot een enkele waarde door twee elementen van links naar rechts te reduce met reduce en euklid .

Implementatie van het Euclidische algoritme met gedeeltelijke toepassing:

 functie ggd ( eerste ) {
    if ( eerste === niet gedefinieerd )
        retourneer 0 ;

    terugkeerfunctie (tweede) {
        if ( tweede === ongedefinieerd )
            eerst terugkeren ;

        return ggd ( euclides ( eerste , tweede ));
    };
}

console . log ( ggd ()); // 0
console . log ( ggd ( 4 ) ()); // 4
console . log ( ggd ( 24 ) ( 36 ) ( 84 ) ()); // 12

Voorwerpen

Objecten in JavaScript bestaan ​​uit eigenschappen die zijn geïmplementeerd als naam/waarde-paren. Er wordt geen onderscheid gemaakt tussen attributen en methoden van het object (een eigenschap waarvan de waarde het type Functie heeft , fungeert als een methode). Elk object - zelfs objecten die door letterlijke waarden zijn gemaakt - erft van het prototype van de globale objectconstructor.

Vooraf gedefinieerde objecten

JavaScript kent verschillende ingebouwde objecten en objecttypen die zijn gedefinieerd in de ECMAScript-standaard. Een objecttype wordt weergegeven door een constructorfunctie met dezelfde naam, waarmee objecten van het overeenkomstige type kunnen worden gemaakt en die ook een verwijzing naar het prototype van het objecttype bevat.

• Het naamloze globale object dat alle variabelen en objecten bevat.
• Het objecttype Object waarvan alle objecten zijn afgeleid.
• Het objecttype Function van functies .
• De Array van arrays- objecttype.
• Der Objekttyp String von Zeichenketten .
• Der Objekttyp Boolean von boolesche Variablen .
• Der Objekttyp Number von Zahlen (64-Bit- Gleitkommazahlen gemäß IEEE 754 ).
• Der Objekttyp Date für Datumsformate ( Daten bzw. Zeitpunkte).
• Der Objekttyp RegExp für reguläre Ausdrücke .
• Der Objekttyp Error zur Charakterisierung (und ggf. nachfolgenden Auslösung mittels throw ) von Laufzeitfehlern .
• Das Objekt Math stellt Konstanten und Methoden für mathematische Operationen bereit.
• Das Objekt JSON stellt zwei Methoden für die Serialisierung von Objekten ins JSON -Format und umgekehrt bereit.
• Das Objekt Reflect stellt Methoden für die Ermittlung und Änderung der Metadaten eines Objekts bereit.

Weitere Objekte, die beim clientseitigen JavaScript verwendet werden, entstanden historisch vor allem durch die Netscape -Spezifikationen ( window , document usw.). Das window -Objekt selbst ist dabei de facto das globale Objekt, indem einfach einer Variablen window das globale Objekt zugewiesen wurde. Zahlreiche Unterobjekte von document wurden mittlerweile durch DOM HTML standardisiert ( title , images , links , forms usw.). Aktuelle Browser unterstützen zudem DOM Core und andere W3C -DOM-Standards sowie Erweiterungen von Microsoft JScript .

Zugriff auf Objekteigenschaften und -methoden

Eigenschaften von Objekten (auch Methoden sind Eigenschaften) können wie folgt angesprochen werden:

Punkt-Notation (mit statischen Bezeichnern )

 objekt . eigenschaft ;

objekt . methode ( parameter1 , parameter2 );

Klammer-Notation (mit dynamischen Bezeichnern )

 objekt [ "eigenschaft" ];

objekt [ "methode" ]( parameter1 , parameter2 );

// Eigenschaftsname, der in Punktnotation illegal wäre
objekt [ "methode 1" ]();

// So können auch alle Eigenschaften des Objekts durchlaufen werden
for ( let eigenschaftsName in objekt ) {
    console . log ( eigenschaftsName , " = " , objekt [ eigenschaftsName ]);
}

Zu allen Objekten können zur Laufzeit neue Eigenschaften hinzugefügt oder mit delete bestehende entfernt werden:

 // Statisch bzw. dynamisch benannte Eigenschaften hinzufügen:
objekt . eigenschaftA = "ein Wert" ;
objekt [ "eigenschaftB" ] = "ein anderer Wert" ;

// Statisch bzw. dynamisch benannte Eigenschaften entfernen:
delete objekt . eigenschaftA ;
delete objekt [ "eigenschaftB" ];

Objektliterale

Objekte können in JavaScript direkt anhand ihrer Eigenschaften definiert werden:

 let meinObjekt = {
    zahl : 42 ,
    gibZahl : function () {
        return this . zahl ;
    }
};

alert ( meinObjekt . gibZahl ()); // 42

Eine spezielle Notation gibt es für reguläre Ausdrücke:

 // mit Konstruktorfunktion
( new RegExp ( "a" )). test ( "ab" ); // true

// als Literal
/a/ . test ( "ab" ); // true

Konstruktor-Funktionen

Eine Funktion kann dazu genutzt werden, um ein mit new erstelltes Objekt zu initialisieren. In diesem Fall spricht man von einem Konstruktor oder einer Konstruktor-Funktion. Innerhalb dieser Funktion kann das neue Objekt über die Variable this angesprochen werden.

 function MeinObjekt ( x ) { // Konstruktor
    this . zahl = x ;
}

let objekt = new MeinObjekt ( 3 ); // Instanz erzeugen
alert ( objekt . zahl ); // per Meldefenster ausgeben (3)

„Private“ Eigenschaften

Private Eigenschaften und Methoden sind nicht explizit Teil der Sprache.

Mit Hilfe von Closures (siehe Funktionen ) lassen sich dennoch private Eigenschaften von Objekten realisieren:

 let erschaffeKatze = function () {
    let lebensZahl = 7 ;

    let maunz = function () {
        return ( lebensZahl > 0 ) ? "miau" : "örks" ;
    };

    // gibt neues Objekt zurück
    return {
        toeten : function () {
            lebensZahl -= 1 ;
            alert ( maunz ());
        }
    };
};

let otto = erschaffeKatze ();
otto . toeten (); // miau

Lediglich die toeten -Methode von otto kennt die Variable lebensZahl . Der Effekt gleicht dem einer privaten Eigenschaft, wenn alle Methoden der Katze in der erzeugenden Funktion erschaffeKatze definiert werden. lebensZahl ist dann für alle Methoden (privilegierte Methoden, im Beispiel toeten ) und inneren Funktionen der erzeugenden Funktion (private Methoden, im Beispiel maunz ) sichtbar, nicht jedoch von außen oder von nachträglich an das Objekt gehängten Methoden.

Vererbung über Prototypen

Vererbung kann in JavaScript durch Prototypen realisiert werden. Dies erfordert, dass der prototype-Eigenschaft einer Konstruktor-Funktion ein als Prototyp dienendes Objekt zugewiesen wird. Wenn mit der Konstruktor-Funktion nun ein Objekt erzeugt wird, wird beim Zugriff auf eine nicht-existierende Eigenschaft des neuen Objekts die entsprechende Eigenschaft des Prototyps (wenn vorhanden) zurückgegeben. Beispiel:

 let fisch = {
    augen : 2
};

let Mutantenfisch = function () {
    this . augen = 3 ;
};

Mutantenfisch . prototype = fisch ;

let blinky = new Mutantenfisch ();

// eigene Eigenschaft von blinky
alert ( blinky . augen ); // 3

// blinkys eigene Eigenschaft wird gelöscht
delete blinky . augen ;

// blinky hat die Eigenschaft selbst nicht mehr,
// es schimmert die Eigenschaft des Prototyps durch
alert ( blinky . augen ); // 2

Um festzustellen, ob ein Objekt eine Eigenschaft selbst besitzt oder vom Prototyp geerbt hat, hat jedes Objekt (automatisch durch Vererbung von Object) die hasOwnProperty-Methode:

 blinky . hasOwnProperty ( 'augen' ); // false

Fixierung von Objektstruktur und -inhalten

Die in JavaScript im Regelfall völlig dynamische Struktur eines Objekts obj kann in verschiedener Hinsicht fixiert werden: Nach dem Methodenaufruf Object.preventExtensions(obj) können keine weiteren Attribute und Methoden mehr ergänzt werden. Object.seal(obj) verhindert sowohl die Erweiterung wie die Streichung von Attributen und Methoden. Der Aufruf Object.freeze(obj) fixiert sowohl die Objektstruktur wie auch die Attributwerte inklusive der Methoden gegen nachfolgende Veränderungen. Die betreffenden Status eines Objekts obj können mit Object.isExtensible(obj) , Object.isSealed(obj) und Object.isFrozen(obj) ermittelt werden.

Es ist auch möglich, nur ein einzelnes Attribut eines Objekts obj zu fixieren. Beispielsweise wird mit dem Aufruf

Object.defineProperty(obj, "vorname", {writable:false});

das Attribut obj.vorname schreibgeschützt. ^[49]

Delegationsprinzipien

JavaScript ist eine Delegationssprache mit sowohl selbstausführendem als auch direktem Delegationsmechanismus.

Funktionsobjekte als Rollen (Traits und Mixins)

JavaScript unterstützt schon auf der Ebene des Sprachkerns verschiedene auf Funktionsobjekten aufbauende Implementierungen des Rollen-Musters ^[50] wie z. B. Traits ^{[51] [52]} und Mixins . ^{[53] [54]} Zusätzliches Verhalten wird bereitgestellt, indem mindestens eine Methode über das Schlüsselwort this im Rumpf eines function -Objekts gebunden wird. Benötigt ein Objekt zusätzliches Verhalten, welches ihm nicht über die Prototypenkette zur Verfügung gestellt werden kann, lässt sich eine Rolle direkt über call bzw. apply an dieses Objekt delegieren.

Objektkomposition und Vererbung durch Delegation

Während Komposition in JavaScript über diese direkte Delegation abgedeckt werden kann, kommt automatische Delegation immer dann zur Anwendung, wenn der Interpreter die Prototypenkette eines Objekts nach oben hin abwandern muss, um z. B. eine mit diesem Objekt assoziierte Methode zu finden, die diesem nicht unmittelbar gehört. Sobald die Methode gefunden ist, wird sie im Kontext dieses Objekts aufgerufen. Demzufolge wird Vererbung in JavaScript über einen selbstausführenden Delegationsmechanismus abgebildet, der an die prototype -Eigenschaft von Konstruktorfunktionen gebunden ist.

Fehlerbehandlung

Ab Version 3 verfügt ECMAScript über eine von Java übernommene Fehlerbehandlung . Die Anweisung try … catch … finally fängt Ausnahmen ( exceptions ) ab, die aufgrund eines Fehlers oder einer throw -Anweisung auftreten. Die Syntax lautet:

 try {
    // Anweisungen, in denen Ausnahmen auftreten oder ausgelöst werden können
} catch ( exception ) {
    // Anweisungsfolge, die im Ausnahmefall ausgeführt wird.
    // In diesem Teil kann die Fehlerbehandlung erfolgen.
} finally {
    // Anweisungsfolge, die anschließend in jedem Fall ausgeführt wird.
}

throw "sample exception" ; // wenn verfügbar, besser: Error-Objekt (siehe unten)

Zu Beginn werden die Anweisungen im try -Block ausgeführt. Falls eine Ausnahme auftritt, wird der Kontrollfluss sofort zum catch -Block mit dem Ausnahmeobjekt als Parameter umgeleitet.

Im Normalfall wird der Ausnahmeblock übersprungen. Nach der Ausführung des try -Blocks (auch teilweise) und gegebenenfalls des catch -Blocks werden in jedem Fall die Anweisungen im finally -Block ausgeführt. Der finally -Teil kann weggelassen werden, alternativ der catch -Teil.

Einige Laufzeitumgebungen wie V8 (und somit Node.js ) und auch viele Webbrowser stellen gesonderte Error-Objekte zur Verfügung, die neben der Fehlermeldung auch einen Stacktrace und weitere Zusatzinformationen transportieren können. ^{[55] [56] [57]} Um diese Vorteile zu nutzen, ändert man im einfachsten Anwendungsfall den throw -Befehl von throw "Meldungstext" ; zu throw new Error ( "Meldungstext" ); . ^[58]

Klammern um den Parameter des throw -Befehls sind im Allgemeinen nicht notwendig. ^[49] Sollten sie in Ausnahmefällen benötigt werden, um beispielsweise einen auf mehrere Zeilen verteilten Parameter zusammenzufassen, kann die mögliche Verwechslung mit einem Funktionsaufruf dennoch vermieden werden, indem man ein Leerzeichen zwischen throw und die öffnende Klammer einfügt.

JavaScript-Bibliotheken

Um die Erstellung von Webanwendungen mit Hilfe von JavaScript zu erleichtern, gibt es diverse Bibliotheken und Frameworks . Eine Bibliothek ist eine Sammlung von Funktionen , die der Programmierer nutzen kann. Ein Framework fordert darüber hinaus durch ein besonderes Maß an Abstraktion eine bestimmte Struktur der Programmierung.

Ausgelöst von neuen Konzepten wie Ajax entstand seit 2004 ein neues Interesse für JavaScript. JavaScript wird zunehmend für Rich-Client -Anwendungen benutzt, die das Aussehen und die Bedienung von herkömmlichen Desktop -Programmen auf Web-gestützte Anwendungen übertragen. JavaScript spielt dabei eine Schlüsselrolle, wenn es darum geht, Statusinformationen ohne Laden einer vollständigen Seite zwischen Browser und HTTP-Server zu übertragen. Im Zuge dieser neuen Anforderungen entstanden verschiedene Bibliotheken, die die Entwicklung solcher Anwendungen vereinfachen wollen. Neben Ajax-Funktionalitäten bieten die meisten dieser Bibliotheken eine eigene Basis für objektorientierte Programmierung, eine Abstraktionsschicht für das komfortable Arbeiten mit dem DOM sowie grafische Effekte wie Animationen . Aber auch schon vor dem breiten Einsatz von Ajax existierten Funktionssammlungen zur Unterstützung der browserübergreifenden Programmierung. ^[59]

Zu den bekannten JavaScript-Bibliotheken und Frameworks zählen AngularJS , Dojo Toolkit , Ext JS , jQuery , MooTools , Prototype , Qooxdoo , React , Vue.js und die Yahoo User Interface Library . Speziell mit grafischen Effekten beschäftigen sich Moo.fx und Script.aculo.us . Für die serverseitige Programmierung mittels Node.js stehen eigene Bibliotheken und Frameworks bereit.

Einige Bibliotheken und insbesondere Frameworks erweitern die Sprache um zusätzliche Funktionen, die häufig in spätere Versionen der Spezifikation einfließen oder rüsten bei Bedarf ältere Implementierung per Polyfill nach.

JavaScript & Suchmaschinenoptimierung (SEO)

Suchmaschinen gehen unterschiedlich mit der Verarbeitung von Javascript-Inhalten um, wodurch es in den letzten Jahren immer wieder zu Fällen gekommen ist, dass Website teilweise oder gänzlich nicht in Suchmaschinen auffindbar waren. Der Suchmaschinenbetreiber Google kann laut eigenen Aussagen JavaScript-Inhalte crawlen, rendern und indexieren. ^[60] Neben allgemeinen Empfehlungen wie z. B. die Verwendung von aussagekräftigen Titeln, eindeutigen Statuscodes und den sorgsamen Umgang mit Noindex-Direktiven gibt es im Hinblick auf JavaScript noch spezifischere Empfehlungen, welche helfen können, dass JavaScript-Webanwendungen optimal via Suchmaschinenoptimierung aufgefunden werden können. Dazu zählen serverseitiges oder Pre-Rendering oder der Verzicht von Fragmenten bei Links. Für das Debugging von JavaScript & SEO gibt es eine Reihe von offiziellen Empfehlungen seitens Google, um nachprüfen zu können, wie der Googlebot Webinhalte erfasst. ^[61]

Siehe auch

• ActionScript – Bezeichnung für eine JavaScript-ähnliche Skriptsprache in Flash und Macromedia Director, wo es alternativ zu Lingo verwendet werden kann
• Aktive Inhalte
• Bookmarklet – kleine JavaScript-Programme im Browser
• Dart (Programmiersprache)

Literatur

• Jörg Bewersdorff : Objektorientierte Programmierung mit JavaScript: Direktstart für Einsteiger . 2. Auflage. Wiesbaden 2018, ISBN 978-3-658-21076-2 , doi : 10.1007/978-3-658-21077-9 .  
• Philip Ackermann: JavaScript. Das umfassende Handbuch. 1. Auflage. Galileo Press, Bonn 2016, ISBN 978-3-8362-3838-0 .
• Nicholas Zakas: JavaScript objektorientiert: Verständlicher, flexibler, effizienter programmieren . Heidelberg 2014, ISBN 978-3-86490-202-4 .  
• Peter Kröner: ECMAScript 5 – Entwickeln mit dem aktuellen JavaScript-Standard. 1. Auflage. Open Source Press, München 2013, ISBN 978-3-95539-063-1 .
• David Flanagan: JavaScript – das umfassende Referenzwerk. 6. Auflage. O'Reilly, Köln 2012, ISBN 978-3-86899-135-2 .
• David Flanagan: JavaScript – kurz & gut. 4. Auflage. O'Reilly, Köln 2012, ISBN 978-3-86899-388-2 .
• Christian Wenz: JavaScript und AJAX. Das umfassende Handbuch. 9. Auflage. Galileo Press, Bonn 2009, ISBN 978-3-89842-859-0 (openbook.galileocomputing.de ).
• Stefan Koch: JavaScript. Einführung, Programmierung, Referenz – inklusive Ajax. 5. Auflage. dpunkt-Verlag, Heidelberg 2009, ISBN 978-3-89864-594-2 .
• Douglas Crockford : Das Beste an JavaScript. O'Reilly, Köln 2008, ISBN 978-3-89721-876-5 .
• Paul Fuchs: JavaScript Programmieren für Einsteiger: Der leichte Weg zum JavaScript-Experten. BMU Verlag, Landshut 2019, ISBN 978-3-96645-016-4

Weblinks

Commons : JavaScript – Sammlung von Bildern, Videos und Audiodateien

Wikibooks: Websiteentwicklung: JavaScript – Lern- und Lehrmaterialien

Wiktionary: JavaScript – Bedeutungserklärungen, Wortherkunft, Synonyme, Übersetzungen

• Linkkatalog zum Thema JavaScript bei curlie.org (ehemals DMOZ )
• JavaScript – Geschichte, Struktur, Eigenschaften und die Zukunft der wichtigsten Programmiersprache des Webs. (MP3 97,5 MB) In: Chaosradio Express CRE146. 27. Februar 2010, abgerufen am 27. Februar 2010 .  
• Addy Osmani: Learning JavaScript Design Patterns. Abgerufen am 24. Mai 2013 (englisch, Entwurfsmuster in JavaScript).  
• Lizenz

Spezifikationen

• ISO-genormte ECMAScript-Spezifikation (ISO/IEC 16262:2002) (englisch/französisch)
• ECMAScript-Spezifikation (englisch, PDF; 3,1 MiB) ( HTML-Version )
• Referenz von Mozilla (deutsch)
• Übersicht über die Neuerungen in JavaScript (englisch)

Dokumentationen

• JavaScript-Kapitel bei SELFHTML-Wiki
• Objektorientierung in JavaScript
• Eloquent JavaScript (Frei verfügbares E-Book, englisch)

Einzelnachweise