JavaScript: Unterschied zwischen den Versionen

Aus Flinkwiki
Wechseln zu: Navigation, Suche
(→‎Links)
(→‎Links)
 
(44 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
 
<div align="right"><big>'''[https://flinkwiki.de/index.php?title=Kategorie:Alle_Seiten Seitenübersicht]'''</big></div>
 
<div align="right"><big>'''[https://flinkwiki.de/index.php?title=Kategorie:Alle_Seiten Seitenübersicht]'''</big></div>
 +
<div align="right">'''[[JavaScript: DOM|Zur Seite "JavaScript: DOM"]]'''</div>
 +
<div align="right">'''[[JavaScript: Events|Zur Seite "JavaScript: Events"]]'''</div>
 
<div align="right">'''[[JavaScript: Beispiele|Zur Seite "JavaScript: Beispiele"]]'''</div>
 
<div align="right">'''[[JavaScript: Beispiele|Zur Seite "JavaScript: Beispiele"]]'''</div>
 
<div align="right">'''[[Webprogrammierung|Zur Seite "Webprogrammierung"]]'''</div>
 
<div align="right">'''[[Webprogrammierung|Zur Seite "Webprogrammierung"]]'''</div>
 +
<div align="right">'''[[HTML|Zur Seite "HTML"]]'''</div>
 +
<div align="right">'''[[CSS|Zur Seite "CSS"]]'''</div>
  
  
Zeile 149: Zeile 153:
  
 
Den Datentyp identifiziert man mit dem Operator ''typeof''.
 
Den Datentyp identifiziert man mit dem Operator ''typeof''.
 +
 
* https://javascript.info/types
 
* https://javascript.info/types
  
Zeile 182: Zeile 187:
  
 
var x; typeof(x); // "undefined"
 
var x; typeof(x); // "undefined"
 +
 +
----
 +
 +
=== Object ===
 +
 +
Siehe [[#Objekte | Objekte]]
 +
 +
----
 +
 +
=== Typumwandlung ===
 +
==== Nicht-explizit ====
 +
 +
a = "3";
 +
b = 4;
 +
c = a + b; //  "34"
 +
 +
----
 +
 +
==== explizit ====
 +
 +
parseInt()
 +
    var a = "5";
 +
    typeof a; // "string"
 +
    var b = parseInt(a);
 +
    typeof b; // "number"
 +
 +
parseFloat()
 +
    var a = "5.5";
 +
    var b = parseFloat(a); //    // c hat den Wert 5.5
 +
    typeof b; // "number"
 +
 +
Erstellen eines neuen Objekts der gewünschten Zielklasse:
 +
    var a = "5.5";
 +
    var b = Number(a);  // 5.5
 +
    typeof b;  // "number"
 +
 +
    var c = Boolean(a);  //true
 +
    typeof c;  // "boolean"
 +
 +
    var d = String(c); // "true"
 +
    typeof d;  // "string"
 +
 +
----
 +
* https://www.uni-weimar.de/kunst-und-gestaltung/wiki/JavaScript
 +
----
 +
 +
== Template-Literale (template literals) ==
 +
 +
JavaScript erlaubt es, Ausdrücke in einen String einzuschließen, der von backticks (  `...`  ) begrenzt wird. Innerhab des Strings werden die Ausdrücke mit der Syntax ''${expression}'' dargestellt.
 +
 +
const land = "Deutschland";
 +
console.log(`Ich lebe in ${land}.`); // "Ich lebe in Deutschland."
 +
 +
const a = 3;
 +
const b = 7;
 +
console.log(`${a} + ${b} = ${a + b}`); // "3 + 7 = 10"
 +
 +
* https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String/template-literal
 +
* https://css-tricks.com/template-literals/
  
 
----
 
----
Zeile 188: Zeile 252:
  
 
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
 
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
 +
* https://wiki.selfhtml.org/wiki/JavaScript/Array
  
 
----
 
----
  
−
=== Funktionen ===
+
=== Methoden ===
  
−
* meinArray = ["abc", true, 5.5, 123] // Array(4) [ "abc", true, 5.5, 123 ]
+
* meinArray = [123, 5.5, true, "abc"] // Array(4) [ 123, 5.5, true, "abc" ]
 +
* meinArray.reverse();  // (4) [ "abc", true, 5.5, 123 ]
 
* meinArray[meinArray.length-1] // 123
 
* meinArray[meinArray.length-1] // 123
 
* meinArray.indexOf(5.5); // 2
 
* meinArray.indexOf(5.5); // 2
Zeile 201: Zeile 267:
 
* a // "rot"
 
* a // "rot"
 
* meinArray.join(); // "blau,abc,true,5.5,123" // Umwandlung von Array in String
 
* meinArray.join(); // "blau,abc,true,5.5,123" // Umwandlung von Array in String
 +
Mit ''console.dir(meinArray)'' lassen sich unter ''__proto__'' alle Methoden anzeigen.
 +
 +
----
 +
 +
* http://openbook.rheinwerk-verlag.de/javascript_ajax/34_referenz_002.htm#5fffb3e82cc3af9389c10244049d9592
 +
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
 +
* https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Array
  
 
----
 
----
Zeile 209: Zeile 282:
 
* zweitesArray = ["Katze", "Hund"] // Array [ "Katze", "Hund" ]
 
* zweitesArray = ["Katze", "Hund"] // Array [ "Katze", "Hund" ]
 
* drittesArray = ["links", "rechts", "geradeaus"] // Array(3) [ "links", "rechts", "geradeaus" ]
 
* drittesArray = ["links", "rechts", "geradeaus"] // Array(3) [ "links", "rechts", "geradeaus" ]
−
* viertesArray = meinArray.concat(zweitesArray, drittesArray);  
+
* viertesArray = meinArray.'''concat'''(zweitesArray, drittesArray);  
 
* viertesArray // Array(10) [ "blau", "abc", true, 5.5, 123, "Katze", "Hund", "links", "rechts", "geradeaus" ]
 
* viertesArray // Array(10) [ "blau", "abc", true, 5.5, 123, "Katze", "Hund", "links", "rechts", "geradeaus" ]
 +
 +
----
 +
 +
== Objekte ==
 +
 +
Datentyp ''Object'':
 +
var person = new Object();
 +
oder
 +
var person = {};
 +
person.name = "Otto";
 +
person.alter = 33;
 +
Ausgabe für ''person'' in der Konsole (Chromium):
 +
<nowiki>
 +
{name: "Otto", alter: 33}
 +
alter: 33
 +
name: "Otto"
 +
__proto__: Object
 +
</nowiki>
 +
 +
----
 +
 +
Objekt verwenden:
 +
<nowiki>
 +
function personVorstellen (){
 +
  document.write("Die Person heißt " + this.name + " und ist " + this.alter + " Jahre alt.");
 +
}
 +
person.vorstellen = personVorstellen;
 +
 +
person.vorstellen();
 +
</nowiki>
 +
Ausgabe:
 +
Die Person heißt Otto und ist 33 Jahre alt.
 +
 +
----
 +
 +
 +
Alternativ: literale Notation
 +
var person = {name: "Otto", alter: 33, vorstellen: personVorstellen }
  
 
----
 
----
Zeile 245: Zeile 356:
 
----
 
----
  
−
... und die ''for ... of''-Schleife:
+
... und die ''for ... of''-Schleife, iterierend über ein Array:
 
  <nowiki>
 
  <nowiki>
 
var a = [5, 4, 3, 0, 1, 2, 11, 22];
 
var a = [5, 4, 3, 0, 1, 2, 11, 22];
Zeile 254: Zeile 365:
 
         alert(summe); // Ausgabe: 48
 
         alert(summe); // Ausgabe: 48
 
</nowiki>
 
</nowiki>
 +
 +
----
 +
 +
... oder ein Array mit Objekten:
 +
<nowiki>
 +
    const passagiere = [
 +
    {
 +
        name: "Heinrich Flink",
 +
        ticketNumber: 111142
 +
    },
 +
    {
 +
        name: "Barack Obama",
 +
        ticketNumber: 222236
 +
    },
 +
    {
 +
        name: "Greta Thunberg",
 +
        ticketNumber: 333342
 +
    },
 +
    {
 +
        name: "Amal Clooney",
 +
        ticketNumber: 444411
 +
    }
 +
]
 +
 +
for (let p of passagiere) {
 +
    document.write('Einstieg ' + p.name + ' mit Ticket ' + p.ticketNumber +'<br>');
 +
}
 +
</nowiki>
 +
 +
----
  
 
== Funktionen ==
 
== Funktionen ==
Zeile 263: Zeile 404:
 
==== alert ====
 
==== alert ====
  
−
Mit ''alert()'' stellt man sicher, dass eine Meldung beim Benutzer ankommt.
+
Mit ''alert()'' stellt man sicher, dass eine Meldung beim Benutzer ankommt. Die Meldung wird als String ausgegeben.
  
 
----
 
----
 +
 
==== confirm ====
 
==== confirm ====
  
Zeile 278: Zeile 420:
  
 
Wenn der Benutzer "OK" klickt, gibt das Fenster den eingegebenen Wert zurück. Wenn der Benutzer "Cancel"/"Abbrechen" klickt, gibt das Fenster ''null'' zurück.
 
Wenn der Benutzer "OK" klickt, gibt das Fenster den eingegebenen Wert zurück. Wenn der Benutzer "Cancel"/"Abbrechen" klickt, gibt das Fenster ''null'' zurück.
 +
 +
Die Eingaben werden als Strings übernommen. Wenn man mit den Eingaben rechnen will, muss man sie erst mit <code>parseInt()</code> oder <code>parseFloat()</code> umwandeln.
 +
 +
----
  
 
----
 
----
Zeile 292: Zeile 438:
 
</nowiki>
 
</nowiki>
  
−
Bei direkter Funktionsausführung entfällt die globale Variable.
+
----
 +
 
 +
Die Funktion ist isoliert, vergleichbar einer Sandbox. Beispiel:
 +
<nowiki>
 +
var beispiel = 'blau'; // Globale Variable 'blau'
 +
 
 +
(function() { // Beginn der isolierten Zone.
 +
 
 +
    var beispiel = 'rot'; // In der isolierten Zone wird die gleiche Variable mit dem Wert 'rot' erzeugt.
 +
 
 +
    alert('In der isolierten Zone lautet die Farbe: ' + beispiel);
 +
 
 +
})(); // Ende der isolierten Zone. Hier erzeugte Variablen werden zerstört.
 +
 
 +
alert('In der nicht isolierten Zone lautet die Farbe: ' + beispiel); // Der abschließende Text enthält das Wort "blau". Die isolierte Zone hat keinen Einfluss auf den Rest des Codes.</nowiki>
 +
 
 +
----
 +
Es ist möglich, im globalen Code einen Wert aus einer isolierten Funktion zu übernehmen:
 +
<nowiki>
 +
dieFarbe = (function() { // Beginn der isolierten Zone.
 +
 
 +
    return 'rot'; // In der isolierten Zone wird der Wert 'rot' zurückgegeben.
 +
 
 +
})();
 +
 
 +
alert(dieFarbe); // Ausgabe: rot
 +
</nowiki>
  
 
----
 
----
Zeile 325: Zeile 497:
 
Grundsyntax:
 
Grundsyntax:
 
  () => { statements }  
 
  () => { statements }  
 +
Beispiel:
 +
<nowiki>
 +
const pfeil = (zahl1, zahl2) => {
 +
return zahl1 + zahl2;
 +
}
 +
const addition = pfeil(5,7);
 +
console.log(addition);</nowiki>
 +
Ausgabe: 12
 +
 +
----
  
 
* https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc
 
* https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc
Zeile 330: Zeile 512:
 
* https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Pfeilfunktionen
 
* https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Pfeilfunktionen
  
 +
----
 +
 +
== Date ==
 +
 +
Javascript ermittelt die Client-Uhrzeit.
  
 
----
 
----
  
−
 
+
=== Datumswerte ermitteln ===
−
== Date ==
 
  
 
  var datum = new Date();
 
  var datum = new Date();
Zeile 340: Zeile 526:
 
Ausgabe z. B.:
 
Ausgabe z. B.:
 
  26.9.2019, 10:24:43
 
  26.9.2019, 10:24:43
 +
 +
Weitere Zeitangaben:
 +
<nowiki>
 +
document.write(datum.getDate(),"<br>"); // Tag im Monat
 +
document.write(datum.getMonth() + 1,"<br>"); // Monat 0-basiert, daher + 1
 +
document.write(datum.getFullYear(),"<br>"); // getYear() gibt Jahr abzüglich 1900 an
 +
document.write(datum.getHours(),"<br>");
 +
document.write(datum.getMinutes(),"<br>");
 +
document.write(datum.getSeconds(),"<br>");
 +
</nowiki>
  
 
----
 
----
Zeile 355: Zeile 551:
 
----
 
----
  
 +
== Cookies ==
  
 +
Cookies werden über die Eigenschaft ''document.cookie'' erstellt und ausgelesen.
  
−
Die Funktion ist isoliert, vergleichbar einer Sandbox. Beispiel:
+
Die im Cookie gespeicherte Zeichenkette hat folgenden Aufbau (Schlüssel-Wert-Paare):
−
  <nowiki>
+
  "name=Wert; max-age=WertInSekunden; path=Pfad; domain=Domainname; secure"
−
var beispiel = 'blau'; // Globale Variable 'blau'
+
Statt ''max-age'' gibt es auch die Variante ''expires=Verfallszeit'' (veraltet).
−
 
 
−
(function() { // Beginn der isolierten Zone.
 
−
 
 
−
    var beispiel = 'rot'; // In der isolierten Zone wird die gleiche Variable mit dem Wert 'rot' erzeugt.
 
−
 
 
−
    alert('In der isolierten Zone lautet die Farbe: ' + beispiel);
 
−
 
 
−
})(); // Ende der isolierten Zone. Hier erzeugte Variablen werden zerstört.
 
−
 
 
−
alert('In der nicht isolierten Zone lautet die Farbe: ' + beispiel); // Der abschließende Text enthält das Wort "blau". Die isolierte Zone hat keinen Einfluss auf den Rest des Codes.</nowiki>
 
  
 
----
 
----
−
Es ist möglich, im globalen Code einen Wert aus einer isolierten Funktion zu übernehmen:
 
−
<nowiki>
 
−
dieFarbe = (function() { // Beginn der isolierten Zone.
 
  
−
    return 'rot'; // In der isolierten Zone wird der Wert 'rot' zurückgegeben.
+
Pfad: Nur Dateien, die unterhalb des Verzeichnisses der das Cookie setzenden Webseite liegen, können das Cookie lesen. Wird das Hauptverzeichnis der Homepage / angegeben, kann bekommen alle HTML-Dokumente des Servers Zugriff.
−
 
 
−
})();
 
−
 
 
−
alert(dieFarbe); // Ausgabe: rot
 
−
</nowiki>
 
  
 
----
 
----
  
−
== Cookies ==
+
* https://www.mediaevent.de/javascript/cookies.html
−
 
 
 
* https://www.w3schools.com/js/js_cookies.asp
 
* https://www.w3schools.com/js/js_cookies.asp
  
 
----
 
----
 +
 
== Promise / Future ==
 
== Promise / Future ==
 
   
 
   
Zeile 403: Zeile 583:
 
=== Links ===
 
=== Links ===
  
 +
* https://javascript.info/
 
* https://wiki.selfhtml.org/wiki/JavaScript
 
* https://wiki.selfhtml.org/wiki/JavaScript
 
* https://www.w3schools.com/js/
 
* https://www.w3schools.com/js/
 
* https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript
 
* https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript
 +
* https://developer.mozilla.org/en-US/
 
* https://developer.mozilla.org/de/Learn/JavaScript
 
* https://developer.mozilla.org/de/Learn/JavaScript
 
* https://www.peterkropff.de/site/javascript/javascript.htm
 
* https://www.peterkropff.de/site/javascript/javascript.htm
Zeile 413: Zeile 595:
 
* [https://codeburst.io/javascript-what-is-a-function-172e3488fcdc JavaScript — What is a function?]
 
* [https://codeburst.io/javascript-what-is-a-function-172e3488fcdc JavaScript — What is a function?]
 
* http://fizzy.school/ Lessons in JavaScript for anyone writing jQuery
 
* http://fizzy.school/ Lessons in JavaScript for anyone writing jQuery
−
* http://www.javascriptkit.com/
 
 
* https://eloquentjavascript.net/
 
* https://eloquentjavascript.net/
 
* https://www.javascript-kurs.de
 
* https://www.javascript-kurs.de

Aktuelle Version vom 19. Dezember 2020, 20:29 Uhr

Seitenübersicht
Zur Seite "JavaScript: DOM"
Zur Seite "JavaScript: Events"
Zur Seite "JavaScript: Beispiele"
Zur Seite "Webprogrammierung"
Zur Seite "HTML"
Zur Seite "CSS"


Grundgerüst

Inline-Script

<!DOCTYPE HTML>

<html lang="de">

<head>
<meta charset="UTF-8">
<title>Inline-Script</title>
</head>

<body onload="window.alert('Dokument geladen!')">
<div id="panel">
<script type="text/javascript">document.write("Hallo Welt!");</script>
</div> 
</body>

</html>

Script im Head-Bereich

Beispiel 01


<!DOCTYPE HTML>

<html lang="de">

<head>
<meta charset="UTF-8">
<title>Script im Head-Bereich</title>

<script type="text/javascript">

function init()
{
  document.getElementById( "panel" ).innerHTML = "Hallo: Javascript-Grüße aus dem Head-Bereich!";

  window.alert( "Dokument wurde geladen!" ) ;
}

</script>

</head>

<body onload = "init()" >
<div id="panel"></div> 
</body>

</html>

Script in eingebetteter Datei

HTML-Datei external.html: 

<!DOCTYPE HTML>

<html lang="de">

<head>
<meta charset="UTF-8">
<title>Externes Script</title>
<script type="text/javascript" src="external.js"></script>
</head>

<body> 
<div id="panel"></div> 
</body>

</html>

Datei "external.js": 

function init()
{
  document.getElementById( "panel" ).innerHTML = "Hallo... von einer externen JavaScript-Datei!" ;
  window.alert( "Dokument geladen!" ) ;
}
window.onload = init ;


JavaScript-Konsole aufrufen

Chrome

Menüsymbol rechts oben > Weitere Tools > Entwicklertools > Reiter Console

oder F12 / strg+shift+i, Reiter Console

Shortcut: ctrl+shift+j oder Mac: alt+cmd+j

IE

F12 > Reiter Console

Firefox

Menüsymbol rechts oben > Entwickler-Werkzeuge > Web-Konsole

Shortcut: ctrl+shift+k oder Mac: cmd+alt+k

Opera

Rechtsklick > Element untersuchen (öffnet Dragonfly)

Mac: Darstellung > Entwicklerwerkzeuge > Opera Dragonfly > Reiter Konsole.

Shortcut Mac: cmd+alt+i

(Press Ctrl+Shift+I (Cmd+Option+I on Mac) to launch Opera Dragonfly which is a fully featured development and debugging tool integrated into the Opera browser.)

Safari

Safari: > Einstellungen > Erweitert > Menü "Entwickler in der Menüleiste anzeigen" > In der Menüleiste im Menü "Entwickler" > Javascript-Konsole einblenden

Shortcut: ctrl+alt+c oder Mac: cmd+alt+c

(Enable the Developer Menu from Safari's preferences. It will give access the various tools (Error Console, Web Inspector, JavaScript Profiler, etc). Of course there are also shortcuts, like Cmd+Alt+C for the console.)


Datentypen

Den Datentyp identifiziert man mit dem Operator typeof.

string

  • Konkatenation: a = 5; b = '6'; a + b; // "56"
  • "abc".length; // 3
  • "abc"[1]; // "b"
  • "abc".slice(0,2); // "ab"
  • "abcdef".slice(2); // "cdef"
  • "abcdef".toUpperCase(); // "ABCDEF"
  • "aBCDef".toLowerCase(); // "abcdef"

number

  • Ganzzahlen: 12345
  • Gleitpunktzahlen: 5.5

boolean

  • true
  • false

undefined

var x; typeof(x); // "undefined"

Object

Siehe Objekte

Typumwandlung

Nicht-explizit

a = "3";
b = 4;
c = a + b; //  "34"

explizit

parseInt() 

   var a = "5";
   typeof a; // "string"
   var b = parseInt(a);
   typeof b; // "number"

parseFloat() 

   var a = "5.5";
   var b = parseFloat(a); //     // c hat den Wert 5.5
   typeof b; // "number"

Erstellen eines neuen Objekts der gewünschten Zielklasse: 

   var a = "5.5";
   var b = Number(a);  // 5.5
   typeof b;  // "number" 

   var c = Boolean(a);  //true
   typeof c;  // "boolean" 

   var d = String(c); // "true"
   typeof d;  // "string"

Template-Literale (template literals)

JavaScript erlaubt es, Ausdrücke in einen String einzuschließen, der von backticks ( `...` ) begrenzt wird. Innerhab des Strings werden die Ausdrücke mit der Syntax ${expression} dargestellt. 

const land = "Deutschland";
console.log(`Ich lebe in ${land}.`); // "Ich lebe in Deutschland."

const a = 3;
const b = 7;
console.log(`${a} + ${b} = ${a + b}`); // "3 + 7 = 10"

Arrays

Methoden

  • meinArray = [123, 5.5, true, "abc"] // Array(4) [ 123, 5.5, true, "abc" ]
  • meinArray.reverse(); // (4) [ "abc", true, 5.5, 123 ]
  • meinArray[meinArray.length-1] // 123
  • meinArray.indexOf(5.5); // 2
  • meinArray.push("rot") // Array(5) [ "abc", true, 5.5, 123, "rot" ]
  • meinArray.unshift("blau") // Array(6) [ "blau", "abc", true, 5.5, 123, "rot" ]
  • a = meinArray.pop(); // Array(5) [ "blau", "abc", true, 5.5, 123 ]
  • a // "rot"
  • meinArray.join(); // "blau,abc,true,5.5,123" // Umwandlung von Array in String

Mit console.dir(meinArray) lassen sich unter __proto__ alle Methoden anzeigen.

Arrays verbinden

  • meinArray = [ "blau", "abc", true, 5.5, 123 ]; // Array(5) [ "blau", "abc", true, 5.5, 123 ]
  • zweitesArray = ["Katze", "Hund"] // Array [ "Katze", "Hund" ]
  • drittesArray = ["links", "rechts", "geradeaus"] // Array(3) [ "links", "rechts", "geradeaus" ]
  • viertesArray = meinArray.concat(zweitesArray, drittesArray);
  • viertesArray // Array(10) [ "blau", "abc", true, 5.5, 123, "Katze", "Hund", "links", "rechts", "geradeaus" ]

Objekte

Datentyp Object: 

var person = new Object();

oder 

var person = {};
person.name = "Otto";
person.alter = 33;

Ausgabe für person in der Konsole (Chromium): 

{name: "Otto", alter: 33}
alter: 33
name: "Otto"
__proto__: Object

Objekt verwenden: 

function personVorstellen (){
  document.write("Die Person heißt " + this.name + " und ist " + this.alter + " Jahre alt.");
}
person.vorstellen = personVorstellen;

person.vorstellen();

Ausgabe: 

Die Person heißt Otto und ist 33 Jahre alt.


Alternativ: literale Notation 

var person = {name: "Otto", alter: 33, vorstellen: personVorstellen }

Schleifen

Es gibt die 3 von C "geerbten" Schleifen:

  • for(var i; /* bedingung */; /* inkrement/dekrement */) { /*anweisungsblock */ }
  • while( / *bedingung */ ) { /*anweisungsblock */ }
  • do { /*anweisungsblock */ } while( / *bedingung */ ) ;

Darüber hinaus gibt es die for ... in-Schleife: 

        var a = [5, 4, 3, 0, 1, 2, 11, 22];
        var summe = 0;
        for (let i in a) {
            summe += i;
        }
        alert(summe); // Ausgabe 001234567
        alert (typeof(summe)); // Ausgabe string


let a = [5,4,3,0,1,2,11,22];
            var summe = 0;
            for(let i in a){
                summe += a[i];
            }
        alert(summe); // Ausgabe: 48

... und die for ... of-Schleife, iterierend über ein Array: 

var a = [5, 4, 3, 0, 1, 2, 11, 22];
        var summe = 0;
        for (let i of a) {
            summe += i;
        }
        alert(summe); // Ausgabe: 48

... oder ein Array mit Objekten: 

    const passagiere = [
    {
        name: "Heinrich Flink",
        ticketNumber: 111142
    },
    {
        name: "Barack Obama",
        ticketNumber: 222236
    },
    {
        name: "Greta Thunberg",
        ticketNumber: 333342
    },
    {
        name: "Amal Clooney",
        ticketNumber: 444411
    }
]

for (let p of passagiere) {
    document.write('Einstieg ' + p.name + ' mit Ticket ' + p.ticketNumber +'<br>');
}

Funktionen

Popup-Fenster

alert

Mit alert() stellt man sicher, dass eine Meldung beim Benutzer ankommt. Die Meldung wird als String ausgegeben.

confirm

Das confirm()-Fenster wird verwendet, um eine Bestätigung einzuholen.

Wenn der Benutzer "OK" klickt, gibt das Fenster true zurück. Wenn der Benutzer "Cancel"/"Abbrechen" klickt, gibt das Fenster false zurück.

prompt

prompt() wird für Benutzereingaben verwendet.

Wenn der Benutzer "OK" klickt, gibt das Fenster den eingegebenen Wert zurück. Wenn der Benutzer "Cancel"/"Abbrechen" klickt, gibt das Fenster null zurück.

Die Eingaben werden als Strings übernommen. Wenn man mit den Eingaben rechnen will, muss man sie erst mit parseInt() oder parseFloat() umwandeln.

IIFE

Selbstauslösende Funktionen (Immediately Invoked Function Expression)[1]

Grundmuster:[2] 

(function () {
    //...
})();

Die Funktion ist isoliert, vergleichbar einer Sandbox. Beispiel: 

var beispiel = 'blau'; // Globale Variable 'blau'

(function() { // Beginn der isolierten Zone.

    var beispiel = 'rot'; // In der isolierten Zone wird die gleiche Variable mit dem Wert 'rot' erzeugt.
  
    alert('In der isolierten Zone lautet die Farbe: ' + beispiel);

})(); // Ende der isolierten Zone. Hier erzeugte Variablen werden zerstört.

alert('In der nicht isolierten Zone lautet die Farbe: ' + beispiel); // Der abschließende Text enthält das Wort "blau". Die isolierte Zone hat keinen Einfluss auf den Rest des Codes.

Es ist möglich, im globalen Code einen Wert aus einer isolierten Funktion zu übernehmen: 

dieFarbe = (function() { // Beginn der isolierten Zone.

    return 'rot'; // In der isolierten Zone wird der Wert 'rot' zurückgegeben.

})(); 

alert(dieFarbe); // Ausgabe: rot

Closures

Global variables can be made local (private) with closures.[3] 

function outside(){
	var x = 3;
	document.write("<p>Ergebnis: ")
		function inside(){
			innerst();
			document.write(x);
			}
				function innerst(){
					x *= 5;
			}
	inside();
	document.write(" Punkte</p>")
	}
outside();

Ausgabe: 

Ergebnis: 15 Punkte


Pfeilfunktionen / arrow functions

Grundsyntax: 

() => { statements }

Beispiel: 

const pfeil = (zahl1, zahl2) => {
	return zahl1 + zahl2;
}
const addition = pfeil(5,7);
console.log(addition);

Ausgabe: 12

Date

Javascript ermittelt die Client-Uhrzeit.

Datumswerte ermitteln

var datum = new Date();
document.write(datum.toLocaleString(),"
");

Ausgabe z. B.: 

26.9.2019, 10:24:43

Weitere Zeitangaben: 

document.write(datum.getDate(),"<br>"); // Tag im Monat
document.write(datum.getMonth() + 1,"<br>"); // Monat 0-basiert, daher + 1
document.write(datum.getFullYear(),"<br>"); // getYear() gibt Jahr abzüglich 1900 an
document.write(datum.getHours(),"<br>");
document.write(datum.getMinutes(),"<br>");
document.write(datum.getSeconds(),"<br>");

"use strict"

JSON

http://jsonplaceholder.typicode.com/posts

Cookies

Cookies werden über die Eigenschaft document.cookie erstellt und ausgelesen.

Die im Cookie gespeicherte Zeichenkette hat folgenden Aufbau (Schlüssel-Wert-Paare): 

"name=Wert; max-age=WertInSekunden; path=Pfad; domain=Domainname; secure"

Statt max-age gibt es auch die Variante expires=Verfallszeit (veraltet).

Pfad: Nur Dateien, die unterhalb des Verzeichnisses der das Cookie setzenden Webseite liegen, können das Cookie lesen. Wird das Hauptverzeichnis der Homepage / angegeben, kann bekommen alle HTML-Dokumente des Servers Zugriff.

Promise / Future

Quellen

Links

Sandboxes

Youtube

Bücher

| | |

Abgerufen von „https://flinkwiki.de/index.php?title=JavaScript&oldid=1708“