Vorlesung 1 – Einführung Dynamische Webanwendungen
Web-Anwendungen
Angenommen, man hat ein Programm entwickelt, und möchte dieses nun veröffentlichen. Wie veröffentlicht man dies nun? Offensichtlich gibt es mehrere Möglichkeiten; über CD oder als Download oder als Web-Anwendung.
Der große Vorteil bei Web-Anwendungen gegenüber von CDs und Downloads ist, dass die Web-Anwendungen nicht auf dem Rechnern der Benutzer laufen, sondern auf dem Server. So ist nur eine Internetverbindung nötig und mögliche Zweifel der Kompatibilität des Programms auf dem Rechner des Benutzers sind aus der Welt. Und auch mögliche Updates und neue Versionen müssen nicht an alle User verteilt werden, sondern werden zentral auf den Server gespielt. Dabei kann es bei Web-Anwendungen allerdings zu performanten Nachteilen kommen, da hier Ein- und Ausgabe nicht auf dem Rechner gesteuert werden (wo sie so gesehen einen „kürzeren Weg zurücklegen“), sondern die Eingabe des Benutzers vom Rechner zum Server geschickt werden, dort verarbeitet und die Ausgabe anschließend zurückgeschickt wird. Dieser Weg ist relativ lang, kann allerdings mit einer soliden Internetverbindung und einem guten Ping in einer sehr kurzen Zeit zurückgelegt werden.
Im folgenden wird der serverseitige Prozess der Verarbeitung der Anfragen noch einmal genauer angeschaut.
Eine Anfrage des Benutzers ist in häufigen Fällen ein Suchbegriff. Da es aber schier unmöglich ist, für jeden Suchbegriff ein fertiges HTML-Dokument bereitzuhalten und zu pflegen und diese dann zu verschicken, sind alle Informationen in einer Datenbank, welche nach Stichworten organisiert ist, gespeichert. Schickt man nun eine Anfrage an der Server, liefert dieser eine Liste von passenden Links und generiert daraus ein HTML-Dokument, welches dann an den Anwender geschickt wird.
Die Verarbeitung auf dem Server findet mit Einsatz von verschiedenen Programmiersprachen statt. Diese können z.B. sein: PHP, Perl oder Java. Dabei ist hier Java nicht mit JavaScript zu verwechseln. Zwar gibt es auch die Möglichkeit, JavaScript auf dem Server einzusetzen, allerdings hat sich diese Methode nicht durchgesetzt.
Allerdings wird mit JavaScript auf der Clientseite gearbeitet. Es wird z.B. bei Google verwendet, um bereits Suchergebnisse oder Vorschläge anzuzeigen, wenn man nur ein paar Zeichen eingegeben hat. Zu JavaScript im extra dafür vorgesehenen Abschnitt mehr.
Zusammengefügt ergibt sich folgendes Muster von Web-Anwendungen und wie der Webclient und der Webserver interagieren.
Skriptsprachen
Um zu verstehen, was Skriptsprachen sind, muss man zunächst wissen, was sich hinter dem Begriff „Scripting“ verbirgt. Scripting beschreibt das Zusammensetzen von Kommandos für eine kleine Aufgabe. Wichtig hierbei ist es, dass diese Kommandos und auch deren Zusammensetzung immer wieder verwendet werden können.
Skriptsprachen haben im Grunde die Aufgabe, kleine und einfache Aufgaben ohne komplexe Algorithmen und Datenstrukturen zu lösen. Dazu werden wie oben schon kurz erwähnt, existierende Funktionen genutzt und verknüpft. Dabei verzichtet man auf die Sicherheit prüfbarer Regeln. Im Fokus von Skriptsprachen stehen vor allem die Textverarbeitung, sowie die Ein- und Ausgabe und eine gute Verfügbarkeit und Handhabbarkeit.
Der Hauptzweck von Skriptsprachen sind die sog. Skripte. Skripte sind Codes, welche aus einfachen Sprachen mit wenigen Konstrukten, Regeln und kurzen Codes gebaut werden. Skriptsprachen sind also auch sehr einfach zu erlernen. Sie arbeiten außerdem mit einer dynamischen Typprüfung und werden zeilenweise interpretiert und ohne „vorherige“ Übersetzung ausgeführt. Ursprünglich haben sich Skriptsprachen aus den Kommandosprachen von Betriebssystemen herauskristallisiert und arbeiten imperativ und objektorientiert.
Im Reiter „JavaScript“ wird auf die Skriptsprache JavaScript näher eingegangen.
Vorlesung 2 – HTML und JavaScript
Nach einer grundlegenden Einführung in HTML und JavaScript und dessen Zusammenspiel (s. hierfür JavaScript und HTML) wurden wir gebeten, für das fiktive Unternehmen „Sternback-Kaffee“ eine Website zu bauen, welche nur eine Liste aller Getränke, deren Preis und eine kurze Beschreibung enthalten sollte.
Nachdem wir eine Grundlegende Seite gebaut hatten, wurde uns CSS vorgestellt (ein dazugehöriges Kapitel ist unter HTML zu finden). Das gelernte CSS konnten wir dann auf die Sternback Website anwenden und diese somit aufwerten.
Zum Schluss sah der Code wie folgt aus:
<html>
<head>
<title>Sternback-Kaffee</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 10%;
margin-right: 10%;
border: 8px solid gray;
padding: 20px 20px 20px 20px;
font-family: serif;
}
</style>
</head>
<body>
<h1>Getränke bei Sternback-Kaffee</h1>
<h2>Hausmischung, € 1.49</h2>
<p>Eine feine, milde Mischung verschiedener Kaffeesorten aus Mexiko, Bolivien und Guatemala.</p>
<h2>Mokka Café Latte, € 2.35</h2>
<p>Espresso, heiße Milch und Schokosirup.</p>
<h2>Cappuccino, € 1.89</h2>
<p>Eine Mischung aus Espresso, heißer Milch und Milchschaum.</p>
<h2>Chai-Tee, € 1.85</h2>
<p>Eine würzige Mélange aus schwarzem Tee, Gewürzen, Milch und Honig.</p>
</body>
</html>
Und er lieferte folgende Website:
Zum Ende haben wir noch zwei Übungsaufgaben bekommen.
Die erste befasste sich mit dem Raten von Zahlen. Dazu wurde zunächst über die Zufallsfunktion eine Zahl festgelegt. Über ein Eingabefenster konnte man dann versuchen, die Zahl zu erraten. Einen Zähler der Fehlversuche haben wir auch eingebaut. Mein Code sah zum Schluss wie folgt aus:
<html>
<head>
<script>
function zahlenRaten() {
var zahl = Math.round(Math.random() * 100 + 0.5);
var fehler = 0;
var fertig = false;
while (!fertig) {
eingabe = prompt("Bitte geben Sie eine Zahl ein:","");
if (!eingabe) {
fertig = true; //Abbruch durch den Anwender
} else {
if (eingabe == zahl) {
alert("Gewonnen!");
fertig = true; //Zahl wurde erraten
} else {
fehler++;
if (eingabe < zahl)
alert("Geratene Zahl zu klein!\n" +
"Fehler: " + fehler)
else alert("Geratene Zahl zu gross!\n" +
"Fehler: " + fehler);
}
}
}
}
</script>
</head>
<body>
<script>
zahlenRaten();
</script>
</body>
</html>
„\n“ erzeugt genauso wie „<br>“ einen Zeilenwechsel.
Die zweite Übung bestand darin, ein Programm zu schreiben, welches anhand einer Eingabe ein Dreieck aus „*“ generiert. Da ich nicht sofort die Lösung fand, ist hier der Lösungscode zu finden:
<!DOCTYPE html>
<html>
<head>
<title>Schleifchen</title>
</head>
<body>
<p>
Das ist der Text vor dem div
</p>
<div id="ausgabe"></div>
<p>
Das ist der Text nach dem div
</p>
<script type="text/javascript">
var ausgabediv = document.getElementById("ausgabe");
eingabe = prompt("Bitte geben Sie die Anzahl der Zeilen ein: ", "");
for (var i=0; i<eingabe; i++) //aeußere Schleife fuer die Zeilen
{
for (var j=0; j<=i; j=j+1)
{ausgabediv.innerHTML += "*" ;}
ausgabediv.innerHTML += "<br>" ;
}
</script>
</body>
</html>
Vorlesung 3 – Vortrag WordPress und HTML-Template
In der 3. Vorlesung haben zwei Kommilitonen aus dem Parallelkurs eine Einführung in WordPress und HTML gegeben. Vorgeschlagen wurde eine solche Veranstaltung in Bezug auf die Erstellung dieses Portfolios um Möglichkeiten aufzuzeigen, das Portfolio in Form einer Website zu schreiben.
Eine Möglichkeit, welche vorgestellt wurde, war WordPress. Ich habe mich für WordPress entschieden, da es mir eine schnelle und einfache Möglichkeit bietet, eine Website zu gestalten. Es gibt viele Möglichkeiten in verschiedenen Untermenüs, um seine Website anzupassen, diese sind aber immer noch gut zu finden und dienen meist nur der Kosmetik der Website. In der Veranstaltung wurden allerdings nur die Basics vorgestellt, was meiner Meinung nach das Richtige Maß war, da es nur darum ging, eine strukturierte und funktionierende Website zu bauen, auf der nur (oder hauptsächlich) Text eine Rolle spielt.
Die zweite Möglichkeit, war die Möglichkeit, die Website mit HTML zu bauen. Dafür wurde ein Template genutzt und verschiedene Möglichkeiten von Einstellungen und Codesegmenten vorgestellt. Grob konnte ich mich im Template schon zurechtfinden, allerdings waren denke ich viele von dieser Variante abgeschreckt, da es doch auf einen Schlag viel Code war und nach sehr viel Arbeit klang. Ich muss zugeben, dass ich auch dazugehörte.
Vorlesung 4 – Pfade, Links und Hypertext
In dieser Vorlesung haben wir die Bedeutung von Hypertext in HTML besprochen und sind auf Verlinkungen und Pfade eingegangen (siehe hierzu die Theorie), welche wir in die Webseite der KopfÜBar einbauen konnten.
Der Code und die Seite ist im Folgenden zusehen:
<html>
<head>
<title>KopfüBar</title>
<link type="text/css" rel="stylesheet" href="bar.css">
</head>
<body>
<h1>Willkommen in der KopfüBar</h1>
<a href="getraenke/elixir.html"><img src="bilder/getraenke.gif"></a>
<p>
Kommen Sie einfach mal vorbei. Bei uns finden Sie jeden Abend erfrischende <a href="getraenke/elixir.html">Elixire</a>, Unterhaltung, und vielleicht interessiert Sie auch die eine oder andere Runde <em>Dance, Dance, Revolution</em>. Wireless-Zugang ist jederzeit verfügbar, aber BSIEWSM (Bringen Sie Ihren eigenen Webserver mit).
</p>
<h2>Wegweiser</h2>
<p>
Sie finden uns unmittelbar im Zentrum der Altstadt von Webville. Falls Sie Probleme haben uns zu finden, werfen Sie einen Blick auf unsere <a href="info/wegbeschreibung.html">Wegbeschreibung</a>. Kommen Sie mal vorbei!
</p>
</body>
</html>
Die KopfÜBar haben wir auch mit einer Ordnerstruktur versehen, da dies schon eine größere und komplexere Webseite ist. Man manövriert sich mit Hilfe von relativen Pfaden in den jeweilig relevanten Ordner, um dort eine Datei aufzurufen und einzubinden.
Im Ordner „Bilder“ sind alle Bilder der Webseite untergebracht. Im Ordner „Getränke“ ist eine HTML-Datei zu finden, welche die Seite mit allen Getränken darstellt. Der Ordner „Info“ beinhaltet eine HTML-Datei, welche die Seite der Wegbeschreibung darstellt.
Es sind also in „bar.html“ (oben im Bild) Verlinkungen zu den anderen Seiten eingebaut (s. hier zu Theorie). Die Seite besteht also aus mehreren Seiten.
Getränkeseite und dazugehörige Code:
<html>
<head>
<title>KopfüBar-Elixire</title>
<link type="text/css" rel="stylesheet" href="../bar.css">
</head>
<body>
<h1>Unsere Elixire</h1>
<h2>Tee - grün und kühl</h2>
<p class="gruenertee">
<img src="../bilder/gruen.jpg">
Ein Vitamin- und Mineralienschock. Dieses Elixir
kombiniert die gesunden Vorteile grünen Tees mit einem
Hauch Kamillenblüten und Ingwer.
</p>
<h2>Himbeereis konzentriert</h2>
<p class="blue">
<img src="../bilder/hellblau.jpg">
Eine Kombination von Himbeersaft, Zitronengras,
Zitronenschale und Rosenblättern. Dieser eisige Drink
bringt Ihrem Kopf Frische und Spannkraft zurück.
</p>
<h2>Blaubeer-Engelselixir</h2>
<p class="purple">
<img src="../bilder/blau.jpg">
Blaubeer- und Kirschkonzentrat auf einer Basis aus
Holunderblüten-Kräutertee versetzen Sie im Handumdrehen
in einen Zustand der Gelassenheit.
</p>
<h2>Cranberry-Antirost-Blitz</h2>
<p class="red">
<img src="../bilder/rot.jpg">
Lassen Sie sich von den Cranberry- und Hibiskus-Aromen
dieses Vitamin C-reichen Elixirs aufwecken.
</p>
<p> <a href="../bar.html"><- Zurück</a> </p>
</body>
</html>
Wegbeschreibungsseite und dazugehöriger Code:
<html>
<head>
<title>KopfüBar Wegbeschreibung</title>
<link type="text/css" rel="stylesheet" href="../bar.css">
</head>
<body>
<h1>Wegbeschreibung</h1>
<p>Nehmen Sie auf der A 4.1 die Ausfahrt Webville.</p>
<p>Folgen Sie nach 0,5 km der B 305. </p>
<p>Biegen Sie nach 20 km rechts ab in den Strukturpfad.</p>
<p>Biegen Sie nach 0,5 km rechts ab in den Strukturpfad</p>
<p>Biegen Sie nach 0,0 km rechts ab in den Strukturpfad</p>
<p>Folgen nach 0,7 km dem Strukturpfad.</p>
<p>Biegen nach 0,2 km rechts ab in die Präsentationsallee.</p>
<p> <a href="../bar.html"><- Zurück</a> </p>
</body>
</html>
Vorlesung 5 – CSS und Prototyping
In dieser Vorlesung sind wir auf die Erstellung von .css-Dateien eingegangen (mehr in der Theorie) und haben uns mit JavaScript-Objekten und dem Prototyping und dem Vererben von Klassen beschäftigt.
Aufgaben gab es hierzu keine. Deshalb sind alle Inhalte dieser Vorlesung im theoretischen Teil untergebracht.
Doch es gab eine Aufgabe für Funktionen. Ziel war es, eine Eingabe „gesperrt“ auszugeben.
<!DOCTYPE html>
<html>
<head>
<script>
String.prototype.gesperrt = function (){
var str = "";
for (i = 0; i <= this.length-1; i++){
str+= this.charAt(i) + " ";
}
return str;
}
</script>
</head>
<body>
<script>
eingabe = prompt("Zu sperrender String", "");
ausgabe = eingabe.gesperrt();
alert(ausgabe);
</script>
</body>
</html>
Dieser Code führte zu folgendem Ergebnis:
Vorlesung 6 – DOM und jQuery
In dieser Vorlesung haben wir uns mit dem Document Object Model (DOM) und dem jQuery Framework beschäftigt. Beides ist in der Theorie näher behandelt.
Als Übung haben wir eine Webseite so verändert, dass die Überschriften mit verblassenden horizontal verlaufenden Linien versehen wurden.
Die ursprüngliche Webseite sieht wie folgt aus:
Nach der Veränderung konnte man diese Webseite sehen:
Der Code der HTML Datei sah wie folgt aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Skript 5.2</title>
<link href="../css/global.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#main h2 {
font: bold 30px Tahoma, Geneva, sans-serif;
color: #036;
border-bottom: 1px solid #666;
margin-top:15px;
text-transform:uppercase;
position:relative
}
/* the class to overlay the ۢerschrifts */
.streifenEffekt {
position: absolute;
width: 100%;
display: block;
height:36px;
background: url(gradient.png) repeat;
}
/* for IE 6 only */
* html .streifenEffekt {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
-->
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
//hier kommt unser jQuery Code hin
$(document).ready(function()
{
//hier kommt unsere Function bei ready event rein
$('#main h2').prepend('<span class="streifenEffekt"></span>'); //die drei h2 ueberschriften von unten werden hiermit ausgewaehlt
});
</script>
</head>
<body id="twoCol">
<div id="container">
<div id="banner"><img src="../bilder/banner.png" alt="JavaScript - Missing Manual" width="760" height="65"><span id="badge"><a href="http://www.sawmac.com/missing/js/"></a></span></div>
<div id="contentWrap">
<div id="main">
<h1>jQuery-verbesserte Überschriften</h1>
<h2>Eine mysteriöse Überschrift</h2>
<p>Mauris imperdiet nisi ut pede. Vivamus nisi lorem, euismod in, fringilla et, porttitor in, nunc. Vivamus metus. </p>
<h2>Noch eine coole Überschrift</h2>
<p>Mauris imperdiet nisi ut pede. Vivamus nisi lorem, euismod in, fringilla et, porttitor in, nunc. Vivamus metus. </p>
<h2>Der Spaß hört nicht mehr auf</h2>
<p>Mauris imperdiet nisi ut pede. Vivamus nisi lorem, euismod in, fringilla et, porttitor in, nunc. Vivamus metus. </p>
<p> </p>
</div>
<div id="sidebar">
<h2>Skript 5.2</h2>
</div>
</div>
<div id="footer"><em>„Interaktive Websites mit JavaScript“</em></div>
</div>
</body>
</html>
Im Anschluss gab es eine zweite Aufgabe, welche darin bestand, auf einer Webseite einen Textausschnitt hervorzuheben und in einer separaten Box anzeigen zu lassen.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Skript 5.3</title>
<link href="../css/global.css" rel="stylesheet" type="text/css">
<style type="text/css">
.pullquote {
float: right;
clear: right;
display: block;
width: 200px;
border: 1px solid black;
padding: 10px;
font-size: 20px;
background-color:#FFC;
margin: 20px 0 10px 10px;
font-style: italic;
color: #363;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//primäre Collection jQuery Objekt erzeugen
$('span.pq').each(function()
{
//hier unser Code
//span Tag kopieren
var quote=$(this).clone();
quote.removeClass('pq');
quote.addClass('pullquote');
$(this).after(quote);
});
});
</script>
</head>
<body id="twoCol">
<div id="container">
<div id="banner"><img src="../bilder/banner.png" alt="JavaScript - Missing Manual" width="760" height="65"><span id="badge"><a href="http://www.sawmac.com/missing/js/"></a></span></div>
<div id="contentWrap">
<div id="main">
<h1>Automatische Pull Quotes</h1>
<h2>Vestibulum semper</h2>
<p>Vestibulum semper tincidunt sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar, justo non fringilla dapibus, sapien tortor cursus erat, at posuere magna nisi tincidunt sapien. Sed nisl. <span class="pq">Fusce venenatis, libero porta porta fringilla, sapien odio tincidunt sem, id aliquam tellus sapien sit amet quam.</span> Vivamus justo mi, aliquam vitae, eleifend et, lobortis quis, eros. Ut felis arcu, mollis ut, interdum molestie, vehicula a, sapien. Sed nisi nunc, bibendum vel, adipiscing sed, placerat quis, augue. Nullam ut nibh sed orci tempor rutrum. Sed iaculis. Suspendisse potenti. Donec semper molestie felis. Sed vitae diam. Curabitur sed velit convallis orci luctus viverra. Quisque et quam non tortor ultrices rutrum. Nulla porttitor mauris sed nunc. Donec lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras quis massa. Sed mattis erat vitae nisi.</p>
<h2>Morbi dictum</h2>
<p>Donec at sapien non dolor tempor congue. Morbi dictum rutrum nisl. Curabitur tellus metus, pharetra vitae, tempus sit amet, semper ac, sapien. In hac habitasse platea dictumst. <span class="pq">Mauris est velit, placerat eu, porta eget, aliquam in, dui.</span> Nam mi quam, lobortis in, dictum vel, gravida et, sapien. Etiam mattis. Donec sed diam nec odio molestie iaculis. Vestibulum elementum odio sed nunc. Vestibulum ac nisl a lectus posuere malesuada. Praesent lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi eu nibh. In hac habitasse platea dictumst. Integer posuere tellus. Fusce et justo ac sem sagittis consectetuer. Aliquam erat volutpat. Vivamus interdum ullamcorper felis. Vestibulum pulvinar. Integer ornare malesuada diam.</p>
<h2>Praesent sed est</h2>
<p>Praesent sed est ac metus facilisis pharetra. Maecenas risus risus, facilisis vitae, tempus id, dapibus non, nunc. Etiam pulvinar egestas pede. Cras elit. <span class="pq">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span> Ut quam. Vivamus at orci. In hac habitasse platea dictumst. Nunc et magna. Ut sollicitudin scelerisque mauris. Nam elementum nisl a enim.</p>
<p>Integer lacus. Mauris condimentum scelerisque mauris. Nullam luctus. Vestibulum neque dolor, tempus quis, aliquam quis, mollis at, odio. Quisque in mi eu velit pretium commodo. Nullam fringilla mollis pede. Praesent eleifend tellus et tellus. Ut in sem. In aliquam dignissim mauris. Aenean ac magna blandit quam scelerisque accumsan. Sed suscipit odio at pede. In hac habitasse platea dictumst. Aenean sed tortor sit amet dui commodo tempus. Vestibulum sit amet arcu eu lectus scelerisque fermentum. Vivamus at arcu at est feugiat convallis. Fusce eu metus. Donec vel tellus eu massa ultrices ultricies. Cras dapibus tellus sed libero. Fusce et dolor. </p>
</div>
<div id="sidebar">
<h2>Skript 5.3</h2>
</div>
</div>
<div id="footer"><em>„Interaktive Websites mit JavaScript“</em></div>
</div>
</body>
</html>
Innerhalb der Span-Tags steht der hervorgehobene Text. Das Ergebnis im Browser sah wie folgt aus:
Vorlesung 7 – Events
In der 7. Vorlesung haben wir uns mit Events in JavaScript beschäftigt. Die Theorie ist wie immer hier zu finden.
Vom Dozenten haben wir zur Veranschaulichung folgende HTML Dateien bekommen. Damit wird gezeigt, wann welches Event auftritt:
Browserfenster:
Mit Hilfe des hover()-Events haben wir auch das sog. Akkordeon bauen können. Beim Akkordeon handelt es sich um einen Aufbau eines Navigationsmenüs. Es ähnelt im aussehen einem Akkordeon – daher der Name.
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion</title>
<link href="akkordeon.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/ui/ui.core.js"></script>
<script type="text/javascript" src="../js/ui/ui.accordion.js"></script> <!-- Lädt das Plugin-->
<script type="text/javascript">
$(document).ready(function(){
$('#akkordeon').accordion({ // hier wird die id von unten (Überschriften) das Plugin zugewiesen
header: 'h2',
active: '.oeffne',
selectedClass: 'aktuell'
});
});
</script>
</head>
<body id="twoCol">
<h1>jQuery-Akkordeon</h1>
<div id="akkordeon">
<h2 class="oeffne">Akkordeon 1</h2> <!-- Klasse zugewiesen-->
<div>
<p>Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt END.</p>
</div>
<h2>Akkordeon 2</h2>
<div>
<p>Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.</p>
</div>
<h2>Akkordeon 3</h2>
<div>
<p>Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation in reprehenderit in voluptate. Velit esse cillum dolore lorem ipsum dolor sit amet, sed do eiusmod tempor END.</p>
</div>
</div>
<p>Akkordeon mit ui.accordion.js.</p>
</body>
</html>
CSS-Code:
h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-bottom: 25px;
}
h2 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
p {
font: 18px Georgia, "Times New Roman", Times, serif;
}
#akkordeon {
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 500px;
}
#akkordeon div {
padding: 0;
margin: 0;
border: 1px solid #666;
border-top: none;
}
#akkordeon p {
margin: 0px;
padding: 10px;
}
#akkordeon h2 {
text-decoration: none;
background: #879D9D;
padding: 5px 10px 4px;
border-bottom: 1px solid #666;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
color: #FFF;
margin: 0;
cursor: pointer;
}
#akkordeon h2.aktuell {
background: #036; /* setzt Farbe für geöffnetes Akkordeon*/
}
Das Akkordeon sah zum Schluss wie folgt aus:
Vorlesung 8 – Asynchrones JavaScript und XML (Ajax)
Im theoretischen Teil werden die Grundlagen des Prinzips von Ajax erläutert.
Anhand der erlernten theoretischen Grundlagen sollte nun eine synchron kommunizierende Website in eine asynchron kommunizierende Website umgebaut werden. Hier ging es um sich aktualisierende Verkaufszahlen von Snowboards.
Zunächst ist hier ein wichtiger Punkt, dass ein Webserver für die Ausführung solcher asynchroner Kommunikation notwendig ist. Da es bei mir nicht funktioniert hat, diesen Server einzurichten, konnte ich die Funktion nicht real testen. Allerdings habe ich den Code und die ursprüngliche Webseite unten eingefügt.
<html>
<head>
<title>Boards 'R' Us</title>
<link rel="stylesheet" type="text/css" href="boards.css" />
<script type="text/javascript" src="text-utils.js"></script>
<script type="text/javascript">
var anfrage = null;
function erzeugeAnfrage() //hier wird die Funktion definiert
{
try
{
anfrage = new XMLHttpRequest(); //hier auf Rechschreibung achten
}
catch (fehlschlag)
{
anfrage = null;
}
if (anfrage == null)
{
alert("Fehler beim Erstellen des Anfrageobjektes");
}
}
function getVerkaufteBoards(){
//a Anfrageobjekte erstellen
erzeugeAnfrage(); //von oben die Funktion genommen
//b URL ermitteln
var url = "aktuelleBoardVerkaeufe-ajax.php"; // neu erstellte Datei aus der alten .php Datei
//c Anfrageobjekte konfigurieren
anfrage.open("GET", url, true); //Anfrage-Objekt aus erzeugeAnfrage wird benutzt
//kümmert sich um die Initialisierung der Verbindung und
//teilt dem Anfrage Objekt mit, wie es die Serververbindung herstellen soll
//d Callback Funktion
anfrage.onreadystatechange = updateSeite;
//e Anfrage absenden
anfrage.send(null);
}
function updateSeite()
{
if (anfrage.readyState == 4)
{
//Serverantwortdaten holen "1149"
var neueSumme = anfrage.responseText; //neue Variable für zurückgegebenen Wert
//Referenzen auf entsprechende DOM-Objekte holen
var verkaufteBoardsEl = document.getElementById("verkaufte-boards");
var gewinnEl = document.getElementById("gewinn");
//neueSumme im DOM eintragen
replaceText(verkaufteBoardsEl, neueSumme);
//Gewinn neu berechnen
var preisEl = document.getElementById("preis");//preis holen
var preis = getText(preisEl); //preis = preisEl
var kostenEl = document.getElementById("kosten");//kosten holen
var kosten = getText(kostenEl);
var gewinnProBoard = preis - kosten;
var gewinn = gewinnProBoard * neueSumme;
//neuen Gewinn im DOM eintragen
gewinn = Math.round(gewinn * 100) / 100;
replaceText(gewinnEl, gewinn);
}
}
</script>
</head>
<body>
<h1>Boards 'R' Us :: Verkaufsbericht</h1>
<div id="boards">
<table>
<tr><th>Verkaufte Snowboards</th>
<td><span id="verkaufte-boards">1012</span></td></tr>
<tr><th>Verkaufspreis</th>
<td><span id="preis">249.95</span> €</td></tr>
<tr><th>Meine Kosten</th>
<td><span id="kosten">84.22</span> €</td></tr>
</table>
<h2>Kohle für die Pisten:
<span id="gewinn">167718.76</span> €</h2>
<form method="GET" action="aktuelleBoardVerkaeufe.php"> <!--hier wird gesagt, was nach drücken von SUBMIT gemacht wird-->
<input value="Ich will Geld sehen" type="button" onClick="getVerkaufteBoards();" /> <!-- button anstatt submit, und definiert, was bei onclick passiert (function von oben)-->
</form>
</div>
</body>
</html>
In diesem Code sind auch in den Kommentaren die einzelnen Codeabschnitte erklärt.
Der Code führte zu folgender Ausgabe:
Da die Abfrage über eine Datenbank (wie in der Theorie erklärt) erfolgt. Muss diese eingebunden werden und über einen aufgesetzten Webserver abgerufen werden (Problem wie oben beschrieben). Diese Datenbank haben wir mit php hinterlegt.
So könnte eine Mögliche .php-Datei aussehen:
<?php
// Mit beliebiger Anzahl verkaufter Boards starten
$gesamtVerkauft = 1012;
// Neue Verkäufe nachbilden
srand((double)microtime() * 1000000); //random Zahl plus
$gesamtVerkauft = $gesamtVerkauft + rand(0,1000);
echo ($gesamtVerkauft)
?>
Auf diese wird dann mit dem eingebauten Ajax zugegriffen.
Fazit und Ausblick
Die Vorlesung über die Webprogrammierung hat mir einen tiefgründigen Einblick in die Möglichkeiten des Webs gegeben. Einige Funktionen waren schon aus der Java-Vorlesung des 1. Semestern klar, wurden in dieser Veranstaltung aber weiter vertieft und auch praktisch angewendet.
Anhand der vielen praktischen Aufgaben war es einfach, die Hintergründe Rund um die Webprogrammierung nachzuvollziehen.
Im kommenden Semester wird das Portfolio weitergeführt werden.
ePortfolio Webprogrammierung 