JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div id="zeigeMeineVariable"></div>
<hr />
<div id="zahlenreiche"></div>
<hr />
<div id="klickMe">Klick mich an :-)</div>
<hr />
<div id="messages" class="warning">Nachricht</div>
<hr />
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>

CSS

#klickMe{
    border: 1px solid #ccc;
    width: 120px;
    cursor: pointer;
}

.warning{
    border: 10px solid red;
    padding: 5px;
    background-color: #ffccff;    
}

JavaScript

$(document).ready( function() {

    //Deklarieren Sie die Variable "meineVariable"; weisen Sie der Variable einen Wert zu und geben Sie anschließend den Wert der Variable in Ihrem HTML-Dokument aus.
        
        var meineVariable; // variable initialisieren
        meineVariable = 'Das ist mein Wert'; // variable deklarieren
        $("#zeigeMeineVariable").html(meineVariable); // variable im HTML anzeigen lassen

/* *************************************************************************************** */
    
    //Wie lassen sich einzeilige und mehrzeilige Kommentare in den JavaScript-Quelltext einbetten?
    
        // einzeilig
    
        /*
        mehr
        zeilig
        */
    
/* *************************************************************************************** */    
    
    //Definieren Sie eine Schleife mit zehn Schleifenläufen, die bei jedem Durchlauf die Nummer des Laufes auf dem Bildschirm ausgibt: 
    
    var start = 1; // startwert
    var ende = 10; // endwert
    // definiere 1 mit dem inhalt von start, Abbruchbedingung ist wenn i kleiner gleich ende, erhöhe i um 1
    for(i = start;i <= ende;i++){
        // HTML element -> append = "am ende IM Element anfügen" -> die zählvariable i und ein <br /> f+r den umbruch
        $("#zahlenreiche").append(i+"<br/>");
        // variabeln und Strings werden ganz einfach mit einem + verbunden
    }

/* *************************************************************************************** */
    
    // Was bewirkt die folgende jQuery-Anweisung? 
    // $(document).ready( function() {...});    
    
        // document bedeutet das ganze Dokument
        // ready bedeutet das alles was in der nachfolgenden Funktion steht erst dann ausgeführt wird wenn die ganze Seite zu 100% geladen wurde - die macht man damit man sichergehen kann das alle HTML-Elemente existieren damit möglicher jQuery Code was darauf zugrift auch funktionieren kann

/*...