JavaScript

 // Eksempel JavaScript
funktion helloWorld () {
	alarm ( 'Hej verden' );
}
vindue . onload = helloWorld ;

JavaScript (forkortet JS ) er et scriptsprog, der oprindeligt blev udviklet af Netscape i 1995 til dynamisk HTML i webbrowsere for at evaluere brugerinteraktioner, ændre, genindlæse eller generere indhold og dermed udvide mulighederne for HTML og CSS . ^[3] I dag bruges JavaScript også uden for browsere, f.eks. På servere og i mikrokontrollere. ^{[4] [5]}

Det nuværende navn på sproget oprindeligt kaldet LiveScript blev oprettet i 1996 fra et samarbejde mellem Netscape og Sun Microsystems . Deres Java -applets , der blev oprettet med programmeringssproget Java , også udgivet i 1995, blev integreret i Netscape Navigator ved hjælp af LiveScript. For at udnytte Java's popularitet blev LiveScript omdøbt til JavaScript, selvom de to sprog blev udviklet uafhængigt og har helt forskellige grundlæggende begreber.

Sprogkernen i JavaScript standardiseret som ECMAScript ( ECMA 262) beskriver et dynamisk indtastet , objektorienteret , men klasseløst scriptsprog. Det gør retfærdighed over for alle objektorienterede programmeringsparadigmer, blandt andet på basis af prototyper , hvis erklæring er muliggjort fra ECMAScript 6 med en syntaks, der ligner den, der bruges i klassebaserede programmeringssprog. JavaScript kan programmeres på en objektorienteret , proceduremæssig eller funktionel måde efter behov. ^[6]

udvikling

JavaScript -syntaks ligner C -efterkommere. På trods af navnet og syntaktisk lighed har JavaScript lidt til fælles med Java . I JavaScript understøttes for eksempel arv ikke af klasser , men af prototyper .

Tidligere blev JavaScript hovedsageligt brugt på klientsiden . JavaScript eller ECMAScript-implementeringer, f.eks. Med rammen Node.js ^[7] og som JScript eller JScript .NET i et ASP- eller ASP.NET- miljø på Microsoft Internet Information Services muliggør også applikationer på serversiden. Yderligere eksempler på JavaScript-programmering på serversiden er POW og Jaxer, som er baseret på Mozilla JavaScript-motoren SpiderMonkey , V8CGI, som er baseret på JavaScript-implementeringen V8 og integreret i Apache HTTP-serveren , og QML , en udvidet form for JavaScript til tegne overflader og animationer.

Sproget bruges også som scriptsprog til spil og applikationsprogrammer , da sprogkernen kun indeholder få objekter, og tolken, der kræves for at udføre scripts formuleret i JavaScript, derfor kan holdes relativt lille.

Desuden bruges JavaScript som lingua franca i MongoDB -databasen og i mikrokontrollere. ^{[4] [5]}

brug

Typiske anvendelsesområder

Typiske anvendelsesområder for JavaScript i webbrowseren er:

• dynamisk manipulation af websteder ved hjælp af dokumentobjektmodellen
• Pålidelighedskontrol ( datavalidering ) af formularposter før transmission til serveren
• Visning af dialogvinduer
• Afsendelse og modtagelse af data uden at browseren skal genindlæse siden ( Ajax )
• Foreslå søgeudtryk, mens du skriver
• Reklame bannere eller ticker
• E-mail-adresse tilsløring for at bekæmpe spam
• Skift flere rammer på én gang, eller fjern siden fra rammesættet
• Læse- og skriveadgang til cookies og weblagring i browseren

misbrug

Nogle programmer, der er mulige med JavaScript, virker delvist mod brugerens ønsker eller modsiger princippet om den mindste overraskelse . Nogle browsere tilbyder derfor funktioner, der undertrykker sådanne JavaScript -funktioner.

Eksempler:

Bemærk i Firefox -browseren for mange dialogvinduer

• Skjulelse af internetadresser, som et link henviser til
• Deaktivering af kontekstmenuen for at gøre det vanskeligere at gemme billeder eller hele siden
• Deaktivering af kopifunktionen for at gøre det vanskeligere at kopiere tekst eller billeder
• Uopfordrede (reklame) pop-ups eller pop-unders eller successive dialogvinduer, der forhindrer brugeren
• Utilsigtet lukning af browservinduet
• Utilsigtet ændring af browservinduet
• Barrierefrie websteder er kendetegnet ved, at de så vidt muligt kan bruges uden begrænsninger, selv når JavaScript er slukket. Det deaktiverede JavaScript begrænser delvist anvendeligheden af ​​et websted.
• Foranstaltninger, der gør det muligt for en bruger at blive genkendt, når han besøger et websted på et senere tidspunkt, uden om browserens sikkerhedsindstillinger (se anonymitet på Internettet )
• I tilfælde af sårbare webapplikationer kan JavaScript også misbruges af tredjeparter, f.eks. Via XSS (kodeindsprøjtning).

