Javascript Einfache Ausgabeanweisung Autor: H.Sporenberg JavaScript - Einführung.

<html><head><title>Javascript</title></head><body bgcolor=#EEE685 ><script></script></body></html>

Einfache Ausgabeanweisung

Autor: H.Sporenberg

JavaScript - Einführung

<html><head><title>JavaScript</title></head><body bgcolor="yellow"><h1>alert</h1><script></script></body></html>

JavaScript - Einführungalert

Autor: H.Sporenberg

<html><head><title>JavaScript</title>

<script></script>

</head>

JavaScript - Einführungalert mit Funktionsaufruf

Autor: H.Sporenberg

<body bgcolor="yellow"><h1>Alert-Ausgabe</h1>

<A href="javascript:HalloWelt()">Hallo</A>

</body></html>

JavaScript - EinführungTextfelder mit CSS verändern

Autor: H.Sporenberg

Stylesheet-Rahmen (Borders) ermöglichen die Verzierung von Tabellen, Inputfeldern und Schaltflächen mit Einzellinien. Auf diese Weise lassen sich auch Eingabefelder farblich verändern.

Rot eingerahmt

<input type="TEXT" name="name2" size="30" style="BORDER-RIGHT: red thin solid;BORDER-LEFT: red thin solid;BORDER-TOP: red thin solid;BORDER-BOTTOM: red thin solid">

JavaScript - EinführungTextfelder mit CSS verändern

Autor: H.Sporenberg

Farbig eingerahmt

<input type="TEXT" name="name" size="30" style="BORDER-RIGHT: blue thin solid;BORDER-LEFT: green thin solid;BORDER-TOP: red thin solid;BORDER-BOTTOM: purple thin solid">

Links und rechts offen

<body bgcolor=#EEE685 ><form name="TextFeld"><input type="TEXT" name="name" size="30" style="BORDER-RIGHT: #EEE685 thin solid;BORDER-LEFT: #EEE685 thin solid;BORDER-TOP: blue thin solid;BORDER-BOTTOM: blue thin solid;"></form></body>

JavaScript - EinführungAddition zweier Zahlen

Autor: H.Sporenberg

Bitte geben Sie zwei Zahlen ein:<form name="Formular"> <input type="integer" name="Zahl1" value=""><br> <input type="integer" name="Zahl2" value=""><br> <input type="button" name="Knopf" value="Berechnung" onClick="addition(Formular.Zahl1.value,Formual.Zahl2.value)"><br> Das Ergebnis lautet: <input type="text" name="Ausgabe" value=""></form>

function addition(zahl1,zahl2) { var summe; summe = parseFloat(zahl1)+parseFloat(zahl2); document.Formular.Ausgabe.value = summe;}

JavaScript - EinführungDer Taschenrechner - Tastenfeld

Autor: H.Sporenberg

<form name="Rechner">

<table border="0" cellpadding="0" cellspacing="3"><tr><td><input type="button" width="60" class="button" value=" 7 " ></td><td><input type="button" width="60" class="button" value=" 8 " ></td><td><input type="button" width="60" class="button" value=" 9 " ></td><td><input type="button" width="60" class="button" value=" + " ></td></tr><tr>2. Zeile ……….usw. </tr></table>

</form>

JavaScript - EinführungDer Taschenrechner – Das Display

Autor: H.Sporenberg

<form name="Rechner"> <table border="5" cellpadding="10" cellspacing="0">

<tr><td bgcolor="#CDCDCD"><input type="text" name="Display" align="right" class="display"></td></tr><tr><td bgcolor="#E0E0E0">

<table border="0" cellpadding="0" cellspacing="3">Hier werden die Tasten vereinbart</table>

</td></tr> </table></form>

JavaScript - EinführungDer Taschenrechner

Autor: H.Sporenberg

function Hinzufuegen(Zeichen) { window.document.Rechner.Display.value = window.document.Rechner.Display.value + Zeichen; }

Die Funktion Hinzufuegen

<td><input type="button" width="60" class="button" value=" 7 " onClick="Hinzufuegen('7')"></td>

In der Tabelle muss der Aufruf der Funktion Hinzufuegen ('7') jeweils mit dem richtigen Symbol ergänzt werden


Autor: H.Sporenberg

function Ergebnis() { var x = 0; x = eval(window.document.Rechner.Display.value); window.document.Rechner.Display.value = x; }

Die Funktion Ergebnis

<td><input type="button" width="60" class="button" value=" = " onClick=“Ergebnis()"></td>

In der Tabelle muss der Aufruf der Funktion Ergebnis() beim Button mit dem Wert = hinzugefügt werden

Der Befehl eval ist in JavaScript implementiert und wertet einen mathematisch korrekten Ausdruck aus.


Autor: H.Sporenberg

function Ergebnis() { var x = 0; if (Check(window.document.Rechner.Display.value)) x = eval(window.document.Rechner.Display.value); window.document.Rechner.Display.value = x; }


Bevor der Ausdruck ausgewertet wird, muss dieser auf seine mathematische Richtigkeit überprüft werden. Dies geschieht mit der Funktion Check. Diese Funktion ist viel komplizierter als die Auswertung des Ausdrucks und soll hier ohne Kommentar angegeben werden.


Autor: H.Sporenberg

function Ergebnis() { var x = 0; if (Check(window.document.Rechner.Display.value)) x = eval(window.document.Rechner.Display.value); window.document.Rechner.Display.value = x; }


Die Funktion Check überprüft, ob der eingegebene Ausdruck der mathemati-schen Syntax genügt.

function Check(Eingabe) { var nur_das ="0123456789[]()-+*%/"; for (var i = 0; i < Eingabe.length; i++) if (nur_das.indexOf(Eingabe.charAt(i))<0 ) return false; return true; }


Autor: H.Sporenberg

Es soll eine Taste eingefügt werden, die die Eingabe löscht. Die Taste soll über die gesamte Breite des Taschenrechners gehen.

…….<tr><td colspan=4><input type="button" width="60" class="button1" value="Clear" onClick="Loeschen()"></td></tr>……

function Loeschen(){ window.document.Rechner.Display.value="";}

.button1 { width:280px; text-align:center; font-family:Verdana,Arial; font-size:170%; }


Autor: H.Sporenberg

Es soll eine Taste eingefügt werden, die die Eingabe löscht. Die Taste soll über die gesamte Breite des Taschenrechners gehen.

…….<td><input type="reset" width=“280" class="button1" value=" Clear "></td>……

Es geht auch ohne JavaScript-Funktion. Dazu benutzt man den Reset-Button

.button1 { width:280px; text-align:center; font-family:Verdana,Arial; font-size:170%; }

JavaScript - EinführungFelder – Arrays Teil 1

Autor: H.Sporenberg

var namen=new Array(4);namen[0]="Sporenberg";namen[1]="Teepe";namen[2]="Gutjahr";namen[3]="Lindemann";var i=0;

<form name="Formular"> <input type="text" name="Ausgabe" value=""> <input type="button" name="Forward" value="Vorwärts" onClick="Weiter()"> </form>

function Weiter(){document.Formular.Ausgabe.value=namen[i]; i=i+1;}


Autor: H.Sporenberg

var namen=new Array(4);namen[0]="Sporenberg";namen[1]="Teepe";namen[2]="Gutjahr";namen[3]="Lindemann";var i=0;

<form name="Formular"> <input type="text" name="Ausgabe" value=""> <input type="button" name="Forward" value="Vorwärts" onClick="Weiter()"> <input type="button" name="Forward" value=“Zurueck" onClick=“Back()"></form>

function Back(){document.Formular.Ausgabe.value=namen[i]; i=i-1;}


Autor: H.Sporenberg

var namen=new Array(4);namen[0]="Sporenberg";namen[1]="Teepe";namen[2]="Gutjahr";namen[3]="Lindemann";var i=-1;

<form name="Formular"> <input type="text" name="Ausgabe" value=""> <input type="button" name="Forward" value="Vorwärts" onClick="Weiter()"> <input type="button" name=“Back" value=“Zurück" onClick=“Back()"></form>

function Weiter(){ i=i+1; if (i>=namen.length-1) { i =namen.length-1; }; document.Formular.Ausgabe.value=namen[i]; }


Autor: H.Sporenberg


<form name="Formular"> <input type="text" name="Ausgabe" value=""> <input type="button" name="Forward" value="Vorwärts" onClick="Weiter()"> <input type="button" name=“Back" value=“Zurück" onClick=“Zurueck()"></form>

function Zurueck(){ i=i-1; if (i <=0) { i =0; }; document.Formular.Ausgabe.value=namen[i]; }


Autor: H.Sporenberg


<form name="Formular"> <input type="text" name="Ausgabe" value=""> <input type="button" name="Forward" value="Vorwärts" onClick="Weiter()"> <input type="button" name=“Back" value=“Zurück" onClick=“Zurueck()"> <input type="button" name=“Clear" value=“Löschen" onClick=“Loeschen()"></form>

function Loeschen(){ i = -1; document.Formular.Ausgabe.value="";}

JavaScript - EinführungFelder – Arrays Teil 2 Dia-Show

Autor: H.Sporenberg

var fotos=new Array(4);fotos[0]="Auto1.jpg";fotos[1]="Auto2.jpg";fotos[2]="Auto3.jpg";fotos[3]="Auto4.jpg";i=-1;

<form name="Formular"> <img src="auto1.jpg" name="bild" > <input type="button" name="Back" value=“Zurück" onClick=“Zurueck()"> <input type="button" name="Forward" value=“Vorwärts" onClick=“Weiter()"> <input type="button" name="Clear" value=“Löschen" onClick=“Loeschen()"> </form>

function Weiter(){ i=i+1; if (i>=fotos.length-1) { i =fotos.length-1; }; document.Formular.bild.src=fotos[i]; }


Autor: H.Sporenberg



function Zurueck(){ i=i-1; if (i <=0) { i =0; }; document.Formular.bild.src=fotos[i]; }


Autor: H.Sporenberg



function Loeschen(){ i=-1; document.Formular.bild.src="Auto1.jpg";}


Autor: H.Sporenberg

JavaScript - EinführungFelder – Arrays Teil 3 Textarea

Autor: H.Sporenberg

Projekte könnten sein:1.Die sieben WeltwunderZu den Bildern der sieben Weltwunder wird in der Textarea die entsprechende Information angezeigt.2.Einige herausragende Sportwagen mit den entsprechenden Daten, wie Höchstgeschwindigkeit, Preis, Beschleunigung etc.3.Die Planeten des Sonnensystems mit den entsprechenden Daten, wie Entfernung zur Sonne, Umlaufdauer etc.

Es sollen jetzt beide Felder, Text und Bilder, zusammengefügt werden. Dabei sollen Text und Bild gleichzeitig vor- und rückwärts geblättert werden. Der Text soll nicht über den Input-Text sondern über eine Textarea ausgegeben werden.


Autor: H.Sporenberg

var info=new Array(4);

info[0]=„Porsche"; info[1]=„Veyron"; info[2]=„Porsche Carrera"; info[3]=„Ferrari";

i=-1;

var fotos=new Array(4);fotos[0]="Auto1.jpg";fotos[1]="Auto2.jpg";fotos[2]="Auto3.jpg";fotos[3]="Auto4.jpg";

function zurueck() { i=i-1; if (i <=0) { i =0; }; document.Formular.Meinung.value=info[i]; document.Formular.bild.src=fotos[i]; }

function nullsetzen() { i=-1;document.Formular.Meinung.value=info[0]; document.Formular.bild.src=fotos[0];}

function weiter() { i=i+1; if (i>=info.length-1) { i =info.length-1; }; document.Formular.Meinung.value=info[i]; document.Formular.bild.src=fotos[i]; }


Autor: H.Sporenberg Die Funktionen für das Einfügen von Namen werden genauso übernommen.

<body><form name="Formular"><table><tr><td width=640 height=480><img src="auto1.jpg" name="bild" ></td><td><Textarea class="text" name="Meinung" wrap=virtual>Sporenberg Heinz</Textarea></td></tr></table>

<center><table width=30%><tr><td> <input type="button" name="Back" value="Back" onClick="zurueck()"></td><td><input type="button" name="Forward" value="Forward" onClick="weiter()"></td><td> <input type="button" name="Clear" value="Clear" onClick="nullsetzen()"></td></tr></table></center></form></body>

Autor: H.Sporenberg

<style type="text/css"></style>

JavaScript - EinführungProjekt – Sportwagen-Autoquartett

Autor: H.Sporenberg

Jetzt sollen die beiden Möglichkeiten, Texte und Bilder weiterzu-blättern kombiniert wer-den. Als Beispiel sollen hier Bilder von Sportwa-gen (nicht umweltver-träglich – problema-tisch) weitergeblättert werden, gleichzeitig erscheinen in Textfel-dern Daten über das gerade dargestellt Auto wie Höchstgeschwin-digkeit, Verbrauch. Leistung etc. (ähnlich dem Autoquartett).


Autor: H.Sporenberg

Die Struktur der Seite wird vorgegeben:In einer Tabelle werden zwei Datenfelder erzeugt. Im linken Datenfeld soll das Bild erscheinen, im rechten Datenfeld wird eine Tabelle eingefügt, die sowohl die Informationen bzgl. des angezeigten Autos anzeigt als auch die Buttons enthält, die das Vor- und Rückwärtsblättern durchführen.

Bild Informationen

<Tab><tr><td> bild </td><td> Hier wird die Tabelle für das rechte Datenelement eingefügt </td></tr></Tab>


Autor: H.Sporenberg

<table cellspacing=10 width=90%><tr><td colspan=3><input type="text" class="schrift33" name="Ausgabe" size=35value="Porsche"></td></tr><tr bgcolor=#F0E68C div class="schrift32"><td colspan=2><b>Geschwindigkeit:</b></td><td><input type="text" class="schrift32" name="Geschwindigkeit" size=20 value="280 km/h"></td></div></tr>

<tr><td bgcolor=#FFD39B><center><input type="button" class="schrift31" name="Back" value="Back" onClick="zurueck()"></center></td><td bgcolor=#CDC673><center><input type="button" class="schrift31" name="Forward" value="Forward" onClick="weiter()"></center></td><td bgcolor=#8B864E><center><input type="button" class="schrift31" name="Clear" value="Clear" onClick="nullsetzen()"><br></center></td></tr></table>

JavaScript - EinführungUhrzeit anzeigen

Autor: H.Sporenberg

function uhr() { var Heute=new Date(); var Stunde = Heute.getHours(); document.Formular.stunden.value = Stunde; setTimeout("uhr()",100);}

<body onLoad="uhr()"><form name="Formular"> <input type="text" name="stunden" size=8 value=""></form>

JavaScript - EinführungUhrzeit anzeigen

Autor: H.Sporenberg

function uhr() { var Heute=new Date(); var Stunde = Heute.getHours(); var Minuten = Heute.getMinutes(); var Sekunden = Heute.getSeconds(); document.Formular.stunden.value = Stunde; document.Formular.minuten.value = Minuten; document.Formular.sekunden.value = Sekunden; setTimeout("uhr()",100);}

<body onLoad="uhr()"><form name="Formular"> <input type="text" name="stunden" size=8 value=""> <input type="text" name="minuten" size=8 value=""> <input type="text" name="sekunden" size=8 value=""></form></body>

JavaScript - EinführungTag, Monat und Jahr anzeigen

Autor: H.Sporenberg

……var Tag = Heute.getDate();var Monat= Heute.getMonth();var Jahr=Heute.getYear();

…… document.Formular.tage.value = Tag; document.Formular.monate.value = Monat; document.Formular.jahre.value = Jahr; setTimeout("uhr()",100);}

<body onLoad="uhr()"><form name="Formular"> <input type="text" name=„tage" size=8 value=""> <input type="text" name=„monate" size=8 value=""> <input type="text" name=„jahre" size=8 value=""></form></body>

JavaScript - EinführungMonatsnamen anzeigen

Autor: H.Sporenberg

var Tag = Heute.getDate();var Monat= Heute.getMonth();var Jahr=Heute.getYear();

if (Monat==0) Monat1="Januar"; if (Monat==1) Monat1="Februar";usw.

document.Formular.monat.value = Monat1;

<body onLoad="uhr()"><form name="Formular"> Heutiger Monat <input type="text" name="monat" size=18 value=""><br></form></body>

JavaScript - EinführungStoppuhr

Autor: H.Sporenberg

var Startzeit, id;

function anfang() {var zeit = new Date(); Startzeit = zeit; messen();}

<form name=„Clock" > Zeit bisher in Sekunden:<br> <input type="text" name=„Digits" size=8 value=""> <input type="button" value="Start" onClick="anfang()"> <input type="button" value="Stopp" onClick="stopp()"> </form>

JavaScript - EinführungStoppuhr

Autor: H.Sporenberg

