Arbeiten mit dem DOM

Die Layer einer Webpage

HTML (Struktur / Markup)

• body, head
• p, ul, li, …
• div, span, …
• img, …

    Google

CSS (Darstellung)

h1 {
    color: red;
    font-weight: bold;
    font-family: "Garamond", serif;
}

h1 {}  /* Element */

/* Zugriff über Attribute */
#name {}  /* Attribut ID bsp.  */
.name {}  /* Attribut Klasse  */
input[type="text"] {}  /* Element mit Attribut  */

JavaScript

Programmieren im Browser

Wie wäre es mit …

• auf Nutzerverhalten reagiern,
• und dieses Verhalten tracken.
• Akkus von Telefonen leer saugen?
• oder aber auch einfach ein verteilter Bitcoin Miner?
  “There is no cloud. Just other people's computers.“

JavaScript …

… hat durchaus seine Kritiker

“Data data data. Publishers crave data — […] JavaScript has brought the web to the brink of ruin […]“ (John Gruber)

… denn ohne JavaScript gäbe und bräuchte es keine Ad- oder Tracking-Blocker.

JavaScript

Nochmal zurück - wann passiert eigentlich was?

JavaScript

Warte bis fertig, dann fange an.

$(document).ready(function(event) {
    // do something
});

jQuery

Warum eigentlich?

Browser verhalten sich oft unterschiedlich, jQuery bietet hierfür einheitliche Funktionen (Events, AJAX...)

document.addEventListener('DOMContentLoaded', function(event) {
    // do something *
    // * "DOMContentLoaded is supported by over 90%+ of browsers, 
    //   though not IE8":
});

$(document).ready(function(event) {
    // do something
});

jQuery

Warum? - Selektoren

Selektoren erlauben einen einfachen Zugriff auf den DOM

ohne jQuery

console.log(document.getElementById('firstHeading'));

mit jQuery

console.log($('#firstHeading'));

Events

Um auf ein Event zu reagieren, registriert man sich auf dieses:

• Klick auf DOM-Element (onClick)
• Tastatureingabe (keyup, keydown)
• Ereignisse wie „document ready“

https://api.jquery.com/category/events/

jQuery - on-Click Beispiel

Klick

mit click()

var myClickAlert = function() {
  alert("Handler for click() called.");
}

$("body").click(myClickAlert);

mit on()

$("body").on('click', function() {
  alert("Handler for on('click') called.");
});