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 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" ]
Closures
Global variables can be made local (private) with closures.[1]
"use strict"
Pfeilfunktionen / arrow functions
Grundsyntax:
() => { statements }
JSON
http://jsonplaceholder.typicode.com/posts
IIFE
Selbstauslösende Funktionen
Grundmuster:[2]
(function () { //... })();
Bei direkter Funktionsausführung entfällt die globale Variable.
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
| | |