var Startzeit, id;

function anfang() {var zeit = new Date(); Startzeit = zeit; messen();}

function messen() { var AktuelleZeit=new Date(); var Zeitdifferenz=AktuelleZeit-Startzeit; var Anzeigezeit=Zeitdifferenz/1000; document.Clock.Digits.value=Anzeigezeit;id=setTimeout("messen()",10); }

function stopp() { clearTimeout(id); }

<form name=„Clock" > Zeit bisher in Sekunden:<br> <input type="text" name=„Digits" size=8 value=""> <input type="button" value="Start" onClick="anfang()"> <input type="button" value="Stopp" onClick="stopp()"> </form>

JavaScript - EinführungStoppuhr – mit Tabelle

Autor: H.Sporenberg

JavaScript - EinführungStoppuhr – mit Tabelle

Autor: H.Sporenberg

<center><h1>Stoppuhr</h1> </center><form name="clock" > <center> <Table border=7 cellspacing=10 width=70%><tr bgcolor=#dedede><td div class="schrift31" >Zeit bisher in Sekunden:</div> </td><td > <input div class="schrift1" type="text" name="digits" size=12> </div> </td><td> <center><input div class="schrift3" type="button" value="Start" onClick="anfang()"></div></center> </td><td> <center><input div class="schrift3" type="button" value="Stopp" onClick="ende()"> </div></center> </td><td> <center><input div class="schrift3" type="button" value="Lösche" onClick="loesche()"> </div></center> </td></tr> </table> </center></form>

JavaScript - EinführungBildertausch

Autor: H.Sporenberg

Eine der Hauptanwendungen von JavaScript wird lapidar mit Mouseovers bezeichnet. Fährt die Maus über eine Grafik, so ändert diese ihre Gestalt; befindet sich die Maus dann nicht mehr über der Grafik, nimmt diese wieder ihre ursprüngliche Gestalt an.

Diese Methode kann z.B. benutzt werden, um Bilder zu tauschen.

Fährt man mit der Maus über das kleine Bild, so erscheint das große Bild.

JavaScript - EinführungBildertausch

Autor: H.Sporenberg

<script></script>

<body> <img src="GSG_2006_1.jpg" NAME=„bild" onMouseover="over()" onMouseout="out()">

</body></html>

JavaScript - EinführungPopUp-Fenster

Autor: H.Sporenberg

Viele Seiten versuchen mit zusätzlichen Fenstern beim Laden und Verlassen einer Seite den Besucher einzufangen, um auf Werbung oder den eigenen Newsletter aufmerksam zu machen.

Es gibt Webseiten, die einen zur Begrüßung erst einmal mit einem Popup-Gewitter empfangen. Etliche neue Fenster öffnen sich ungefragt und werben für eBay & Co und bei jedem Seitenwechsel geht der Trubel von vorne los.


Autor: H.Sporenberg

Autor: H.Sporenberg

<html><head><title>PopUp-Fenster</title><script language="JavaScript"></script></head><body bgcolor=#cdcdcd onload="PopUpFenster()"></body></html>


Autor: H.Sporenberg

Folgende Eigenschaften stehen zur Verfügung. Diese stehen in einer Zeile und sind durch Kommata getrennt.

window.open(filename,windowname, Attribute)

toolbar = yes/no Symbolleiste anzeigen

location = yes/no Adresszeile anzeigen

directories = yes/no Linkleiste anzeigen

status = yes/no Statusbar anzeigen

nenubar = yes/no Menüzeile anzeigen

scrollbar = yes/no Scrollbalken anzeigen

resizable = yes/no Fenstergröße verändern

width=420, height=320 Breite und Höhr des Fensters

top=150, left=100 Koordinaten des Fensters(oben,links)

JavaScript - EinführungCookies

Autor: H.Sporenberg

Was sind Cookies?Cookies (amerikan. Keks) sind kleine Informationseinheiten, die Webseiten per JavaScript auf dem Rechner des Anwenders (Client) ablegen und später wieder auslesen können. Der Browser entnimmt die Informationen und speichert sie, mit einer ID sowie dem Ablaufdatum versehen, in einer externen Datei. Ist ein Cookie gespeichert, kann die Webseite wiederum auf das Gespeicherte zugreifen.

SicherheitsbefürchtungenUm in den User-Bereich einer Seite zu gelangen, ist eine Registrierung nötig. Dabei gibt der User unter anderem seine Interessen und Hobbys an, die dann als Cookie beim User gespeichert werden. Surft der Besucher das nächste Mal auf der Webseite, wird der Cookie ausgelesen und der Besucher erhält auf ihn zugeschnittene Werbung.


Autor: H.Sporenberg

SicherheitsbefürchtungenHeutzutage verwendet fast jede größere Seite Cookies, um die Besucher zu kontrollieren oder mit besserem Inhalt versorgen zu können.Aber: Das Cookie kann nur von dem Server gelesen werden, von dem es auch erzeugt wurde. Ein Cookie kann nicht automatisch an Daten, wie z.B. eine eMail-Adresse kommen, ohne dass der User sie selbst angegeben hat.Ein Sicherheitsrisiko im Sinne von Löschvorgängen oder dem Einschleusen von Viren besteht allerdings nicht.Cookie-Anzahl / GrößeEin Cookie darf bis zu 4 kB groß sein. Hierbei wird der Cookie-Name mitgerechnet. Ist ein Cookie größer, so wird der Cookie-Wert abgeschnitten, der Name bleibt erhalten.Pro Domäne können maximal 20 Cookies gespeichert werden.


Autor: H.Sporenberg

Je nach Anlass wird ein Cookie irgendwo auf einer HTML-Seite aktiviert werden, entweder aus einem Formular heraus oder automatisch beim Anzeigen der Seite. Zum Schreiben und Lesen dient stets das Schlüsselwort cookie. Der IExplorer schreibt eine Textdatei, deren Namen aus der URL des Senders gebildet wird. Er registriert nicht den Namen der aufrufenden Seite sondern den des Ordners, in dem sie sich befinden. Es ist empfehlenswert, die Routine zum Schreiben eines Cookies als JavaScript-Funktion im Head zu definieren.

JavaScript - EinführungCookies schreiben

Autor: H.Sporenberg

Der Code enthält hier im Beispiel einen Werteintrag und denjenigen der Ablaufzeit. Anzugeben ist mit "Dauer" die Gültigkeitsdauer in Tagen:

Als Beispiel soll ein Cookie angegeben werden, das die Anzahl der Besuche auf einer Seite speichert und dann ausgibt.

So sieht‘s aus.

BEISPIEL


Autor: H.Sporenberg

function WertHolen() { var Wert = ""; if(document.cookie) { var Wertstart = document.cookie.indexOf("=") + 1; var Wertende = document.cookie.indexOf(";"); if (Wertende == -1) {Wertende = document.cookie.length;} Wert = document.cookie.substring(Wertstart,Wertende); } return Wert;}

function WertSetzen(Bezeichner, Wert, Verfall) { var jetzt = new Date(); var Auszeit = new Date(jetzt.getTime() + Verfall); document.cookie = Bezeichner+"="+Wert+"; expires="+Auszeit.toGMTString()+";";}


Autor: H.Sporenberg

function Zaehlerstand() { var Verfallszeit = 1000*60*60*24*365; var Anzahl = WertHolen(); var Zaehler = 0; if(Anzahl != "") {Zaehler = parseInt(Anzahl);} if(document.cookie) { Zaehler = Zaehler + 1; WertSetzen("Zaehler",Zaehler,Verfallszeit); } else { Zaehler = 1; WertSetzen("Zaehler",Zaehler,Verfallszeit); } return(Zaehler);}

Autor: H.Sporenberg

<script type="text/javascript"></script><p>Benutzen Sie doch mal die Reload-Funktion Ihres Browsers ...</p>

JavaScript - EinführungCookies - Aufgaben

Autor: H.Sporenberg

1.Aufgabe:Erstellen Sie eine Seite mit zwei Links. Wenn man auf den ersten klickt, soll ein Cookie mit dem Inhalt "Nachtisch=Kekse" gesetzt werden. Ein Klick auf den zweiten Link soll den Cookie-Inhalt in einem alert-Dialog ausgeben. Der Cookie muss nicht für längere Zeit gespeichert werden.

2.Aufgabe:Wenn Sie zwei Cookies mit demselben Namen anlegen, überschreibt der zweite den ersten. Löschen Sie den Cookie von Aufgabe 1, indem Sie ihn nochmal setzen, diesmal aber mit einem vergangenen expires-Attribut.


Autor: H.Sporenberg

3.Aufgabe:Schreiben Sie eine Funktion, die überprüft, ob der Besucher Ihrer Seite Cookies aktiviert hat.

4.Aufgabe:Einige Browser erlauben die (recht unbequeme) Option, dass jeder Versuch, einen Cookie zu setzen, eigens bestätigt werden muss. Ändern Sie die Cookietest-Funktion von Übung 3, so dass sie einen von drei Werten zurückliefert: 0 wenn Cookies deaktiviert sind, 1 wenn sie aktiviert sind und nicht bestätigt werden müssen, 2 wenn jedesmal eine Bestätigung nötig ist.


Autor: H.Sporenberg

5.Aufgabe:Wie Sie wissen, liefert document.cookie oft nicht nur einen Cookie, sondern eine Liste aller Cookies, die für die Seite zugänglich sind. Schreiben Sie eine allgemein verwendbare Funktion liesCookie(), die diese Liste nach einem bestimmten Cookie durchsucht. Der Name des Cookies wird als Argument übergeben, die Funktion liefert dann den dazugehörigen Wert zurück.

6.Aufgabe:Auf einer Internetseite sollen die Besucher persönlich begrüßt werden. Dazu werden sie, wenn Cookies aktiviert sind, beim ersten Besuch nach ihrem Namen gefragt. Dieser wird in einem Cookie gespeichert und bei jedem Betreten der Seite ausgelesen und angezeigt. Erstellen Sie diese Seite. Verwenden Sie dabei die Funktionen cookieAktiviert(), liesCookie() und schreibCookie() aus den Übungen 3, 6 und 7.

JavaScript - EinführungCookies – Aufgaben - Lösung

Autor: H.Sporenberg

1.Aufgabe:<html><head><title></title></head>

<body><a href="#“ onClick="document.cookie='Nachtisch=Kekse'"> setzen</a><br><a href="#" onClick="alert(document.cookie)">lesen</a></body></html>


Autor: H.Sporenberg

Die String-Methode indexOf()

Die String-Methode indexOf() durchsucht eine Zeichenkette (String) nach dem ersten Vorkommen des Suchwertes, begin-nend von der angegebenen Position bis zum Ende der Zeichen-kette. Dabei vergleicht sie case sensitive die Zeichenkette ent-sprechend des ihr übergebenen Suchwertes. Ist der gesuchte Wert in der Zeichenkette vorhanden, so wird die Position des Vorkommens zurückgegeben. Wird das Zeichen oder die Zei-chenkette nicht gefunden, so lautet der Rückgabewert -1.

function durchsuchen(zeichenkette,teilstring,stelle){var wo; wo = zeichenkette.indexOf(teilstring,stelle); document.Formular.Ausgabe.value=wo;}


Autor: H.Sporenberg

<form name="Formular">Zeichenkette eingeben<input type="text" name="String1" value=""><br>Suchzeichenkette<input type="text" name="SuchString1" value=""><br>Ab wo soll gesucht werden<input type="integer" name="Position" value=""><br> <input type="button" name="Knopf" value="Zeichenkette" onClick="durchsuchen(Formular.String1.value,Formular.SuchString1.value,Formular.Position.value)"><br><br> Das Ergebnis lautet:<input type="text" name="Ausgabe" value=""></form>


Achtung: JavaScript beginnt bei der Zählung immer bei 0


Autor: H.Sporenberg


Mit der eben angegebenen Funktion wird jetzt bei der Stellenangabe als erste Stelle die Zahl 0 ausgegeben. Weiterhin wird -1 ausgegeben, wenn das Zeichen bzw. der Suchstring nicht vorhanden sind.

Die Funktion soll nun so abgeändert werden, dass die Stelle mit der Zählung bei 1 beginnt. Weiterhin soll ein Text ausgegeben werden, wenn das Zeichen bzw. der Suchstring nicht vorhanden waren.


Autor: H.Sporenberg


function durchsuchen(zeichenkette,teilstring,stelle){var wo; wo = zeichenkette.indexOf(teilstring,stelle); if (wo == -1) {document.Formular.Ausgabe.value=„Das Zeichen ist nicht vorhanden“;} else {document.Formular.Ausgabe.value=wo+1;}}


Autor: H.Sporenberg

Kennwort

Ein wirklich sicherer Passwortschutz ist mit JavaScript nicht möglich. Dennoch sind verschiedene Verfahren im Einsatz.

Fall 1:Das Passwort liegt unverschlüsselt im Programm. Die Abfrage if (passwort=„geheim“) {…….}ist auf jeden Fall nicht anzuraten. Denn damit kann das Passwort durch einen Blick in den Sourcecode ausgelesen werden. Weiter wird das Passwort unverschlüsselt auf dem Server übertragen. In diesem Fall gibt es keine Sicherheit.


Autor: H.Sporenberg

Kennwort

Fall 2:Das Passwort liegt nicht im Programm vor. Die Abfrage if(passwort!="" && passwort!=null)benutzt kein gespeichertes Passwort im HTML-Code. Eine Schwäche ist, dass das Passwort über eine unsichere Verbindung unverschlüsselt übertragen wird. Es ist von jedem Benutzer zu lesen, der Zugriff auf das Filesystem des Servers hat. In diesem Fall ist die Sicherheit gering. Diese basiert lediglich auf der Tatsache, dass das Raten des Passwortes zwar möglich, aber das Ausprobieren über die Netzverbindung praktisch nicht möglich ist, wenn der Dateiname entsprechend lang ist.

Autor: H.Sporenberg

Kennwort<html><head><title>Passwortabfrage</title>

<script language="JavaScript" type="text/javascript"></script></head> <body>

onLoad="Kennwort()"></body></html>


Autor: H.Sporenberg

Kennwort

window.location=passwort + ".html";

Die Datei, die aufgerufen wird, muss auf dem Server in der FormPasswort.html vorliegen

JavaScript - EinführungGraphik mit Hilfe von JavaScript

Autor: H.Sporenberg

JavaScript ist eine Pro-grammiersprache, die eigentlich keine Grafik-Fähigkeit mitbringt. Diese JavaScript-Vektorgrafik-bibliothek implementiert Funktionen für Grafik-Grundelemente wie Linien, Kreise, Ellipsen (Ovale), Polygone (auch Dreiecke, Rechtecke) und Polylinien (geknickte Linien), und kann solche Elemente dy-namisch in eine Webseite zeichnen. http://www.walterzorn.de


Autor: H.Sporenberg

<script type="text/javascript" src="wz_jsgraphics.js"></script></head>

http://www.walterzorn.de

Dieser Teil gehört in den Head.

<script>var jg = new jsGraphics();

function Zeichnen(){jg.setStroke(4);jg.setColor("#00ff00");jg.fillEllipse(20,100,100,180);jg.paint();

}Zeichnen();

</script>

Dieser Teil gehört in den Body.


Autor: H.Sporenberg

http://www.walterzorn.deSo können die Graphik-Elemente aussehen


Autor: H.Sporenberg


<script>var jg = new jsGraphics();

function zeichnen() { jg.setStroke(6); jg.setColor("#ff00ff"); jg.drawLine(10,300, 1000,300); jg.drawLine(500,0, 500,600); jg.setColor("#343434"); jg.setFont("verdana","18px",Font.BOLD); jg.drawString("x-Achse", 900,320); jg.paint();

var x1,y1,x2,y2; x1=0; y1=1/500*parseInt(x1)*parseInt(x1); jg.setStroke(4);

while (x1<400){ x2=parseInt(x1)+1; y2=1/500*parseInt(x2)*parseInt(x2); jg.setColor("#ff0000"); jg.drawLine(x1+500,-y1+300,x2+500,-y2+300); jg.paint(); x1=parseInt(x1)+1; y1=1/500*parseInt(x1)*parseInt(x1); }}zeichnen();</script>


Autor: H.Sporenberg


JavaScript - EinführungPrimzahlüberprüfung

Autor: H.Sporenberg

<html><head><title>Test</title><script type="text/javascript">function PrimzahlCheck (Zahl) { var Grenzzahl = Zahl / 2; var Check = 1; for (var i = 2; i <= Grenzzahl; i++) if (Zahl % i == 0) { alert(Zahl + " ist keine Primzahl, weil teilbar durch " + i); Check = 0; } if (Check == 1) alert(Zahl + " ist eine Primzahl!");}</script></head>

JavaScript - EinführungPrimzahlüberprüfung

Autor: H.Sporenberg

