JavaScript: allgemeine Einführung

Transkript

1 JavaScript: allgemeine Einführung Programmiersprache speziell für Internetseiten Interpretersprache Zugriff auf alle Elemente der Internetseite dynamisches Verändern der Internetseite mit JavaScript möglich JavaScript immer nur zusammen mit HTML eine Erweiterung von HTML Ausführung durch jeweiligen Browser (clientseitige Ausführung) und nicht auf dem Webserver (Folge: z.b. eigentlich keine Speicherung von Daten auf dem Webserver möglich) wichtiger Begriff: DOM = document object model (plattform- sowie sprachenunabhängige Schnittstellenbeschreibung für den Zugriff auf die Elemente eines HTML-Dokuments) Damit der Browser weiß, wo HTML aufhört und JavaScript anfängt wird das JavaScript-Programm zwischen die HTML-TAGs geschrieben. Es erscheint - in dieser kleinen Einführung erst einmal - im body-bereich des HTML-Codes: Somit weiß der Browser, was er interpretieren muss. Ausgabe mit alert: Diese Funktion bewirkt, dass auf dem Bildschirm ein Fenster mit dem jeweiligen Inhalt erscheint. alert('hallo!'); Anmerkung: Es ist egal, ob der Text: Hallo! in doppelten oder einfachen Anführungszeichen steht. Kommentare = 2 Slashes // Dies ist ein Kommentar 1 / 24

2 Ausgabe direkt auf dem Bildschirm mit document.write: document.write('hallo!'); Das bewirkt das Ausgeben des Textes direkt in das Browserfenster. Um eine Variable zu setzten, wird ein Variablenname vergeben. Es wird begonnen mit var und dann kommt der Variablenname und zuletzt die Zuweisung des Inhalts (dazwischen ein Gleichzeichen). In der Ausgabe wird nun anstatt des Textes der Variablenname angegeben (ohne Anführungszeichen!) var inhalt = 'Hauptschule'; document.write(inhalt); Mit prompt() erhält man ein Dialogfenster, in das man etwas eingeben kann. Außerdem wird auch ein Okay-Button und ein Abbrechen-Button hinzugefügt. Der eingegebene Wert wird zurückgegeben und kann z.b. der Wert einer Variablen werden: var deinname = prompt("bitte den Namen eingeben:", ""); Steuerzeichen bei Zeichenketten: + Verbinden von Zeichenketten \n Zeilenvorschub 2 / 24

3 Funktionen sind kleine selbstständige Programme innerhalb eines großen Programms. Sie werden über einen Aufruf ausgeführt. Vorteil: Einmal die Funktion schreiben, viele Male die Funktion ausführen. Funktionen beginnen immer mit dem Wort: function. Darauf folgt der Funktionsname mit Klammer auf / Klammer zu. Was die Funktion tun soll, wird in geschweifte Klammern eingeschlossen: function ausgabe() alert ('Dies ist ein Test.'); ausgabe(); Man kann auch Werte an Funktionen übergeben: function ausgabe(nachname) alert ('Der Name ist: ' + nachname); ausgabe('meier'); Auch Variablen können übergeben werden: function ausgabe(nachname) alert ('Der Name ist: ' + nachname); var dername = 'Graf'; ausgabe(dername); Wie in allen anderen Programmiersprachen kann man die Ausführung von Anweisungen von Bedingungen abhängig machen: if / else. Zuerst steht die Bedingung: if( ). Darauf folgen in geschweiften Klammern die Anweisungen, die ausgeführt werden sollen, wenn die Bedingung wahr ist. var x = 3; if(x == 3) alert('die Variable hat den Wert: 3') 3 / 24

4 Merke: Bei der Abfrage der Gleichheit: zwei Gleichheitszeichen == Bei Zuordnungen: ein Gleichheitszeichen = Man kann eine Bedingungsabfrage durch else erweitern. Hier werden dann Anweisungen eingesetzt, wenn die Abfrage bei if nicht wahr ist. var x = 5; if(x == 3) alert('die Variable hat den Wert: 3') else alert('die Variable hat nicht den Wert: 3') Quellen: / 24

