<
>
Upload File

Fachbereichsarbeit
Informatik

BOS München

1, 2010

Simon M. ©

1.52 Mb
sternsternsternsternstern_0.5
ID# 35825







Fachbericht

TA53A

1.     Einleitung. 3

2.     JavaScript anwenden.. 4

3.     JavaScript mit Webseite verbinden.. 7

4.     Externe Bibliothek. 8

5.     JavaScript-Versionen.. 9

6.     Schlüsselworte. 9

7.     Variablen.. 10

8.     Datenfelder 17

9.     Anweisungen.. 22

10.       Kontrollstrukturen.. 25

11.       Funktionen.. 30

12.       Klassen.. 31

13.       verwendete Funktion in meinem Projekt „ Digitaltechnik-Skript “ 33

14.       Zusammenfassung. 35

15.       Literaturverzeichnis. 36

 

1.  Einleitung

Mit JavaScript kann man eine Webseite dynamisieren, den Browser steuern und viele interessante Applikationen entwickeln, die man heutzutage auf modernen Webseiten sieht.

 

Am besten erkennen wir, was man mit JavaScript machen kann, wenn man sich einige moderne Webseiten ansieht, beispielsweise Menüstrukturen und farbliche Veränderungen der Einträge.

Menüstrukturen werden mit Hilfe von JavaScript erweitert.

 

 

 

Weiteres Beispiel ist eine Karte.  Man kann mit der Maus eine Karte verändern, Einzoomen, Auszoomen, Verschieben und Satellitenbilder anzeigen lassen.

Nicht alles ist JavaScript; es kommen noch viele andere Techniken zusammen aber der Kern im Browser ist die Programmierung mit JavaScript.

 

 

Auch bei Webformularen steckt JavaScript dahinter.

Heutzutage verzichtet kaum eine moderne Webseite auf JavaScript. Man kann es einfach erkennen, man muss nicht mal auf dynamische Effekte achten. In jedem Browser kann man über Ansicht à Seitenquelltext, die Struktur einer Webseite anzeigen lassen.  

 

Bezüglich der Hardware gibt es keine besonderen Voraussetzungen, wenn man mit JavaScript programmieren möchte.

 

Jedes Betriebsystem ist geeignet, das mit einer grafischen Oberfläche arbeitet und unter dem man einen Editor und einen Browser zur Verfügung hat.

 

JavaScript kann in jedem Texteditor geschrieben werden. Wenn man mit JavaScript Webseiten erstellen möchte, braucht man unbedingt mehrere Webbrowser, empfohlen sind Mozilla Firefox, Safari, Opera und Internet Explorer  zum Überprüfen der Ereignisse. 

 

Mozilla Firefox als Browser bietet zahlreiche Tools, die extrem nützlich sind und kostenlos als Downloads zur Verfügung stehen. Man findet sie unter  „Extras“ den Menü- Eintrag Add-ons (Plugins). Dann öffnet sich ein Fenster, in dem man den Link „Erweiterungen herunterladen“ findet. Nach dem Anklicken wird die offizielle Seite der Mozilla Foundation geöffnet. Da findet man Development Tools.

 

Für JavaScript benötigt der Entwickler einen Debugger. Ein Debugger ist ein Tool, mit dem der Entwickler die Möglichkeit hat, Fehler beim Programmieren zu finden.

 

Venkman ist ein sehr guter Debugger und er installiert sich in Firefox. Anschließend, nach der Installation von Venkman, befindet sich unter Extras ein neuer Eintrag „JavaScript Debugger“.

 

Weitere nützliche Tools sind Web Developer und Firebug. Diese Tools stellen viele  Möglichkeiten bereit zur Analyse von Webseiten aber auch für Stylesheets und JavaScript.

 

Schließlich muss man Mozilla Firefox neu installieren und bei der Installation die „benutzerdefinierte“ Art wählen. Nun muss man den DOM-Inspector aktivieren.  

 

2.  JavaScript anwenden

Erste JavaScript- Beispiel:

Eine einfache HTML- Datei dient als Basis für die folgenden Beispiele.

 

 

Zuerst möchte ich ein Beispiel zeigen, welches nur ein einfaches Mitteilungsfenster im Browser öffnet, wenn ein Anwender die HTML- Seite in seinem Browser öffnet.

In erstem Schritt muss die HTML- Datei gespeichert werden. Nun schreibe ich direkt in den Körper der Webseite eine HTML- Tag, der <script></script> heißt. Ich gebe die Funktion alert(„Hallo Welt“); ein.  

 

 

 

 

Wenn man die HTML- Datei im Webbrowser lädt, wird ein kleines Dialogfenster angezeigt.

 

Wenn man die Webseite direkt im Browser lädt, kann es sein, dass die Webseite durch eine Sicherheitsmeldung blockiert wird.

Zum Beispiel beim Internet Explorer sieht man gelegentlich beim Ausführen von JavaScript  eine Meldung.

Zum Ausführen von JavaScript muss man die Meldung anklicken und geblockte Inhalte zulassen. Solche Sicherheitseinstellungen muss man auch bei anderen Browsern berücksichtigen. Man kann in vielen Browsern die Ausführung von JavaScript aktivieren.

Zum Beispiel Anwender von Firefox können unter Extras Einstellungen in Bereich Inhalt JavaScript aktivieren oder Global deaktivieren oder aber auch explizit festlegen, was ein JavaScript in dem Browser tun darf. 

 

Ich möchte nun ein zweites Beispiel betrachten. Auch hier kommt JavaScript zum Einsatz.

 

 

Man sieht eine Webseite, auf der gewisse Bereiche aus einem Text und HTML- Tags bestehen. Dann folgt ein Bereich, wo JavaScript angewendet wird. Dann sieht man eine Methode mit Name write, die zu einem Objekt document gehört. Wenn man den englischen Begriff date übersetzt, kann man sich vorstellen, dass etwas mit dem Datum gemacht wird.

Nach dem Aufruf der Webseite im Browser, sieht man, dass das Systemdatum des Rechners dynamisch in die Webseite geschrieben wurde.

 

 

Ganz offensichtlich wurden die statischen Informationen und dynamisch generierte Informationen vermischt und zu einer einzigen Webseite zusammengefasst.

 

Ich betrachte noch ein drittes Beispiel zu JavaScript. In diesem Beispiel arbeite ich mit einer JavaScript-Funktion.

