E-Commerce: IT-Werkzeuge Web-Programmierung

Übung
WS 2014/2015
E-Commerce: IT-Werkzeuge
Web-Programmierung
Kapitel 4: Einführung in JavaScript
Stand: 03.11.2014
Benedikt Schumm
M.Sc.
Lehrstuhl für ABWL und
Wirtschaftsinformatik
Katholische Universität
Eichstätt-Ingolstadt
1. Einführung in die Web-Programmierung
2. Web-Programmierung mit HTML
3. Webdesign mit CSS
4. Einführung in JavaScript
Übersicht
5. Einführung in PHP
6. Datenbankabfragen mit SQL und PHP
1. Einführung in die Web-Programmierung
2. Web-Programmierung mit HTML
3. Webdesign mit CSS
4. Einführung in JavaScript
Übersicht
5. Einführung in PHP
6. Datenbankabfragen mit SQL und PHP
Einführung in JavaScript
Grundlagen JavaScript

Definition von JavaScript:
 JavaScript und Java haben nichts miteinander gemeinsam.
 Der Name "JavaScript" wurde von Netscapes Marketing-Abteilung erfunden:
 Java für teure Komponenten (traditionelle Softwaretechnik).
 Script für Webdesigner.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
 JavaScript wurde ursprünglich zur Dynamisierung für HTML geschaffen.
 JavaScript wird im Gegensatz zu PHP nicht auf dem Server sondern im Browser
interpretiert und ausgeführt.
3
Einführung in JavaScript
Grundlagen JavaScript

Einsatzgebiete von JavaScript
 Validierung von Formulardaten (z. B. Pflichtfeldprüfungen).
 Anpassung der Darstellung an die Browserversion.
 Anpassung der Darstellung an die Auflösung (z. B. beim Öffnen von Bildern).
 Interaktionen mit dem Server.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
 Dynamisches Nachladen von Daten.
 Reaktion auf Events (z. B. Mausklick).
 Pop-up‘s von Browserfenstern.
 Web 2.0-Anwendungen.
 …
4
Einführung in JavaScript
5
Einbindung in HTML

Für JavaScript-Programmabschnitte können Sie in HTML Bereiche definieren:
 Im Kopfteil der HTML-Datei <head> und im <body> können Bereiche für
JavaScript definiert werden.
 Diese werden mit <script> ... </script> gekennzeichnet.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
 Im einleitenden <script>-Tag muss der MIME-Typ für die Sprache JavaScript
mit der Angabe type = "text/javascript" aufgeführt werden.
 Zwischen dem einleitenden und dem abschließenden <script>-Tag können
die JavaScript-Programme definiert werden.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
// Hier steht der JavaScript-Code
</script>
</head>
<body>
</body>
</html>
Quelle: http://de.selfhtml.org/
Einführung in JavaScript
6
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
Einbindung in HTML

Es gibt keine festen Vorschriften dafür, an welcher Stelle einer HTML-Datei
ein JavaScript-Bereich definiert werden muss.

Es ist unter JavaScript-Programmierern zur Gewohnheit geworden, einen
solchen Bereich im Kopf der HTML-Datei, also zwischen <head> und </head>
zu definieren. Dadurch ist am ehesten sichergestellt, dass der Code vom
WWW-Browser bereits eingelesen ist und zur Verfügung steht, wenn er
ausgeführt werden soll.

JavaScript-Code kann automatisch beim Einlesen der HTML-Datei ausgeführt
werden. Das ist dann der Fall, wenn JavaScript-Befehle in einem JavaScriptBereich außerhalb jeder selbst definierten Funktion stehen.

In solchen Fällen ist es manchmal auch erforderlich, den Script-Bereich
innerhalb des HTML-Dateikörpers, also innerhalb von <body>...</body>, zu
notieren.

Beispiel:
<body onLoad="alert(&quot;Hello World&quot;)">
Quelle: http://de.selfhtml.org/
Einführung in JavaScript
7
Einbindung in HTML

Einbindung durch externe Datei:
 Seit der Sprachversion 1.1 von JavaScript (und auch seit HTML 4.0) ist es
möglich, JavaScript-Code in separaten Dateien zu notieren.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
 Das ist sehr nützlich, wenn Sie gleiche JavaScript-Funktionen in mehreren HTMLDateien verwenden wollen.
 Denn so brauchen Sie den Code nur einmal zu notieren und können ihn in
mehreren HTML-Dateien referenzieren. JavaScript-Code zwischen den <script>Tags wird in diesem Falle ignoriert.
<html>
<head>
<title>JavaScript-Test</title>
<script src="Datei.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Quelle: http://de.selfhtml.org/
Einführung in JavaScript
8
Kommentare in JavaScript