historie

Den 18. september 1995 udgav Netscape den tidligere version af Navigator 2.0, en browser med et integreret scriptsprog, som på det tidspunkt blev kaldt LiveScript og var blevet udviklet af Brendan Eich . Sproget kunne blandt andet kontrollere brugerens formularposter, inden de indsendes. Den 4. december 1995 annoncerede Netscape og Sun Microsystems et samarbejde med det formål at interagere LiveScript direkte med Java -applets. Sun udviklede de nødvendige Java -klasser, Netscape LiveConnect -grænsefladen og omdøbte sproget til JavaScript (JavaScript 1.0). ^{[8] [9]} JavaScript har været et varemærke tilhørende Oracle siden købet af Sun Microsystems. ^[10]

Med den første betaversion af Navigator 3.0 introducerede Netscape JavaScript 1.1 den 29. april 1996. I den samme version var der nyskabelser for at få adgang til billeder og skabe såkaldt rollover-grafik . LiveConnect var nu en integreret del af browseren. Med betaversionen af Internet Explorer 3 præsenterede Microsoft sin første JScript-kompatible browser i maj 1996. Dette var begyndelsen på browserkrigen . ^{[11] [12]}

Med meddelelsen om Netscape Communicator blev JavaScript 1.2 frigivet den 15. oktober 1996; Netscape Communicator 4.0 med JavaScript 1.2 dukkede dog først op 4. juni 1997. Også i juni 1997 offentliggjorde European Computer Manufacturers Association sin standard ECMA-262 (ECMAScript) , som blev udviklet sammen med Netscape og havde til formål at standardisere den grundlæggende elementer i et scriptsprog. Dette blev ISO -standarden ISO / IEC 16262: 1998 Informationsteknologi - ECMAScript -sprogspecifikation i april 1998. Den 1. oktober 1997 udkom Internet Explorer 4, som dækkede sprogområdet JavaScript 1.1. Derudover blev der offentliggjort egne udvidelser, der førte til forskelle i kompatibilitet mellem Navigator og Internet Explorer og gav en DOM-lignende syntaks, der gjorde det muligt at få adgang til alle elementer på webstedet og ændre dem efter behov.

JavaScript -tolken Rhino , implementeret i Java, blev leveret som en del af Java -runtime -miljøet som en del af Java -runtime -miljøet fra version 6.0. ^[13] I juli 1998 blev betaversionen af ​​Netscape Communicator 4.5 JavaScript 1.3, som allerede var tilgængelig i version 4.06 af Netscape Communicator, udgivet. ^[14] I oktober 1998 introducerede Netscape JavaScript 1.4. Denne version var fuldt kompatibel med ECMA-262. En browser med understøttelse af denne version blev dog ikke vist. ^{[15] [16]} I april 2000 kom Preview Release 1 af Navigator 6 med JavaScript 1.5 og DOM Level 1. Den 5. juni 2002 blev Mozilla 1.0 frigivet med JavaScript 1.5 (JavaScript version 1.5 svarer til ECMA-262 version 3 ), ^[17] den 29. november 2005 Mozilla Firefox 1.5 med JavaScript 1.6 ^[18] , den 12. juli 2006 Mozilla Firefox 2.0b1 med JavaScript 1.7 ^[19] og den 18. december 2007 Mozilla Firefox 3.0b2 med JavaScript 1.8. ^[20]

Versionshistorik for JavaScript

Versionshistorik for ECMAScript (ECMA-262)

Den nuværende version er 2020 -versionen, der blev offentliggjort i juni 2020 som "ECMAScript 2020". ^[22] Dette skal efterfølges af årlige opdateringer. ^[23] Standarderne er udviklet på GitHub. ^[24]

sikkerhed

Sandkasse princip

JavaScript udføres i browseren i en såkaldt sandkasse . Effekten af ​​dette er, at du i JavaScript kun har adgang til browserens objekter og ikke kan få adgang til filsystemet . En undtagelse er læseadgang til en fil, der blev valgt af brugeren via dialogboksen for filvalg, startet med HTML -elementet <input type="file"> .

