Lösungen - jQuery

Hier gibt es Lösungen, welche Sie mit Ihren Ausarbeitungen vergleichen können. Vielleicht haben Sie bereits bessere Formulierungen gefunden, vielleicht fehlen noch einige Punkte in Ihrer Lösung, ...
Auf jeden Fall ist es erforderlich, dass Sie sich selbst Gedanken zu den gestellten Aufgaben machen, um etwas zu lernen. Der einfache Ausdruck dieser Lösungen taugt nicht zum Lernen. ;-)

Tipps und Tricks

Markieren eines Objekts ausschalten:

Aufgabe 1

  1. Was ist ein Framework?

    z.B. ... eine erweiterte Programmierumgebung mit vielen Zusatzfunktionen, welche die Erstellung von Programmen vereinfachen

  2. Was ist jQuery?

    z.B. ... ein Framework

  3. Wofür kann man jQuery verwenden?

    z.B. ... einfache dynamische CSS3-Formatierung von Elementen, einfache Eventhandler-Verwendung, eigene Plug-Ins, ...

Aufgabe 2

Im Beitrag könnten z.B. folgende Fakten erwähnt werden:
  1. Alles was man mit jQuery tut, kann auch direkt in javascript geschrieben werden, aber ...
  2. jQuery kümmert sich darum, dass das von Ihnen mit Hilfe von jQuery-Funktionen geschriebene Programm in allen Browsern funktioniert.
  3. Bei jQuery handelt es sich um eine javascript-Bibliothek, d.h. eine Sammlung von vielen leistungsfähigen Funktionen, die einem Programmierer das Leben vereinfachen.
  4. jQuery begünstigt die so genannte objektorientierte Programmierung. Die Übersichtlichkeit des Quelltexts wird besser. Funktionen werden für einzelne Elemente innerhalb der Seite geschrieben.
    1. Es ist z.B. sehr einfach, Funktionen für einzelne Elemente innerhalb der Webseiten zu schreiben. Wenn ein Element eine ID besitzt, dann sieht die zugehörige Funktion wie folgt aus:
      $("#element1").mouseenter(function(){
        $(this).css("background-color", "green");
      });
       
      $("#element1").mouseleave(function(){
        $(this).css("background-color", "lightgray");
      });
    2. Man kann die Funktionen auch für alle Elemente eines Tag-Typs einsetzen. Im folgenden Beispiel werden z.B. alle td-Tags grün, sobald man mit der Maus darüber fährt:
      $("td").mouseenter(function(){
        $(this).css("background-color", "green");
      });
    3. Anstelle des Eventhandlers onload im body-Tag mit Kombination einer Funktion an anderer Stelle kann man einfach nur den folgenden Quelltext im javascript-Tag verwenden:
      $(document).ready(function(){
        // hier steht der Quelltext, welcher nach dem Laden
        // der Seite im Browser ausgeführt werden soll.     
      });
  5. Wer gut ist in CSS, der kann ohne Umwege die Formatierungen übernehmen:
    $(this).css("text-align", "center");
  6. Mit jQuery lassen sich schnell eine ganze Reihe von fertig programmierten Effekten in eigene Seiten integrieren, z.B. rotierende oder sich anderweitig bewegende Objekte.
  7. ...

Aufgabe 6 - Manuelle Diashow

Lösung a)
<!DOCTYPE html>
<html>
<head>
 
    <title>Diashow</title>
    <meta charset="utf-8">
    <!-- Following Meta-Tag fixes scaling-issues on mobile devices -->
    <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
 
    <style type="text/css">
        body
        {
            height:         100%;
            width:          100%;
            margin:         0;
            margin-top:     10px;
            padding:        0;
            border:         0;
            outline:        0;
            font-family:    Verdana, Arial, Helvetica, sans-serif;
            font-size:      100%;
            vertical-align: baseline;
        }
        div
        {
            height:           70px;
            width:            350px;
            background-color: lightgrey;
            margin:           auto;
            padding:          10px;
        }
 
        #id1
        {
            text-align: center;
            margin-top: 50px;
            width:    300px;
            height: 400px;
 
        }
 
        #id2
        {
            text-align: center;
            margin-top: 30px;
 
 
        }
 
        img
        {
            width: 300px;
            height: auto;
 
        }
    </style>
 
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
 
        var Bilder=new Array("Bild1.jpg","Bild2.jpg","Bild3.jpg");
        var i=0;
 
 
        $(document).ready(function() {
 
            $("#bild").attr("src",Bilder[i]);
 
            $("#vor").click(function() {
 
                i++;
                if(i==3)
                {
                    i=0;
                }
                $("#bild").attr("src",Bilder[i]);
 
            });
 
            $("#zur").click(function() {
 
                i--;
                if(i<0)
                {
                    i=2;
                }
                $("#bild").attr("src",Bilder[i]);
 
            });
 
 
        });
 
    </script>
 
</head>
 
<body>
    <div id="id1">
        <img id="bild" src="">
    </div>
 
    <div id="id2">
        <button id="zur"> Zurück </button>
        <button id="vor"> Vorwärts </button>
 
    </div>
 
 
 
 
