Die e-learning Lernplattform
ichlerns  online
Home > Coden > Nützliches und Brauchbares

Semantische Sektionselemente

Silbentrennung

automatisch:

p {
hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
}

classList

Methoden

Klicken fügt class="test" hinzu

 

Code

 <style>
     .rot{
         background-color: red;
         transition: background-color 2s;
     }
 </style>
 
 <p id="test_class">Klicken fügt class="test" hinzu</p>
 
 <button onclick="add_class()">class hinzufügen</button>

 <script>
     function add_class() {
         document.querySelector("#test_class").classList.add("rot");
     }
    
     function wechsle_class() {
         document.querySelector("#test_class").classList.toggle("rot");
     }
 </script>

Html element

Element

Klicken erzeugt IMMER ein neues Textfeld!

Code3

 <p>Klicken erzeugt IMMER ein neues Textfdeld!</p>

 <button onclick="myFunction()">Textfeld erzeugen</button>
 <div id="ziel"></div>
 <script>
    function myFunction() {
        var x = document.createElement("INPUT");
        x.setAttribute("type", "text");
        x.setAttribute("value", "Hello World!");
        document.getElementById("ziel").appendChild(x);
    }
</script>

Liste Elemente Eigenschaften und Methoden siehe: w3schools.com

Style

This is an example paragraph.

Code2

 <p id="demo"p>This is an example paragraph.</p>

 <button type="button" onclick="myFunction()">Align text</button>

 <script>
     function myFunction() {
         document.getElementById("demo").style.textAlign = "center";
     }
 </script>

 <p id="demo"></p>

Liste der Style Eigenschaften siehe: w3schools.com

Element über Style ein ausblenden

function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == "block")
e.style.display = "none";
else
e.style.display = "block";
}

Parent node name

Beispiel-Liste

Code4

 <p>Beispiel-Liste:</p>
 <ul>
     <li id="myLI">Coffee</li>
     <li>Tea</li>
 </ul>
 <button onclick="myFunction()">Name des Parent</button>
 <p id="demo"></p>

 <script>
     function myFunction() {
         document.getElementById("demo").innerHTML = document.getElementById("myLI").parentNode.nodeName;
     }
 </script>

Formulare

Auswahlliste

 <form>
     <label>Farben
         <select size="1">
             <option>rot</option>
             <option>grün</option>
             <option>blau</option>
             <option>gelb</option>
             <option>schwarz</option>
         </select>
     </label>
 </form>

Formularelement Schieberegler

 <div>
     <input type="range" min="1" max="100" value="50" id="variiere">
 </div>

Ausgewertet mit JavaSript

Der Wert wird während der Schieberegler verschoben wird angezeigt. Code Idee übernommen von: w3scools.com

Value:

 <span id="ergebnis"></span>
            
 <script>
     var slider = document.querySelector("#variiere");
     var output = document.querySelector("#ergebnis");
     output.innerHTML = slider.value;

     slider.oninput = function() {
         output.innerHTML = this.value;
     }
 </script>

event

Bubbling - Target - Capturing

Es ist entscheidend, in welchem Teil des Textes geklickt wird. Das ist ein Beispiel-Element mit einem wichtigen Text.

Code

 <div id="absatz">
     Dies ist ein Beispiel-Element mit einem <strong id="wichtig"> wichtigen <b>Text</b> </strong>.
 </div>
 
 <script>
     function clickHandler(event) {
        window.alert('event.target.nodeName = ' + event.target.nodeName + ' this.nodeName = ' + this.nodeName);
     }
     
     document.getElementById("absatz").onclick = clickHandler;
 </script>
            
Quelle: molily.de

event.stopPropagation()

Liste der Eventhandler
zusammengestellt von werner-zenk.de

Speichern

Sitzung verwenden

Es besteht die Möglichkeit die Key:Value - Paare local im Browser abzuspeichern, sodass sie später wieder aufgerufen werden können. Dies kann entweder dauerhaft mit localstorage oder nur für den Zeitraum einer Sitzung mit localsession geschehen.

Beispiel

Die Key Value Paare lauten:
gruen:00f, rot:f00, blau:0f0

| Ausgabefenster \_________





Methoden von localStorage

sessonStorage nur für die altuelle Sitzung

Im Gegensatz zu Cookies ist diese Methode sicherer und schneller, da die Daten bei Server-Requests nicht automatisch übertragen werden. Es können größere Datenmengen (mind. 5 MB) gespeichert werden. Beachten Sie: Datensparsamkeit und Datensicherheit Wenn Sie Daten speichern, sollten Sie die Benutzer immer darüber informieren, was und warum Sie diese Daten speichern. Web Storage hat hier den Vorteil, dass die Daten auf dem Computer des Nutzers bleiben und er die Kontrolle über seine Daten behält. Wenn der Browsercache geleert wird, sind alle gespeicherten Daten weg. Tesxt übernommen aus: Quelle; SELFHTML

Lokale Datei (.txt) öffnen

siehe www.mediaevent.de

Datei (.txt) über download sichern

siehe blog.homepage-webhilfe.de
und unterschiedliche Lösungen auf www.it-swarm.com.de

im Fenster scrollen

Anwendungen für das Scrollen zu Html Elementen siehe javascript.info

Ab einer Fensterposition starten siehe: werner-zenk.de

svg

svg viewBox

Doppelt so groß:

svg width="200" height="200" viewBox="0 0 100 100"

svg animate ungruppiert

vorher nachher

svg transform Gruppe mit use vervielfältigt

100,100

svg Animation mit JavaScript rekursiv

svg imagemap

Mount Rushmore National Memorial
Welche App - Klicken Sie auf die Knöpfe.
< zurück   |   vor >
Nutzungsbedingungen | Datenschutz | Impressum
veröffentlicht unter CC BY 4.0 Autor: Roland Geyer