Kleiner JavaScript Kurs

HTML / CSS / JavaScript Editor

Version 1.1.5 (10.04.2021)
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)



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)




  • 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.