</body>
</html>
Lösung b)
<!DOCTYPE html>
<html>
<head>
 
    <title>Diashow</title>
    <meta charset="utf-8">
 
    <style type="text/css">
 
        #aussen {
            width:            300px;
            background-color: lightgrey;
            margin:           0 auto;
        }
 
        #id1 {
            width:300px;
            height:300px;
        }
 
        #id2 {
            width: 300px;
            text-align: center;
        }
 
        img {
           width:300px;
           height:auto;
        }
    </style>
 
    <script src="http://code.jquery.com/jquery-latest.js"></script>
 
    <script>
        // Bilddateinamen in einem Array
        var bilder = new Array( "b2.jpg", "b3.jpg", "b4.jpg", "b5.jpg" );
        var zaehler = 0;
 
        $(document).ready(function() {
 
            $("#image1").attr("src", bilder[zaehler] );
 
            $("#butzur").click( function() {
                zaehler = zaehler - 1;
                if ( zaehler < 0 ) zaehler = bilder.length;
                console.log(zaehler + " " + bilder[zaehler]);
                $("#image1").attr("src", bilder[zaehler] );
            });
 
            $("#butvor").click( function() {
                zaehler = zaehler + 1;
                if ( zaehler == bilder.length ) zaehler = 0;
                console.log(zaehler + " " + bilder[zaehler]);
                $("#image1").attr("src", bilder[zaehler] );
            });
 
        });
 
    </script>
 
</head>
<body>
    <div id="aussen">
        <div id="id1">
           <img id="image1" src="bild1.jpg">
        </div>
        <div id="id2">
           <button  id="butzur">zurück</button>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <button id="butvor">vorwärts</button>
        </div>
    </div>
 
</body>
</html>

Aufgabe 7

<!DOCTYPE html>
<html>
 
<head>
 
  <title>Klassenspiegel</title>
  <meta charset="UTF-8">
 
  <style type="text/css">
 
    body
    {
      background-color: orange;
      font-family:      arial, sans-serif;
    }
 
    span
    {
      display:          block;
      width:            50px;
      height:           40px;
      background-color: lightgrey;
      border:           2px solid red;
      padding:          3px;
      margin:           3px;
      text-align:       center;
      font-size:        2em;
    }
 
  </style>
 
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script>
 
    var noten=new Array(0,0,0,0,0,0);
    var anzahl=0;
    var gesamt=0;
    var mittel=0;
 
    $(document).ready(function() {
 
        $(".klickmich").click(function(){
            var zahl=$(this).html();
            $("#note"+zahl).html( ++noten[zahl-1] );
            gesamt+=parseInt(zahl);
            $("#anzahl").html( ++anzahl );
            $("#mittelwert").html( (gesamt/anzahl).toFixed(1) );
        });
 
    });
 
  </script>
 
</head>
 
 
<body>
 
  <h1>Klassenspiegel</h1>
 
  <table>
    <tr>
         <script>
              for(i=1; i<7; i++)
              {
                document.write("<td><span class='klickmich'>"+i+"</span></td>");
              }
         </script>
    </tr>
    <tr>
         <script>
              for(i=1; i<7; i++)
              {
                document.write("<td><span id='note"+i+"'>"+noten[i-1]+"</span></td>");
              }
         </script>
    </tr>
  </table>
  <div>Teilnehmer: <span id="anzahl">0</span></div>
  <div>Durchschnitt: <span id="mittelwert">0</div>
 
</body>
 
</html>
 
 

Aufgabe 8 - Text Analyzer

<!DOCTYPE html>
<html>
 
<head>
 
    <title>Text Analyzer</title>
    <meta charset="utf-8">
    <!-- Following Meta-Tag fixes scaling-issues on mobile devices -->
    <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
 
    <style>
 
        body
        {
            font-family:    Verdana, Arial, Helvetica, sans-serif;
        }
 
        #content
        {
            padding:        10px;
            width:          250px;
            height:         150px;
            margin:         auto;
            background-color: grey;
        }
 
        input, #kA
        {
            margin:         3px;
        }
 
    </style>
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
 
        function validDomain( domain )
        {
            var strReg = "^(([a-zA-Z]{1})|([a-zA-Z]{1}[a-zA-Z]{1})|([a-zA-Z]{1}[0-9]{1})|([0-9]{1}[a-zA-Z]{1})|([a-zA-Z0-9][a-zA-Z0-9-_]{1,61}[a-zA-Z0-9]))\.([a-zA-Z]{2,6}|[a-zA-Z0-9-]{2,30}\.[a-zA-Z]{2,3})$";
            var regex = new RegExp(strReg);
            var result = regex.test(domain)
            return( result );
        }
 
        function validEmail( email )
        {
            // for email regex see e.g. http://emailregex.com/
            var strReg = "^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$";
            var regex = new RegExp(strReg);
            var result = regex.test(email)
            return( result );
        }
 
        function validName( name )
        {
            var strReg = "^[a-zA-Z]*$";
            var regex = new RegExp(strReg);
            return( regex.test(name) );
        }
 
        function whatsthis(x)
        {
            //$("#kA").html(x);
            if( x.length<5 )
            {
                $("#kA").html("Das ist wahrscheinlich gar nichts! ;-)");
            } else
            if( validEmail(x) )
            {
                $("#kA").html("Das könnte eine Email-Adresse sein.");
            } else
            if( validDomain(x) )
            {
                $("#kA").html("Das ist vielleicht eine gültige Internet-Domain.");
            } else
            if( validName(x) )
            {
                $("#kA").html("Ist das ein Name?");
            }
            else
            {
                $("#kA").html("kA :-(");
            }
        }
 
        $(document).ready(function() {
 
            $("#checkthis").focus();
 
            // siehe https://api.jquery.com/on/
            // und vielleicht https://api.jquery.com/category/events/
            $( "#checkthis" ).on( "mouseout blur change focusout", function() {
                whatsthis(this.value);
            });
 
            $("button").click(function() {
                whatsthis( $("#checkthis").val() );
            });
 
 
        });
 
    </script>
 
</head>
 
<body>
 
    <div id="content">
        <input id="checkthis" type="text" placeholder="Geben Sie hier einen Text ein!" size=36>
        <div id="kA"></div>
        <button>check</button>
    </div>
 
</body>
 
</html>