JavaScript: Unterschied zwischen den Versionen
Flinh1 (Diskussion | Beiträge) (→Arrays) |
Flinh1 (Diskussion | Beiträge) (→Links) |
||
(72 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">'''[[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 143: | Zeile 148: | ||
---- | ---- | ||
− | |||
− | |||
− | === | + | == Datentypen == |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | Den Datentyp identifiziert man mit dem Operator ''typeof''. | |
− | |||
− | |||
− | |||
* https://javascript.info/types | * https://javascript.info/types | ||
Zeile 203: | 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 209: | 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 | ||
---- | ---- | ||
− | === | + | === Methoden === |
− | * meinArray = ["abc" | + | * 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 222: | 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 230: | 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 } | ||
+ | |||
+ | ---- | ||
+ | |||
+ | == 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: | ||
+ | <nowiki> | ||
+ | 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 | ||
+ | </nowiki> | ||
+ | |||
+ | <nowiki> | ||
+ | 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 | ||
+ | </nowiki> | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ... und die ''for ... of''-Schleife, iterierend über ein Array: | ||
+ | <nowiki> | ||
+ | var a = [5, 4, 3, 0, 1, 2, 11, 22]; | ||
+ | var summe = 0; | ||
+ | for (let i of a) { | ||
+ | summe += i; | ||
+ | } | ||
+ | alert(summe); // Ausgabe: 48 | ||
+ | </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 == | ||
+ | |||
+ | === Popup-Fenster === | ||
+ | |||
+ | * https://www.w3schools.com/js/js_popup.asp | ||
+ | |||
+ | ==== 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 <code>parseInt()</code> oder <code>parseFloat()</code> umwandeln. | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ---- | ||
+ | |||
+ | === IIFE === | ||
+ | |||
+ | Selbstauslösende Funktionen (Immediately Invoked Function Expression)[https://developer.mozilla.org/en-US/docs/Glossary/IIFE] | ||
+ | |||
+ | Grundmuster:[https://wiki.selfhtml.org/wiki/IIFE] | ||
+ | <nowiki> | ||
+ | (function () { | ||
+ | //... | ||
+ | })(); | ||
+ | </nowiki> | ||
+ | |||
+ | ---- | ||
+ | |||
+ | 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> | ||
---- | ---- | ||
− | == " | + | === Closures === |
+ | |||
+ | Global variables can be made local (private) with closures.[https://www.w3schools.com/js/js_function_closures.asp] | ||
+ | |||
+ | <nowiki> | ||
+ | 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();</nowiki> | ||
+ | Ausgabe: | ||
+ | Ergebnis: 15 Punkte | ||
− | |||
---- | ---- | ||
− | == Pfeilfunktionen / arrow functions == | + | === Pfeilfunktionen / arrow functions === |
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 258: | Zeile 514: | ||
---- | ---- | ||
− | == | + | == Date == |
− | + | ||
− | + | Javascript ermittelt die Client-Uhrzeit. | |
---- | ---- | ||
− | == | + | === Datumswerte ermitteln === |
− | + | var datum = new Date(); | |
+ | document.write(datum.toLocaleString(),"<br>"); | ||
+ | Ausgabe z. B.: | ||
+ | 26.9.2019, 10:24:43 | ||
− | + | Weitere Zeitangaben: | |
<nowiki> | <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> | </nowiki> | ||
− | + | ---- | |
+ | |||
+ | == "use strict" == | ||
+ | |||
+ | * https://www.w3schools.com/js/js_strict.asp | ||
+ | |||
+ | ---- | ||
+ | |||
+ | == JSON == | ||
+ | |||
+ | http://jsonplaceholder.typicode.com/posts | ||
---- | ---- | ||
Zeile 281: | Zeile 553: | ||
== Cookies == | == 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. | ||
+ | |||
+ | ---- | ||
+ | |||
+ | * 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 297: | 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 307: | 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 | ||
− | * | + | * https://eloquentjavascript.net/ |
− | + | * https://www.javascript-kurs.de | |
+ | ---- | ||
+ | * https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web | ||
* https://jquery.org/ | * https://jquery.org/ | ||
* https://www.freeformatter.com/javascript-minifier.html | * https://www.freeformatter.com/javascript-minifier.html | ||
* https://vuejs.org/ The Progressive JavaScript Framework | * https://vuejs.org/ The Progressive JavaScript Framework | ||
+ | |||
+ | ---- | ||
+ | |||
+ | === Sandboxes === | ||
+ | |||
+ | * http://jsbin.com/ | ||
+ | * https://codepen.io/pen/ | ||
+ | * https://jsfiddle.net/ | ||
---- | ---- |
Aktuelle Version vom 19. Dezember 2020, 20:29 Uhr
Inhaltsverzeichnis
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"
- https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String/template-literal
- https://css-tricks.com/template-literals/
Arrays
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
- https://wiki.selfhtml.org/wiki/JavaScript/Array
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.
- 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
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
- https://javascript.info/
- https://wiki.selfhtml.org/wiki/JavaScript
- https://www.w3schools.com/js/
- https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript
- https://developer.mozilla.org/en-US/
- https://developer.mozilla.org/de/Learn/JavaScript
- https://www.peterkropff.de/site/javascript/javascript.htm
- http://odyssey.sdlm.be/javascript.htm Exercices JavaScript interactifs
- https://openclassrooms.com/fr/courses/6175841-apprenez-a-programmer-avec-javascript/6278392-declarez-des-variables-et-modifiez-leurs-valeurs
- https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/introduction-au-javascript
- JavaScript — What is a function?
- http://fizzy.school/ Lessons in JavaScript for anyone writing jQuery
- https://eloquentjavascript.net/
- https://www.javascript-kurs.de
- https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web
- https://jquery.org/
- https://www.freeformatter.com/javascript-minifier.html
- https://vuejs.org/ The Progressive JavaScript Framework
Sandboxes
Youtube
Bücher
- Johann Pardanaud, Sébastien de la Marck: Découvrez le langage JavaScript, Paris 2017 (EYROLLES)
- Eric Freeman / Elisabeth Robson: JavaScript-Programmierung von Kopf bis Fuß, Köln 2015
- Nick Morgan: JavaScript kinderleicht, Heidelberg 2015 (dpunkt)
- Mike McGrath: JavaScript. create functions for the web, Warwickshire 2015
| | |