home  |  suche  |  kontakt/johner  |  institut 
studierende  |  tech-docs  |  mindmailer 

Assignment 8: AJAX using frameworks

Deutsch

Setzen Sie eine JavaScript Bibliothek wie JQuery ein, um Daten aus dem Backend nachzuladen. Als Beispiele können Sie aus folgenden Aufgabenstellungen wählen:

  1. Erinnern Sie sich noch an die Aufgabe, bei der Sie per AJAX passende Namen anzeigen? Ersetzen Sie den eigenen JavaScript-Code zum Erzeugen des AJAX-Requests durch JQuery.
  2. Schreiben Sie eine HTML-Seite mit einem Button. Laden Sie auf Knopfdruck JSON-Daten und fügen Sie die Ergebnisse unterhalb des Buttons in die HTML-Seite ein ohne die Seite neu laden zu müssen.
  3. Schreiben Sie eine eigene JSON-Datei. Diese kann beispielsweise die Werte aus folgendem XML enthalten (so üben Sie noch, eine XML-Datei nach JSON zu überführen):
    <Hochschule Name="HTWG">
      <Studierende Matrikel="1">Anne</Studierende>
      <Studierende Matrikel="2">Hannah</Studierende>
    </Hochschule>
  4. Ändern Sie Ihr Mini-Facebook so, dass es keinen HTML-Code, sondern nur noch Daten (z.B. im JSON-Format) und Ressourcen (CSS, JS) zurückschickt.

Implementieren Sie mindestens zwei der Teilaufgaben

English

Use the JavaScript library JQuery to load data from a backend. Select at least two of the following excercises: 

  1. Do you recall the assignment with the search for names? Replace your JavaScript code using JQuery.
  2. Write a HTML page that has a button. Pressing the button loads JSON-Daten and inserts the results below the  button into the HTML page without reloading the page
  3. Convert the follwing XML file into JSON and load the data into a HTML page using the $.ajax-function.:
    <university Name="HTWG">
      <student Matrikel="1">Anne</student >
      <student Matrikel="2">Hannah</student >
    </university >
  4. Update your Mini-Facebook. The backend (servlet) only my respond with plain data and JavaScript but no HTML code.

Assignment 7: AJAX

Deutsch

Bei dieser Aufgabe geht es darum, auf einer Webseite einen oder mehrere Vornamen anzuzeigen, die mit dem Buchstaben beginnen, den man in ein Eingabefeld eingegeben hat.

Schreiben Sie eine einfache HTML-Seite, die im Wesentlichen nur ein Text-Eingabefeld enthält. Sobald man in dieses Feld einen Buchstaben oder eine Buchstaben-Kombination eingibt (ohne dass ein Button geklickt wird), wird der erste gefundene Vorname auf der Seite eingetragen, der mit diesem Buchstaben bzw. dieser Buchstaben-Kombination beginnt.

Sie bauen somit eine Art Google-Suche für Vornamen, bei der ebenfalls die Ergebnisse nach jedem Tastendruck dynamisch angezeigt werden.

Eine Liste von circa 200 Vornamen finden Sie auf dieser Seite. Ein Servlet liest diese Daten initial ein (in ein Array oder ein HashSet) und schreibt den ersten passenden Vornamen oder alle passenden Vornamen auf den Response. Diese(n) Vornamen zeigt dann die HTML-Seite an.

English

The goal of this excercise is to display all first names matching the first letters typed into an input field.

Write a simple HTML page that contains a input field. As soon one or more letters are entered into this input field the web page shows all first names starting with these letters. The search is case insensitive. 

The data are loaded without the need to press any button.

Hint: Find here a list of first names. A servlets reads these data initially (before first request) into an array or collection. It returns either just the data (e.g. in JSON format) or a HTML snipett with all matching names.

Assignment 6: Servlets

Deutsch

Teilaufgabe 1

Sie schreiben ein Mini-Facebook. Man kann persönliche Daten in ein Formular eintragen, welche nachher auf einer Webseite angezeigt werden.