5 zusammenfassendes Beispiel: <title>javascript-beispiel1</title> function ausgabe(ausgabename) document.write(ausgabename + " ist nicht Superman!"); var deinname = prompt("bitte den Namen eingeben:", ""); if(deinname == "") deinname = "unbekannt"; if(deinname == "Superman") document.write("willkommen Superman!"); else alert("der Name: " + deinname + " wurde eingegeben!\n" + " Vielen Dank."); ausgabe(deinname); 5 / 24

6 JavaScript: Elemente von Formularen Eine wichtiges Einsatzgebiet von Javascript sind Formulare und ihre Überprüfung. Formulare können Daten an Webserver senden, die dort dann verarbeitet und gespeichert werden. Auch kann der Webserver mittels PHP eine Antwort zurücksenden. Ein Formular hat immer: einen Namen: form name eine Empfängeradresse beim Senden: action die Festlegung der Übertragungsmethode: method Beispiel: Das bedeutet: Es gibt ein Formular namens: f ohne eine Übertragungsadresse (action=""), wobei mit get die Daten als Anhang an die Datei zum Webserver übertragen werden. Als Eingabe kann man zum Beispiel Radiobuttons verwenden, also eine Liste mit festen Einträgen, aus der (nur) ein Eintrag ausgewählt werden kann. Radiobuttons sind in einer Gruppe mit einem Gruppennamen zusammengefasst. Eine typische Anwendung ist die Auswahl der Anrede: Herr / Frau. Ein Beispiel: <input name="anrede" type="radio" value="herr" onclick="wechsel(this);" checked="checked"> Herr input ist ein so genanntes DOM-Objekt (DOM: Document Object Model). Programmiersprachen können hier auf HTML zugreifen: Eingabe per Klick. name definiert den Gruppennamen, hier: anrede type ="radio" definiert das Element als Radiobutton. value="herr" definiert den Übergabewert: Herr onclick="wechsel(this);" ruft die Funktion wechsel auf (siehe unten), wenn der Radiobutton angeklickt wird. Das Objekt (this) wird übergeben. checked="checked" sagt aus, dass dieser Radiobutton bei Start angeklickt sein soll. Das Wort Herr am Ende ist der Text, der neben dem Radiobutton erscheint. Beispiel für die Auswahl der Anrede Frau : <input name="anrede" type="radio" value="frau" onclick="wechsel(this);"> Frau</p> 6 / 24

7 Das Formular steht immer im body von HTML. Funktionen und andere Javascript- Elemente müssen im script-bereich stehen. Ein kleines Beispiel: <title>javascript-beispiel2a</title> function wechsel(objekt) alert("anrede gewechselt!"); <p><input name="anrede" type="radio" value="herr" onclick="wechsel(this);" checked="checked"> Herr <input name="anrede" type="radio" value="frau" onclick="wechsel(this);"> Frau</p> Auf dem Bildschirm: Aufgabe: Schreibe ein kleines Programm, bei dem man eine der Klassen 9a, 9b und 9c mit Radiobuttons auswählen kann. Eine andere Möglichkeit, etwas auszuwählen, bieten Auswahlmenüs. Jedes Auswahlmenü besteht aus einer Liste vorgegebener Einträge, wobei ein Eintrag ausgewählt werden kann. 7 / 24

