Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>jQuery</title> <meta name="viewport" content="width=792, user-scalable=no"> <base target="_blank"> <link rel="stylesheet" href="/assets/styles/presentation.css"> </head> <body class="list"> <div class="notes"> <a href="text.html" target="_parent">♯</a> <a href="/notes/" target="_blank">♫</a> </div> <header class="caption"> <h1>jQuery</h1> </header> <section id="jquery" class="slide cover"><div><h2>jQuery</h2> <footer> <ul> <li>freie JavaScript-Bilbiothek (Werkzeugsammlung)</li> <li>DOM-Navigation, -Manipulierung, Animation, Events, Helfer (<code class="language-plaintext highlighter-rouge">each</code>), Ajax</li> <li>nivelliert Browser-Unterschiede und -Fehler</li> <li>2006 von John Resig veröffentlicht</li> <li>Meistverwendete Bibliothek: Drei Viertel der Top 10k nutzen sie</li> <li>Reichhaltiges Plugin-Ökosystem</li> </ul> </footer> </div></section> <section class="slide" id="traversieren"><div><h2>Traversieren</h2> <pre class="highlight language-js" data-lang="js"><code><span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#id .klasse element[attr]:special-jquery-stuff</span><span class="dl">'</span><span class="p">);</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#container .panel h1:first</span><span class="dl">'</span><span class="p">);</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.panel</span><span class="dl">'</span><span class="p">).</span><span class="nf">find</span><span class="p">(</span><span class="dl">'</span><span class="s1">h1</span><span class="dl">'</span><span class="p">).</span><span class="nf">parent</span><span class="p">().</span><span class="nf">eq</span><span class="p">(</span><span class="mi">2</span><span class="p">).</span><span class="nf">next</span><span class="p">().</span><span class="nf">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">index</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span> <span class="nx">index</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">: </span><span class="dl">'</span> <span class="o">+</span> <span class="nf">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nf">text</span><span class="p">()</span> <span class="p">);</span> <span class="p">});</span> </code></pre> <footer> <ul> <li>Fluent Interfaces / Chaining</li> </ul> </footer> </div></section> <section class="slide" id="manipulieren"><div><h2>Manipulieren</h2> <pre class="highlight language-js" data-lang="js"><code><span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#id .klasse element[attr]:special-jquery-stuff</span><span class="dl">'</span><span class="p">);</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#container .panel h1:first</span><span class="dl">'</span><span class="p">).</span><span class="nf">css</span><span class="p">(</span><span class="dl">'</span><span class="s1">color</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">red</span><span class="dl">'</span><span class="p">);</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.panel</span><span class="dl">'</span><span class="p">).</span><span class="nf">toggleClass</span><span class="p">(</span><span class="dl">'</span><span class="s1">active</span><span class="dl">'</span><span class="p">).</span><span class="nf">empty</span><span class="p">().</span><span class="nf">html</span><span class="p">(</span><span class="dl">'</span><span class="s1">Stille</span><span class="dl">'</span><span class="p">);</span> </code></pre> </div></section> <section class="slide" id="events"><div><h2>Events</h2> <pre class="highlight language-js" data-lang="js"><code><span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.btn</span><span class="dl">'</span><span class="p">).</span><span class="nf">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nf">random</span><span class="p">()</span> <span class="o">></span> <span class="mf">0.5</span><span class="p">)</span> <span class="p">{</span> <span class="nx">e</span><span class="p">.</span><span class="nf">preventDefault</span><span class="p">();</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">input</span><span class="dl">'</span><span class="p">).</span><span class="nf">val</span><span class="p">(</span><span class="dl">''</span><span class="p">)</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Hupsi ...</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="p">});</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.message</span><span class="dl">'</span><span class="p">).</span><span class="nf">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">keyup</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">input</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.counter</span><span class="dl">'</span><span class="p">).</span><span class="nf">html</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">length</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"> Zeichen</span><span class="dl">'</span><span class="p">);</span> <span class="p">});</span> </code></pre><footer> <ul> <li>Event-Delegation: Ausnutzen des Event-Bubblings, indem von höher gelegenem Element Events seiner Kinder überwacht werden</li> <li>Ganz toll, wenn dynamisch Elemente hinzugefügt, weil höher gelegener Listener diese automatisch mit überwacht</li> </ul> </footer> </div></section> <section class="slide" id="effekte"><div><h2>Effekte</h2> <pre class="highlight language-js" data-lang="js"><code><span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">input</span><span class="dl">'</span><span class="p">).</span><span class="nf">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">keyup</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">sesam öffne dich</span><span class="dl">'</span><span class="p">)</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.sesam</span><span class="dl">'</span><span class="p">).</span><span class="nf">slideDown</span><span class="p">(</span><span class="mi">1000</span><span class="p">).</span><span class="nf">delay</span><span class="p">(</span><span class="mi">3000</span><span class="p">).</span><span class="nf">fadeOut</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span> <span class="p">});</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">input</span><span class="dl">'</span><span class="p">).</span><span class="nf">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">keydown</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">swoosh</span><span class="dl">'</span><span class="p">)</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.sesam</span><span class="dl">'</span><span class="p">).</span><span class="nf">animate</span><span class="p">({</span> <span class="na">width</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">toggle</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">swing</span><span class="dl">'</span><span class="p">],</span> <span class="na">height</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">toggle</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">swing</span><span class="dl">'</span><span class="p">],</span> <span class="na">opacity</span><span class="p">:</span> <span class="dl">'</span><span class="s1">toggle</span><span class="dl">'</span> <span class="p">},</span> <span class="mi">2000</span><span class="p">);</span> <span class="p">});</span> </code></pre> </div></section> <section class="slide" id="ajax-mit-jquery"><div><h2>Ajax mit jQuery</h2> <pre class="highlight language-js" data-lang="js"><code><span class="nx">jQuery</span><span class="p">.</span><span class="nf">ajax</span><span class="p">(</span> <span class="nx">url</span><span class="p">,</span> <span class="nx">settings</span> <span class="p">);</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nf">post</span><span class="p">(</span> <span class="nx">url</span><span class="p">,</span> <span class="nx">data</span><span class="p">,</span> <span class="nf">success</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">textStatus</span><span class="p">,</span> <span class="nx">jqXHR</span><span class="p">),</span> <span class="nx">dataType</span> <span class="p">);</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span> <span class="nx">url</span><span class="p">,</span> <span class="nx">data</span><span class="p">,</span> <span class="nf">success</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">textStatus</span><span class="p">,</span> <span class="nx">jqXHR</span><span class="p">),</span> <span class="nx">dataType</span> <span class="p">);</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nf">getJSON</span><span class="p">(</span> <span class="nx">url</span><span class="p">,</span> <span class="nx">data</span><span class="p">,</span> <span class="nf">success</span><span class="p">(</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">textStatus</span><span class="p">,</span> <span class="nx">jqXHR</span> <span class="p">)</span> <span class="p">);</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nf">getScript</span><span class="p">(</span> <span class="nx">url</span><span class="p">,</span> <span class="nf">success</span><span class="p">(</span><span class="nx">script</span><span class="p">,</span> <span class="nx">textStatus</span><span class="p">,</span> <span class="nx">jqXHR</span><span class="p">)</span> <span class="p">);</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.element</span><span class="dl">'</span><span class="p">).</span><span class="nf">load</span><span class="p">(</span> <span class="nx">url</span><span class="p">,</span> <span class="nx">data</span><span class="p">,</span> <span class="nf">complete</span><span class="p">(</span><span class="nx">responseText</span><span class="p">,</span> <span class="nx">textStatus</span><span class="p">,</span> <span class="nx">XMLHttpRequest</span><span class="p">)</span> <span class="p">);</span> </code></pre> </div></section> <section class="slide" id="jquery-ajax"><div><h2>jQuery: <code class="language-plaintext highlighter-rouge">ajax</code></h2> <pre class="highlight language-js" data-lang="js"><code><span class="nx">$</span><span class="p">.</span><span class="nf">ajax</span><span class="p">({</span> <span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">api/createUser.php</span><span class="dl">'</span><span class="p">,</span> <span class="na">data</span><span class="p">:</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">42</span><span class="p">,</span> <span class="p">},</span> <span class="na">datatype</span><span class="p">:</span> <span class="dl">'</span><span class="s1">json</span><span class="dl">'</span><span class="p">,</span> <span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">POST</span><span class="dl">'</span><span class="p">,</span> <span class="na">success</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Response</span><span class="dl">'</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span> <span class="p">}</span> <span class="p">});</span> </code></pre> </div></section> <section class="slide" id="jquery-get-und-post"><div><h2>jQuery: <code class="language-plaintext highlighter-rouge">get</code> und <code class="language-plaintext highlighter-rouge">post</code></h2> <p>Kurzformen von <code class="language-plaintext highlighter-rouge">$.ajax()</code> für HTTP GET und POST.</p> <pre class="highlight language-js" data-lang="js"><code><span class="nx">$</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">ajax/test.html</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.result</span><span class="dl">'</span><span class="p">).</span><span class="nf">html</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span> <span class="p">});</span> <span class="nx">$</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span> <span class="dl">'</span><span class="s1">test.php</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">John</span><span class="dl">'</span><span class="p">,</span> <span class="na">time</span><span class="p">:</span> <span class="dl">'</span><span class="s1">2pm</span><span class="dl">'</span> <span class="p">}</span> <span class="p">);</span> <span class="nx">$</span><span class="p">.</span><span class="nf">post</span><span class="p">(</span><span class="dl">'</span><span class="s1">ajax/test.html</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.result</span><span class="dl">'</span><span class="p">).</span><span class="nf">html</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span> <span class="p">});</span> <span class="nx">$</span><span class="p">.</span><span class="nf">post</span><span class="p">(</span> <span class="dl">'</span><span class="s1">test.php</span><span class="dl">'</span><span class="p">,</span> <span class="nf">$</span><span class="p">(</span> <span class="dl">'</span><span class="s1">#testform</span><span class="dl">'</span> <span class="p">).</span><span class="nf">serialize</span><span class="p">()</span> <span class="p">);</span> </code></pre> </div></section> <section class="slide" id="jquery-getjson"><div><h2>jQuery: <code class="language-plaintext highlighter-rouge">getJSON</code></h2> <pre class="highlight language-js" data-lang="js"><code><span class="c1">// Kurzform von</span> <span class="nx">$</span><span class="p">.</span><span class="nf">ajax</span><span class="p">({</span> <span class="na">dataType</span><span class="p">:</span> <span class="dl">'</span><span class="s1">json</span><span class="dl">'</span><span class="p">,</span> <span class="na">url</span><span class="p">:</span> <span class="nx">url</span><span class="p">,</span> <span class="na">data</span><span class="p">:</span> <span class="nx">data</span><span class="p">,</span> <span class="na">success</span><span class="p">:</span> <span class="nx">success</span> <span class="p">});</span> <span class="c1">// url + '?callback=funktionsName' → JSONP</span> <span class="nx">$</span><span class="p">.</span><span class="nf">getJSON</span><span class="p">(</span><span class="dl">'</span><span class="s1">ajax/options.json</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">; $.each(data, function(key, val) { options += </span><span class="dl">'</span><span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="dl">"</span><span class="s2">' + key + '</span><span class="dl">"</span><span class="o">></span><span class="dl">'</span><span class="s1"> + val + </span><span class="dl">'</span><span class="o"><</span><span class="sr">/option>'</span><span class="err">; </span> <span class="p">});</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.dropdown</span><span class="dl">'</span><span class="p">).</span><span class="nf">html</span><span class="p">(</span><span class="nx">options</span><span class="p">);</span> <span class="p">});</span> <span class="c1">// options.json: { 'one': 'Einer', 'two': 'Zwei', 'three': 'Drei' }</span> </code></pre> </div></section> <section class="slide" id="jquery-ajax-promises"><div><h2>jQuery: Ajax Promises</h2> <p><q>Load JSON-encoded data from the server using a GET HTTP request.</q></p> <pre class="highlight language-js" data-lang="js"><code><span class="kd">var</span> <span class="nx">jqxhr</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">example.php</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">success</span><span class="dl">'</span><span class="p">);</span> <span class="p">})</span> <span class="p">.</span><span class="nf">done</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">second success</span><span class="dl">'</span><span class="p">);</span> <span class="p">})</span> <span class="p">.</span><span class="nf">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">error</span><span class="dl">'</span><span class="p">);</span> <span class="p">})</span> <span class="p">.</span><span class="nf">always</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">finished</span><span class="dl">'</span><span class="p">);</span> <span class="p">});</span> <span class="c1">// ... andere Answeisugen ...</span> <span class="nx">jqxhr</span><span class="p">.</span><span class="nf">always</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">second finished</span><span class="dl">'</span><span class="p">);</span> <span class="p">});</span> </code></pre> </div></section> <section class="slide" id="links"><div><h2>Links</h2> <ul> <li><a href="http://try.jquery.com/">try.jquery.com</a></li> <li><a href="http://learn.jquery.com/">learn.jquery.com</a></li> <li><a href="http://api.jquery.com/">api.jquery.com</a></li> <li><a href="http://devdocs.io/jquery/">devdocs.io/jquery</a></li> </ul> </div></section> <div class="progress"><div></div></div> <script src="/assets/scripts/shower.js"></script> <script src="/assets/scripts/shower-notes.js"></script> <script src="/assets/scripts/editor.js"></script> <script> document.querySelectorAll('[bg]').forEach(el => el.style.backgroundImage = `url(${el.attributes.bg.value})`); </script> </body> </html>