For at forhindre sikkerhedsproblemer som cross-site scripting udføres hvert websted eller webapplikation isoleret i browseren, og dataudveksling forhindres. Uden denne beskyttelse ville det være muligt at udføre ondsindet kode på den ene side, der f.eks. Læser eller manipulerer bank- eller login -data i andre browservinduer, der er åbne på samme tid.

Visse sikkerhedsrelevante browserfunktioner såsom lukning af browservinduet, skjul og visning af værktøjslinjer , ændring af browserens startside, adgang til udklipsholderen eller læsning af brugerens sidst besøgte websider er også beskyttet af obligatorisk brugerinput.

Som standard kører et script som en enkelt tråd i en browser. Ventende sløjfer eller lange beregninger bør derfor undgås i JavaScript -programmer. Med Worker er det muligt at oprette yderligere tråde. ^[40]

Deaktivering af JavaScript

I mange JavaScript-aktiverede browsere kan JavaScript deaktiveres, eller individuelle handlinger såsom ændring af teksten i statuslinjen eller manipulation af browservinduer kan deaktiveres. I nogle browsere kan dette også automatiseres ved hjælp af udvidelser, der aktiverer og deaktiverer JavaScript specifikt til sider, der bruger hvide og sorte lister . Som et resultat kan udviklere ikke stole på, at JavaScript -programmer opfører sig på samme måde eller overhovedet fungerer i alle miljøer.

Sprogelementer

Datatyper

JavaScript er dynamisk skrevet . Det betyder, at tildeling af værdier til variabler ikke er underlagt nogen typebaserede begrænsninger. Der er dog forskellige udvidelser til JavaScript, der kræver statisk indtastning som en mulighed eller obligatorisk, for eksempel TypeScript fra Microsoft . ^[41]

På grund af den dynamiske indtastning er datatypen ikke en egenskab for en variabel, men snarere egenskaben for dens aktuelle værdi (eller egenskaben for en bogstavelig ) i forhold til runtime. Datatypen en værdi kan bestemmes med den unær operatør typeof .

Primitive datatyper

Primitive datatyper inkluderer værdier for tal, strenge, boolske værdier og symboler. Strenge er af typen String ( typeof returnerer "string" ), numeriske værdier af typen Number ( typeof returnerer "number" ), boolske værdier (den boolske typeof returnerer "boolean" ). Et andet, omend sjældent brugt, primitiv datatype er symbol, der virker som en identifikator (se også nøgleordet symbol ) ( typeof returnerer "symbol" ).

Et særligt tilfælde er typen Undefined med undefined som den eneste værdi ( typeof returnerer "undefined" ).

Ikke primitive datatyper

Funktioner er ikke en primitiv type; typeof returnerer "function" . For alle andre værdier - inklusive regulære udtryk, arrays og værdien null - returnerer typeof strengværdien "object" . I modsætning til andre programmeringssprog er der ingen rigtige associative arrays i JavaScript. ^[42]

Objekter oprettet med den foruddefinerede constructor-funktioner String() , Number() og Boolean() opfører sig som værdier af de tilsvarende datatyper - imidlertid typeof operatør returnerer "object" . Sådanne genstande er kendt som indpakningsobjekter . Der er ingen konstruktorfunktion med samme navn for symboldatatypen . Følgende er et eksempel på en variabel og det tilhørende indpakningsobjekt:

 lad variabel = "eksempeltekst" ;
// Funktionen "alarm" sender resultatet "streng" i et vindue.
alert (typeof variabel);

variabel = ny streng ( "eksempeltekst" );
alert (typeof variabel); // resulterer i "objekt"

Omvendt konverteres værdierne for de primitive typer Number , Boolean og String automatisk til objekter i den tilsvarende konstruktorfunktion:

 lad variabel = "eksempeltekst" ;
alarm ( variabel . længde ); // resulterer i 12

Kontrolstrukturer

JavaScript kender de sædvanlige kontrolstrukturer . Hvis disse skulle indeholde mere end én instruktion , skal der bruges en blok, der er omsluttet af krøllede parenteser . Instruktionerne afsluttes med et semikolon. I de fleste tilfælde er dette valgfrit; den automatiske semikolonindsættelse betyder, at den normalt tilføjes automatisk.

if-else (betinget erklæring)

 hvis ( betingelse ) {
    instruktioner ;
} andet {
    instruktioner ;
}