<body><form name="PrimzahlFormular" action=""><p>Geben Sie eine Zahl ein. Es wird geprüft, ob es sich um eine Primzahl handelt.</p><input type="text" name="Eingabezahl"><input type="button" value="auf Primzahl checken"onclick="PrimzahlCheck(document.PrimzahlFormular.Eingabezahl.value)"></form></body></html>

JavaScript - EinführungDas <canvas>-Element – neu in HTML5

CA

NV

AS

Autor: H.Sporenberg

Mit <canvas> wurde ein HTML-Element eingeführt, mit dem dynamisch Bitmap-Grafiken gerendert und in Dokumente integriert werden können. Zum Erstellen/Zeichnen kann eine Scriptsprache zum Einsatz kommen. Wir verwenden aus naheliegenden Gründen JavaScript.

Wie bindet man das <canvas>-Element ein?

Sowohl ein öffnender als auch ein schließender Tag werden für <canvas> gebraucht. Breite und Höhe sollten als Attribute angegeben werden – wenn man die Maße per CSS festlegt, wird der <canvas>-Inhalt ausgehend von der Ausgangsgröße entsprechend verzerrt.

JavaScript - EinführungDas <canvas>-Element – das Koordinatenkreuz

Autor: H.Sporenberg

Die Größe der canvas sollte immer angegeben werden. Die voreingestellte Grundgröße ist: height=150 (pixel) und width=300 .Der Nullpunkt des Koordinatensystem ist die linke obere Ecke (0/0). Nach rechts erhält man wachsende positive x-Werte, nach unten wachsende positive y-Werte.

JavaScript - EinführungDas <canvas>-Element – das Grundgerüst

Autor: H.Sporenberg

<html><head><title>Canvas </title>

<script type="application/javascript„>function draw() { var canvas = document.getElementById(`testcanvas`); var context = canvas.getContext('2d'); if(canvas.getContext){

context.fillStyle = "rgb(0, 0,255)";context.fillRect(10, 10, 200, 200);} } </script> </head>

<body onload="draw()"> <canvas id=„testcanvas" width="300" height="300"></canvas> </body></html>


Autor: H.Sporenberg

Erläuterung:

var canvas = document.getElementById(`testcanvas`);holt das <canvas>-Element anhand seiner ID

var context = canvas.getContext('2d');holt den 2D-Context in die handliche context-Variable. Das wird benötigt, weil letztlich nicht auf dem <canvas>-Element selbst, sondern auf einem Context des Elements gezeichnet wird.context.fillStyle = "rgb(0, 0, 255)“;setzt die Füllfarbe für alles, was danach im Context gezeichnet wird, auf Blau

context.fillRect(10,10,200,200);zeichnet ein gefülltes Rechteck, beginnend bei den Koordinaten 0,0 und endend mit 200,200


Autor: H.Sporenberg

<html><head><title>Canvas </title>

<script type="application/javascript„>function draw() { var canvas = document.getElementById(`testcanvas`); var context = canvas.getContext('2d'); if(canvas.getContext){

context.fillStyle = "rgb(0, 0,255)";context.fillRect(10, 10, 200, 200); }

} </script> </head>

<body onload="draw()"> <canvas id=„testcanvas" width="300" height="300"></canvas> </body></html>

Und so sieht es aus


Autor: H.Sporenberg

Der Internet Explorer 8 kann das <canvas>-Element ohne zusätzliche JavaScript-Funktionen nicht darstellen. Um Fehlermeldungen zu vermeiden und dem User mitzuteilen, dass der Browser dies Funktionen nicht ausführen kann, baut man im Body-Tag entsprechende Meldungen ein. Dieses kann wie folgt aussehen:

<body onLoad=“draw()“><canvas id=„testcanvas" width="800" height="200"><p>Dieses Beispiel benötigt einen Webbrowser mit aktivierter Canvas-Unterstützung.</p></canvas>

<noscript><p>Dieses Beispiel benötigt einen Webbrowser mit aktivierter JavaScript-Unterstützung.</p></noscript></body>

JavaScript - EinführungDas <canvas>-Element – Linien zeichnen

Autor: H.Sporenberg

Das Erstellen von Linien geschieht mit der Methode lineTo, die als Parameter den Endpunkt der zu zeichnenden Gerade enthält.

Parameter: lineTo( x-Koordinate, y-Koordinate )

Um den Startpunkt der Geraden zu verlegen, nutzt man die Funktion moveTo, die ebenfalls einen x- und y-Wert als Parameter erwartet. Durch moveTo kann man sich frei im (virtuellen) “Raum” bewegen.

Parameter: moveTo( x-Koordinate, y-Koordinate )

Um zusammengesetzte Linien zu zeichnen, verwendet man die Path-Funktion, die mit beginPath eingeleitet wird. Die danach folgenden Anweisungen wie lineTo geben die Eckpunkte des Pfades an.


Autor: H.Sporenberg

Mit den anschließend notierten Methoden fill oder stroke entscheidet man, ob die neu geschaffene Form ausgefüllt oder nur umrandet dargestellt werden soll. Es existiert auch eine closePath-Method zum Festlegen des Pfadendes, die bei Verwendung von fill getrost weggelassen werden kann. Hierbei werden der erste und der letzte Punkt automatisch miteinander verbunden und es ergibt sich somit eine selbstdefinierte “Form”.

function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");

ctx.beginPath(); ctx.lineWidth=10; ctx.moveTo(25,25); ctx.lineTo(305,25); ctx.lineTo(25,305); ctx.lineTo(25,25); ctx.strokeStyle="#000099"; ctx.stroke(); ctx.closePath();}


Autor: H.Sporenberg


ctx.beginPath(); ctx.lineWidth=10; ctx.moveTo(25,25); ctx.lineTo(305,25); ctx.lineTo(25,305); ctx.lineTo(25,25); ctx.strokeStyle="#000099"; ctx.stroke(); ctx.closePath();}

Und so sieht es aus

<body onload="draw()"> <canvas id=„canvas" width="300" height="300"> </canvas> </body>


Autor: H.Sporenberg


ctx.beginPath(); ctx.lineWidth=10; ctx.moveTo(25,25); ctx.lineTo(305,25); ctx.lineTo(25,305); ctx.lineTo(25,25); ctx.fillStyle="#33ee99"; ctx.fill(); ctx.closePath();

}

Und so sieht es aus, wenn die Fläche, die von den Linien umrandet wird, mit einer Farbe ausgefüllt wird. <body onload="draw()">

<canvas id=„canvas" width="300" height="300"> </canvas> </body>


Autor: H.Sporenberg


ctx.lineWidth=8; ctx.fillStyle = "rgba(10,10,200,0.7)"; ctx.beginPath(); ctx.strokeStyle = "#444444"; ctx.moveTo( 25, 25 ); ctx.lineTo( 305, 25 ); ctx.lineTo( 25, 305 ); ctx.lineTo( 25, 25 ); ctx.stroke(); ctx.fill(); ctx.closePath(); }

Und so sieht es aus, wenn beides kombiniert wird.

<body onload="draw()"> <canvas id=„canvas" width="300" height="300"> </canvas> </body>

JavaScript - EinführungDas <canvas>-Element – Linien mit unterschiedlichen Farben

Autor: H.Sporenberg

function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // draw a 10 pix green line context.beginPath(); context.strokeStyle='#00cc00'; context.lineWidth=10; context.moveTo(100,0); context.lineTo(100,1000); context.stroke(); context.closePath(); // draw a 20 pix red line context.beginPath(); context.strokeStyle='#cc0000'; context.lineWidth=20; context.moveTo(140,0); context.lineTo(140,1000); context.stroke(); context.closePath(); }

JavaScript - EinführungDas <canvas>-Element – Bundestagswahlergebnisse 2009

Autor: H.Sporenberg

Auf der Canvas-Fläche sollen die Ergebnisse der Bundestagswahl 2009 dargestellt werden. Dazu wird ein Säulendiagramm ver-wendet. Unter den Säulen sollen die Namen der entsprechenden Parteien stehen, auf den Balken die dazugehörigen Prozentzahlen.


Autor: H.Sporenberg

function draw(){ var canvas = document.getElementById('testcanvas'); var ctx = canvas.getContext('2d'); if(canvas.getContext){

ctx.beginPath(); ctx.font = "11pt Verdana";//Schriftart ctx.fillStyle = "#222222"; // Textfarbe ctx.fillText("SPD", 30, 230); ctx.fillText("23,0%", 27, 80);

ctx.fillText("CDU/CSU", 100, 230); ctx.fillText("33,8%", 111, 15);

ctx.fillText("FDP", 195, 230); ctx.fillText("14,6%", 190, 110);

ctx.fillText("DIE LINKE", 255, 230); ctx.fillText("11,9%", 270, 130);

ctx.fillText("DIE GRÜNEN", 345, 230); ctx.fillText("10,7%", 340, 135);

Hier wird die Beschriftung durchgeführt


Autor: H.Sporenberg

ctx.font = "18pt Verdana";ctx.fillStyle = "#000000";ctx.fillText("Bundestagswahl 2009", 50, 290);ctx.lineWidth=8; ctx.strokeStyle = "#444444";ctx.moveTo( 20, 205 ); ctx.lineTo(450, 205 ); ctx.stroke();

ctx.fillStyle = "rgb(0, 0,255)";ctx.fillRect(25,90, 50, 105); ctx.fillStyle = "rgb(10,10,10)"; ctx.fillRect(105,22, 50, 173); ctx.fillStyle = "rgb(255,255,10)"; ctx.fillRect(185,122, 50, 73);

ctx.fillStyle = "rgb(255,0,0)"; ctx.fillRect(265,135, 50, 60);

ctx.fillStyle = "rgb(0,255,0)"; ctx.fillRect(345,140, 50, 55);

ctx.fill(); ctx.closePath(); }}

Hier werden die Säulen gezeichnet.


Autor: H.Sporenberg

<body onload="draw()"><canvas id="testcanvas" width="450" height="400"></canvas></body></html>

Der Vollständigkeit halber, hier der Code im body


Autor: H.Sporenberg

So sieht es aus

JavaScript - EinführungDas <canvas>-Element – ein Smiley

Autor: H.Sporenberg

