Testseite: Unterschied zwischen den Versionen

Aus Flinkwiki
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „ Test für B. Kategorie: Alle Seiten“)
 
Zeile 1: Zeile 1:
  
  
−
Test für B.
 
  
  
 +
== Grundgerüst ==
  
 +
=== Inline-''Script'' ===
 +
<nowiki>
 +
<!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>
  
 +
</nowiki>
  
 +
----
  
 +
=== ''Script'' im Head-Bereich ===
 +
==== Beispiel 01 ====
  
 +
<nowiki>
  
 +
<!DOCTYPE HTML>
  
 +
<html lang="de">
  
 +
<head>
 +
<meta charset="UTF-8">
 +
<title>Script im Head-Bereich</title>
  
 +
<script type="text/javascript">
  
−
[[Kategorie: Alle Seiten]]
+
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>
 +
 
 +
</nowiki>
 +
 
 +
----
 +
 
 +
=== ''Script'' in eingebetteter Datei ===
 +
HTML-Datei external.html:
 +
<nowiki>
 +
<!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>
 +
 
 +
</nowiki>
 +
 
 +
----
 +
Datei "external.js":
 +
<nowiki>
 +
function init()
 +
{
 +
  document.getElementById( "panel" ).innerHTML = "Hallo... von einer externen JavaScript-Datei!" ;
 +
  window.alert( "Dokument geladen!" ) ;
 +
}
 +
window.onload = init ;
 +
 
 +
</nowiki>
 +
 
 +
 
 +
----
 +
 
 +
== Javascript-Konsole aufrufen ==
 +
=== Chrome ===
 +
Menüsymbol rechts oben > Weitere Tools > Entwicklertools > Reiter ''Console''
 +
 
 +
oder F12 / <code>strg+shift+i</code>, Reiter ''Console''
 +
 
 +
Shortcut: <code>ctrl+shift+j</code> oder Mac: <code>  alt+cmd+j</code>
 +
 
 +
----
 +
 
 +
=== IE ===
 +
 
 +
F12 > Reiter ''Console''
 +
 
 +
----
 +
=== Firefox===
 +
<!--Just use FireBug.-->
 +
Menüsymbol rechts oben > Entwickler-Werkzeuge > Web-Konsole
 +
 
 +
Shortcut: <code>ctrl+shift+k</code> oder Mac: <code>  cmd+alt+k</code>
 +
 
 +
----
 +
 
 +
=== Opera ===
 +
Rechtsklick > Element untersuchen (öffnet Dragonfly)
 +
 
 +
Mac: Darstellung > Entwicklerwerkzeuge > Opera Dragonfly > Reiter Konsole.
 +
 
 +
Shortcut Mac: <code>  cmd+alt+i</code>
 +
 
 +
(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: <code>ctrl+alt+c</code> oder Mac: <code>  cmd+alt+c</code>
 +
 
 +
(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.[https://www.w3schools.com/js/js_function_closures.asp]
 +
 
 +
----
 +
 
 +
== 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:[https://wiki.selfhtml.org/wiki/IIFE]
 +
<nowiki>
 +
(function () {
 +
    //...
 +
})();
 +
</nowiki>
 +
 
 +
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://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
 +
* [https://codeburst.io/javascript-what-is-a-function-172e3488fcdc 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 ===
 +
 
 +
* [https://www.youtube.com/watch?v=5WqO5u2at-A JavaScript Tutorial]
 +
 
 +
----
 +
 
 +
 
 +
[[Kategorie: Alle Seiten]] | [[Kategorie: Internet]] | [[Kategorie: Web]] | [[Kategorie: Programmierung ]]

Version vom 19. September 2019, 07:32 Uhr



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

| | |

Abgerufen von „https://flinkwiki.de/index.php?title=Testseite&oldid=919“