Forkortelse for betingede værditildelinger:

 variabel = tilstand ? valueIfTrue : valueIfFalse ;

switch kontrol struktur

 switch ( variabel ) {
    case value1 :
        instruktioner ;
        pause ;
    case value2 :
        instruktioner ;
        pause ;
    standard :
        instruktioner ;
}

mens loop

 mens ( tilstand ) {
    instruktioner ;
}

do-while loop

 gør {
    instruktioner ;
} mens ( tilstand );

til sløjfe

 for ( start-udtryk ; tilstand ; iteration- udtryk ) {
    instruktioner ;
}

for ... i loop

Med denne instruktion køres alle egne og nedarvede egenskaber for et objekt igennem, som har den interne attribut Enumerable. ^[43] Denne attribut blev introduceret i ECMA Script 5 og er ikke angivet for visse indbyggede egenskaber (f.eks. Funktionen tilString af prototypen Objekt), men den kan normalt indstilles (og fjernes) af brugeren. ^[44] Ejendomsnavnet tildeles en specificeret variabel med hvert loop -pass.

 for ( lad ejendomsnavn i objekt ) {
    instruktioner ;
}

for ... af loop

Denne kontrolstruktur fungerer som en for ... in loop, med den forskel, at den angivne variabel ikke er tildelt ejendomsnavnet, men egenskabets værdi. ^[45]

 for (lad værdi objekt) {
    instruktioner ;
}

variabler

Variabler skal deklareres i JavaScript med let eller var og er derefter gyldige inden for det omfang , de blev deklareret i, med let begrænser omfanget mere end var . ^[46] Hvis der anvendes variable uden udtrykkeligt at erklære dem på forhånd, de er implicit erklæret som egenskaber for den globale objekt (i browseren window ); denne adfærd kan opnås med instruktionen "use strict"; forhindre. Et særligt træk ved JavaScript er hejsning af variabler, som sikrer, at alle variabler og funktioner, der er deklareret i et kodesektion, automatisk bringes til begyndelsen under behandlingen (kun deklarationen, men ikke deres værditildeling).

Variablenes omfang

Variabler deklareret inden for funktioner eller som funktionsparametre har lokal gyldighed; Variabler, der erklæres uden for funktioner, er globalt gyldige. Global for JavaScript i browsere betyder, at variabler, der er erklæret på denne måde, er gyldige for hele webstedet og for alle aktive JavaScripts. Da dette kan føre til uønskede bivirkninger med andre scripts integreret på siden (f.eks. Tredjeparts plugins, webanalyse eller reklamebannere), bør globale variabler så vidt muligt undgås.

 lad a , b ; // eksplicit erklæring om en global variabel
a = 1 ; // definition af en variabel
konsol . log ( a ); // resulterer i 1

c = 2 ; // implicit erklæring uden lad - der er ingen variabel, men ...
konsol . log ( c ); // giver 2
konsol . log ( vindue . c ); // ... en egenskab er blevet tildelt det globale objekt (vindue)
konsol . log ( vindue . a ); // Fejl

funktion foo ( e ) { // ren deklaration af en funktionsparameter
    lad f , g = 5 ; // ren erklæring og definition af en lokal variabel
    konsol . log ( a ); // globale variabler er gyldige overalt
    konsol . log ( c ); // Egenskaber for det globale objekt også
    konsol . log ( e ); // Funktionsparametre har samme omfang som lokale variabler
    h = 7 ; // den implicit erklærede h er en global variabel
}

foo ( a );

konsol . log ( e ); // Fejl, fordi funktionsparameteren e kun er gyldig inden for funktionen
konsol . log ( f ); // Fejl, fordi variablen f kun er gyldig inden for funktionen

konsol . log ( h ); // resultater i 7 - (se ovenfor)
konsol . log ( vindue . h ); // returnerer 7 - den globale variabel er en egenskab af vindue

Konstanter

Konstanter skal deklareres med const , de skal tildeles en værdi under initialisering. De samme betingelser gælder for gyldighedsområdet som for variable deklarationer med let . Konstanter kan ikke ændres ved at tildele dem igen, men - hvis konstanterne er objekter - kan individuelle egenskaber for konstanterne ændres. ^[47]

Funktioner

Funktioner er fuldgyldige objekter i JavaScript. De har metoder og egenskaber, kan oprettes og overskrives, sendes som argumenter til funktioner og kan oprettes og returneres af dem.