Funktionen bedeuten die Zusammenfassung bestimmter Anweisungen zu einer Art Unterprogramm und dieses Unterprogramm steht über einen Name zur Verfügung.

 

 

Die folgende Anweisung ist die so genannte Deklaration

 

 

und datum(); ist der Aufruf der Funktion. In der Funktion selbst frage ich wieder das Systemdatum des Rechners ab new Date();.

Allerdings wird dieses einem Bereich zugewiesen, der direkt darüber definiert ist: document.getElementsByTagName(„div“)[0].innerHTML.

 

Die Anweisung setTimeout(‚datum()’,’1000’); verzögert einen Aufruf und der Name der Funktion datum(); ist hier ein Selbstaufruf.

 

Wenn man sich dieses Beispiel im Browser anschaut, erkennt man, dass das Systemdatum jede Sekunde neu in die Webseite geschrieben wird.

 

 

Ein weiteres Beispiel zeigt, wie man mit JavaScript Benutzereingaben entgegen nehmen kann.

 

 

Auch hier sieht man wieder eine Webseite, indem gewisse Bereiche mit Text und HTML- Tags erzeugt werden. In der Mitte findet man einen kleinen Bereich, der JavaScript zugeordnet ist.

Wenn man dieses Beispiel im Browser ansieht, wird ein Dialogfenster geöffnet, in dem der Benutzer eine Eingabe vornehmen könnte. Wenn die Eingabetaste bestätigt wird, wird die eingegebene Information in die Webseite geschrieben.

 

 

3.  JavaScript mit Webseite verbinden

Bevor man mit JavaScript einen Browser bzw. eine Webseite programmieren kann, muss man eine Verbindung zwischen der Webseite (HTML, XML) und der Skriptfunktionalität schaffen. Diese erfolgt mit einem Skriptcontainer.

 

 In folgendem Code sieht man ein Tag <script> und im Inneren eine JavaScript- Anweisung und dann wird dieses Tag geschlossen </script>.

 

   

Alles was sich außerhalb befindet, ist HTML- Code. Man sieht  eine einfache Form, wie man ein Script in eine Webseite bringen kann.

Aber diese Form ist noch nicht vollständig und es werden noch einige weitere Angaben benötigt um so die Funktionen in einem Skriptcontainer runterzubringen.

 

Der Noscript- Bereich wird dazu verwendet, Informationen anzuzeigen, die ein Besucher angezeigt bekommt, wenn ein Browser kein JavaScript unterstützt.

Das bedeutet aber nicht, dass der Browser kein JavaScript kann.

Diese Informationen sind für diejenigen Browser gedacht, bei denen JavaScript deaktiviert ist.

 

Der eigentliche Skriptcontainer ist <script language=“JavaScript“ ></script>.

Unter anderem wird eine Sprache angegeben. Mit dem Parameter language legt man fest, was für eine Sprache tatsächlich benutzt wird.

Im Inneren des Containers können wir beliebig JavaScript Anweisungen notieren.

 

Der Parameter „Language“ ist veraltet. Statt diesem Parameter sollte man den sogenannten MIME- Type angeben. Dazu verwendet man das Attribut „type“.

Ein MIME- Type bezeichnet die Art eines Datenformats. Es ist ein internationaler Standard, mit dem man auch HTML, XML oder Grafikformate charakterisieren kann.

Er setzt sich aus einer Hauptkategorie - in diesem Fall „text“ - und einer Unterkategorie - in diesem Fall „javascript“ - zusammen.

 

 

 

4.  Externe Bibliothek

Wenn man JavaScript mit einer Webseite verbinden möchte, kann man JavaScript auch in einer externen Bibliothek auslagern.

Dadurch werden Projekte viel leichter wartbar und man kann die Funktionalität mehrfach verwenden.

 

Beim Auslagern von JavaScript in eine externe Bibliothek verwendet man das Skript-Tag und man übergibt über den Parameter „Source“ (src) die URL einer externen Datei. In dieser Datei befinden sich die Funktionen. In diesem Fall meineFunkionen.js .

 

Man kann auch in der Datei Variablen definieren und rein theoretisch direkt das Skript aufrufen.

Der Skriptaufruf selbst erfolgt mit einem internen Skriptcontainer.

Zum Beispiel für die folgende definierte Funktion in der Bibliothek,

 

 

 

sieht der Funktionsaufruf so aus:

 

 

Man kann JavaScript mit einer Webseite in Form einer Inline- Referenz verbinden. Bei einem sensitiven Element, z.B. Hyperlink, notiert man statt der URL das Protokoll JavaScript und ruft danach eine JavaScript- Anweisung auf.

 

 

 

5.  JavaScript-Versionen

JavaScript gibt es in verschiedenen Versionen. Mit den verschiedenen Versionen von JavaScript werden sukzessive neue Techniken eingefügt.

Ältere Browser können also bestimmte Techniken nicht interpretieren. Ein Beispiel einer Angabe von einer JavaScript- Version:

<script language=’JavaScript1.5’>

 

Die Versionsnummer wird ohne Leerzeichen angehängt. Obwohl „Language“ als überholt („deprecated“) gilt, ist das Type- Attribut untauglich.

 

Die Kombination von „language“ und „type“ ist ebenso falsch, da die Versionen Browser „language“ ignorieren und nur „type“ beachten werden.

 

6.  Schlüsselworte

Hier beschäftige ich mich mit elementaren Strukturen von JavaScript. Sie sind logische Strukturen, die in fast jedes Skript- oder Programmiersprache zu finden sind.

 

Die logischen Strukturen von Javascript umfasst Variablen, Arrays, Datentypen, Operatoren, Ausdrücke, Anweisungen und Kommentare sowie Unterprogramme.

Dabei erkennt jeder, der bereits in C-Programmiersprache gearbeitet hat, sehr viele Ähnlichkeiten zwischen JavaScript und C oder verwandte Sprachen wie Java, C#, Perl oder PHP. Diese Programmiersprachen gehen alle auf C zurück.

Jede Programmier- oder Scriptsprache besitzt bestimmte Zeichenkombinationen, die Bestandteil der Sprachdefinitionen sind.

In folgender Tabelle sieht man die Schlüsselworte, die in JavaScript vorkommen:

 

Schlüsselwort

Beschreibung

break

