top of page

jQuery

jQuery ist eine Javascript-Bibliothek, d.h. eine Sammlung von fertigen kleinen Programme, die es ermöglicht, auf einfache, objektorientierte Art und Weise mit HTML-Elementen zu arbeiten.

Links zur Einarbeitung

  1. https://www.w3schools.com/jquery/jquery_intro.asp

  2. https://www.html-seminar.de/jquery-tutorial.htm

  3. https://learn.jquery.com/

  4. ...

Aufgabe 1

  • Versuchen Sie den folgenden Quelltext zu verstehen!

  • Beschreiben Sie die Funktionalität des Programms!

  • Speichern Sie das Programm auf ihrem Computer und  probieren Sie aus, ob es so funktioniert, wie Sie es verstanden haben!

​<!doctype html>
<html lang="de">

<head>
    <title>Herbst</title>
    <meta charset="utf-8">
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous">
    </script>
    <script>
        $(document).ready(function(){

            $("#kshow").click(function(){
                $("#kuerbis").fadeIn();
            });
            
            $("#ashow").click(function(){
                $("#apfel").show();
            });
            
            $("#hshow").click(function(){
                $("#hagebutte").show();
            });
                
            $("#kuerbis").mouseout(function(){
                $(this).attr("src","https://cdn.pixabay.com/photo/2018/08/30/10/31/plum-cake-3641851__340.jpg");
                $("#kshow").html("Pflaumenkuchen");
            });
            
            $(".image").click(function(){
                $(this).hide();
            });
                    
        });
    </script>

</head>

<body>                            
    <h1 id="kshow">Kürbis</h1>
    <img class="image"
           id="kuerbis"
         src="https://cdn.pixabay.com/photo/2018/08/27/23/30/pumpkin-3636243__340.jpg"
         alt="bild1">
    <br>
    
    <h1 id="ashow">Apfel</h1>
    <img class="image"
         id="apfel"
         src="https://cdn.pixabay.com/photo/2018/08/29/23/15/apple-3640970__340.jpg"
         alt="bild2">
    <br>
    
    <h1 id="hshow">Hagebutte</h1>
    <img class="image"
         id="hagebutte"
         src="https://cdn.pixabay.com/photo/2018/08/28/20/53/rose-hip-3638509__340.jpg"
         alt="bild3">
    <br>
</body>        

</html>     
 

Aufgabe 2: Effekte mit jQuery realisieren

Welche Effekte gibt es? Siehe ...

Viele fertige Effekte sind im Internet verfügbar, die für eigene Seiten genutzt werden können. Siehe z.B. ...

Verwenden Sie in ihrem aktuellen Projekt einen Effekt Ihrer Wahl!

Aufgabe 3: 'Memory'

Verwenden Sie den folgenden Quelltext zur Realisierung eines Memory-Spiels!

  • Analysieren Sie den existierenden Quelltext! Was wurde hier programmiert?

  • Testen Sie die Funktion des existierenden Quelltextes! Wie funktioniert das Programm?

  • Erweitern Sie den Quelltext um das fehlende HTML-Grundgerüst und weitere eigene Funktionalität!

<script src="jquery.js"></script>
<script>

    var bilder=new Array("BT21.jpg"
                        ,"Chimmy.png"
                        ,"Cooky.jpg"
                        ,"Koya.jpg"
                        ,"Mang.jpg"
                        ,"Rj.png"
                        ,"Shooky.png"
                        ,"Tata.jpg")
    var zufall=new Array( 0, 2, 4, 1, 3, 7, 2, 5

                        , 4, 6, 0, 3, 1, 5, 6, 7);


    $(document).ready(function(){
    
       $(".karten").click(function(){
         var bildnr=$(this).attr("alt");
         $(this).attr("src",

                      "Bilder/"+bilder[ zufall[bildnr] ]);
       });
      
    });
</script>



<img class='karten' src="questionmark.png" alt="0">
<img class='karten' src="questionmark.png" alt="1">
<img class='karten' src="questionmark.png" alt="2">
<img class='karten' src="questionmark.png" alt="3">
<br>
<img class='karten' src="questionmark.png" alt="4">
<img class='karten' src="questionmark.png" alt="5">
<img class='karten' src="questionmark.png" alt="6">
<img class='karten' src="questionmark.png" alt="7">
<br>
<img class='karten' src="questionmark.png" alt="8">
<img class='karten' src="questionmark.png" alt="9">
<img class='karten' src="questionmark.png" alt="10">
<img class='karten' src="questionmark.png" alt="11">
<br>
<img class='karten' src="questionmark.png" alt="12">
<img class='karten' src="questionmark.png" alt="13">
<img class='karten' src="questionmark.png" alt="14">
<img class='karten' src="questionmark.png" alt="15">

 

Aufgabe 4: Social Credit System

Ein chinesisches Unternehmen hat ihren Arbeitgeber übernommen. Es soll ein Social Credit System nach chinesischen Vorbild realisiert werden. Sie sind dafür zuständig.
Social scoring siehe: http://www.taz.de/!5480926/

  1. Entwerfen Sie ein Konzept nach dem die 'Sozialpunkte' vergeben werden.

  2. Realisieren Sie ein kleines Programm, mit dem jeder Mitarbeiter selbst testen kann, wieviele Punkte er in Zukunft erreichen wird!

Aufgabe 5: CO2 Footprint-Rechner

Was ist das?
Informieren Sie sich!
Probieren Sie einen aus!    
z.B.


Konzept
Erstellen Sie ein Konzept für
einen einfachen eigenen Rechner
auf einer einzelnen HTML-Seite!

Welche Eingaben werden benötigt? z.B.
    Wohnfläche (individuell)
    Ernährung
    Mobilität (z.B. Auto, Flugzeug, Öffinutzung ...)

Realisierung
Verwenden Sie jQuery (z.B. zum Auslesen der Eingaben)!

 

© 2018,2019 by Rüdiger Borrmann

© 2018/2019/2020 by Rüdiger Borrmann

bottom of page