Semantische Sektionselemente

• <section>
• <article>
• <nav>,
• <header>
• <footer>

Silbentrennung

automatisch:

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

classList

Methoden

• add()
• remove() entfernt die Klasse
• toggle() wechselnd adden und removen der Klasse

Klicken fügt class="test" hinzu

Klasse hinzufügen   Klasse wechseln

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!

Textfeld erzeugen

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.

Align text

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

Parent node name

Beispiel-Liste

• Coffee
• Tea

Name des Parent-Tag

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

Farben rot grün blau gelb schwarz

 <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

• Bubbling: aufsteigen wie eine Luftblase im Wasser [false]
• Target: ist das Ziel
• Capturing: in das Wasser eintauchen [true]

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

Methoden von localStorage

• setItem(keyName,value)
• localStorage.key(i)
• getItem(keyName)
• removeItem(keyName)
• length
• clear()

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

svg transform Gruppe mit use vervielfältigt

svg Animation mit JavaScript rekursiv

svg imagemap