Abbruch in Schleifen

case

Fallunterscheidungen

catch

Auffangen von Ausnahmen

continue

Fortsetzung in Schleifen

default

Fallunterscheidungen

delete

Löschen eines Datenfeldelements oder

einer selbst definierten Objekteigenschaft.

do

Beginn einer Schleife

else

Einleitung des alternativen Blocks in einer if- Entscheidungsstruktur.

false

Der Wert Falsch

finally

Ein Schlüsselwort, das im Rahmen des Ausnahmebehandlungskonzepts von JavaScript eingesetzt wird.

for

Beginn einer Schleife

function

Einleitung von Funktionen

if

Einleitung von if- Fallunterscheidungen

in

Bedingte Anweisung in

if-Fallunterscheidungen

instanceof

Test des Objekttyps

new

Definition von Objekten

return

Sprunganweisung mit Übergabe eines Rückgabewertes in Funktionen

switch

Fallunterscheidungen

this

Bezug auf die aktuelle Instanz eines Objekts

throw

Auswerfen einer Ausnahme

true

Der Wert wahr

try

Beginn des Umschließens  einer kritischen Anweisung im Rahmen des Ausnahmebehandlungskonzepts von JavaScript.

typeof

Typ eines Elementes

var

Definition einer Variable

void

leere Funktionstype

while

Einleitung einer Schleife

with

Erlaubt mehrere Anweisungen mit einem Objekt durchzuführen.

Um die Syntax in JavaScript zu verstehen, ist es wichtig, diese Schlüsselworte zu kennen.

 

7.  Variablen

Ein weiterer Bestandteil einer Programmiersprache sind Variablen. Variablen sind bekannte Stellen im Hauptspeicher eines Computers, denen zur Laufzeit temporär Werte zugeordnet werden.

 

Eine Werterzeugung erfolgt durch Gleichheitszeichen und die Variablen werden über den Namen angesprochen, den man vorher definiert hat.

 

Wenn man Operationen mit Variablen ausführt, drückt man es mit Datentypen aus.

JavaScript kümmert sich automatisch um die Verwaltung von Datentypen.

 

Für das Anlegen einer Variablen in JavaScript, notiert man einen Zeichner, dann ein Gleichheitszeichen und dann wird ein Wert zugewiesen.

 

 

Allein diese Anweisung sorgt dafür, dass im Skript eine Variable mit dem Namen „a“ vorhanden ist. Und diese Wertzuweisung einer Zahl sorgt dafür, dass die Variable „a“ numerisch ist.

 

Man kann einer Variablen, die einen bestimmten Datentyp hat, jeder Zeit einen anderen Datentyp zuweisen.

 

a = 2;

a = ’’ Text ’’;

 

Nach dieser Anweisung hat die Variable “a” ein Textdatentyp. Dieses Verhalten macht den Umgang mit Variablen sehr einfach.

 

Zum Beispiel  meineVariable = 5; .Damit ist meine Variable von einem numerischen Datentyp. Ich kann diese Variable mit der Funktion alert()  ausgeben:

 

Wenn man sich die Ausgabe im Browser anschaut, sieht man folgende Meldung:

 

 

Im JavaScript erfolgt explizit bei der Typumwandlung eine automatische Veränderung des Datentyps. Typumwandlung nennt man auch “Casting”.

Obwohl JavaScript den Programmierer von einer konkreten Angabe eines Datentyps fernhält, wird im Hintergrund trotzdem damit gearbeitet.

Es gibt in JavaScript folgende Datentypen:

 

Datentyp

Beschreibung

Boolean

Werte von Type Boolean sind Wahrheitswerte, die nur einen der beiden Werte true oder false annehmen.

Number

Dieser universelle numerische Datentyp kann in JavaScript sowohl Ganzzahl- als auch Gleitkomma Werte enthalten.

object

Der allgemeine Datentyp Object kann einen Wert eines beliebigen Typs enthalten. Er wird für das Speichern von Objekten verwendet.

String

Dieser Datentyp steht für eine Zeichenkette und kann eine Reihe von alphanumerischen Zeichen enthalten.

undefined

Der Datentyp beschreibt eine nichtdefinierte Situation. Eine Variable besitzt so lange diesen Wert, bis ihr nach dem Anlegen explizit ein Wert zugewiesen worden ist.

null

Dieser Sonderdatentyp entspricht der Situation, wenn ein Objekt noch keinen Wert hat und entspricht „keiner Bedeutung“ oder null.

 

Man findet verschiedene Quellen in so einer Form Variablen Deklaration:

 var  a  =  12;

 

Die Bezeichnung „var“ wird vor der Variable geschrieben. Man kann auch in der Regel auf „var“ verzichten aber es gib dafür eine vernünftige Bedeutung.

In folgendem Beispiel lege ich eine Variable Namens „a“ an:

 

 

 

Und nun gebe ich den Wert aus:

 

 

Wenn ich var  a = 12; wegnehme, erhalte ich eine Fehlermeldung durch den Interpreter:

 

 

 

Mit „var“ wird auch eine Variable angelegt, ohne ihr einen Datentyp oder einen Wert zuzuweisen.

Wenn man die Variable „a“ ohne Initialisierung „var a;“ angibt, erhält man so eine Meldung:

 

 

Ganz offensichtlich sieht man keine Fehlermeldung. Die Variable „a“ ist da, aber hat zurzeit den Wert „undefined“. Man sieht also eine Anwendung, was man mit der Bezeichnung „var“ machen kann.

 

Man kann eine Variable anlegen ohne ihr ein Datentyp oder ein Wert zuzuweisen. Der Ansatz von „var“ ist ebenso zu sehen wenn, man eine Funktion definiert und in der Funktion eine Variable a einfügt ohne „var“ und ein Wert zuweist.

Wenn man nun diese Funktion aufruft und den Wert der Variable ausgibt.

 

 

 

Bei „a“ handelt es sich hier um eine globale Variable, obwohl sie innerhalb einer Funktion eingefügt wurde.

 

Wenn ich nun das Schlüsselwort „var“ vor der Variable a schreibe und sie wieder ausgebe sehe ich diese Fehlermeldung:

 

Die Variable a steht zurzeit nicht zur Verfügung, da die Variable außerhalb der Funktion aufgerufen wurde.

 