Rezept:

  • Legen Sie ein Dynamic WebProject an
  • Schreiben Sie ein einfaches HTML-Formular
  • Schreiben Sie ein Servlet, das die Formulardaten ausliest und eine HTML-Seite erzeugt. Diese Seite enthält eine dreispaltige Tabelle mit eben diesen Daten:

    1. Spalte: Feldbeschreibung, z.B. "Vorname"
    2. Spalte: Wert, z.B. Fredi
    3. Spalte: bleibt noch leer

  • Ändern Sie den URL-Pfad ("URL Mapping") auf "HtwgBook"
  • Lassen Sie sich die generierte Seite anzeigen

Teilaufgabe 2 (optional)

Beschreiben Sie, wie Sie vorgehen würden, wenn Ihnen Eclipse nur als IDE, nicht aber als Umgebung mit integriertem Tomcat zur Verfügung stünde. Sie dürften nur "normale" Java-Projekte anlegen.

 Teilaufgabe 3

Die angezeigte Webseite, welche die Tabelle mit den persönlichen Daten enthält, soll jetzt auch editierbar sein: In der dritten Spalte befindet sich nun ein Button "ändern". Drückt man diesen Knopf, so erscheint ein Eingabefeld (auf der gleichen oder auf einer neuen Seite), in das man den neuen Wert eingeben kann. Nach "submit" wird die Tabelle mit dem neuen Wert aktualisiert angezeigt. Die anderen Tabellenzeilen bleiben unverändert.

Passen Sie Ihr Servlet so an, dass es eine dreispaltige Tabelle mit den Formularfeldern ausgibt. Außerdem sollte es in der Lage sein, sich alle Werte zu "merken".  Tipp: Nutzen Sie die HttpSession.

Hinweise zur Lösung: Der übliche Ansatz vieler Studierenden, drauf los zu programmieren und sich iterativ der Lösung zu nähern, wird wahrscheinlich zu Schwierigkeiten führen. Überlegen Sie sich zuerst, welche Dateien (z.B. HTML-Seite, Servlets) Sie überhaupt benötigen, wie sich diese aufrufen und welche Parameter diese übergeben. Überlegen Sie sich auch, was das Servlet (die Servlets) in den doGet/doPost-Methoden machen sollen.

Bitte verwalten Sie weiterhin allen Code in Ihrem Git-Repository!

English

Part 1

Program a "mini facebook" web application. It is possible to enter personal data into a form. Upon submission of the data, data will be shown as table.

Receipe:

  • Add new dynamic webproject in eclipse
  • Write a simple HTML form
  • Write a servlet that reads out the form data an generates a table (three colums as shown below)

    1. Column: Description e.g. "First name"
    2. Column: Value, e.g. "Simon"
    3. Column: empty (still)

  • Change the URL path ("URL Mapping") to "HtwgBook"
  • Run the application

Part 2 (optional)

What would you do to run the application in Tomcat without Eclipse? Eclipse only may be used to program the application but not to run it.

Part 3

The webpage shall contain in the third column a button "edit" that allows to edit the value in the respective row. The other values (rows) remain unchanged.

Change the servlet accordingly. Hint: HttpSession helps you to remember data.

Hint: Students tend to start programming right away. This approach might not be very effective and might  cause many iterations and attempts. Rather consider designing "an architecture" first that  defines the artifacts (HTML pages, servlets),the interaction and sequence this ressources are accessed respectively generated.

Please version control all your code in a git repository!

Mein Facebook

ParameterWert--
First nameSimon
Last nameWagner
LocationKonstanz
HobbyProgrammieren

=== Submission of exercises ===

You (SPO4) should be prepared to present your solutions of the assignments 1-5 on November 10th.

Assignment 5: HTML5

Deutsch

Das Ziel dieser Übung besteht darin, dass Sie praktische Erfahrungen mit HTML 5 sammeln. Sie müssen mindestens zwei der folgenden Teilaufgaben bearbeiten. Teilaufgaben b) und e) sind sehr empfohlen, um CallBacks besser zu verstehen.

