JavaScript: Unterschied zwischen den Versionen

Aus Flinkwiki
Wechseln zu: Navigation, Suche
(Youtube)
Zeile 221: Zeile 221:
  
 
----
 
----
 +
=== Bücher ===
 +
 +
* [https://www.eyrolles.com/Informatique/Livre/decouvrez-le-langage-javascript-9782212143997/ Johann Pardanaud, Sébastien de la Marck: Découvrez le langage JavaScript, Paris 2017 (EYROLLES)]
 +
 +
----
 +
  
  
 
[[Kategorie: Alle Seiten]] | [[Kategorie: Internet]] | [[Kategorie: Web]] | [[Kategorie: Programmierung ]]
 
[[Kategorie: Alle Seiten]] | [[Kategorie: Internet]] | [[Kategorie: Web]] | [[Kategorie: Programmierung ]]

Version vom 19. September 2019, 08:05 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.)


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


Youtube


Bücher


| | |