function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath();ctx.arc(150, 150, 100, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(255, 0, 0)"; ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.arc(120, 130, 20, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(255, 255, 255)"; ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.arc(123, 133, 4, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(0, 0, 255)"; ctx.stroke(); ctx.fill();

ctx.beginPath();ctx.arc(180, 130, 20, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(255, 255, 255)"; ctx.stroke(); ctx.fill();

ctx.beginPath();ctx.arc(183, 133, 4, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(0, 0, 255)";ctx.stroke(); ctx.fill(); ctx.beginPath();ctx.arc(155, 165, 60, 0, 3, false); ctx.closePath(); ctx.lineWidth = 5; ctx.strokeStyle = "rgb(255, 255, 0)"; ctx.fillStyle = "rgb(255, 255, 255)"; ctx.stroke();ctx.fill(); }

JavaScript - EinführungDas <canvas>-Element – Kreis

Autor: H.Sporenberg

function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // facecontext.beginPath();context.lineWidth = 10;context.strokeStyle = “rgb(0, 0, 0)”;context.arc(200, 233, 150, 0, 2 * Math.PI, true);context.stroke();

// color facecontext.beginPath();context.fillStyle = “rgba(80, 100, 80, 0.4)”;context.arc(200, 233, 150, 0, 2 * Math.PI, true);context.fill();

// lower lipcontext.beginPath();context.moveTo(100, 235);context.bezierCurveTo(105, 270, 200, 480, 300, 232);context.stroke();

// upper lipcontext.beginPath();context.moveTo(100, 230);context.bezierCurveTo(100, 230, 200, 380, 300, 230);context.stroke();

// right eyecontext.lineWidth = 20;context.beginPath();context.moveTo(230, 130);context.bezierCurveTo(230, 130, 230, 130, 240, 200);context.stroke();

// left eyecontext.beginPath();context.moveTo(170, 130);context.bezierCurveTo(170, 130, 170, 130, 160, 200);context.stroke();

JavaScript - EinführungDas <canvas>-Element – arc

Autor: H.Sporenberg

function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.beginPath();context.fillStyle = ”rgb(255, 0, 0)”;context.moveTo(123,93);context.arc(123, 93, 70, 0, 2 * Math.PI, true);context.fill();}Mit Hilfe der Methode arc können Kreise und Kreisbögen gezeichnet werden. Gezeichnet wird der Kreis(-bogen) ausgehend vom Mittelpunkt (x,y). An diesen wird der Radius angetragen. Die Länge des Kreisbogens hängt vom Start- und Endwinkel ab, der von der positiven x-Achse aus gemessen wird.

arc(x, y, Radius, startWinkel, endWinkel, Richtung);

x: x-Koordinate des Kreismittelpunkts

y: y-Koordinate des Kreismittelpunkts

startWinkel: Startwinkel in rad, gemessen von der positiven x-Achse

endWinkel: Endwinkel in rad, gemessen von der positiven x-Achse

Richtung: true=gegen den Uhrzeigersinn, false=mit dem Uhrzeigersinn


Autor: H.Sporenberg


x: x-Koordinate des Kreismittelpunkts

y: y-Koordinate des Kreismittelpunkts

startWinkel: Startwinkel in rad, gemessen von der positiven x-Achse

endWinkel: Endwinkel in rad, gemessen von der positiven x-Achse

Richtung: true=gegen den Uhrzeigersinn, false=mit dem Uhrzeigersinn


Autor: H.Sporenberg

arc(x,y, Radius,startWinkel, endWinkel, Richtung);

Ein gelber Kreis ohne Rand

function draw(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); if(canvas.getContext){ context.beginPath(); context.fillStyle = "#ffff00"; // Einstellen der Farbe context.arc(250, 150, 100, 0, 2*Math.PI,true); //Kreis mit Mittelpunkt (250/150) und dem Radius 100, Winkel von 0o bis 360o context.fill(); // Der Kreis wird gefärbt } }


Autor: H.Sporenberg


Ein gelber Kreis ohne Rand


Autor: H.Sporenberg


Ein gelber Kreis mit Rand

function draw(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); if(canvas.getContext){ context.beginPath(); context.fillStyle = "#ffff00"; // Farbe für den Kreis (gelb) context.strokeStyle="#454545"; // Farbe für den Rand context.lineWidth="8"; // Dicke des Randes context.arc(250, 150, 100, 0, 2*Math.PI,true); //Kreis mit Mittelpunkt (250/150) und dem Radius 100, Winkel von 0o bis 360o context.fill(); // Einfärben des Kreisinneren context.stroke(); // Zeichnen des Randes } }


Autor: H.Sporenberg


Ein gelber Kreis mit Rand


Autor: H.Sporenberg


Wichtig: Um Kreisbögen zu zeichnen ist es notwendig, dass man mit Hilfe von moveTo zum Mittelpunkt des Kreises geht.

Solange man nur den Kreis mit einer Farbe ausfüllen möchte, ist alles in Ordnung. Wenn jedoch nicht nur das Innere des Kreises gefärbt werden soll, sondern wenn man den Kreisbogen zusätzlich umrahmen möchte, gibt es ein Problem. Ein Streckenzug wird nicht gezeichnet.


Autor: H.Sporenberg

function draw(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); if(canvas.getContext){ context.beginPath(); context.moveTo(300,200); context.lineTo(200,200); context.fillStyle = "#ffff00"; context.arc(200, 200, 100, 4/5*Math.PI, 2*Math.PI,true); context.fill(); }}

Nur das Inneren des Kreisbogens wird gefärbt.


Autor: H.Sporenberg

function draw(){ var canvas = document.getElementById("testcanvas"); var context = canvas.getContext('2d'); if(canvas.getContext){ context.beginPath(); (6) context.moveTo(200,200); context.fillStyle = "#7cfc00"; context.lineWidth=4; context.strokeStyle="#454545"; (11) context.arc(200, 200, 100, 4/5*Math.PI, 2*Math.PI,true); (12) context.fill(); (13) context.stroke(); }}

Es wird ein Rahmen gezogen, ein Teil fehlt davon.


Autor: H.Sporenberg

In Zeile 6 wird zum Mittelpunkt des Kreises mit Hilfe von context.moveTo(xko,yko) gegangen. An dieser Stelle (xko,yko) wird dann in Zeile 11 der Kreis angegeben und dann in Zeile 12 mit einer Farbe gefüllt. In Zeile 13 wird der unvollständige Rahmen in der voreingestellten Farbe gezeichnet.

Es wird ein Rahmen gezogen, ein Teil fehlt davon.


Autor: H.Sporenberg

function draw(){ var canvas = document.getElementById("testcanvas") var context = canvas.getContext('2d'); if(canvas.getContext){ (6) context.beginPath(); (7) context.moveTo(300,200); (8) context.lineTo(200,200); (9) context.fillStyle = "#7cfc00"; (10)context.lineWidth=4; (11)context.strokeStyle="#454545"; (13)context.arc(200, 200, 100, 4/5*Math.PI, 2*Math.PI,true); (14)context.fill(); (15)context.stroke(); } }

Es wird ein Rahmen um den kompletten Kreisbogen gezogen. Funktioniert nur, wenn der Endwinkel 2*Math.PI ist.


Autor: H.Sporenberg

function draw(){ var canvas = document.getElementById("testcanvas") var context = canvas.getContext('2d'); if(canvas.getContext){ (6) context.beginPath(); (7) context.moveTo(300,200); (8) context.lineTo(200,200); (9) context.fillStyle = "#7cfc00"; (10)context.lineWidth=4; (11)context.strokeStyle="#454545"; (13)context.arc(200, 200, 100, 4/5*Math.PI, 2*Math.PI,true); (14)context.fill(); (15)context.stroke(); } }

Es wird ein Rahmen um den kompletten Kreisbogen gezogen.

In (7) wird der Punkt (300/200) angewählt, mit lineTo in (8) wird ein Strich von (300/200) nach (200/200) gezogen. In (9) bis (11) werden Farbe und Stiftdicke eingestellt. In (13) wird der Kreis um (200/200) mit dem Radius 100 vorbereitet. In (14) wird der Kreisbogen gefärbt, in 15 der restliche Rahmen gezogen


Autor: H.Sporenberg

Es wird ein Rahmen um den kompletten Kreisbogen gezogen.


Autor: H.Sporenberg

function draw(){ var canvas = document.getElementById("testcanvas") var context = canvas.getContext('2d');

if(canvas.getContext){ (6) context.beginPath(); (7) context.moveTo (xko+radius,yko); (8) context.lineTo (xko,yko); (9) context.fillStyle = "#7cfc00"; (10)context.lineWidth=4; (11)context.strokeStyle="#454545"; (13)context.arc (xko,yko, radius, 4/5*Math.PI, 2*Math.PI,true); (14)context.fill(); (15)context.stroke(); } }

Es wird ein Rahmen um den kompletten Kreisbogen gezogen. Allgemeiner Fall – nur wenn der Endwinkel 2*Math.PI ist.

Der Kreis hat den Mittelpunkt M(xko/yko) und den Radius radius. Dann gilt der nebenstehende Code für den allgemeinen Fall.

Hier müssen die Werte für xko, yko und radius eingefügt werden:var xko=150;var yko=220;var radius= 120;


Autor: H.Sporenberg


context.beginPath(); context.arc(100, 100, 50, 0, 1.5 * Math.PI, false); context.lineWidth = 10; context.stroke();

context.beginPath(); context.arc(100, 100, 50, 0, Math.PI, false); context.lineWidth = 10; context.stroke();

context.beginPath(); context.arc(100, 100, 50, Math.PI, 2 * Math.PI, false); context.lineWidth = 10; context.stroke();


Autor: H.Sporenberg

context.beginPath(); context.arc(100, 100, 50, 1.25 * Math.PI, 1.75 * Math.PI, false); context.lineWidth = 10; context.stroke();

context.beginPath(); context.arc(100, 100, 50, 1.5 * Math.PI, 0.5 * Math.PI, false); context.lineWidth = 10; contxt.stroke();

context.beginPath(); context.arc(100, 100, 50, 0.25 * Math.PI, 1.25 * Math.PI, false); context.fillStyle = "rgb(255, 255, 0)"; context.fill(); context.beginPath(); context.arc(100, 100, 50, 0.75 * Math.PI, 1.75 * Math.PI, false);context.fill(); context.beginPath(); context.arc(100, 75, 10, 0, 2 * Math.PI, false); context.fillStyle = "rgb(0, 0, 0)"; context.fill();


Autor: H.Sporenberg



JavaScript - EinführungDas <canvas>-Element – arc - Smiley

Autor: H.Sporenberg

ctx.beginPath(); ctx.arc(180, 130, 20, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(255, 255, 255)"; ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.arc(183, 133, 4, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(0, 0, 255)"; ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.arc(155, 165, 60, 0, 3, false); ctx.closePath(); ctx.lineWidth = 5; ctx.strokeStyle = "rgb(255, 255, 0)"; ctx.fillStyle = "rgb(255, 255, 255)"; ctx.stroke(); ctx.fill();

ctx.beginPath(); ctx.arc(150, 150, 100, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(255, 0, 0)"; ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.arc(120, 130, 20, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(255, 255, 255)"; ctx.stroke(); ctx.fill();

ctx.beginPath(); ctx.arc(123, 133, 4, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(0, 0, 255)"; ctx.stroke(); ctx.fill();

JavaScript - EinführungDas <canvas>-Element – Die olympischen Ringe

Autor: H.Sporenberg

<script type="text/javascript"> var context;

function drawCircle(x,y,radius, rgb){ context.strokeStyle = rgb; context.lineWidth = 3; context.beginPath(); context.arc(x,y,radius,0,Math.PI*2,true); context.stroke(); }

function draw(){context.scale( 3,3); drawCircle(30,30,25,"rgb(0,0,255)"); drawCircle(85,30,25,"rgb(0,0,0)"); drawCircle(140,30,25,"rgb(255,0,0)"); drawCircle(57.5,55,25,"rgb(255,255,0)"); drawCircle(112.5,55,25,"rgb(0,255,0)"); }

function init(){ var canvas = document.getElementById('drawingArea'); if (canvas.getContext){ context = canvas.getContext('2d'); draw(); } } </script> </head>

<body onLoad="init()"> <canvas id="drawingArea" width="800px" height="400px"></canvas> </body></html>

JavaScript - EinführungDas <canvas>-Element – Die olympischen Ringe

Autor: H.Sporenberg

JavaScript - EinführungDas <canvas>-Element – Smiley

Autor: H.Sporenberg

function draw () { canvas = document.getElementById('canvas');context = canvas.getContext('2d');context.lineWidth = 2; context.beginPath();context.fillStyle = 'yellow';context.scale(2,2);context.arc(100,100,50,0,Math.PI*2,true); // Äußerer Kreiscontext.stroke();context.fill(); context.beginPath();context.arc(100,100,35,0,3.14,false); // Mund

context.stroke();

context.beginPath(); context.fillStyle = 'black'; context.arc(80,80,5,0,Math.PI*2,true); // Linkes Auge

context.fill(); context.beginPath();context.arc(115,80,5,0,Math.PI*2,true); // Rechtes Augecontext.fill(); }

JavaScript - EinführungDas <canvas>-Element – Smiley

Autor: H.Sporenberg

JavaScript - EinführungDas <canvas>-Element – Verkehrsschild

Autor: H.Sporenberg

Ein Verkehrsschild soll gezeichnet werden. Es besteht aus einem Dreieck, um das ein schwarzer Rand gezeichnet wird. Das Zeichen auf dem Schild soll ein Ausrufzeichen sein. Darunter soll eine Stange das Schild tragen.

JavaScript - EinführungDas <canvas>-Element – Verkehrsschild

Autor: H.Sporenberg

<script>

function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.beginPath();

context.moveTo(200,38); // Obere Eckecontext.lineTo(350,300); // Rechte Ecke untencontext.lineTo(50,300); // Linke Ecke untencontext.lineTo(200,38); context.strokeStyle="#ff0000";context.lineWidth="16";context.lineJoin="round";context.fillStyle="#ffff00";

context.fill();context.stroke();

context.fillStyle="#787878";context.fillRect(185,308,30,300);

// Hier wird das Ausrufezeichen eingefügt

context.beginPath();context.font="120pt Verdana";context.fillStyle="#343434";context.fillText("!",170,250);context.closePath();}

</script>

JavaScript - EinführungDarstellung von Text im <canvas>-Element

Autor: H.Sporenberg

Um einen Text auf der Zeichenfläche darzustellen, gibt es 2 Möglichkeiten:context.fillText(text, xko, yko, maxwidth)context.strokeText(text,xko,yko,maxwidth)

Beispiel: function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var xko=20; (5) var yko=80; if(canvas.getContext){ context.font = "36pt Helvetica"; context.fillStyle = "red"; context.lineWidth=4; (10) context.strokeStyle="#4488aa"; (11) context.fillText("Reflection", xko, yko,400); (12) context.font = "58pt Verdana"; (13) context.strokeText("Reflection", xko,2* yko); }}

JavaScript - EinführungDarstellung von Text im <canvas>-Element

Autor: H.Sporenberg

In Zeile (7) und (8) werden Schriftart und Schriftfarbe festgelegt, in Zeile (9) die Dicke der Linienbreite, in (10) die Farbe der Linie.

In (11) wird der Text Reflection an der Stelle (20/80) mit der maximalen Breite von 400px gezeichnet. Diese Angabe ist aber nicht erforderlich.

Dann wird in (12) die Schriftart verändert, in (13) wird der Text Reflection mit einer Umrandung der Buchstaben gezeichnet.

JavaScript - EinführungDarstellung von Text im <canvas>-ElementTextanimation von links nach rechts

Autor: H.Sporenberg

function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); animate(context,0,100); }function animate(context,xko,yko){ setTimeout(function(){ context.clearRect(0,0,500,300); context.beginPath(); context.fillStyle = "blue"; context.font = "48pt Helvetica"; context.fillText("Reflection", xko, yko); xko=xko+2;yko=100; if(xko>500){xko=0}; self.animate(context,xko,yko);},8); }

JavaScript - EinführungDarstellung von Text im <canvas>-ElementTextanimation von rechts nach links

Autor: H.Sporenberg

function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); animate(context,500,100); }function animate(context,xko,yko){ setTimeout(function(){ context.clearRect(0,0,500,300); context.beginPath(); context.fillStyle = "blue"; context.font = "48pt Helvetica"; context.fillText("Reflection", xko, yko); xko=xko-2; yko=100; if(xko<0){xko=500}; self.animate(context,xko,yko);},10); }

Die Änderungen sind fett dargestellt. Achtung: Die Geschwindigkeiten gegenüber links nach rechts sind nicht gleich. Darum: die Zeit bis zum nächsten rekursiven Aufruf muss erhöht werden.

JavaScript - EinführungDas Einbinden von Videos

Autor: H.Sporenberg

Der <video>-Tag ist eine Neuerung von HTML5 und dient dazu, Filme und Videos abzuspielen. Videos können direkt in eine HTML-Seite eingebettet werden. Selbstverständlich können die Videos deshalb auch mit CSS und JavaScript kombiniert werden.

Keine Plugins – aber unterschiedliche CodecsZum Abspielen sind keine Browser-Plugin wie z.B. Silverlight oder Flash nötig. Voraussetzung für den <video>-Tag ist lediglich ein aktueller Browser wie Firefox (ab 3.5) oder Safari (ab 4).Leider wurde bisher kein gemeinsamer Nenner von den Browserherstellern gefunden, welche Video-Codecs eingesetzt werden dürfen/müssen. Die möglichen Codecs hängen deshalb vom Browser ab.

Firefox setzt auf Theora – Safari kann MPEG-4

Firefox kann Videos mit Theora-Codec in einem Ogg-Container (.ogv) abspielen. Safari setzt auf das MPEG4-Format mit dem bekannten und effizienten Codec-Duo H.264 (Video) und AAC (Audio). Bessere Qualität, aber MPEG-4-Lizenzgebühren.


Autor: H.Sporenberg

Um Videos einzubinden, müssen die Videos im MPEG4- bzw. OGV-Format vorliegen. Meistens jedoch liegen die Videos im MPEG4-Format vor. Um diese Videos in das OGV-Format umzuwandeln, eignet sich der Theora-Encoder

http://theora.or/downloads/ Version: 1.1.1 Größe: 2,1 MB

<body><center><video autoplay controls=„controls“> <source src="Udo_Lindenberg.mp4" type="video/mp4" /> <source src="Udo_Lindenberg.ogv" type="video/ogg" /> This browser is not compatible with HTML 5</video></body>


Autor: H.Sporenberg

Attribute:Mit Hilfe von width und height kann die Größe des Videos eingestellt werden.autoplay legt fest, ob das Video automatisch gestartet werden soll oder nicht.Mit poster kann man ein Bild hinterlegen poster = „bild.jpg“. Dies wird angezeigt, solange das Video noch nicht geladen wird. Ein Bild einzufügen macht natürlich nur Sinn, wenn das Attribut autoplay nicht aktiviert wurde.controls="controls" aktiviert eine Leiste mit Steuerungsfunktionen für den Benutzer

<body><center><video width=600 height= 400 autoplay controls=„controls“> <source src="Udo_Lindenberg.mp4" type="video/mp4" /> <source src="Udo_Lindenberg.ogv" type="video/ogg" /> This browser is not compatible with HTML 5</video></body>


Autor: H.Sporenberg

<body><center><video width=600 height= 400 autoplay controls=„controls“> <source src="Udo_Lindenberg.mp4" type="video/mp4" /> <source src="Udo_Lindenberg.ogv" type="video/ogg" /> This browser is not compatible with HTML 5</video></center></body>

JavaScript - EinführungDas <canvas>-Element – Bezier-Kurve

Autor: H.Sporenberg

function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); context.lineWidth = 20;context.beginPath();context.moveTo(5, 50);context.bezierCurveTo(30, 30, 130, 530, 200, 100);context.stroke();}

JavaScript - EinführungDas <canvas>-Element – Farbverlauf mit Gradient

Autor: H.Sporenberg

Die Methode createLinearGradient dient zur Erzeugung eines linearen Gradienten. Die Übergabeparameter definieren die Startposition (x0,x0) und Endposition (x1,y1). Zurückgegeben wird ein Objekt vom Typ CanvasGradient, das mit der Methode addColorStop die Möglichkeit bietet, im Verlauf Farbpunkte zu setzen, die als Teilziele dienen und durchlaufen werden müssen.

createLinearGradient(x0,y0,x1,y1)

Die Parameter:x0-Horizontale Koordinate des Startpunktsy0-Vertikale Koordinate des Startpunktesx1- Horizontale Koordinate des Endpunktsy1-Vertikale Koordinate des Endpunkts

Die Abbildung zeigt einen Farbverlauf von gelb über rot nach blau. Die Verlaufspunkte (vp1, vp2 und vp3) teilen die Verlaufsstrecke gleichmäßig.


Autor: H.Sporenberg

<script>

function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // Draw a path var objGradient = context.createLinearGradient(0, 0, 480, 0); // Verlaufspunkte setzen (gelb->rot->blau->gruen) objGradient.addColorStop(0, '#ff0'); objGradient.addColorStop(0.3, '#f00'); objGradient.addColorStop(0.3, '#f00'); objGradient.addColorStop(0.7, '#0000ff'); objGradient.addColorStop(0.7, '#00f'); objGradient.addColorStop(1, 'rgba(0,255,0,0.5)');


Autor: H.Sporenberg

// Füll-Style mit Gradient auszeichnen context.fillStyle = objGradient;

// Rechteck zeichnen context.fillRect(10, 10, 480, 120); // Rahmen um das Rechteck context.lineWidth = "8"; context.strokeStyle = "#898989"; context.strokeRect(10, 10, 480, 120); }</script>

Es wird ein vertikaler Farbverlauf von gelb über rot nach grün (halbtransparent) erstellt. Zunächst wird mit der Methode createLinearGradient ein CanvasGradient-Element erstellt. Mit Hilfe der addColorStop-Methode werden die benötigten Verlaufspunkte gesetzt.


Autor: H.Sporenberg

<script>

function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // Draw a path var grad = context.createLinearGradient(10, 0, 390, 0); grad.addColorStop(0, 'red'); grad.addColorStop(1 / 6, 'orange'); grad.addColorStop(2 / 6, 'yellow'); grad.addColorStop(3 / 6, 'green') grad.addColorStop(4 / 6, 'aqua'); grad.addColorStop(5 / 6, 'blue'); grad.addColorStop(1, 'purple'); context.fillStyle = grad; context.fillRect(0, 0, 400, 175);

// Rahmen um das Rechteck context.lineWidth = "8"; context.strokeStyle = "#898989"; context.strokeRect(0, 0, 400, 175); }</script>

Regenbogen


Autor: H.Sporenberg

Regenbogen


Autor: H.Sporenberg

Grauabstufung<script>

function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // Draw a path var grad = context.createLinearGradient(10, 0, 300, 0); grad.addColorStop(0, 'black'); grad.addColorStop(1, 'white'); context.fillStyle = grad; context.fillRect(10, 10, 300, 100);// Rahmen um das Rechteck context.lineWidth = "8"; context.strokeStyle = "#000089"; context.strokeRect(10, 10, 300, 100); }</script>


Autor: H.Sporenberg