Wenn man eine Variable innerhalb einer Funktion definiert, ist sie lokal definiert und lokal bedeutet, dass eine Variable nur in einer Funktion zur Verfügung steht.

Mit Schlüsselwort „var“ kennzeichnet man eine Variable innerhalb einer Funktion als Lokal und sie steht außerhalb nicht zur Verfügung.

 

Wenn ich die Variable außerhalb der Funktion definiere und innerhalb der Funktion die Variable „a“ den Wert 1 zuweise, wird der Wert außerhalb der Funktion auch verändert.

 

 

 

Wenn man nun die Ausgabe anschaut, sieht man, dass  die Variable überall den Wert 1 hat.

 

Wenn ich in der Funktion vor der Variable „a“ das Schlüsselwort „var“ einfüge, sehe ich in der Ausgabe, dass die Variable „a“ den Wert 42 hat.

 

 

 

So sagt man, dass die Variablen sich in getrennten Namensräumen befinden.

 

Man muss beachten, dass der Name einer Variable- der so genannte „Bezeichner“ nicht mit einem JavaScript- Schlüsselwort übereinstimmen darf und das erste Zeichen einer Variable  ein Buchstabe oder ein Unterstrich sein muss. Ein Bezeichner darf keine Leerzeichen enthalten.

 

Nun nenne ich ein weiteres Beispiel, bei dem man mit Variablen und Datentypen besser umgehen kann.

 

Ich lege eine Variable an und nenne sie “meineVar”.

Über eine Wertzuweisung erhält sie einen Wert und gleichzeitig einen Datentyp.

Als Wert weise ich die Variable  „3.14“ zu.

 

Diese Schreibweise mit Punkt entspricht ein Gleitzahlwert oder ein Gleitkommawert.

Ich möchte nun diese Variable in einer Operation benutzen. Ich multipliziere die Variable mit dem Wert 6 durch „alert“ Funktion.

 

 

Eine Variable kann zur Laufzeit eines Skriptes jeder Zeit verändert werden.

Man schreibt den Bezeichner wieder hin und  weist ein neuen Wert zu, als Beispiel 77 durch 13 (77/13).

 

Ich lege nun eine neue Variable “a” an und weise einen Text zu und eine andere Variable “b” mit Boolean- Datentyp “true”.

Ein Boolean- Datentyp kann “true” oder “false” annehmen.

 

Ich lege noch eine Variable C mit dem Datentyp “object” an. Nun weise ich dieser Variable ein Objekt “new Date()” zu. Genauer gesagt, hier wird die sogenannte Referenz auf einem Objekt zugewiesen.

 

 

Mit “new Date()” erzeugt man ein Datumsobjekt, das als Wert, die Systemzeit des Rechners beinhaltet.

 

Die Variable C ist nicht das Objekt selbst sondern eine Referenz darauf. Eine Referenz wird auch ein Pointer oder ein Zeiger genannt. Diese zwei Begriffe werden in Programmiersprache C mehr verwendet.

 

8.  Datenfelder

Ein Datenfeld ist eine Sammlung von Variablen, die über einen gemeinsamen Bezeichner angesprochen werden können.

Dazu gibt es einen Index und über diesen Index kann man auf jeden einzelnen Wert in einem Array  bzw. Datenfeld zugreifen.

 

Ich möchte nun ein Datenfeld anlegen. Normalerweise legt man eine Variable so an, indem man ein Bezeichner für die Variable angibt und dann einen Wert zuweist aber bei Datenfeldern in JavaScript ist die Wertzuweisung und Definition etwas anders.

 

Auch bei Datenfeldern erfolgt eine Wertzuweisung aber die Syntax ist folgendes:

 

 

Man schreibt ein Schlüsselwert “new” hin und dann die Funktion “Array()”.

 

Ein Datenfeld ist ein Objekt wie Date- Objekt (new Date();). Das Schlüsselwort “new” in Verbindung mit dem Bezeichner “Array()” ist der Einsatz des sogenannten Konstruktors.

 

Ein Konstruktor erzeugt Objekte und das Schlüsselwort “new” heißt: Erzeuge ein neues Objekt von Typ eines Arrays also eines Datenfeld.

 

Diese Art Objekterzeugung lernt man in vielen objektorientierten Programmiersprachen und in JavaScript kann man auch sehr eingeschränkt ein Objekt erzeugen.

Wenn man ein Objekt erzeugt hat, kann man auf einzelnen Elementen in diesem Datenfeldobjekt  über eine besondere Syntax zugreifen.

 

 

a [0] = 1; bedeutet, dass das erste Element im Datenfeld dem Wert 1 zugeordnet ist.

Das erste Element bei der Indizierung von Datenfeldern beginnt mit dem Index 0 und das 2. Element mit dem Index 1 und so weiter.

 

Ich möchte nun diese Werte ausgeben. Man kann mit der Funktion  “document.write()” etwas in der Webseite schreiben.

 

Ich kann das 4. Element ausgeben, wenn ich a von 3 hinschreibe(a[3]). Man sieht, dass der Wert 5 ausgegeben wird.

 

 

Ausgabe:

 

 

Ich greife also auf das 4. Element zu.

Man kann mit so genannten Schleifen auf alle Elemente einem Array zugreifen.

Beispielsweise die while-Schleife wiederholt Anweisungen solange eine Bedingung erfüllt ist.

 

Ich definiere eine Zählvariable “i”. Die Abkürzung i steht für den Index.

An dieser Stelle erhält die while-Schleife als Bedingung i<4, also solange i kleiner als 4 ist.

 

Das Ende der Schleife ist die 2. geschweifte Klammer.

Die Funktion “documen.write” erhält als Parameter a[i].

 

Da ich bei der Ausgabe nach jedem Feldelement ein Zeilenumbruch haben möchte, gebe ich noch Plus “<br>” in der Parameterliste ein. Ein Zeilenumbruch bedeutet  ein Tag “<br>”.

 

Dann muss man den Wert der Variable i verändern.

„i++“ erhöht den Wert einer numerischen Variable um eins. Ganz offensichtlich werden alle Elemente des Datenfeldes ausgegeben.

 

 

 

Ausgabe:

 

Man sieht, dass in Zusammenhang mit Schleifen, Datenfeldern ein idealer Konstruktor sind.

Wie man es sieht, können in Variablen Werte verschiedener Datentypen stehen.

 

