JavaScript: Unterschied zwischen den Versionen

Version vom 20. September 2019, 07:33 Uhr

Seitenübersicht

Zur Seite "Webprogrammierung"

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

https://www.w3schools.com/js/js_popup.asp

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.

Closures

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

Pfeilfunktionen / arrow functions

Grundsyntax:

() => { statements }

https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Pfeilfunktionen

JSON

http://jsonplaceholder.typicode.com/posts

IIFE

Selbstauslösende Funktionen

Grundmuster:[2]

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

Bei direkter Funktionsausführung entfällt die globale Variable.

Cookies

https://www.w3schools.com/js/js_cookies.asp

Promise / Future

https://wiki.selfhtml.org/wiki/JavaScript/Promise

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise

Quellen

Links

https://jquery.org/
https://www.freeformatter.com/javascript-minifier.html
https://vuejs.org/ The Progressive JavaScript Framework

Youtube

JavaScript Tutorial

Bücher

| | |

@@ Zeile 140: / Zeile 140: @@
 (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 ==
+* https://www.w3schools.com/js/js_popup.asp
+=== 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.
 ----