Kleiner JavaScript Kurs
HTML / CSS / JavaScript Editor
Version 1.4 (01.02.2023)
Datei
Achtung: damit alles funktioniert, muss in Firefox der "Schutz vor Aktivitätsverfolgung" deaktiviert werden.
#ff0000
Die Fotos liegen im Ordner "images". Sie können z.B. so verwendet werden:
<img src="images/beetle.gif">beetle.gif (34x40)
crab.png (68x50)
football.gif (50x49)
car0.png (50x100)
car1.png (50x100)
car2.png (50x100)
w0.gif (33x31)
w1.gif (33x31)
w2.gif (33x31)
w3.gif (33x31)
w4.gif (33x31)
w5.gif (33x31)
w6.gif (33x31)
sack.gif (50x50)
schatz.gif (50x50)
mario_sprites.png (389x354)
pirat_1.png - pirat_4.png (144x256)
pirat_5.png (144x256)
santa_1.png (144x256)
drachen_gold.png und drachen_rot.png (432x512)
huhn_0.gif (36x30)
huhn_1.gif (36x30)
labyrinth.gif (800x600)
colorparcours.png (501x501)
winter.jpg (800x600)
Die JavaScript Bibliotheken liegen im Ordner "js". Sie können z.B. so verwendet werden:
<script src="js/jquery.js"></script>jQuery: jquery.js
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
</head>
<body>
<button>fade Beispiel 1</button>
<button>fade Beispiel 2</button>
<p>Dieser Absatz wird langsam, linear ein-/ausgeblendet.</p>
<p>Dieser Absatz hat eine schnelle Animation.</p>
<div id="log"></div>
<script>
$( "button" ).first().click(function() {
$( "p" ).first().fadeToggle( "slow", "linear" );
});
$( "button" ).last().click(function() {
$( "p" ).last().fadeToggle( "fast", function() {
$( "#log" ).append( "<div>erledigt</div>" );
});
});
</script>
</body>Bootstrap 3: bootstrap.js
<head>
<meta charset="utf-8">
<!-- Bootstrap Haupt-CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-warning btn-lg active" role="button" aria-pressed="true">Link</a>
<!-- Bootstrap Haupt-JavaScript -->
<script src="js/bootstrap.js"></script>
</body>
d3: d3.js
Math.js: math.js
Turtle: cturtle.js (funktioniert nur zusammen mit d3.js und babel.min.js)