In Fall von Arrays habe ich folgendes Programm als Beispiel zusammengefasst.

 

 

In der 5.  Zeile lege ich ein Array „ich“ an und dann bringe Werte verschiedener Datentypen in diesem Array unter.

 

In der 6. Zeile ordne ich das erste Element ein „String“ zu. In der 7. Zeile wird das 2. Element einer Zahl zugeordnet.

 

In der 10.  Zeile ist das 5. Element auch ein „String“ zugeordnet, da die Ziffern in Hochkommas stehen.

 

Im Beispiel sieht man eine sinnvolle Anwendung. Man erkennt nämlich, dass die Feldelemente mit Personendaten initialisiert wurden wie Adresse, Telefonnummer, Vor und- Nachnamen.

 

Erst in ab der 13. Zeile greife ich auf einzelne Elemente bzw. Werte zu.

In der Funktion „document.write“ verbinde ich die einzelnen Feldelemente mit einem Text und gebe sie aus:

 

 

Der Umgang mit Datenfeldern in JavaScript hat einige Besonderheiten  zu bieten. Diese Besonderheiten möchte ich anhand eines Beispiels erklären.

 

Ich lege ein Datenfeld „a“ an: a = new Array();

Nun kann  als Parameter eine Größe für das Datenfeld angeben als Beispiel 10:

 a = new Array(10);

 

Damit ist das Datenfeld für 10 Elemente reserviert. Man kann die Größe des Datenfelds überprüfen. Ich verwende die Anweisung alert(a.length).

 

 

Wenn man sich die Ausgabe anschaut, sieht man, dass der Wert 10 ausgegeben wird:

 

Über die Eigenschaft „length“ kann man jeder Zeit die Anzahl der Elemente im Datenfeld rausbekommen.

Man kann beim Erzeugen von einem Datenfeld angeben, wie viele Elemente es beinhalten soll.

 

Ich füge nun eine Zählervariable i ein und initialisiere sie mit null. Nun lege ich eine while-Schleife an und überprüfe, ob die Variable „i“ kleiner ist als die Länge des Arrays. Die Zählervariable muss danach durch „i++“ erhöht werden.

 

 

Bei der Ausgabe werden 10 Mal „undefined“ ausgegeben das heißt, ich habe 10 Elemente im Datenfeld aber in Elementen stehen keine Daten.

 

 

9.  Anweisungen

Eine Anweisung ist eine Quellcodezeile, die bestimmte Befehle enthält. Das kann eine Variablendeklaration sein: a = 1, das kann ein Aufruf einer Methode sein:

alert (“Hallo Welt!”); oder das kann eine Schleife sein:

for (i = 0; i < 5; i++) { }.

 

Grundsätzlich werden alle Anweisungen in JavaScript mit einem Semikolon (;) beendet.

Mehrere Anweisungen können in “Blöcken” zusammengefasst werden, die von geschweiften Klammern {} begrenzt werden.

 

Man kann in einer Schleife mehrere Anweisungen zusammenfassen:

for (i = 0; i < 5; i++) {

document.write(“a”);

document.write(“b”);

 }

 

Ausdrücke sind eine wichtige Form von Anweisungen. Dabei geht es um die Manipulation von Daten, die in Variablen abgelegt sind:

a = 1 + 1;.

 

Es gibt in JavaScript zwei Typen von Ausdrücken, numerischer Ausdrücke wie obiges Beispiel und boolesche oder logischer Ausdrücke. Sie bezeichnen im Wesentlichen einen Vergleich.

Solche Vergleiche werden in sämtlichen Kontrollstrukturen realisiert wie in der Bedingung der Schleifen oder auch in Entscheidungsstrukturen wie if (a < 2);.

 

Die Bedingung „if (a < 2)“ ist ein logischer Ausdruck. Das Ergebnis von so einem Vergleich ist entweder wahr oder falsch also “true” oder “false”.

Sie sind boolesche Literale.

 

Wenn man Ausdrücke realisiert, verwendet man immer die so genannten Operatoren. Operatoren sind bestimmte Zeichen, die eine definierte Bedeutung in JavaScript haben.

 

Wenn man ein einfacher Ausdruck wie a = 1 + 2; betrachtet, sieht man mehrere Operatoren: Gleichheitsoperator (Zuweisungsoperator) und arithmetische Operator Addition.

Die Literale1 und 2 sind Operanten des Plus-Operators. Man unterscheidet in jeder Programmiersprache zwischen den Typen der Operatoren.

 

Eine der wichtigsten arithmetische Operatoren ist Modolo (%) und das bedeutet Restwertdivision.

Beispielsweise die Anweisung alert (11 % 4);  gibt 3 aus.

 

 

Dividiert man 11 durch 4, bleibt ein Rest von 3.

Der Modolo-Operator ist enorm wichtig für alle periodischen Vorgänge, wie z.B. Datumsberechnungen.

 

Ein anderer wichtiger Operator ist der Plus-Plus-Operator (++).

Zum Beispiel i = 0;   i ++;.

Die Variable i wird mit null initialisiert und dann um eins erhöht.

 

Die ausgeschriebene Schreibweise von i ++ ist i = i + 1;.

Der “i ++” –Operator wird auch “Inkrementoperator” genannt.

Bei “i ++” wird die Variable zuerst verwendet und dann erhöht.

 

Im Gegensatz dazu steht “++ i”. Hier wird die Variable zuerst erhöht und dann verwendet.

 Beispiel:

 

 

Ausgabe:

 

 

Der Dekrement-Operator (--) ist das Gegenstück zum Inkrement-Operator und arbeitet dementsprechend mit Minus-Zeichen: i --;

 

Wenn in einem Ausdruck mehrere Operatoren ausgewertet werden, gelten die Regeln:

- Es wird von recht nach links verarbeitet.

- Punkt- vor Strichrechnung.

 

Boolesche Operatoren treten beispielsweise in Bedingungen von Schleifen auf. Mit diesen logischen Operatoren verknüpft man boolesche Ausdrücke.

In folgender Tabelle sieht man einige Operatoren:

 

Zeichen

Name

==

Vergleichsoperator

!=

Ungleichoperator

 

Weitere Operatoren sind: „<“, „>“, „<=“ und „>=“.

„===“ überprüft die „Identität“. Somit müssen auch die Datentypen der zu vergleichenden Variablen gleich sein.

 