Teilaufgabe a): Local Storage

Schreiben Sie eine HTML-Seite, die zwei Textfeld enthält, in die man Werte eingeben kann. Zusätzlich enthält die Seite einen Button "speichern". Beim Klicken auf diesen Button werden die Werte im "Web Storage" auch nach dem Neuladen der Seite gespeichert. Mit einem Klicken auf einen zweiten Button werden die Inhalte auf der HTML-Seite ausgegeben:

  • Inhalt des ersten Textfelds ist: ...
  • Inhalt des zweiten Textfelds ist: ...

Teilaufgabe b): Geolocation

Schreiben Sie eine HTML-Seite, die beim Laden Ihre aktuelle Position ausgibt.

Achtung: Der Firefox in Version 11 unterstützt diese Funktion leider noch nicht.

Teilaufgabe c): Erweiterung der HTML-Tags

Schreiben Sie eine Seite, die

  • zum einen ein Video ohne die Verwendung von Flash ausgibt und
  • zum anderen ein Formular enthält, mit dem man Namen, E-Mail-Adresse, Hausnummern (Zahl zwischen 0 und 200) und Geburtsdatum (muss in der Vergangenheit liegen) eingeben kann. Nutzen Sie auch das Attribute "placeholder".

Teilaufgabe d): Neue Layout-Möglichkeiten

Schreiben Sie eine HTML-Seite, die alle Überschriften der Ebene 1 mit einer Schmuckschrift darstellt. Verwenden Sie dazu Webfonts. Sie können dazu Webfonts von Google verwenden.

Fügen Sie in die Seite zusätzlich eine Tabelle ein, bei der jede zweite Zeile hellgrau hinterlegt ist.

Teilaufgabe e): Callbacks

Schrieben Sie zwei einfachste Funktionen a() und b(), die beispielsweise nur einen Alert beinhalten z.B. alert("Bin Funktion a");

Schreiben Sie eine dritte Funktion funktionausführen(einefunktion). Diese Funktion ruft die übergebene Funktion auf.

Schreiben Sie eine vierte Funktion start(), die die Funktion funktionausführen zweimal nacheinander aufruft. Einmal über gibt sie dazu die Funktion a(), einmal die Funktion b().

Die übergebenen Funktionen nennt man CallBacks.

Wenn Sie noch mehr lernen wollen, dann erweitern Sie die Funktionen a und b um einen Übergabeparameter: a(text), b(text). Den übergebenen Text geben Sie beim Alert mit aus. Zudem ergänzen Sie die Funktion funktionausführen(einefunktion, text) um einem zweiten Übergabeparameter und modifizieren die Methode start() entsprechend.

English

The goal of this exercise is to gather experinces with HTML5. You have to solve at least two of the following parts. Parts b) and e) are particularily recommended to gain a better understanding of callbacks.

Part a): Local Storage

Implement a HTML page with two text input fields and a button "save". On click on this button the two values are stored in the "web storage" and can be displayed on clicking on a second button "show values".

Part b): Geolocation

Implement a HTML page that shows your current position (e.g. a coordinates or on a map).

Part c): Additional HTML-Tags

Implement a HTML page that

  • includes a video 
  • contains a form with required values name, e-mail, street number (number between 0 and 200), day of birth (must be in the past). Make use of the attribute "placeholder"

Part d): New layout options

Implement a HTML page that uses web fonts for all headings. You may use Google's webfonts.

Insert a table with a grey background for all odd rows.

Part e): Callbacks

Implement two simple functions a() and b() that contain e.g. an alert ("I'm function a").

Implement a third function executeFunction(afunction). This function executes the function that is passed as parameter.

Implement a forth fuction start() that calls executeFunction twice. The first time it calls it with function a(), the second time with function b().

The function that are passed as parameters are called "callbacks".

If you want to come-up with a even more sophisticated solution, add parameters to functions a(text) and b(text). Add a second parameter to executeFunction(aFunction, aText). Modify the other methods accordingly.

Assignment 4: JQuery, JSON

a) JQuery