I sidstnævnte tilfælde oprettes en lukning , også kendt som en funktionslukning, med hvilken f.eks. Datakapsling kan implementeres:

 lad besked = funktion () {
    lad hemmelighed = 42 ;

    returnere function () {
        vende tilbage hemmelighed ;
    };
};

// besked er en funktion, der returneres ved besked
lad besked = besked ();
alarm ( type hemmelighed ); // udefineret
alarm ( meddelelse ()); // 42

Ikke alle argumenter for en funktion skal specificeres, når man kalder den. Værdien udefineret er angivet for manglende argumenter; Siden ECMAScript 2015 kan parametre også defineres med standardværdier. Argumenterne kan også tilgås inden for funktionen via arguments .

generation

Der er flere måder at oprette funktioner i JavaScript: ^[48]

• Funktionserklæringer:

 funktion f ( x , y ) {
    return x + y ;
}

• Funktionsudtryk:

 lad f = funktion ( x , y ) {
    return x + y ;
};

• Umiddelbart påkaldte funktionsudtryk:

Anonyme funktioner kan også udføres direkte uden først at blive tildelt dem til en variabel. Dette kan bruges til at indkapsle variablernes omfang.

 ( funktion ( x , y ) {
    return x + y ;
}) ( 2 , 3 );

• Navngivne funktionsudtryk:

En funktion med identifikatoren g tildelt variablen f . Uden for funktionen kan den adresseres med f , indeni med f og g .

 lad f = funktion g ( x , y ) {
    return x + y ;
};

• Funktionskonstruktører:

 lad f = ny funktion ( 'x' , 'y' , 'return x + y;' );

• Pilefunktioner:

De runde parenteser er valgfri, hvis funktionen har nøjagtigt et argument. Hvis de krøllede parenteser udelades, skal du angive præcist ét ​​udtryk uden retur som returværdi. Enhver kode kan angives med krøllede parenteser, men retur skal bruges til returværdier.

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

// En funktion, der er oprettet på denne måde, kan naturligvis også tildeles en variabel
lad f = ( x , y ) => x + y ;

eksempel

En funktionel og rekursiv implementering af den euklidiske algoritme med to argumenter ser således ud:

 funktion euklid ( a , b ) {
    hvis ( b === 0 )
        returnere a ;

    return euklid ( b , a % b );
}

Implementering af den euklidiske algoritme med et vilkårligt antal argumenter:

 funktion ggT (... tal ) {
    hvis ( tal . længde === 0 ) // (1.)
        returnere 0 ;

    hvis ( tal . længde === 1 ) // (2.)
        tilbagevenden numre [0];

    returnere tal. reducere ( euklid ); // (3.)
}

konsol . log ( gcd ()); // 0
konsol . log ( gcd ( 4 )); // 4
konsol . log ( gcd ( 24 , 36 , 84 )); // 12

1. Hvis ggT uden et argument, returneres nul.
2. Hvis ggT med præcis et argument, returneres selve argumentet. Dette er også kendt som identitet .
3. Reducerer numbers til en enkelt værdi ved at reducere to elementer fra venstre mod højre med reduce og euklid .

Implementering af den euklidiske algoritme med delvis anvendelse:

 funktion gcd ( første ) {
    hvis ( først === udefineret )
        returnere 0 ;

    returfunktion (anden) {
        hvis ( anden === udefineret )
            vende først tilbage ;

        return gcd ( euclid ( første , anden ));
    };
}

konsol . log ( gcd ()); // 0
konsol . log ( gcd ( 4 ) ()); // 4
konsol . log ( gcd ( 24 ) ( 36 ) ( 84 ) ()); // 12

Objekter

Objekter i JavaScript består af egenskaber, der implementeres som navn / værdipar. Der skelnes ikke mellem objektets attributter og metoder (en egenskab, hvis værdi har funktionstypen, fungerer som en metode). Hvert objekt - selv objekter skabt af bogstavelige - arver fra prototypen af ​​den globale objektkonstruktør.

Foruddefinerede objekter

JavaScript kender flere indbyggede objekter og objekttyper, der er defineret i ECMAScript-standarden. En objekttype repræsenteres af en konstruktorfunktion med samme navn, som kan bruges til at oprette objekter af den tilsvarende type, og som også indeholder en reference til objekttypens prototype.

• Det navnløse globale objekt, der indeholder alle variabler og objekter.
• Objekttypen Object som alle objekter stammer fra.
• Function objekttype funktioner .
• Array af arrays objekttype.
• 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