====================== Name   : _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
MMK-Test-Klausur 2
====================== Vorname: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

                         Matr#: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

                                 Auf. Nr | 1 | 2 | 3 | 4 | 5 |
                              -----------|---|---|---|---|---|
                               Soll Pkte | 3 | 3 | 3 | 3 | 3 |
                              -----------|---|---|---|---|---|
                                Ist Pkte |   |   |   |   |   |

1.Aufgabe

a) Nenen Sie bitte 5 typische Anwendungsgebiete von ECMAScript (JavaScript):

   _______________________________________________________________

   _______________________________________________________________


b) Im Zusammenhang mit der Kommunikationssicherheit oder 
   Computerkriminalität werden die folgenden Begriffe verwendet.

   Erklären sie stichwortartig:


   Trojaner _________________________________________________________


   Phishing _________________________________________________________


   Keylogger_________________________________________________________


   SSL ______________________________________________________________


   iTAN _____________________________________________________________


c) Welcher Unterschied besteht zwischen SSL und HTTPS?

_________________________________________________________

d) Ein CSS-Style kann auf unterschiedliche Arten a), b) in ein XHTML-Dokument "includiert" werden, wie z.B.:

  α) <link type="text/css" rel="stylesheet" href="my.css" media="screen" />
  β) @import url("my.css")

   Nennen Sie vor-/Nachteile für α und β:

   _______________________________________________________________

   _______________________________________________________________

e) Es sei die CSS-Klasse definiert:

     .box { width:300px; padding:20px; border: 10px solid; }

Wie groß ist (nach W3C) die gesamte Breite (in px) von


    <div class="box">Breite=____________ px</div >


f) Schreiben sie eine kleine CSS-Datei. In dieser Datei soll

   - der Schrift-Hintergrund aller p-Tags hellgrau werden,

   - die CSS-Klasse "box" soll definiert werden, die eine 
     punktierte Umrahmung bewirkt,

   - alle p-Tags sollen dann unsichtbar geschalten werden, wenn
     diese p-Tags in ein div-Tag mit dem Identifizierer "hide_p" 
     eingebettet sind.


<style type="text/css" media="screen">

   _______________________________________________________________

   _______________________________________________________________

   _______________________________________________________________

   _______________________________________________________________

   _______________________________________________________________

   _______________________________________________________________
</style>





2.Aufgabe

a) Nennen sie bitte 5 grundlegende Begriffe, die zu einer
   Kommunikationsverbindung gehören:

  ______________________________________________________________ 

b) Wie lang ist die Periodendauer T eines 50 Hz-Tones?

                                        ... etwa ___________  ms

c) Wieviel Speicherplatz wird für Audio-Aufzeichnungen benötigt 
   (ohne Kompression)?  Bitte häufig vorkommende Werte eintragen:

   Ein Sample hat (meist) _____ Byte.

   Für Klanginformationen in Stereo werden ________ Kanäle verwendet. 

   Pro Sekunde werden (Stereo) ca. _____________ Samples abgespielt.

   Damit gehören zu einer Minute 
   Audio in CD-Qualität etwa       __________ MB.

   Wieviel Bytes braucht etwa die Speicherung eines 
   100 Hz-Sinus-Dauer-Ton, wenn nur der int-Wert von Amplitude, 
   Frequenz und Zeitdauer gespeichert werden müßte?
                                             etwa  ___________  MB

d) Welchen Speicherbedarf (in kByte) hat etwa ein Musik-File 
   für 3 Minuten Stereo-Musik, wenn dieser gespeichert ist als

   .midi  etwa ______________ kB
                                  .mpeg3 etwa ___________ kB,
   .wav   etwa ______________ kB,

e) Zu einem Ton/Klang/Rauschen gehören typische Signal- 
   Zeitverläufe. Ergänzen sie bitte die unteren Skizzen!

      Ton                Klang             weisses Rauschen
 |                     |                     |             
 |      |              |   |                 |             
 |      |              |   |                 |------------
 |      |              |   |   |             |             
 |      |              |   |   |             |             
 |      |              |   |   |             |              
 |-------------f[Hz]   |-------------f[Hz]   |----------f[Hz]
      100                 100 200 
| Ton:
|
|
|
|------------------------------------------------- t (Zeit)
|
|
|

| Klang
|
|
|
|------------------------------------------------- t (Zeit)
|
|
|

| weisses Rauschen:
|
|
|
|------------------------------------------------- t (Zeit)
|
|
|

3.Aufgabe

a) Erklären sie bitte klar und kurz die folgenden Abkürzungen:

   XSS:   ______________________________________________________

   RIA:   ______________________________________________________

   XSLT:  ______________________________________________________

   DTD:  _______________________________________________________

   WSH:  _______________________________________________________
   
   PCM:  _______________________________________________________


