Kleiner JavaScript Kurs

HTML / CSS / JavaScript Editor

Version 1.5 (26.07.2023)
Datei
Achtung: damit alles funktioniert, muss in Firefox der "Schutz vor Aktivitätsverfolgung" deaktiviert werden.

#ff0000



  • Keine eigenen Bilder


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)



  • 26.07.2023: Version 1.5: Eigene Bilder können jetzt geladen und verwendet werden (z.B im img - Tag oder auf dem Canvas). Dank an meinen Sohn Jannes für die Programmierung.
  • 01.02.2023: Version 1.4: Neue Vorlage: Ulli's Turtle - Modul
  • 14.10.2022: Version 1.3: Neu: über eine Dropdownliste können HTML / JavaScript - Vorlagen ausgewählt werden u.a. ein Turtle - Modus und eine HTML Datei mit einem Canvas. Außerdem wurden einige Bugs beseitigt.
  • 06.07.2022: Version 1.2.1: Die Schriftgröße kann jetzt vergrößert und verkleinert werden
  • 06.08.2021: Version 1.2.0: Autovervollständigen und Eingabevorschläge ergänzt. Die Funktion ist noch in der Testphase und kann bei Bedarf abgeschaltet werden.
  • 10.04.2021: Version 1.1.5: Bei Auswahl von JavaScript und CSS werden links neben den Zeilennummern Syntaxfehler angezeigt.
  • 07.04.2021: Version 1.1.4: Color-Picker zum Ermitteln des Farb-Hex-Wertes
  • 18.03.2021: Version 1.1.3: Fehler beim arbeiten mit Chrome behoben.
  • 15.02.2021: Version 1.1.2: Beim öffnen von Dateien wird der Dateiname in das Feld "Datei" übernommen.
  • 02.10.2020: Version 1.1: Automatisches Tag-Schliessen und Schliessen von " und ([{.
CodeMirror is an open-source project shared under an MIT license.