8 Ein Beispiel: <select name="land" onchange="neu(document.f.land.value);"> select name="land" definiert ein Auswahlmenü mit dem Namen land. onchange="wechsel(document.f.land.value);" bedeutet, dass, wenn ein neuer Eintrag angeklickt wird, dieser Eintrag (value) an die Funktion neu übergeben wird. Mit option wird eine Auswahlmöglichkeit definiert: <option value="italien" selected="selected">italien</option> option value="italien" bedeutet, dass der Wert dieser Option Italien ist. selected="selected" bestimmt, dass diese Option beim Start als Auswahl erscheint. Das Wort: Italien am Ende ist der Text, der angezeigt wird. Merke: Hinter der letzten Option, also nach </select> steht der Text, der neben dem Auswahlmenü stehen soll. Beispielprogramm: <title>javascript-beispiel2b</title> function neu(landname) alert("land: " + landname); <p><select name="land" onchange="neu(document.f.land.value);"> <option value="italien" selected="selected">italien</option> <option value="spanien">spanien</option> <option value="portugal">portugal</option></select> Land</p> 8 / 24

9 Auf dem Bildschirm: Aufgabe: Erstelle eine Auswahlliste für den Wahlpflichtunterricht mit den Fächern: Informatik, Physik, Technik. Verwende sinnvolle Bezeichnungen für die einzelnen Elemente. Eine weitere Auswahlmöglichkeit sind Checkboxen. Ein Beispiel: <input name="zutat" type="checkbox" value="mayonnaise" checked onclick="markiert(this);"> Mayonnaise input name="zutat" vergibt den Namen für das DOM-Element. type="checkbox" sagt aus, dass es sich um eine Checkbox (Kästchen) handelt. value="mayonnaise" definiert den Wert der Checkbox: Mayonnaise. checked betimmt, dass das Kästchen beim Start ausgewählt ist. onclick="markiert(this);" sagt aus, dass beim Anklicken die Funktion markiert aufgerufen wird. Dabei wird dieses (this) Objekt übergeben. Das letzte Wort: Mayonnaise definiert den Text neben dem Kästchen. Ein Beispiel: <title>javascript-beispiel2c</title> function markiert(kasten) if(kasten.checked) alert(kasten.value + " markiert!"); else alert(kasten.value + " nicht markiert!"); 9 / 24

10 <p> Auswahl </p> <p> <input name="zutat" type="checkbox" value="mayonnaise" checked onclick="markiert(this);"> Mayonnaise</p> <p> <input name="zutat" type="checkbox" value="ketchup" onclick="markiert(this);"> Ketchup</p> <p> <input name="zutat" type="checkbox" value="spezialsauce" onclick="markiert(this);"> Spezialsauce</p> Auf dem Bildschirm: Aufgabe: Schreibe ein Programm für dieses Beispiel: Anmerkung: geschäftlich für HTML: geschäftlich 10 / 24

11 JavaScript: Problem: Lottozahlen Das Erzeugen von sechs zufälligen Lottozahlen und ihre Sortierung ist eine komplexe Programmieraufgabe. Sie wird daher in fünf Schritte unterteilt. Schritt 1: Erzeugen einer Zufallszahl Math.random() liefert eine zufällige Zahl im Bereich von 0 bis fast 1. Die Zahl 1 wird nie erreicht. Beispiel: (englische Notierung: Dezimalpunkt!). Beispielprogramm: <title>javascript-zufall</title> function zufall() var zufallszahl = Math.random(); alert(zufallszahl); <p> <input type="button" value="zufallszahl" onclick="zufall();"> </p> Erläuterung: Der Schalter (button) mit der Aufschrift: Zufallszahl ruft beim Anklicken (onclick) die Funktion zufall() auf. Bei der Funktion zufall() wird zuerst eine Variable zufallszahl deklariert: var zufallszahl. Dieser Variablen wird mit Math.random ein zufälliger Wert zugeordnet. 11 / 24