b) W3C Working Draft 22 December 2008 regelt Packaging and 
   Configuration von Widgets. Hierzu ...
   
   α Was bedeutet W3C? _________________________________________

   β Was bedeutet Working Draft? ________________________________
   
   δ Was bedeutet Widgets? _____________________________________


c) Was verstehen sie unter dem Begrif "Semantic Web"?

   _______________________________________________________________

d) Nennen sie wichtige XML-Standardsprachen, die vom W3C 
   definiert wurden:

   _______________________________________________________________

e) Aus welchen Gründen gibt es .dtd-Dateien, die nicht öffentlich sind?

   _______________________________________________________________

f) Eine .dtd, die zu einem XML-Datei gehört, definiere KEINE benamten 
   Zeichen. Geben Sie ein Beispiel an, wie dennoch z.B. 
   das Zeichen ➥, zu dem die Unicode-Notation U+27A5 gehört, 
   in das XML-Dokument geschrieben werden kann.

   _______________________________________________________________

4.Aufgabe

a) Neben (bzw. in) der Adresszeile des Browsers erscheint bei 
   https ein Icon, das wie ein "geschlossenes Vorhängeschloß" 
   aussieht. Welche Funktionen sind mit einem Klick auf dieses 
   "Vorhängeschloß"-Icon verknüpft?

   _______________________________________________________________

   _______________________________________________________________

b) Ein (News-RSS-) Feed (engl. to feed, deutsch: versorgen, einspeisen, zuführen; RSS = Really Simple Syndication, deutsch: wirklich einfache Verbreitung) ist eine XML Datei, die beim Aufrufen des Links zur Laufzeit erzeugt wird. Ein RSS-Feed ist etwa so aufgebaut:


<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
  <channel>
    <title>Titel des Feeds</title>
    <link>URL der Webpräsenz</link>
    <description>Kurze Beschreibung des Feeds</description>
    <language>Sprache des Feeds (z. B. "de-de")</language>
    <copyright>Autor des Feeds</copyright>
    <pubDate>Erstellungsdatum("Tue, 8 Jul 2008 2:43:19")</pubDate>
    <image>
      <url>URL einer einzubindenden Grafik</url>
      <title>Bildtitel</title>
      <link>URL, mit der das Bild verknüpft ist</link>
    </image>
    <item>
      <title>Titel des Eintrags</title>
      <description>Kurze Zusammenfassung des Eintrags</description>
      <link>Link zum vollständigen Eintrag</link>
      <author>Autor des Artikels, E-Mail-Adresse</author>
      <guid>Eindeutige Identifikation des Eintrages</guid>
      <pubDate>Datum des Items</pubDate>
    </item>
    <item>   ...
    </item>
  </channel>
</rss>

Im Header ist einzutragen:

<link rel="alternate" title="RSS"
      type="application/rss+xml"
      href="http://www.mydomaen.de/feed.rss" />


α) Nennen Sie RSS-Vorteile

   _______________________________________________________________

   _______________________________________________________________

β) Welcher Dokumententyp gehört zu RSS?

   _______________________________________________________________


δ) Welchen Vorteil hat die Verwendung der folgenden (erweiterten)
   CDATA-Klammerung und was kann z.B. bei /*1*/ stehen, was ohne
   CDATA-Klammerung fehlerhaft wäre?

      <description>
       <![CDATA[
         Hier /*1*/ kann z.B.stehen:_________________________________  
        
         Vorteil:____________________________________________________
         
       ]]>
     </description>


c) Sie wollen mit ECMAScript die Anzahl von Zeilen einer Zeichenkette str 
   ermitteln. Hierzu 4 kleine Tests (Ergebnis muß anz1=anz2=anz3=4 sein).
    
 Hinweise:
 
 /*1a*/ dez-zahl für das "NeuzeilenZeichen"
 /*1b*/ findPos = str.indexOf(suchStr,suche_ab_zeichenPos))
 /*2*/ und /*3*/ RegExpr für "NeuzeilenZeichen" ) 

      var str = "1.Zeile\n 2.Zeile\n 3.Zeile\n 4.Zeile";
      var anz1 = 0, pos = -1;
      var find = String.fromCharCode(______);/*1a*/
    
      while(-1 != (pos=str.indexOf(___________, ____________)))
      { /*1b*/
        anz1 ++; 
      }
 
      anz2 = s.split(___________).length ________ ;/*2*/

      anz3 = s.match(___________).length ________ ;/*3*/
      alert(anz1 + "\n" +anz2 + "\n" +anz3);



d) Welche Strings werden (infolge des regulären Ausdruckes) 
  im Array parts gespeicher?

   var url = "http://www.fh-giessen.de/~hg54/index.htm";
   var parts = /^(\w+:)?\/\/([^\/?#]+)/.exec(url);

   parts[0] = ________________________________________________
   
   parts[1] = ________________________________________________
   
   parts[2] = ________________________________________________

e) Um automatisierte und anonyme Injection-Versuche abzuwehren
   soll jeder Seitenzugriff, der nicht über index.htm kommt
   auf index.htm (zurück) umgeleitet werden. Wie ist dies in 
   JavaScript zu programmieren?  Bitte ergänzen.

      var requiredfrom = "index.htm"; 

      if (document.referrer.indexOf(______________) == -1) 
      {
        window.location = ________________;
      }


e) In der Informatik nutzen zahlreiche Algorithmen die Fourier-
   transformation. Geben sie hierzu 5 Einsatz-Schlagworte an:

   _______________________________________________________________

