Hinweis für PDF-Seiten von Software-Help-Kursen file:///e:/html/kursus_js/hinweis_pdf.htm Die in den einzelnen Lektionen sichtbaren Links zu Beispiel-Programmen sind in diesen PDF-Seiten nicht aktiv. Diese Beispiele sind nur direkt auf der Webseite anzusehen. Brigitte www.software-help.de 1 von 1 30.06.05 09:44
JavaScript-Kursus fuer Anfaenger von Software-Help - Einleitung file:///e:/html/kursus_js/anfang_js.htm Einleitung Ich habe lange überlegt, wie ich einen Kursus JavaScript (im weiteren Text werde ich nur noch JS schreiben) für Anfänger schreiben soll. In den meisten Büchern findest Du ausführliche Hinweise zur Entstehungsgeschichte, wer was wann entwickelt hat und warum. Interessiert es Dich? Dann kaufe Dir ein Buch und lese es dort nach. Ich werde das hier nicht weiter ausführen. Das wichtigste, was Du wissen mußt ist, daß JS eine Scriptsprache ist (wie der Name schon sagt) und keine Programmiersprache im eigentlichen Sinne. Sie ist zwar an die Programmiersprache JAVA angelehnt und hat einiges aus dieser Sprache übernommen, aber JS kann nicht eigenständig ohne HTML und einen Browser funktionieren - was "richtige" Programmiersprachen eben können. Profis werden jetzt bei dieser Definition wahrscheinlich den Kopf schütteln, aber für die ist diese Seite ja auch nicht gemacht. Außerdem kann man einige Sachen, die man mit "normalen" Programmiersprachen kann, mit JS nicht machen. Wenn Du schon Programmierkenntnisse in einer Sprache hast, wird Dir der Einstieg in JS sehr leicht fallen. Hast Du noch nie mit Programmiersprachen zu tun gehabt, ist es möglicherweise nicht leicht, JS zu lernen. Ich werde mich in erster Linie an diese "Unwissenden" wenden. Wenn ich bei den Beschreibungen also eine sehr einfache Ausdrucksweise benutze, mögen mir die verzeihen, die schon etwas Erfahrung mitbringen. Voraussetzung, daß Du überhaupt etwas verstehst ist aber, daß Du HTML-Kenntnisse hast. Wenn nicht, arbeite doch erst einmal den HTML-Kursus durch und komm dann wieder auf diese Seite zurück. JS ist nicht die einzige Scriptsprache, die im Internet Verwendung findet, aber die verbreiteste und deshalb werde ich mich auf JS beschränken - zumal JS von allen Browsern ab der 4er Version verstanden wird. Voraussetzung für das Verarbeiten von JS ist allerdings, daß in den Browsereinstellungen JS-Scripte freigeschaltet worden sind. Normalerweise wird das bei der Installation des Browsers automatisch eingestellt - wenn Dein Browser aber keine Scripte bzw. die Ergebnisse von JS nicht anzeigt, dann schau einmal in die Einstellungen. Für JS gilt das gleiche wie für CSS. Du kannst die Scripte direkt im HEAD-Teil Deiner HTML-Seite schreiben, oder eine externe JS-Datei in einem Text-Editor anlegen, mit der Dateiendung "js" abspeichern und auf Deiner Seite einbinden. Vorausgesetzt, die JS-Datei befindet sich im selben Verzeichnis wie die HTML-Dateien, wird das wie folgt geschrieben: <html> <head> <title> </title> <script language="javascript" src="meine.js" type="text/javascript"> </script> </head> <body> </body> </html> Die externe JS-Datei enthält keinerlei HTML-Tags, auch nicht den Hinweis auf "language=javascript" etc. Diese Datei muß mit einem Text-Editor (z.b. von Windows, Ultra-Edit oder Proton) geschrieben werden. Wenn Du JS direkt auf der HTML-Seite schreibst (was ich Dir zu Anfang empfehle) muß das
JavaScript-Kursus fuer Anfaenger von Software-Help - Einleitung file:///e:/html/kursus_js/anfang_js.htm zwischen </title> und </head> wie folgt gemacht werden: <script language="javascript"> Dann kommt das Kommentarzeichen (kennst Du schon aus dem CSS-Kursus). Der Text wird vor Browsern, die kein JS können, versteckt. <!-- Hier kommt jetzt der Text des JS hin. Am Ende das schließende Kommentarzeichen: //--> Danach wird das SCRIPT-Tag wieder geschlossen: </script> Und für Browser, die JS nicht verstehen, schreibt man einen Hinweis zwischen die folgenden Tags: <noscript> </noscript> Im Zusammenhang dargestellt sieht Deine HTML-Seite also so aus: <html> <head> <title> </title> <script language="javascript"> <!-- Text des JavaScripts steht hier. //--> </script> <noscript> Text für Noscript steht hier. </noscript> </head> <body> </body> </html> Zum Schluß der Einleitung noch ein Tip: Am besten testest Du Deine JS erst einmal mit dem Netscape-Browser. Netscape reagiert wesentlich empfindlicher auf Fehler während der Internet Explorer kleinere Tippfehler gerne überliest und das Ergebnis trotzdem anzeigt. Wichtig ist das einwandfreie Funktionieren in beiden Browsern. Beim Internet Explorer kannst Du in den
JavaScript-Kursus fuer Anfaenger von Software-Help - Einleitung file:///e:/html/kursus_js/anfang_js.htm Einstellungen festlegen, daß bei Fehlern ein Hinweis eingeblendet wird. Bei Netscape kannst Du, wenn kein Ergebnis (oder Deiner Meinung nach ein falsches) angezeigt wird, in der URL-Leiste Deines Netscape-Browsers einfach folgendes eingeben "javascript:" (Doppelpunkt nicht vergessen) und die Eingabetaste drücken. In einem separaten Fenster zeigt Netscape Dir dann die Fehler auf Deiner Seite an (soweit er sie als Fehler erkennt). Genug der Einleitung. Jetzt geht es los mit der 1. Lektion - Funktionen und Dialogfenster 1. Lektion
JavaScript-Kursus fuer Anfaenger von Software-Help - Funktionen... file:///e:/html/kursus_js/js_lek1.htm Funktionen und Dialogfenster Was ist eine Funktion? Es ist nichts weiter als ein kleines Programm, man nennt es nur nicht Programm, sondern "function". So eine Funktion schreibst Du im HEAD-Teil Deiner HTML-Seite wie folgt: <html> <head> <title> </title> <script language="javascript"> <!-- function hinweis () Text des Programms //--> </script> Die Funktion bekommt einen beliebigen Namen (möglichst soll er aber etwas über das Programm aussagen, damit Du später noch weißt, wofür Du es geschrieben hast). Der Name muß aus einem Wort bestehen und darf keine Leerzeichen und keine Sonderzeichen enthalten. Willst Du zwei Worte miteinander verbinden, ist der Unterstrich erlaubt, z.b. "heute_datum". Auch Zahlen kannst Du verwenden, z.b. "heute2" oder "morgen3". Dahinter schreibst Du eine normale öffnende und eine schließende Klammer. Wenn in diesen Klammern nichts steht, heißt das, daß die Funktion keinen Wert zurückliefert. In den weiteren Lektionen wirst Du lernen, "Parameter" in die Klammern zu schreiben. In diesem Fall können die Klammern leer bleiben - aber sie müssen auf jeden Fall mitgeschrieben werden, denn ohne sie ist die Funktion unvollständig und funktioniert nicht! Danach kommen die öffnende und die schließende geschweifte Klammer (Du kennst sie schon aus dem CSS-Kursus) und zwischen diese geschweiften Klammern schreibt man den Programmtext. Ich möchte mit den Dialogfenstern (oder auch Dialogboxen genannt) anfangen, weil sie Dir sicher schon auf verschiedenen Internetseiten begegnet sind und Du Dich vielleicht schon mal gefragt hast, wie man das macht. Es gib drei verschiedene Dialogfenster für unterschiedliche Anwendungsmöglichkeiten, und zwar werden sie mit: alert confirm prompt vereinbart. Das ALERT-Fenster nimmt man, um einen Hinweistext anzuzeigen. Dieses Fenster
JavaScript-Kursus fuer Anfaenger von Software-Help - Funktionen... file:///e:/html/kursus_js/js_lek1.htm enthält ein Symbol, das ein Dreieck mit Ausrufezeichen darstellt und einen OK-Button (die Dialogfenster sind in ihrem Aussehen vordefiniert). Du mußt nichts weiter tun, als zwischen die geschweiften Klammern einen Text zu schreiben, der im Dialogfenster angezeigt werden soll. Beispiel: function hinweis () alert ("Sie betreten jetzt meine Homepage!"); Damit es übersichtlicher und besser zu lesen ist, rückt man den Programmtext nach der öffnenden geschweiften Klammer etwas ein (guter Programmierstil). Den Text der Anweisung schreibt man in runden Klammern und in Anführungsstrichen. Diesen Text nennt man auch einen "String". Welche Bedeutung das hat, wirst Du in der nächsten Lektion lernen, wenn es um die Verwendung von Variablen geht. Auf jeden Fall ist es wichtig, den "String" in Anführungsstrichen zu schreiben. Nach der Anweisung (also der schließenden runden Klammer) muß immer ein Semikolon die Anweisung beenden. Damit Dein kleines Programm auch ausgeführt wird, mußt Du es im BODY-Tag "anmelden". Das schreibst Du so: <body onload="hinweis();"> Die Anweisung für den Browser heißt: beim Laden (onload) führe das Programm "hinweis()" aus. Hier findest Du jetzt den Namen, den Du vorher Deiner Funktion gegeben hast, wieder. Nach den beiden runden Klammern kommt wieder ein Semikolon. In verkürzter Form ist dies jetzt wieder eine Anweisung, deren "Inhalt", nämlich der Programmname, wieder in Anführungsstrichen stehen muß. Wenn Du jetzt Deine HTML-Seite im Browser öffnest, wird als erstes dieses Dialogfenster eingeblendet. Der User kann erst weitergehen, wenn er den OK-Button im Dialogfenster gedrückt hat. So sieht das Fenster aus, wenn Die HTML-Seite im Browser geöffnet wird: Das CONFIRM-Fenster wird genauso vereinbart, wie das ALERT-Fenster. Der einzige Unterschied ist der, daß das CONFIRM-Fenster als Symbol eine Sprechblase mit einem Fragezeichen und einen zusätzlichen Button "Abbrechen" hat. Das Fragezeichen sagt eigentlich schon, daß hier eine Frage an den User gestellt wird, die er mit ja (OK-Button) oder nein (Abbrechen-Button) beantworten muß. Beispiel: function frage ()
JavaScript-Kursus fuer Anfaenger von Software-Help - Funktionen... file:///e:/html/kursus_js/js_lek1.htm confirm ("Wollen Sie die Ware zu diesem Preis kaufen?"); Auch diese Funktion wird im BODY-Tag mit onload="frage();" angemeldet. Würdest Du dieses Dialogfenster mit dieser Frage auf Deiner Seite verwenden, müßtest Du eine weitere Programmierung hinzufügen, damit - wenn der User auf OK drückt - etwas bestimmtes getan wird (z.b. ein Formular, das der User ausgefüllt hat, per Email an Dich verschicken). Das hier zu behandeln, wäre aber zu früh. Ich werde später Beispiele für solche Programmierung geben. Das CONFIRM-Fenster würde auf Deiner HTML-Seite wie folgt aussehen: Das PROMPT-Fenster ist ein Dialogfenster, in dem der User ein Textfeld hat, in dem er etwas eingeben soll. Das PROMPT-Fenster zeigt kein Symbol, sondern nur Deinen Text, das Eingabefeld und die beiden Buttons OK und Abbrechen. Ich möchte das Fenster hier nur vorstellen, damit Du es kennenlernst. Um dieses Fenster benutzen zu können, mußt Du etwas mehr programmieren. Da das erst später in diesem Kursus behandelt wird, zeige ich Dir nur, wie es vereinbart wird und wie es aussieht. Beispiel: function antwort () prompt ("Geben Sie bitte Ihren Namen ein:"); Und so sieht das Fenster aus: Um die weiteren Schritte programmieren zu können, mußt Du wissen, was Variablen und Schleifen
JavaScript-Kursus fuer Anfaenger von Software-Help - Funktionen... file:///e:/html/kursus_js/js_lek1.htm sind und wie man sie einsetzt. In der nächsten Lektion geht es um Variablen 2. Lektion
JavaScript-Kursus fuer Anfaenger von Software-Help - Variablen file:///e:/html/kursus_js/js_lek2.htm Variablen Anfänger tun sich mit Variablen sehr schwer. Deswegen werde ich das an einem Beispiel versuchen, zu verdeutlichen. Stell Dir vor, Du hast einen Schrank mit mehreren Schubladen. Den Schubladen gibst Du Namen. In die Schublade A legst Du 2 Socken, in die Schublade B legst Du 3 Socken. Nach einer Weile überlegst Du Dir das, nimmst die Socken aus Schublade A und aus Schublade B und legst alle in Schublade C. Dort sind dann zusammen 5 Socken. Beim Programmieren "vereinbart" - oder richtiger ausgedrückt "deklariert" - man Variablen, die für das ganze Programm gelten sollen (sogenannte globale Variablen) vor der eigentlichen Funktion. Variablen, die innerhalb einer Funktion deklariert werden, sind lokale Variablen und nur der Funktion bekannt, in der sie deklariert wurden (sind also auch nur dort zu gebrauchen). In jeder Programmiersprache gibt es sogenannte "Schlüsselwörter", die für Anweisungen an das Programm benutzt werden. Schlüsselwörter darfst Du nicht für Namen (z.b. der Funktion usw.) verwenden. Für die Deklaration von Variablen benutzt man in JS das Schlüsselwort var. Damit ich Variablen-Namen immer nur einmal benutze, habe ich mir angewöhnt, alle Variablen vor der Funktion zu deklarieren (eine alte Angewohnheit aus der "C"-Programmierung). So weiß ich immer, welche Variablen im Programm vorhanden sind. Bei JS ist das nicht unbedingt erforderlich. Man kann Variablen einfach dann deklarieren, wenn man sie braucht - allerdings wird das bei einem sehr umfangreichen Programm auch leicht unübersichtlich. Für Anfänger ist es sicher besser, die Variablen zu Beginn zu deklarieren. Später, wenn Du Dich mit JS gut auskennst, kannst Du das ja anders machen. Um das Beispiel der Schubladen weiter zu verwenden, habe ich also 3 Variablen (Schubladen). 2 dieser Variablen weise ich Werte zu (Socken). Richtig geschrieben sieht das so aus: var a = 2; var b = 3; Werte, mit denen ich rechnen will, werden nicht in Anführungsstriche geschrieben. Auch hier gilt: jede Anweisung wird mit einem Semikolon beendet. Die Variable a enthält jetzt den Wert 2 (die Schublade A enthält 2 Socken) und die Variable b hat den Wert 3. Die Variable c (Schublade C) soll das Ergebnis einer Rechenoperation aufnehmen und bekommt daher zu Anfang keinen Wert zugewiesen. Ich benutze bei dieser Rechenoperation nicht die Werte (nämlich 2 und 3), sondern nur den Namen der Variablen. Wenn Du in der Schule Algebra hattest und das verstanden hast (a + b = ab), dann wirst Du das mit den Variablen auch schnell verstehen.
JavaScript-Kursus fuer Anfaenger von Software-Help - Variablen file:///e:/html/kursus_js/js_lek2.htm Noch einmal deutlich: die Schublade A enthält 2 Socken und die Schublade B 3 Socken. Bei der Rechenoperation sage ich einfach addiere Schublade A und Schublade B und lege das Ergebnis in Schublade C - oder einfacher gesagt: Schublade C erhält den gesamten Inhalt von Schublade A und Schublade B. Da die Werte hier in diesem Beispiel für a und b feststehen, muß ich die Werte selbst nicht zum Rechnen benutzen, sondern nur die Namen der Variablen (den Inhalt der Variablen -oder auch der Schubladen- findet das ausführende Programm (die Funktion) bei der Deklaration der Variablen). Ist das sehr schwer zu verstehen? Ich glaube nicht. Wenn Du das jetzt im HEAD-Teil Deiner HTML-Seite schreibst, mußt Du zuerst die globalen Variablen vor der Funtkion deklarieren. Danach schreibst Du Deine Funktion. In den runden Klammern hinter dem Funktionsnamen gibst Du jetzt die Parameter an (also die Namen der Variablen) mit denen das Programm arbeiten soll. Innerhalb der Funktion läßt Du dann für die Variable C die Berechnung durchführen. Mit "return c" soll der Wert der Variablen c zurückgegeben werden. Außerhalb der Funktion wiederholst Du dann den Namen der Funktion mit den in Klammern stehenden Parametern. Danach wird die Anweisung zur Ausgabe auf der HTML-Seite geschrieben. Das Ganze sieht dann so aus: <script language="javascript"> <!-- var a = 2; var b = 3; var c; function rechne(a,b) c = a + b; return c; rechne(a,b); document.write("das Ergebnis ist: " + c); //--> </script> Document bedeutet in diesem Fall das geladene Dokument - also Deine aktuelle HTML-Seite (ohne weitere Benennung). Write ist klar, es heißt "schreibe" und in Klammern wird ein "String" (der String wird immer in Anführungsstrichen geschrieben - Du erinnerst Dich?) geschrieben (der hinter dem Doppelpunkt ein Leerzeichen enthält, damit die Zahl des Ergebnisses nicht direkt an den String gesetzt wird). Danach folgt ein Pluszeichen und der Name der Variablen, deren Wert ausgegeben werden soll - natürlich willst Du das Ergebnis ausgeben. Hier eine kleine Extraseite, die Dir das Ergebnis anzeigt: Testseite für Variablen Wie Du an dem Beispiel gesehen hast, nimmt man Rechenoperationen durch Verwendung von Operatoren vor. Es gibt verschiedene Operatoren, die Du im Laufe der Zeit noch kennenlernen wirst. Für die Rechenoperationen heißen diese Operatoren "arithmetische Operatoren" (bekannt sind Dir die Zeichen ja wohl schon von Taschenrechnern her) und werden durch die Zeichen
JavaScript-Kursus fuer Anfaenger von Software-Help - Variablen file:///e:/html/kursus_js/js_lek2.htm + = Addition - = Subtraktion * = Multiplikation / = Division % = Modulo (Restwertberechnung) dargestellt. Probiere das obige Beispiel-Programm einmal mit unterschiedlichen Werten und Operatoren aus, damit Du die Wirkung genauer kennenlernst. Ich glaube nicht, daß ich dafür extra Beispiele geben muß. Du kannst einer Variablen nicht nur Zahlen als Werte übergeben, sondern auch Strings. var vorname = "Peter"; var nachname = "Schmidt"; var gebdat = "12.11.1975"; Für die Ausgabe auf der HTML-Seite müßtest Du wie folgt schreiben: document.write("mein Freund heißt: " + vorname + " " + nachname + " und hat am " + gebdat + " Geburtstag!"); Ergebnis: Testseite für Ausgabe von Strings und Variablen Wie Du siehst, kann man Strings und Variablen durch Pluszeichen miteinander verbinden und erhält bei der Ausgabe einen ganzen Satz. Brauchst Du zwischen 2 Variablen ein Leerzeichen, mußt Du auch das als String behandeln und in Anführungsstrichen einfügen. Du fragst Dich, wozu das denn gut sein soll, den Satz könntest Du ja auch gleich in die HTML-Seite schreiben? Dies ist nur eine Vorbereitung auf viel größere Aufgaben, die noch in den folgenden Lektionen auf Dich warten. Merke Dir nur, daß man den Variablen Werte (ohne Anführungszeichen) und Strings (mit Anführungszeichen) zuweisen kann. Mit Werten kann man rechnen, mit Strings nicht. Wichtig ist außerdem, daß Du weißt, wie die Inhalte der Variablen dann wieder ausgegeben werden. Etwas anderes ist es, wenn Du mit Währungen arbeitest, also z.b. mit D-Mark (oder Euro). Ein Beispiel: var kaffee = 10.95; var zucker = 0.99; var cola = 1.99; Da es sich hier um Zahlen handelt, mit denen gerechnet werden soll, werden sie natürlich nicht in Anführungsstrichen geschrieben. Das Dezimalzeichen ist nicht, wie wir es in Deutschland gewohnt sind, das Komma, sondern der Punkt (international). In "normalen" Programmiersprachen gibt es für das Arbeiten mit Dezimalzahlen unterschiedliche Variablen. Eine normale Zahl ist dort z.b. eine Variable mit der Bezeichnung "integer" und eine Dezimalzahl "float" oder "double". JS kennt die float- und double-variablen nicht. Wenn Du mit Beträgen arbeitest die mit einer Null beginnen (wie oben beim Zucker) oder im Endergebnis hinter dem Komma (bzw. dem Punkt) Nullen stehen, wird das beim Internet Explorer ohne Probleme angezeigt, beim Netscape jedoch fehlen diese Nullen auf der HTML-Seite. Eine Lösung hierfür zu erarbeiten, setzt schon umfangreiche Programmierkenntnisse voraus. Da Du noch Anfänger bist, solltest Du es zunächst einmal so akzeptieren. Um die obigen 3 Variablen zu addieren ist folgende Anweisung zu schreiben:
JavaScript-Kursus fuer Anfaenger von Software-Help - Variablen file:///e:/html/kursus_js/js_lek2.htm var erg = kaffee+zucker+cola; Und für die Ausgabe mußt Du folgendes beachten: Eine Zeilenschaltung wird ebenfalls in Anführungsstrichen mit der HTML-Anweisung <br> vorgenommen: document.write("der Kaffee kostet: " + kaffee + "<br>" + "Der Zucker kostet: " + zucker + "<br>" + "und die Cola " + cola + "<br>" + "Gesamtsumme: " + erg); Eine Beispielseite hierfür: Testseite für Ausgabe von Währungen Wie Du siehst, kann man nicht alles mit JS machen - bzw. es sieht nicht alles besonders gut aus. Dennoch mußt Du zunächst einmal wissen, wie das mit den Variablen funktioniert, um später weiterarbeiten zu können. Noch ein Hinweis: JS unterscheidet Groß- und Kleinschreibung. Du kannst also eine Variable "Kaffee" anlegen und eine zweite, die Du "kaffee" nennst. Du mußt nur immer die gleiche Schreibweise benutzen für die Deklaration und für den späteren Aufruf der Variablen innerhalb des Programmtextes, sonst bekommst Du eine Fehlermeldung. Für die letzten beiden Beispiele habe ich übrigens nicht extra eine Funktion geschrieben. Um so kleine Sachen auszuprobieren reicht es aus, nur die Anweisungen zu schreiben. Und da es keine Funktion gibt, braucht man das natürlich auch nicht im BODY-Tag "anzumelden", sondern kann die HTML-Seite im Browser aurufen und der Browser führt das kleine Programm auch so aus. Das sieht im HEAD-Teil Deiner Seite wie folgt aus: <script language="javascript"> <!-- var kaffee = 10.95; var zucker = 0.99; var cola = 1.99; var erg = kaffee+zucker+cola; document.write("der Kaffee kostet: " + kaffee + "<br>" + "Der Zucker kostet: " + zucker + "<br>" + "und die Cola " + cola + "<br>" + "Gesamtsumme: " + erg); //--> </script> Die gesamte Anweisung für "document.write" mußt Du in einer Zeile schreiben (also nicht irgendwo zwischendrin eine Zeilenschaltung machen, weil die Zeile über Deinen Bildschirm hinausläuft und Du meinst, daß Du das dann besser lesen kannst). Mit diesen Angaben kannst Du jetzt schon ein bißchen herumexperimentieren. Es ist wichtig, daß Du die Arbeit mit Variablen verstehst. Wenn Du jetzt schon kleine eigene Programme schreibst und der Browser Dir Fehlermeldungen anzeigt, dann schau Dir Deinen Programmtext genau an. Entweder hast Du das Semikolon am Ende einer Anweisung vergessen (was sehr leicht passieren kann) oder Du hast einen Variablennamen falsch geschrieben. Fehler liegen niemals beim Browser, sondern sind immer im Programmtext zu finden! In der nächsten Lektion geht es um Kommentare und Abfragen / Schleifen. 3. Lektion
JavaScript-Kursus fuer Anfaenger von Software-Help - Kommentar... file:///e:/html/kursus_js/js_lek3.htm Kommentare und Abfragen / Schleifen Wenn die Programme, die Du schreibst, größer werden, ist es manchmal besser, sich bei einigen Sachen Kommentare zu schreiben, damit man später noch weiß, was man da eigentlich gemacht hat. Innerhalb des Programmtextes leitest Du Kommentare pro Zeile mit zwei Schrägstrichen ein. function beispiel () var a = 12; // Dies ist ein einzeiliger Kommentar zur Variablen a Du kannst auch einen mehrzeiligen Hinweistext in Deinem Script unterbringen. Das macht man so: function beispiel () /* Dieses Programm wurde geschrieben von: Brigitte Fraszczak zuletzt upgedated am: 08.12.2001 das Copyright liegt bei: Brigitte Fraszczak */ Du beginnst den mehrzeiligen Kommentar mit /* und kannst jetzt beliebig viele Zeilen Kommentar schreiben. Beendet werden muß der Kommentar mit */. Es ist so ähnlich wie das Schreiben von Strings, der Schrägstrich ersetzt die Klammern und der Stern die Anführungsstriche. Kommen wir zu den Abfragen und "Schleifen". Ohne sie kommt keine Programmiersprache aus und in allen verschiedenen Sprachen sind sie gleich. Da ist zunächst die sehr wichtige If-Abfrage. Es ist eigentlich keine Abfrage, sondern eine Anweisung: "Wenn die Bedingung, die ich Dir stelle, erfüllt ist, dann tue das oder das". Ein einfaches (nicht sehr sinnvolles) Beispiel: if (Peter ist müde) geh nach Hause; If bedeutet so viel wie "wenn" oder "falls". Die Bedingung, die gestellt wird, steht in den runden Klammern. Danach folgt, wie bei der Funktion, die geschweifte Klammer. Jetzt kommt der Programmtext, der das angibt, was getan werden soll. In einem Satz gesagt: Wenn Peter müde ist, soll er nach Hause gehen. Um Dir ein sinnvolles Beispiel geben zu können, mußt Du noch die "Vergleichsoperatoren" kennenlernen.
JavaScript-Kursus fuer Anfaenger von Software-Help - Kommentar... file:///e:/html/kursus_js/js_lek3.htm Operator vergleicht, ob == die Werte von zwei Variablen gleich sind ( a == b ) oder ob eine Bedingung wahr (true) oder falsch (false) ist ( a == true ) ( a == false )!= die Werte von zwei Variablen sind nicht gleich (ungleich) ( a!= b ) > der Wert einer Variablen ist größer als der angegebene Wert ( a > 10 ) < der Wert einer Variablen ist kleiner als der angegebene Wert ( a < 10 ) >= der Wert einer Variablen ist größer oder gleich mit dem angegebene Wert ( a >= 10 ) <= der Wert einer Variablen ist kleiner oder gleich mit dem angegebene Wert ( a <= 10 ) Dann gibt es noch den "Inkrementoperator" und den "Dekrementoperator". Inkrementieren heißt "hochzählen" und Dekrementieren "erniedrigen". Man kann z.b. einer Variablen einen Anfangswert zuweisen und diesen Anfangswert dann während des Programmablaufs erhöhen oder erniedrigen. Beispiel: var a = 1; Inkrementieren: a++ Ergibt für Variable a einen neuen Wert von a = 2 var b = 10; Dekrementieren: b-- Ergibt für Variable b einen neuen Wert von b = 9 Du kannst beim Hochzählen die lange Form benutzen ( a = a + 1 ) oder die Kurzform ( a++ ). Oder beim Dekrementieren ( a = a - 1 ) oder ( a-- ). Ein etwas sinnvolleres Beispiel: var a = 1; if (a <= 10) a++; document.write("variable a hat den Wert " + a); Testseite für If-Abfrage hochzählen Der Variablen a habe ich den Wert 1 zugewiesen. Die Bedingung in Klammern heißt "wenn a kleiner oder gleich 10 ist". Im Programmtext zähle ich zunächst die Variable a mit 1 hoch und gebe dann den Wert der Variablen a aus. Die Ausgabe muß logischerweise 2 sein. Nun benutzt man die If-Abfrage nicht unbedingt für diese Art der Schleifen. Dafür eignet sich sehr viel besser die "For-Schleife". Aber dazu komme ich später. Um die If-Abfrage sinnvoll einzusetzen, nehme ich nun das Beispiel mit den Dialogfenstern aus der 1. Lektion wieder auf. Jetzt kann man die nämlich viel besser einsetzen. Weil Du jetzt auch schon mit Variablen arbeiten kannst, hier ein sehr schönes Beispiel: function antwort ()
JavaScript-Kursus fuer Anfaenger von Software-Help - Kommentar... file:///e:/html/kursus_js/js_lek3.htm var eingabe; eingabe=prompt ("Wie ist mein Name?"); if (eingabe=="brigitte") alert("hallo, Brigitte!"); Testseite für If-Abfrage - als Namen bitte "Brigitte" eingeben! In diesem kleinen Beispiel reicht es aus, die Variable innerhalb der Funktion zu deklarieren, sie muß nicht in einem späteren Programm noch einmal verwendet werden - ist also nur dieser Funktion "antwort" bekannt. Der Variablen "eingabe" weise ich als Wert das Dialogfenster "prompt" mit dem Inhalt (dem Text) zu. Du siehst also, was man alles mit Variablen machen kann. Danach kommt die If-Abfrage. Die Bedingung in Klammern heißt: Wenn Die Eingabe "Brigitte" ist (und nur dann), öffne ein Alert-Fenster und gib den Text "Hallo, Brigitte!" aus. Was passiert aber, wenn die Eingabe nicht Brigitte ist, sondern irgendetwas anderes reingeschrieben wird? Nun in diesem Fall passiert gar nichts. Das Programm verabschiedet sich einfach kommentarlos - was ja auch nicht die feine Art ist. Um das zu ändern, muß die If-Abfrage erweitert werden. Das macht man mit der Anweisung "else" - was so viel heißt wie "sonst". Das obige Beispiel durch else erweitert: function antwort () var eingabe; eingabe=prompt ("Wie ist mein Name?"); if (eingabe=="brigitte") alert("hallo, Brigitte!"); else alert("der Name ist falsch!"); Testseite für If-Else-Abfrage Ich glaube, diesen Programmtext verstehst Du ohne weitere Erklärung - nur so viel: Wenn die Eingabe nicht Brigitte ist, wird der Text "Der Name ist falsch!" in einem Alert-Fenster angezeigt. Eine weitere wichtige Schleife ist die For-Schleife. Die For-Schleife nimmt man grundsätzlich zum hochzählen oder durchzählen von Aktionen. Es hat sich bei Programmierern so eingebürgert, hierfür den Variablennamen "i" zu benutzen. Du kannst natürlich auch das "x" oder einen beliebigen anderen Namen nehmen. Wenn Du die Programmtexte anderer Programmierer liest, wirst Du aber immer wieder auf dieses "i" stoßen. Dieser Buchstabe ist einfach die "Zählvariable". Damit Du das besser verstehst, hier ein kleines Beispiel:
JavaScript-Kursus fuer Anfaenger von Software-Help - Kommentar... file:///e:/html/kursus_js/js_lek3.htm for ( i = 1; i < 11; i++ ) document.write( i + ". Zeile <br>" ); Die Bedingung (in Klammern) bedeutet: Variable i erhält den Anfangswert 1 ( i = 1 ), durch Semikolon getrennt folgt gleich die nächste Anweisung: solange i kleiner ist als 11 Semikolon und nächste Anweisung: erhöhe i um 1 Danach kommt wieder in geschweiften Klammern die Anweisung für die Ausgabe: Gib den Wert der Variablen i aus, hänge den Text ". Zeile" an und mache nach jeder Zeile eine Zeilenschaltung. Du mußt Dir das so vorstellen, als würdest Du eine Sache immer wiederholen (z.b. die Hand heben) und das machst Du 10 mal. Die Schleife wird einmal durchlaufen, dabei wird die Variable i um 1 erhöht und ist also 2. Beim nächsten Durchlauf wird die Variable i wieder um 1 erhöht und erhält den Wert 3 usw. Das wird solange wiederholt, bis der Wert der Variablen 10 ist. Ich weiß, daß das nicht leicht zu verstehen ist. Du wirst sicher sagen: Aber da steht doch, daß die Variable i = 1 ist. Das ist richtig. Es steht aber auch innerhalb der Klammer, daß i um 1 erhöht werden soll. Die Bedingung in den Klammern wird von links nach rechts abgearbeitet. Erst liest das Programm den Wert der Variablen i und zu Anfang ist er ja 1. Dann prüft das Programm, ob der Wert, den es eben gelesen hat, noch kleiner ist als 11. Wenn das der Fall ist, geht das Programm zur nächsten Anweisung und erhöht die Variable um 1, nämlich auf 2. Und das passiert bei jedem Schleifendurchlauf neu. Auch wenn Du es nicht geschrieben siehst, ist der Wert der Variablen vom Programm auf einen neuen Wert gesetzt worden. Welchen Wert die Variable i bei jedem Schleifendurchlauf hat, zeigt Dir die Ausgabe. Für die Ausgabe gibst Du ja nicht eine Zahl an, die ausgegeben werden soll, sondern den Wert der Variablen i soll ausgegeben werden. Du solltest das mit anderen Werten versuchen, um den Sinn wirklich zu verstehen. Nur durch Ausprobieren wirst Du es verstehen lernen. Versuch auch einmal den Dekrementoperator einzusetzen, um zu sehen was passiert, wenn Du statt i++ i-- eingibst. Natürlich muß die Bedingung in Klammern dann auch anders geschrieben werden for ( i = 11 ; i > 1 ; i -- ) - "i" erhält als Anfangswert die Zahl 11, solange "i" größer ist als 1 erniedrige "i". Hier eine Testseite für die Ausgabe des ersten Beispiels: Testseite für For-Schleife Es gibt dann noch die For-In-Schleife. Ich gebe hier lieber gleich ein Beispiel und danach die Erklärung: for ( i in navigator ) document.write( i + " = " + navigator[i] + "<br>" ); Die Variable "i" erhält keinen Anfangswert. Sie nimmt bei jedem Schleifendurchlauf (auch wenn Du es nicht siehst) als Wert den Namen der "nächsten" Eigenschaft (z.b. appname = Name des Browsers) des Objektes auf. Das Objekt, das durchsucht werden soll, ist in diesem Fall der Browser (Netscape oder Internet Explorer usw.). Die Variable "navigator" nimmt bei jedem Schleifendurchlauf den "nächsten" Wert der Eigenschaft auf (z.b. ist beim Internet Explorer der
JavaScript-Kursus fuer Anfaenger von Software-Help - Kommentar... file:///e:/html/kursus_js/js_lek3.htm Wert "Internet Explorer"). Das Durchsuchen dieses Objektes wird durch das Wort "in" erreicht. Die Ausgabeanweisung lautet: Gib den Namen des Objektes, dann ein Gleichheitszeichen, dann den Inhalt (Wert) des Objektes aus und mach nach jeder Zeile eine Zeilenschaltung. Das in eckigen Klammern hinter navigator stehende "i" ordnet, ganz einfach gesagt, die Werte der Eigenschaft dem Namen der Eigenschaft zu. Name 1 zu Wert 1 usw. Hier die Ergebnisseite zum Beispiel: Testseite für FOR-IN-Schleife Hat irgend jemand gesagt, daß Programmieren leicht ist? Gib nicht auf. Es kommen noch so viele interessante Sachen, die Dir ganz bestimmt Spaß machen. Leider muß man sich erst einmal durch so viel schweren Mist durcharbeiten, um dann später die wirklich großen Sachen machen zu können. Damit Du nicht müde wirst, jetzt zwei weitere Schleifen. Beide sind sich ähnlich. Das eine ist die While-Schleife und das andere die Do-While-Schleife. Der Unterschied besteht darin, daß die While-Schleife am Beginn der Schleife prüft, ob die Bedingung "wahr" (true) ist. Wenn die Bedingung wahr ergibt, wird die Anweisung ausgeführt. Die Do-While-Schleife läuft auf jeden Fall einmal durch und führt die Anweisung aus. Erst am Ende wird geprüft, ob die Bedingung wahr ist. Nun ist es bei dem nachfolgenden Beispiel nicht ganz einfach zu verstehen, wieso die dort gestellte Bedingung "wahr" ist. Ich benutze hier nämlich den Vergleichsoperator!= (was eigentlich "nicht gleich" bzw. ungleich heißt). Die Bedingung ist wahr solange der eingegebene Name nicht gleich "geheim" ist. Solange Du also einen anderen Namen eingibst, ist dieser "ungleich" des von mir vorgegebenen Namens - also ist die Bedingung "wahr". Wenn ich jetzt die Bedingung auf (name == "geheim") ändern würde, würdest Du eher verstehen, wann die Bedingung als wahr anzusehen ist. Ein einfaches Beispiel soll das Ganze noch einmal verdeutlichen: Wir beide sehen ein Haus, das weiß gestrichen ist. Ich sage: "Das Haus ist nicht rot!". Also habe ich Recht und meine Aussage ist wahr. Genauso verhält es sich mit dem Operator "ungleich" im folgenden Beispiel: var name; name = prompt ("Bitte geben Sie Ihren Namen ein:"); while (name!= "geheim") name = prompt("falscher Name! Bitte wiederholen:"); Der Variablen "name" weise ich als Wert das Dialogfenster "prompt" mit dem Text ("...") zu. Dann beginnt die While-Schleife. Die Bedingung in den Klammern sagt: Solange der eingegebene Name nicht gleich (also ungleich) "geheim" ist, öffne ein Prompt-Fenster und gib den Text ("...") aus. Der User wird immer wieder dazu aufgefordert, einen Namen einzugeben, bis dieser mit der Vorgabe übereinstimmt. Ein Abbrechen des Vorgangs ist in diesem Beispiel nicht möglich. Hier eine Testseite für das Beispiel: Testseite für WHILE-Schleife Für die Do-While-Schleife wird das Beispiel wie folgt geschrieben: var name;
JavaScript-Kursus fuer Anfaenger von Software-Help - Kommentar... file:///e:/html/kursus_js/js_lek3.htm do name = prompt ("Bitte geben Sie Ihren Namen ein:"); while (name!= "geheim") Hier eine Testseite für das Beispiel: Testseite für DO-WHILE-Schleife Hinter der While-Bedingung wird in diesem Fall übrigens kein Semikolon eingegeben. Für einen Passwortschutz, wie ich das hier als Beispiel benutzt habe, ist JavaScript allerdings nicht geeignet. Jeder User kann sich den Quelltext Deiner HTML-Seite ansehen - und dort steht ja das Wort, daß eingegeben werden muß. Es ist sicher nicht ganz einfach, die Unterschiede zwischen diesen beiden Schleifen zu verstehen. In komplexeren Aufgaben ist es manchmal wichtig, daß eine Anweisung auf jeden Fall einmal ausgeführt wird und dann nimmt man die Do-While-Schleife. Eine weitere Schleife ist die switch-case-abfrage bzw. Anweisung. Statt vieler If-Abfragen oder Do-While-Schleifen zu schreiben, um viele Möglichkeiten abzudecken, kann man das viel besser mit dieser Abfrage erreichen. Angenommen, Du willst Deine Freunde auf Deiner Seite mit ihrem Namen begrüßen. Dann schreibst Du eine Funktion, mit der Du über das Dialogfenster "prompt" den Namen abfragst (wie im vorherigen Beispiel). Als Antwort gibst Du über das Dialogfenster "alert" einen Gruß aus. <script language="javascript"> <!-- var name; function gruss () name = prompt ("Wie ist Dein Name?"); switch(name) case 'Brigitte': alert ("Hallo und Guten Tag, " + name + "!"); break; case 'Peter': alert ("Hallo und Guten Tag, Peter!"); break; default: alert ("Dich kenne ich nicht!"); break; //--> </script> Die Variable "name" kennst Du schon. Die Funktion habe ich hier "gruss" genannt. Die Variable "name" liest über das Prompt-Dialogfenster den eingegebenen Namen ein. In der
JavaScript-Kursus fuer Anfaenger von Software-Help - Kommentar... file:///e:/html/kursus_js/js_lek3.htm switch-anweisung wird die Variable "name" als Parameter übergeben. "Case" kann man einfach mit "Im Falle, daß..." übersetzen. Im Falle, daß der eingegebene Name "Brigitte" ist, gib das alert-fenster mit der Meldung "Hallo und Guten Tag..." aus und hänge den Wert der Variablen "name" an. Danach setze noch als String das Ausrufezeichen dahinter, so daß sich folgender String ergibt: "Hallo und Guten Tag, Brigitte!". In meinem Beispiel habe ich zwei unterschiedliche Variationen benutzt. Im zweiten Fall "Peter" habe ich nicht die Variable für das alert-fenster genommen, sondern gleich den Namen geschrieben, den ich hier ja als Eingabe erwarte. In diesem Fall hast Du etwas weniger Schreibarbeit, weil der Name "Peter" sehr einfach ist. Wenn der eingegebene Name lang und kompliziert ist, erleichtert das Benutzen der Variable allerdings die Arbeit. Du mußt darauf achten, daß am Ende der Zeile, die mit "case" beginnt kein Semikolon, sondern ein Doppelpunkt steht. Jede Case-Anweisung muß mit "break;" beendet werden. Als letzte Anweisung muß immer eine "default"-anweisung stehen, die ähnlich ist wie der Else-Zweig bei der If-Abfrage. Im Body meldest Du die Funktion mit "onload" an. Beispielseite zum Testen: Testseite für Switch-Case-Anweisung Sehr häufig wird diese Anweisung benutzt, um z.b. Webseiten verschiedener Sprachen aufzurufen. Wenn Deine Seite also in deutsch, englich, spanisch usw. vorhanden ist und Du den User auf die richtige Seite lenken willst, müßtest Du die Sprache des Browsers abfragen (was aber bei älteren Browsern noch nicht möglich ist). Die Abfrage legst Du in eine Variable: var sprache; sprache = navigator.language; Der Parameter, der an "switch" übergeben wird, wäre in diesem Fall natürlich "sprache" und bei den einzelnen "case"-anweisungen würde statt des Namens Deiner Freunde z.b. "de" (deutsch) oder "en" (englisch) oder "fr" (französisch) usw. stehen. Innerhalb der Schleife schreibst Du kein alert-dialogfenster, sondern rufst Du dann die jeweilige HTML-Seite mit "window.open("de_index.htm");" auf. var sprache; sprache = navigator.language; function seite_rufen () switch(sprache) case 'de': window.open("de_index.htm"); break; case 'en': window.open("en_index.htm"); break; default: window.open("andere.htm");
JavaScript-Kursus fuer Anfaenger von Software-Help - Kommentar... file:///e:/html/kursus_js/js_lek3.htm break; Welche der verschiedenen Schleifen Du benutzt, hängt also auch davon ab, was Du damit machen willst. In der Benutzung bist Du aber nicht eingeschränkt. Wenn Dir die If-Abfrage besser gefällt, kannst Du natürlich diese nehmen statt der Switch-Case-Anweisung. In der nächsten Lektion geht es um Fenster. 4. Lektion
JavaScript-Kursus fuer Anfaenger von Software-Help - Fenster file:///e:/html/kursus_js/js_lek4.htm Fenster In der Hierarchie des Browsers gibt es verschiedene Objekte. Window (Fenster) ist das oberste Objekt, dem andere Objekte (document, location, history) untergeordnet sind. Ein window-objekt wird automatisch erzeugt, wenn eine HTML-Seite aufgerufen wird. Jedes Objekt hat verschiedene Eigenschaften. Ich werde hier nicht allzu sehr in die Tiefe gehen. Im Laufe der Lektionen wirst Du die einzelnen Unterobjekte von Window kennenlernen. Eine kleine Grafik soll das Objekt Window mit den untergeordneten Objekten verdeutlichen: Anhand dieser Grafik wird schnell deutlich, wie die Hiearchie des Objektes "window" aussieht. Das Objekt "document" beispielsweise betrifft alles, was zwischen den beiden BODY-Tags zu finden ist. Wenn ich also in dem aktuellen Browserfenster etwas schreiben will, reicht es aus, die Anweisung "document.write" zu benutzen. Habe ich ein Formular auf der HTML-Seite, auf dessen einzelne Felder ich zugreifen will, müßte ich "document.formularname.feldname.value" schreiben. Im Laufe der nächsten Lektionen wird der Zusammenhang leichter zu verstehen sein, wenn es um konkrete Beispiele geht. Beginnen wir mit dem obersten Objekt "window". In den vorhergehenden Lektionen habe ich immer wieder Testseiten zu den Beispielen gemacht, die in einem kleinen separaten Fenster geöffnet wurden. Ich glaube, daß dies wohl mit die wichtigste Anwendung im Internet überhaupt ist, die über JavaScript geregelt wird. Die Programmierung ist ganz einfach. Im HEAD-Teil Deiner Seite schreibst Du eine Funktion mit folgendem Inhalt: <script language="javascript"> <!-- function openwin() var fenster = open("test.htm","objekt","width=200,height=200, screenx=150,screeny=150,scrollbars=no"); fenster.focus(); return;
JavaScript-Kursus fuer Anfaenger von Software-Help - Fenster file:///e:/html/kursus_js/js_lek4.htm //--> </script> Die Erklärung dazu: Die Funktion habe ich "openwin" genannt. Der Name erklärt mir, was die Funktion bewirken soll. Dann habe ich eine Variable "fenster" deklariert. Dieser Variablen habe ich die window-eigenschaft "open" zugewiesen. Ich kann auch "window.open" schreiben. Das wäre zwar die richtige "Langform", da "open" aber eine Eigenschaft von window ist, kann ich mir die Tipparbeit sparen. In den runden Klammern weise ich nun dem kleinen Extrafenster einige Eigenschafen zu. Zunächst schreibe ich in Anführungsstrichen den Namen der HTML-Datei, die in dem neuen Fenster geöffnet werden soll. Durch Komma getrennt kommt dann ein Name für das Fenster (in meinem Fall einfach "objekt"), auch diesen in Anführungsstrichen geschrieben. Du kannst das Fenster auch "Heinrich" nennen. Das Fenster läßt sich über diesen Namen ansprechen und steuern. Nachdem ich wieder ein Komma geschrieben habe setze ich jetzt alle Eigenschaften, die das Fenster haben soll, hintereinander - ohne Leerzeichen dazwischen! - alle zusammen in Anführungsstriche. Die Breite, die das Fenster haben soll (width) in Pixeln, die Höhe, die das Fenster haben soll (height) in Pixeln, die horizontale Position, an der das Fenster dargestellt werden soll (screenx) in Pixeln vom oberen Bildschirmrand aus gerechnet (der obere Bildschirmrand beginnt mit "0"), die vertikale Position, an der das Fenster dargestellt werden soll (screeny) in Pixeln vom linken Bildschirmrand aus gerechnet (der linke Bildschirmrand beginnt mit "0"), dann lege ich fest, daß das Fenster keine Scrollbalken haben soll (scrollbars=no). Weitere Möglichkeiten, die Du für ein Fenster festlegen kannst, sind: outerwidth = äußere Breite in Pixeln outerheight = äußere Höhe in Pixeln directories = yes oder no - Directory-Buttons location = yes oder no - URL-Eingabezeile menubar = yes oder no - Menüleiste resizable = yes oder no - statusbar = yes oder no - Fenster am Fensterrahmen vergrößerbar oder nicht Statuszeile toolbar = yes oder no - titlebar = yes oder no - Navigationsknöpfe (vorwärts, zurück usw.) Titelleiste dependent = yes oder no - erzeugtes Fenster ist vom Browserfenster abhängig (wird das Browserfenster geschlossen, wird auch das Extrafenster geschlossen) Dann bekommt das kleine Fenster über die Variable "fenster" den Focus - einfach erklärt bedeutet es, daß das kleine Fenster zum aktiven Fenster wird. Und schließlich schreibe ich noch "return" (das kennst Du bereits aus der Lektion 2).
JavaScript-Kursus fuer Anfaenger von Software-Help - Fenster file:///e:/html/kursus_js/js_lek4.htm Jetzt kannst Du die Funktion einem Anker (Link) zuweisen, damit - wenn der User darauf klickt - das Extrafenster geöffnet wird. Ein Beispiel: <a href="javascript:openwin();"> Testseite für Fenster </a> Statt der HTML-Datei, die Du sonst bei href= angeben würdest, schreibst Du nur javascript:openwin();. In der Funktion hast Du ja bereits die HTML-Datei, die geöffnet werden soll, genannt. Diese Funktion wird also nicht (wie in Lektion 1 benutzt) im BODY-Tag angemeldet, sondern direkt dort wo sie gebraucht wird, nämlich im Anker (Link). Wenn Du mehrere solcher Links auf Deiner Seite hast (so wie bei mir in den vorhergehenden Lektionen) mußt Du für jeden Link (bzw. jede HTML-Datei) eine eigene Funktion nehmen - also numerierst Du sie einfach durch (openwin2(), openwin3() usw.), weil Du nur eine einzige HTML-Datei pro Funktion auf diese Weise öffnen kannst. Mit einem umfangreichen Programm könnte man das natürlich doch - aber das würde weitreichende Programmierkenntnisse voraussetzen und deswegen gehe ich hier nicht darauf ein. Allerdings will ich Dir noch die Möglichkeit zeigen, ein Fenster über Buttons im Browser zu öffnen. Hierzu wird der Eventhandler "onclick" benutzt. Außerdem zeige ich Dir, wie Du über einen Button, der natürlich im Extrafenster sein muß, das Fenster wieder schließen kannst. Dazu benutzt man die window-eigenschaft "close". Funktion zum Schließen des Fensters: function fensterzu() window.close(); Hier benutze ich keine Variable, sondern nur die Anweisung "window.close". Diese Funktion schreibe ich im Extrafenster, das geschlossen werden soll. Hier hat das Fenster keinen Namen. Die Anweisung "window.close" bezieht sich in diesem Fall (weil ohne weitere Angaben) auf das aktuelle (also das gerade geöffnete) Fenster. Für den Button, der das Fenster öffnen soll, benutzt Du das im HTML-Kursus kennengelernte FORM-Tag und die folgende Anweisung: <form> <input type="button" name="b1" value="neues Fenster öffnen" onclick="openwin();"> </form> Innerhalb des Tags für den Button schreibst Du einfach onclick="openwin();". Durch den Klick auf den Button wird die Funktion aufgerufen und ausgeführt. Für den Button zum Schließen des Fensters machst Du das genauso, nur schreibst Du hier natürlich die Funktion "fensterzu()" bei onclick hin: <form> <input type="button" name="b2" value="schließen" onclick="fensterzu();"> </form> Hier eine Beispielseite: Testseite Fenster
JavaScript-Kursus fuer Anfaenger von Software-Help - Fenster file:///e:/html/kursus_js/js_lek4.htm Eine weitere wichtige Eigenschaft des window-objektes ist z.b. "history". Du hast sicher schon häufiger auf Webseiten Buttons zum Vorwärts- und Rückwärtsblättern gesehen. Du kannst das auch mit einem Text-Link machen. Der Programmcode, der dahintersteht ist relativ einfach. Die Anweisung, um zur vorhergehenden Seite zurückgehen, lautet: window.history.back(); Um zur nächsten Seite zu gehen, schreibst Du: window.history.forward(); Du kannst den User auch zu einer ganz bestimmten Seite weiterleiten, indem Du folgendes schreibst: window.history.go(); Und in Klammern gibst Du dann z.b. +1 (wie forward wird die nächste Seite aufgerufen) oder -1 (wie bei back wird die vorhergehende Seite aufgerufen) oder auch +3. Du kannst auch eine komplette URL in die Klammern schreiben (http://www.andereseite.de). Angenommen, Du hast einen eigenen Button gemacht (mit einem Pfeil nach rechts oder links), dann weist Du diesem Button mit <a href="javascript:history.back();"> oder <a href="javascript:history.forward();"> die entsprechende Anweisung zu. Beispiel - eine Seite zurück: Beispiel - eine Seite vor: Voraussetzung für das einwandfreie Funktionieren ist allerdings, daß die Seiten, die aufgerufen werden sollen, sich im "History" des Browsers befinden, also schon mal aufgerufen wurden. Bei "zurück" wird das einwandfrei gehen, da der Browser sich die aufgerufenen Seiten merkt, bei "vorwärts" klappt das aber nur, wenn der User schon mal die Seiten aufgerufen hatte, wieder zurück auf vorhergehende Seiten geklickt hat und dann wieder vorwärts will auf die Seite, auf der er ja schon mal war. Da man dafür auch die entsprechenden Buttons, die jeder Browser zur Verfügung stellt, nehmen kann, sind eigene Buttons hierfür eigentlich nur sinnvoll, wenn man den User durch eine große Anzahl von Seiten (wie bei einer Show) hindurchführen will. Dann solltest Du auf der ersten Seite aber keinen Zurück-Button und auf der letzten Seite keinen Vorwärts-Button anlegen. Dies soll zunächst einmal für den Anfängerkursus ausreichen. Damit kannst Du schon eine ganze Menge anfangen. Natürlich gibt es noch sehr viel mehr Eigenschaften für das window-objekt, aber nicht alle wirst Du unbedingt brauchen und in den folgenden Lektionen werden noch einige davon auftauchen.
JavaScript-Kursus fuer Anfaenger von Software-Help - Fenster file:///e:/html/kursus_js/js_lek4.htm In der nächsten Lektion geht es um Datum und Uhrzeit. 5. Lektion
JavaScript-Kursus fuer Anfaenger von Software-Help - Datum und... file:///e:/html/kursus_js/js_lek5.htm Datum und Uhrzeit Das Datum und die Uhzeit per JS abzufragen ist relativ einfach - es sei denn, Du willst die Ausgabe richtig und gut formatiert haben. Da ist dann schon etwas mehr Arbeit erforderlich. JS fragt die Systemzeit des Computers ab. Das erreichst Du mit folgendem Script: <script language="javascript"> <!-- var aktdatum; aktdatum=new Date(); document.write("aktuelles Datum und Zeit: " + aktdatum); //--> </script> Die Ausgabe, die Dir sicher nicht besonders gut gefällt, sieht wie folgt aus: Aktuelles Datum: Sun Dec 16 16:21:43 GMT+0100 ((MEZ) Mitteleuropäische Zeit) 2001 Aber genau so steht es im System Deines Computers. Wenn Du eine "schönere" Ausgabe haben willst, mußt Du viele Variablen anlegen, die die einzelnen Daten aufnehmen. Dazu muß ich einiges erklären: var aktdatum=new Date(); // nimmt die Systemzeit komplett auf (wie oben dargestellt) var tag=aktdatum.getdate(); // nimmt den Tag des Datums auf (nicht den Namen des Wochentages). Der Variablen "tag" mußt Du die Variable "aktdatum" mit deren Inhalt zuweisen. Aus diesem Inhalt sucht sich die Anweisung "aktdatum.getdate()" den darin enthaltenen Tag heraus und speichert ihn in der Variablen "tag". var monat=aktdatum.getmonth()+1; // nimmt den Monat aus der Variablen "aktdatum" auf und zählt 1 hinzu (weil die Zählung mit Null begonnen wird, wäre der Januar der Monat 0 - er soll aber mit 1 (weil der erste Monat) ausgegeben werden - also + 1. var jahr=aktdatum.getfullyear(); // nimmt aus der Variablen "aktdatum" das Jahr auf und speichert es in der Variablen "jahr". Um auch die Zeit so darzustellen, wie wir es gewohnt sind, mußt Du auch dafür weitere Variablen anlegen: var stunde=aktdatum.gethours(); // auch diese Variable greift auf "aktdatum" zu und holt sich dort die Stunde. var minute=aktdatum.getminutes(); // die Variable zur Aufnahme der Minuten.
JavaScript-Kursus fuer Anfaenger von Software-Help - Datum und... file:///e:/html/kursus_js/js_lek5.htm var sekunde=aktdatum.getseconds(); // die Variable zur Aufnahme der Sekunden Für die Ausgabe schreibst Du dann wie folgt: document.write("aktuelles Datum: " + tag + "." + monat + "." + jahr + "<br>" + "Aktuelle Zeit: " + stunde + ":" + minute + ":" + sekunde); Wie Du sehen kannst, mußt Du zur Trennung beim Datum immer den Punkt als String "." hinzufügen und bei der Zeitausgabe habe ich den Doppelpunkt ":" als String für die Trennung vorgesehen. Automatisch wird das nämlich nicht gemacht. Mit anderen Worten "wer Schönheit will, muß leiden (also viel tippen)". Damit Du Dir das ansehen kannst, habe ich wieder eine Beispielseite gemacht. Testseite Datum und Uhrzeit Natürlich möchtest Du, daß die Sekunden sichtbar mitgezählt werden, wenn Du die Zeit auf Deiner Seite anzeigst, oder? Außerdem wäre es ja nicht schlecht, wenn das Datum und die Zeit in vorbestimmten Feldern angezeigt werden. Für die Aktualisierung ist die Anweisung "window.settimeout" geeignet. Die Sekunden werden in 1000stel (Millisekunden) angegeben. Für das Darstellen in Feldern nimmst Du ein Formular. Hier ein Beispielprogramm für diese erweiterte Anwendung: <script language="javascript"> <!-- var aktuell; var std; var min; var sek; var jahr; var tag; var monat; function start () var aktuell = new Date(); var std = aktuell.gethours(); var min = aktuell.getminutes(); var sek = aktuell.getseconds(); var jahr = aktuell.getfullyear(); var tag = aktuell.getdate(); var monat = aktuell.getmonth()+1; window.document.formular.zeit.value=std + ":" + min + ":" + sek; window.document.formular.datum.value=tag + "." + monat + "." + jahr; window.settimeout ("start()",1000); //--> </script> Im BODY-Tag muß die Funktion wie folgt angemeldet werden: <body onload="window.settimeout ('start()',1000)" >