function drawGradient(){ var objCanvas = document.getElementById('canvas1'); if(objCanvas.getContext){ var objContext = objCanvas.getContext('2d'); // Linearen Verlauf erstellen var objGradient = objContext.createLinearGradient(0, 0, 280, 0); // Verlaufspunkte setzen (gelb;rot;blau;gruen) objGradient.addColorStop(0, '#ff0'); objGradient.addColorStop(0.3, '#f00'); objGradient.addColorStop(0.3, '#f00'); objGradient.addColorStop(0.7, '#0000ff'); objGradient.addColorStop(0.7, '#00f'); objGradient.addColorStop(1, 'rgba(0,255,0,0.5)');

// Füll-Style mit Gradient auszeichnen objContext.fillStyle = objGradient;

// Rechteck zeichnen objContext.fillRect(10, 10, 500, 180); }}

Und so sieht es aus


Autor: H.Sporenberg

<script>var canvas, context, angle = 0;

function init() { canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); var t = setInterval(animate,30);} function animate() { // create a variable that cycles from -1 to 1 angle += 0.03; var scalar = Math.sin(angle); // create gradient that goes from bottom to top of canvas var grad = context.createLinearGradient(0, canvas.height, 0, 0); // start gradient at blue grad.addColorStop(0, 'blue');

Dieses Beispiel erzeugt eine Endlosschleife, bei der der Gradient verändert wird. Grundfarbe ist blau.


Autor: H.Sporenberg

// create rgb color value that goes from black to white // as the variable goes from -1 to 1 var r = parseInt(128 + 128 * scalar); var g = parseInt(128 + 128 * scalar); var b = parseInt(128 + 128 * scalar); // add color stop with new rgb color grad.addColorStop(1, "rgb(" + r + "," + g + "," + b + ")"); // clear canvas, fill canvas with gradient context.clearRect(0, 0, canvas.width, canvas.height); context.save(); context.fillStyle = grad; context.fillRect(0, 0, canvas.width, canvas.height); context.restore(); }</script>


Autor: H.Sporenberg


Autor: H.Sporenberg

Die Methode createRadialGradient dient zum Erstellen eines radialen Gradienten. Die sechs Parameter definieren dabei Start- (x0,y0) mit dem Radius radius0 und dem Endmittelpunkt (x1,y1) mit dem Radius radius1.

createRadialGradient(x0,y0,radius0,x1,y1,radius1)

x0-Horizontale Koordinate des Mittelpunkts des ersten Kreisesy0-Vertikale Koordinate des Mittelpunkts des ersten Kreisesradius0-Radius des ersten Kreisesx1-Horizontale Koordinate des Mittelpunkts des zweiten Kreisesy1- Vertikale Koordinate des Mittelpunkts des zweiten Kreisesradius1-Radius des zweiten Kreises

JavaScript - EinführungDas <canvas>-Element – Animation

Autor: H.Sporenberg

Der Aufbau einer Animation sieht wie folgt aus:Ein Bild mit dem sich bewegenden Objekt wird erzeugt, dann wird dieses Objekt gelöscht.Anschließend wird das Objekt an einer anderen Stelle wieder neu gezeichnet.Dieser Vorgang wiederholt sich dann.

Als Beispiel nehmen wir ein Rechteck, dass sich von links nach rechts bewegen soll. Ist dieses Rechteck am rechten Bildrand angekommen, beginnt die Bewegung erneut von links nach rechts.


Autor: H.Sporenberg

<script>function drawCanvas(){var canvas = document.getElementById('canvas');

if(canvas.getContext){var context = canvas.getContext('2d');animate(context, 10, 50);}

} function animate(context, ax,ay){ setTimeout(function(){ // Neues Bild context.clearRect(0, 0, 400, 400); //Canvas wird gelöscht context.beginPath(); context.fillStyle = "#ff00ff"; context.fillRect(ax,ay,100,50); //Rechteck neu zeichnen ax=ax+1; ay=50; //x-Koordinate um 1 erhöht, y bleibt if (ax>300) {ax=10}; //Rechteck kommt wieder von links self.animate(context, ax, ay);}, 8);// Die Zahl 8 gibt die Zeit an, die bis zum nächsten Aufruf der //Funktion vergeht (in Millisekunden)}</script>


Autor: H.Sporenberg

<script>function drawCanvas(){var canvas = document.getElementById("testcanvas1");


} function animate(context, ax,ay){ setTimeout(function(){ // Neues Bild context.clearRect(0, 0, 400, 400); //Canvas wird gelöscht context.beginPath();

context.fillStyle = "#ff00ff"; context.fillRect(ax,ay,100,50); //Rechteck neu zeichnen ax=ax+1; ay=50; //x-Koordinate um 1 erhöht, y bleibt if (ax>300) {return}; //Die Animation stoppt self.animate(context, ax, ay);}, 8);// Die Zahl 8 gibt die Zeit an, die bis zum nächsten Aufruf der Funktion //vergeht (in Millisekunden)}</script>

Die Animation soll enden, wenn das Rechteck am rechten Rand angekommen ist.


Autor: H.Sporenberg



} function animate(context, ax,ay){ setTimeout(function(){ // Neues Bild context.clearRect(0, 0, 400, 400); //Canvas wird gelöscht context.beginPath(); context.fillStyle = "#ff00ff"; context.fillRect(ax,ay,100,50); //Rechteck neu zeichnen context.lineWidth = "4"; context.strokeStyle = "black"; context.strokeRect(ax, ay, 100,50); ax=ax+1; ay=50; //x-Koordinate um 1 erhöht, y bleibt if (ax>300) {return}; //Die Animation stoppt self.animate(context, ax, ay);}, 8);// Die Zahl 8 gibt die Zeit an, die bis zum nächsten Aufruf der Funktion //vergeht (in Millisekunden)}</script>

Das sich bewegende Rechteck soll einen Rand bekommen


Autor: H.Sporenberg



} function animate(context, ax,ay){ setTimeout(function(){ // Neues Bild context.clearRect(0, 0, 400, 400); //Canvas wird gelöscht context.beginPath(); context.fillStyle = "#ff00ff"; context.fillRect(ax,ay,100,50); //Rechteck neu zeichnen context.lineWidth = "4"; context.strokeStyle = "black";

context.strokeRect(ax, ay, 100,50); ax=ax+1; ay=50; //x-Koordinate um 1 erhöht, y bleibt if (ax>300) {ax=0}; //Die Animation beginnt wieder von links self.animate(context, ax, ay);}, 8);// Die Zahl 8 gibt die Zeit an, die bis zum nächsten Aufruf der Funktion //vergeht (in Millisekunden)}</script>

Die Bewegung wiederholt sich, sobald das Rechteck am rechten Rand angekommen ist.


Autor: H.Sporenberg



} function animate(context, ax,ay){ setTimeout(function(){ // Neues Bild context.clearRect(0, 0, 400, 400); //Canvas wird gelöscht context.beginPath(); context.fillStyle = "#ff00ff"; context.fillRect(ax,ay,100,50); //Rechteck neu zeichnen context.lineWidth = "4"; context.strokeStyle = "black";

context.strokeRect(ax, ay, 100,50);

ax=ax-1; ay=50; //x-Koordinate um 1 erhöht, y bleibt

if (ax<0) {ax=400}; //Die Animation stoppt self.animate(context, ax, ay);}, 8);// Die Zahl 8 gibt die Zeit an, die bis zum nächsten Aufruf der Funktion //vergeht (in Millisekunden)}</script>

Das Rechteck bewegt sich von rechts nach links und beginnt dann wieder von rechts.


Autor: H.Sporenberg

Jetzt soll die Bewegung des Rechtecks von links nach rechts beginnen. Sobald der rechte Rand erreicht wird, soll die Bewegung sich umkehren und dann wieder nach links beginnen. Am linken Rand kehrt die Bewegung sich dann wieder um.

Man benötigt dafür zwei Abfragen. Einmal ob der rechte Rand erreicht wurde, dann ob der linke Rand erreicht wurde. In Abhängigkeit davon, muss die x-Koordinate erhöht bzw. erniedrigt werden. Das erreicht man dadurch, dass man den zu addierenden Wert als Variable nimmt. In der If-Abfrage wird der Wert dieser Variablen verändert.

JavaScript - EinführungDas <canvas>-Element – Animation – Rechteck bewegt sich von links nach rechts und wieder zurück

Autor: H.Sporenberg

function drawCanvas(){var canvas = document.getElementById('canvas');if(canvas.getContext){

var context = canvas.getContext('2d');animate(context, 10, 50,1);

} }

function animate(context, ax,ay,dx){ setTimeout(function(){

// Alles neu zeichnen context.clearRect(0, 0, 800, 400);

context.fillStyle = "rgba(0, 0, 255, 0.5)";context.fillRect(ax, ay, 100,50);

context.lineWidth = 4; context.strokeStyle = „#000000"; context.strokeRect(ax, ay, 100,50);

ax=ax+dx; ay=50; if (ax<0){dx=4}; if (ax>800-100){dx=-4}; self.animate(context, ax, ay,dx); }, 4); }

JavaScript - EinführungDas <canvas>-Element – Animation – Rechteck wächst nach rechts

Autor: H.Sporenberg


var context = canvas.getContext('2d');animate(context, 10, 10); } }

function animate(context, hx,hy){ setTimeout(function(){

// Alles neu zeichnen context.clearRect(0, 0, 800, 400); context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(50,10,hx, hy);

context.lineWidth = 2; context.strokeStyle = "black"; context.strokeRect(50,10,hx, hy);

hx=hx+2; hy=10;

if (hx>800-100){return}; self.animate(context, hx, hy); }, 4);}

JavaScript - EinführungDas <canvas>-Element – Animation – Rechteck wächst von unten nach oben

Autor: H.Sporenberg


var context = canvas.getContext('2d');animate(context, 200, 200); } }

function animate(context, ay,Hoehey){ setTimeout(function(){ // Alles neu zeichnen context.clearRect(0,0,800,400);

context.fillStyle = "rgb(0, 0, 255)";context.fillRect(50,ay,50,Hoehey);

context.lineWidth = "4"; context.strokeStyle = "#cdcdcd"; context.strokeRect(50,ay,50,Hoehey);

ay=ay-2; Hoehey=Hoehey+2;

if(ay<100){return}; self.animate(context, ay, Hoehey); }, 4);}


Autor: H.Sporenberg

Jetzt können etliche Aufgaben gestellt werden, die die lineare Bewegung als Grundlage haben.

1.Bewegung eines Kreises von links nach rechts

2.Bewegung von Kreis/Rechteck von rechts nach links

3.Bewegung von Kreis/Rechteck von oben nach unten bzw. von unten nach oben.

4.Bewegung von Kreis/Rechteck auf der Diagonalen der Leinwand.

JavaScript - EinführungBewegung eines Kreises von links nach rechts

Autor: H.Sporenberg

Im Prinzip muss man das Programm für die Bewegung eines Rechtecks von links nach rechts nur leicht modifizieren.

Der Kreis soll die Bewegung wiederholen, sobald er den rechten Rand erreicht hat.

<script>

function drawCanvas(){ var canvas = document.getElementById("testcanvas1"); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 50, 50);

}}


Autor: H.Sporenberg

function animate(context, ax,ay){ setTimeout(function(){

// Alles neu zeichnen context.clearRect(0, 0, 400, 400); context.beginPath(); context.fillStyle = "#EEE8AA"; context.lineWidth = 10; context.strokeStyle ="#DAA520"; context.arc(ax,ay, 30, 0, 2 * Math.PI, true); context.stroke(); context.fill();

ax=ax+1; ay=50; if (ax>290) {ax=50}; self.animate(context, ax, ay);}, 4);

// Die Zahl 4 gibt die Zeit an, die bis zum //nächsten Aufruf der Funktion vergeht //(in Millisekunden)}</script>

<body onload="drawCanvas()"><canvas id="testcanvas1" width="400" height="400">Ihre Browser ist nicht HTML5 tauglich.</canvas>

</body>


Autor: H.Sporenberg

……. ax=ax+1; ay=50; if (ax>290) {exit()}; self.animate(context, ax, ay);}, 4);

// Die Zahl 4 gibt die Zeit an, die bis zum //nächsten Aufruf der Funktion vergeht //(in Millisekunden)}</script>

Soll die Bewegung nur einmal ausge-führt werden, so muss die If-Anwei-sung geändert werden

JavaScript - EinführungReflexion zweier Quadrate an den Rändern des Canvas-Rahmen (450 – Winkel gegenüber den Wänden)

Autor: H.Sporenberg

<script>function drawCanvas(){

var canvas = document.getElementById("testcanvas1");

if(canvas.getContext){var context = canvas.getContext('2d');animate(context, 31, 69, 1, -1, 8, 25, 1, 1);}

}

Die Funktion animate erwartet 9 Übergabeparameter

animate(context, ax, ay, adx, ady, bx, by, bdx, bdy)

Die Parameter beginnend mit a gelten für das rote Quadrat, beginnend mit b für das grüne Quadrat. ax, ay bzw. bx, by geben den Anfangspunkt (oben links) des jeweiligen Quadrats an. Die Variablen adx, ady bzw. bdx, bdy geben die Richtung der Bewegung zu Beginn an (450 gegenüber den Wänden).


Autor: H.Sporenberg

function animate(context, ax, ay, adx, ady, bx, by, bdx, bdy){setTimeout(function(){

//Bewegen und Abprallen für Quadrat Aif(ax == 325){adx = -1;}else{if(ax == 0){adx = 1;}}

if(ay == 325){ady = -1;}else{if(ay == 0){ady = 1;}}ax = ax+adx;ay = ay+ady;

//Bewegen und Abprallen für Quadrat Bif(bx == 350){bdx = -1;}else{if(bx == 0){bdx = 1;}

}

if(by == 350){bdy = -1;}else{if(by == 0){bdy = 1;}}

bx = bx+bdx;by = by+bdy;


Autor: H.Sporenberg

// Alles neu zeichnen context.clearRect(0, 0, 400, 400); context.fillStyle = "rgba(255, 0, 0, 0.7)"; context.fillRect(ax, ay, 75, 75); context.fillStyle = "rgba(0, 255, 0, 0.8)"; context.fillRect(bx, by, 50, 50);

self.animate(context, ax, ay, adx, ady, bx, by, bdx, bdy);}, 10);// Die Zahl 10 gibt die Zeit an, die bis zum nächsten Aufruf der //Funktion vergeht (in Millisekunden)

</script>

<body onload="drawCanvas()"><canvas id="testcanvas1" width="400" height="400">

Ihre Browser ist nicht HTML5 tauglich.</canvas>

</body>

JavaScript - EinführungReflexion eines Kreises (Ball) an den Rändern des Canvas-Rahmen (450 – Winkel gegenüber den Wänden)

Autor: H.Sporenberg

Wir benutzen den Code für die Reflexion zweier Quadrate und modifizieren diesen.

Änderungen

Der Aufruf erfordert nur noch 5 Variable. Dabei bestimmen ax und ay den Mittelpunkt des Kreises, der Radius ist fest vorgegeben (hier 30 Pixel). Die Variablen adx und ady bestimmen die erste Richtung des Kreises.

animate(context, 8, 25, 1, 1)

function animate(context, ax, ay, adx, ady)


Autor: H.Sporenberg

function animate(context, ax, ay, adx, ady){setTimeout(function(){

//Bewegen und Abprallen für den Kreisif(ax == 250){ adx = -1;}else{if(ax == 30){adx = 1;}}

if(ay == 250){ady = -1; }else{if(ay == 30){ady = 1;}}

ax = ax+adx;ay = ay+ady;


Autor: H.Sporenberg


context.beginPath(); context.fillStyle = "rgba(0, 255, 0, 0.5)"; context.lineWidth=8; context.strokeStyle="#ff00ff"; context.arc(ax, ay, 30,0,2*Math.PI,true); context.stroke(); context.fill();

self.animate(context, ax, ay, adx, ady);}, 2);

// Die Zahl 10 gibt die Zeit an, die bis zum nächsten //Aufruf der Funktion vergeht (in Millisekunden)

} <body onload="drawCanvas()"><canvas id="testcanvas1" width="280" height="280">

Ihre Browser ist nicht HTML5 tauglich.</canvas></body>

JavaScript - EinführungAnimiertes Balkendiagramm - Bundestagswahlen

Autor: H.Sporenberg

Die Bundestagswahlenaufgabe wird nun modifiziert. Die Balken für die Ergebnisse der einzelnen Parteien sollen jetzt dynamisch bis zum Endwert wachsen. Sobald alle Balken fertiggestellt sind, soll die Grafik sich nicht mehr verändern.

Die Balken sollen von unten nach oben wachsen. Die Überlegung ist, dass das Rechteck auf der gemeinsamen Linie für alle Parteien nach oben wächst. Da der Koordinatenursprung in der linken oberen Ecke der canvas ist und für das Rechteck die Koordinaten der linken oberen Ecke sowie Höhe und Breite angegeben werden müssen, erfordert dies eine Umrechnung.

Diese sieht folgendermaßen aus:

context.fillRect(ax, 200-ay, 50, ay);


Autor: H.Sporenberg

context.fillRect(ax, 200-ay, 50, ay)

Dabei ist ax die x-Koordinate des linken oberen Punktes des Rechtecks. Diese ändert sich für eine Partei natürlich nicht. Im Gegensatz dazu muss sich die y-Koordinate mit jedem Aufruf verändern. Alle Rechtecke beginnen bei y=200 (kann natürlich auch jeder andere Wert sein. Nur: dieser muss für alle Parteien gleich sein.). Da die Rechtecke nach oben wachsen, muss sich die y-Koordinate verkleinern, im gleichen Maße muss aber die Länge des Rechtecks sich vergrößern. Dies geschieht über die Variable ay.

Beispiel: wir nehmen ay=10 und ax=50 (der Wert für ax bleibt für die SPD konstant). Dann hat das erste Rechteck beim ersten Mal folgenden Aufruf:

context.fillRect(50,190,50,10)

Wird jetzt wie im Beispiel ay um 1 Pixel erhöht, so sieht der zweite Aufruf wie folgt aus:

context.fillRect(50,189,50,11)

Wenn das Rechteck schneller wachsen soll, muss die Variable ay um mehrere Pixel erhöht werden (ausprobieren!!)

Mit 1 Pixel ist die Animation der Balken eigentlich o.k.


Autor: H.Sporenberg

function drawCanvas(){var canvas = document.getElementById("testcanvas1");if(canvas.getContext){

var context = canvas.getContext('2d');animate(context, 50, 10);

}}

Die Säule für die SPD wird animiert

function animate(context, ax,ay){ setTimeout(function(){


context.fillStyle = "rgba(255, 0, 0, 1)"; context.fillRect(ax, 200-ay, 50, ay);

context.font = "12pt Verdana";//Schriftart context.fillStyle = "#222222"; // Textfarbe context.fillText("SPD", 55, 230);


Autor: H.Sporenberg

// Hier wird die Grundlinie gezeichnetcontext.lineWidth=8; context.strokeStyle = "#0000ff";context.moveTo( 20, 210 ); context.lineTo(450, 210 ); context.stroke();

ay=ay+1; // Die nächste y-Koordinate wird um 1 vermindertax=50; // Die Breite des Rechtecks bleibt konstant 50 Pixel

if (ay>50){ay=50}; // Wenn die Höhe der Säule erreicht ist, ändert sich //das Rechteck nicht mehr, ay bleibt dann konstantself.animate(context, ax, ay,bx,by);}, 0); // Selbstaufruf}


Autor: H.Sporenberg

Und so sieht es aus. Die Säule für die SPD bleibt bei der entsprechenden Höhe für die erreichte Prozentzahl stehen (muss umgerechnet werden auf die maximal vorgesehene Höhe).


Autor: H.Sporenberg

Wird jetzt die Säule für die nächste Partei hinzugefügt, so müssen nur wenige Änderungen durchgeführt werden. 1. Die Anzahl der Übergabeparameter ändert sich (+2), nämlich bx und by kommen hinzu. Dabei legt bx die x-Komponente der nächsten Säule fest, by ist ein Maß für die Höhe der Säule.2. Die Beschriftung, Parteiname, Prozente und Farbe der Säule, muss geändert werden.3. Die Abfrage muss entsprechend der Höhe der Säule modifiziert werden.

Dieses gilt nur für die Partei mit der höchsten Prozentzahl und damit mit der höchsten Säule. Ist diese gezeichnet, muss die Animation gestoppt werden. Dies geschieht mit der folgenden Abfrage (in unserem Fall gehört die höchste Säule zur CDU)

if (by>100){exit()};


Autor: H.Sporenberg

Der folgende Code muss eingefügt werden.

context.fillStyle = "rgba(20, 20, 20, 0.5)“;context.fillRect(bx, 200-by, 50, by+1);

context.font = "12pt Verdana";//Schriftartcontext.fillStyle = "#222222"; // Textfarbecontext.fillText("CDU", 145, 230); context.font = "12pt Verdana";//Schriftartcontext.fillStyle = "#222222"; // Textfarbe context.fillText("32,8%", 145, 80);

Und hier die Abfrage für die stärkste Partei (hier CDU)

by=by+1; bx=140; if (by>100){exit()};


Autor: H.Sporenberg

Der Aufruf muss natürlich auch geändert werden

function drawCanvas(){var function animate(context, ax,ay,bx,by){ setTimeout(function(){…

canvas = document.getElementById("testcanvas1");if(canvas.getContext){

var context = canvas.getContext('2d');animate(context, 50, 10,140,10);

}

} …….

…….if (by>100){exit()}; self.animate(context, ax, ay,bx,by); }, 0);// Die Zahl 10 gibt die Zeit an, die bis zum nächsten Aufruf der Funktion //vergeht (in Millisekunden)}


Autor: H.Sporenberg

Die fertige Grafik

JavaScript - EinführungVerschiedene Farbangaben

Autor: H.Sporenberg

Farben kann man unterschiedlich angeben.

1.Angabe des Farbnamens2. HexadezimalAngabe3. Dezimalangabe im rgb-Modus4. Dezimalangabe im rgba-Modus. Die vierte Zahl liegt zwischen 0 und 1 und ist ein Maß für die Durchsichtigkeit (1 undurchsichtig, 0 vollkommen durchsichtig)

1. ctx.fillStyle = "orange"; 2. ctx.fillStyle = "#FFA500"; 3. ctx.fillStyle = "rgb(255,165,0)"; 4. ctx.fillStyle = "rgba(255,165,0,1)";

JavaScript - EinführungDie for-Schleife

Autor: H.Sporenberg

Eine for-Schleife beginnt mit dem Wort for. Dahinter wird, in Klammern stehend, die Schleifenbedingung formuliert. Bei der for-Schleife gilt dabei eine feste Syntax. Innerhalb der Schleifenbedingung werden drei Anweisun-gen notiert. In der ersten Anweisung wird ein Schleifenzähler definiert und initialisiert. Im Beispiel wird ein Zähler i definiert und mit dem Wert 1 ini-tialisiert. Die zweite Anweisung enthält die Bedingung für den Schleifenab-lauf; die Schleife wird ausgeführt, wenn und solange diese zutrifft. Dazu braucht man Vergleichsoperatoren. In der dritten Anweisung wird der Schlei-fenzähler so verändert, dass er irgendwann die in der zweiten Anweisung notierte Bedingung erfüllt. Im Beispiel wird der Zähler mit i=i+1 bei jedem Schleifendurchgang um 1 erhöht.

xko=10; for( i=1;i<10;i=i+1){ context.fillText(i, xko, 100); context.fillText(i*i, xko, 150); xko=xko+50; }

JavaScript - EinführungFunktionsplotter

Autor: H.Sporenberg

Hier soll ein einfacher Funktionsplotter mit Hilfe von canvas entwickelt werden. Dabei sollen beliebige quadratische Funktionen der Form f(x) = a x2 + b x +c nach Eingabe der Werte für a, b und c gezeichnet werden. Das Koordinatenkreuz hat feste Werte für xmin, xmax, ymin und ymax. Diese sind: xmin = -5, xmax = 5, ymin = -5, ymax = 5. Die Canvas hat die Größe width=600 und height=600. Der Koordinatenursprung liegt in der Mitte der canvas. Also: x = 300 und y = 300.

Dieses Grundprogramm kann an vielen Stellen erweitert werden.


Autor: H.Sporenberg

1.Das Koordinatenkreuz - Koordinatenachsen

<script>function drawCanvas(){

var canvas = document.getElementById("testcanvas1");

if(canvas.getContext){var context = canvas.getContext('2d');Koordinatenkreuz(context );}

}function Koordinatenkreuz(context) context.lineWidth=5; context.strokeStyle = "#0000ff"; context.moveTo( 10,300 ); context.lineTo(590,300 ); context.stroke(); context.moveTo( 300,10 ); context.lineTo(300,590 ); context.stroke(); exit(); }</script>


Autor: H.Sporenberg

1.Das Koordinatenkreuz - Gitterlinien

Jetzt soll ein Gitter erzeugt werden. Die Linien sollen natürlich dünner als die Koordinatenachsen sein und auch eine andere Farbe haben.Diese Gitterlinien können jetzt einzeln sukzessive in x-Richtung und y-Richtung erzeugt werden. Der Quellcode dafür ist unten angegeben.

//Code für die senkrechten Gitterlinien context.strokeStyle = "#787878";context.lineWidth=2;

context.moveTo( 100,10 ); context.lineTo(100,590 ); context.moveTo( 150,10 ); context.lineTo(150,590 ); .....

//Code für die waagerechten Gitterlinien context.moveTo( 10,50 ); context.lineTo(590,50 );

context.moveTo( 10,100 ); context.lineTo(590,100 );.....


Autor: H.Sporenberg

1.Das Koordinatenkreuz - Beschriftung

Die Beschriftung der Achsen geschieht ebenfalls einzeln für jede Zahl sowohl in der senkrechten als auch in der waagerechten.

//Code für die Zahlen an der x-Achse context.font = "12pt Verdana";context.fillStyle = "#222222"; // text colorcontext.fillText("-5", 40, 330);context.fillText("-4", 90, 330);..... //Code für die Zahlen an der y-Achse

context.fillText("5", 320, 55);context.fillText("4", 320, 105);....


Autor: H.Sporenberg

1.Das Koordinatenkreuz – die for-Schleife

Die Programmierung der Gitterlinien und der Beschriftung kann mit Hilfe der for-Schleife stark vereinfacht werden.Für die Gitterlinien lautet der Code wie unten angegeben.

//Code für senkrechten Gitterlinien for( xwert=50;xwert<600;xwert=xwert+50) { context.moveTo( xwert,10 ); context.lineTo(xwert,590 );}

//Code für die waagerechten Gitterlinien for(ywert=50;ywert<600;ywert=ywert+50) { context.moveTo( 10,ywert ); context.lineTo(590,ywert ); }

Man erkennt leicht, dass die Vereinfachung Sinn macht. Der Quelltext reduziert sich damit auf 3 Zeilen, egal wie viele Gitterlinien gezeichnet werden müssen.


Autor: H.Sporenberg

Die for-Schleife lässt sich natürlich auch für die Beschriftung der Achsen einsetzen.

//Code für die Beschriftung der x-Achse context.font = "12pt Verdana";context.fillStyle = "#222222"; // text color

context.beginPath();zahl=-5;for( xko=50;xko<600;xko=xko+50){context.fillText(zahl, xko, 330); zahl=zahl+1; } context.closePath();



Autor: H.Sporenberg

//Code für die Beschriftung der y-Achse context.beginPath();zahl=5;for( yko=55;yko<600;yko=yko+50){context.fillText(zahl, 320,yko); zahl=zahl-1; } context.closePath();



Autor: H.Sporenberg

Das Problem bei der graphischen Darstellung ist, dass das Koordinatensystem des canvas nicht identisch ist mit dem vorgesehenen Koordinatensystem. Vielmehr sind die Koordinatenkreuze gegeneinander verschoben.Bezeichnet man die Koordinaten im canvas-System mit x und y und im dargestellten Koordinatensystem mit xstrich und ystrich, so ergeben sich folgende Umrechungen (die canvas hat dabei die Breite 600px und Höhe 600px):xstrich = x – 300 und ystrich = 300 –y

bzw. x = 300 + x und y = 300 - ystrich

2.Der Graph


Autor: H.Sporenberg

context.beginPath();context.strokeStyle = "#9ACD32"; //Farbe des Graphencontext.lineWidth=4;//Dicke des Graphenxstrich=-300;//Der erste Wert im dargestellten Koordinatensystemx=0;//Der erste Wert im canvas-Koordinatensystemxplus=20;//Hiermit kann man die Schrittweite der x-Werte in //der Einheit Pixel festlegen

2.Der Graph


Autor: H.Sporenberg

//Mit Hilfe der for-Schleife wird der Graph gezeichnetfor( i=1;i<40;i=i+1){ x=x+xplus;//Der x-Wert im canvas-System wird um die Schrittweite erhöht. xstrich=xstrich+xplus;//Der x-Wert im dargestellten System wird um dieselbe Schrittweite erhöht. ystrich=1/5*(xstrich/50*xstrich/50)-4/5*xstrich/50-6/5;// Der y-Wert der Funktion wird berechnet context.moveTo(x,300-ystrich*50);//Da im canvas-System y nach unten zunimmt, muss der berechnete y-Wert von 300 //abgezogen werden. Da 50 Pixel einer Einheit entsprechen, muss der berechnete y-//Wert noch mit dem Skalierungsfaktor (hier: 50) multipliziert werden y2strich=1/5*((xstrich+xplus)/50*(xstrich+xplus)/50)-4/5*(xstrich+xplus)/50-6/5;

2.Der Graph


Autor: H.Sporenberg

y2strich=1/5*((xstrich+xplus)/50*(xstrich+xplus)/50)-4/5*(xstrich+xplus)/50-6/5;//Dadurch wird jetzt eine Linie gezogen von P1(x, ystrich) und P2 (x+50,y2strich). //Dieses wird solange wiederholt, bis der linke Rand erreicht ist. Dieses wird durch die //Variable i gesteuert. context.lineTo(x+xplus,300-y2strich*50); } context.stroke();context.closePath();

2.Der Graph


Autor: H.Sporenberg

2.Der Graph

JavaScript - EinführungVerbesserter Funktionsplotter

Autor: H.Sporenberg

Der Funktionenplotter soll jetzt so erweitert werden, dass die Parameter a, b und c (f(x) = a x2 + b x + c) eingegeben werden. Danach soll die Parabel mit diesen Parametern gezeichnet werden.

Änderungen: Die Werte von a, b und c müssen über ein Formular eingegeben werden.

<tr >

<td><center><input type="integer" class="schrift2" name="WertA" value=""></center></td><td><center><input type="integer" class="schrift2" name="WertB" value=""></center></td><td><center><input type="integer" class="schrift2" name="WertC" value=""></center></td>

</tr>


Autor: H.Sporenberg

Änderungen: Damit man weiß, welche Koeffizienten eingegeben werden, wird in einer über den Eingabefeldern angeordnete Tabellenreihe die entsprechende Variable angegeben

<tr div class="schrift11" bgcolor=#c7c78f>

<td><center>a</center></td><td><center>b</center></td><td><center>c</center></td></div>

</tr>

<tr bgcolor=#CDBE70 div class="schrift12"><td colspan=3><center> Parabelplotter für Parabeln der Form: f(x) = a x<sup>2</sup> + b x +c </center></td></div></tr>


Autor: H.Sporenberg

Änderungen: Um die Funktion zu zeichnen, muss durch einen Button die JavaScript-Funktion aufgerufen werden.

<tr ><td colspan=3><center>

<input type="button" name="Knopf" value="Parabel_zeichnen" onClick="drawCanvas(Formular.WertA.value,Formular.WertB.value, Formular.WertC.value)"></center></td>

</tr>


Autor: H.Sporenberg

<center><table cellspacing=5><form name="Formular">

<tr bgcolor=#CDBE70 div class="schrift12"><td colspan=3><center> Parabelplotter für Parabeln der Form: f(x) = a x<sup>2</sup> + b x +c </td></div></tr>

<tr div class="schrift11" bgcolor=#c7c78f><td><center>a</center></td><td><center>b</center></td><td><center>c</center></td></div></tr>

<tr bgcolor=#c7c78f><td><center><input type="integer" class="schrift2" name="WertA" value=""></center></td><td><center><input type="integer" class="schrift2" name="WertB" value=""></center></td><td><center><input type="integer" class="schrift2" name="WertC" value=""></center></td></tr>

<tr bgcolor=#CDCD00><td colspan=3><center> <input type="button" name="Knopf" value="Parabel_zeichnen" class="schrift2" onClick="drawCanvas(Formular.WertA.value,Formular.WertB.value,Formular.WertC.value)"></center></td></tr> </form></table></center>

Hier der Quelltext für die gesamte Eingabe in einer Tabelle


Autor: H.Sporenberg

function drawCanvas(a,b,c){ koeffA=a;koeffB=b;koeffC=c; var canvas = document.getElementById("testcanvas1"); if(canvas.getContext){ var context = canvas.getContext('2d'); zeichnen(context,koeffA,koeffB,koeffC);

}}


Autor: H.Sporenberg

function zeichnen(context,awert,bwert,cwert){ context.clearRect(0, 0, 600, 600);

….. context.beginPath(); context.strokeStyle = "#9ACD32"; context.lineWidth=4; xstrich=-300; x=0; xplus=20; for( i=1;i<40;i++){ x=x+xplus; xstrich=xstrich+xplus; ystrich=awert*(xstrich/50*xstrich/50)-bwert*xstrich/50-cwert; context.moveTo(x,300-ystrich*50); y2strich=awert*((xstrich+xplus)/50*(xstrich+xplus)/50)-bwert*(xstrich+xplus)/50-cwert; context.lineTo(x+xplus,300-y2strich*50); } context.stroke(); context.closePath(); exit();}

a b c


Autor: H.Sporenberg

JavaScript - EinführungCanvas mit dem InternetExplorer 8

Autor: H.Sporenberg

Der InternetExplorer 8 unterstützt das canvas-Element nicht. Es gibt aber eine Möglichkeit, die canvas-Methoden auch im InternetExplorer 8 zu benutzen. Dazu muss eine Javascript-Datei (excanvas.js) geladen werden. Dies geschieht mit der Befehlszeile:



Diese fügt man sinnvollerweise in den head ein.

Achtung: Einige <canvas>-Features wie radialGradient funktionieren nicht oder leicht anders als im Original.

JavaScript - EinführungCanvas mit dem InternetExplorer 8

Autor: H.Sporenberg

<html><head><title>ExplorerCanvas Example 1</title><script type="text/javascript">function draw(){ var canvas = document.getElementById('test'); if(canvas.getContext){

var context = canvas.getContext('2d');context.fillStyle = "rgb(255, 0, 255)";context.fillRect(0, 0, 100, 100);}}

</script><style type="text/css">canvas {border: 1px solid black;}</style></head>

<body onload="draw()"> <canvas id="test" width="400" height="300"></canvas></body></html>

Ein Beispiel

JavaScript - EinführungAnimation von sich drehenden Windmühlen

Autor: H.Sporenberg

Aufgabe: Es sollen mehrere Windmühlen an verschiedenen Stellen auf dem Canvas-Feld gezeichnet werden. Dazu muss die JavaScript-Funktion als Übergabeparameter die x- und y-Position besitzen, zusätzlich gibt noch eine dritte Variable an (cv), auf welcher Leinwand gezeichnet werden soll.

Damit sieht der Funktionsaufruf in JavaScript wie folgt aus:

function windmuehle(cv, xpos,ypos){……..}


Autor: H.Sporenberg

Der linke untere Punkt gibt die Position der Windmühle an (xpos und ypos). Er ist xpos-Pixel vom linken Rand und ypos-Pixel vom oberen Rand entfernt.cv.moveTo( xpos, ypos);Der Eckpunkt rechts unten ist auf gleicher Höhe 20 Pixel vom linken unteren Punkt entfernt.cv.lineTo(xpos + 20, ypos); Der Punkt rechts oben liegt 100 Pixel höher, also näher am oberen Rand, die Entfernung zum oberen Rand ist demnach 100 Pixel kleiner: cv.lineTo(xpos + 20, ypos - 100); Der linke obere Punkt hat wieder dieselbe Entfernung zum linken Rand wie beim ersten Punkt: cv.lineTo(xpos , ypos - 100); cv.fill();


Autor: H.Sporenberg

Die Flügel beginnen alle in einem Punkt, der "oben in der Mitte des Gebäudes" liegt, 10 Pixel von links und 10 Pixel von oben. Also immer:cv.moveTo(xpos + 10, ypos - 90);

Die Endpunkte der Flügel liegen jeweils 50 Pixel weiter rechts/links und unten/oben: cv.lineTo(xpos + 60, ypos - 140); cv.lineTo(xpos + 60, ypos - 40); cv.lineTo(xpos -40, ypos - 40); cv.lineTo(xpos -40, ypos - 140);


Autor: H.Sporenberg

Hier das gesamte Programm:

<html> <head> <title>Canvas Bilder stempeln</title><script type="text/javascript">

function windmuehle1 (cv, xpos, ypos){ cv.fillStyle = "rgb(0,0,200)"; cv.beginPath(); cv.moveTo( xpos, ypos); cv.lineTo( xpos+20, ypos); cv.lineTo( xpos+20, ypos-100); cv.lineTo(xpos, ypos-100); cv.fill(); cv.strokeStyle= "rgb(0,200,0)"; cv.lineWidth=2; cv.beginPath(); cv.moveTo( xpos+10, ypos-90); cv.lineTo( xpos+10+50, ypos-90+50); cv.moveTo( xpos+10, ypos-90); cv.lineTo( xpos+10+50, ypos-90-50); cv.moveTo( xpos+10, ypos-90); cv.lineTo( xpos+10-50, ypos-90+50);

cv.moveTo( xpos+10, ypos-90);cv.lineTo( xpos+10-50, ypos-90-50);cv.stroke();cv.lineWidth=1; }

function zeichne(){ var canvas2 = document.getElementById('Canvas2'); if (canvas2.getContext){ var bild2 = canvas2.getContext('2d'); windmuehle1(bild2,50, 200); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head>

<body onload="zeichne();"> <canvas id="Canvas2" width="450" height="350"> Ihr Browser kann kein Canvas! </canvas></body></html>


Autor: H.Sporenberg

Ein anderer Aufruf von zeichne() - 2 Windmühlenfunction zeichne(){ var canvas2 = document.getElementById('Canvas2'); if (canvas2.getContext){ var bild2 = canvas2.getContext('2d'); windmuehle1(bild2,50, 200); windmuehle1(bild2,200, 300); } }


Autor: H.Sporenberg

Als nächstes soll die Windmühlenfunktion erweitert werden. Zusätzlich soll die Größe, die Farbe des Mühlenkörpers und der Windmühlenflügel beim Aufruf individuell angegeben werden können. Damit lautet der Funktionskopf jetzt:

function windmuehle2(cv, xpos, ypos, hoehe, wandfarbe, fluegelfarbe){….}


Autor: H.Sporenberg

<html> <head> <title>Canvas Bilder stempeln</title><script type="text/javascript"> function windmuehle2 (cv, xpos, ypos, hoehe, wandfarbe, fluegelfarbe){ cv.save() cv.fillStyle = wandfarbe; var d = hoehe/10; cv.beginPath(); cv.moveTo( xpos, ypos); cv.lineTo( xpos+2*d, ypos); cv.lineTo( xpos+2*d, ypos-hoehe); cv.lineTo(xpos, ypos-hoehe); cv.fill();

cv.strokeStyle= fluegelfarbe; cv.lineWidth=2; cv.beginPath(); cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d+5*d, ypos-hoehe+d+5*d); cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d+5*d, ypos-hoehe+d-5*d); cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d-5*d, ypos-hoehe+d+5*d); cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d-5*d, ypos-hoehe+d-5*d); cv.stroke(); cv.restore() }


Autor: H.Sporenberg

function zeichne(){var canvas2 = document.getElementById('Canvas2'); if (canvas2.getContext){ var bild2 = canvas2.getContext('2d'); windmuehle2(bild2,200, 220,110, "green","yellow"); windmuehle2(bild2,40, 120,70, "blue","red"); } } </script><style type="text/css"> canvas { border: 1px solid black; }</style></head>

<body onload="zeichne();"> <canvas id="Canvas2" width="450" height="350"> Ihr Browser kann kein Canvas! </canvas></body>


Autor: H.Sporenberg

Eine Animation besteht aus aufeinanderfolgenden Bildern. Um diese zu erzeugen, muss die Funktion zeichne() wiederholt aufgerufen werden, und zwar muss dazu die Lage der Windmühlenflügel jedes Mal verändert werden. Um dies zu erreichen wird im Funktionskopf eine zusätzliche Variable winkel eingefügt.Das wiederholte Aufrufen der Funktion geschieht mit folgendem Befehl im body-Tag:<body onload="setInterval('zeichne()',20);"> Mit Hilfe dieses Befehls wird die Funktion zeichne() alle 20-Millisekunden aufgerufen.

Die eigentliche Animation


Autor: H.Sporenberg

Die Funktion zeichne()


function zeichne(){ var canvas2 = document.getElementById('Canvas2'); if (canvas2.getContext){ var bild2 = canvas2.getContext('2d'); bild2.fillStyle="white"; bild2.fillRect(0,0,canvas2.width, canvas2.height); winkel1 = winkel1 + 0.02; windmuehle2(bild2,50, 120,70,winkel1, "blue","red");

winkel2 = winkel2 + 0.04; windmuehle2(bild2,150, 120,70,winkel2, "orange","blue");

winkel3 = winkel3 + 0.06; windmuehle2(bild2,250, 120,70,winkel3, "black","red");} }

Bildschirm wird gelöscht

1.Windmühle – der Winkel wird um 0.02 beim nächsten Aufruf erhöht




Autor: H.Sporenberg

Die Funktion windmuehle2(….)


function windmuehle2 (cv, xpos, ypos, hoehe, winkel, wandfarbe, fluegelfarbe){

cv.save(); cv.fillStyle = wandfarbe; //"rgb(0,0,200)"; var d = hoehe/10; cv.beginPath(); cv.moveTo( xpos, ypos); cv.lineTo( xpos+2*d, ypos); cv.lineTo( xpos+2*d, ypos-hoehe); cv.lineTo(xpos, ypos-hoehe); cv.fill(); cv.strokeStyle= fluegelfarbe; //"rgb(0,200,0)"; if (fluegelfarbe == "white") cv.lineWidth=4; else cv.lineWidth=2; dy = 7*d*Math.sin(winkel); dx = 7*d*Math.cos(winkel);

cv.beginPath(); cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d+dx, ypos-hoehe+d-dy); cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d-dy, ypos-hoehe+d-dx) ; cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d-dx, ypos-hoehe+d+dy); cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d+dy, ypos-hoehe+d+dx); cv.stroke(); cv.restore() }

Punkt auf dem Kreis

für das Flügelende


Autor: H.Sporenberg

Die Animation – der komplette Programm-Code

<html><head> <title>Canvas Bilder stempeln</title><script type="text/javascript"> var winkel1 =0; var winkel2 =0; var winkel3 =0;


Autor: H.Sporenberg


function windmuehle2 (cv, xpos, ypos, hoehe, winkel, wandfarbe, fluegelfarbe){

cv.save(); cv.fillStyle = wandfarbe; //"rgb(0,0,200)"; var d = hoehe/10; cv.beginPath(); cv.moveTo( xpos, ypos); cv.lineTo( xpos+2*d, ypos); cv.lineTo( xpos+2*d, ypos-hoehe); cv.lineTo(xpos, ypos-hoehe); cv.fill(); cv.strokeStyle= fluegelfarbe; //"rgb(0,200,0)"; if (fluegelfarbe == "white") cv.lineWidth=4; else cv.lineWidth=2; dy = 7*d*Math.sin(winkel); dx = 7*d*Math.cos(winkel);

cv.beginPath(); cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d+dx, ypos-hoehe+d-dy); cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d-dy, ypos-hoehe+d-dx) ; cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d-dx, ypos-hoehe+d+dy); cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d+dy, ypos-hoehe+d+dx); cv.stroke(); cv.restore() }


