Dew

Eine einsteigerfreundliche JavaScript-Bibliothek, die HTML-Elemente umhüllt, damit du sie mit einfachen Eigenschaftszuweisungen und Methodenaufrufen steuern kannst — kein direktes DOM nötig.

Du schreibst box.color = 'red' und das Element wird rot. Das war's. Dew erledigt den Rest, damit du dich auf das Erlernen von JavaScript konzentrieren kannst — nicht auf das Auswendiglernen von Browser-APIs.

Einrichtung

Füge zwei <script>-Tags am Ende deines <body> ein. Dew muss zuerst kommen.

<!-- dein HTML oben -->

<script src="dew.js"></script>
<script src="script.js"></script>
</body>

Beide Skripte werden am Ende von <body> geladen, sodass das DOM bereits bereit ist — kein DOMContentLoaded nötig. Kein npm, keine Build-Tools, keine Imports.

bind(id)

Findet das Element mit der angegebenen id und gibt ein Proxy-Objekt zurück, das du steuern kannst.

let box = bind('box')

Wenn kein Element mit dieser id existiert, wirft Dew einen hilfreichen Fehler:

bind('box') — No element found with id "box". Did you add id="box" to your HTML?

Inhalt

Setze Text- oder HTML-Inhalt direkt am Proxy.

proxy.text

box.text = 'Hallo Welt'     // setzt textContent

Zahlen werden automatisch in Zeichenketten umgewandelt — kein Fehler.

proxy.html

box.html = '<b>Hallo</b> <em>Welt</em>'

proxy.html expects a string, got undefined

Gestaltung

Setze CSS-Stile als Eigenschaften. Numerische Werte erhalten automatisch die richtige Einheit (meistens px) — so wird box.size = 24 zu font-size: 24px. Vollständige CSS-Zeichenketten wie '2em' oder '50%' sind ebenfalls erlaubt.

Eigenschaft	Typ	Standardeinheit	Beispiel
color	string	—	`'red'`, `'#ff0000'`
background	string	—	`'blue'`, `'#fff'`
size	number / string	px	`24` → `"24px"`
width	number / string	px	`200` → `"200px"`
height	number / string	px	`100` → `"100px"`
padding	number / string	px	`16` → `"16px"`
margin	number / string	px	`8` → `"8px"`
border	string	—	`'1px solid black'`
radius	number / string	px	`8` → `"8px"`
display	string	—	`'flex'`, `'none'`
flex	number / string	—	`1`, `'row'`
opacity	number 0–1	—	`0.5`
visible	boolean	—	`false` → `display:none`

let box = bind('box')
box.width      = 200
box.height     = 80
box.background = 'steelblue'
box.radius     = 12
box.opacity    = 0.85

proxy.visible

box.visible = false   // versteckt das Element
box.visible = true    // zeigt es wieder an

Fehlermeldungen

proxy.size expects a number (e.g. 24) or a CSS string (e.g. '24px'), got 'big'

proxy.opacity expects a number between 0 and 1, got 5

proxy.visible expects true or false, got 'yes'

Formulare

Lese und schreibe Werte bei <input>-, <textarea>- und <select>-Elementen.

proxy.value

feld.value = 'hallo'    // setzt den Wert
let v = feld.value    // liest den aktuellen Wert

proxy.placeholder

feld.placeholder = 'Hier eingeben...'

proxy.disabled

btn.disabled = true    // deaktiviert das Element
btn.disabled = false   // aktiviert es wieder

Fehlermeldungen

proxy.value can only be used on input, textarea or select elements. Did you mean proxy.text?

proxy.disabled expects true or false, got 'yes'

Kindelemente

Füge dynamisch Kindelemente hinzu oder entferne sie.

proxy.addChild(html)

liste.addChild('<li>Neuer Eintrag</li>')

proxy.clear()

liste.clear()    // entfernt alle Kindelemente

Fehlermeldungen

proxy.addChild() expects an HTML string like '<div>Jane</div>', got plain text 'Jane'. Did you mean proxy.text?

proxy.addChild() expects an HTML string, got number

Events

Füge Event-Listener hinzu, indem du eine Funktion an eine Ereignismethode übergibst.

proxy.onClick(fn)

btn.onClick(() => {
  // wird beim Klicken ausgeführt
})

proxy.onInput(fn)

Wird bei jedem Tastendruck aufgerufen. Erhält den aktuellen Eingabewert.

feld.onInput((wert) => {
  // wird bei jedem Tastendruck ausgeführt
  console.log(wert)
})

proxy.onChange(fn)

Wird aufgerufen, wenn das Feld den Fokus verliert oder der Benutzer eine Option auswählt. Erhält den Wert.

feld.onChange((wert) => {
  // wird bei Fokusverlust ausgeführt
})

proxy.onHover(einFn, ausFn)

Nimmt zwei Funktionen: eine für das Betreten, eine für das Verlassen mit der Maus.

box.onHover(
  () => { box.background = 'steelblue' },
  () => { box.background = '#eee' }
)

Fehlermeldungen

proxy.onClick() expects a function, got string. Try: proxy.onClick(() => { ... })

proxy.onHover() expects two functions: one for mouse enter, one for mouse leave