Testseite
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.)
Closures
Global variables can be made local (private) with closures.[1]
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
- https://jquery.org/
- https://www.freeformatter.com/javascript-minifier.html
- https://vuejs.org/ The Progressive JavaScript Framework
Youtube
| | |