Kommentare in JavaScript:
 Kommentare werden vom JavaScript-Interpreter des WWW-Browsers ignoriert.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
 Kommentare sind z. B. sinnvoll, um interne Angaben zu Autor und Erstelldatum in
einer Datei zu platzieren, um interne Anmerkungen zu bestimmten Textstellen zu
machen oder um nicht mehr verwendete Programmteile intern
auszukommentieren.
<script src="Datei.js" type="text/javascript">
/* Mehrzeiliger
Kommentar*/
// Einzeiliger Kommentar
</script>
Quelle: http://de.selfhtml.org/
Einführung in JavaScript
Syntax von JavaScript

Anweisungen in JavaScript:
 Eine Anweisung in JavaScript besteht immer aus einem Befehl, der mit einem
Strichpunkt ; oder einem Zeilenumbruch abgeschlossen wird.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
 In neueren Netscape-Dokumentationen zu JavaScript wird der Strichpunkt am
Ende von einfachen Anweisungen zwar häufig weggelassen, aber um unnötige
Fehler zu vermeiden ist es ratsam, sich von vornherein anzugewöhnen, alle
Anweisungen auf diese Weise abzuschließen.
Quelle: http://de.selfhtml.org/
9
Einführung in JavaScript
Syntax von JavaScript

Eine Anweisung ist zum Beispiel:
 wenn Sie einer Variablen einen Wert zuweisen.
Zahl = 42;
 wenn Sie mit Variablen oder Werten eine Operation durchführen.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
Quadrat = Zahl * Zahl;
 wenn Sie einen Befehl nur unter bestimmten Bedingungen ausführen.
if (Zahl > 1000){
Zahl = 0;
}
 wenn Sie eine selbst definierte Funktion oder eine Objektmethode aufrufen.
alert("Das Quadrat von " + Zahl + " = " + Ergebnis);
Quelle: http://de.selfhtml.org/
10
Einführung in JavaScript
11
Syntax von JavaScript

Anweisungsblöcke in JavaScript:
 Ein Anweisungsblock besteht aus einer oder mehreren Anweisungen, die
innerhalb einer übergeordneten Anweisung oder innerhalb einer Funktion stehen.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
 So können Anweisungsblöcke beispielsweise unterhalb einer bedingten
Anweisung oder einer Schleife stehen. Auch alle Anweisungen, die innerhalb
einer selbst definierten Funktion stehen, bilden einen Anweisungsblock.
 Ein Anweisungsblock wird durch eine öffnende geschweifte Klammer { begonnen
und durch eine schließende geschweifte Klammer } beendet.
 Sie können die geschweiften Klammern jeweils in eine eigene Zeile schreiben. Es
ist aber auch erlaubt, die Klammern in derselben Zeile zu notieren wie die
Anweisungen.
Anweisung/Funktion {
// Hier stehen die Elemente des Anweisungsblocks
}
Quelle: http://de.selfhtml.org/
Einführung in JavaScript
12
Funktionen in JavaScript

Funktionen in JavaScript:
 Eine Funktion ist ein Anweisungsblock.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
 Mit Hilfe von Funktionen können Sie eigene, in sich abgeschlossene JavaScriptProzeduren programmieren, die Sie dann über den Aufruf der Funktion ausführen
können.
 Dabei können Sie bestimmen, bei welchem Ereignis (zum Beispiel, wenn der
Anwender einen Button anklickt) die Funktion aufgerufen und ihr Programmcode
ausgeführt wird.
 JavaScript-Code, der nicht innerhalb einer Funktion steht, wird beim Einlesen der
Datei vom WWW-Browser sofort ausgeführt!
 An erlaubten Stellen, z. B. innerhalb der einleitenden HTML-Tags <body...> und
<a href...>, oder in einem Formular-Tag wie <input...>, können Sie eine solche
selbst definierte Funktion dann mit Hilfe eines Event-Handlers aufrufen.
 Weiterhin ist es möglich, eine Funktion innerhalb einer anderen Funktion
aufzurufen.
Quelle: http://de.selfhtml.org/
Einführung in JavaScript
13
Funktionen in JavaScript

Funktionen in JavaScript:
 Mit dem Schlüsselwort function leiten Sie die Definition einer Funktion ein.
 Dahinter folgt, durch ein Leerzeichen getrennt, ein frei wählbarer Funktionsname.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
 Unmittelbar hinter dem Funktionsnamen folgt eine öffnende Klammer. Wenn die
Funktion keine Parameter erwarten soll, notieren Sie dahinter sofort wieder eine
schließende Klammer.
 Wenn die Funktion Parameter übergeben werden sollen, notieren Sie innerhalb
der Klammer die Namen der Parameter.
 Mehrere Parameter werden durch Kommata voneinander getrennt.
 Der gesamte Inhalt der Funktion wird in geschweifte Klammern { und }