5.Aufgabe

Die folgende Tabelle ist im XHTML-body, hat id="TABLE1" und zunächst lediglich "browserinterne default-Styles".


   <table border="1" id="TABLE1">
   <tr><th> Titel 0,0
   </th><th> Titel 0,1

   </th></tr><tr><td> cell 1,0
   </td><td> cell 1,1

   </td></tr><tr><td> gelb
   </td><td>cell 2,1

   </td></tr></table>

Mit Hilfe von ECMAScript soll die dargestellte XHTML-Tabelle (unmittelbar nach dem Laden der Seite) das folgende Aussehen erhalten:

Titel 0,0 Titel 0,1
cell 1,0 cell 1,1
gelb cell 2,1

Aus dem XHTML-Dokument wird mit Hilfe von id="TABLE1" durch tbl.id("TABLE") ein Objekt tbl der Tabelle erstellt, das mit ECMAScript dynamisch "durchgestylet" werden kann, etwa so:

  tbl.id("TABLE")
     .css_cell(2,0, "text-align:center;color:#f00")
     .css_table("tab3");

a) Wie kann dieser Aufruf (erst dann) ausgeführt werden, wenn die Seite bereits vollständig geladen ist und somit die die Tabelle im XHTML-Dokument existiert?

   _______________________________________________________________

b) Der Code für das tbl-Objekt soll ergänzt werden.
/*1*/ In der Funktion tbl.id(myid) werde mit der Table-Tag- Identifizierung id="MYID" die private Variable this.tbl initialisiert.
/*2*/ Falls this.tbl.nodeName nicht "table" ist, so soll ein Fehler ausgegeben werden.
/*3*/ Der Funktion tbl.css_cell(row,col, css) kann eine Zeilen-,Spalten-Nummer row, col übergeben werden. Für die zugehörige tr-td-Zelle sollen Styles gesetzt werden. Das Objekt var tr = ... ist das row-te tr-Objekt (Index [row]).
/*4*/ Das Objekt var td = ... ist das col-te Objekt von tr (Index [col]).
/*5*/ Der Funktion tbl.css_table() soll im table-Tag einen css-Klassen-Namen setzen.


var tbl = function() 
{  var tbl;

 return { 
  id: function(myid) { 
   /*1*/__________________________________________________________

   /*2*/__________________________________________________________

   _______________________________________________________________

   _______________________________________________________________
   return this;
  },
  
  css_cell: function(row,col, css) { 
   /*3*/ var tr = this.tbl.________________________________________

   /*4*/ var td = _________________________________________________
         td.style.cssText = css;
         return this;
  },
   
  css_table: function(className) { 
   /*5*/ this.tbl._______________________ = className;
         return this;
  }
};
}();

c) Durch den Aufruf tbl.id("TABLE").css_table("tab3"); wird die css-Klasse .tab3 gesetzt. Nun soll der CSS-Style .tab3 ergänzt werden so, dass das die obige Ansicht entsteht.
/*1*/ Die Styles sollen nur für table-Tags gelten
/*2*/ Die Berandungen sollen zusammen fallen
/*3*/ Prozentzahlen so, dass die table seiten-mittig zentriert ist
/*4*/ Für die th-Tags der obigen Tabelle ergänzen


   <style type="text/css" media="screen">
   /* CSS-Style für Tabelle: */
   /*1*/
   ___________.tab3 
   { 
    border-collapse: ___________________________ ; /*2*/
 
    margin-left: ______________________________ %; /*3*/
 
    width: ____________________________________ %; /*3*/

    border: 1px solid #fff;
   }
   /*4*/
   ___________.tab3 _______ { color: #fff; background: #aaa; }

   ___________.tab3   td    { 
   
     color: #000; background: #fff;
     border: 1px solid #aaa; 
   }
   </style>

d) Mit Hilfe eines a-Tags soll die td-Zelle (row=1,col=1) mit einem gelben Hintergrund erscheinen. Bitte ergänzen:


    <a href="_____________________________________________________"

      onclick="______________________________________________________">
        celle (1,1) grün 
    </a>

e) Der obige Aufruf tbl.id("TABLE").css_table("tab3") .css_cell(2,0, "text-align:center;color:#f00"); soll nun mit Hilfe von jQuery nachgebildet werden. Bitte ergänzen:

window.onload = function() { 

 $(___________________).addClass(____________________________)

 ____________________________________________________________

 ____________________________________________________________
}