 Ja, okay. Ich würde sagen, dann fangen wir langsam an. Das kommt zwar immer noch so ein paar Leute nach, aber der Anfang ist ja sowieso nur ein bisschen Einführung. Okay, hallo, herzlich willkommen, JavaScript im Jahr 2011. Mir wird die Ehre zuteil, der erste Vortrag überhaupt dieser Veranstaltung zu sein, was den Nachteil mit sich führt, dass wenn man anreißt und sich denkt, ja, die Folien klickst du auf der Veranstaltung noch schnell zusammen, ist dann ein bisschen doof. Von daher ist es vielleicht ein bisschen, na eigentlich sollte alles drin sein, wenn ihr Fragen habt, jederzeit zwischen Reinfragen. Es baut so ein bisschen aufeinander auf, nicht so wahnsinnig. Genau, okay. Ich sage mal erstmal was zu mir. Ich bin SkyTail, Tim. Ich komme aus dem Raumzeitlabor in Mannheim. Ich bin angestellter Web-Entwickler bei der Firma Digital Information Systeme in Mannheim. An der Stelle muss ich unbedingt einbauen, dass wir noch Leute suchen. Das heißt, wenn ihr in einem JavaScript-Vortrag sitzt, dann habt ihr vielleicht tatsächlich auch was mit Web-Entwicklung zu tun. Und wenn ihr euch vorstellen könntet, in einer echt coolen Firma zu arbeiten, ich werde dafür nicht bezahlt, das zu sagen. Das ist echt, habe ich nur nicht erlebt. Dann kommt auf mich zu, sagt mir Bescheid, schreibt die Leute an. Genau, auf der GPN bastel ich auch noch an so einer dezentralen Twitter-Alternative, aus one-to-many. Erzähl mal was zu JavaScript. JavaScript gibt es seit 1996, ist von Netscape erfunden worden. Ihr erinnert euch vielleicht noch daran, der Netscape-Navigator hieß damals noch Live-Script, die ganze Geschichte. Dann kamen die Marketing-Fuzis und haben gesagt, Live-Script können wir so nicht verkaufen. Guck mal, dieses Java ist doch momentan ganz in, lasst es uns doch JavaScript nennen. Demzufolge heißt das Ding jetzt JavaScript. Die Syntax ist so ein bisschen ähnlich. Das ist alles so C-Style, aber ansonsten sind die eigentlich kaum miteinander verwandt. Das sind auch immer die schönen Verwechslungen, wenn jemand kommt und sagt, da klar kann ich Java, ich habe JavaScript die ganze Zeit gemacht. Ja, ist nicht so, ist aber andersrum auch nicht so. Wer Java kann, kann auch nicht zwingen, JavaScript. Genau, und was dann entstand aus der ganzen Geschichte, war dieses DHTML, dynamisches HTML. Ich habe noch Bücher zu Hause, wo das irgendwie das Thema war. Da gab es dann so Lea, mit denen du irgendwie Sachen auf Webseiten einbinden konntest und du konntest, erinnert sich noch an animierte Title-Tags. Ja, wo ist es schön, irgendwo in der Brause, da gab es noch keine Tubs. Das heißt, es hat sich im kompletten Fenster durchanimiert. Feenstaub am Mauscursor oder irgendwelche Hunde, die hinterher in lauter Zeug ist damit gemacht worden. Genau, keiner wusste so richtig, wie es funktioniert. Und was auch daran lag, dass es keine so wahnsinnig tolle Spezifikation gab, wurde erst nachher dann spezifiziert, so inordentlich von einem wirklichen Gremium, der ECMA, inzwischen ist quasi JavaScript basiert auf ECMA-Script, wo die ganzen Formalien drin definiert sind. Die Leute haben einfach Zeug zusammengefrickelt, und zwar sowohl die Entwickler als auch die Browserhersteller. Deswegen sieht das heute auch so aus, dass jeder Browser so ein bisschen anderen Dialekt von JavaScript versteht. Jeder hat irgendwie globale Variablen genommen. Kein Mensch hat die Objektorientierung in JavaScript kapiert, weil die auch echt abgefahren ist. Und überall steht irgendwie so onClick, onLoad und sonst irgendwas drin. Da kommt man dann noch dazu, warum das irgendwie hässlich ist. Auf jeden Fall momentan sieht die Sache so aus, es ist alles ein großes JavaScript-Copy-and-Paste-Gewimmel, und keiner kapiert es eigentlich so richtig, was er da aus irgendwelchen Tutorials von 2005 aus kopiert. Und das ist eigentlich das Problem dabei. Weil diese Tutorials, wenn man irgendwie x-beliebige Sachen guckt, dann findet man halt wirklich Code, wie man es sozusagen damals gemacht hat. Und heute haben die Leute sich halt Gedanken drüber gemacht, wie man JavaScript zu einer wirklich gescheiten Sprache machen kann. Und das findet sich in den alten Tutorials nicht. Und deswegen ist so ein Vortrag total wichtig, damit die Leute mal lernen, wie funktioniert diese JavaScript eigentlich, was kann man damit machen, wie geht das inordentlich. Die ganze Sache, das ist heute noch so. Das heißt, die Leute kopieren immer noch denselben alten Code, die Leute machen immer noch dieselben Fehler wie vorher, und irgendwie die Tutorials, wie man es wirklich machen sollte, sind bei Google irgendwie auf Seite 18 oder sowas. Genau, also machen wir es dagegen. Ich fange mal ein bisschen an, erkläre einfach ganz grob die Sprache. Jetzt sitzen vielleicht hier ein paar Leute drin, die sich denken, JavaScript, wieso habe ich doch schon was mitgemacht, du brauchst mir jetzt keine Grundlagen erklären. Ich wette mit euch, dass die meisten mindestens eine neue Sache lernen werden, wenn wir jetzt hier die Datentypen durchgehen. Also generell gilt, es gibt ja so haufenweise Sprache, bei denen es heißt, alles ist ein Objekt. JavaScript heißt es das prinzipiell auch, aber stimmt eigentlich nicht. Also ich sage lieber, wirklich ziemlich viel ist ein Objekt, aber nicht alles. Die Sprache ist dynamisch typisiert, ganz im Gegensatz zu Java also. Das heißt, ich kann eine Variable spontan umwandeln von einer Zahl in einen String und wieder zurück, was auch immer gerade gebraucht wird. Die Typen basieren auf dem sogenannten Ducktyping. Ducktyping hat mit Ducktape nichts zu tun, sondern kommt von so einem Ausspruch von wegen, wenn es aussieht wie eine Ente, waschelt wie eine Ente und quackt wie eine Ente, dann ist es eine Ente. Auf die Programmierspaare übertragen bedeutet das, du machst nicht einfach irgendwelche Regeln, wie sich Objekte miteinander unterhalten, machst du nicht an deren Namen fest. Von wegen, das ist ein Objekt vom Typ so und so, und das ist ein Objekt vom Typ so und so, sondern du schaust einfach, was weiß ich, wenn du eine Methode FU aufrufen willst, dann verlässt du dich halt nicht drauf, dass die und die Klasse die Methode FU besitzt, sondern du schaust nach, besitzt hier eine Methode FU und wenn ja, dann kann ich die Methode FU aufrufen und mich darauf verlassen, dass sie so in etwa das machen wird, was ich mir vorstelle. So, genau, in den Beispielen, die jetzt gleich kommen, gibt es den Type-Off-Operator, der gibt es jetzt dringend zurück, von welchem Typ die Variable ist, wie man damit untersucht. Fangen wir mal einfach an mit den Zahlen. Es gibt keine Unterscheidung zwischen integer und float. Es gibt den JavaScript aber auch keine so abgefahrene Sachen wie irgendwie komplexe Zahlen oder Brüche oder sonst irgendwas. Das ist hier eigentlich ziemlich straightforward. Wenn ich sage Type-Off 3, dann kommt zurück an String mit dem Inhalt Number und ich kann, genau, ziemlich alles ist ein Objekt. Das heißt, ich kann da auch eine Methode darauf aufrufen. Ich kann also hier minus 3,141, 2 stringen und dann konvertiert er mir das in den Stringen und ich kann auch einfach irgendwie 5e3 schreiben und dann ist das wissenschaftliche Schreibweise 5 mal 10 auf 3 ist 5.000. So weit, so einfach. So, stringen. Die Strings in JavaScript sind Unicode Strings. Das wird zum Beispiel Python-Programmierer total begeistern, dass irgendwie sowas alt ist, wie JavaScript tatsächlich Unicode Strings kann, ohne dass man irgendwie Großen mit rumfummeln muss. Die Strings sind immutable. Das heißt, sie sind nicht veränderbar. Das heißt, wenn ich irgendwie einen String ändern will, dann mache ich mir einen neuen String, der auf dem Alpen basiert und hängt irgendwie was an oder so. Und Strings werden quasi in Double Quotes oder in Single Quotes eingefasst und das macht auch keinen Unterschied. Also wer zum Beispiel PHP kennt, der weiß, in Double Quotes gibt es irgendwie Variablen-Expansionen und so. Das gibt es in JavaScript nicht. Das ist alles dasselbe. Der einzige Unterschied bedeutet, ist halt, dass du in einem String mit Double Quotes musst du Single Quotes nicht escapen und umgekehrt. Es gibt generell überhaupt keine Variablen-Expansionen in Strings in JavaScript und es gibt ein paar Backslash Escapes. Das heißt, ich kann irgendwie Backslash N, das ist ein New Line, Backslash U0041 ist das Unicode Zeichen mit dem Excode 4.1. Genau. Wenn ich also sage Type of Fu, dann ist es ein String. Wenn ich sage Type of, Type of 3, dann ist es ein String. Warum? Weil Type of ja einen String zurück gibt und wenn ich Type of auf das Rückgabe von einem Type of mal, dann ist es ein String. Wenn ich vergleiche, ob A gleich Backslash U0041 ist, dann ist das true, weil das genau dieses Unicode Zeichen ist. Und wenn ich hier ein String habe, Möb und ein Herzen hinten dran und davon die Längeabfrage, dann sind das fünf Zeichen, nicht fünf Beiz. Wie gesagt, Fragen jederzeit, Anmerkungen, sonst was. Datentypen, es gibt Null. Null ist so der Standardwert für unbekannt und in PHP gibt es zum Beispiel Null auch für undefinierte Variablen. Wenn du fragst, was ist der Wert von einer undefinierten Variablen, dann kommt Null zurück. In JavaScript gibt es dafür nochmal extra einen anderen Typ, kommen wir gleich. Null ist jetzt so eine ganz komische Sache. Das ist ein Objekt, aber es hat irgendwie keine Properties. Du kannst nicht wirklich was damit tun, aber der Type of ist Object. Und das ist genau zum Beispiel eine dieser Sachen, weshalb JavaScript so unangenehm ist teilweise, um damit zu arbeiten dass du irgendwie Frameworks dafür benutzen willst, die dir ein bisschen Arbeit abnehmen, weil du halt nicht einfach sagen kannst, okay, ist das vom Typ Null oder so, sondern es kommt dann Objekt zurück. Du musst dann noch mal extra prüfen, ob das jetzt identisch ist mit Null, bevor du dich darauf verlassen kannst, dass es wirklich Null ist oder ein Objekt oder was auch immer. Genau, das heißt, ich kann zum Beispiel auch nicht Two-String drauf aufrufen, weil es ist zwar ein Objekt, aber es hat keine Two-String-Methode. Das sind tulsche Werte, True oder False. Ziemlich einfach, Type of True ist Bullien und True.Two-String ist True. Okay, da muss man hier wirklich viel zu sagen. Und es gibt den Datentyp und Defined. Das heißt, aber ich denke nicht, ja? Ja, genau, das meinte ich. So, du warst das Nächstes. Du kannst da drauf zu... Jein, es gibt dieses schöne This, was man auch von anderen Programmen sprachen kennt. Das ist ein JavaScript tatsächlich total abgefahren, da kommen wir noch dazu. Ja? Das bar hängt an... Nee, das hängt... Also, es hängt an der Referenz. Also, die Variable sum ist in der Referenz auf die Funktion, die wir definiert haben. Und an dieser Funktion, die wir definiert haben, hängt das dann. Das heißt, wenn ich irgendeine andere Variable Blub machen würde und würde ihr den Wert sum zuweisen, dann wäre auch da dieses bar mit dran. Okay. Scoping. Scoping, das bedeutet also Variablen-Sichtbarkeit. Wo sind meine Variablen sichtbar? Das Scope in JavaScript basiert auf Funktionen. Die C-Programmierer zum Beispiel, die wissen, dass in C das Scoping auf diesen geschweiften Klammern basiert. Das heißt, wenn ich irgendwie innerhalb von der Vorschleife, die einen Körper hat mit geschweiften Klammern, wenn ich da dann eine Variable definiere, dann ist das nicht sichtbar. In JavaScript ist das anders. Da ist die Funktion der Scope-Container. Und auch nicht irgendwelche Objekte. Wenn ich eine Variable definiere, dann kann ich das entweder mit dem Schlüsselwort wahr vorne dran machen oder ohne. Wenn ich es mit wahr mache, dann habe ich sozusagen eine lokale Variable. Und wenn ich es ohne wahr mache, dann habe ich eine globale Variable. Global bedeutet im Prinzip nichts anderes, dass sie in dem Window-Objekt steht. Das heißt also, das Window-Objekt ist sozusagen das globale. Wenn ich irgendwelche globalen Variables definiere oder irgendwelche globalen Funktionen, dann sind das alles nur Keys auf dem Window-Objekt. Also wenn ich jetzt hier in der ersten Zeile x gleich 3 global definieren würde, dann ist das quasi identisch mit Window.x. So. Hier fällt einem schon mal auf, dass man was dazuschreiben muss, wenn man eine lokale Variable definieren muss, aber nichts dazuschreiben muss, wenn man eine globale Variable definiert. Das ist total hässlich. Das macht immer wieder interessante Überraschungen, wenn man tatsächlich doch Sachen irgendwie global definiert, die man eigentlich nicht wollte. Da gibt es die Möglichkeit, inzwischen je nach Browser- bzw. Laufzeit-Umgebung kannst du den Strict-Mode anschalten, damit du es nicht mehr zulässt. Strict-Mode erwähne ich nachher auch noch so kurz. Genau. Ich kann hier also x gleich 3 schreiben, ist global, ich kann y gleich 4 schreiben, das ist in dem Fall hier auch global, weil es im äußersten Scope definiert ist, also nicht innerhalb von der Funktion. Ich kann mir eine Funktion definieren, Foo, die kriegt einen Parameter a und definiert innen drin eine Variable z, die kriegen wir 9 und setzt dann y, um a erhöht und a mal 2 wird zurückgegeben. So, jetzt ruf ich Foo mit 15 auf, die gibt mir also 15 mal 2 zurück, kommt also 30 raus. Ich jetzt schau, in x steht immer noch 3, haben wir nicht angefasst, in y steht dagegen 19, weil wir hier y plus gleich a, das heißt es wurde 15, auf meinen Wert 4 in y draufaddiert. Wenn ich z abfrage, dann kriege ich eine Exception, weil z ist außerhalb der Funktion nicht definiert. So, jetzt kommt der Freaky Shit. JavaScript kennt überhaupt keine Klassen. Das denken wir uns nicht, wie mache ich da Objektorientierung? In JavaScript gibt es nur Objekte und die Vererbung läuft Prototypen basiert. Das heißt, du definierst nicht eine Klasse und erstellst dann beliebig viele Objekte davon, sondern du kannst quasi ein Objekt definieren und dann andere Objekte definieren und sagen okay, und die erben von dem Objekt. Das heißt, du machst nicht irgendwie eine feste Klasse vorher, sondern du kannst direkt von einem Objekt vererben. Im Prinzip ist es wie eine Art verketterte Liste, wie eine Art Simlings. Wenn irgendwie eine Property in einem Objekt nicht gefunden wird, dann wird im Prototype geguckt. Ist es da zu sehen? Nein, dann gehen wir vielleicht in dessen Prototype und so weiter, bis es keinen mehr gibt. Das ist ziemlich mächtig. Man kann damit interessante Sachen machen. Insbesondere war man ja ein Objekt, den Prototypen, kann man im Nachhinein, nachdem man die Vererbung definiert hat, immer noch ändern. Und alle Objekte, die davon erben, kriegen plötzlich diese neuen Dinger, die du eingebaut hast. Da gibt es ein paar Libraries zum Beispiel, die das benutzen. Unter anderem die Prototype, wer das kennt, das ist so eine Web-Entwicklungs-Javascript-Library, die hängt alle mögliche abgefahrene Sachen hinter uns sonst was dran. Das kommt dann auf den ersten Blick ganz praktisch vor, ist es aber nicht. Gibt es einen schönen Artikel dazu, wer Interesse hat, kommt nochmal zu mir, verlinke ich den mal. Genau, also Beispiel. Ich definiere ein Objekt, Animal, das hat erstens den Key Lives, Eins, und eine Funktion, Die, die habe ich jetzt mal in Anführungszeichen geschrieben, weil ich nicht wusste, ob Die funktioniert. Und die Funktion erniedrigt einfach Lives um Eins. So, und jetzt kann ich ein zweites Objekt definieren, Cat, und setzt da drin einfach Lives auf 9, und kann dann sagen, cat.prototype, dieses .prototype gibt es automatisch auf jedem Objekt, ist Animal. Und damit habe ich diesen Zeiger definiert. Das heißt, wenn ich jetzt cat.die schreiben würde, würde er feststellen, ich habe keine die Funktion und gehe ich in den Prototyp. Aha, da gibt es eine. Alles klar, die kann ich benutzen. So, da steht übrigens auch dieses schöne This, zu dem wir gleich noch kommen. Okay, This gibt es innerhalb von Funktionen, und This verweist auf das Objekt, über das die Funktion aufgerufen wurde. Das ist ein großer Unterschied, zu über das die Funktion definiert wurde. Gucken wir uns das Beispiel an. Ich definiere ein Objekt, O. Das hat den Key Well mit dem Wert 3, und ein Key Foo, das ist eine Funktion, und die gibt einfach List.Well mal 2 zurück. Wenn ich jetzt O.Foo aufrufe, passiert das ganz normale, was ich mir gedacht habe, es kommt 6 zurück. Jetzt definiere ich ein zweites Objekt, O2, und das kriegt jetzt auch wieder eine Methode Foo und die verweist einfach nur auf O.Foo, auf die aus dem O-Objekt. Wenn ich jetzt O2.Foo aufrufe, passiert die interessante Sache. Ich kriege nämlich NAT Enammer zurück. Also im Prinzip, ich habe versucht, zu rechnen mit irgendwas, was keine Zahl ist. Warum ist das so? Weil This in dem Funktionsaufruf nicht etwa auf O zeigt, sondern auf O2. Das heißt, was passiert ist, ich gehe in diese Funktion rein, und This zeigt sozusagen also wenn ich jetzt hier durch den Mauszeige, ja wunderbar, O2.Foo und Javascript geht quasi her, guckt sich, was ist vor dem Punkt, aha, das hier, das ist List. So einfach ist das. So, und wenn ich jetzt zum Beispiel das Ding komplett außerhalb von einem Objekt nehme, also irgendwie Blob ist einfach die Funktion, das ist übrigens falsch, wenn man hier müsste euch wegdenken, ich will die Funktion hier nicht ausführen, sondern nur die Funktion selbst zuweisen. Wenn ich dann Bloob aufrufe, kommt auch NAT Enammer. Was ist This dann in dem Fall? This ist in dem Fall das Window Objekt. So, da kann man ganz lustig auf die Fresse fallen damit. Fragen gerade dazu. Okay, ja doch. Das ist ja kein Prototype. Also du siehst, dass ich dir nirgends irgendwo ein Prototype definiere, wenn ich das auf diese Funktion kopiere. Aber selbst wenn, ihr wird auch nicht auf den Prototype gucken. Dann würde er das nehmen. Ja, wenn da auch ein Wall definiert ist, nimmt er das. So, jetzt haben wir genug Hässlichkeiten gesehen, jetzt schauen wir mal, wie macht man eigentlich heute schönen JavaScript. Das erste geile Teil sind Closures. Du kannst in JavaScript Funktionen innerhalb von Funktionen definieren. So, jetzt wissen wir, dass das Scoping in JavaScript basiert auf den Funktionen. Das heißt, Funktionen, die in einer Funktion definiert sind, sehen die Variablen von der äußeren Funktionen. Und das ist Awesomeness. Da kann man nämlich sehr interessante Sachen mitmachen, zum Beispiel private Variablen basteln. So, jetzt vorsicht, nächste Folie. Also, ich definiere eine Funktion. Und ich weiß dir der Variable Enamel zu. Die Funktion übernimmt, einen Parameter StartLives. So, innerhalb dieser Funktion definiere ich eine Variable und lokale Variable Lives. Und die kriegt erstmal als StartWert, denn wir jetzt StartLives. Und dann gebe ich zurück ein Objekt. Dieses Objekt hat genau eine Methode, nämlich die Methode Di. Das ist eine Funktion. Und die erniedrigt Lives um eins. Was hier ganz wichtig ist, vor diesem Lives steht kein This. Das heißt, dieses Lives wird im Prinzip von JavaScript gesucht innerhalb der aktuellen Funktion. Okay, gibt's nicht. Dann gehe ich eine Funktion nach draußen. Aha, da gibt's es. Damit mache ich was. So, jetzt definiere ich eine Variable Bello. Und weiß ihr, ich weiß dir das zu, was quasi zurückkommt, wenn ich Animal mit dem Wert 1 aufrufe. Das heißt, Lives ist eins. Also Lives wird auf eins gesetzt und dieses Objekt hier wird zurückgegeben. Dieses Objekt mit dem einen Key Di mit einer Funktion dran. Wenn ich jetzt hier frage Bello.Lives, dann ist es undefined. Weil das in diesem Objekt hier nicht definiert ist. Wenn ich jetzt aber sage Bello.Di, dann wird die Funktion hier aufgerufen und setzt dieses Lives eins runter. Tada, private Variable in JavaScript, wie vorgesehen war. Was ihr zum Beispiel hier auch seht, ich habe hier quasi ein Objekt. Ich habe ein Objekt, irgendwie ein Tier und das erschaffe ich ohne das Schlüsselwort New. Also wenn man sich so die Tutorials anguckt, wie mache ich in JavaScript irgendwelche Objekte, dann sieht man da meistens abgefahrenes Zeug, wo irgendeine Konstruktorfunktion definiert wird und dann kriegt die über Prototype einen Haufen Methoden dran gehängt und dann ist das Schluss instanziert mit New. Das ist alles Kacke. Macht das nicht. Nehmt genau sowas, weil dann habt ihr nicht das Problem mit dem Disk. Das ist das Hauptproblem dabei. Dass man sich bei JavaScript nie darauf verlassen kann, dass Disk tatsächlich so funktioniert, wie man sich es vorstellt. Das kann übrigens auch ein Feature sein. Also zum Beispiel in jQuery, das ist so eine Web-Entwicklungslibrier, das setzt Disk manchmal absichtlich auf irgendwelche interessanten Sachen. Zum Beispiel in irgendeinem Event-Händler, was mal sehe ich, du hast irgendwie einen Link in deinem HTML-Dokument und der wird angeklickt und du hast ein Event-Händler, der dann aufgefrufen wird, wenn da draufgeklickt wird. Und dann setzt jQuery automatisch Disk bei diesem Aufruf nicht auf irgendein Code-Fragment oder sowas, sondern Disk ist tatsächlich in dem Fall dieses HTML-Element. Was natürlich eigentlich ziemlich cool ist. Weil man dann genau sagen kann in seinem Event-Händler, okay, this. Keine Ahnung, kann dann irgendwie auf Sachen von diesem HTML-Element zugeleifen. Ja? Wie gescheite das Electro-Engine hat und wenn ja, benutzt es aus Performance-Grunden lieber die. Also es ist ziemlich gluck gemacht. JQuery ist eine ansatzweise große Library, die ist irgendwie 50 Kilobytes groß. Ja? Je nachdem, wofür ihr entwickelt, macht das vielleicht tatsächlich wie es hier geht. Also wenn ihr irgendwie auf Mobil-Geräten und die Leute rennen nur mit gps rum und müssen 10 Sekunden warten, bis euer jQuery geladen ist, ist das schlecht. Es gibt auch ein Haufen kleinere Frameworks, je nachdem. Ich bin vor kurzem auf diese Seite gestoßen worden, MicroJS. Wem jQuery zu bloatig ist, hier gibt es für alles, für CSS-Selektoren, für irgendwie Dome-Manipulationen, für winzig kleine Jagd, 0,5 Kilobyte und lauter so Dinge, wo man wirklich genau das in seine Applikation einbinden kann, was man gerade braucht. Das ist ein cooles Teil. Genau, so. Code und Content trennen. Hoplas ist 2011, ich erzählt immer noch, dass man Code und Content trennen muss, ja, aber es ist tatsächlich so. Haufenweise auch neue Software wird geschrieben mit solchen Sachen hier, Buddy, Onload und dann passiert das und das. Form, Onsup mit und dann passiert das und das. Das ist total kacke. Meil. Erstens habt ihr jetzt hier, okay, ich rufe jetzt hier Alert auf, also Alert ist die Standard-Javascript- Funktion, mit der man irgendwas testen will, die halt schon so eine Messagebox aufpoppt. So. Wenn ihr da natürlich eigenen Code drin stehen habt, dann steht da der Name von irgendeiner Methode, von irgendeiner Funktion, die ihr aufrufen wollt drin. Wenn ihr da drin sichtbar ist, muss die global sein. Und das ist halt wieder blöd. So. Und deshalb lieber bleiben lassen. Und die zweite Sache ist halt, es ist schwieriger, wenn man so was hat, dass man es so baut, dass es auch ohne JavaScript funktioniert. Im nächsten Beispiel, was man sich stattdessen machen sollte, wäre irgendwie Events im Nachhinein beinden. So. Wer noch nicht mit jQuery gearbeitet hat, jQuery hat hier definiert eine globale Funktion, jQuery. Die kann man auch abkürzen mit $. Das ist überhaupt nichts Magisches. $ ist ein gültiger variablen Name in JavaScript. Das ist einfach die Abkürzung für jQuery. Das heißt, ob ich jetzt hier oben jQuery oder $ schreibe, ist ein normales Fall egal. So. Und dieser großen jQuery Funktion kann nicht standardmäßig ein Haufen interessantes Zeug zuwerfen. Und je nachdem, was für ein Typ das ist, was ich ihm gebe, passiert irgendwie was anderes. Die Zeit, die ich hier oben demonstriere, ist, ich kann ihm eine Funktion übergeben. Und dann bedeutet das, dann ist das kurzschreibweise für, wenn das Dokument geladen ist, mache diese Funktion. So. Und das heißt, damit habe ich jetzt dieses BodyOnLoad erschlagen. Das macht im Prinzip genau das gleiche. Wenn fertig geladen ist, dann alert. So. Die andere Sache, die ich dieser jQuery Funktion übergeben kann, ist zum Beispiel ein String. Dann wird es als CSS-Selektor benutzt. Wenn das String nach HTML aussieht, wird irgendwie das entsprechende HTML-Element erstellt. Also es ist total abgefahren. So. Hiermit selektiere ich quasi, ich kriege eine Menge an Elementen zurück. In dem Fall alle Formelemente in meinem Dokument. Und jetzt kann ich darauf diverse Funktionen aufrufen, zum Beispiel PunktSubmit. PunktSubmit ist eine Teilweise für BindSubmit. Mit dem ich also das Submit-Event beinden kann. Und das heißt, wenn das Submit-Event ausgelöst wird, auf diesem Formelement dann wird die und die Funktion aufgerufen. So. Und das kann ich alles im Nachhinein machen, nachdem ich die ursprünglichen Geschichten gemacht habe. Also nachdem der Code, der normal HTML-Code geladen ist. So. Dinge ohne JavaScript funktionieren lassen. Schlechtes Beispiel oben. Aharref ist so. Und jetzt mache ich per JavaScript irgendwie die Funktion loadTub. Und was mache ich, wenn jetzt eine ankommt, der kein JavaScript hat? Dann passiert beim Blick darauf im besten Fall genau gar nichts. Im schlimmsten Fall kriegt er irgendeine abgefahrene Fehlermeldung. Stattdessen definiere ich den Link so, dass da wirklich ein ganz normaler, etwas sinnvolles tut. Beispiel an der Stelle ist, ich habe irgendwie so eine Seite mit mehreren Reitern und einer davon ist Info und wenn ich auf diesen Info-Link klicke, dann soll halt nicht die komplette Seite neu geladen werden, sondern ein paar Ajax, Magie, nur der Inhalt irgendwo weiter unten. So. Und dafür habe ich diese LoadTab-Funktion. Wenn es aber jemand ohne JavaScript kommt, dann funktioniert das nicht. Wenn er da draufklickt, passiert genau gar nichts. Und er kann niemals eure schöne Info-Seite sehen. Das ist ganz normal Link draus, der auf Slash Info zeigt. Und wenn jetzt jemand ohne JavaScript kommt, landet er einfach auf Slash Info, wo im optimal Fall die Info-Seite angezeigt wird. Und außerdem definiere ich dann weiter unten noch mal hier so eine Geschichte. Ich selektiere mit jQuery das Element mit der ID Info-Link und beinahe ein Event drauf, nämlich das Klickevent. Und wenn da draufgeklickt wird, passiert folgendes. Hier wird aufgerufen mit dem Parameter Info, genau wie hier oben. Und dann wird false zurückgegeben. Und wenn ich in so einem Klickevent la false zurückgebe, heißt das, macht die normale Aktion, die du eigentlich tun würdest, nicht. Und das bedeutet an der Stelle, wenn da draufgeklickt wird, dann wird diese LoadTab-Funktion aufgerufen. Aber der Browser navigiert nicht zu dem Ziel dieses Links hin. Das heißt, ich kann damit sozusagen abbrechen, was er eigentlich machen würde. Und das heißt, ich kann mit JavaScript entsprechend Enhanzen und coole andere Dinge damit machen. Stichwort Progressive Enhancement. Wenn du das selektierst, muss es die ID schon geben. Aber da die oben rüber definiert ist, sollte die schon verfügbar sein. Du kannst es, du kannst es natürlich auch in der Document-Load-Funktion definieren. Das ist erst ganz am Schluss, nach dem Laden des Dokuments überhaupt gebeindet wird, dass eines die ID schon existiert. Es gibt in jQuery aber auch die Möglichkeit, das Ganze so zu bauen, dass die ID noch nicht existieren muss, um es im Prinzip eben nachhinein gebeindet werden würde. So, genau. Bei Progressive Enhancement waren wir, das ist so ein Begriff, so ein Buzzword, den man selten häufiger hört, als Graceful Decoration. Das sind so zwei Sachen wie Klarsprache. Graceful Decoration bedeutet im Prinzip wenn