<![CDATA[
# Events
```js
var bilder = $('img')
bilder.click(rand)
function rand() {
$(this).css({'border': '5px solid blue'})
}
```
## Bilderrahmen
Baue auf deiner Website ein, dass ein Klick auf ein beliebiges Bild diesem einen blauen Rahmen gibt
## Bilderrahmen 2
Erweitere die Bilderrahmenaufgabe so, dass ein weiterer Klick auf ein beliebiges Bild diesem den Rahmen wieder wegnimmt
## Knopfposition
Baue auf deiner Website ein kleines Formular ein (siehe https://jsfiddle.net/s1zuev5L/). Programmiere dann, dass sobald
ein Besucher mit der Maus über
den "Absenden"-Knopf fährt, sich dieser wegverschiebt.
Bonus: verschiebe ihn jedes Mal, wenn man mit der Maus drüberfährt an eine neue zufällige
Position. Verwende dazu statt dem `click`-Ereignis das `mouseover`-Ereignis.
## Fokus
Erweitere das Formular so, dass wenn man ein Eingabefeld mit der Maus anwählt, dieses leicht eingefärbt wird. Du kannst die
Farbe selber wählen. Verwende dazu das Ereignis für den `focus`-Event statt `click`.
## Websitefarbe
Öffne beim Laden der Seite ein Prompt-Fenster, das den Besucher nach einer Farbe (auf englisch) fragt. Setze dann die
Hintergrundfarbe auf die eingegebene Farbe. Wenn du Code direkt beim Laden ausführen willst, kannst
du den Code einfach direkt ins script-Tag schreiben.
Eine Eingabe von `blue` soll z.B. die Farbe auf blau setzen.
## Anfang der Seite
Baue auf deiner Website am unteren Rand der Seite ein Bild ein und programmiere, dass ein Klick darauf
zum Anfang der Seite scrollt. Um zum Seitenanfang zu scrollen, kannst du den Code `window.scrollTo(0, 0)` verwenden.
# Lösungen
## Bilderrahmen
```js
var bilder = $('img')
bilder.click(rahmen)
function rahmen(e) {
$(this).css({'border': '1px solid blue'})
}
```
## Bilderrahmen 2
```js
var bilder = $('img')
bilder.click(rahmen)
function rahmen(e) {
if($(this).css('border') == '1px solid blue') {
$(this).css({'border': 'none'})
} else {
$(this).css({'border': '1px solid blue'})
}
}
```
## Knopfposition
```js
var knopf = $('input[type=submit]')
knopf.mouseover(verschieben)
function verschieben(e) {
var x = Math.random() * 1000
var y = Math.random() * 1000
knopf.css({'position': 'absolute', 'left': x + 'px', 'right': y + 'px'})
}
```
## Fokus
```js
var felder = $('input')
felder.focus(farbe)
function farbe(e) {
$(this).css({'background-color': 'lightblue'})
}
```
## Websitefarbe
```js
var farbe = prompt("Welche Farbe?")
$('body').css({'background-color': farbe})
```
## Anfang der Seite
```js
var button = $('button')
button.click(nachOben)
function nachOben(e) {
window.scrollTo(0, 0)
}
```
]]>