JavaScript im Browser

JavaScript im Browser

Beispiele in der Browser-Konsole

alert();
open('https://google.com', '_self');
prompt("What's your name?");
Math.random();

Document Object Model

DOM (Document Object Model) = JavaScript-API für Interaktion mit dem HTML-Inhalt

DOM Grundlagen

• document.getElementById()
• document.querySelector()
• element.innerHTML =

DOM Grundlagen - Beispiele

• Zufallszahl
• Aktuelles Datum

DOM: Stile und Attribute (href, ...)

• element.style
• element.className
• element.classList (.add, .remove, .toggle, .contains)

DOM: createElement, appendChild

• document.createElement()
• element1.appendChild(element2)
• element1.removeChild(element2)
• element2.remove() // not IE

DOM: createElement, appendChild - Beispiele

• Schachbrett
• Todo-Liste (nicht interaktiv)

Events

• setTimeout()
• setInterval()
• element.addEventListener('click', ...)

Events - Beispiele

• Uhr
• Countdown
• Spiel: click the box

Formulare und Formular-Events

Beispiel: Todo-Liste

Debuggen im Browser

Debuggen im Browser

debugger Statement

Debuggen im Browser

Breakpoints:

• setzen von Breakpoints
• Aktivieren / Deaktivieren von Breakpoints

Debugger im Browser

Manuell weiterspringen:

• play / pause
• step over / Schritt darüber: in die nächste Zeile
• step into / Schritt hinein: einem Funktionsaufruf folgen
• step out / Schritt heraus: aktuellen Funktionsaufruf verlassen

Debugger im Browser

Beobachten von Variablen

JavaScript: Drag and drop

Themen

• Drag and drop
• JavaScript Wiederholung / Vertiefung

Vorschau: Resultate

Vorwissen / Wiederholung

• for ... of
• Template-Strings
• Pfeilfunktionen

• getElementById / getElementsByClassName / querySelectorAll
• addEventListener
• innerText / innerHTML
• preventDefault

Drag and drop

• Drag and drop von Elementen innerhalb eines HTML-Dokuments (in ein anderes Element hinein)
• Drag and drop von Elementen außerhalb des Browsers in das Dokument hinein (z.B. Text in ein Eingabefeld hinein)
• Drag and drop von Elementen innerhalb des Browser nach draußen (z.B. Text in einen Texteditor)

Draggable

Elemente, die standardmäßig "draggable" sind:

• ausgewählter Text
• Bilder
• Links

Frage: praktische Anwendung? / Wohin können wir ziehen?

Draggable

weitere Elemente "draggable" machen:

<div draggable="true">drag me!</div>

Drag-Events

welche Drag-Events gibt es?

und auf welchen Elementen werden diese ausgelöst?

Drag and drop events

Events des "bewegten" Elements:

• dragstart
• drag
• dragend

Events des Ziels:

• dragenter
• dragover
• dragleave
• drop

Events

Übung: mehrere "draggable" Elemente, die jeweils anzeigen, wie of sie schon "gedraggt" wurden

Drag and drop

"drop" auf Elementen erlauben:

bei "dragenter" und "dragover" Events des Ziels .preventDefault() aufrufen

function onDragEnter(event) {
  event.preventDefault();
}
function onDragOver(event) {
  event.preventDefault();
}

Drag and drop

auf "drop" reagieren:

function onDrop(event) {
  event.preventDefault();
  event.target.innerText += ' drop ';
}

Drag and drop

Übung: ein Element das mitzählt, wie oft auf es gedroppt wurde

Drag and drop: Daten mitgeben

Bei "drag start" Daten bestimmter Formate mitgeben:

function onDragStart(event) {
  event.dataTransfer.setData('text/plain', 'foo bar');
  event.dataTransfer.setData(
    'text/html',
    '<em>foo</em> bar'
  );
}

Beispiel: Draggen von HTML-Inhalten nach Word und in einen Plain-Text-Editor

Drag and drop: Daten mitgeben und wieder auslesen

bei "drag start" Daten eines Bestimmten Types mitgeben:

function onDragStart(event) {
  event.dataTransfer.setData('text/plain', 'foo');
}

bei "drag end" Daten auslesen:

function onDrop(event) {
  event.preventDefault();
  const data = event.dataTransfer.getData('text/plain');
}

Drag and drop: Daten übertragen

Übung: verschiedene Produkte, die in den Einkaufswagen gezogen werden können

Drag and drop: Elemente verschieben

Wir können auch ein ganzes Element durch drag and drop in ein anderes Element verschieben lassen

Drag and drop: Elemente verschieben

Verfahren: Der Dateneintrag, der übergeben wird, kann die ID des Elements sein - basierend darauf können wir das verschobene Element in sein neues Elternelement verschieben

Übungen

• Lotto - Generator
• uhr
• Todo-Liste
• chessboard
• facebook
• es6