Kleiner JavaScript Kurs

HTML / CSS / JavaScript Editor

Version 2.4 (15.08.2025) Falls diese neue Version nicht richtig funktioniert, gehts hier zum alten HTML/CSS/JavaScript Editor

Datei Link einfügen für: | |
Externe JavaScript Dateien können in die HTML Seite mit <script src="Dateiname.js"></script> eingebunden werden z.B. <script src="test.js"></script>
Externe css Dateien können in die HTML Seite mit <link href="Dateiname.css" rel="stylesheet"> eingebunden werden z.B. <link href="test.css" rel="stylesheet">
Datei
Externe JavaScript Dateien können in die HTML Seite mit <script src="Dateiname.js"></script> eingebunden werden z.B. <script src="test.js"></script>
Datei
Externe JavaScript Dateien können in die HTML Seite mit <script src="Dateiname.js"></script> eingebunden werden z.B. <script src="test1.js"></script>
Datei
Externe css Dateien können in die HTML Seite mit <link href="Dateiname.css" rel="stylesheet"> eingebunden werden z.B. <link href="test.css" rel="stylesheet">

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)

f_italien.gif
Italien

f_deutschl.gif
Deutschland

f_polen.gif
Polen

f_portug.gif
Portugal

f_schwed.gif
Schweden

f_irland.gif
Irland

f_finnland.gif
Finnland

f_zypern.gif
Zypern

f_oesterr.gif
Österreich

f_belgien.gif
Belgien

f_slowakei.gif
Slowakei

f_slowenien.gif
Slowenien

f_lettland.gif
Lettland

f_spanien.gif
Spanien

f_luxemb.gif
Luxemburg

f_rumaen.gif
Rumänien

f_griechenl.gif
Griechenland

f_estland.gif
Estland

f_ungarn.gif
Ungarn

f_litau.gif
Litauen

f_malta.gif
Malta

f_niederl.gif
Niederlande

f_bulgar.gif
Bulgarien

f_daenem.gif
Dänemark

f_tschech.gif
Tschechien

f_frankr.gif
Frankreich

f_kroatien.gif
Kroatien

cat.png (512x512)

frog.png (389x387)

bird.png (512x512)

rabbitrun01.gif

rabbitrun02.gif

rabbitrun03.gif

rabbitrun04.gif

rabbitrun05.gif

rabbitrun06.gif

rabbitrun07.gif

rabbitrun08.gif

papier.gif 200x200px

schere.gif 200x200px

stein.gif 200x200px

images/phaser/sky.png 800x600px

images/phaser/platform.png 400x32px

images/phaser/star.png 24x22px

images/phaser/bomb.png 14x14px

images/phaser/dude.png Sprite 288x24px

Schnick, Schnack, Schnuck Bilder von
Von Sertion, CC BY-SA 3.0, Link


Textdateien können mit JavaScript folgendermaßen eingelesen werden: 
<body>
    <input type="file" id="dateiEingabe" accept=".txt, .csv" onchange="readFile()">
    <script>
      function readFile(){
        var eingabeFile = document.getElementById("dateiEingabe");
        var dateien= eingabeFile.files;
        var dateiname = dateien[0].name;
        window.alert(dateiname);
        var reader=new FileReader();
        reader.readAsText(dateien[0]);
        reader.onload=function(event){
            var fileData=reader.result;
            window.alert(fileData);
            var liste = fileData.split("\n");
            window.alert(liste[2]);
            }
        }
    </script>
</body>
id="sipl14_zone1.txt"
id="sipl14_zone2.txt"
id="textDatei.txt"
id="sipl16_witz.txt"


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)

Spiele Engine Phaser: phaser.js

Processing: p5.js



  • 15.08.2025: Version 2.4: Die Processing Grafikbiliothek (p5.js) kann jetzt verwendet werden. Beispiele für 2D und 3D Grafik sind in der Vorlagen Dropdown Liste. Ein kurzes Tutorial zu p5.js findet ihr demnächst im Menüpunkt "Verwendung von JavaScript Frameworks / Extensions". Zur Verwendung der Spiele Engine Phaser gibt es auch in den Vorlagen ein Beispiel - Spiel. Das Phaser Tutorial unter "Verwendung von JavaScript Frameworks / Extensions" - "Spielentwicklung mit Phaser 3" ist schon eine Zeit lang online.
  • 24.03.2025: Version 2.3: Neu: KI Hilfe (frag einfach ChatGPT wie etwas in HTML / CSS ooder JavaScript geht ...). Hilfe zur KI - Hilfe gibt es hier.
  • 05.09.2024: Version 2.2: Neu: 3 Buttons zum Einfügen von Links für die css - Datei, die js 1 - Datei oder die js 2 - Datei in die html - Datei. Bitte immer die Buttons verwenden, dann gibt es keine Schreibfehler.
  • 28.08.2024: Version 2.1: Ich habe noch eine Editor - Seite ergänzt. Jetzt gibt es Seiten für html, css und 2 Seiten für JavaScript (js 1 und js 2). Damit können auch die Beispiele aus dem (sehr guten) Buch "JavaScript für KIDS" von Hans-Georg Schumann (mitp Verlag) online ausgeführt werden.
  • 27.08.2024: Version 2.0: Großes Update ! Es sind jetzt 3 Editor - Seiten für die getrennte Eingabe von html, JavaScript(js) und css vorhanden.
  • 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.