Wenn man in einer Bedingung zwei Ausdrücke kontrollieren möchte, dann gehört hier ein Topen hin, der das „und“ (&), das zur Angabe der beiden Bedingungen dient, ausdrückt.

Beispiel:

 

 

Die logische „und“ wird mit „&&“ dargestellt, das logische „oder“ mit „||“ (das doppelte Pipe-Symbol) und das „nicht“ mit „!“.

 

Wenn man in Zeichenketten bestimmte Steuerzeichen wie Hochkommas oder Zeilenumbrüche eingeben möchte, muss man diese maskiert angeben, das bedeutet, man kann nicht direkt hinschreiben, sondern man muss dafür eine Sequenz  benutzen, die einer Art Alias darstellt.

 

 Maskierte Steuerzeichen sind:

Zeilenumbruch: \n

Tabulator: \d

Für die Anzeige von doppelten Hochkommas in einem String: \“

 

Wenn ich beispielsweise die Anweisung “document.write()” verwende und da eine Zeichenkette ausgeben will, kann ich durch “\ t” (backslash t) ein Tabulator an der Stelle setzen.

 

 

Ausgabe:

 

Wenn man bei der Anweisung “ducument.write()” einen Zeilenumbruch erzeugen will, muss man HTML-Befehl “<br/>” verwenden, da die Zeichenkette in der Webseite geschrieben wird.

 

Bei der Anweisung “alert()” kann man ein Zeilenumbruch durch “\n” (Backslash n) erzeugen, da die Zeichenkette nicht in der Webseite geschrieben wird sondern in einem Editor.

 

 

Ausgabe:

 

10.              Kontrollstrukturen

Jede Programmier- oder Skriptsprache benötigt Kontrollstrukturen.

Solche Kontrollstrukturen sind die klassische Anwendung von logischen und vergleichenden Operatoren.

Damit kann man die Entscheidungen über den weiteren Ablauf eines Skripts oder Programms treffen oder Anweisungen wiederholen.

 

Es gibt 3 Typen von Kontrollstrukturen: Entscheidungsanweisungen, Schleifen und Sprunganweisungen.

 

Ich betrachte zuerst die Entscheidungsanweisung “if”.

Jeder, der schon einmal programmiert hat, wird if-Anweisung kennen. Syntax ist folgende:

if (<Bedingung>) und dann kommt die Anweisung, die ausgeführt werden soll, wenn die Bedingung wahr ist.

Beispiel:

 

 

Wenn eine if-Anweisung mehrere Bedingungen hat, müssen die Bedingungen in Blöcken (geschweifte Klammer {}) zusammengefasst werden.

 

Sehr oft folgt einer if-Anweisung eine else-Anweisung. Das bedeutet, wenn die if-Bedingung nicht erfüllt ist, soll die else-Anweisung ausgeführt werden.

 

Es gibt in JavaScript kein Schlüsselwort else-if-Anweisung aber man kann als Erstanweisung hinter “else” wieder ein “if” verwenden und ein neue Bedingung angeben und dann ein abschließendes “else” angeben. Das ist natürlich optional.

Beispiel:

 

 

Eine weitere Fallunterscheidung ist Switch-Case-Anweisung.

Diese Anweisung beginnt mit dem Schlüsselwort “switch()” und in Klammern wird eine Testvariable angegeben.

Nachfolgend werden mit dem Schlüsselwort “case” Fälle angegeben und dann Schlüsselwort „default“ für Default-Wert. Beispiel:

 

In der Ausgabe sieht man, dass der Buchstabe “c” ausgegeben wird.

Ab dem ersten Treffer werden sämtliche Anweisungen durchgeführt.

 

Je nachdem, welcher Wert die überprüfte Variable a hat (switch), soll eine bestimmte Anweisung(case) ausgeführt werden.

“default” ist der Fall, wenn vorher kein Treffer zu finden war.

„break“ ist eine Sprunganweisung und sorgt dafür, dass nach einem Treffer die switch-case-Anweisung verlassen wird.

 

Nun komme ich zu den Schleifen im JavaScript. Eine Schleife wiederholt sich so oft, bis eine Bedingung zum Abbruch gegeben ist. Dann wird die Schleife verlassen.

 

Ein Beispiel für Schleifen ist die while-Schleife. Die Syntax ist relativ einfach: “while()” und in Klammern wird eine Bedingung angegeben. Diese Bedingung kann so formuliert werden, dass man ein Wahrheitswert bei Vergleich erhält.

 

Man kann aber auch direkt ein Wahrheitswert an while-Schleife angeben beispielsweise “while (true)”, das entspricht einer Endlos-Schleife.

 

In der Regel legt man eine Variable wie “i = 0;” an und diese Variable kann man prüfen. Man muss beachten, dass in der while-Schlefe die Zählervariable „i“ erhöht werden muss “i ++”.

Beispiel:

 

 

Als Ausgabe werden die Zahlen von 0 bis 9 untereinander ausgegeben.

 

 

Die while-Schleife ist eine abweisende oder kopfgesteuerte Schleife.

 

Eng mit der while-Schleife verwandt ist die do-while-Schleife.

Die Ereignisse der while-Schleife und do-while-schleife sind identisch aber bei der do-while-Schleife wird die Schleife mindestens einmal durchlaufen, die Überprüfung der Bedingung erfolgt am Ende. Deshalb wird diese Art auch als annehmende bzw. fußgesteuerte Schleife bezeichnet.

Beispiel:

 

 

Die Ausgabe ist die Zahl 20.

 

Die while-Schleife hat den Nachteil, dass die definierte Zählvariable außerhalb der Schleife steht.

Mit der Anweisung „for“ wird die Zählvariable in der Schleife definiert Bsp:

for (i = 0; i < 10; i++) {

document.write (i + “<br>”); }

 

Besonders nützlich sind Schleifen in Verbindung mit Arrays wie in folgendem Beispiel:

 

 

Ausgabe:

 

 

In der 4. Zeile sieht man ein Array. Von Zeile 5 bis 8 sind die Array-Elemente mit verschiedenen Werten initialisiert.

In der Zeile 9 befindet sich eine for-Schleife. Über die Eigenschaft „length“ kann man die Größe des Arrays abfragen.

Diese Schleife durchläuft sämtliche Einträge des Arrays.