12 Schritt 2: Zufallszahlen in einem bestimmten Bereich Für Lottozahlen benötigt man Ganzzahlen von 1 bis 49: Math.random() * 49 Zahlenbereich: 0 bis Math.random() * Zahlenbereich: 1 bis Mit Math.floor() kann man auf die nächstkleinere Zahl abrunden. Man scheidet quasi alles rechts vom Komma ab: Math.floor(Math.random() * ) Zahlenbereich: 1 bis 49 <title>javascript-zufall</title> function zufall() var zufallszahl = Math.floor(Math.random() *49 + 1); document.write(zufallszahl + "<br>"); <p> <input type="button" value="zufallszahl" onclick="zufall();"> <br> </p> Aufgabe: Erzeuge eine Zufallszahl im Bereich 5 bis 25. (Schwerer, als man denkt!) Schritt 3: Schleife Möchte man nun sechs Zufallszahlen erzeugen, könnte man sechsmal var zufallszahl = programmieren. Das ist natürlich sehr umständlich. Also programmiert man eine Schleife, die eine Sache immer wieder tut, also eine Zufallszahl mehrere Male erzeugt. Schleifen mit for bestehen immer aus 3 Teilen: 1) Anfangswert 2) Abbruchwert 3) Zähler 12 / 24

13 Beispiel: for(var i = 1; i <= 6; i++) Man deklariert eine Variable: i. Diese Variable hat als Anfangswert: 1. Sie wird immer um +1 erhöht: i++. Die Schleife funktioniert, solange i kleiner oder gleich 6 ist. <title>javascript-schleife</title> function zaehlen() for(var i = 1; i <= 6; i++) document.write(i + " / "); <p> <input type="button" value="okay" onclick="zaehlen();"> <br> </p> Aufgaben: Programmiere eine Schleife für Zahlen von 1 bis 25. Programmiere eine Schleife für Zahlen von 20 bis 30. Programmiere eine Schleife für Zahlen von 10 bis / 24

14 Die sechs Zufallszahlen für das Lottoprogramm werden nun mit einer Schleife erzeugt: <title>javascript-zufall-6</title> function zufall() for(var i = 1; i <= 6; i++) var zufallszahl = Math.floor(Math.random() *49 + 1); document.write(zufallszahl + "<br>"); <p> <input type="button" value="zufallszahl" onclick="zufall();"> <br> </p> Schritt 4: Array Bei Lottozahlen gibt es Lottozahl1, Lottozahl2 Lottozahl6. Alle diese Daten sind gleichartig und können so in einem Array ( Datenfeld ) untergebracht werden. Ein Array muss immer erst einmal mit new Array() deklariert werden. zahlarray = new Die einzelnen Elemente des Arrays sind dann: zahlarray[1], zahlarray[2] Obwohl mit dem nächsten Beispiel auch nur sechs Zahlen auf dem Bildschirm erscheinen, ist es entscheidend anders. Auf jede der erzeugten Zufallszahlen kann nun im Programm jederzeit zurückgegriffen werden. Sie werden quasi zwischengespeichert. 14 / 24

15 <title>javascript-zufall-array</title> function zufall() zahlarray = new Array() for(var i = 1; i <= 6; i++) var zufallszahl = Math.floor(Math.random() *49 + 1); zahlarray[i] = zufallszahl; for(var i = 1; i <= 6; i++) document.write(zahlarray[i]+ "<br>"); <p> <input type="button" value="zufallszahl" onclick="zufall();"> <br> </p> Schritt 5: Sortierung Zwei Schönheitsfehler hat das kleine Lottozahlenprogramm noch: Die Zahlen sind nicht sortiert. Es besteht die Möglichkeit, dass eine Zahl mehrfach vorkommt. Das Sortieren von Daten ist eine der wichtigsten Aufgaben in der Informatik. Für unsere sechs Lottozahlen genügt ein einfacher Sortieralgorithmus (Algorithmus: Handlungsvorschrift zur Lösung eines Problems). Dazu eine kleine Vorüberlegung. Problem: Man hat zwei Flaschen Wein: ein Rotwein und ein Weißwein. Nun möchte man den Weißwein in die Rotweinflasche und den Rotwein in die Weißweinflasche füllen. 15 / 24

