25:["$","title",null,{"children":"Data-Driven Web Engineering: jQuery (mit Lösungen) | pmeschenmoser-hslu | Observable"}] 49:[] 29:{"id":"3b4f20791b77a60c","slug":null,"title":"Data-Driven Web Engineering: jQuery (mit Lösungen)","thumbnail":"c2e0a014552d96983913fe8949c12ec34c64fb811ab8c7c67df789c59dfb9dd4","access_level":"public","create_time":"$D2023-04-05T12:11:17.357Z","update_time":"$D2023-04-05T12:11:17.357Z","view_time":null,"first_public_time":"$D2023-04-05T12:11:17.357Z","has_unpublished_edits":null,"fork":{"id":"58f157becbf2b0e3","slug":null,"title":"Data-Driven Web Engineering: jQuery (mit Lösungen)","owner":{"id":"d453c31c6f30f58d","login":"pmeschenmoser-hslu","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"d453c31c6f30f58d","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":499,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a3b6ff689928461","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5a3b6ff689928461","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data-Driven Web Engineering: jQuery (mit Lösungen)","cells":[{"id":0,"value":"# Data-Driven Web Engineering: jQuery (mit Lösungen)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"- Bisher haben wir JavaScript-Code geschrieben, der in modernen Browsern ganz ohne fremden Code oder fremde Bibliotheken ausführbar ist.\n- Heute schauen wir uns einige Methoden aus der Bibliothek jQuery an: \"jQuery is a **fast, small, and feature-rich** JavaScript library. It makes things like HTML document **traversal and manipulation, event handling, animation, and Ajax much simpler** with an easy-to-use API that works across a multitude of browsers. **With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.**\"\n- Bibliotheken können über den HTML *script*-Tag eingebunden werden:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":413,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":419,"value":"- Auch für JavaScript gibt es Paketmanager (z.B. npm, vgl. conda in Python), dann erfolgt nach der Installation der Import in JavaScript mittels *import* bzw. *require*. Letzteres können wir auch in ObservableHQ (ohne individuellen Paketmanager) anwenden:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"$$ = require('jquery')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"## 1. Selektion, Zugriff und Anpassung","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"- Ähnlich wie in CSS, können auch in JavaScript HTML-Elemente referenziert bzw. selektiert werden. Dies kann einerseits durch Standardmethoden wie *document.getElementById(...)*, andererseits mithilfe von jQuery (und vielen zugehörigen, sehr handlichen Methoden) umgesetzt werden.\n- Wie genau erfolgt die Selektion? Schauen wir uns zunächst die zwei folgenden HTML-Elemente an:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"- Aber was fängt man nun mit solch einer Selektion ein? Zunächst kreieren wir für die nächsten Zellen ein weiteres HTML-Element. Beobachten Sie stets, wie sich dieses nach der Ausführung einer der folgenden Zellen verändert.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"

\n Meine Zahl:\n

\n Ja, wirklich:\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"- Wenden wir die *text*-Methode auf einer Selektion an, wird der übergebene Text in jedem selektierten Element gesetzt. In der folgenden Zelle runden wir eine Zufallszahl und nutzen einen Nachfahrenselektor um alle div-Elemente innerhalb des Elements mit der ID *beispiel2* zu erhalten. Dort wird die Zufallszahl als Text gesetzt, also zweimal.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"{\n const zufallszahl = Math.round(Math.random()*100);\n $('#beispiel2 div').text(zufallszahl);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"- Wird der *text*-Methode kein Argument mitgegeben, so wird der aktuelle enthaltene Text zurückgegeben.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"{\n console.log($('#beispiel2 div').first().text());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"- Wenn Sie nicht nur den Text setzen und abfragen möchten, sondern auch den enthaltenen HTML-Code, können Sie einfach die *html*-Methode analog verwenden:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"{\n $('#beispiel2 div').last().html('???');\n //Und natürlich kann auch das HTML einer Selektion abgefragt werden:\n console.log($('#beispiel2 div').last().html());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"- Mit der *css*-Methode können Sie wiederum Werte für Style-Eigenschaften setzen und auslesen:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"{\n $('#beispiel2').css('background-color', 'red'); //rote Schriftfarbe\n console.log($('#beispiel2').css('background-color')); //rgb(255,0,0)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"- Den Wert eines interaktiven Eingabefelds können Sie einfach mithilfe der *val*-Methode auslesen und setzen:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":215,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"{\n const v = $('#meinInput').val();\n console.log(v); \n $('#meinInput').val('Letzte Eingabe:' + v);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"- **Aufgabe 1.1**: Nutzen Sie jQuery, um die CSS-Eigenschaft *width* des Elements mit der ID '#beispiel2' auf '200px' zu setzen.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"{ //Ihre Lösung:\n $('#beispiel2').css('width', '200px'); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"- **Aufgabe 1.2**: Nutzen Sie jQuery, um die CSS-Eigenschaft *width* des Elements mit der ID '#beispiel2' auf einen zufälligen Pixelwert zwischen 200 und 250 zu setzen.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":230,"value":"{ //Ihre Lösung:\n const randWidth = 200 + Math.random()*1000\n console.log(randWidth);\n console.log($('#beispiel2'))\n //$('#beispiel2').width(randWidth); \n $('#beispiel2').css('width', randWidth + 'px'); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"- **Aufgabe 1.3**: Gegeben ist das folgende div-Element. Nutzen Sie Math.random(), um eine zufällige Farbe auszuwählen. Setzen Sie daraufhin diese Farbe mithilfe von jQuery als Hintergrundfarbe des div-Elements. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"

Ich erhalte eine zufällige Hintergrundfarbe...