Die for-Schleife ist eine kopfgesteuerte Schleife und es wird am Anfang überprüft, ob die Bedingung erfüllt ist. 

 

Es gibt eine spezielle Abwandlung der for-Schleife, die speziell für Arrays gedacht ist. Diese heißt for-in-Schleife.

 

 

In obigem Beispiel Zeile 9 sieht man die for-in-Schleife. Die Variable „a“ ist für Indices der Elemente zuständig und „ich“ ist Name des Arrays.

Schleifen werden allgemein beendet, wenn eine Bedingung nicht erfüllt ist.

 

Man kann eine Schleife auch gezielt mit dem Schlüsselwort „break“ abbrechen.

„Break“ ist eine  Sprunganweisung. Sie springt aus der Struktur, in der sie gerade notiert wird. Meist wird sie in Verbindung mit „if“ oder „switch-case“ verwendet.

„Continue“  ist eine weitere Sprunganweisung. mit dieser bricht man nicht eine Schleife, sondern einen Durchgang ab.

Bsp:

i = 0;

while ( i < 100 ) {

i ++;

if (( i % 2 == 0 ) continue; document.write ( i + “ <br> ” );

Hier wird überprüft, ob “i” eine gerade Zahl ist. Wenn ja, dann wird „continue“ durchgeführt. Also gibt die Anweisung alle gerade Zahlen zwischen 0 und 100 aus.

 

11.              Funktionen

Mit einer Funktion kann man verschiedene Schritte zusammenfassen.

Eine Funktion ist grundsätzlich ein Unterprogramm, das verschiedene Applikationen und Anweisungen erzeugt.

An eine Funktion wird ein Name übergeben und über diesen Namen kann man komplexe Anweisungen der Funktion immer wieder im Programm aufrufen bzw. anwenden.

 

Zum Definieren einer Funktion schreibt man zuerst das Schlüsselwort „ function “ hin.

Nach dem Schlüsselwort wird an die Funktion ein Bezeichner bzw. Name übergeben gefolgt von Klammern „()“.

Wenn keine Parameter an die Funktion übergeben werden, bleiben die Klammern hinter „function“ leer.

 

Die Anweisungen werden in der Funktion mit einem Block „ { } “ zusammengefasst. Falls die Funktion was zurückliefern soll, benötigt man das Schlüsselwort „return“ in geschweiften Klammern. Mit „return“ wird der Rückgabewert zurückgegeben.

 

Beispiel:

 

 

In obigem Beispiel sieht man 3 Funktionen. In der Zeile 14 wird eine Funktion namens „test“ aufgerufen, die nur den Text „ Hallo Welt „ ausgibt.

 

In der Zeile 15 wird die Funktion „test1“ aufgerufen. Die Funktion „test1“ hat ein Parameter „a“. Nun wird beim Aufruf der Wert 2 als Parameter angegeben, d.h. der Variable „a“ wird der Wert 2 zugewiesen.

In der Zeile 17 wird die Funktion „test2“ aufgerufen. Diese Funktion hat zwei Parameter „a“ und „b“, welche in der Funktion miteinander multipliziert werden. Beim Aufruf der Funktion werden den Variablen „a“ und „b“ die Werte 5 und 9 zugewiesen

 

12.              Klassen

Eine Klasse wird dafür verwendet, ein Objekt über einen Konstruktor zu erzeugen.

Es gibt spezielle Methoden und Eigenschaften, die ohne ein explizites Objekt – eine Instanz – verwendet werden können.

 

Bei solchen Klassenelementen stellt man den Namen der Klasse voran und greift dann genau wie bei Objekten mit der Punktnotation auf eine Methode oder eine Eigenschaft zu.

 

Man erkennt Klassen daran, dass diese mit einem Großbuchstaben beginnen.

Objekte, Methoden und Variablen beginnen immer mit einem Kleinbuchstaben aber Konstanten werden auch groß geschrieben.

 

Wenn man ein Objekt erzeugen möchte, benötigt man eine Objektdeklaration (=Klasse).

Darunter kann man sich ein Baumplan für das zu erzeugende Objekt vorstellen.

Außerdem benötigt man einen Mechanismus (= Konstruktor), damit aus dem Bauplan ein konkretes Objekt entsteht.

 

Im folgenden Beispiel erzeuge ich in der Webseite eine Tabelle. Die Tabellenzeilen werden dynamisch über die „document.write“ generiert.

 

 

In der Zeile 6 befindet sich eine Schleife, die mit eins beginnt, eine Bedingung i < 10 und die Variable „i“ wird um eins erhöht.

 

In der Zeile 7 wird durch „Math.random()“ eine Zufallszahl zwischen 0 und 1 ermittelt. Dann wird sie mit 100 multipliziert und ergibt eine Gleitkommazahl zwischen 0 und 100.

 

Da ich eine Ganzzahl möchte, runde ich die Zahl mit „Math.round“ ab.

„Math“ ist hier eine Klasse. „round“ und „random“ sind Methoden und werden zusammen mit einer Klasse Klassenmethoden oder Instanzen genannt.

Die Ausgabe im Browser sieht wie folgt aus:

 

JavaScript stellt einige Standardklassen zur Verfügung, aus denen man Objekte erzeugen kann.

Zum Beispiel mit „ a = new Date () ; „ erzeugt man aus einer Klasse namens „Date()“, ein Datums-Objekt.

Mit „ b = new Array (); „ wird aus der Klasse Array ein Datenfeld-Objekt erzeugt oder mit „ c = new Image () ; „ wird ein Image-Objekt erzeugt.

 

Zum Beispiel betrachte ich folgenden Code:

 

 

In der Zeile 7 ist „ setTimeout () ; “ eine Methode von Objekt „window“.

Sie verzögert einen Aufruf, der als ersten Parameter angegeben wird um die Zeit in Sekunden, die als zweiter Parameter angegeben wird.

 

In der Zeile 5 „b = new Image ();“ wird ausgedrückt, dass der Variable „b“ eine Referenz auf ein neues Objekt zugewiesen wird und die Klasse „Image“ erzeugt hier ein Bildobjekt.

 

„source“ (= src) ist eine Eigenschaft, die bei einem Bildobjekt der angezeigten Datei entspricht.

„document“ ist ein Objekt, das die Webseite repräsentiert.

 

In der Zeile 7 ist „images[0]“ ein Datenfeld.

Das erkennt man an den eckigen Klammern und dem Index „[0]“, der auf das erste Bild in der Webseite zeigt.

Bei der Ausgabe im Browser sieht man, dass zuerst eine Grafik angezeigt wird, welche nach 5 Sekunden ausgetauscht wird.

 

Zum Erzeugen eines Objekts können mehrere Konstruktoren zur Verfügung stehen.

Diese unterscheiden sich durch unterschiedliche Parameter.

 

Die einzelnen Parameter im folgenden Beispiel stehen für Jahr, Monat, Tag, Stunde, Minute und ….

Bsp: a = new Date (2011, 10, 24, 12, 45, 49, 4 );

Die Nummerierung der Monate beginnt bei 0. Somit steht die 10 nicht für Oktober, sondern November.  

 

13.              verwendete Funktion in meinem Projekt  „ Digitaltechnik-Skript “

Folgende Funktion habe ich zum Einblenden und Ausblenden der Lösungen von Übungen in meinem Projekt Digitaltechnik-Skript verwendet.

 

.

Um mit dieser Funktion arbeiten zu können, wird die jQuery-Bibliothek benötigt.

In jedem Fall muss die Hauptbibliothek von jQuery im <head>-Bereich der Webseite eingebettet werden. Das HTML-Konstrukt sieht dann so aus:

 

 

In jQuery ist das Dollarzeichen „$“ ein zentrales Element, da es als Selektor für DOM-Elemente eingesetzt wird. Bei der Verwendung von Selektoren werden Anführungszeichen benötigt.

 

In der Zeile 4 sieht man ein Selektor. In der Klammer wird eine Klasse „exercise“ identifiziert.

Um Elemente nach Klasse auszuwählen, setzt man einen Punkt vor den Klassennamen.

Nun kann man auf alle Elemente, die Klasse „exercise“ haben, zugreifen.

 

Das Wesen der Programmierung im Web mit JavaScript und jetzt auch jQuery verlangt häufig, mehrere Elemente zu durchsuchen oder zu durchlaufen.

Zum Beispiel in der Zeile 4: Die Funktion „.each()“ übernimmt eine Liste von ausgewählten Elementen, geht die Elemente nacheinander durch und führt beim Schleifendurchlauf auf jedem Element eine oder keine Aktion aus.

 

Wenn man Funktionen wie „.each()“ zum Durchsuchen verwendet, wird man immer auf eine benutzerdefinierte Wrapperfunktion zusammen mit dem Selektor „$ (this)“ zurückgreifen.

Wie das Schlüsselwort „this“ in der objektorientierten Programmierung, verweist der Selektor „$ (this)“ auf das aktuelle Objekt – in diesem Fall auf das momentane Durchsuchen-Element „each“.  

 

Mit anderen Worten dieser Code verwendet einen Selektor, um alle Elemente zu erfassen, denen die Klasse „excersice“ zugeordnet ist. Dann greift er auf jedes dieser Elemente mithilfe der Funktion „.each()“ in jQuery zu.

 

Die „.find()“ Funktion  durchsucht alle Elemente im HTML-Code, die Klasse „solution“ haben. Nun die Funktion „.hid()“ blendet zuerst alle Elemente aus, die von Funktion „.find()“ gefunden wurden. Durch die Methode „.click()“ werden all diese Ereignisse mit Mausklick auf den zwischen <a>-Tag stehendem Text, in dem Fall „Lösung“ erzeugt.

 

Die Funktion „.toggle()“ toggelt das Element mit der Klasse „solution“, d.h. beim erstem Mausklick auf den Text „Lösung“ wird die versteckte Grafik oder der Text eingeblendet und beim Wiederanklicken wird es ausgeblendet und so weiter.

 

Nun übergebe ich zum Einblenden und Ausblenden einer Grafik nur die definierten Klassen von obigen Funktionen an <div>-Tags wie folgt:

   

 

wenn man die Seite im Webbrowser startet sieht man, dass die Grafik zuerst versteckt ist und erst nach dem Anklicken des Links „Lösung“ eingeblendet wird:

 

14.              Zusammenfassung

Ÿ Der eigentliche Sinn und Zweck von JavaScript ist, Objekte aufzurufen und zu manipulieren.

 

Ÿ Ein Objekt lässt sich über gewisse Eigenschaften charakterisieren. Man kann     bestimmte Applikationen damit erzeugen. Außerdem verfügt ein Objekt über einen Zustand.

 

Ÿ aktive Handlungen, die man an einem Objekt vollziehen kann, wäre, z.B. das Öffnen oder das Löschen eines Objektes.

 

Ÿ Ein Objekt wird über folgende Punkte charakterisiert:

à über die Möglichkeiten, was man damit tun kann. Man spricht auch über die Methoden eines Objektes.

à über seinen Zustand: Entsprechend dem Zustand des Objektes werden  bestimmte Methoden bereitgestellt.

à über die Eigenschaften des Objektes.

 

Ÿ  JavaScript ist keine objektorientierte, sondern eine objektbasierende Programmiersprache. Man kann in JavaScript also Objekte verwenden und erzeugen, aber es fehlen einige wichtige Elemente, die für eine objektorientierte Sprache notwendig sind.

 

Ÿ   Unter einem Objekt kann man sich all das vorstellen, was man eigenständig  ansprechen kann. Das kann beispielsweise der Browser sein, ein Browserfenster  oder eine Webseite.

 

Ÿ  Einer grafischen Oberfläche werden Symbole zur Verfügung gestellt, die für bestimmte Objekte stehen.

 

Ÿ  Die innere Struktur von Objekten ist vollkommen unbekannt und interessiert den Anwender auch zumeist nicht, wenn er dieses verwendet.

 

Ÿ  Mit einer dot-Notation (Punkt-Notation) kann in Programmiersprachen auf Objekte zugegriffen werden.

 

Ÿ  Dabei wird ein Objekt (=Empfänger einer Botschaft) notiert und dann eine Eigenschaft oder eine Methode von diesem Empfänger aufgerufen.

window.alert ( „Hallo Welt“ ) ;

„Alert“ ist hier die Methode eines Objekts ( „window“ ).

 

 

15.              Literaturverzeichnis

 

Internet:

 


| | | | |
Tausche dein Hausarbeiten

G 2 - Cached Page: Thursday 28th of March 2024 05:46:00 PM