eingeschlossen. Diese Klammern dürfen niemals fehlen!
function Funktionsname (Paramter1, Parameter2, …) {
// Anweisungsblock der Funktion
}
Quelle: http://de.selfhtml.org/
Einführung in JavaScript
14
Funktionen in JavaScript

Funktionen aufrufen in JavaScript:
 Sie können eine selbst definierte Funktion aufrufen, um den darin enthaltenen
JavaScript-Code auszuführen.
 Die Funktion rufen Sie mit ihrem Funktionsnamen auf. Dahinter folgt die öffnende
Klammer.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
 Wenn die Funktion keine Parameter erwartet, notieren Sie hinter der öffnenden
gleich eine schließende Klammer.
 Wenn die Funktion Parameter erwartet, müssen Sie für jeden Parameter einen
erlaubten Wert übergeben.
//Aufruf mit zwei Parameter:
Funktionsname(Parameter1, Parameter2);
//Aufruf mit keinem Paramter:
Funktionsname();
Quelle: http://de.selfhtml.org/
Einführung in JavaScript
Funktionen in JavaScript

Wenn-Funktion in JavaScript:
 Durch die If-Funktion ist es möglich, Anweisungsblöcke nur beim Zutreffen einer
Bedingung auszuführen.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
 In der Klammer müssen die zu prüfenden Bedingungen mittels eines
Vergleichsoperators angegeben werden.
if (Vergleichsoperator) {
// Hier steht der bei Erfüllung der Bedingung auszuführende Code.
}
Quelle: http://de.selfhtml.org/
15
Einführung in JavaScript
16
Funktionen in JavaScript
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.

Vergleichsoperatoren in JavaScript:
var SinnDesLebens = 42;
var Alter = 8;
// Variablendeklaration
if (SinnDesLebens == 42)
// Gleich
if (SinnDesLebens != 42)
// Ungleich
if (SinnDesLebens > 42)
// Größer als
if (SinnDesLebens < 42)
// Kleiner als
if (Alter >= 18)
// Größer/gleich
if (Alter <= 17)
// Kleiner/gleich
Quelle: http://de.selfhtml.org/
Einführung in JavaScript
Funktionen in JavaScript

Alert/Messagebox in JavaScript:
 Es erscheint im Browser eine Meldung mit dem jeweiligen Text, welcher der
alert()-Funktion übergeben wird.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
 Eine Möglichkeit, ist es die Meldung beim Laden der Seite anzuzeigen:
<html>
<head><title>Test</title>
<script type="text/javascript">
alert("Hallo Welt!");
</script>
</head>
<body>
</body>
</html>
 Oder durch das OnClick-Event von Input-Tags auch bei Klick auf einen Button
durchführbar:
<form>
<input type=button value="Hello World" onClick="alert(Hallo Welt!)">
</form>
Quelle: http://de.selfhtml.org/
17
Einführung in JavaScript
Funktionen in JavaScript

Formularfeldprüfungen in JavaScript:
 Mit JavaScript sind Formularfeldprüfungen einfach umzusetzen.
 Zunächst muss eine Funktion, welche die Überprüfung der jeweiligen
Formularfelder übernimmt, definiert werden.
<script type="text/javascript">
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
function PruefeFormular () {
if (document.EigenesFormular.Vorname.value == "") {
alert("Bitte Ihren Vornamen eingeben!");
document.EigenesFormular.Vorname.focus();
return false;
}
}
</script>
Quelle: http://de.selfhtml.org/
18
Einführung in JavaScript
19
Funktionen in JavaScript

Formularfeldprüfungen in JavaScript:
 Im eigentlichen Formular muss die Funktion nun z. B. durch das OnSubmit-Event
beim senden des Formulars ausgelöst werden.
 Der Benutzer wird dann mit einer Nachrichtenbox aus dem Funktionsaufruf an das
leere Feld erinnert.
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.
<form name="EigenesFormular" action="" onsubmit="PruefeFormular()">
<input type="text" name="Vorname">
<input type="submit" value="Absenden" >
</form>
Quelle: http://de.selfhtml.org/
Einführung in JavaScript
Formularfeldprüfungen
Katholische Universität Eichstätt-Ingolstadt
Lehrstuhl für ABWL und Wirtschaftsinformatik
Benedikt Schumm, M.Sc.

Aufgabe:
Prüfen Sie in Ihrem Formular mittels
JavaScript, ob die Felder Anrede, Name
und E-Mail-Adresse durch den Benutzer
ausgefüllt wurden. Die Prüfung soll beim
Absenden des Formulars durchgeführt
werden. Wenn ein Feld nicht ausgefüllt
wurde, soll ein Nachrichtenfenster mit
einer entsprechenden Meldung über das
zu füllende Feld erscheinen.
20