JavaScript
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.)
Popup-Fenster
alert
Mit alert() stellt man sicher, dass eine Meldung beim Benutzer ankommt.
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.
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"
Arrays
Funktionen
- meinArray = ["abc", true, 5.5, 123] // Array(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
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" ]
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:
var a = [5, 4, 3, 0, 1, 2, 11, 22]; var summe = 0; for (let i of a) { summe += i; } alert(summe); // Ausgabe: 48
Funktionen
IIFE
Selbstauslösende Funktionen (Immediately Invoked Function Expression)[1]
Grundmuster:[2]
(function () { //... })();
Bei direkter Funktionsausführung entfällt die globale Variable.
Closures
Global variables can be made local (private) with closures.[3]
Pfeilfunktionen / arrow functions
Grundsyntax:
() => { statements }
"use strict"
Pfeilfunktionen / arrow functions
Grundsyntax:
() => { statements }
JSON
http://jsonplaceholder.typicode.com/posts
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
Cookies
Promise / Future
Quellen
Links
- https://wiki.selfhtml.org/wiki/JavaScript
- https://www.w3schools.com/js/
- https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript
- 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
- http://www.javascriptkit.com/
- https://jquery.org/
- https://www.freeformatter.com/javascript-minifier.html
- https://vuejs.org/ The Progressive JavaScript Framework
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
| | |