Deutsch

Nutzen Sie ein bestehendes JavaScript Framework wie JQuery, um div-Elemente zu animieren. Laden Sie dazu jQuery herunter und binden Sie die Bibliothek ein. Verwenden Sie daraus definierte Funktionen wie slideUp() oder animate(). Die Seite von jQuery bietet einfach nachzuprogrammierende Beispiele (1 Zeile Code) und Tutorials.

English

Use an existing JavaScript framework such as JQuery to animate div-elements. Download JQuery and include it into your HTML file. Use pre-defined functions like slideUp or animate. There is a page with simple examples (partially just 1 line).

b) JavaScript & JSON

Deutsch

Server stellen den Clients (Browser) häufig Daten im JSON-Format zur Verfügung, z.B. http://finance.yahoo.com/webservice/v1/symbols/allcurrencies/quote?format=json.

  • Öffnen Sie diese Datei, kopieren Sie das erste Objekt in Ihren HTML-Code (var text = <TEXT_AUS_LINK>;) und setzen Sie die Daten per JavaScript in Ihre HTML-Seite ein.
  • In einem weiteren Schritt werten Sie mehrere Objekte der JSON-Datei aus, iterieren über alle Werte und erzeugen daraus eine HTML-Tabelle. Beschränken Sie sich dabei auf die Attribute "symbol", "name" und "price". Sie können optional diesen Ausschnitt aus der JSON Datei nutzen.
    Ggf. kann Ihnen dabei folgendes Code-Snippet nützen:

    var resources = object.list.resources;

    var result = "";

    for (r in resources){

    result += resources[r].resource.fields.name + " - ";

    }

  • Erst in der Vorlesung zu AJAX lernen Sie, wie man die Daten direkt von der URL lesen/laden kann.

English

Servers frequently provide data to clients such as browers in JSON format e.g. http://finance.yahoo.com/webservice/v1/symbols/allcurrencies/quote?format=json.

  • Open this file and copy the first object into your HTML code (var text = <TEXT_FROM_LINK>;) and add the data (contents) to the HTML page using JavaScript.
  • In a next stop evaluate multiple objects in that JSON file, iterate over values and generate a HTML table. You may limit the attributes to "symbol", "name" and "price". You may use optionally this excerpt of a JSON file and the code snippet shown above. 

In the lecture you will get to learn how to read data directly from an URL using AJAX.

c) XML & JSON 

Convert the following XML data into JSON format:
        <Bestellung nummer="A123">
            <Besteller kdnr="GER">
                <Vorname>Hans-Ulrich</Vorname>
                <Nachname>Graf</Nachname>
            </Besteller>
            <Position>
                <BestellPosition>1</BestellPosition>
                <Produkt>
                    <Bestellnummer>A122</Bestellnummer>
                    <Name>Fön</Name>
                    <Preis>23,75</Preis>
                </Produkt>
            </Position>
            <Position>
                <BestellPosition>2</BestellPosition>
                <Produkt>
                    <Bestellnummer>A122</Bestellnummer>
                    <Name>Tablet</Name>
                    <Preis>259</Preis>
                </Produkt>
            </Position>
        </Bestellung>

Assignment 3: JavaScript und DOM

German

Diese Aufgabe enthält Teile, die dem Umgang mit Versionsverwaltungssystemen dienen (in kursiv), und Teile, mit denen HTML, CSS, JS erlernt werden kann.

Hinweis: Der Umgang mit Versionsverwaltungssystemen ist Gegenstand der nächsten Stunde.

a) Remote Repository anlegen

Legen Sie auf Github oder Bitbucket ein (remote) Repository an. 

b) Daten aus Formular einfügen

Legen Sie ein neues Projekt in Eclipse an. Legen Sie in diesem Verzeichnis mit SourceTree ein lokales Repository an.

Schreiben Sie eine einfache HTML Seite, die ein Formular enthält. In dieses Formular kann man Text eingeben. Sobald man einen Button klickt, wird dieser Text in die HTML-Seite eingefügt.