Autor: H.Sporenberg

function zeichne(){ var canvas2 = document.getElementById('Canvas2'); if (canvas2.getContext){ var bild2 = canvas2.getContext('2d'); bild2.fillStyle="white"; bild2.fillRect(0,0,canvas2.width, canvas2.height); winkel1 = winkel1 + 0.02; windmuehle2(bild2,50, 120,70,winkel1, "blue","red");

winkel2 = winkel2 + 0.04; windmuehle2(bild2,150, 120,70,winkel2, "orange","blue");

winkel3 = winkel3 + 0.06; windmuehle2(bild2,250, 120,70,winkel3, "black","red");} }</script>



Autor: H.Sporenberg

<style type="text/css"> canvas { border: 1px solid black; } </style> </head>

<body onload="setInterval('zeichne()',20);"> <canvas id="Canvas2" width="450" height="350"> Ihr Browser kann kein Canvas! </canvas> </body></html>


JavaScript - EinführungBezier-Kurven

Autor: H.Sporenberg

function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); if(canvas.getContext){// Bezier curves example context.beginPath(); context.moveTo(75,40); context.fillStyle="#ff0000"; context.lineWidth=„8“; context.bezierCurveTo(75,37,70,25,50,25); context.bezierCurveTo(20,25,20,62.5,20,62.5); context.bezierCurveTo(20,80,40,102,75,120); context.bezierCurveTo(110,102,130,80,130,62.5); context.bezierCurveTo(130,62.5,130,25,100,25); context.bezierCurveTo(85,25,75,37,75,40); context.fill(); context.stroke(); } }

Das Herz

JavaScript - EinführungHausarbeit – Diff-Kurs 9 Schuljahr 2011/12 – 1. Halbjahr

Autor: H.Sporenberg

1.Aufgabe: Stelle mit Hilfe von HTML5 und dem <canvas>-Tag die Bundestagswahlergebnisse von 2005 und 2009 in einem Säulendiagramm dar. Dabei sollen die Säulen der beiden Wahlen einer Partei nebeneinander mit den entsprechenden Prozentzahlen erscheinen. Die Säulen sollen entsprechend den Parteien eine andere Farbe haben, die Säulen für die Wahl aus dem Jahr 2005 soll dabei durchscheinend sein (Farbangabe mit rgba).


Autor: H.Sporenberg

Die HTML-Datei muss in elektronischer Form vorliegen, der Code muss an den entscheidenden Stellen kommentiert und erläutert werden (in schriftlicher Form auf Papier).


Autor: H.Sporenberg

2.Aufgabe: Die Sitzverteilung für den Bundestag 2009 soll in einem Kreisdiagramm in HMTL5 mit dem canvas-Tag dargestellt werden. Dazu müssen die einzelnen Kreissegmente (Winkel) der jeweiligen Anzahl der Sitze berechnet werden und dann entsprechend in einen Kreisbogen umgesetzt werden. Zusätzlich ist eine Beschriftung (Partei plus Anzahl der Sitze) vorzunehmen. Die erforderlichen Daten entnimmt man der 1. Aufgabe.

Die HTML-Datei muss in elektronischer Form vorliegen, der Code muss an den entscheidenden Stellen kommentiert und erläutert werden (in schriftlicher Form auf Papier).


Autor: H.Sporenberg

3.Aufgabe: Die Gewinne und Verluste in Prozentpunkten, die die Parteien von der Bundestagswahl 2005 zur Bundestagswahl 2009 erfahren haben, sollen mit Hilfe eines dynamischen Säulendiagramms in HTML5 mit dem canvas-Tag dargestellt werden (dynamisch = die Säulen müssen animiert werden!). Die erforderlichen Daten für Verlust/Gewinn entnimmt man der 1. Aufgabe.Die HTML-Datei muss in elektronischer Form vorliegen, der Code muss an den entscheidenden Stellen kommentiert und erläutert werden (in schriftlicher Form auf Papier).


Autor: H.Sporenberg

Anlagen – Quellcode für die 1. Aufgabe

<html><head><title>Bundestagswahl - Facharbeit Schüler Diff 9</title><script type="application/javascript">function draw(){ var canvas = document.getElementById('testcanvas'); var ctx = canvas.getContext('2d'); if(canvas.getContext){ //Beschriftung der Säule ctx.font = "14pt Verdana"; ctx.fillStyle = "#222222"; // text color ctx.fillText("SPD", 65, 230); ctx.font = "10pt Verdana"; ctx.fillText("23,0%", 27, 80); ctx.fillText("34,2%", 85, 60);// Text ctx.font = "18pt Verdana"; ctx.fillStyle = "#000000"; ctx.fillText("Bundestagswahlen 2009", 50, 290);// Grundlinie für die Säule ctx.lineWidth="8"; ctx.strokeStyle = "#444444"; ctx.moveTo( 20, 205 ); ctx.lineTo(450, 205 ); ctx.stroke();


Autor: H.Sporenberg

//SPD 2009 ctx.fillStyle = "rgb(255, 0,0)"; ctx.rect(25,90, 50, 105); ctx.fill(); ctx.lineWidth = "4"; ctx.strokeStyle ="#343434"; ctx.stroke();//SPD 2005 ctx.fillStyle = "rgba(255,0,0,0.4)"; ctx.rect(85,70, 50, 125); //Rechteck neu zeichnen ctx.fill(); //Rechteck wird mit der Farbe (255,0,0,0.7) gefüllt ctx.lineWidth = "4"; ctx.strokeStyle = "#343434"; ctx.stroke(); }}</script></head><body onload="draw()"><canvas id="testcanvas" width="450" height="400"></canvas></body>



Autor: H.Sporenberg

<html><head><title>Kreisbogen - Schüler</title><style type="text/css">canvas{border: 10px ridge black; }</style><script type="application/javascript">function draw(){ var canvas = document.getElementById("testcanvas"); var context = canvas.getContext('2d'); if(canvas.getContext){ context.beginPath(); context.moveTo(300,200); context.lineTo(200,200); context.fillStyle = "#ff4500"; context.lineWidth=4; context.strokeStyle="#454545"; context.arc(200, 200, 100, 4/5*Math.PI, 2*Math.PI,true); context.fill(); context.stroke(); context.font = "16pt Verdana"; context.fillStyle = "#222222"; // text color context.fillText("SPD", 190, 340); context.font = "18pt Verdana"; context.fillText("146", 190, 255); }} </script></head>



Autor: H.Sporenberg

<body onload="draw()"><canvas id="testcanvas" width="400" height="400"></canvas></body></html>


JavaScript - EinführungEin Rechteck soll nach oben wachsend animiert werden

Autor: H.Sporenberg

Voraussetzungen:

Das Rechteck soll an der Stelle (50/200) im Koordinatenkreuz seine linke untere Ecke haben und dann nach oben wachsen.

Das Rechteck soll eine Höhe von 100 Pixel erreichen. Die Breite bleibt konstant bei 50 Pixel.

Realisierung:

Die y-Koordinate muss bei jedem Aufruf kleiner werden (ay = ay-1), im gleichen Maße muss aber die Länge des Rechtecks zunehmen (Laengey = Laengey+1). Ändert man bei ay die Abnahme auf 2 Pixel, muss dies auch bei der Länge des Rechtecks geschehen. Diese Abnahme könnte man auch als Variable gestalten – dieser Variablen muss natürlich ein Wert zugewiesen werden

ay=ay-Abnahme;

Laengey=Laengey+Abnahme;

27.11.2012


Autor: H.Sporenberg

function drawCanvas(){var canvas = document.getElementById('canvas');if(canvas.getContext){var context = canvas.getContext('2d');animate(context, 200, 0); } }

function animate(context, ay, Laengey){ setTimeout(function(){

// Alles neu zeichnen context.clearRect(0,0,800,400); context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(50,ay,50,Laengey);

context.lineWidth = "4"; context.strokeStyle = "#cdcdcd"; context.strokeRect(50,ay,50,Laengey);

ay=ay-1; Laengey=Laengey+1;

if(ay<100){ay=200;Laengey=0;}; self.animate(context, ay, Laengey); }, 40);}

27.11.2012

In diesem Beispiel beginnt die Animation des Rechtecks, sobald die Länge 100 erreicht wurde wieder von vorn.


Autor: H.Sporenberg







27.11.2012

Wenn das Rechteck, sobald es die Länge 100 erreicht, sein Aussehen nicht mehr verändern soll, kann man dieses auf 2 Arten erreichen.

1. In der if-Abfrage setzt man ay=100 und Laengey=100.

2. Man springt wieder zurück und beendet in der if-Abfrage mit return.


Autor: H.Sporenberg






if(ay<100){return}; self.animate(context, ay, Laengey); }, 40);}

27.11.2012

Wenn das Rechteck, sobald es die Länge 100 erreicht, sein Aussehen nicht mehr verändern soll, kann man dieses auf 2 Arten erreichen.

1. In der if-Abfrage setzt man ay=100 und Laengey=100.

2. Man springt wieder zurück und beendet in der if-Abfrage mit return.


Autor: H.Sporenberg


function animate(context, ay, Laengey){ setTimeout(function(){ context.clearRect(0,0,800,400); context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(50,ay,50,Laengey);

context.lineWidth = "4"; context.strokeStyle = "#cdcdcd"; context.strokeRect(50,ay,50,Laengey); context.lineWidth="10"; context.strokeStyle = "#444444"; context.moveTo( 20, 205 ); context.lineTo(450, 205 ); context.stroke(); ay=ay-1; Laengey=Laengey+1;


27.11.2012

Das Rechteck steht jetzt auf einer waagrechten Linie.


Autor: H.Sporenberg


27.11.2012

Die Säule wird jetzt beschriftet: Unter der Säule steht der Name der Partei, über der Säule die erreichte Prozentzahl.


Autor: H.Sporenberg

function animate(context, ay, Laengey){ setTimeout(function(){ context.clearRect(0,0,800,400); context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(50,ay,50,Laengey);

context.lineWidth = "4"; context.strokeStyle = "#cdcdcd"; context.strokeRect(50,ay,50,Laengey); context.lineWidth="10"; context.strokeStyle = "#444444"; context.moveTo( 20, 205 ); context.lineTo(450, 205 ); context.stroke(); context.font = "14pt Verdana"; context.fillStyle = "#ff0000"; // text color context.fillText("SPD", 55, 230); context.font = "10pt Verdana"; context.fillText("23,0%", 58, 83); ay=ay-1; Laengey=Laengey+1;


27.11.2012

Der Balken wird jetzt beschriftet:

Unter dem Rechteck steht der Name der Partei, über dem Rechteck die erreichte Prozentzahl

JavaScript - EinführungZwei Rechtecke sollen nach oben wachsend animiert werden

Autor: H.Sporenberg

Jetzt sollen die Säulen, die die erreichten Prozentzahlen der Parteien darstellen, animiert werden (mit Angabe der Partei und der entsprechenden Prozentzahl). Da die Säulen wegen der unterschiedlichen Prozentzahlen auch unterschiedlich hoch sind, müssen für das Anhalten der verschiedenen Säulen jeweils unterschiedliche if-Abfragen eingefügt werden. Das bedeutet auch, dass für die Länge der Säulen unterschiedliche Variable benutzt werden müssen. Hier sind es ay1 bzw. ay2 und Laenge1y bzw. Laenge2y. Die Abnahme kann dagegen für beide Säulen gleich bleiben. Insgesamt hat man jetzt 6 Übergabeparameter.

04.12.2012

(1) if(ay1<100){ay1=100;Laenge1y=100;};(2) if(ay2<50){ay2=50;Laenge2y=150;};Die Säule 1 wird gestoppt, wenn ay1<100 ist, d.h. diese Säule ist 200-100 = 100 Pixel hoch, die Säule 2 wird in der Animation gestoppt, wenn ay2<50 ist, d.h. die Säule ist 200-50 = 150 Pixel hoch.Anmerkung: Die Säulen beginnen bei y = 200 nach oben an zu wachsen.


Autor: H.Sporenberg

04.12.2012

function drawCanvas(){var canvas = document.getElementById('canvas');if(canvas.getContext){var context = canvas.getContext('2d');animate(context, 200,200, 0,0,1); } }

function animate(context, ay1,ay2,Laenge1y,Laenge2y,Abnahme){ setTimeout(function(){ // Alles neu zeichnen context.clearRect(0,0,800,400);

context.fillStyle = "rgb(0, 0, 255)"; // Farbe für die erste Säule context.fillRect(50,ay1,50,Laenge1y); // Zeichnen der ersten Säule context.lineWidth = "4"; // Dicke des Randes wird eingestellt context.strokeStyle = "#787878"; // Die Farbe des Randes wird eingestellt context.strokeRect(50,ay1,50,Laenge1y); // Der Rahmen wird gezeichnet

Die Übergabeparameter


Autor: H.Sporenberg

04.12.2012

context.fillStyle = "rgb(255, 0, 0 )"; // Farbe für die zweite Säule context.fillRect(150,ay2,50,Laenge2y); // Zeichnen der zweiten Säule context.lineWidth = "4"; // Dicke des Randes wird eingestellt context.strokeStyle = "#787878"; // Die Farbe des Randes wird eingestellt context.strokeRect(150,ay2,50,Laenge2y); // Der Rahmen wird gezeichnet

context.lineWidth="10"; // Die Dicke des waagerechten Strichs wird eingestellt context.strokeStyle = "#444444"; // Die Farbe des Strichs wird eingestellt context.moveTo( 20, 205 ); // Beginn des waagerechten Strichs context.lineTo(450, 205 ); // Ende des waagerechten Strichs context.stroke(); // Der Strich wird mit den Einstellungen gezeichnet


Autor: H.Sporenberg

04.12.2012

context.fillStyle = "#222222"; // Die Farbe der Schrift wird eingestellt context.font = "14pt Verdana"; // Die Schriftart und –größe werden eingestelltcontext.fillText("SPD", 55, 230); // Der Text wird ausgegebencontext.font = "10pt Verdana"; // Die Schriftart und –größe werden eingestelltcontext.fillText("23,0%", 58, 83); // Die Prozentzahl wird ausgegeben

context.font = "14pt Verdana"; // Dasselbe für die zweite Partei (CDU) context.fillText("CDU", 155, 230); context.font = "10pt Verdana"; context.fillText("32,0%", 158, 40);

ay1=ay1-Abnahme; // Die y-Koordinate des ersten Rechtecks wird verkleinert ay2=ay2-Abnahme; // Die y-Koordinate des zweiten Rechtecks wird verkleinert Laenge1y=Laenge1y+Abnahme; // Die Länge des ersten Rechtecks wird vergrößert Laenge2y=Laenge2y+Abnahme; // Die Länge des zweiten Rechtecks wird vergrößert


Autor: H.Sporenberg

04.12.2012

if(ay1<100){ay1=100;Laenge1y=100;}; // Die Höhe des ersten Rechtecks ist erreichtif(ay2<50){ay2=50;Laenge2y=150;}; // Die Höhe des zweiten Rechtecks ist erreichtself.animate(context, ay1,ay2, Laenge1y,Laenge2y,Abnahme); }, 20);}// Rekursiver Aufruf der Funktion animate nach 20 Millisekunden

Der Body

<body onload="drawCanvas()"><canvas id="canvas" width="800" height="400">Ihre Browser ist nicht HTML5 tauglich.</canvas></body>

JavaScript - EinführungEin Kreis soll wie eine Billardkugel reflektiert werden

Autor: H.Sporenberg

04.12.2012

<html> <head> <title>Kreis Reflexion</title> <script type="text/javascript"> var vx=4; var vy=4; var x1= 100; var y1=100; var radius=10;

function draw(){var canvas = document.getElementById('Canvas');

if (canvas.getContext){var context = canvas.getContext('2d');context.fillStyle="white";context.fillRect(0,0,canvas.width, canvas.height);

if ((x1 <radius)||(x1>canvas.width-radius)) vx=vx*(-1);if ((y1<radius)|| (y1>canvas.height-radius)) vy=vy*(-1);x1=x1+vx; y1=y1+vy;


Autor: H.Sporenberg

context.fillStyle="red";context.beginPath();context.moveTo( x1, y1);context.arc(x1,y1,radius,0,Math.PI*2,true);context.fill();} } </script> <style type="text/css"> canvas { border: 8px ridge black; } </style> </head>

<body onload="setInterval('draw()',10);"> <canvas id="Canvas" width="500" height="300">Ihr Browser kann kein Canvas! </canvas> </body></html>

04.12.2012


Autor: H.Sporenberg

04.12.2012

JavaScript - EinführungEin Quadrat soll an den Rändern reflektiert werden

Autor: H.Sporenberg

<html> <head> <title>Quadrat Reflexion</title> <script type="text/javascript"> var vx=2; var vy=2; var x1= 100; var y1=100; var Laenge=50;


if (canvas.getContext){var context = canvas.getContext('2d');

context.fillStyle="white";context.fillRect(0,0,canvas.width, canvas.height);

04.12.2012


Autor: H.Sporenberg

if ((x1<Laenge-50)||(x1>canvas.width-Laenge)) vx=vx*(-1);if ((y1<Laenge-50)|| (y1>canvas.height-Laenge)) vy=vy*(-1);x1=x1+vx; y1=y1+vy;

context.fillStyle="red";context.beginPath();context.moveTo( x1, y1);context.fillRect(x1,y1,Laenge,Laenge);} } </script> <style type="text/css"> canvas { border: 8px ridge black; } </style> </head> <body onload="setInterval('draw()',10);"> <canvas id="Canvas" width="500" height="300">Ihr Browser kann kein Canvas! </canvas> </body></html>

04.12.2012


Autor: H.Sporenberg

04.12.2012

JavaScript - EinführungZwei Kreise mit unterschiedlichem Radius werden an einem Billardtisch reflektiert

Autor: H.Sporenberg

04.12.2012

<html> <head> <title>Billard</title> <script type="text/javascript"> var vx1=2; var vy1=2; var vx2=-1; var vy2=-2;

var x1= 100; var y1=100; var x2= 400; var y2=200; var radius1=20;var radius2=30;



Autor: H.Sporenberg

if (canvas.getContext){var context = canvas.getContext('2d');context.fillStyle="white";context.fillRect(0,0,canvas.width, canvas.height);

if ((x1<radius1)||(x1>canvas.width-radius1)) vx1=vx1*(-1)if ((y1<radius1)||(y1>canvas.height-radius1)) vy1=vy1*(-1);

if ((x2<radius2)||(x2>canvas.width-radius2)) vx2=vx2*(-1)if ((y2<radius2)||(y2>canvas.height-radius2)) vy2=vy2*(-1);

x1=x1+vx1; y1=y1+vy1;x2=x2+vx2; y2=y2+vy2;

context.fillStyle="#FFC125";context.beginPath();context.moveTo( x1, y1);context.arc(x1,y1,radius1,0,Math.PI*2,true);context.fill();

04.12.2012


Autor: H.Sporenberg

context.fillStyle="#FF0000";context.beginPath();context.moveTo( x2, y2);context.arc(x2,y2,radius2,0,Math.PI*2,true);context.fill();} } </script> <style type="text/css"> canvas { border: 10px ridge blue; } </style>

</head>

<body onload="setInterval('draw()',10);"> <canvas id="Canvas" width="500" height="300"> Ihr Browser kann kein Canvas! </canvas> </body></html>

04.12.2012


Autor: H.Sporenberg

04.12.2012

JavaScript - EinführungRotation eines Kreises um einen beliebigen Punkt

Autor: H.Sporenberg

var WinkelGrad=60; // Hier wird die Größe des Winkels festgelegt, um den gedreht werden soll

function draw() {var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');

context.beginPath();context.fillStyle='#ffff00';context.arc(150,150,20,0,Math.PI*2,true);context.fill();context.closePath();

context.beginPath();context.fillStyle='#454545';context.arc(250,150,10,0,Math.PI*2,true);context.fill();context.closePath();

Dargestellt wird einmal der Kreis, der gedreht werden soll, dann der Mittelpunkt als grauer Kreis mit kleinerem Radius.


Autor: H.Sporenberg

context.save(); // Der momentane Zustand wird gespeichertcontext.translate(250,150); // Der Rotationsmittelpunkt wird verschobencontext.rotate(2*Math.PI/360*WinkelGrad); // Es wird um den angegebenen Winkel gedrehtcontext.translate(-250,-150); //Es wird wieder zurück verschoben

context.beginPath();context.fillStyle='#ff0000'; // Die Farbe des Kreises wird eingestellt context.arc(150,150,20,0,Math.PI*2,true); // Der Kreis wird vorbereitetcontext.fill(); // Der Kreis wird mit der eingestellten Farbe gefülltcontext.closePath();context.restore(); // Der Zustand vor der Rotation wird wieder hergestellt, damit alle //weiteren Elemente nicht gedreht werden.}


Autor: H.Sporenberg

JavaScript - EinführungWiederholte Rotation eines Kreises um einen beliebigen Punkt

Autor: H.Sporenberg

Jetzt soll das Programm so erweitert werden, dass der Kreis wiederholt um den gleichen Winkel um ein Zentrum gedreht werden soll. Dieser Winkel kann eingestellt werden durch die Zuweisung im Programm (keine Eingabe über den Monitor).

var WinkelGrad=0;

function draw() {var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');context.save();context.translate(250,150);context.rotate(2*Math.PI/360*WinkelGrad);context.translate(-250,-150);context.beginPath();context.fillStyle='#ff0000';context.arc(150,150,20,0,Math.PI*2,true);context.fill();context.closePath();context.restore();WinkelGrad=WinkelGrad+30;}

JavaScript - EinführungWiederholte Rotation eines Kreises um einen beliebigen Punkt

Autor: H.Sporenberg

var WinkelGrad=0;

function draw() {var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');context.save(); // Der momentane Zustand wird gespeichertcontext.translate(250,150); // Der Drehpunkt wird verschobencontext.rotate(2*Math.PI/360*WinkelGrad); // Es wird um den angegebenen Winkel gedrehtcontext.translate(-250,-150); // Der Drehpunkt wird wieder zurückgeschobencontext.beginPath();context.fillStyle='#ff0000'; // Die Farbe wird eingestellt (hier: rot)context.arc(150,150,20,0,Math.PI*2,true);context.fill();context.closePath();context.restore();WinkelGrad=WinkelGrad+30;}

Javascript Einfache Ausgabeanweisung Autor: H.Sporenberg JavaScript - Einführung.

Documents

Transcript of Javascript Einfache Ausgabeanweisung Autor: H.Sporenberg JavaScript - Einführung.