Javascript Standardbibliothek Schnellreferenz Ok, du willst eigene Javascript Anwendungen schreiben? Hier eine kleine Übersicht über alle Javascript-Funktionen. Diese Übersicht ist lediglich eine Übersetzung von w3schools.com, alle Beispiele setzen eine HTML-Datei voraus. Diese lässt sich einfach erstellen in dem man eine neue Text-Datei erstellt und deren Endung in.html abändert. Manche Beispiele sind auf englisch geschrieben, da diese direkt von der Webseite kommen und ich die Beispiele gerne aktuell halten möchte. Somit habe ich nicht alle Beispiele übersetzt! 1 Inhalt 2 Einführung... 3 2.1 HTML... 3 2.2 Javascript ist eine Scriptsprache... 3 2.3 HTML-Inhalte und Attribute ändern... 3 2.4 CSS-Styles ändern... 4 2.5 Überprüfen ob Eingaben stimmen... 4 2.6 ECMA-262... 5 3 Start... 5 3.1 <script> Tag... 5 3.2 Beispieldatei HTML... 6 3.3 Events... 6 3.4 Javascript Dateien... 6 4 Ausgabe... 6 4.1 HTML-Elemente manipulieren... 6 4.2 Konsole beschreiben... 7
4.3 Zeichnen mit HTML5... 7 5 Datentypen... 7 5.1 Zahlen... 8 5.2 Boolean... 8 5.3 Objekte... 8 5.4 Datum... 8 5.5 Strings... 8 5.6 Array... 9 5.7 Klassen... 9 6 Math-Object... 10 7 Fehlerbehandlung... 10 7.1 Fortgeschrittenes Javascript... 12 7.1.1 RegExp... 12 7.1.2 Hoisting... 12 7.1.3 Strict... 12 7.1.4 HTML DOM... 12 7.1.5 Browser BOM... 12 7.1.6 Events... 12 7.2 Bibliotheken... 13 7.2.1 jquery... 13 7.2.2 Weitere... 14 8 Quellen und Links... 14
2 Einführung 2.1 HTML Um Javascript verwenden zu können und um auch etwas sichtbares zu programmieren, brauchst du in jedem Fall das Wissen über HTML. Was ist HTML? HTML ist eine Beschreibungssprache. Damit kannst du Daten und Informationen beschreiben. Also werden mit HTML Webseiten beschrieben. Jeder Browser kennt alle Elemente von HTML. Was ist ein HTML-Element? Nehmen wir die Wörter, Coole Webseite. Wenn wir dem Browser sagen möchten, dass er das Wort Webseite in fetter Schrift darstellen soll, müssen wir ein HTML-Element benutzen. Fette Schrift heißt in englisch übersetzt bold, und das passende Element heißt ganz einfach b. Es gibt etliche andere Elemente. Die wichtigsten wirst du nach und nach lernen, jetzt solltest du hauptsächlich wissen, dass es diese gibt und wie man diese verwendet. Wie benutzt man HTML-Elemente? In unserem Beispieltext: Coole Webseite wollen wir das Wort Webseite in Fett darstellen. Also benutzen wir das bold bzw. b-element folgendermaßen: Coole <b>webseite</b> Speicherst du den Text in einer Datei ab und lädst diese im Browser wird dir das Wort Webseite in fetter Schrift gezeigt. Dieses Wissen sollte erstmal reichen. Um Javascript zu verwenden musst du verstehen, dass es HTML-Elemente gibt und wissen wie man diese benutzt. 2.2 Javascript ist eine Scriptsprache Skriptsprachen sind leichtgewichtige Programmiersprachen, und einfach zu benutzen. Javascript Programme können in jede HTML-Seite eingefügt werden und können in jedem Browser ausgeführt werden. Javascript ist sehr leicht zu erlernen. 2.3 HTML-Inhalte und Attribute ändern HTML DOM ist der offizielle Standard für den Zugriff auf HTML-Daten. Üblicherweise wird mit Javascript der DOM in einer Webseite geändert. Beispiel:
x = document.getelementbyid("demo"); //Finde das HTML Element mit der id="demo" x.innerhtml = "Hello JavaScript"; //Inhalt des elements ändern document.getelementbyid() wird SEHR HÄUFIG verwendet! Man kann auch HTML Elemente löschen Neue Elemente erstellen Elemente kopieren und mehr 2.4 CSS-Styles ändern Auch der Style eines oder mehrerer Elemente lässt sich mit Javascript ändern: x = document.getelementbyid("demo"); //Finde das HTML element mit der id="demo" x.style.fontsize = "25px"; //Schriftgröße ändern x.style.color = "#ff0000"; //Farbe ändern 2.5 Überprüfen ob Eingaben stimmen Meistens wird Javascript für die Überprüfung von Eingaben verwendet, dies wird mit dem Befehl erledigt, einfach in eine leer HTML-Datei einfügen: <!DOCTYPE html> <html> <body> <h1>mein JavaScript</h1> <p>bitte Nummer eingeben:.</p> <input id="numb" type="text"> <button type="button" onclick="myfunction()">klick Mich!</button> <p id="demo"></p> <script> function myfunction() //Wert vom Eingabefeld mit der id="numb" bekommen var val = document.getelementbyid("numb").value; //Element mit der id="demo" bekommen var elem = document.getelementbyid("demo");
//Wert ist Leerzeichen oder keine Zahl if (val == "" isnan(val)) // Keine Zahl anzeigen elem.innerhtml = "Keine Zahl"; else //Zeige "Input OK" Im Element elem.innerhtml = "Input OK"; </script> </body> </html> 2.6 ECMA-262 Java und Javscript haben NICHTS miteinander zutun und sind komplett verschiedene Sprachen und Technologien!!! ECMA-262 ist der offizielle Name von Javascript. Javascript wurde von Brendan Eich erfunden und ist das erste Mal 1995 zum Einsatz gekommen! 3 Start 3.1 <script> Tag In HTML muss man den Javascriptcode in das <script>-element packen. Dabei können script- Elemente im body- und im head-element platziert werden. Beispiel: <script> function myfunction() document.getelementbyid("demo").innerhtml="meine Funktion"; </script> JavaScript Du brauchst den Code nicht verstehen. Was du wissen musstm, das dein Programm nur zwischen den <script> und </script> ausgeführt wird.
3.2 Beispieldatei HTML <!DOCTYPE html> <html> <head> </head> <body> </body> </html> 3.3 Events Javascript wird hauptsächlich benutzt um auf Events aus dem Browser zu reagieren, wenn du eine Funktion in Javascript schreibst, kannst du diese zu einem bestimmten Event ausführen. 3.4 Javascript Dateien Damit deine HTML-Dateien übersichtlich bleiben, kannst du Javascript in.js-dateien abspeichern. Dies kannst du mit dem script-element innerhalb des body-elements benutzen. Beispiel: <!DOCTYPE html> <html> <body> <script src="myscript.js"></script> </body> </html> 4 Ausgabe 4.1 HTML-Elemente manipulieren Um ein HTML-Element zu verändern, kann man die document.getelementbyid(id)-methode verwenden. Dafür muss das gesuchte Element über das angegebene Attribut mit dem passenden Wert verfügen. Dann kann man die Untervariable innerhtml über den Punktoperator setzen. Beispiel: <h1>meine erste Seite</h1> <p id="demo">mein erster Abschnitt</p>
<script> document.getelementbyid("demo").innerhtml = "Abschnitt geändert"; </script> Zuerst wird nach dem Element mit der id= demo gesucht. Danach wird die Variable innerhtml gesetzt. Das HTML-Dokument ist nun geändert worden. 4.2 Konsole beschreiben Um Testwerte auszugeben kann man auf die Textkonsole schreiben. Dies geschieht mit der Methode console.log(); <script> a = 5; b = 6; c = a + b; console.log(c); </script> 4.3 Zeichnen mit HTML5 FÜR FORTGESCHRITTENE: Eine Neuheit von HTML5 ist das Canvas-Element. Erstellt man ein Canvas-Element auf der HTML-Seite kann man mit Javascript darauf rummalen. Dies erlaubt die Programmierung von Spielen und Grafikanwendungen. Einen Canvas definiert man so: <canvas id="mycanvas" width="200" height="100"></canvas> Um mit Javascript auf das Canvas-Objekt zu zeichnen nimmt man folgendes Beispiel: <script> var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); ctx.fillstyle = "#FF0000"; ctx.fillrect(0,0,150,75); </script> 5 Datentypen Alles in Javascript ist ein Objekt. Auch Variablen sind Objekte, diese können mit var definiert werden. Welcher Datentyp dahinter steckt, wird von dem Wert bestimmt, welcher der Variable zugewiesen wird. Das Typsystem ist dynamisch.
5.1 Zahlen Zahlen werden folgendermaßen verwendet und zugewiesen: var x2=34; Kommazahlen werden so definiert: var x1=34.00; Extrem große oder extrem kleine Zahlen können mit der Exponential-Notation beschrieben werden: var y=123e5; // 12300000 var z=123e-5; // 0.00123 5.2 Boolean Man kann true und false verwenden in einer Variable verwenden und setzen. 5.3 Objekte Ein Objekt wird foglendermaßen definiert: var person=firstname:"john", lastname:"doe", id:5566; Danach kann mit dem Punktoperator auf die Variablen und Methoden zugriffen werden. var name=person.lastname; person.firstname = Robert ; Methoden definiert man über Prototypen 5.4 Datum Mit new Date(); kann man sich die aktuelle Zeit holen. var today = new Date(); Das Date Objekt hat mehrere Methoden um bestimmte Daten und Zeiten zu setzen und zurückzugeben. 5.5 Strings Ein String kann mit einer Variable definiert und verwendet werden. var carname="volvo XC60"; Man kann sich die Länge eine Strings zurückgeben lassen: var txt="abcdefghijklmnopqrstuvwxyz"; var anzahl = txt.length; Man kann in einem String suchen und sich die Position (Index) ausgeben lassen, an der das gesuchte gefunden wurde:
var str="hello world, welcome to the universe."; var n=str.indexof("welcome"); Wenn das gesuchte nicht gefunden wurde, wird -1 zurückgegeben. Die replace-methode ersetzt einen String durch einen anderen. str="bitte besuche: Microsoft!" var n=str.replace("microsoft","lerneprogrammieren"); Mit split() bekommt man ein Array aus einem String. txt="a,b,c,d,e" // String txt.split(","); // Split on commas Der Aufruf von split-wird bewirken, dass ein Array mit den einzelnen Buchstaben erstellt wird. Um Sonderzeichen in einem String zu verwenden, benutzt man den Backslash, um ein zu verwenden würde folgendes zu einem Fehler führen: var name = Er sagt: Hallo Freunde, ; Dafür muss man den Backslash benutzen: var name = Er sagt: \ Hallo Freunde, ; Der String hat noch weitere Methoden, diese sind in der Objektreferenz nachzulesen. 5.6 Array Arrays können mit einem Index und dem [] gesetzt und verwendet werden. var mycars = new Array(); mycars[0] = "Audi"; mycars[1] = "Volvo"; mycars[2] = "BMW"; 5.7 Klassen Um wie in Objektorientierten Sprachen eine Art Klasse zu erstellen, definiert man in Javascript lediglich einen Konstruktor: function person(firstname, lastname, age, eyecolor) this.firstname = firstname; this.lastname = lastname; this.age = age; this.eyecolor = eyecolor; Dieser kann dann aufgerufen werden: var deinemutter = new person("marta", "Doe", 50, "blau");
Auch Funktionen/Methoden können so einem neuen Objekt/Klasse gegeben werden function person(firstname, lastname, age, eyecolor) this.firstname = firstname; this.lastname = lastname; this.age = age; this.eyecolor = eyecolor; this.changename = changename; function changename(name) this.lastname = name; Danach lässt sich folgendes aufrufen: var deinemutter = new person("marta", "Doe", 50, "blau"); deinemutter.changename( Anna ); 6 Math-Object Das Mathe-Objekt liefert dir nützliche mathematische Funktionen und Zahlen var x=math.pi; Gibt die Zahl PI aus var y=math.sqrt(16); Berechnet das Quadrat von 16. Das Mathe-Objekt hat noch weitere nützliche Funktionen und Zahlen, nachzuschlagen in der Objektreferenz. 7 Fehlerbehandlung Wenn Fehler passieren, stürzt dein Programm ab. Du kennst das: Du arbeitest seit Stunden an etwas in deinem Lieblingsprogramm, hast seit 2 Stunden nicht gespeichert und auf einmal BOOM. Dein Programm ist abgestürzt und alle Änderungen sind weg! Meistens gibt es noch eine Möglichkeit, wenigstens ein paar Daten zu retten.
Dies funktioniert mit Exception-Handling. Man nutzt es so: try //Hier läuft dein Programm ab, und stürzt ganz fürchterlich ab. catch(err) //Hier wird dein Programm landen, somit kannst du wenigstens ein paar Daten speichern und deinen Fehlerbericht zusammen bauen, danach zeigst du dem Nutzer die schreckliche Meldung. Die Variable err im catch-block beinhaltet Informationen über die Art des Fehlers. Somit kannst du die Informationen in deinem Fehlerbericht nutzen. Dies wird dir bei der Fehlersuche helfen!!! Es kann sein, dass du selbst mal einen Fehler produzieren musst, wenn zum Beispiel dein Programm durch einen Programmierfehler zwar noch läuft, aber nichts sinnvolles mehr produziert. Dies machst du mit dem throw-befehl: throw "Keine Datei ausgewählt!!! Idiot!";
7.1 Fortgeschrittenes Javascript Alle Funktionen von Javascript zu erklären ist hier nicht sinnvoll, allerdings gibt es noch weitere Themen die du dir angucken solltest, wenn du nicht weißt wie du etwas in Javascript realisieren sollst. Die meisten Sachen wirst du momentan noch nicht brauchen. 7.1.1 RegExp Reguläre Ausdrücke brauchst du um komplizierte Überprüfungen auf Strings zu machen, z.b. ist der String eine IP-Adresse? 7.1.2 Hoisting In Javascript kann man Variablen benutzen bevor sie definiert sind, da der Code vorher einmal gelesen wird. 7.1.3 Strict Wird verwendet um sicheren Quellcode zu schreiben 7.1.4 HTML DOM Eine Webseite wird über HTML dargestellt, über das Document Object Model, lässt sich direkt mit den HTML-Elementen arbeiten. Dabei gibt es Methoden, das Document, Elemente, HTML, CSS, Events, Navigation, Nodes und Nodelisten. 7.1.5 Browser BOM Um mit Javascript auf die Funktionen des Browser zuzugreifen, gibt es das Browser Object Model. Die Funktionen unterteilen sich in: Window, Screen, Location, History, Navigator, Popup Alert, Timing und Cookies 7.1.6 Events Event verwendet man foglendermaßen: <img id="bild" onclick="changeimage()" src="pic_bulboff.gif" width="100" height="180"> Gibt man im Element das Event an und weißt diesem eine Funktion zu, wird diese beim Event aufgerufen.
onclick="changeimage()" Events sind alle Ereignisse auf die Javascript reagieren kann, diese gehören eigentlich in den HTML DOM. Hier eine Übersicht der Events: Mausevents o onclick o ondblclick o onmousedown o onmousemove o onmouseover o onmouseout o onmouseup Tastaturevents o onkeydown o onkeypress o onkeyup Bilder (Frame/Object) o onabort o onerror o onload FormularEvents o onblur o onchange o onfocus o onreset o onselect o onsubmit 7.2 Bibliotheken 7.2.1 jquery jquery ist die beliebteste Bibliothek im Internet. Mit jquery lassen sich Webanwendungen schreiben. Bestandteile der Bibliothek sind:
Weboberflächen mit jqueryui Mobile Anwendungen mit jquerymobile 7.2.2 Weitere Weitere Bibliotheken sind: Prototype MooTools YUI Ext JS Dojo script.aculo.us UIZE 8 Quellen und Links w3cschools.com