16 Lösung: Ein Hilfsbehälter muss genommen werden: Weißwein und Rotwein 1 Ein Hilfsbehälter kommt dazu. Weißwein in Hilfsbehälter Rotwein in leere Weißweinflasche Weißwein aus dem Behälter in leere Rotweinflasche Bei Programmen nimmt man natürlich nicht Rotweinflaschen etc., sondern Variablen wie i und j. Dann braucht man noch zwei ineinander verschachtelte Schleifen, die bestimmte Werte durchlaufen. Es wird immer verglichen, ob die Lottozahl zahlarray[i] größer als die Lottozahl zahlarray[j] ist. Dabei ist zahlarray[i] immer die Zahl, die in der Reihenfolge tiefer steht. Ist sie größer als zahlarray[j], dann muss getauscht werden. Ziemlich kompliziert. 16 / 24

17 Hier ein kleines Beispiel, das zeigt, wie die Zahlen: 19, 12, 17, 5 sortiert werden. Mit i wird die äußere Schleife, mit j die innere Schleife gebildet. <title>javascript-zufall-sortiert</title> function sortier() zahlarray = new Array() zahlarray[1] = 19; zahlarray[2] = 12; zahlarray[3] = 17; zahlarray[4] = 5; /* Sortierung */ for(var i= 1; i <4;i++) for(var j = i; j<=4; j++) if(zahlarray[i] > zahlarray[j]) var hilf = zahlarray[i]; zahlarray[i] = zahlarray[j]; zahlarray[j] = hilf; document.write("i: "+i + " j: "+ j + " -> "); for(var k = 1; k <= 4; k++) document.write(zahlarray[k]+ " "); document.write("<br>"); <p> <input type="button" value="okay" onclick="sortier();"> <br> </p> Aufgabe: Nimm vier andere Zahlen für die Sortierung. 17 / 24

18 Bei unserem Lottoprogramm werden die Zahlen nicht vorgegeben, sondern mit Math.random() erzeugt. Die Sortierung ist jedoch genauso wie in dem obigen Beispiel: <title>javascript-zufall-sortiert</title> function zufall() zahlarray = new Array() for(var i = 1; i <= 6; i++) var zufallszahl = Math.floor(Math.random() *49 + 1); zahlarray[i] = zufallszahl; for(var i= 1; i <6;i++) for(var j = i; j<=6; j++) if(zahlarray[i] > zahlarray[j]) var hilf = zahlarray[i]; zahlarray[i] = zahlarray[j]; zahlarray[j] = hilf; for(var i = 1; i <= 6; i++) document.write(zahlarray[i]+ "<br>"); <p> <input type="button" value="zufallszahl" onclick="zufall();"> <br> </p> Eine Aufgabe für Experten: Schreibe ein Programm, wo niemals eine Lottozahl mehrfach vorkommen kann. 18 / 24

19 JavaScript : Datum und Zeit Mit Javascript hat man mehrere Möglichkeiten, Datum und Uhrzeit zu erzeugen. Die vielleicht einfachste Möglichkeit ist: <title>javascript-datum</title> var aktdatum = new Date(); document.write("aktuelles Datum: " + aktdatum); Ausgegeben wird (auf Englisch!): Wochentagsname, Monatsname, Tag (Zahl), Jahr, Uhrzeit, GMT (GreenwichMeanTime). Also z.b: Aktuelles Datum: Tue May :16:52 GMT+0200 Man kann natürlich auch Angaben auf Deutsch erzeugen. Dazu braucht man erst einmal die Dateien: number.js und date.js, die sich auf dem Server befinden. Mit dateformat("w, d.m.y") werden dann Wochentag und deutsches Datum ausgegeben. w = day of the week, d = day, M = month, y = year: <title>javascript-datum</title> <script type="text/javascript" src="number.js"> <script type="text/javascript" src="date.js"> var aktdatum = new Date(); document.write("lokal: " + aktdatum.dateformat("w, d.m.y")); 19 / 24