Fügen Sie die Daten dem Index hinzu. Führen Sie einen Commit durch.

Bevor Sie die Übungsstunde beenden, laden Sie den Code ins Remote Repository hoch.

c) Taschenrechner

Schreiben Sie einen Taschenrechner mit JavaScript. Sie können sich entscheiden, ob man die Zahlen per Button oder direkt über die Tastatur in ein Formularfeld eingeben kann. Die eval()-Funktion ist für diese Teilaufgabe tabu.

Auch diese Dateien (wie alle künftigen Übungen!!) bringen Sie bitte unter Versionskontrolle.

English

This assignment contains elements that are meant to practice working with version control systems (in italics) and elements that are meant to practice working with HTML, CSS and JS.

Hint: We will cover the topic "version control systems in the next exercise".

a) Create remote repository anlegen

Create a remote repository on  Github oder Bitbucket

b) Insert data from form

Create a local Eclipse project. Create inside this project / folder a local respository using SourceTree.

Write a simple HTML page that  contains a form. One can enter text into this form (e.g. text field). As soon the button is pressed, the text is inserted into the page (e.g. after the form).

Add the files to the index and commit it locally.

Upload at the end of the lesson the files to the remote repository.

c) Calculator

Write a calculator using JavaScript. You may decide whether the digits can be entered via buttons or via a text field. It is not permitted to use the "eval()"-function.

Please put any files (also in future assignments) under version control.

Assignment 2: CSS

Deutsch

Sie formatieren Ihren Lebenslauf. Dazu sollten Sie die folgenden Optionen nutzen:

  • Sie ändern die Farbe des Hintergrunds und mindestens eines Textes
  • Sie positionieren das Passbild oben rechts
  • Die Spaltenüberschriften der Tabelle sind in heller Farbe auf dunklem Hintergrund
  • Die Überschriften sind in Großbuchstaben gesetzt
  • Sie haben Text in einem bestimmten Tag, z.B. <p>, den Sie anders formatieren als den Text in der übrigen (<p>-) Tags

Die Formatierung erfolgt ausschließlich über CSS.

English

Please layout  your CV. Use the following options:

  • Change the background color of at least one text element.
  • Position the portrait on the upper right corner.
  • The table headings are in a bright color on dark background.
  • The headings are all upper case.
  • One p-tag is formatted differently than the other p-tags

Assignment 1: HTML

Deutsch

Schreiben Sie eine HTML-Seite mit Ihrem Lebenslauf. Diese sollte enthalten:

  • Name, Anschrift, Kontaktdaten (können anonymisiert oder verfälscht sein)
  • Ihr Passbild. Falls Sie keines haben, können Sie dieses nutzen.
  • Tabellarische Darstellung der wichtigsten Stationen (z.B. Schule, Abi, Jobs, Studium, Wehr- oder Ersatzdienst)
  • Hobbies oder Interessen als Aufzählungsliste
  • Formular (noch nicht funktionierend), mit dem man Ihnen eine Nachricht hinterlassen kann. Der Nutzer kann die Priorität seiner Nachricht klassifizieren (sehr wichtig, wichtig, eilt nicht), wozu Sie "Radio-Buttons" nutzen. Weiter kann man das Thema aus einer Liste auswählen (Job-Angebot, Nur-mal-so, private Nachricht, Sonstiges).
  • die einzelnen Abschnitte sind durch Überschriften von einander getrennt.
  • Sie verwenden mindestens einen Link, beispielsweise den auf die Seite der Hochschule.

Die HTML-Seite darf keine Formatierungsinformationen enthalten.

English

Write your curriculum vitae (CV) as a web page. This site should include (any information may be anonymized)

  • Name, address, contact data
  • Your portrait (if you don't have any use this one)
  • Most important steps in your life (e.g. school, jobs, civil or military services) in tabular form
  • Your hobbies as lists
  • Form to send you a message. The message can be prioritized (urgent, semi-urgent, not urgent)
  • the sections are separated by heading
  • Also use a link e.g. to our university

The  page may not contain formating information yet.