Kleiner JavaScript Kurs

HTML / CSS / JavaScript Editor

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


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)




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