20 Natürlich kann auch die Uhrzeit angegeben werde. Dabei bedeutet: h = hour, m = minute, s = second: <title>javascript-datum</title> <script type="text/javascript" src="number.js"> <script type="text/javascript" src="date.js"> var aktdatum = new Date(); document.write("uhrzeit: " + aktdatum.dateformat("h:m:s")); Aufgabe: Programmiere eine Anzeige, die das Datum, den Wochentag und die Uhrzeit (Stunden / Minuten) anzeigt. Beispiel: Datum: Wochentag: Dienstag Zeit: 15:48 20 / 24

21 JavaScript: Eingabefelder Einzeilige Eingabefelder dienen zur Aufnahme von einem oder wenigen Wörtern oder einer Zahl. Sie werden deshalb meist in Formularen verwendet. Der Aufbau ist: input: einzeiliges Eingabefeld type: Typ der Eingabe: Buchstaben /Zahl name: Vergabe eines Bezeichners size: Anzeigenlänge (in Zeichen) maxlength: maximale Länge des Feldes (in Zeichen) Vor input steht immer ein Wort, das das Eingabefeld erläutert. Beispiel: <title>einzeilige Eingabefelder definieren</title> <h1>formular für Namenseingabe</h1> <form action="input_text.htm"> <p>vorname:<br><input name="vorname" type="text" ></p> <p>zuname:<br><input name="zuname" type="text" size="30" maxlength="30"></p> 21 / 24

22 Das Formular kann sehr einfach mit einer Javascript-Funktion und einem Button ausgewertet werden: <title>einzeilige Eingabefelder </title> function auswerten() document.write("ihr Name: " + document.f.vorname.value + " " + document.f.zuname.value); <h1>formular für Namenseingabe</h1> <p>vorname:<br><input name="vorname" type="text" ></p> <p>zuname:<br><input name="zuname" type="text" size="30" maxlength="30"></p> <p> </p> <input type="button" value="auswertung" onclick="auswerten();"> <br> Die Behandlung von Kennwörtern ist eine sehr komplizierte Angelegenheit. Dabei muss viel berücksichtigt werden, damit ein Kennwort auch wirklich sicher ist. Sowohl an das Kennwort selbst als auch für seine Übertragung, Speicherung, Überprüfung etc. werden heutzutage hohe Sicherheitsansprüche gelegt. Somit ist das kleine Eingabebeispiel für ein Kennwort mehr eine Spielerei als eine wirkliche Kennworteingabe. Damit anstelle von Buchstaben oder Zahlen nur Punkte bei der Eingabe erscheinen, wird bei der Input-Programmierung der Typ: type="password" verwendet. Die Folge ist, dass das Passwort bei der Eingabe für Zuschauer unsichtbar ist. Es ist jedoch nicht verschlüsselt oder anders gesichert. 22 / 24

23 <title>passwort </title> function auswerten() document.write("passwort entschlüsselt: " + document.f.kennwort.value); <h1>formular für Passwort</h1> <p>kennwort (max 12 Zeichen):<br><input name="kennwort" type="password" size="12" maxlength="12"></p> <p> <input type="button" value="kennwort auslesen" onclick="auswerten();"> <br> </p> Kennwörter müssen überprüft werden. Normalerweise wird das Kennwort in einem komplizierten Prozess auf dem Webserver untersucht. Nur um den Überprüfungsprozess anzudeuten, wir im Folgenden ein Kennwort: z6!w im Browser überprüft. 23 / 24

24 <title>passwort </title> function auswerten() var pruef = document.f.kennwort.value; if(pruef == "z6!w") document.write("passwort okay!"); else document.write("passwort falsch!"); <h1>formular für Passwort</h1> <form name="f" > <p>kennwort eingeben:<br><input name="kennwort" type="password" size="12" maxlength="12"></p> <p> <input type="button" value="weiter" onclick="auswerten();"> <br> </p> Aufgabe: Schreibe ein Programm mit Javascript, wo ein Benutzername und ein Kennwort überprüft werden. Nur wenn beide richtig sind, soll Zugang okay! erscheinen. Ansonsten wird Zugang verweigert gemeldet. Hinweis: Logisches UND in Javascript: & 24 / 24